JavaFX UI - 2.Button

Button 클래스는 Labeled 클래스의 하위 클래스로써, 텍스트와 이미지를 표현할 수 있다. 아래 화면은 다양한 효과를 가진 버튼들을 보여준다.

1. Creating a Button

Button 클래스는 아래 예제에서와 같이 세 가지 생성자를 통해 생성될 수 있다

Example 2-1 Creating a Button

Button 클래스는 Labeled 클래스를 상속받았기 때문에, 아이콘 또는 텍스트를 가지지 않은 button에 대하여 다음과 같은 메서드를 사용하여 컨텐트를 지정할 수 있다.

• setText(String text) : 버튼에 텍스트를 지정한다.
• setGraphic(Node graphic) : 버튼에 그래픽 아이콘을 지정한다.

Example 2-2 Adding an Icon to a Button

위 예제의 결과 버튼 모습은 아래와 같다.

위 두 가지 예제에서, 버튼에 추가된 아이콘은 ImageView 객체이다. 이 외에도 다른 그래픽 객체들을 사용할 수 있는데 예를 들면 javafx.scene.shape 패키지에 있는 도형 객체들을 사용할 수 있다. 버튼 위에 텍스트와 그래픽 컨텐트를 모두 표현할 때 이들 간의 간격을 조정하기 위하여 setGraphicTextGap 메서드를 사용할 수 있다.

Button의 기본 스킨은 아래와 같이 상태에 따라 구분되어 표현된다.

2. Assigning an Action

Button의 주요 역할은 클릭되었을 때 어떤 액션을 유발시키는 것이다. 사용자가 버튼을 클릭했을때 수행해야 할 액션을 정의하기 위하여 Button 클래스의 setOnAction 메서드를 사용한다.

Example 2-3 Defining an Action for a Button

위 예제는 사용자가 button2를 클릭했을 때, label의 텍스트 내용을 “Accepted”로 지정하는 코드이다.


3. Applying Effects

Button 클래스는 Node 클래스를 상속하였으므로, 시각적인 개선을 위하여 javafx.scene.effect 패키지 내의 effect들이 적용될 수 있다. 아래 예제는 버튼이 클릭되었을 때 DropShadow 효과가 적용되는 코드이다.

Example 2-4 Applying the DropShadow Effect

위 예제를 실행하면 아래와 같이 마우스 커서의 위치에 따라 상태가 변한다.

4. Styling a Button

 Button의 시각적 표현을 개선시키기 위한 또 다른 방법은 Skin 클래스를 통해 정의된 CSS 스타일을 적용하는 것이다. JavaFX 어플리케이션에서 CSS를 사용하는 것은 HTML에서 CSS를 사용하는 것과 유사하다. 이는 두 경우 모두 동일한 CSS 규격을 따르고 있기 때문이다.

별도의 CSS 파일에 스타일을 정의하고, getStyleClass 메서드를 통해 이 스타일을 어플리케이션에 적용할 수 있다. getStyleClass 메서드는 Node 클래스로부터 상속된 것이며 모든 UI 컨트롤들에 대해 사용 가능하다.

Example 2-5 Styling a Button

‘-fx-font’ 프로퍼티는 폰트 명과 크기를 지정한다. ‘-fx-base’ 프로퍼티는 버튼에 설정된 디폴트 컬러를 재설정한다. 결과적으로 button1은 아래와 같은 모습이 된다.