JavaFX UI - 4.Toggle Button

두 개 이상의 toggle button 들이 하나의 그룹으로 묶일 수 있으며, 어떤 시간에 이 button들 중 오직 하나만 선택되거나 아무것도 선택되지 않을 수 있다.

아래 화면은 하나의 그룹에 세 개의 toggle button이 묶인 어플리케이션으로써, 선택된 button에 따라 다른 색깔로 사각영역을 채운다.

1. Creating a Toggle Button

ToggleButton 클래스는 세 가지 생성자를 제공한다.

Example 4-1 Creating Toggle Buttons

ToggleButton 클래스는 Labeled 클래스를 상속하였으므로 button 상에 텍스트, 이미지를 설정할 수 있다.


2. Adding Toggle Buttons to a Group

ToggleButton 클래스 구현은 RadioButton 클래스의 구현과 매우 흡사하다. 그러나 radio button과는 달리, 그룹 내의 toggle button들 중 하나가 반드시 선택되어야 할 필요는 없다.

이미 선택된 radio button이 클릭되면 아무 변화가 없지만, 이미 선택된 toggle button이 클릭될 경우는 선택이 해제된다.

Example 4-2 Combining Toggle Buttons in a Group

3. Setting the Behavior

Example 4-3 Setting User Data for the Toggle Buttons

람다 표현식으로 구현된 ChangeListener<Toggle> 객체는 그룹 내에서 선택된 toggle button에 따라 사각 영역을 각기 다른 색으로 채운다. 만약 아무 button도 선택되지 않는다면 흰색으로 채워진다.

위 예제의 결과 화면은 아래와 같을 것이다.

4. Styling Toggle Buttons

Toggle button에 CSS 스타일을 적용함으로써, 어플리케이션의 모습을 개선시킬 수 있다. 먼저 toggle button에 적용할 스타일을 아래와 같이 ControlStyle.css 파일에 정의한다.

Example 4-4 Declaring Alternative Colors of the Toggle Button

정의된 스타일을 아래와 같이 어플리케이션에 적용한다.

Example 4-5 Applying CSS Styles to Toggle Buttons

위 코드가 적용되면 아래와 같이 toggle button의 시각적 표현이 변한다.

이 외에도 CSS의 다양한 프로퍼티들을 통해 애니메이션, 변형, 시각적 효과 등을 적용할 수도 있다.