JavaFX 주요 컨트롤러 이용

Tags:

JavaFX에는 다양한 GUI 컨트롤이 준비되어 있다. 그 중에서 가장 많이 사용되는 “체크박스”, “라디오 버튼”, “콤보 상자”, “슬라이더"에 대해 기본적인 사용법을 살펴 보겠다.

체크박스(Checkbox)

JavaFX에는 많은 GUI 컨트롤 포함되어 있다. 그것들을 이용하여 일반적인 GUI를 간단히 만들 수 있다. 이러한 기본적인 GUI 컨트롤에 대한 간단한 사용법을 정리해 보겠다.

우선 체크 박스부터 설명하겠다. 이것은 javafx.scene.control 패키지에 Checkbox 클래스로 되어 있다. 이것은 다음과 같이 인스턴스를 생성한다.

new Checkbox()
new Checkbox("표시 텍스트")

인수에 텍스트를 설정하면, 그 텍스트가 체크 박스 옆에 표시된다. 이 표시 텍스트는 Button 등과 동일하게 setText에서 설정할 수 있다. 또한 체크 상태는 다음과 같이 사용할 수 있다.

체크 상태를 얻는다.

boolean 변수 = checkbox.isSelected();

체크 상태를 변경한다.

checkbox.setSelected(boolean);

Checkbox에는 액션 이벤트가 지정될 수 있도록 되어 있다. 체크 박스를 클릭하는 등의 선택 상태가 변경되면, 액션 이벤트가 발생한다. 이 액션 이벤트의 처리는 Button 등과 같이 setOnAction메소드로 설정할 수 있다.

checkbox.setOnAction((ActionEvent) -> {
    // 수행 할 작업
});

람다 식을 이용한다면 이렇게 작성하면 된다. 이것로 체크 상태가 변경되었을 때의 처리를 실행시킬 수 있다.

아래와 같이 CheckBox에 대한 간단한 사용 예제가 있다.

package com.dekuma.javafx;
 
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.CheckBox;
import javafx.scene.control.Label;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;
 
public class App extends Application {
    Label label;
    CheckBox check;
 
    public static void main(String[] args) {
        launch(args);
    }
 
    @Override
    public void start(Stage stage) throws Exception {
        label = new Label("This is JavaFX!");
        check = new CheckBox("체크박스");
        check.setSelected(true);
        check.setOnAction((ActionEvent)->{
            label.setText(check.isSelected() ? "Selected!" : "not selected...");
        });
         
        BorderPane pane = new BorderPane();
        pane.setTop(label);
        pane.setCenter(check);
        Scene scene = new Scene(pane, 320, 120);
        stage.setScene(scene);
        stage.show();
    }
 
}

실행하면 체크 박스가 하나 나타나고 이것을 클릭하면 라벨에 “Selected!”, “not selected …“라고 표시가 된다.

라디오버튼(RadioButton)

라디오 버튼은 여러 항목 중 하나를 선택하는데 자주 사용되는 GUI 이다. 이것도 javafx.scene.control 패키지에 포함되어 있다. “RadioButton"이라는 클래스로 다음과 같이 생성한다.

new RadioButton()
new RadioButton("표시 텍스트")

체크 박스와 마찬가지로 표시 텍스트는 “setText"으로 변경할 수 있다. 또한 체크 상태는 “isSelected”, “setSelected” 메소드로 조작할 수 있다. 또한 클릭했을 때 조작을 액션 이벤트에서 설정할 수 있는 것도 마찬가지이다.

표시 텍스트 얻기

String 변수 = radioButton.getText();

표시 텍스트 설정하기

radioButton.setText(String);

체크 상태 얻기

boolean 변수 = radioButton.isSelected();

체크 상태 변경하기

radioButton.setSelected("boolean");

액션 이벤트의 설정하기

radioButton.setOnAction((ActionEvent) -> {
    // 수행 할 작업
});

라디오 버튼과 체크 박스는 매우 유사하며 기본적인 사용법은 거의 동일하다. 체크 박스가 사용할 수 있다면, 라디오 버튼의 기본적인 사용법은 거의 이해할 수 있을 것이다.

그러나! 이것만으로는 아직 라디오 버튼은 사용할 수 없다. “그룹화"의 구조를 이해할 필요가 있다.

토글 그룹(ToggleGroup)

라디오 버튼이 체크 박스와 다른 것은 여러 컨트롤이 함께 다루어진다는 점에 있다. 단지 인스턴스를 만든 것만으로는 단순히 “클릭하면 선택되는 버튼"일뿐이다. 라디오 버튼은 여러 버튼이 그룹으로 기능하고 그 중에서 항상 하나만 선택되도록 해야 한다.

그래서 “ToggleGroup"라는 클래스를 이용한다. 이것은 javafx.scene.control 패키지에 있는 것으로, 그 이름과 같이 ON/OFF하는 여러 컨트롤을 하나의 그룹으로 관리하는 기능을 제공한다. 이것은 다음과 같이 인스턴스 생성한다.

new ToggleGroup()

인수 등은 필요없다. RadioButton에는 라디오 버튼이 속한 그룹을 설정하는 메소드가 준비되어 있어서 여기에 ToggleGroup을 설정한다.

radioButton.setToggleGroup(ToggleGroup);

여러 RadioButton에 같은 ToggleGroup을 설정하면 그것들은 하나의 그룹되고, 항상 클릭을 하면 하나만 선택되지 않도록 한다.

아래와 같이 ToggleGroup에 대한 간단한 사용 예제가 있다.

package com.devkuma.javafx;
 
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.RadioButton;
import javafx.scene.control.ToggleGroup;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.FlowPane;
import javafx.stage.Stage;
 
public class App extends Application {
    Label label;
    ToggleGroup group;
 
    public static void main(String[] args) {
        launch(args);
    }
 
    @Override
    public void start(Stage stage) throws Exception {
        label = new Label("This is JavaFX!");
        group = new ToggleGroup();
        RadioButton btn1 = new RadioButton("Male");
        btn1.setToggleGroup(group);
        btn1.setSelected(true);
        RadioButton btn2 = new RadioButton("Female");
        btn2.setToggleGroup(group);
        btn1.setOnAction((ActionEvent)->{
            label.setText("you are Male?");
        });
        btn2.setOnAction((ActionEvent)->{
            label.setText("you are Female?");
        });
         
        BorderPane pane = new BorderPane();
        pane.setTop(label);
        FlowPane flow = new FlowPane();
        flow.getChildren().add(btn1);
        flow.getChildren().add(btn2);
        pane.setCenter(flow);
        Scene scene = new Scene(pane, 320, 120);
        stage.setScene(scene);
        stage.show();
    }
 
}

여기에서는 두 개의 RadioButton을 작성하고 그것들을 동일한 ToggleGroup을 설정하고 있다. 항상 클릭한 라디오 버튼만 선택되도록 되어 있는 것을 알 수 있을 것이다.

콤보 박스(ComboBox)

여러 항목 중 하나를 선택하는 GUI는 여러 가지가 있다. 그 대표는 “콤보 상자"이다. 이것은 javafx.scene.control 패키지 ComboBox라는 클래스로 되어 있다.

new ComboBox()
new ComboBox("표시 내용")

콤보 상자는 드롭 다운 메뉴처럼 항목을 표시한다. 이것은 미리 메뉴로 표시 할 내용을 설정해야 한다. new ComboBox에 표시 내용을 인수에 전달하여 그 내용을 메뉴로 표시하게 된다.

문제는 “표시 내용을 어떻게 준비 하느냐” 것이다. 이것은 javafx.collections 패키지 “ObservableList"인스턴스로 준비해야 한다.

이 인스턴스의 생성에는 여러 가지가 있지만, 가장 알기 쉬운 것은 javafx.collections 패키지 “FXCollections"클래스에 있는 메소드를 이용하는 방법이다.

ObservableList 변수 = FXCollections.observableArrayList(값1, 값2, ...);

이렇게 해서 ObservableList 인스턴스를 생성할 수 있다. 인수에는 메뉴로 표시하는 값을 제공한다. 가장 일반적인 것은 String 값을 지정하여 표시 시키는 것이다. ObservableList로 표현한다면 아래와 같다.

ObservableList<String> 변수 = FXCollections.observableArrayList(...);

이렇게 하여 인스턴스를 생성할수 있다. 이를 new ComboBox의 인수로 넘기면 된다.

ComboBox에서 얻은 값에 대해

이렇게 설정된 값은 ComboBox가 선택이 되면, 다음과 같이 얻을 수 있다.

Object 변수 = comboBox.getValue();

getText 등이 아니라 “getValue"인 점에 주의하시기 바란다. 꺼내오는 것은 텍스트가 아니다. 선택된 개체이다. ObservableList<String>으로 데이터를 제공하는 경우에는 String가 얻어진다. 다른 예로, ObservableList<Integer>로 데이터 설정 했더라면 Integer가 얻지는 것이다.

편집 가능 설정에 대해

또한, ComboBox는 직접 텍스트를 입력할 수 있도록 설정할 수도 있다. 여기에는 setEditable라는 메소드를 이용합니다.

comboBox.setEditable(boolean);

이제 true로 설정하면 편집 가능하며, 메뉴를 선택할 뿐만 아니라 직접 텍스트를 입력 할 수 있다. 직접 입력의 경우 getValue에서 얻을 수있는 것은 String이다. 표시 데이터로 String 이외의 값을 설정하지 않았다면 메뉴 선택 및 텍스트 입력에서 다른 유형의 인스턴스가 getValue가 된다는 것에 주의하자.

아래와 같이 ComboBox 대한 간단한 사용 예제가 있다.

package com.devkuma.javafx;
 
import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Scene;
import javafx.scene.control.ComboBox;
import javafx.scene.control.Label;
import javafx.scene.control.ListView;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.FlowPane;
import javafx.stage.Stage;
 
public class App extends Application {
    Label label;
    ComboBox<String> combo;
     
    public static void main(String[] args) {
        launch(args);
    }
 
    @Override
    public void start(Stage stage) throws Exception {
        label = new Label("This is JavaFX!");
        ObservableList<String> data = FXCollections.observableArrayList("One", "Two","Three");
        combo = new ComboBox<String>(data);
        combo.setOnAction((ActionEvent)->{
            label.setText(combo.getValue());
        });
        BorderPane pane = new BorderPane();
        pane.setTop(label);
        pane.setCenter(combo);
        Scene scene = new Scene(pane, 320, 120);
        stage.setScene(scene);
        stage.show();
    }
 
}

ComboBox에서 항목을 선택하면 그것을 Label에 표시한다. ComboBox도 setOnAction에서 액션 이벤트 처리를 설정할 수 있기에 이를 이용하여 처리를 하고 있다.

슬라이더(Slider)

아날로그 방식으로 “여기부터 여기까지의 값"을 입력하는데 사용되는 것이 “슬라이더"이다. 슬라이더는 마우스로 바(bar)의 노브(knob)를 드래그하여 값을 설정한다. 이것은 javafx.scene.control 패키지 “Slider"라는 클래스되어 있다.

new Slider()
new Slider(최소값, 최대 값, 현재 값)

인수없이 작성하면, 디폴트 상태에서 인스턴스를 생성된다. 인수 최소값, 최대 값, 현재 값을 각각 double로 지정하면 지정된 범위 내에서 값을 선택하도록 할 수 있다.

이 Slider는 표시에 관한 세부적인 속성을 가지고 있어 그것들을 설정하는 것으로 표시 방법을 다양하게 조정할 수 있다.

표시 방향을 설정하기

slider.setOrientation(Orientation);

이것은 세로 및 가로 여부를 설정하는 것이다. 인수는 javafx.geometry 패키지 Orientation 클래스의 필드를 지정한다. 이 클래스에는 다음 2개의 클래스 필드가 포함되어 있다.

  • HORIZONTAL : 가로 방향을 나타내는 값이다.
  • VERTICAL : 세로 방향을 나타내는 값이다.

눈금 표시 ON/OFF하기

slider.setShowTickMarks(boolean);
slider.setShowTickLabels(boolean);

슬라이더에는 숫자 눈금 표시를 할 수 있다. setShowTickMarks는 눈금의 표시를 설정하는 것으로, true로 하면 눈금이 표시된다. 또한 setShowTickLabels는 눈금 내에 최소값, 최대값과 같은 값을 표시한다.

값을 스냅하기

slider.setSnapToTicks(boolean);

설정된 값이 true이면 드래그 했을 때 표시되는 눈금의 위치에 값이 강제로 가지런히 정돈한다. 설정된 값이 false이면 드래그는 제한이 없어지고, 값은 그대로 섬세한 실수값으로 얻을 수 있게 된다.

값을 조작하기

double 값 = slider.getValue();
slider.setValue(double);

Slider의 값은 getValue/setValue으로 조작을 할 수 있다. 결과 값은 실수이다.

그럼 이에 대한 간단한 사용 예제는 아래와 같다.

package com.devkuma.javafx;
 
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.Slider;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;
 
public class App extends Application {
    Label label;
    Slider slider;
    Button button;
     
    public static void main(String[] args) {
        launch(args);
    }
 
    @Override
    public void start(Stage stage) throws Exception {
        label = new Label("This is JavaFX!");
        slider = new Slider(0, 100, 50);
        slider.setShowTickMarks(true);
        slider.setShowTickLabels(true);
        slider.setSnapToTicks(true);
        button = new Button("CLICK");
        button.setOnAction((ActionEvent)->{
            label.setText("VALUE: " + slider.getValue());
        });
        BorderPane pane = new BorderPane();
        pane.setTop(label);
        pane.setCenter(slider);
        pane.setBottom(button);
        Scene scene = new Scene(pane, 320, 120);
        stage.setScene(scene);
        stage.show();
    }
 
}

드래그하여 적당한 값을 설정하고, 버튼을 클릭하면 현재 값이 표시된다. 별도의 버튼이 있는 이유는 Slider 클래스는 액션 이벤트가 지원되지 않기 때문이다.

다만, 그 이외의 이벤트는 준비되어 있으며, 그것들을 이용하여 조작시 처리를 구현할 수 있다. 이것에 대해 다시 한번 설명하기로 하자.




최종 수정 : 2017-09-19