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를 비우는 것이 좋다.

JavaFX UI - 20.Menu

JavaFX 어플리케이션에서 메뉴를 생성하기 위해서는 다음 클래스들이 사용된다.

• MenuBar
• MenuItem
• Menu
• CheckMenuItem
• RadioMenuItem
• CustomMenuItem
• SeparatorMenuItem
• ContextMenu

아래 화면은 전형적인 메뉴바의 모습을 보여준다.

1. Building Menus in JavaFX Applications

Menu는 사용자에게 보여지는 actionable 항목들의 목록이다. Menu가 화면에 보여지면 사용자는 그 중 하나를 선택할 수 있다. 사용자가 하나의 항목을 선택하면 menu는 화면에서 사라진다. Menu를 사용하면, 어플리케이션에서 항상 보여질 필요가 없는 기능들을 메뉴에 위치시킴으로써, UI 공간을 절약할 수 있다.

Menu bar에 있는 메뉴 아이템들은 일반적으로 카테고리에 의해 그룹화 된다. 이를 위한 코드 패턴은 먼저 menu bar을 생성하고 카테고리 메뉴를 정의한 다음, 각 카테고리에 메뉴 아이템을 위치시킨다. JavaFX 어플리케이션에서 메뉴를 생성할 때는 다음과 같은 menu item 클래스들을 사용한다.

• MenuItem - actionable option 생성을 위해 사용된다.
• Menu - sub menu 생성을 위해 사용된다.
• RadioButtonItem - 상호배타적인 선택 option을 생성하기 위해 사용된다.
• CheckMenuItem - 선택/해제 상태 간의 토글(toggle) option을 생성하기 위해 사용된다.

한 카테고리 내의 menu item들을 분리하기 위해서는 SeparatorMenuItem 클래스를 사용한다.
카테고리를 통해 구성된 메뉴들은 일반적으로 윈도우의 상단에 위치한다. 만약 menu bar를 위한 공간 할당이 불가능하다면, 마우스 클릭에 의해 열리는 context menu을 사용할 수 있다.


2. Creating a Menu Bar

Menu ber는 UI 상의 어느 곳에든 위치할 수 있지만, 일반적으로 UI의 상단에 위치한다. Menu bar의 크기는 어플리케이션 윈도우의 너비에 맞게 재조정된다. Menu bar에 추가된 각 메뉴들은 텍스트를 가진 button으로 표현된다.

아래 예제는 식물과 관련한 정보 (이름, 학명, 사진, 요약설명)를 관리하는 어플리케이션 코드로서 여기에는 세 가지 메뉴 카테고리가 만들어 졌다. : File, Edit, View

Example 20-1 Menu Sample Application

 

 

다른 UI 컨트롤들과는 달리, Menu 클래스를 비롯한 다른 menu item 클래스들은 Node 클래스를 상속하지 않는다. 따라서 이들은 scene에 직접 추가될 수 없으며, menu bar에 추가되기 전까지는 보여질 수 없다.

3. Adding Menu Items

File 메뉴에 다음의 menu item들을 추가한다.

• Shuffle - 식물들에 대한 정보를 로드한다.
• Clear - 모든 정보를 제거하고 화면은 초기화한다.
• Separator - menu item들을 분리한다.
• Exit - 어플리케이션을 종료한다.

아래 예제는 Shuffle 메뉴를 생성하는 소스 코드이다. 사용자가 메뉴를 클릭 했을 때의 수행되는 액션은 setOnAction 메서드를 이용하여 정의한다.

Example 20-2 Adding the Shuffle Menu Item with Graphics






Shuffle 메뉴가 선택되면 이벤트 핸들러에 의해 shuffle 메서드가 호출된다. shuffle 메서드에서는 새로운 식물 정보들로 메인 화면을 재정의한다.

Clear 메뉴 아이템이 어플리케이션 scene을 초기화하기 위해 사용된다. 초기화는 메인 화면의 VBox 컨테이너를 안 보이게 함으로서 가능하다.

Example 20-3 Creating the Clear Menu Item with Accelerator

MenuItem 클래스는 개발자가 메뉴 단축키를 지정할 수 있도록 구현되었다. 위 Clear 메뉴의 경우 사용자가 Ctrl+X 단축키를 통해 메뉴 선택과 동일한 효과를 내도록 구현되었다.

Exit 메뉴는 어플리케이션을 종료한다.

Example 20-4 Creating the Exit Menu Item




위에서 새롭게 생성된 menu item들을 File menu에 추가하기 위해 다음과 같은 코드를 사용한다.

Example 20-5 Adding Menu Items

위 예제에서는 menu item들을 분리하기 위해여 separator menu을 생성하여 추가하였다.

위에 나온 Menu 예제들을 조합하여 완성된 어플리케이션을 실행하면 다음 화면과 같은 모습이다.

다음 예제는 View 메뉴를 통해 식물 정보를 구성하는 요소들(이름, 학명, 사진, 요약설명)을 숨기거나 보이도록 한다. 예제에서와 같이 createMenuItem 메서드를 구현하고 어플리케이션의 start 메서드 내에서 이를 호출하도록 한다. 이 메서드는 네 개의 CheckMenuItem 객체를 생성하여 View 메뉴에 추가한다.

Example 20-6 Applying the CheckMenuItem Class to Create Toggle Options

CheckMenuItem 클래스는 MenuItem 클래스를 상속받은 menu item 클래스이다. CheckMenuItem은 선택/해제 두 가지 상태로 토글될 수 있으며, 선택 상태가 되었을 때 해당 menu item에 체크(√) 표시가 보여진다.

 

위 예제는 네 개의 CheckMenuItem 객체를 생성하였고, 이들 각각의 selectedProperty 프로퍼티가 변경되는 이벤트가 발생하면 해당하는 정보를 디스플레이하는 컨트롤을 숨기도록 구현하였다. 아래 화면은 위 예제 코드를 어플리케이션에 적용했을 때의 모습이다.




4. Creating Submenus

Edit 메뉴에 대해서는 두 개의 menu item을 추가한다. (Picture Effect, No Effects)

Picture Effect 메뉴는 하위에 세 개의 menu item을 가지는 sub menu로 만들어, 하위 메뉴 선택에 따라 사진에 시각적 효과를 적용하도록 한다. No Effects 메뉴는 현재 적용된 시각적 효과를 제거하고 이미지의 초기 상태로 복원하는 menu item으로 만든다.

Sub menu의 하위에 생성되는 menu item은 RadioMenuItem 클래스를 사용한다. 생성된 RadioMenuItem 객체들은 하나의 toggle group으로 묶어서 아이템들이 상호배타적으로 선택될 수 있도록 한다.

Example 20-7 Creating a Submenu with Radio Menu Items

각 radio menu item들에 대한 시각적 효과를 정의하기 위하여 setUserData 메서드가 사용되었다. Toggle group 내의 한 아이템이 선택되면, 그에 해당하는 효과가 사진에 적용된다.

아래 화면은 Edit 메뉴가 추가된 어플리케이션에서 Shadow 효과 메뉴를 선택하기 직전의 모습과선택 후의 모습이다.







아직 아무 시각적 효과도 적용되지 않은 상태에서는, MenuItem 클래스의 setDisable 메서드를 이용하여 No Effects 메뉴를 비활성화 시킬 수 있다. 이를 위해 Example 20-7을 아래와 같이 수정한다.

Example 20-8 Disabling a Menu Item

Picture Effect 메뉴의 하위 RadioMenuItem들 중 아무것도 선택되지 않았다면, 아래와 같이 No Effect 메뉴가 비활성화 된다.

 

5. Adding Context Menus

요구되는 기능에 대한 UI 공간이 부족한 경우, context menu를 사용할 수 있다. Context menu는 마우스 클릭을 통해 나타나는 팝업 윈도우 메뉴이다. 하나의 context menu는 하나 이상의 menu item들을 포함할 수 있다.

위 Menu Sample 어플리케이션에서 보여지는 ImageView에 context menu를 추가하여 사용자가 이미지를 복사할 수 있도록 아래와 같은 코드를 추가한다.

Example 20-9 Defining a Context Menu

사용자가 ImageView 객체를 마우스 오른버튼으로 클릭하면, context menu의 show 메서드가 호출되어 화면에 보여진다.

Context menu의 ‘Copy Image’ 메뉴에 대해 정의된 setOnAction 메서드에서는 클립보드 객체를 하나 생성하여 현재 선택된 이미지를 클립보드에 추가한다. 아래 화면은 사용자가 ImageView 상의 이미지를 복사하는 모습이다.



더 많은 개선을 위해 context menu에 더 많은 menu item들을 추가할 수 있다. 또한 CustomMenuItem 클래스를 통해 맞춤형 menu를 만들 수도 있다. 메뉴 안에 임의의 node를 삽입하거나 menu item으로서 button이나 slider를 지정할 수도 있다.

JavaFX UI - 19.Titled Pane & Accordion

Titled Pane은 타이틀을 가진 panel이다. 이 panel은 열리거나 닫힐 수 있으며, UI 컨트롤 또는 이미지, 레이아웃 컨테이너에 추가된 엘리먼트 그룹 등과 같은 모든 형태의 Node들을 포함할 수 있다.

Titled Pane은 accordion 컨트롤을 이용하여 그룹화될 수 있다. Accordion 컨트롤은 여러 panel들을 생성하고 한번에 하나의 panel 만 보여주고자 할 때 사용된다.

아래 화면은 세 개의 titled pane을 묶은 accordion 컨트롤을 보여준다.

1. Creating Titled Panes

TitledPane 컨트롤을 생성하기 위해 타이틀과 내용을 정의한다. 이를 위해 TitledPane 클래스의 생성자를 사용하거나, setText 및 setContent 메서드를 사용할 수 있다.

Example 19-1 Declaring a TitledPane Object

 
위 코드 샘플을 통해 보여지는 Titled pane의 모습은 아래와 같다.



Titled Pane의 크기는 내부 컨텐트의 preferred size를 수용하기 위하여 재조정된다. Titled Pane의 컨텐트로써 멀티 라인 텍스트가 지정될 수 있다.



Titled Pane의 크기를 명시적으로 지정하지 않도록 한다. Titled pane이 열리거나 닫힐 때 비정상적인 상황을 유발할 수 있다.
아래 예제 코드는 GridPane 레이아웃 컨테이너를 이용하여 titled pane의 컨텐트를 구성하는 코드이다.

Example 19-2 Titled Pane with the GridPane Layout Container

위 코드를 통해 생성된 titled pane의 모습은 아래와 같다.



디폴트로 모든 titled pane은 접힐 수 있고, 접히거나 열리는 움직임에 애니메이션 효과가 적용된다. 만약 titled pane이 접히는 것을 막고자 한다면 setCollapsible(false) 메서드를 사용한다. 또한 setAnimated(false) 메서드를 통해 애니케이션 효과도 없앨 수 있다.

Example 19-3 Adjusting the Style of a Titled Pane

2. Adding Titled Panes to an Accordion

Titled pane은 독립적으로 사용될 수도 있고, Accordion 컨트롤을 통해 그룹화되어 사용될 수도 있다.

여러 titled pane들을 하나의 accordion에 추가하는 것은 toggle 버튼들을 하나의 toggle group에 추가하는 것과 유사하다. Accordion에서는 여러 titled pane이 동시에 열릴 수 없으며, 한번에 오직 하나의 titled pane 만이 열릴 것이다.

Example 19-4 Accordion and Three Titled Panes

Accordion에 추가된 모든 titled pane들은 초기 디폴트 설정으로 인해 접혀있다. 특정 titled pane을 열려 있도록 하려면 setExpandedPane 메서드를 사용한다.




3. Processing Events for an Accordion with Titled Panes

아래 예제는 두 가지 형태의 titled pane을 생성한다. 하나는 email client UI를 가지는 독립 titled pane이고, 다른 하나는 서로 다른 이미지들을 컨텐트로 가지는 세 개의 titled pane과 이를 accordion을 통해 그룹화하였다. Accordion을 통해 선택된 titled pane의 이미지가 email client UI 상의 이미지 첨부로 설정된다.

Example 19-5 Implementing ChangeListener for an Accordion





아래 화면은 위 예제가 실행된 초기 화면이다. 아직 accordion 상에서 이미지가 선택되지 않았으므로 첨부파일 지정이 “N/A”로 표시된다.

 

사용자가 accordion에서 titled pane을 선택한다면 아래와 같이 보일 것이다.