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};
For information about supported properties and functions, see "Widget properties and functions."
import com.ibm.egl.rui.widgets.Menu; import com.ibm.egl.rui.widgets.MenuBehaviors; import com.ibm.egl.rui.widgets.MenuItem;
new MenuItem{item =["Special", [myTimeItem, myReadOnlyItem]], itemType= MenuBehaviors.subMenu }];
All of those functions are in the MenuBehaviors Rich UI library.
Delegate MenuItemType(newItem any in, itemAction MenuItemSelection, parentMenu Menu in) returns (any) end
In general, the MenuItemSelection Delegate part describes the item-action function, as noted later.
Delegate MenuItemSelection(parentMenu Menu, item any in) end
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
The MenuBehaviors Delegate part describes the characteristics of the function that is referenced. The Delegate part is described later.
In the menu declaration, list the behaviors property before the other properties.
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
Delegate MenuBehavior(menu Menu in, titleBar TextLabel, optionsBox Box, options MenuItem[]) end
for (index int from 1 to optionsbox.children.getSize() by 1) widget Widget = optionsBox.children[index]; widget.onMouseOver ::= highlight; widget.onMouseOut ::= removemenuhighlight; end
You can bring the following example into your workspace to see the relationships that are described in this topic.
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