컨트롤을 쉽게 배치할 수 있도록 도와주는 클래스

▼컨트롤이란? 사용자와 상호작용 하기 위한 이벤트를 생성하는 개체

1.1 컨테이너의 종류

1.1.1 AnchorPane

컨트롤을 좌표로 배치하는 컨테이너

• AnchorPane 컨테이너는 Scenebuilder를 사용하여 쉽게 디자인 할 수 있다.
• AnchorPane을 사용해서 컨트롤을 좌표로 배치하면 컨트롤의 재배치가 일어나지 않는다.
• Stage의 setResizable(false) 메소드를 호출하여 이용할 수 있다.

1.1.2 BorderPane 컨테이너

top, bottom, left, right, center 셀에 컨트롤을 배치하는 컨테이너

• 다른 컨테이너도 배치 가능하지만 각 셀에 하나의 개체만 배치 가능
• top,bottom등을 배치하지 않으면 center에 배치된 개체가 자동으로 확장된다.

1.1.3 FlowPane

행으로 컨트롤을 배치하되 공간이 부족하면 새로운 행에 배치하는 컨테이너

1.1.4 TilePane

그리드로 컨트롤을 배치하되,고정된 크기를 갖는 컨테이너

• FlowPane과 유사

1.1.5 GridPane

그리드로 컨트롤을 배치하되 셀의 크기가 유동적인 컨테이너

• 셀 병합이 가능하기 때문에 입력 폼 제작시 유용

1.1.6 StackPane

컨트롤을 겹쳐 배치하는 컨테이너

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();
    }
}

JavaFX는 레이아웃, 스타일, 로직을 분리할 수 있어 디자이너와 개발자들이 협력할 수 있는 구조를 가지고 있다.

2. 메인 클래스

App 실행 순서 launch() -> 생성자 -> init() -> start() -> 사용 -> exit() -> stop() -> 종료

다음은 JavaFX App의 메인 클래스 코드이다.

//AppMain.java
public class AppMain extends Application {

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) {
        primaryStage.show();
    }
}

메인 클래스 실행을 위해선 다음과 같은 단계가 필요하다.

1. 추상 클래스인 javafx.application.Application을 상속
2. start() 메소드 재정의
3. launch() 메소드 호출

각 메소드별 역할

• launch() -> 메인 클래스 객체, 메인 윈도우 생성, start() 호출
• start() -> 메인 윈도우 실행
• init() -> 매개값을 App이 이용할 수 있게 가져옴
• stop() -> App이 종료되기 전 자원 정리

3. launch() 메소드의 스레드 생성

JavaFX API는 스레드에 안전하지 않다

멀티 스레드가 동시에 UI를 생성하거나 수정하면 문제가 발생한다. 따라서 launch() 메소드는 실행 시 두 개의 스레드를 생성하고 시작시킨다

• JavaFX-Launcher: init() 실행
• JavaFX Application Thread: Stage-UI 생성 및 수정, 입력 이벤트 처리

다음 예제는 기본 생성자, init(), start() stop() 메소드가 어떤 스레드에서 실행되는지 보여준다.

//ThreadTest.java
public class ThreadTest extends Application {
    public AppMain(){
        System.out.println(Thread.currentThread().getName()+": 생성자 호출");
    }
    @Override
    public void init(){
        System.out.println(Thread.currentThread().getName()+": init() 호출");
    }
    @Override
    public void start(Stage primaryStage) {
        System.out.println(Thread.currentThread().getName()+": start() 호출");
        primaryStage.show();
    }
    @Override
    public void stop(){
        System.out.println(Thread.currentThread().getName()+": stop() 호출");
    }
    public static void main(String[] args) {
        System.out.println(Thread.currentThread().getName()+": main() 호출");
        launch(args);
    }
}

실행 결과

4.Stage(무대), Scene(장면)

윈도우를 Stage로 표현, Stage는 한 번에 하나의 Scene을 가질 수 있다.

메인 Stage는 start()_메소드의 _primaryStage 매개값으로 전달되지만 Scene은 직접 생성해야 한다. Scene은 UI 루트 컨테이너인 javafx.scene.Parent가 필요하다.

Parent는 추상 클래스로, 하위 클래스로 객체를 생성하여 제공해야 한다. 실제로 UI컨트롤이 추가되는 곳은 Parent 가 되고, Parent의 폭과 높이는 Scene과 같다.

Scene을 생성하는 코드는 다음과 같다.

Scene scene = new Scene(Parent root);

Scene 생성 후 Stage에 올릴 땐 setScene() 메소드를 사용한다.

primaryStage.setScene(scene);

다음 예제는 VBOX를 이용하여 Scene을 생성하고 Stage에 할당해 실행하는 예제이다.

//VBoxApp.java
import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.VBox;
import javafx.scene.text.Font;
import javafx.stage.Stage;

public class VBoxApp extends Application {
    @Override
    public void start(Stage primaryStage) {
        VBox root = new VBox(); //Parent 하위 객체 VBOX생성
        root.setPrefWidth(300); //폭
        root.setPrefHeight(150); // 높이
        root.setAlignment(Pos.CENTER); // 컨트롤 가운데 정렬

        Label label = new Label(); // 라벨 컨트롤 생성
        label.setText("Java FX"); // text 설정
        label.setFont(new Font(30)); // font 설정

        root.getChildren().add(label); //VBOX의 자식으로 label추가

        Scene scene = new Scene(root); // VBOX를 루트 컨테이너로 하는 Scene 생성
        primaryStage.setScene(scene); // Stage에 Scene할당
        primaryStage.show();
    }
    public static void main(String[] args) {
        launch(args);
    }
}

실행 결과

이 글은 신용권, 『이것이 자바다』, 한빛미디어(2015) 에 기초하여 작성한 글입니다. 깃허브

JAVA GUI 프로그램 개발을 위한 프레임워크

• SWING을 대체
• 하드웨어 가속 지원
• 크로스 플랫폼 지원
• FXML - XML기반의 마크업 언어로 작성하는 UI
• CSS를 이용해 디자인 가능
• JDK 8 까지는 기본 제공 라이브러리였으나 JDK 11부터 분리됨

2. JavaFX vs SWING

_JavaFX의 장점 _

• AWT/SWING보다 빠름
• 깔끔하고 현대적인 디자인
• FXML을 사용해 코드에서 UI 분리 가능
• WebKit 사용으로 이미지, 사운드 삽입 편리
• SWING 어플리케이션과 통합 가능

3. JavaFX 시작하기

준비물 : JavaFX SDK, SceneBuilder

_ JavaFX 경로: C:\Program Files\Java\javafx-sdk-19\lib_ _ SceneBuilder 경로: C:\Users\사용자명\AppData\Local\SceneBuilder_

3.1 Eclipse에서 시작하기

Eclipse 2022-09 / JDK 17.0.5 / JavaFX 19 / SceneBuilder 19.0.0

❌(2022.12.23 기준) Eclipse 2022-12 버전에서 FXML 파일을 생성할 수 없는 오류가 보고되었으므로 2022-09 버전 설치를 권장합니다.

• Eclipse 상단 메뉴의 [Help-Eclipse MarketPlace...] 를 클릭하고 e(fx)clipse를 설치합니다.

• 하단의 프로그래스 바에서 설치 상황을 확인할 수 있습니다. 설치가 끝나면 eclipse를 재시작합니다.

• 설치가 완료되면 [File-New-Project...]에서 JavaFX Project를 만듭니다.

• 프로젝트를 만들었지만 추가적인 설정을 해 주어야 실행 가능합니다.

• Packege Explorer에서 프로젝트 우클릭 -> [Build Path - Configure Build Path...]을 클릭합니다. Modulepath를 클릭하고 우측의 Add Library를 클릭합니다.

• User Library -> Next -> User Libraries... -> New를 클릭하고, 라이브러리 이름을 설정합니다.

• 파일 탐색기에서 다운로드 받은 JavaFX 파일을 압축을 풀고, [JavaFX-lib] 폴더의 모든 Jar을 선택합니다.

• Eclipse가 JavaFX 프로젝트를 실행할 수 있도록 [Run-Run Configurations...]에서 Arguments의 VM arguments에 다음과 같은 명령어를 입력합니다.

  --module-path "[JavaFX lib 위치]" --add-modules=javafx.fxml,javafx.controls

• SceneBuilder를 설치하고 [Window-Preferences] JAVAFX 설정에서 SceneBuilder.exe의 경로를 지정합니다.

• 모든 과정을 완료하면 다음과 같이 실행됩니다.

3.2 IntelliJ에서 시작하기

IntelliJ 2022.3.1 / JDK 17.0.5 / JavaFX 19 / SceneBuilder 19.0.0

• IntelliJ의 경우 처음부터 JavaFX 프로젝트를 만들 수 있습니다.

• 초기 프로젝트를 build 후 다음과 같이 실행할 수 있습니다.

• 모듈을 사용하지 않는다면 Module-info.java를 삭제합니다.

• [File-Project Structure-Libraries] 에서 기존 Maven 라이브러리를 모두 삭제합니다.

• +버튼을 눌러 압축을 해제한 JavaFX SDK의 lib폴더를 지정합니다.

• [Run - Edit Configurations - Main class] 에서 클래스를 지정합니다.

• [Modify options - Add VM options] 를 추가하고 다음과 같은 명령어를 입력합니다.

  --module-path "[JavaFX lib 위치]" --add-modules=javafx.fxml,javafx.controls

• 좌측 Project View에서 FXML파일 선택 후 Open in SceneBuilder를 클릭하여 Scenebuilder.exe파일의 경로를 지정합니다.

• 모든 과정을 완료하면 다음과 같이 실행됩니다.