Rich UI Menu

Rich UI menu ウィジェットは、単一の最上位項目として表示されるメニューを定義します (「ファイル」など)。メニューには従属メニュー項目があり、それぞれ追加のオプションを提供します。 メニュー・バーを作成するには、以下の例で示すように、一連のメニューを含むボックス・ウィジェットを宣言します。
menuBar Box{ font = "Arial", children = [
   fileMenu,
   otherMenu,
   helpMenu 	]};
Web ページ全体を含む、より大きいボックスにメニュー・バーを配置できます。次に後の例から抽出した、部分的なコードを 示します。
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]}
             ]};
基本的な考え方としては、各メニューについてメニュー項目の配列を指定します。 各メニュー項目は、関数を 2 個 (まで) 呼び出します。
ファイル・メニューの項目の配列から、ファイル・メニュー宣言に続く例を以下に示します。
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 プロパティーの値が以下のいずれかの値であることを前提とします。
  • サブメニュー項目として表示するストリング。メニュー項目宣言で項目アクション関数 を指定するのはこの場合のみです。
  • サブメニュー項目として表示するウィジェット。
  • (a) 1 つのサブメニュー・タイトルおよび (b) 一連の従属サブメニュー項目を参照する 1 つの配列で構成される配列。 以下のフラグメントは、この代替配列を示しており、後述する例からの引用です。
    new MenuItem{item =["Special", [myTimeItem, myReadOnlyItem]],
                 itemType= MenuBehaviors.subMenu }];
itemType
項目の型関数の参照。
Rich UI には、item プロパティーに関連して説明されているオプションを許可する 3 つの関数が用意されています。
  • item が表示するストリングの場合、関数 simpleText が適切です。
  • item がウィジェットの場合、関数 widgetItem が適切です。
  • item がストリングおよび従属サブメニュー項目の配列の場合、関数 subMenu が適切です。

これらの関数は、すべて 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

Menu

タイプ Menu のフィールドを以下に示します。
menuBehaviors
スタイルおよび機能がメニューに適用されるように、メニューの作成中または再表示中に呼び出される関数への参照。 この参照は、追加構文 (::=) を使用して、menuBehaviors 配列に追加されます。繰り返し項目を使用できます (構文は例で示しています)。ユーザーがメニューを選択すると、参照されている関数が配列要素の順序で実行されます。 例では、menuBehaviors プロパティーは、Rich UI ライブラリー MenuBehaviors で使用可能な関数 basicMenu を参照しています。関数 basicMenu を直接使用することも、独自の関数のベースとして使用することもできます。

委譲パーツ MenuBehavior は、参照されている関数の特性を記述します。 委譲パーツについては後述します。

メニュー宣言では、他のプロパティーより先に behaviors プロパティーをリストします。

title
表示するストリング。
オプション
メニュー項目の配列。
onMenuOpen
ユーザーがメニューを選択したときに実行される関数への参照。 この関数に戻り値はなく、タイプ Menu の単一パラメーターおよび修飾子 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
オプション
メニュー項目の配列。
以下の規則で説明されているように、関数 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

フィードバック