JavaFX UI - 10.List View

ListView 클래스는 여러 아이템들을 포함하는 scrollable list 이다. 아래 화면은 호텔 예약 시스템에서 선택 가능한 숙박 형태를 리스트로 보여준다.

setItems 메서드를 통해 list의 항목들을 정의한 수 있다. 또한 setCellFactory 메서드를 사용하여 list 내의 항목들에 대한 view를 생성할 수 있다.

1. Creating a List View

아래 예제는 위 화면과 같은 string 항목들을 가지는 list를 생성한다.

Example 10-1 Creating a List View Control

List view 컨트롤의 크기를 변경하기 위하여 setPrefHeight와 setPrefWidth 메서드를 사용한다.

Example 10-2 Setting Height and Width for a List View




위 예제와 같이 list의 사이즈를 조정하게 되면 아래와 같이 자동으로 스크롤바가 생긴다.

 

ListView의 orientation 프로퍼티를 Orientation.HORIZONTAL 상수 값으로 지정함으로써 리스트 항목들이 나타나는 방향을 수평으로 지정할 수 있다.

list.setOrientation(Orientation.HORIZONTAL)

 

ListView 객체의 현재 상태를 조회하기 위해 다음과 같은 메서드 조합들을 사용할 수 있다.

• getSelectionModel().getSelectedIndex() : 현재 선택된 항목의 인덱스 반환
• getSelectionModel().getSelectedItem() : 현재 선택된 항목을 반환
• getFocusModel().getFocusedIndex() : 현재 포커스를 가진 항목의 인덱스 반환
• getFocusModel().getFocusedItem() : 현재 포커스를 가진 항목을 반환

최초 list view가 생성될 때의 디폴트 SelectionModel은 MultipleSelectionModel 이지만,  selectionMode 프로퍼티 디폴트 값은 SelectionMode.SINGLE 상수 값이다. 다중 선택을 허용하려면 다음과 같은 메서드 조합을 사용한다.
listView.getSelectionModel().setSelectionMode(SelectionMode.MULTIPLE);

MultipleSelectionModel은 selectedItems와 selectedIndices 프로퍼티를 가지며, 이들은 모두 observable list 로써 selection 변경을 감지하고 모니터링 할 수 있다.


2. Populating a List View with Data

Example 10-1은 list view에 항목들을 채우는 가장 간단한 방법을 보여주었다. CheckBoxListCell, ChoiceBoxListCell, ComboBoxListCell, TextFieldListCell과 같은 ListCell 확장 클래스들을 사용하여 다양한 타입의 데이터를 list 항목에 추가할 수 있다. ListCell 확장 클래스들은 기본 list cell 기능 외에 추가적인 기능들 제공한다.

기본적으로 list cell의 내용은 편집할 수 없지만, ComboBoxListCell 클래스는 list cell 안에 combo box를 표출한다. 이러한 변화는 사용자가 콤보박스 선택을 통해 리스트 항목을 구성할 수 있도록 해준다.

Example 10-3 Adding ComboBoxListCell Items to a List View




위 예제에서 list cell을 교체하기 위하여 setCellFactory 메서드를 호출하고 있음을 기억하자.
예제 실행 결과는 다음과 같은 모습이다.

 

Cell factory 메커니즘은 list cell을 미리 구현된 list cell 객체로 교체할 수 있다는 의미 뿐만 아니라, cell의 모습을 완전히 커스터마이징 할 수 있음을 의미한다.


3. Customizing the Content of a List View

아래 예제는 cell factory를 사용하여 list 내 항목들을 어떻게 생성해내는지를 보여주기 위해 컬러 목록을 생성하는 예시이다.

Example 10-4 Creating a Cell Factory
 

위 예제에서 구현한 cell factory (실제로는 Callback 인터페이스 구현)는 ColorRectCell이라는 list cell 객체를 생성한다. List 내의 모든 cell은 각각 하나의 단일 데이터 item과 연관되어 있으며, list view 상에 하나의 ‘row’로 그려진다.

setGraphic 메서드를 통해 각 cell들이 표현하는 컨텐트는 다른 UI 컨트롤, text, shape, image 등을 포함할 수도 있다. 이 예제에서의 list cell은 지정된 색상의 사각형을 보여주고 있다.

 

4. Processing the List Item Selection

사용자들은 list view 상의 항목들을 스크롤할 수 있으며, 각 항목들에 대해 선택, 해제할 수 있다. 아래 예제는 list view 상의 특정 항목이 선택되는 이벤트를 처리하기 위하여 Example 10-4를 확장하였다.

Example 10-5 Processing Events for a List Item

 

위 예제를 보면 list의 selection 상태 변경을 처리하기 위하여 ChangeListener가 생성되었다. 이 리스너에서는 선택된 색상에 따라 application 하단에 있는 label의 컬러와 텍스트를 변경한다.