[Java] JavaFX - 메뉴바, 툴바, 다이얼로그

JavaFX는 여러 절로 구성되어 있습니다.

Intro

JavaFX 레이아웃(Layout)

JavaFX 컨테이너(Container)

JavaFX 이벤트 처리 & 속성 감시, 바인딩

JavaFX 컨트롤(Control)

JavaFX 메뉴바와 툴바 & 다이얼로그

JavaFX 스레드 동시성

---

JavaFX 메뉴바와 툴바

 1. MenuBar 컨트롤

  MenuBar 컨트롤은 컨테이너 상단에 배치되어, 다양한 작업을 쉽게 선택하도록 해줍니다. 

  Menu에는 메뉴 아이템으로 MenuItem, CheckMenuItem, RadioMenuItem, CustomMenuItem, SeparatorMenuItem을 추가할 수 있고, 서브 메뉴를 갖는 Menu도 추가할 수 있습니다.

  다음은 FXML로 MenuBar 컨트롤을 선언하는 방법을 보여줍니다.

<MenuBar>
    <menus>
        <Menu text="File">...</Menu>
        <Menu text="Edit">...</Menu>
    </menus)
</MenuBar>
 

  다음은 "File" 메뉴의 메뉴 아이템을 추가하는 방법을 보여줍니다.

<Menu text="File">
    <items>
        <MenuItem text="New File" onAction="#handleNew">
            <accelerator>
                <KeyCodeCombination alt="DOWN" code="N" countrl="UP" meta="UP"
                    shift="DOWN" shortcut="UP" />
            </accelerator>
            <graphic>
                <ImageView><image><Image url="@icons/new.png"/></image></ImageView>
            </graphic>
        </MenuItem>
    <items>
</Menu>

  MenuItem도 Button과 마찬가지로 클릭하면 onAction 속성에 지정된 컨트롤러의 메소드를 호출해서 ActionEvent를 처리합니다.

  <accelerator> 태그는 단축키를 설정하는데, 단축키는 KeyCodeCombination 객체로 생성합니다. Alt 키, Ctrl 키, Shfit 키, code 키 조합으로 구성할 수 있는데, DOWN으로 설정된 키와 code 키를 동시에 누르면 onAction 속성에 지정된 메소드가 호출됩니다. "New File" 메뉴 아이템일 경우 Alt + Ctrl + N 을 동시에 누르면 handleNew() 메소드가 실행됩니다.

  <graphic> 태그는 메뉴 아이템 앞에 아이콘이 추가됩니다.

 2. Toolbar 컨트롤

  계층적인 작업 선택 기능은 MenuBar 컨트롤이 편리하나, 빠르게 작업을 선택하고 싶다면 Toolbar 컨트롤을 추가하는 것이 좋습니다. 

  Toolbar 컨트롤은 UI 컨트롤이면서 컨테이너이기도 합니다. 주로 Button이 추가되지만, ComboBox와 같은 다른 컨트롤도 배치할 수 있습니다. 다음은 FXML로 Toolbar를 선언하는 방법을 보여줍니다.

<ToolBar>
    <items>
        <Button onAction="#handleNew">
            <graphic>
                <ImageView><image><Image url="@icons/new.png"/></image></ImageView>
            </graphic>
        </Button>
    </items>
</ToolBar>

  다음 예제는 상단에 MenuBar와 ToolBar를 추가하고 중앙에는 TextArea를 추가하여 간단한 메모장을 만든 것입니다. 각 메뉴 아이템과 툴바 버튼을 클릭하면 TextArea에 출력합니다.

 * notepadRoot.fxml

<?xml version="1.0" encoding="UTF-8"?>
 
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.control.MenuBar?>
<?import javafx.scene.control.Menu?>
<?import javafx.scene.control.MenuItem?>
<?import javafx.scene.input.KeyCodeCombination?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.control.SeparatorMenuItem?>
<?import javafx.scene.control.ToolBar?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.ComboBox?>
<?import javafx.scene.control.TextArea?>
<?import javafx.collections.FXCollections?>
<?import java.lang.String?>
 
<BorderPane xmlns:fx="http://javafx.com/fxml/1"
    prefHeight="200" prefWidth="400"
    fx:controller="javaFX.RootController">
    <top>
        <VBox>
            <children>
                <MenuBar>
                    <menus>
                        <Menu text="파일">
                            <items>
                                <MenuItem text="새로만들기" onAction="#handleNew">
                                    <accelerator>
                                        <KeyCodeCombination alt="DOWN" code="N" control="UP"
                                            meta="UP" shift="DOWN" shortcut="UP" />
                                    </accelerator>
                                    <graphic>
                                        <ImageView>
                                            <image>
                                                <Image url="@icons/new.png"/>
                                            </image>
                                        </ImageView>
                                    </graphic>
                                </MenuItem>    
                                <MenuItem text="열기" onAction="#handleOpen">
                                    <accelerator>
                                        <KeyCodeCombination alt="UP" code="O" control="DOWN"
                                            meta="UP" shift="UP" shortcut="UP" />
                                    </accelerator>
                                    <graphic>
                                        <ImageView>
                                            <image>
                                                <Image url="@icons/open.png"/>
                                            </image>
                                        </ImageView>
                                    </graphic>
                                </MenuItem>    
                                <MenuItem text="저장" onAction="#handleSave">
                                    <accelerator>
                                        <KeyCodeCombination alt="UP" code="S" control="DOWN"
                                            meta="UP" shift="UP" shortcut="UP" />
                                    </accelerator>
                                    <graphic>
                                        <ImageView>
                                            <image>
                                                <Image url="@icons/save.png"/>
                                            </image>
                                        </ImageView>
                                    </graphic>
                                </MenuItem>    
                                <SeparatorMenuItem />
                                <MenuItem text="끝내기" onAction="#handleExit"/>
                            </items>
                        </Menu>
                    </menus>
                </MenuBar>
                <ToolBar>
                    <items>
                        <Button onAction="#handleNew">
                            <graphic>
                                <ImageView>
                                    <image><Image url="@icons/new.png"/></image>
                                </ImageView>
                            </graphic>
                        </Button>
                        <Button onAction="#handleOpen">
                            <graphic>
                                <ImageView>
                                    <image><Image url="@icons/open.png"/></image>
                                </ImageView>
                            </graphic>
                        </Button>
                        <Button onAction="#handleSave">
                            <graphic>
                                <ImageView>
                                    <image><Image url="@icons/save.png"/></image>
                                </ImageView>
                            </graphic>
                        </Button>
                        <ComboBox prefWidth="100" promptText="선택">
                            <items>
                                <FXCollections fx:factory="observableArrayList">
                                    <String fx:value="공개"/>
                                    <String fx:value="비공개"/>
                                </FXCollections>
                            </items>
                        </ComboBox>
                    </items>
                </ToolBar>
            </children>
        </VBox>
    </top>
    
    <center>
        <TextArea fx:id="textArea" />
    </center>
</BorderPane>
 
 

 * RootController.java

 
package javaFX;
 
import java.net.URL;
import java.util.ResourceBundle;
 
import javafx.application.Platform;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.TextArea;
 
public class RootController implements Initializable {
 
    @FXML private TextArea textArea;
    
    @Override
    public void initialize(URL loc, ResourceBundle res) {
        
    }
    
    public void handleNew(ActionEvent e) {
        textArea.appendText("new\n");
    }
    public void handleOpen(ActionEvent e) {
        textArea.appendText("open\n");
    }
    public void handleSave(ActionEvent e) {
        textArea.appendText("save\n");
    }
    public void handleExit(ActionEvent e) {
        Platform.exit();
    }
    
    
}

 

JavaFX 다이얼로그(Dialog)

 다이얼로그는 주 윈도우에서 알림 또는 사용자의 입력을 위해서 실행되는 서브 윈도우라고 볼 수 있습니다. 다이얼로그는 자체적으로 실행될 수 없고, 주 윈도우에 의해서 실행되는데, 다이얼로그를 띄우는 주 윈도우를 다이얼로그의 소유자(owner) 윈도우라고 합니다.

 다이얼로그는 모달(modal)과 모달리스(modaless) 두 가지 종류가 있습니다. 모달 다이얼로그는 다이얼로그를 닫기 전까지 소유자 윈도우를 사용할 수 없고, 모달리스 다이얼로그는 소유자 윈도우를 계속 사용할 수 있습니다.

 javaFX에서 제공하는 다이얼로그 종류에는 파일을 선택하는 FileChosser, 디렉터리를 선택하는 DirectoryChooser, 팝업창을 띄우는 popup이 있습니다.

 1. FileChooser, DirectoryChooser

  FileChooser는 로컬 PC의 파일을 선택할 수 있는 다이얼로그입니다. 열기 또는 저장 옵션으로 실행할 수 있고, 파일 확장명을 필터링해 원하는 파일만 볼 수 있습니다. FileChooser는 컨트롤이 아니기 때문에 FXML에서 선언할 수 없습니다. 버튼이나 메뉴 아이템의 ActionEvent를 처리할 때 자바 코드로 FileChooser를 생성하고, showOpenDialog() 또는 showSaveDialog()를 호출해야 합니다.

  다음은 열기 옵션으로 FileChooser를 실행한 코드입니다.

FileChooser fileChooser = new FileChooser();
fileChooser.getExtensionFilters().addAll(
    new ExtensionFilter("Text Files", "*.txt"),
    new ExtensionFilter("Image Files", "*.png", "*.jpg", "*.gif"),
    new ExtensionFilter("Audio Files", "*.wav", "*.mp3", "*.aac"),
    new ExtensionFilter("All Files", "*.*")
);
File selectedFile = fileChooser.showOpenDialog(primaryStage);
String selectedFilePath = selectedFile.getPath();
 

  파일 확장명으로 파일 이름을 필터링하려면 ExtensionFilter를 생성해서 추가하면 됩니다. showOpenDialog() 또는 showSaveDialog()를 호출할 때에는 소유자 윈도우(Stage)를 파라미터로 제공해야 합니다. 왜냐하면 다이얼로그는 자체적으로 실행할 수 없고, 소유자 윈도우가 있어야 하기 때문입니다.

  FileChooser는 모달 다이얼 로그이므로 [열기] 또는 [저장] 버튼을 클릭하거나, [취소] 버튼을 클릭하기 전까지는 소유자 윈도우를 사용할 수 없습니다. 파일을 선택하고 [열기] 또는 [저장] 버튼을 클릭하면, showOpenDialog() 또는 showSaveDialog()가 File 객체를 리턴합니다. 

 2. Popup

  Popup은 투명한 컨테이너를 제공하는 모달리스 다이얼로그입니다. 따라서 소유자 윈도우는 계속 사용될 수 있습니다. Popup은 컨트롤의 툴팁(tooltip), 메시지 통지(notification), 드롭다운 박스(drop down boxes), 마우스 오른쪽 버튼을 클릭했을 때 나타나는 메뉴 등을 만들 때 사용될 수 있습니다. 

  다음은 FXML 파일을 로딩해서 Popup의 내용을 추가하는 코드입니다.

Popup popup = new Popup();
popup.getContent().add(FXMLLoader.load(getClass().getResource("popup.fxml")));
 

  Popup을 실행하려면 다음과 같이 show() 메소드를 호출하면 됩니다.

popup.show(primaryStage);
popup.show(primaryStage, AnchorX, anchorY);

  다음은 메시지 통지용 Popup을 만드는 예제입니다. 우선 Popup 내용을 정의한 FXML 파일을 봅시다. 

 * popup.fxml

<?xml version="1.0" encoding="UTF-8"?>
 
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.image.ImageView?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Label?>
 
<HBox xmlns:fx="http://javafx.com/fxml/1"
    alignment="CENTER_LEFT"
    style="-fx-background-color: black; -fx-background-radius: 20;">
    <children>
        <ImageView id="imgMessage" fitHeight="30" fitWidth="30" preserveRatio="true"/>
        <Label id="lblMessage" style="-fx-text-fill: white;">
            <HBox.margin>
                <Insets left="5" right="5" />
            </HBox.margin>
        </Label>
    </children>
</HBox>
 
 

 3. 컨트롤러에서 primaryStage 사용

  컨트롤러에서 다이얼로그를 실행할 때는 소유자 윈도우가 될 primaryStage가 필요합니다. 컨트롤러에서 primaryStage를 얻는 방법은 두 가지가 있습니다.

  메인 클래스에서 전달하는 방법

   primaryStage는 메인 클래스의 start() 파라미터로 전달되기 때문에 start() 메소드에서 컨트롤러로 primaryStage를 전달하면 됩니다. FXML 루트 태그의 fx:controller 속성에 지정된 컨트롤러 클래스는 FXMLLoader가 FXML을 로딩할 때 객체로 생성됩니다. FXMLLoader는 생성된 컨트롤러를 리턴하는 getController() 메소드를 제공하고 있습니다. 그러나 이 메소드는 인스턴스 메소드이기 때문에 FXMLLoader 객체가 필요합니다. 그래서 FXMLLoader의 정적 메소드 load() 호출 코드는 다음과 같이 인스턴스 메소드 load() 호출 코드로 변경해야 합니다.

FXMLLoader loader = new FXMLLoader(getClass().getResource("root.fxml"));
Parent root = loader.load();
 
RootController controller = loader.getController();
controller.setPrimaryStage(primaryStage);

   마지막 코드를 보면 컨트롤러의 setPrimaryStage() 메소드를 호출하면서 primaryStage를 파라미터 값으로 전달하고 있습니다. 따라서 컨트롤러 클래스는 다음과 같이 필드와 Setter 메소드를 추가해 두어야 합니다.

public class RootController implements Initializable {
    private Stage primaryStage;
 
    public void setPrimaryStage(Stage primaryStage) {
        this.primaryStage = primaryStage;
    }
 
    ...
}

 

  컨테이너 또는 컨트롤러로 부터 얻는 방법

   컨테이너나 컨트롤의 getScene() 메소드는 자신이 포함된 Scene 객체를 리턴합니다. 그리고 Scene의 getWindow() 메소드는 자신을 보여주는 Stage 객체를 리턴합니다. 따라서 다음과 같은 코드를 이용하면 컨트롤러에서 primaryStage를 얻을 수 있습니다.

Stage primaryStage = (Stage) 'ControlName'.getScene().getWindow();
 

   주의할 점은 위 코드는 initialize() 메소드 안에서 사용할 수 없습니다. 그 이유는 아직 primaryStage가 생성되지 않았기 때문입니다. 메인 클래스의 start() 메소드에서 Scene 객체를 생성하고, primaryStage에 Scene을 설정해야만 위 코드가 정상적으로 동작합니다. 따라서 이벤트 처리 메소드 내에서 위 코드를 사용해야 합니다. 

   다음 예제는 다섯 개의 버튼을 배치하고, 지금까지 설명한 다이얼로그를 실행하도록 했습니다.

  * DialogRoot.fxml

 
<?xml version="1.0" encoding="UTF-8"?>
 
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.control.Button?>
<?import javafx.geometry.Insets?>
 
<HBox xmlns:fx="http://javafx.com/fxml/1"
    fx:controller="javaFX.RootController"
    alignment="TOP_LEFT" spacing="10">
    <children>
        <Button onAction="#handleOpenFileChooser" text="Open FileChooser" />
        <Button onAction="#handleSaveFileChooser" text="Save FileChooser" />
        <Button onAction="#handleDirectoryChooser" text="DirectoryChooser" />
        <Button fx:id="btnPopup" onAction="#handlePopup" text="Popup" />
        <Button fx:id="btnCustom" onAction="#handleCustom" text="Custom" />
    </children>
    <padding>
        <Insets bottom="10" left="10" right="10" top="10" />
    </padding>
</HBox>
 
 

  * popup.fxml

 
<?xml version="1.0" encoding="UTF-8"?>
 
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.image.ImageView?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Label?>
 
<HBox xmlns:fx="http://javafx.com/fxml/1"
    alignment="CENTER_LEFT"
    style="-fx-background-color: black; -fx-background-radius: 20;">
    <children>
        <ImageView id="imgMessage" fitHeight="30" fitWidth="30" preserveRatio="true"/>
        <Label id="lblMessage" style="-fx-text-fill: white;">
            <HBox.margin>
                <Insets left="5" right="5" />
            </HBox.margin>
        </Label>
    </children>
</HBox>
 
 

  * custom_dialog.fxml

 

 
<?xml version="1.0" encoding="UTF-8"?>
 
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
 
<AnchorPane xmlns:fx="http://javafx.com/fxml/1"
    prefHeight="150" prefWidth="400">
    <children>
        <ImageView fitHeight="50" fitWidth="50" layoutX="15" layoutY="15"
            preserveRatio="true">
            <image>
                <Image url="@images/dialog-info.png"/>
            </image>
        </ImageView>    
        <Button id="btnOk" layoutX="336" layoutY="104" text="확인" />
        <Label id="txtTitle" layoutX="87" layoutY="33" 
            prefHeight="15" prefWidth="290" />
    </children>
</AnchorPane>
 
 

  * RootController.java

 
package javaFX;
 
import java.io.File;
import java.net.URL;
import java.util.ResourceBundle;
 
import javafx.event.ActionEvent;
import javafx.fxml.FXMLLoader;
import javafx.fxml.Initializable;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.HBox;
import javafx.stage.DirectoryChooser;
import javafx.stage.FileChooser;
import javafx.stage.FileChooser.ExtensionFilter;
import javafx.stage.Modality;
import javafx.stage.Popup;
import javafx.stage.Stage;
import javafx.stage.StageStyle;
 
public class RootController implements Initializable {
    
    @Override
    public void initialize(URL loc, ResourceBundle res) {
        
    }
    
    private Stage primaryStage;
    public void setPrimaryStage(Stage primaryStage) {
        this.primaryStage = primaryStage;
    }
    
    public void handleOpenFileChooser(ActionEvent e) {
        FileChooser fileChooser = new FileChooser();
        fileChooser.getExtensionFilters().addAll(
            new ExtensionFilter("Text File", "*.txt"),
            new ExtensionFilter("Image Files", "*.jpg", "*.png", "*.gif"),
            new ExtensionFilter("Audio Files", "*.wav", "*.mp3", "*.aac"),
            new ExtensionFilter("All Files", "*.*")
        );
        File selectedFile = fileChooser.showOpenDialog(primaryStage);
        
        if (selectedFile != null) {
            System.out.println(selectedFile.getPath());
        }
    }
    
    public void handleSaveFileChooser(ActionEvent e) {
        FileChooser fileChooser = new FileChooser();
        fileChooser.getExtensionFilters().add(new ExtensionFilter("All Files", "*.*"));
        File selectedFile = fileChooser.showSaveDialog(primaryStage);
        
        if (selectedFile != null) {
            System.out.println(selectedFile.getPath());
        }
    }
    
    public void handleDirectoryChooser(ActionEvent e) {
        DirectoryChooser dChooser = new DirectoryChooser();
        File selectedDir = dChooser.showDialog(primaryStage);
        
        if (selectedDir != null) {
            System.out.println(selectedDir.getPath());
        }
    }
    
    public void handlePopup(ActionEvent e) throws Exception {
        Popup popup = new Popup();
        
        HBox hbox = (HBox) FXMLLoader.load(getClass().getResource("popup.fxml"));
        ImageView imageView = (ImageView) hbox.lookup("#imgMessage");
        imageView.setImage(
                new Image(getClass().getResource("images/dialog-info.png").toString())
        );
        imageView.setOnMouseClicked(event -> popup.hide());
        Label lblMessage = (Label) hbox.lookup("#lblMessage");
        lblMessage.setText("메시지가 왔습니다.");
        
        popup.getContent().add(hbox);
        popup.setAutoHide(true);
        popup.show(primaryStage);
    }
    
    public void handleCustom(ActionEvent e) throws Exception {
        Stage dialog = new Stage(StageStyle.UTILITY);
        dialog.initModality(Modality.WINDOW_MODAL);
        dialog.initOwner(primaryStage);
        dialog.setTitle("확인");
        
        AnchorPane aPane = (AnchorPane) FXMLLoader.load(getClass().getResource("custom_dialog.fxml"));
        Label txtTitle = (Label) aPane.lookup("#txtTitle");
        txtTitle.setText("확인하셨습니까?");
        Button btnOk = (Button) aPane.lookup("#btnOk");
        btnOk.setOnAction(event -> dialog.close());
        
        Scene scene = new Scene(aPane);
        dialog.setScene(scene);
        dialog.setResizable(false);
        dialog.show();
    }
    
}

  * AppMain.java

package javaFX;
 
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;
 
public class AppMain extends Application {
 
    @Override
    public void start(Stage primaryStage) throws Exception {
        FXMLLoader loader = new FXMLLoader(getClass().getResource("DialogRoot.fxml"));
        Parent root = loader.load();
        RootController controller = loader.getController();
        controller.setPrimaryStage(primaryStage);
 
        Scene scene = new Scene(root);
 
        primaryStage.setTitle("AppMain");
        primaryStage.setScene(scene);
        primaryStage.show();
    }
 
    public static void main(String[] args) {
        launch(args);
    }
}
 

 

 * 이 포스트은 서적 '이것이 자바다' 를 참고하여 작성한 포스트입니다.