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를 지정할 수도 있다.