Rich UI ハンドラー・パーツには、ウィジェット が含まれています。それぞれは、カスタマイズされたスクリーン内のコントロールですが、ウィジェット という用語は、コントロールを作成する変数宣言も指しています。ウィジェットは、ビジネス・データを含むことができ、イベントに応答できます。
製品にはウィジェット・タイプ のコア・セットが用意されていて、ウィジェットの宣言に使用できます。以下の表には主なタイプがリストされていますが、使用可能な Dojo ウィジェットは別のトピックでリストされているため、ここに含まれていません。
| カテゴリー | タイプ | 用途 |
|---|---|---|
| コンテナー | Box | ボックスを定義します。ほとんどの場合、これに他のウィジェットが組み込まれています。以前のバージョンの Rich UI では、ボックスが主な種類のコンテナーでした。ただし、GridLayout のトピックで説明されているように、タイプ GridLayout のコンテナーの方が柔軟です。 ボックス内の列数を指定できます。例えば、列数が 3 の場合、最初の 3 つの組み込みウィジェットはボックスの先頭行にあり、4 番目から 6 番目は 2 番目の行にあります (以下同様)。列数が 1 の場合、組み込みウィジェットはすべて垂直に配置されます。いずれの場合も、列の幅は列内の最大のウィジェットの幅に等しく、所定の列内の組み込みウィジェットを列の中心、右、または左のいずれに位置合わせするかどうかを指定できます。 空のセルを表示するには、ボックスの子として、テキストを含まないテキスト・ラベルを組み込んでください。 必要であれば、垂直および水平スクロール・バーが表示され、これによりユーザーは、表示範囲外のウィジェットにアクセスできます。 |
| Div | Web ページの分割 (HTML DIV タグ) を定義します (前のコンテンツの下)。分割ウィジェットは、FloatLeft および FloatRight ウィジェットの親である場合があり、これによって Web ページ設計の柔軟性が得られます。 | |
| FloatLeft | Web ページの分割 (HTML DIV タグ) を定義します。ほとんどの場合、分割、FloatLeft、または FloatRight ウィジェットの子として定義します。このウィジェットは CSS エレメント float:left を使用します。 | |
| FloatRight | Web ページの分割 (HTML DIV タグ) を定義します。例えば、分割、FloatLeft、または FloatRight ウィジェットの子として定義します。このウィジェットは CSS エレメント float:right を使用します。 | |
| GridLayout | 子ウィジェットが埋め込まれる可変スペースの行と列を持つコンテナーを定義します。各子ウィジェットには layoutData プロパティーがあり、そのプロパティーに値を割り当てることによりウィジェットの位置を指定します。 | |
| Grouping | 境界線のあるボックスにウィジェット・コレクションを表示します。境界線の上部に埋め込まれるテキストを割り当ててください。 | |
| 情報 | DataGrid | 値の配列を表形式で定義します。このウィジェットでは、次の詳細情報を指定できます。
|
| Grid | 値の配列を表形式で定義します。新規開発の場合は、パフォーマンスと機能にすぐれている DataGrid ウィジェット・タイプを使用します。 | |
| HTML | HTML フラグメントを表示します。これは、サービスによって提供される場合があります。HTML は境界域にレンダリングされます (必要であれば、スクロール・バーが表示されます)。 | |
| Image | グラフィックまたは代替テキストを表示します。 | |
| Shadow | 指定された DIV ウィジェットの子であるウィジェットに対してシャドー効果をもたらします。 | |
| Span | ユーザーが変更できない文字列を表示します。文字列には、HTML セグメント (<b>this boldfaced code</b> など) を組み込むことができます。 | |
| TextLabel | ユーザーが変更できない文字列を表示します。このウィジェットは、span とは異なります。これは、HTML セグメント (<b>this code</b> など) の組み込みが、不等号括弧を含め、現状のまま表示されるためです。 | |
| Tree | 表示可能ノードのツリーを定義します。 | |
| インタラクティブ | BidiTextArea | 双方向テキストの 1 つ以上の行を含む長方形を定義します。 |
| BidiTextField | 双方向テキストの単一行を含むテキスト・ボックスを定義します。 | |
| Button | ボタンを定義します。これにより、ユーザーがクリックしやすくなり、関数を起動することによってそのクリックに応答します。 | |
| Checkbox | チェック・ボックスを定義します。true/false オプションが表示され、関数を起動することによってユーザー入力に応答します。 | |
| Combo | コンボ・ボックスを定義します。いくつかの選択可能オプションのうちの 1 つを表し、これによりユーザーは、一時的にドロップダウン・リストを開いて異なるオプションを選択できます。 | |
| Hyperlink | Web ページ・リンクを定義します (クリックすると、ブラウザーにそのページが表示されます)。ページ表示は、レイアウトに制約されません。 | |
| List | リストを定義します。これによりユーザーは、単一項目を選択できます。 | |
| Listmulti | リストを定義します。これによりユーザーは、複数の項目を選択できます。 | |
| Menu | メニュー・バー項目を定義します。 | |
| PasswordTextField | 入力テキスト・フィールドを定義します。パスワードの受け入れに適するよう、値は中黒で表示されます。 | |
| RadioGroup | ラジオ・ボタンのセットを定義します。それぞれは、クリックされると同じグループ内の他のラジオ・ボタンの選択を解除し、(標準的なケースでは) 関数を起動することによって、クリックに応答します。 | |
| TextArea | 1 つ以上のテキスト行を含む長方形を定義します。 | |
| TextField | 単一行のテキストを含むテキスト・ボックスを定義します。 | |
| 吹き出し | GridTooltip | 特殊な吹き出しヘルプを定義します。つまり、ユーザーがグリッド・ウィジェット上にカーソルを移動すると表示される 1 つ以上のウィジェットです。 |
| Tooltip | 吹き出しヘルプ (ユーザーがウィジェット上にカーソルを移動すると表示される 1 つ以上のウィジェット) を定義します。 | |
| TreeTooltip | 特殊な吹き出しヘルプ (ユーザーがツリー・ウィジェット上にカーソルを移動すると表示される 1 つ以上のウィジェット) を定義します。 |
吹き出しタイプ (ToolTip、GridToolTip、および TreeToolTip) はこのウィジェットのリストにありますが、各ツールチップ・タイプは、技術的には Rich UI ハンドラーです (EGL ハンドラー・パーツ、ステレオタイプ RUIHandler)。この場合、ハンドラー・コードで、Rich UI ウィジェットの機能に類似した機能を指定します。ただし、すべてのウィジェットに使用できる関数およびフィールドは、ツールチップには使用できません。一般的に使用可能なフィールドおよび関数の詳細については、『ウィジェットのプロパティーおよび関数の設定』を参照してください。
ウィジェットを宣言する場合、EGL には、ウィジェットが存在するパッケージを識別するための 2 つの方法が用意されています。この 2 つの方法は、任意の EGL 変数の宣言に使用できますが、ウィジェットに関して特殊な自動化を使用できます。
widgetName com.ibm.egl.rui.widgets.widgetTypeName;
EGL Rich UI エディターは、ユーザーがパレットから設計面にウィジェットをドラッグした後、ウィジェット宣言ステートメントの先行フォーマットを使用します。概要については、『EGL Rich UI エディターの概要』を参照してください。
import com.ibm.egl.rui.widgets.widgetTypeName;
widgetTypeName の代わりにワイルドカードを使用すると、生成される JavaScript 出力に不要なコードが追加されるため、お奨めしません。
ウィジェットは、EGL 参照変数です。ウィジェットを静的に宣言する (new 演算子を使用しない) ときは、次の例に示すように、必ず値の設定ブロック ({}) を指定してください。
myButton Button{};
ウィジェットの作成の詳細については、『Rich UI ウィジェット・セットの拡張』を参照してください。
import com.ibm.egl.rui.widgets.TextField;
handler MyHandlerPart type RUIhandler{onConstructionFunction = initialization}
myHelloField TextField{readOnly = true, text = "Hello"};
function initialization()
myInternalFunction(myHelloField);
end
function myInternalFunction(theWidget widget in)
case
when (theWidget isa TextField)
myTextField TextField = theWidget as TextField;
myString STRING = myTextField.text + " World";
sysLib.writeStdOut(myString);
when (theWidget isa Button)
;
otherwise
;
end
end
end
ハンドラーは、「Hello world」と表示します。
Widget 型の変数は、プロパティーでウィジェットが参照される部分より前に宣言してください。具体的には、initialUI プロパティーまたは children プロパティーでそのウィジェットが参照される前です。 (この規則は、Button や TextField など、具体的なウィジェット・タイプの変数には適用されません。)
Widget タイプの変数は、Rich UI ウィジェットおよび外部型ウィジェットの両方と互換性があります。