Zdiv's Software Snippet: [JavaFX] GUI Design with SceneBuilder (SceneBuilder로 JavaFx GUI 디자인 하기

JavaFX는 Java언어를 이용하여 GUI프로그램을 만들기 위한 API Set을 제공하며, Java 8 부터는 SDK에 기본적으로 포함되어 배포된다. 기존의 Java Swing 이나 SWT/JFace를 대체하는 SDK라고 생각하면 된다.

JavaFX에서는 텍스트 에디터만을 사용해서 GUI 응용 프로그램을 만들기 위한 API를 모두 제공하며, SceneBulider와 같은 GUI 디자인 도구를 이용하여 화면을 디자인하고, XML파일로 저장한 후, 이를 Loading 하여 손쉽게 GUI 화면을 구현하는 방법도 제공한다.

프로그래밍 만으로 GUI 프로그램을 만드는 방식을 JavaFX 프로젝트라고 하며, SceneBuilder와 같은 디자인 도구로 제작한 XML 파일을 로딩하도록 GUI 프로그램을 만드는 방식을 JavaFXML 프로젝트라고 한다.

여기서는 JavaFXML 프로그램을 만들기 위해 필요한 SceneBuilder 사용법에 대해 정리한다. SceneBuilder는 최초 Oracle에서 개발을 시작하였으나, 현재는 Oracle에서는 개발을 중단하고 Gluon에서 지속적인 업데이트를 하고 있다.

1. SceneBuilder 다운 받기

1) 구글에서 SceneBuilder로 검색한다.

2) Gluon 홈페이지로 이동하여 OS에 맞는 버전을 다운 받는다.

현재는 Java 8 과 Java 9 용의 SDK가 별도로 제공 된다. 여기서는 Java 8용 SDK를 사용하는 것으로 설명한다. 이유는 Java 9 이 글을 쓰는 시점에서 아직 안정화가 되어 있지 않고, netbeans 와 같은 IDE에서도 아직 지원하지 않고 있기 때문이다.

프로그램은 jar 단독 실행 파일과 인스톨러의 형태의 2가지를 제공하는데, 단순히 화면을 디자인하고 FXML 파일을 생성하는 기능만 사용하려면 jar 파일을 다운 받아서 사용할 수 있으나, Netbeans, Eclipse, Intelij 등의 IDE와 함께 사용하려면 인스톨러를 다운 받아야 한다.

2. SceneBuilder 실행하기

Jar 파일을 다운 받은 경우에는, 해당 Jar 파일을 실행하면 바로 디자이너 화면을 볼 수 있으며, 인스톨러나 압축된 파일을 받은 경우에는 설치후 실행파일을 실행하면 된다.

1) Jar 파일을 다운 받은 경우

2) 설치 파일을 이용하여 설치한 경우

3) SceneBuilder를 실행한 화면

3. IDE에 SceneBuilder 연결하기

일반적으로 Java는 Netbeans, Eclipse, Intellij 와 같은 IDE를 사용하여 프로그래밍을 하게 되므로, 해당 IDE와 SceneBuilder를 함께 사용하는 방법에 대해 설명한다.

위의 3가지 IDE 모두 SceneBuilder와 함께 사용할 수 있으나, 여기서는 netbeans를 사용하는 방법으로 설명하고자 하는데, netbeans에서는 FXML 파일에서 Controller 추상 클래스 파일을 생성하는 기능을 제공하여, 별도의 지식이 없이도 FXML Controller를 쉽게 구현 할 수 있기 때문이다. 또한 netbeans의 플러그인 중에는 "FXML to JAVA Converter" 라는 것이 있어서, FXML 파일을 Java 파일로 변환하여, JavaFXML 프로젝트 대신 JavaFX 프로젝트로 시작하는 것도 가능하기 때문이다.

1) Netbeans에 SceneBuilder 연결하기

Netbeans 메뉴에서 Tools -> Options 를 선택하면 Options 다이얼로그가 실행되는데, 여기에서 상단의 java를 선택 후 중간의 JavaFX 탭을 선택한다. Scene Builder Home 폴더에 기존에 설치한 SceneBuilder의 설치 폴더를 지정하면 된다.

2) Netbeans에서 SceneBuilder 실행하기

Netbeans 프로젝트에서 fxml 파일을 더블 클릭하거나, 오른쪽 마우스 버튼을 클릭한 뒤 Open 메뉴를 선택하면 SceneBuilder가 실행된다.

SceneBuilder는 다음과 같이 왼쪽에 위젯에 추가할 컨트롤을 선택하는 메뉴가 있으며, 가운데에 위젯 디자이너, 오른쪽에 각 컨트롤들의 속성을 지정할 수 있는 속성 메뉴가 있다. 위젯에 컨트롤을 추가하기 위해서는 왼쪽에 있는 컨트롤을 드래그하여 가운데 있는 위젯에 드랍하거나, 왼쪽의 Hierarchy 메뉴에 직접 드랍하여 추가할 수도 있다.

4. Controller 소스 생성하기

SceneBuilder에서 파일을 수정 및 저장한 뒤에, fxml 파일에서 오른쪽 마우스 버튼을 클릭한 뒤, Make Controller 메뉴를 선택하면 해당 내용이 반영된 컨트롤러 파일이 생성되고, 이미 파일이 존재하는 경우에는 업데이트된다. 이 때, Controller는 MVC(Model / View / Controller) 모델에서 Controller에 해당하므로, View에서 Controller 관련 내용이 변경된 경우에만 해당 내용이 반영된다. 즉, SceneBuilder에서 컨트롤들을 추가한뒤 해당 컨트롤의 이름을 추가 또는 변경하거나, Event Handler를 지정한 경우에 해당 소스가 반영되어 생성된다.