JavaFx 05. Scene Builder 설치 및 사용하기

자바FX에서 디자인을 쉽게 할수 있도록 도와주는 툴

'Scene Builder' 를 설치하고, 사용하는 방법을 소개하겠습니다.

Scene Builder의 다운은 아래 링크에서 가능합니다.

http://gluonhq.com/labs/scene-builder/

위 링크를 타고 가면 위 스샷과 같은 화면이 표시될것 입니다.

화면은 아래로 내려서 자신의 OS에 적합한 버전을 다운로드 받으시면 됩니다.

저는 Windows10 64bit 를 사용하고 있기 때문에 표시된 버전을 다운로드 받았습니다.

다운로드가 완료되면 설치해 주세요.

가능하면 설치 위치를 알기 쉬운곳으로 지정하기를 권장합니다.

다음으로 할 일은 Eclipse 에 Scene Builder 를 연결하는 것입니다.

Window -> preference -> JavaFX -> Browse 에서

조금 전에 설치한 Scene Builder.exe 를 찾아서 선택해 줍니다.

이제 Scene Builder 를 사용할 준비가 끝났습니다.

JavaFX 클래스를 하나 생성합니다.

package installing_JavaFX_Scene_Builder;
 
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
 
public class HelloWorld extends Application{
    public static void main(String[] args) {
        launch(args);
    }
 
    @Override
    public void start(Stage primaryStage) throws Exception {
        
        /* 
         * Scene Builder 를 이용하여 화면을 만들고 자바에 fxml 파일을 연결시켜준다.
         * Parent 클래스의 정의는 다음과 같다.
         * The base class for all nodes that have children in the scene graph.
         * 즉 모든 아이들(컨포넌트들)이 소속될 부모(Scene) 정도?          
         */
        Parent root = FXMLLoader.load(getClass().getResource("Main.fxml"));
        Scene scene = new Scene(root);
        primaryStage.setTitle("My title");
        primaryStage.setScene(scene);
        primaryStage.show();
        
        /*
         * Scene Builder 는 Window -> Preference -> JavaFX 에 위치를 등록하면
         * fxml 파일을 우클릭 하여 Open with Scene Builder 를 선택해서 편집 가능하다.
         */
        
    }
}
 

new -> other

New FXML Document 을 생성해 줍니다.

생성된 fxml 파일을 우클릭 -> open with scene builder 를 클릭

위와 같이 Scene Builder 가 열립니다.

왼쪽에 위치한 파레트에서 사용자가 원하는 요소들을 드래그 앤 드롭으로

가운데 위치한 도화지(?) 위로 던져놓으면 됩니다.

전 가볍게 버튼 3개를 얹어봤습니다.

<?xml version="1.0" encoding="UTF-8"?>
 
<?import java.lang.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.layout.AnchorPane?>
 
 
<AnchorPane prefHeight="453.0" prefWidth="325.0" 
   xmlns:fx="http://javafx.com/fxml/1" 
   xmlns="http://javafx.com/javafx/8">
   <children>
      <Button layoutX="129.0" layoutY="60.0" mnemonicParsing="false" text="Button" />
      <Button layoutX="129.0" layoutY="212.0" mnemonicParsing="false" text="Button" />
      <Button layoutX="129.0" layoutY="129.0" mnemonicParsing="false" text="Button" />
   </children>
</AnchorPane>
 

Eclipse 로 돌아와서 소스코드를 보면 자동으로 위와 같이 코드가 입력되어 있습니다.

어플리케이션을 실행해 보면 

위와 같이 완성!!!

Scene Builder 에서 하나씩 컨텐츠 들을 사용해 보면 

금방 기능을 익힐 수 있을 것입니다.