JavaFX UI - 12.Combo Box

Combo box는 사용자들이 여러 옵션 중 하나를 선택할 수 있도록 해주는 UI 컨트롤이다.
Choice box와 달리, Combo box는 포함하고 있는 항목들이 일정 개수를 넘어가더라도 스크롤 형태로 보여주므로 유용하다.

1. Creating Combo Boxes

Combo box를 생성하기 위해서는 ComboBox 클래스 인스턴스를 만들고, 그곳에 들어갈 아이템들을 observable list 형태로 만들어 정의해야 한다. 이는 ChoiceBox, ListView, TableView와 같은 UI 컨트롤들과 동일한 방식이다.

Example 12-1 Creating a Combo Box with an Observable List

 

위와 같이 정의된 컴보박스가 화면에 보여지는 모습은 아래와 같다.

 

콤보박스가 생성된 이후, 언제라도 새로운 아이템들을 추가할 수 있다. 다음 예제는 컴보박스에 세개의 아이템들을 추가하는 코드이다.

Example 12-2 Adding Items to a Combo Box

ComboBox 클래스는 몇 가지 편리한 프로퍼티 및 메서드들을 제공한다.

• setValue - 콤보박스 내 항목들 중 하나를 선택한다. setValue 메서드가 호출되면 해당 콤보박스의 selectionModel 프로퍼티의 ‘선택 아이템’ 값이 setValue 메서드를 통해 ‘선택된 값’으로 변경된다. 이는 설사 지정한 값이 콤보박스 내 항목에 없을지라도 마찬가지다.
• getValue - 컴보박스에서 현재 선택된 아이템 값을 반환한다.
• setVisibleRowCount - 콤보박스의 드롭다운 리스트에서 한번에 보일 row 수를 지정한다.

ComboBox 클래스가 어떠한 타입의 아이템이라도 받아들일 수 있도록 정의되어 있기는 하지만, Node 타입 또는 Node를 상속한 타입의 객체는 사용하지 않도록 한다. 이는 combo box의 디폴트 cell factory에서 Node 아이템들을 직접 셀에 올리는 것으로 인해 콤보박스의 드롭다운 버튼까지 덮어버리기 때문이다.

또한 Scene graph 상에의 모든 Node 들은 여러 위치에 동시에 위치할 수 없다는 제약이 있는데, 이로 인해 콤보박스 상에서 선택된 Node 아이템은 콤보박스 리스트로부터 제거된다. 콤보박스에서 선택 값으로 보여야 할 Node 객체가 콤보박스 리스트에서도 동시에 보일 수 없기 때문이다. 이러한 상황에서 콤보박스의 선택 아이템이 바뀔 경우 이전에 선택된 Node 아이템은 콤보박스 리스트로 반환되고 새로 선택된 Node 아이템은 콤보박스 리스트에서 제거된다.

아래 예제는 콤보박스로 UI를 구성하는 예를 보여준다.

Example 12-3 Creating Combo Boxes and Adding Them to the Scene

 

위 예제를 실행한 결과는 아래 화면과 같다.

 

2. Editable Combo Boxes

일반적으로 email 클라이언트 어플리케이션들은 ‘받는사람’을 지정할 때, 목록에서 선택하는 것과 직접 입력하는 것을 모두 지원한다. ComboBox 클래스의 setEditable(true) 메서드를 호출함으로써 콤보박스가 편집 가능하도록 만들 수 있다. 또한 setPromptText 메서드를 통해, 어떤 아이템도 선택되지 않은 콤보박스에 대해 표시할 prompt 메시지를 지정할 수도 있다.



Example 12-4 Processing Newly Typed Values in an Editable Combo Box

3. Applying Cell Factories to Combo Boxes

콤보박스가 디폴트로 가지는 외관이나 동작방식을 커스터마이징 하기 위하여 cell factory 메커니즘을 사용할 수 있다.

아래 예제는 이전 예제에서의 priority 콤보박스에 대해 cell factory 메커니즘을 적용한 코드이다

Example 12-5 Implementing a Cell Factory for the Priority Combo Box

 

위 예제에서 콤보박스에 지정된 cell factory는 콤보 아이템을 디스플레이하기 위해 사용될 ListCell 객체를 생성한다. 여기서 사용된 ListCell은 커스터마이징되었으며, 콤보 아이템의 너비를 지정하기 위해 setPrefWidth 메서드를 사용하였고 priority에 따라 텍스트 색상이 변경되도록 하였다.

아래 화면은 위 예제를 실행했을 때의 화면이다.