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