JavaFX UI - 23.Pagination Control

Pagination 컨트롤은 작은 조각들로 나뉘어진 여러 컨텐트 페이지들을 돌아다니기 위해 사용된다. 메일박스 안의 이메일 메시지들 또는 검색 결과 조회 등에 주로 사용된다.

1. Creating a Pagination Control



Pagination 컨트롤은 페이지 컨텐트와 페이지 네비게이션 영역으로 구성된다. 페이지 컨텐트 영역에는 어플리케이션 로직에 따라 컨텐트가 디스플레이된다. 페이지 네비게이션 영역은 아래와 같은 모습으로 구성된다.

사용자는 특정 page indicator(지시자)를 클릭하거나, next 또는 previous page 버튼을 클릭하여 페이지들을 조회할 수 있다.

아래 예제는 Pagination 클래스의 세 가지 생성자 상용 예를 보여준다.

Example 23-1 Three Constructors of the Pagination Class




위 예제에서 생성한 pagination3의 모습은 아래와 같다.



페이지의 인덱스는 0부터 시작하므로, 세 번째 페이지를 선택하려면 currentPageIndexProperty를 2로 설정해야 한다.

pagination3에 아직 아무 컨텐트도 추가되지 않았으므로 pagination3 컨트롤의 페이지들는 비어있다.

Pagination 컨트롤에 직접 컨텐트를 추가할 수는 없으며, page factory 메커니즘을 사용하여야 한다. Page factory를 구현함으로써 페이지 컨텐트를 정의하고, 이 factory를 Pagination 클래스의 setPageFactory 메서드를 통해 설정한다.


2. Implementing Page Factories

setPageFactory 메서드는 pagination 컨트롤에 대한 page factory를 정의하기 위해 사용된다. 개발자는 페이지 컨텐트를 만들어내는 Callback 인터페이스를 구현함으로써 factory를 정의한다.

pagination 컨트롤 상의 페이지가 선택되면, 구현한 Callback 인터페이스의 콜백함수(call)가 호출될 것이다. 콜백함수에서는 선택된 페이지의 컨텐트를 로드하여 반환한다. 만약 선택된 페이지 인덱스가 존재하지 않으면 null을 반환해야 한다.

아래 예제는 28개 페이지를 가지는 pagination 컨트롤을 생성하고, 각 페이지 당 8 개의 검색 결과들을 가지도록 구현하였다.

Example 23-2 Adding Hyperlinks to a Pagination Control



Pagination 클래스의 생성자를 통해 전체 페이지 수와 현재 선택된 페이지 인덱스가 설정된다. 먼저 Pagination 객체를 생성하고 나중에 전체 패이지 수와 선택된 페이지 인덱스를 설정할 수도 있다. (setPageCount 메서드, setCurrentPageIndex 메서드 이용)

Pagination 컨트롤의 컨텐트는 createPage 메서드에서 생성하며, 이 메서드는 pagination factory의 콜백함수 내에서 호출된다.

위 예제를 실행한 모습은 아래와 같다.



현재Pagination 클래스는 추가된 페이지의 수가 10개를 초과하면, 10개씩 끊어서 page indicator를 화면에 보이도록 구현되어 있다. 한번에 보여지는 page indicator 수를 변경하기 위해서는 setMaxPageIndicatorCount 메서드를 사용한다.

아래 예제는 페이지 당 하나의 텍스트 컨텐트를 보여주는 어플리케이션이다. 텍스트 컨텐트는 모두 5개이고 pagination 컨트롤에 선언된 페이지 수는 28개이다.

ArrayIndexOutOfBoundsException이 발생하는 것을 피하기 위하여 페이지 인덱스를 체크하도록 구현하고 있다.

Example 23-3 Adding Text Snippets to a Pagination Control




위 예제를 실행한 어플리케이션의 모습은 아래와 같다.



경우에 따라, 표시해야 할 컨텐트 수 및 pagination 컨트롤이 가져야 할 페이지 수를 정확하게 알 수 없는 상황이 발생한다. 이러한 경우, Pagination 클래스의 생성자 호출 시, 페이지 수를 계산하는 코드를 포함시킬 수 있다. 아래 예제는 시스템 폰트 목록을 얻어 필요한 페이지 수를 계산한다.

Example 23-4 Adding Content of an Undetermined Size




위 예제를 실행한 어플리케이션의 모습은 아래와 같다.




3. Styling a Pagination Control

Pagination 클래스에 선언된 STYLE_CLASS_BULLET는 pagination 컨트롤의 숫자형 page indicator 대신 bullet page indicator를 디스플레이하기 위한 스타일 정의 문자열을 가지고 있다. 이 스타일 정의를 적용함으로써 bullet page indicator를 디스플레이할 수 있다. 뿐만 아니라, caspian style sheet에 정의된 디폴트 pagination 스타일을 수정할 수도 있다.

Example 23-5 Modified Styles of the Pagination Control



아래 예제는 page indicator를 bullet 형태로 바꾸고 위 스타일 정의를 적용하는 소스코드이다.

Example 23-6 Enabling the Modified Pagination Control Style in the PaginationSample Application




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



위에서 적용한 스타일들 외에도, pagination 컨트롤의 모습을 변경하기 위하여 아래와 같은 스타일 항목을 편집할 수 있다.

• -fx-max-page-indicator-count : 한번에 보여질 수 있는 page indicator의 최대 개수
• -fx-arrows-visible : Next 및 Previous 버튼의 visibility 속성 (default : true)
• -fx-tooltip-visible : page indicator 툴팁의 visibility 속성 (default : true)
• -fx-page-information-visible : page information의 visibility 속성 (default : true)
• -fx-page-information-alignment : page information의 정렬 설정