iPresso 튜토리얼 #3

iPresso에서 분산형 차트를 통해 수치값 간의 상관 관계를 분석하고 그 안에서 데이터의 의미를 발견할 수 있습니다. 다양한 관점에서 데이터를 시각화하여 관찰하다 보면, 미처 알지 못했던 새로운 정보 (또는 패턴)을 발견할 수 있습니다.

iPresso 튜토리얼 #2

iPresso에서 트리맵 차트, 파이 차트, 링 차트, 워드클라우드 차트 등의 차트를 통해 카테고리 별 수치 현황을 시각화하고 분석합니다.
간단한 UI 조작을 통해 쉽고 빠르게 데이터를 분석할 수 있습니다.

iPresso 튜토리얼 #1

iPresso를 이용함으로써, 데이터를 기본 차트 (막대, 선형, 면형) 형식으로 시각화하고, 다양한 차트 제어를 통해 서로 다른 관점의 정보나 현상들을 발견할 수 있습니다.

iPresso 소개

iPresso (정보시각화도구) 소개 

iPresso는 information과 presso의 합성어 입니다.

information (정보) + presso (라틴어로 '압착하다') = iPresso

많은 양의 정보를 압축, 요약하여 직관적이고 이해가 쉬운 형태로 시각화해주고자 하는 제품의 철학이 담긴 이름입니다.

iPresso는 

다양한 형식으로 존재하는 데이터들을 불러들여

데이터가 의미하는 바를 ‘사용자대화방식’으로 쉽고 빠르게 분석하여 시각화 시켜줌으로써

효율적인 의사결정을 지원해주는 제품입니다.

현재 iPresso는 JavaFX 기반으로 구현되었으며, 지난 1년여동안 개발되어 올해부터 공개에 들어갈 예정입니다.

이어지는 글들을 통해 보다 자세한 소개 자료와 동영상 자료들을 게시하도록 하겠습니다.

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의 정렬 설정

JavaFX UI - 22.Color Picker

 

Color picker 컨트롤은 사용자가 색상을 선택할 수 있도록 해주는 UI 컴포넌트이다. 색상을 선택할 때는 미리 정의된 색상 중 선택하는 방법과 RGB나 HSB 조합을 통해 색상을 지정할 수도 있다.

1. Design Overview

ColorPicker 컨트롤은 color chooser, color palette 그리고 custom color dialog로 이루어져 있다. 다음 그림은 이들 각 요소들을 보여준다.




2. Color Chooser

Color chooser는 현재 설정된 색상과 그에 대한 라벨을 표시하는 콤보박스이다.
Color picker 컨트롤은 아래와 같은 세 가지 모양의 color chooser를 지원한다.



3. Color Palette

Color palette는 미리 정의된 색상들의 집합을 가지고 있으며, ‘Custom Color dialog 창’을 열기 위한 ‘Custom Color’ 링크를 가지고 있다.

Color palette의 초기 모습은 아래와 같다.



만약 미리 정의된 사용자 정의 컬러가 있다면, 아래 그림과 같이 ‘Custom Colors’ 영역에 그 컬러가 보여진다.



Color palette는 up, down, left, right 키를 사용한 선택 이동이 가능하다.

사용자 정의 컬러 집합은 어플리케이션이 재시작될 때 복구되지는 않는다.


4. Custom Color Dialog window

Custom Color 다이얼로그 창은 Color Palette 상의 ‘Custom Color’ 링크를 클릭했을 때 열리는 modal 윈도우이다. 사용자는 Color 영역이나 수직 Color Bar를 마우스로 드래그하여 색상을 지정할 수 있다.



색상을 지정하는 또 다른 방법은 HSB (Hue Saturation Brightness) 또는 RGB (Red Green Blue) 값을 설정하거나, web color 값을 직접 입력하는 것이다. 아래 화면은 사용자 정의 컬러 세팅을 위한 세 가지 pane들이다.



사용자는 ‘Custom Color Dialog’ 상의 Opacity 슬라이더를 조정하거나 0에서 100 사이의 값을 직접 입력함으로써, 투명도를 설정할 수 있다.


5. Using a Color Picker

Color picker는 어플리케이션 scene 또는 레이아웃 컨테이너에 직접 추가되거나, 어플리케이션 툴바에 추가될 수 있다.

Example 22-1 Creating a Color Picker Control 



다음은 ColorPicker를 실제로 테스트해보기 위한 샘플 소스코드이다.

Example 22-2 Using the ColorPicker Control to Alter the Color of the Text Component



위 예제는 color picker를 생성하고 이를 통해 컬러가 변경될 때의 액션을 정의하고 있다. 컬러가 선택되면 Text 컨트롤의 컨텐트 색상이 선택된 색상으로 변경된다.

아래 화면은 새로 선택된 색상이 Text 컨트롤에 적용되는 모습이다.



유사하게, 선택된 색상을 graphic Node에 적용할 수 있다. 아래 예제는 T셔츠를 디자인하기 위해 color picker를 사용하는 코드이다.

Example 22-3 Using ColorPicker to Alter the Color of a Graphical Object




Color picker를 가지고 작업할 때, getCustomColors 메서드를 이용하여 생성되어 있는 사용자 정의 컬러들을 ObservableList 형태로 얻어 올 수 있다. 그러나 어플리케이션이 시작될 때 임의의 사용자 지정 컬러들을 color picker에 등록할 수는 없다.

Example 22-4 Obtaining the Custom Colors




6. Changing the Appearance of a Color Picker

Color picker의 디폴트 모습은 com.sun.javafx.scene.control.skin.ColorPickerSkin 클래스에 의해 정의되어 있다. Color picker에 다른 skin을 적용하려면, 아래 예제처럼 CSS 스타일 파일 상에서 color-picker 클래스의 ?fx-skin 프로퍼티를 재정의한다.

Example22-5 Setting an Alternative Skin for a Color Picker




다음 예제는 Color picker의 모습을 변경하기 위하여 split-button CSS 클래스와 arrow-button CSS 클래스를 사용한다.

 Example 22-6 Setting Appearance for a Color Picker


caspian.css 파일에 정의된 다양한 CSS 클래스들을 통해, color picker의 디폴트 스타일을 변경할 수 있다. 이 파일은 JavaFX SDK가 설치된 디렉토리 아래의 rt/lib 디렉토리에 있는 jfxrt.jar 파일에 묶여 있다.

이를 풀기 위하여 다음과 같은 명령을 실행한다.

jar -xf jfxrt.jar com/sun/javafx/scene/control/skin/caspian/caspian.css


다음 예제는 color picker의 배경색과 라벨의 기본 스타일을 변경한다.

Example 22-7 Modifying the Default Appearance of a Color Picker



위와 같은 스타일 정의를 ControlStyle.css 라는 파일에 저장한 후, 이를 어플리케이션에 적용하기 위해서는 다음과 같은 코드를 사용한다.

scene.getStylesheets().add("colorpickersample/ControlStyle.css");

ColorPickerSample 예제에 위와 같이 스타일을 변경하는 코드를 반영한 후, 실행하면 color picker의 모습이 아래 화면과 같이 변한다.



ColorPicker 클래스는 ComboBoxBaxe 클래스를 상속하여 CSS 속성까지도 동일하게 가진다. Combo box와 Color picker의 모습을 통일시키기 위하여 combo-box-baxe CSS 스타일을 아래와 같이 새롭게 정의할 수 있다.

Example 22-8 Setting the Combo-Box-Base Styles



ColorPickerSmaple 어플리케이션에 위 예제 스타일을 적용하면 아래 모습과 같다.

JavaFX UI - 21.Password Field

PasswordField 클래스는 특화된 text field의 한 종류로서 사용자가 입력한 문자들을 숨기기 위해 echo character를 출력한다. 아래 그림은 prompt message를 가진 password field의 모습이다.



1. Creating a Password Field

아래 코드 예제와 같이 PasswordField를 생성할 수 있다.

Example 21-1 Creating a Password Field 



TextField 클래스와 마찬가지로 PasswordField 클래스도 setText 메서드를 제공하여 초기에 입력될 텍스트 문자열을 지정할 수 있다. 그러나 지정된 텍스트가 화면에는 echo character들로 보여진다. 디폴트 echo character는 asterisk(*) 이다.



Password field에 입력된 값은 getText 메서드를 통해 얻을 수 있다.


2. Evaluating the Password

아래 예제는 password field를 사용하는 일반적인 사용 예시이다.

Example 21-2 Implementing the Authentication Logic



Password field에 대한 인증 로직은 setOnAction 메서드에 의해 정의되었다. 만약 입력된 값이 정해진 암호와 일치하지 않으면 아래와 같이 경고 메시지가 보여진다.



입력된 값이 정해진 암호와 일치하면 아래와 같은 확인 메시지가 보여진다.



보안을 위해, 입력된 값이 사용된 후에는 password field를 비우는 것이 좋다.