多くの場合、Rich UI ウィジェットは EGL ハンドラー・パーツであり、ステレオタイプ RUIWidget です。 例外として、Tooltip、DataGridTooltip、および TreeTooltip などがあります。これらすべてはステレオタイプ RUIHandler であり、それぞれが外部型に基づく Dojo ウィジェットです。
特定の関数またはプロパティー (例えば、myWidget.myFunction() や myWidget.myProperty) にアクセスするには、常にドット構文を使用してください。
大部分の EGL プロパティーは EGL システム・コードでのみ使用可能で、実行時には使用できません。ただし、ウィジェット・プロパティーは、実行時にコードで使用可能なフィールドです。
class や style などのスタイル関連プロパティーは、IBM 提供のすべてのウィジェットで使用可能です。スタイルについて詳しくは、『ウィジェット・スタイル』を参照してください。
ウィジェット (例えば、box) が、特定の DOM 要素ではなく DOM サブツリーに対応する場合、この ID は、サブツリー内の最上位の DOM 要素の ID です。DOM の概要については『ブラウザーによる Rich UI アプリケーションの処理方法の説明』を参照してください。
デフォルトのタブ順序は、ブラウザー固有です。
ウィジェットは、その親の外部や、場合によっては表示可能域の外部に配置できます。
例えば、ボックスの子については、parent プロパティーは、ボックスではなく、DOM テーブル要素内の DOM TD 要素を参照します。ただし、logicalParent プロパティーは、ボックスを表し、DOM テーブル要素の親である DOM Div 要素を参照します。
parent は、ウィジェット・タイプの開発用で、DOM 要素にアクセスできるようにします。DOM の概要については『ブラウザーによる Rich UI アプリケーションの処理方法の説明』を参照してください。ほとんどの場合、z/OS® または IBM® i が稼働するマシンから派生したアラビア語またはヘブライ語のコンテンツには設定「Visual」が適しています。
ariaLive 値は、引用符付きストリング ("off"、"polite"、"assertive"、または "rude") で、それぞれプロパティー: live に関する指定のセクションで説明します。
ariaRole 値は、"button" や "listbox" などの引用符付きストリングで、それぞれ役割 に関する指定のセクションで説明します。
fadeIn (duration int in, callback EffectCallback)
fadeOut (duration int in, callback EffectCallback)
myButton.fadeOut(1000, null);
focus()
例えば、フォーカスを受けているボタンが強調表示され、ユーザーが ENTER キーを押す操作は、ユーザーがボタンをクリックする操作に相当します。同様に、フォーカスを受けているテキスト・フィールド (読み取り専用ではない場合) には、ユーザーが最初にフィールドにタブ移動せずに印刷可能文字を入力することによってデータを入力できるように、カーソルが表示されます。
ユーザーは、TAB を繰り返し押して、使用可能なフィールドの間を循環できます。キーを押すたびに、フォーカスは次のアプリケーション・フィールドまたはブラウザー上のフィールド (例えば、Web アドレス・フィールド) のいずれかに移ります。
myButton.focus();
morph (duration int in, callback EffectCallback, morphFunction MorphFunction )
myButton.morph(1000, null, myCustomMorphFunction);
resize (width int in, height int in,
duration int, callback EffectCallback)
myButton.resize(100, 100, 1000, myFunction);
myInTextField TextField{};
myButton Button{ text = "Input to Output", onClick ::= click };
myOutTextField TextField{};
myBox Box{ columns = 3,
children = [ myInTextField, myButton, myOutTextField ]};
配列が名前付きウィジェットを複数回参照する場合は、最後の参照のみが使用され、その他の参照は無視されます。
myInTextField TextField{};
myTextOutField TextField{};
myBox box{columns=3,
children=[myInTextField,
new Button{ text = "Input to Output", onClick ::= click},
myOutTextField]};
通常、columns の値が n である場合は、配列の位置 n+1 にあるウィジェットは、新規行の最初の列に表示されます。columns 値を指定しないと、Box ウィジェットの子は右側に拡張されます。
別のウィジェットの子である Div ウィジェットは、前のウィジェットの下に垂直に表示されます。
myBox.children = [myInTextField, myButton02, myOutTextField];
Function myFirstFunction(){}
myBox.appendChild(myOtherButton);
myBox.appendChildren([myOtherTextField, myOtherButton02]);
myBox.removeChild(myOtherButton);
myBox.removeChildren();
end
document.body.appendChild(myOtherButton);
document.body.appendChildren([myOtherTextField, myOtherButton02]);
document.body.removeChild(myOtherButton);
document.body.removeChildren();
関数 appendChild と removeChild はそれぞれ、単一のウィジェットを受け入れます。appendChildren は、ウィジェットの配列を受け入れます。また、removeChildren は引数を取りません。appendChild または appendChildren の場合は、ウィジェット宣言は匿名または名前付きにできます。removeChild の場合は、ウィジェット宣言は名前付きである必要があります。
特定のウィジェットは、 別の 1 つのウィジェット (または、後の例に示すように文書本体) の子にのみすることができます。ウィジェットが親を持つ場合は、 そのウィジェットを別の親の子にさせることができます。この再割り当てを 子ウィジェットの親の再指定 と呼びます。
myTopBox Box{padding = 8, columns = 1, backgroundColor = "Aqua",
children =[myBox02, myBox03 ]};
handler MyTest type RUIhandler{initialUI =[myBox03]}
実行時に initialUI の代入は、myTopBox の宣言より後で処理されます。この影響により、myBox03 が文書本体の親に再指定され、この結果 myTopBox の子は myBox02 1 つのみになります。
import com.ibm.egl.rui.widgets.Box;
import com.ibm.egl.rui.widgets.Button;
import com.ibm.egl.rui.widgets.TextField;
import egl.ui.rui.Event;
handler MyTest type RUIhandler{initialUI =[myBox03]}
myTopBox Box{padding = 8, columns = 1, backgroundColor = "Aqua",
children =[myBox02, myBox03 ]};
myBox02 Box{padding = 8, columns = 2, backgroundColor = "DarkGray",
children =[myHelloField ]};
myBox03 Box{padding = 8, columns = 3, backgroundColor = "CadetBlue",
children =[myInTextField, myButton, myOutTextField] };
myHelloField TextField{readOnly = true, text = "Hello"};
myInTextField TextField{};
myButton Button{text = "Input to Output", onClick ::= click};
myOutTextField TextField{};
function click(e EVENT in)
document.body.appendChildren([myTopBox]);
end
end
document.body.removeChildren();
document.body.removeChild(myBox);