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 어플리케이션에 위 예제 스타일을 적용하면 아래 모습과 같다.