Rich UI ハンドラー・パーツ
Rich UI アプリケーションのメイン・コンポーネントは Rich UI ハンドラー・パーツです。これは、ステレオタイプ RUIHandler を持つハンドラーです。ハンドラー・パーツによって、ウィジェットが Web ページ上に配置され、ユーザーによるボタンのクリックなどのイベントが処理されます。1 つのハンドラー・パーツのウィジェットおよび関数をその他のハンドラー・パーツに使用可能にすることができます (『複数のハンドラーによる Rich UI アプリケーションの作成』を参照)。
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 ButtonTest01 type RUIhandler {initialUI = [ myTopBox ],
onConstructionFunction = initialization}
myHelloField TextField
{ readOnly = true, text = "Hello" };
myInTextField TextField{};
myButton Button{ text = "Input to Output", onClick ::= click };
myOutTextField TextField{};
myBox03 Box{ padding=8, columns = 3,
children = [ myInTextField, myButton, myOutTextField ],
backgroundColor = "CadetBlue" };
myBox02 Box{ padding=8, columns = 2, children = [myHelloField],
backgroundColor = "DarkGray"};
myTopBox Box{ padding=8, children = [ myBox02, myBox03 ],
columns = 1, backgroundColor = "Aqua" };
function initialization()
end
function click(e EVENT in)
myOutTextField.text = myHelloField.text + " " + myInTextField.text;
end
end
ユーザーが、左下のテキスト・ボックスに単語 World を入力してからボタンをクリックすると、ユーザー・インターフェースは次のようになります。

DOM ツリーの説明に同じ例を使用します。詳細については、『ブラウザーによる Rich UI アプリケーションの処理方法の説明』を参照してください。
- cssFile
- カスケーディング・スタイル・シート (CSS ファイル) を指定します。これは、個別のウィジェットかウィジェットのカテゴリーの表示特性を設定します。このプロパティーは、WebContent ディレクトリーに対する相対のパスを受け入れます。
デプロイメント時には、HTML ファイルに追加される <link> エントリーでこの CSS ファイルが参照されます。以下に設定例を示します。
以下に CSS ファイルの例を示します。Handler ButtonTest Type RUIHandler { children = [ui], cssFile = "buttontest/coolblue.css" }.EglRuiGridTable { border: 3px solid black; } .EglRuiGridHeader { color:yellow; background-color:red; } .EglRuiGridCell { color:black; background-color:aqua; }cssFile プロパティーと includeFile プロパティーの両方を指定した場合は、cssFile プロパティーで参照される CSS のコンテンツが優先されます。そのコンテンツが優先されるのは、デプロイされる HTML ファイルでは、<link> エントリーは includeFile プロパティーで参照されるコンテンツの後で埋め込まれるためです。
スタイルの Rich UI サポートの詳細については、『ウィジェット・スタイル』を参照してください。
- includeFile
- デプロイされる HTML ファイルに組み込むファイルを指定します。
cssFile プロパティー同様、includeFile プロパティーは、WebContent ディレクトリーへの相対パスを受け入れます。以下に設定例を示します。
Handler ButtonTest Type RUIHandler { children = [ui], includeFile = "buttontest/coolblue.css" }以下にファイル・タイプの詳細を示します。- css でも html でもない拡張子を持つファイルは、<script> 要素に組み込まれます。
<script> <!-- ここにファイル内容を配置 --> </script> - 拡張子が html または css であるファイルは、
そのまま組み込まれます。ファイル拡張子が css の場合、
スタイル・ディレクティブは、<style> 要素内
にある必要があります。
<style type="text/css"> .EglRuiGridTable { border: 3px solid black; } .EglRuiGridHeader { color:yellow; background-color:red; } .EglRuiGridCell { color:black; background-color:aqua; } </style>ファイル拡張子が html である場合は、以下の記述が適用されます。- Rich UI プロジェクトで作業している場合は、xref 属性を
含むファイルを表示したときに、製品から警告メッセージが表示されることがあります。
例えば、以下に MyIncludeFile.html ファイルの内容を示します。このファイルは、開発時には WebContent/MyFolder フォルダーにあります。
<link REL="STYLESHEET" TYPE="text/css" href="css/dashboard.css">この例では、href 値が既存のファイルを参照していないことが警告メッセージで示されます。 この警告が存在するのは、開発時のエディターは実際のファイルである WebContent/css/dashboard.css ではなく WebContent/MyFolder/css/dashboard.css ファイルをシークするためです。 <href> タグの値に WebContent ディレクトリーに対する相対パスが含まれていることを確認し、別のパスが必要であることを示す警告メッセージは無視してください。
- HTML ファイルの組み込み (デプロイされる HTML ファイルの内部に <html> 要素を配置) は、少なくとも一部のブラウザーでは有効です。includeFile プロパティーを使用する場合は、複数のブラウザーでアプリケーションをテストしてください。
- Rich UI プロジェクトで作業している場合は、xref 属性を
含むファイルを表示したときに、製品から警告メッセージが表示されることがあります。
例えば、以下に MyIncludeFile.html ファイルの内容を示します。このファイルは、開発時には WebContent/MyFolder フォルダーにあります。
- css でも html でもない拡張子を持つファイルは、<script> 要素に組み込まれます。
- initialUI
- どのウィジェットが、初期の DOM ツリー文書エレメントの子であるかを指定します。指定されたウィジェットを配列で複数回参照する場合、最後の参照のみが使用され、他は無視されます。
- onConstructionFunction
- on-construction 関数を指定します。これは、ハンドラーの実行が開始されると起動されるハンドラー関数です。on-construction 関数、またはこの関数から (直接または間接に) 起動される関数の、initialUI の値をリセットできます。ただし、on-construction 関数が終了すると、initialUI の値は定数になります。
- theme
- アプリケーション全体でウィジェットの外観を一貫性のあるものにします。
Claro テーマまたは Tundra テーマのいずれかを指定できます。デフォルト値は Claro です。Dojo ウィジェットを含むアプリケーションをコーディングする場合、Nihilo および Soria のテーマも使用できますが、その指定によって影響を受けるのは Dojo ウィジェットのみです。
ウィジェットにテーマがない場合、スタイルはウィジェット固有です。
実行時には、ruiLib.setTheme() を呼び出すことで新規テーマを設定したり、ruiLib.getTheme() を呼び出すことで使用中のテーマの名前を取得したりできます。
テーマを使用するには、使用する CSS ファイルに必要な CSS ファイルをインポートするステートメントをコーディングする必要があります。 詳しくは、『アプリケーションで使用するテーマ』を参照してください。
- title
- HTML <title> 要素の値を指定します。
デフォルトはハンドラー名です。
実行時には、ruiLib.setTitle() を呼び出すことで新規タイトルを設定したり、ruiLib.getTitle() を呼び出すことで使用中のタイトルの名前を取得したりできます。
上記のように、ボックス・ウィジェットにはさまざまなプロパティー (特に children プロパティー) が含まれています。そのプロパティーは、ハンドラーが子やその他の子孫を initialUI 配列で指定されたウィジェットに追加するための手段になります。