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 アプリケーションの処理方法の説明』を参照してください。
Handler ButtonTest Type RUIHandler
{ children = [ui], cssFile = "buttontest/coolblue.css" }
以下に 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 サポートの詳細については、『ウィジェット・スタイル』を参照してください。
Handler ButtonTest Type RUIHandler
{ children = [ui], includeFile = "buttontest/coolblue.css" }
<script>
<!-- ここにファイル内容を配置 -->
</script>
<style type="text/css">
.EglRuiGridTable
{ border: 3px solid black; }
.EglRuiGridHeader
{ color:yellow;
background-color:red; }
.EglRuiGridCell
{ color:black;
background-color:aqua; }
</style>
<link REL="STYLESHEET" TYPE="text/css" href="css/dashboard.css">
この例では、href 値が既存のファイルを参照していないことが警告メッセージで示されます。 この警告が存在するのは、開発時のエディターは実際のファイルである WebContent/css/dashboard.css ではなく WebContent/MyFolder/css/dashboard.css ファイルをシークするためです。 <href> タグの値に WebContent ディレクトリーに対する相対パスが含まれていることを確認し、別のパスが必要であることを示す警告メッセージは無視してください。
実行時には、ruiLib.setTheme() を呼び出すことで新規テーマを設定したり、ruiLib.getTheme() を呼び出すことで使用中のテーマの名前を取得したりできます。
テーマを使用するには、使用する CSS ファイルに必要な CSS ファイルをインポートするステートメントをコーディングする必要があります。 詳しくは、『アプリケーションで使用するテーマ』を参照してください。
実行時には、ruiLib.setTitle() を呼び出すことで新規タイトルを設定したり、ruiLib.getTitle() を呼び出すことで使用中のタイトルの名前を取得したりできます。
上記のように、ボックス・ウィジェットにはさまざまなプロパティー (特に children プロパティー) が含まれています。そのプロパティーは、ハンドラーが子やその他の子孫を initialUI 配列で指定されたウィジェットに追加するための手段になります。