JavaFX UI - 19.Titled Pane & Accordion

Titled Pane은 타이틀을 가진 panel이다. 이 panel은 열리거나 닫힐 수 있으며, UI 컨트롤 또는 이미지, 레이아웃 컨테이너에 추가된 엘리먼트 그룹 등과 같은 모든 형태의 Node들을 포함할 수 있다.

Titled Pane은 accordion 컨트롤을 이용하여 그룹화될 수 있다. Accordion 컨트롤은 여러 panel들을 생성하고 한번에 하나의 panel 만 보여주고자 할 때 사용된다.

아래 화면은 세 개의 titled pane을 묶은 accordion 컨트롤을 보여준다.

1. Creating Titled Panes

TitledPane 컨트롤을 생성하기 위해 타이틀과 내용을 정의한다. 이를 위해 TitledPane 클래스의 생성자를 사용하거나, setText 및 setContent 메서드를 사용할 수 있다.

Example 19-1 Declaring a TitledPane Object

 
위 코드 샘플을 통해 보여지는 Titled pane의 모습은 아래와 같다.



Titled Pane의 크기는 내부 컨텐트의 preferred size를 수용하기 위하여 재조정된다. Titled Pane의 컨텐트로써 멀티 라인 텍스트가 지정될 수 있다.



Titled Pane의 크기를 명시적으로 지정하지 않도록 한다. Titled pane이 열리거나 닫힐 때 비정상적인 상황을 유발할 수 있다.
아래 예제 코드는 GridPane 레이아웃 컨테이너를 이용하여 titled pane의 컨텐트를 구성하는 코드이다.

Example 19-2 Titled Pane with the GridPane Layout Container

위 코드를 통해 생성된 titled pane의 모습은 아래와 같다.



디폴트로 모든 titled pane은 접힐 수 있고, 접히거나 열리는 움직임에 애니메이션 효과가 적용된다. 만약 titled pane이 접히는 것을 막고자 한다면 setCollapsible(false) 메서드를 사용한다. 또한 setAnimated(false) 메서드를 통해 애니케이션 효과도 없앨 수 있다.

Example 19-3 Adjusting the Style of a Titled Pane

2. Adding Titled Panes to an Accordion

Titled pane은 독립적으로 사용될 수도 있고, Accordion 컨트롤을 통해 그룹화되어 사용될 수도 있다.

여러 titled pane들을 하나의 accordion에 추가하는 것은 toggle 버튼들을 하나의 toggle group에 추가하는 것과 유사하다. Accordion에서는 여러 titled pane이 동시에 열릴 수 없으며, 한번에 오직 하나의 titled pane 만이 열릴 것이다.

Example 19-4 Accordion and Three Titled Panes

Accordion에 추가된 모든 titled pane들은 초기 디폴트 설정으로 인해 접혀있다. 특정 titled pane을 열려 있도록 하려면 setExpandedPane 메서드를 사용한다.




3. Processing Events for an Accordion with Titled Panes

아래 예제는 두 가지 형태의 titled pane을 생성한다. 하나는 email client UI를 가지는 독립 titled pane이고, 다른 하나는 서로 다른 이미지들을 컨텐트로 가지는 세 개의 titled pane과 이를 accordion을 통해 그룹화하였다. Accordion을 통해 선택된 titled pane의 이미지가 email client UI 상의 이미지 첨부로 설정된다.

Example 19-5 Implementing ChangeListener for an Accordion





아래 화면은 위 예제가 실행된 초기 화면이다. 아직 accordion 상에서 이미지가 선택되지 않았으므로 첨부파일 지정이 “N/A”로 표시된다.

 

사용자가 accordion에서 titled pane을 선택한다면 아래와 같이 보일 것이다.