JavaFX - 15 | Java FXML과 Controller의 사용법 기초 | 초기화 | FXML 문법

이전까지의 JavaFX 튜토리얼로 코드를 사용해서 JavaFX를 다룰 수 있었다.

 

JavaFX의 GUI 클래스에 CSS도 사용해봤다.

 

마지막으로 알아야 할 부분은 Java FXML 이다. FXML은 자바에서 사용할 수 있는 HTML 이다. 요소를 배치하는데는 HTML이 가장 뛰어난 만큼 FXML을 사용하면 마치 HTML을 짜는 것 처럼 코딩이 가능하다. 최종적으로는 씬빌더(Scene Builder)를 사용하여 GUI에서 디자인 작업을 하듯 앱을 만들 수 있기 위해서 FXML 을 사용한다.

 

인텔리제이를 사용해서 JavaFX 프로젝트를 생성하면 기본적으로 Main.java , Controller.java, sample.fxml 세개의 파일을 생성하여 기본 코드를 작성해준다.

 

*기본 FXML 파일을 약간 손을 본다. VBox는 수직 레이아웃이니까 가운데에 모아서 보기가 좋다.

<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>


<VBox prefHeight="400.0" prefWidth="600.0" fx:controller="sample.Controller"
      xmlns:fx="http://javafx.com/fxml" alignment="center">

    <Label text="Welcome to the JavaFX tutorial!"/>

    <Label>
        <text>Label 2 element</text>
    </Label>

    <Button text = "Submit" fx:id="button" onAction="#buttonClicked"/>

</VBox>

 

HTML 을 배운적이 있다면 비슷한 느낌이 들 것이다. 비슷하면서도 약간 다른 부분이 있음에 주의한다.

 

javafx 의 클래스를 import 해야 Label, Button 같은 클래스를 사용할 수 있다.

 

태그로 구조를 짜는데 요소의 속성을 태그로 분리할 수도 있다.

 

VBox (레이아웃) 태그에 fx:controller 속성에 콘트롤러 지정이 되어있다. "패키지.클래스" 명으로 명시를 해놨다.

 

*콘트롤러 사용법

 

콘트롤러는 하나의 앱에 하나만 존재한다.

 

버튼을 클릭했을 때 발생하는 이벤트 핸들러를 정의해본다. 아래 FXML과 콘트롤러가 어떻게 링크되었는지 유심히 보면 button 이 fx:id 로 써있고 콘트롤러에서는 이 button을 선언하여 그대로 사용한다. new 연산자로 인스턴스를 만들지 않아도 자동으로 연결이 된다. 또 onAction  에 #buttonClicked 라 지정된 것은 메소드로 연결된다. 이벤트 발생시 처리하는 메소드다.

 <Button text = "Submit" fx:id="button" onAction="#buttonClicked"/>

package sample;

import javafx.scene.control.Button;

// Logic and one single controller
public class Controller {

    public Button button;

    public void buttonClicked(){
        System.out.println("Button Clicked");
        button.setText("Clicked Button!");
    }
}

 

 

앱 초기화 (콘트롤러)

콘트롤러에서 앱을 초기화 할 수 있다. Initializable 인터페이스를 구현하는 것이다. 앱이 시작하면 초기화한다.

public class Controller implements Initializable {


    @Override
    public void initialize(URL url, ResourceBundle resourceBundle) {
        System.out.println("Loading user data...");
    }
}

 

* fxml 의 문법을 좀 더 보자.

 

HTML 처럼 id를 사용하여 객체를 재사용할 수 있다.

 

    <Label text="Welcome to the JavaFX tutorial!" fx:id="firstLabel">
        <font>
            <Font size="30"/>
        </font>
    </Label>
    <Label text="${firstLabel.text}">
        <font>
            <Font size="20"/>
        </font>
    </Label>

* 토글 그룹을 사용하여 라디오버튼을 묶을 수 있다.

    <fx:define>
        <ToggleGroup fx:id="toggleGroup"/>
    </fx:define>

    <RadioButton text="Easy" toggleGroup="$toggleGroup"/>
    <RadioButton text="Medi" toggleGroup="$toggleGroup"/>
    <RadioButton text="Hard" toggleGroup="$toggleGroup"/>

---

여기까지 튜토리얼을 진행했다면 JavaFX 프레임워크의 모든 세부사항은 다루지 않았어도 GUI의 전체 그림은 그려졌을 것이다. 이제 Scene Builder 를 설치해서 드래그앤 드롭으로 편하게 만들 차례다. 어차피 GUI 툴을 쓸거면서 왜 귀찮게 JavaFx의 요소들을 하나씩 알아봤을까? 프레임워크를 잘 쓰기 위해서는 그 안에 들어있는 실제 코드들을 알아봐야 한다. 그래야 툴을 사용해서 만들어도 오류가 생겼을 때 그 더 빨리 대처할 수 있다.

 

기본 구조를 한번 알면 다른 컴포넌트를 다루는 것도 어렵지 않다. 항상 언어는 처음에 시작하기 어렵고 그 다음에 성실히 완주하기 어렵다. 두 가지만 극복하면 어떤 언어라도 마스터할 수 있다.

(물론 말이 쉽지 시간과 노력이 많이 든다.)