Rich UI 메뉴
Rich UI 메뉴 위젯은 파일과 같은 단일 최상위 레벨 항목으로 표시되는 메뉴를 정의합니다. 메뉴에는 각각 추가 옵션을 제공할 수 있는 종속 메뉴 항목이 있습니다.
메뉴 표시줄을 작성하기 위해 다음 예에서와 같이 일련의 메뉴가 포함된 상자 위젯을 선언할 수 있습니다.
menuBar Box{ font = "Arial", children = [
fileMenu,
otherMenu,
helpMenu ]};
일반적으로 메뉴 표시줄을 전체 웹 페이지가 포함되는 더 큰 상자에 두려고 합니다.
다음은 이후에 표시되는 예의 일부 코드입니다.
handler MyHandler type RUIhandler{initialUI =[ui], onConstructionFunction = start}
ui Box{columns = 1, margin = 12, background = "#eeeeee",
children =[ menubar,
new Box{ borderStyle = "solid", borderColor = "orange", borderTopWidth = 25,
padding = 11, children =[changeTextBox]}
]};
기본 아이디어는 각 메뉴에 대한 메뉴 항목 배열을 지정하는 것이고, 각 메뉴 항목은 최대 두 개의 함수를 참조합니다.
- 항목 유형 함수는 런타임 시 관계를 설정하고 메뉴 항목을 표시하도록 준비하는 경우에 호출됩니다.
- 항목 조치 함수는 메뉴 항목을 선택하는 사용자에게 응답합니다. 그러나 일부 경우 메뉴 항목을 선언할 때 항목 조치 함수를 참조하지 않습니다.
예를 들어 다음은 파일 메뉴의 항목 배열이며, 이 뒤에 파일 메뉴 선언이 옵니다.
fileMenuItems menuItem[] =[
new MenuItem{item = "Clear", itemType = MenuBehaviors.simpleText, itemAction = menuAction},
new MenuItem{item = "Type", itemType = MenuBehaviors.simpleText, itemAction = menuAction}];
fileMenu Menu{menubehaviors ::= MenuBehaviors.BasicMenu, title = "File",
options = fileMenuItems, onMenuOpen = closeMenu};
지원되는 특성과 함수는 “위젯 특성 및 함수”에서 설명됩니다.
이 위젯을 사용하려면 다음 명령문이 필요합니다.
import com.ibm.egl.rui.widgets.Menu;
import com.ibm.egl.rui.widgets.MenuBehaviors;
import com.ibm.egl.rui.widgets.MenuItem;
항목이 표시되는 메뉴를 선언하기 전에 메뉴 항목 세트를 선언해야 함을 참고하십시오. 이 주제에서는 이러한 순서로 메뉴 개발에 대해 설명합니다.
MenuItem
MenuItem 유형의 필드(레코드 파트)는 항목 유형 및 항목 조치 함수를 참조합니다.
함수 특성에 대해 설명하기 전에 MenuItem 필드에 대해 설명합니다.
다음과 같은 필드가 있습니다.
- id
- 메뉴 항목을 CSS 항목과 연관시킬 선택적 값입니다.
- item
- 항목 유형 함수에 전달한 값입니다. Rich UI는 몇 가지 함수를 제공하여
사용자 소유의 코드를 작성할 수 있습니다. 기존 선택을 사용한다고 가정하면
item 특성은 다음 값 중 하나입니다.
- 하위 메뉴 항목으로 표시할 문자열입니다. 이 경우에만 메뉴 항목 선언에서 항목 조치 함수를 지정하십시오.
- 하위 메뉴 항목을 표시할 위젯입니다.
- 하위 메뉴 제목과 종속 하위 메뉴 항목 세트를 참조하는 배열로 구성된 배열입니다.
다음 단편은 이 대체 방법을 표시하며 나중에 표시되는 예에 있습니다.
new MenuItem{item =["Special", [myTimeItem, myReadOnlyItem]], itemType= MenuBehaviors.subMenu }];
- itemType
- 항목 유형 함수에 대한 참조입니다. Rich UI는 item 특성과 관련하여 설명된 옵션에 사용할 수 있는 세 개의 함수를 제공합니다.
- simpleText 함수는 item이 표시할 문자열인 경우에 적절합니다.
- widgetItem 함수는 item이 위젯인 경우에 적절합니다.
- subMenu 함수는 item이 문자열 배열 또는 종속 하위 메뉴 항목인 경우에 적절합니다.
다음 모든 함수는 Rich UI 라이브러리 MenuBehaviors에 있습니다.
- itemAction
- 항목 조치 함수에 대한 참조입니다. item 필드 값이 문자열인 경우에만 이 값을 지정하십시오.
항목 유형 함수에는 다음 위임 파트에 정의된 특성이 있습니다.
Delegate
MenuItemType(newItem any in, itemAction MenuItemSelection, parentMenu Menu in)
returns (any)
end
- newItem
- 메뉴 항목을 선언할 때 지정하는 항목입니다.
- itemAction
- 항목 유형 함수에서 항상 필요한 항목 조치 함수에 대한 참조입니다.
일반적으로 MenuItemSelection이라는 위임 파트는 항목 조치 함수를 설명합니다(나중에 설명됨).
- parentMenu
- 메뉴 항목이 포함된 메뉴입니다.
다음은 항목 조치 함수를 설명하는 MenuItemSelection이라는 위임 파트입니다.
Delegate MenuItemSelection(parentMenu Menu, item any in) end
- parentMenu
- 메뉴 항목이 포함된 메뉴입니다.
- item
- 메뉴 항목입니다.
항목 조치 함수(아웃라인에 있음)는 다음과 같을 수 있습니다.
function menuAction(parentMenu Menu, item any in)
if(parentMenu == fileMenu)
case(item as string)
when("Clear")
;
otherwise
;
end
else
if(parentMenu == helpMenu)
;
else
;
end
end
end
메뉴
메뉴 유형의 필드는 다음과 같습니다.
- menuBehaviors
- 메뉴에 스타일과 기능을 적용하도록 메뉴를 작성하거나 다시 표시하는 동안 호출되는 함수에 대한 참조입니다.
이 참조는 추가 구문(::=) 사용으로 menuBehaviors 배열에 추가됩니다.
항목(구문은 예에 표시됨)을 반복했을 수 있고, 사용자가 메뉴를 선택할 때 참조된 함수가 배열 요소 순서로 실행됩니다.
이 예에서는 menuBehaviors 특성이 basicMenu 함수를 참고합니다. 이 함수는 Rich UI 라이브러리 MenuBehaviors에 있습니다. basicMenu 함수를 직접 사용하거나, 이를 사용자 함수의 기본으로 사용할 수 있습니다.
MenuBehavior라는 위임 파트는 참조되는 함수의 특성에 대해 설명합니다. 나중에 위임 파트에 대해 설명합니다.
메뉴 선언에서 다른 특성 앞에 behaviors 특성을 나열하십시오.
- title
- 표시할 문자열입니다.
- options
- 메뉴 항목의 배열입니다.
- onMenuOpen
- 사용자가 메뉴를 선택할 때 실행되는 함수에 대한 참조입니다.
이 함수에는 리턴값이 없으며 메뉴 유형 및 규정자 IN의 단일 매개변수가 있습니다.
다음은 사용자가 한 메뉴를 선택하여 다른 열린 메뉴를 닫는 예입니다.
function closeMenu(keepOpen Menu IN) if(keepOpen != fileMenu) fileMenu.hideOptions(false); end if(keepOpen != otherMenu) otherMenu.hideOptions(false); end if(keepOpen != helpMenu) helpMenu.hideOptions(false); end end
다음은 MenuBehavior라는 위임 파트이며, 런타임 시 메뉴 선택에 대한 응답에서 호출되는 각 함수에 대해 설명합니다.
Delegate
MenuBehavior(menu Menu in, titleBar TextLabel, optionsBox Box, options MenuItem[])
end
- menu
- 메뉴입니다.
- titleBar
- 지정한 메뉴 제목이 포함된 텍스트 레이블입니다.
- optionsBox
- 메뉴의 모든 항목에 대한 하위 메뉴가 포함된 상자입니다. basicMenu 함수는 런타임 시 마우스 이동에 대한 응답으로 해당 하위 메뉴를 강조표시하는 규칙을 지정합니다.
for (index int from 1 to optionsbox.children.getSize() by 1) widget Widget = optionsBox.children[index]; widget.onMouseOver ::= highlight; widget.onMouseOut ::= removemenuhighlight; end - options
- 메뉴 항목의 배열입니다.
layouts() 함수는 다음 규칙에 설명된 대로 위젯 동작을 재설정합니다.
- 메뉴를 선언할 때 menuBehaviors 특성을 먼저 나열하십시오.
- 함수에 명령문을 작성할 때 menuBehaviors 특성 값을 변경하는 경우 메뉴 특정 함수 layouts()를 호출하여 위젯을 재설정하십시오.
예
다음 예를 사용자 작업공간으로 가져와서 이전에 설명된 관계를 볼 수 있습니다.
package myPkg;
import com.ibm.egl.rui.widgets.Box;
import com.ibm.egl.rui.widgets.CheckBox;
import com.ibm.egl.rui.widgets.HTML;
import com.ibm.egl.rui.widgets.Menu;
import com.ibm.egl.rui.widgets.MenuBehaviors;
import com.ibm.egl.rui.widgets.MenuItem;
import com.ibm.egl.rui.widgets.TextField;
import egl.ui.rui.Event;
handler MyHandler type RUIhandler{initialUI =[ui], onConstructionFunction = start}
{}
ui Box{columns = 1, margin = 12, background = "#eeeeee",
children = [
menubar,
new Box{
borderWidth = 2, borderStyle = "solid", borderColor = "orange",
borderTopWidth = 50, padding = 11,
children =[changeTextBox]}]};
menuBar Box{font = "Arial", children =[fileMenu, otherMenu, helpMenu]};
changeTextBox TextField{text="here"};
readonlyCheck CheckBox{Text = "Read Only", onChange::= setReadOnly};
myTimeItem menuItem{
item = "Time?",
itemType = MenuBehaviors.simpleText,
itemAction = tellTime };
myReadOnlyItem MenuItem {
item = readOnlyCheck,
itemType = MenuBehaviors.widgetItem };
fileMenuItems menuItem[] =[
new MenuItem{item = "Clear",
itemType = MenuBehaviors.simpleText, itemAction = menuAction},
new MenuItem{item = "Type",
itemType = MenuBehaviors.simpleText,
itemAction = menuAction} ];
otherMenuItems menuItem[] =[
new MenuItem{item =["Special", [myTimeItem, myReadOnlyItem]],
itemType= MenuBehaviors.subMenu }];
helpItems menuItem[] =[new MenuItem{item = "About",
itemType = MenuBehaviors.simpleText,
itemAction = showHelp} ];
fileMenu Menu{menubehaviors ::= MenuBehaviors.BasicMenu, title = "File",
options = fileMenuItems, onMenuOpen = closeMenu};
helpMenu Menu{menubehaviors ::= MenuBehaviors.BasicMenu, title = "Help",
options = helpItems, onMenuOpen = closeMenu};
otherMenu Menu{menubehaviors ::= MenuBehaviors.BasicMenu, title = "Other",
options = otherMenuItems, onMenuOpen = closeMenu};
helpArea HTML{onClick ::= hideHelp, position = "absolute", x = 70, y = 60,
backgroundColor = "lightyellow", width = 400, padding = 11,
borderWidth = 3, borderStyle = "solid", height = 50,
text = "Helpful detail is here. <p>Click this box to continue working.</p>"};
function start()
end
function tellTime(parentMenu Menu, item any in)
changeTextBox.text = dateTimeLib.currentTime();
end
function menuAction(parentMenu Menu, item any in)
if(parentMenu == fileMenu)
case(item as string)
when("Clear")
changeTextBox.text = "";
otherwise
changeTextBox.select();
end
else
if(parentMenu == helpMenu)
;
else
; // parentMenu == widgetMenu
end
end
end
function setReadOnly(e Event in)
changeTextBox.readOnly = !(changeTextBox.readOnly);
end
function closeMenu(keepOpen Menu in)
if(keepOpen != fileMenu)
fileMenu.hideOptions(false);
end
if(keepOpen != otherMenu)
otherMenu.hideOptions(false);
end
if(keepOpen != helpMenu)
helpMenu.hideOptions(false);
end
end
function showHelp(parentMenu Menu, item any in)
document.body.appendChild(helparea);
end
function hideHelp(e Event in)
document.body.removeChild(helparea);
end
end