1. 레이아웃

Scene에는 다양한 컨트롤이 포함되는데, 이들을 배치하는 것을 Layout(레이아웃) 이라 한다.

JavaFX에서 레이아웃을 작성하는 방법은 2가지가 있다.

• 프로그램적 레이아웃
• 선언적 레이아웃

1.1 프로그램적 레이아웃

자바 코드로 UI 컨트롤을 배치

• 컨트롤 배치, 스타일 지정, 이벤트 처리를 모두 자바 코드로 작성
• 레이아웃이 복잡할수록 난해해지기 쉬움
• 개발자가 직접 작성해야 하므로 디자이너와 협업 어려움
• 간단한 레이아웃 변경에도 재컴파일해야하는 단점 존재

1.2 FXML 선언 레이아웃

XML기반 마크업 언어인 FXML로 UI 레이아웃을 태그로 선언

• Android App 개발과 유사
• 디자이너와 협업 쉽고, 간단한 레이아웃 편집은 태그만 수정
• Scene 간 재사용이 쉬워 개발 기간 단축 가능

다음은 동일한 레이아웃을 가진 코드를 각각 프로그램적 레이아웃과 FXML 방법으로 작성한 코드이다

프로그램적 레이아웃

//root.java
package application.myapp;

import javafx.application.Application;
import javafx.collections.ObservableList;
import javafx.scene.Scene;
import javafx.scene.control.TextField;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;

public class root extends Application {

    public static void main(String[] args) {

        launch(args);
    }

    @Override
    public void start(Stage primaryStage) {
        HBox hbox = new HBox(); //HBOX 컨테이너 생성
        TextField textField = new TextField(); // TextField 컨트롤 생성
        textField.setPrefWidth(100); // TextField 폭 설정

        ObservableList list = hbox.getChildren(); // HBOX의 ObservableList 얻기
        list.add(textField); // TextField 컨트롤 배치

        Scene scene = new Scene(hbox); // Scene 생성
        primaryStage.setScene(scene); // stage에 Scene 할당
        primaryStage.show();
    }
}

FXML 선언 레이아웃

//root.fxml
<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<HBox xmlns:fx="http://javafx.com/fxml">
    <children>
        <TextField>
            <prefWidth>200</prefWidth>
        </TextField>
    </children>
</HBox>

Scene Builder를 사용하면 보다 쉽게 FXML을 작성할 수 있다.

2. FXML 로딩

FXML파일을 작성했다면, FXML파일을 읽어 선언된 내용을 객체화해야 한다.

FXML파일을 로딩하기 위해선 javafx.fxml.FXMLLoader 를 사용해야 한다.
Loader는 정적 메소드 load() 와 인스턴스 메소드 load()를 가지고 있다.

정적 메소드로 로딩

Parent root = FXMLLoader.load(getClass().getResources("xxx.fxml"));

인스턴스 메소드로 로딩

FXMLLoader loader = new FXMLLoader(getClass().getResources("xxx.fxml"));
Parent root = (Parent)loader.load();

• getClass() 는 현재 클래스를 리턴한다.
• getResources() 는 클래스가 위치하는 곳에서 상대 경로로 URL을 리턴한다
• load() 메소드가 리턴하는 타입은 Parent타입인데. 실 객체는 FXML파일에서 루트 태그로 선언된 컨테이너이다

FXML 로딩 후 Parent객체를 얻었다면 다음 코드로 Scene 객체를 생성하면 된다.

Scene scene = new Scene(root);

다음은 FXML을 로딩하는 예제이다.

//FXMLTest.java
package application.myapp;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

import java.io.IOException;

public class FXMLTest extends Application {

    public static void main(String[] args) {

        launch(args);
    }

    @Override
    public void start(Stage primaryStage) throws IOException {
        Parent root = FXMLLoader.load(getClass().getResource("root.fxml"));
        Scene scene = new Scene(root);
        primaryStage.setTitle("ji");
        primaryStage.setScene(scene);
        primaryStage.show();
    }
}