Rich-UI-Widget 'Menu'

Ein Rich-UI-Widget 'Menu' definiert ein Menü, das als einzelner Eintrag der höchsten Ebene wie zum Beispiel Datei ('File' im Beispiel dieses Abschnitts) angezeigt wird. Das Menü besitzt untergeordnete Menüelemente, die jeweils weitere Optionen bereitstellen können. Zum Erstellen einer Menüleiste können Sie ein Feldwidget 'Box' deklarieren, das eine Reihe von Menüs enthält, wie im folgenden Beispiel gezeigt:
menuBar Box{ font = "Arial", children = [
   fileMenu,
   otherMenu,
   helpMenu 	]};
Es ist wahrscheinlich, dass Sie die Menüleiste in einem größeren Feld anlegen, das die gesamte Webseite mit einbezieht. Das folgende Beispiel zeigt einen Teil des Codes aus einem späteren Beispiel:
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 Grundidee besteht darin, dass Sie eine Feldgruppe von Menüelementen für jedes Menü angeben und jedes Menüelement (höchstens) zwei Funktionen angibt:
Das folgende Beispiel zeigt die Feldgruppe von Elementen für das Menü 'fileMenu', gefolgt von der Deklaration des Menüs 'fileMenu':
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.

Zur Verwendung dieses Widgets sind die folgenden Anweisungen erforderlich:
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

Die Felder für den Typ MenuItem (ein Datensatzabschnitt) referenzieren die itemType- und itemAction-Funktionen. Die Felder für den Typ MenuItem werden vor der Beschreibung der Funktionsmerkmale beschrieben. Die folgenden Felder sind verfügbar:
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.
Die itemType-Funktion hat die Merkmale, die im folgenden Stellvertreterabschnitt definiert werden:
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.
Das folgende Beispiel zeigt den Stellvertreterabschnitt mit dem Namen MenuItemSelection, der die itemAction-Funktion beschreibt:
Delegate MenuItemSelection(parentMenu Menu, item any in) end
parentMenu
Das Menü, das das Menüelement enthält.
item
Das Menüelement.
Die itemAction-Funktion könnte (im Entwurf) wie folgt aussehen:
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

Der Typ 'Menu' hat die folgenden Felder:
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
Das folgende Beispiel zeigt den Stellvertreterabschnitt mit dem Namen MenuBehavior, der jede Funktion beschreibt, die als Antwort auf eine Menüauswahl während der Ausführung aufgerufen wird:
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.
Die Funktion layouts() setzt Widgetverhalten zurück, wie in den folgenden Regeln beschrieben:
  • 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

Feedback