JavaFX UI - 13.Separator

Separator 클래스는 UI 엘리먼트들을 수평 또는 수직으로 분할하여 구분하기 위한 분리자 컨트롤로써, 어떠한 액션을 유발하지는 않는다. 디폴트로 separator는 수평 방향을 가지며, setOrientation 메서드를 통해 방향을 변경할 수 있다.


1. Creating a Separator

아래 예제는 하나의 수평 separator와 하나의 수직 separator를 생성한다.

Example 13-1 Vertical and Horizontal Separators

Separator 클래스는 Node 클래스를 상속하고 있으므로, Node 클래스의 모든 멤버 변수들을 가지고 있다.

일반적으로, separator는 UI 컨트롤들의 그룹을 나누기 위해 사용된다. 아래 예제는 체크박스들을 분리시키기 위해 separator가 사용되는 코드이다.

Example 13-2 Using a Separator Between Checkbox Categories

 
위 예제 코드가 어플리케이션에 추가되면 아래와 같은 UI가 보여진다.

2. Adding Separators to the UI of Your Application

Separator는 UI를 구성하기 위해 사용될 수 있다. 아래 화면은 일기예보 정보를 디스플레이하는 어플리케이션 화면이다.

위 화면에서 Sepatator는 Label과 ImageView 객체들을 분할하여 화면을 구성하기 위해 사용되었다.

Example 13-3 Using Separators in a Weather Forecast Application

 

 

위 예제는 수평, 수직 separator를 모두 사용하였고, GridPane 컨테이너의 열과 행 공간을 확장하여 separator를 배치하였다.


3. Styling Separators

Example 13-3의 모든 separator들에 대해 동일한 스타일을 적용하려면, 이를 정의하는 CSS 파일을 하나 생성하여 어플리케이션 main 클래스와 동일한 패키지에 저장한다.

아래 스타일 정의는 separator에 대한 예시이다.

Example 13-4 Using CSS Classes to Style Separators

 
위와 같이 정의된 CSS를 어플리케이션에 적용하기 위해서는 Scene 클래스의 getStylesheets 메서드를 사용한다.

Example 13-5 Enabling Style Sheets in a JavaFX Application

아래 화면은 위 스타일이 적용된 후의 모습이다.