演習 1.3: JSF コントロールへの EGL データ・タイプのマッピング
パレット・ビューの「Faces コンポーネント」ドロワーにはさまざまなコントロールがあります。それぞれのコントロールが正しく機能するために、対応するタイプの EGL データにバインドする必要があります。この演習では、さらに 2 つのコントロールをページに追加して、それらを EGL 変数にバインドします。このページは、完成時には次のようになります。

コンボ・ボックスへのチェック・ボックスの追加
- カーソルを「{Error Message for text1}」フィールドの右側に置いて Enter キーを押し、入力フィールドの下に新規行を追加する。
- パレット・ビューの「Faces コンポーネント」ドロワーから、「チェック・ボックス (Check Box)」(「チェック・ボックス・グループ (Check Box Group)」ではありません) を入力フィールドの下の新規行へドラッグする。
- カーソルをチェック・ボックスの右側に置いて Enter キーを押し、チェック・ボックスの下に新規行を追加する。
- 「コンボ・ボックス (Combo Box)」をチェック・ボックスの下の新規行へドラッグする。
- 新規コンボ・ボックスをクリックして選択する。
- プロパティー・ビューで、「選択項目の追加」をクリックする。
- 「名前 (Name)」の下で、コンボ・ボックスの選択項目の名前を「Name0」から次のテキストに変更する。
Option 1
- 「値」フィールドの値を「Value0」から次のテキストに変更する。
Combo box choice 1
- 同様の方法で、コンボ・ボックスの選択項目として、Option 2 (値は Combo box choice 2) および Option 3 (値は Combo box choice 3) を追加する。
プロパティー・ビューは次のようになります。
チェック・ボックスとコンボ・ボックスを管理する EGL コードの追加
- ページのコンテンツ領域を右クリックし、ポップアップ・メニューで「ページ・コードの編集 」をクリックする。JSFComponentTest.egl ファイルがエディターで開きます。
- JSFComponentTest.egl ファイルで、次のコードを PageHandler JSFComponentTest 行のすぐ下に挿入する。
comboBoxSelected char(20);
checkBoxSelected char(1) {isBoolean=yes};
- ファイルを保存して閉じる。
JSF コンポーネントへの EGL コードのバインド
- JSFComponentTest.jsp ページに戻る。
- ページ上で「{EGLOutputTextField}」出力フィールドをクリックし、Delete キーを押す。
- パレット・ビューの「HTML タグ」ドロワーから、「表 (Table)」を、出力フィールドがあったページへドラッグする。「表の挿入」ウィンドウが開きます。
- 「表の挿入」ウィンドウで、行数として 3 を、列数として 2 を入力する。
- 「OK」をクリックする。
- 表の左側の上から 1 番目のセルに Value of input field と入力する。
- 表の左側の列の上から 2 番目のセルに Value of check box と入力する。
- 左側の最後のセルに Value of combo box と入力する。
ページは次のようになります。

- パレット・ビューから 3 つの「出力 (Output)」コンポーネントを、それぞれ、表の右側の列の空のセルへドラッグする。
次のステップでは、ページ・コード・ファイル内の変数を表すページ・データ・ビュー内の変数を、ページ上の入力フィールドおよび出力フィールドにバインドします。
- ページ・データ・ビューから、「outputTextField」変数を表の右上の出力フィールドへドラッグする。
- 「checkBoxSelected」変数をページ・データ・ビューから表の 2 番目の出力フィールドへドラッグする。
- 「comboBoxSelected」変数をページ・データ・ビューから表の右下の出力フィールドへドラッグする。
これで、3 つの出力コンポーネントがページ・コード・ファイル内の変数にバインドされました。最後に、入力コンポーネントを変数にバインドする必要があります。入力テキスト・フィールドは既に inputTextField 変数にバインドされているので、他の 2 つをバインドします。
- 「checkBoxSelected」変数を、ページ・データ・ビューから、ページ上のチェック・ボックスへ直接ドラッグする。これで、チェック・ボックスがページ・コード・ファイル内の変数にバインドされました。
- 「comboBoxSelected」変数を、ページ・データ・ビューから、ページ上のコンボ・ボックスへ直接ドラッグする。
ページは次のようになります。

- ページを保管する。
- ページをテストする。
ページ上で入力フィールドに情報を入力して「実行」ボタンをクリックするたびに、表内に入力フィールドの値が表示されます。
これで、「演習 1.4: EGL データから JSF コンポーネントを直接作成」を開始する準備ができました。