Rich-UI-Widget 'Menu'
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]}
]};
- Die itemType-Funktion richtet Beziehungen während der Ausführung ein und wird aufgerufen, wenn das Menüelement für die Anzeige vorbereitet wird.
- Die itemAction-Funktion antwortet dem Benutzer, der das Menüelement auswählt. In einigen Fällen geben Sie jedoch keine itemAction-Funktion an, wenn Sie ein Menüelement deklarieren.
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};
Unterstützte Eigenschaften und Funktionen werden in “Widgeteigenschaften und Widgetfunktionen” beschrieben.
import com.ibm.egl.rui.widgets.Menu;
import com.ibm.egl.rui.widgets.MenuBehaviors;
import com.ibm.egl.rui.widgets.MenuItem;
Beachten Sie jedoch, dass Sie eine Gruppe von Menüelementen deklarieren müssen, bevor Sie das Menü deklarieren, in dem die Elemente angezeigt werden. Die Menüentwicklung wird hier unter Berücksichtigung dieser Reihenfolge erläutert.
MenuItem
- id
- Ein optionaler Wert, um das Menüelement einem CSS-Eintrag zuzuordnen.
- item
- Ein Wert, der an die itemType-Funktion übergeben wird. Rich-UI stellt einige Funktionen bereit und Sie
können eigene Funktionen codieren. Wenn die vorhandenen Funktionen verwendet werden, kann die Eigenschaft
item einen der folgenden Werte haben:
- Eine Zeichenfolge, die als Untermenüelement angezeigt wird. Nur in diesem Fall geben Sie eine itemAction-Funktion in der Menüelementdeklaration an.
- Ein Widget, das als Untermenüelement angezeigt wird.
- Eine Feldgruppe, die aus einem (a) Untermenütitel und (b) einer Feldgruppe besteht,
die eine Gruppe von untergeordneten Untermenüelementen angibt. Das folgende Fragment zeigt
diese Alternative und stammt aus einem späteren Beispiel:
new MenuItem{item =["Special", [myTimeItem, myReadOnlyItem]], itemType= MenuBehaviors.subMenu }];
- itemType
- Ein Verweis auf die itemType-Funktion. Rich-UI stellt drei Funktionen bereit, die die Optionen bereitstellen, die in Bezug auf die Eigenschaft item beschrieben werden:
- Die Funktion simpleText wird verwendet, wenn item eine anzuzeigende Zeichenfolge ist.
- Die Funktion widgetItem wird verwendet, wenn item ein Widget ist.
- Die Funktion subMenu wird verwendet, wenn item eine Feldgruppe von Zeichenfolgen und untergeordneten Untermenüelementen ist.
Alle Funktionen sind in der Rich-UI-Bibliothek MenuBehaviors verfügbar.
- itemAction
- Eine Referenz auf die itemAction-Funktion. Geben Sie diesen Wert nur an, wenn der Wert des Felds item eine Zeichenfolge ist.
Delegate
MenuItemType(newItem any in, itemAction MenuItemSelection, parentMenu Menu in)
returns (any)
end
- newItem
- Das Element, das Sie angeben, wenn Sie das Menüelement deklarieren.
- itemAction
- Eine Referenz auf die itemAction-Funktion, wie sie in der itemType-Funktion immer erforderlich ist.
Im Allgemeinen beschreibt ein Stellvertreterabschnitt ('Delegate') mit dem Namen MenuItemSelection die itemAction-Funktion, wie später erläutert.
- parentMenu
- Das Menü, das das Menüelement enthält.
Delegate MenuItemSelection(parentMenu Menu, item any in) end
- parentMenu
- Das Menü, das das Menüelement enthält.
- item
- Das Menüelement.
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
Menu
- menuBehaviors
- Eine Referenz auf eine Funktion, die während der Erstellung oder der erneuten Anzeige des Menüs
aufgerufen wird, um Stile und Funktionalität auf das Menü anzuwenden.
Die Referenz wird der Feldgruppe menuBehaviors unter Verwendung der Anhängesyntax (::=)
hinzugefügt. Sie können wiederholte Einträge haben (Syntax wie im Beispiel gezeigt). Wenn ein Benutzer ein
Menü auswählt, werden die referenzierten Funktionen in der Reihenfolge der Feldgruppenelemente ausgeführt. Im
vorliegenden Beispiel referenziert die Eigenschaft menuBehaviors die Funktion
basicMenu, die in der Rich-UI-Bibliothek MenuBehaviors verfügbar ist. Sie können die Funktion
basicMenu direkt verwenden oder Sie können sie als Basis für eine eigene Funktion verwenden.
Ein Stellvertreterabschnitt mit dem Namen MenuBehavior beschreibt die Merkmale der Funktion, die referenziert wird. Dieser Stellvertreterabschnitt wird weiter unten beschrieben.
Listen Sie in der Menüdeklaration die Eigenschaft behaviors vor den anderen Eigenschaften auf.
- title
- Die anzuzeigende Zeichenfolge.
- options
- Eine Feldgruppe von Menüelementen.
- onMenuOpen
- Eine Referenz auf eine Funktion, die ausgeführt wird, wenn der Benutzer das Menü auswählt. Die Funktion
hat keinen Rückgabewert und besitzt nur einen Parameter vom Typ 'Menu' und das Qualifikationsmerkmal IN. Im
folgenden Beispiel wird sichergestellt, dass durch die Auswahl eines Menüs durch den Benutzer jedes andere
geöffnete Menü geschlossen wird:
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
- menu
- Das Menü.
- titleBar
- Eine Textbezeichnung, die den von Ihnen zugeordneten Menütitel enthält.
- optionsBox
- Ein Feld, das ein untergeordnetes Element für jedes Menüelement enthält. Die Funktion basicMenu
ordnet Regeln für die Hervorhebung dieser untergeordneten Elemente als Antwort auf Mausbewegungen während der
Ausführung zu:
for (index int from 1 to optionsbox.children.getSize() by 1) widget Widget = optionsBox.children[index]; widget.onMouseOver ::= highlight; widget.onMouseOut ::= removemenuhighlight; end - options
- Eine Feldgruppe mit Menüelementen.
- Stellen Sie beim Deklarieren eines Menüs sicher, dass Sie die Eigenschaft menuBehaviors zuerst aufführen.
- Wenn Sie beim Schreiben von Anweisungen in Funktionen den Wert der Eigenschaft menuBehaviors ändern, rufen Sie die menüspezifische Funktion layouts() auf, um das Widget zurückzusetzen.
Beispiel
Sie können das folgende Beispiel in Ihren Arbeitsbereich einfügen, um die oben beschriebenen Beziehungen anzuzeigen.
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