Web ページ上のコントロールの変数へのバインディング
JSF ハンドラーの変数を、Web ページの入力コントロールまたは出力コントロールにバインドすることができます。 ページ上のコントロールに変数がバインドされたときに、ユーザーがそのコントロールの値を変更すると、その変更内容に一致するように、変数の値が変更されます。JSF ハンドラーのロジックによって変数の値が変更された場合は、その変更内容に一致するよう、ページの値が変更されます。
- 既存の EGL 変数からコントロールを自動作成します。
- コントロールをユーザー自身が作成し、そのコントロールに変数を明示的にバインドします。
- コントロールと変数の両方を、同時に作成します。
EGL 変数から自動的に JSF コントロールを作成する
- Web ページに関連付けられている JSF ハンドラーを開きます。エディターで JSP ファイルを見ている場合、 ページを右クリックして、「ページ・コードの編集」をクリックすれば、そのファイルの JSF ハンドラーを開くことができます。
- JSF ハンドラーで、EGL プリミティブ、データ項目、またはレコード変数を 1 つ以上定義して、ファイルを保存します。Web ページで使用する変数は、JSF ハンドラー・パーツ内のなんらかの関数の中に入れておくのではなく、パーツ内に直接入れておく必要があります。
- JSP ファイルを開きます。
- ページ・データ・ビューで、「JSF ハンドラー」 を展開します。 JSF ハンドラーで定義されている変数が、ここにリストされます。
- 「ページ・データ」ビューから Web ページに、その変数をドラッグします。 ドラッグする変数のタイプに応じて、「挿入のコントロール」ウィンドウまたは「リスト挿入のコントロール」ウィンドウが開きます。
- 「コントロールの作成対象」の下にあるラジオ・ボタンをクリックします。
- 読み取り専用の出力コントロールが必要な場合は、「既存レコードの表示」を選択します。
- 編集可能な入力コントロールが必要な場合は、「既存レコードの更新」または「新規レコードの作成」を選択します。このコンテキストでは、これら 2 つのオプションは同じ意味を持ちます。
- レコード変数または複数の変数を選択した場合は、表示したいコントロールまたは変数の横にあるチェック・ボックスを選択します。 「コントロール・タイプ」列から、コントロールまたは変数を表すコントロール・タイプを選択することもできます。
- 「終了」をクリックします。
コントロールがページに追加され、ページにドラッグした変数に自動的にバインドされます。 どの変数に JSF コントロールがバインドされたかを、確認することができます。 対象のコントロールをクリックして選択し、「プロパティー」ビューを開いてください。 選択したコントロールのバインド先の変数が、「値」フィールドに表示されます。
JSF コントロールを作成し、手動でバインドする
ユーザー独自のコントロールを作成し、手動で EGL 変数にバインドすることができます。 ページの外観のデザインを最初に行い、あとでデータの追加を行う場合には、この方法が便利です。
- Web ページに関連付けられた JSF ハンドラーを開きます。 エディターで JSP ファイルを見ている場合、 ページを右クリックして、「ページ・コードの編集」をクリックすれば、そのファイルの JSF ハンドラーを開くことができます。
- JSF ハンドラーで、EGL プリミティブ、データ項目、またはレコード変数を 1 つ以上定義し、ファイルを保存します。 Web ページで使用する変数は、JSF ハンドラー・パーツ内のなんらかの関数の中に入れておくのではなく、パーツ内に直接入れておく必要があります。
- JSP ファイルを開きます。
- 「パレット」ビューで「拡張 Faces コンポーネント」ドロワーを展開し、コントロールを Web ページにドラッグします。
コントロールを読み取り専用にする場合は、「出力」テキスト・コントロールなどの、出力コントロールを使用してください。 コントロールを入出力ともに編集可能にする場合は、「入力」コントロールを使用してください。 レコードの場合は、「データ・テーブル」コントロールを使用して、レコードの各フィールドごとにデータ・テーブル内に列を作成します。
- ページ・データ・ビューで、「JSF ハンドラー」 を展開します。 JSF ハンドラーで定義した変数が、ここにリストされます。
- 「ページ・データ」ビューから Web ページ上のコントロールに、その変数を直接ドラッグして、EGL 変数型で適切なコントロールを使用できるようにします。 例えば、単一のプリミティブ変数またはデータ項目を、単一の入力コントロールまたは出力コントロールにバインドすることができます。 配列およびレコードを、データ・テーブル内の列にバインドする必要があります。
コントロールと変数を同時に作成する
「パレット」ビューの EGL ドロワーにある「新規変数」項目を使用して、バインドされたコントロールと変数をまとめて同時に作成することができます。
- 「パレット」ビューで、「EGL」ドロワーを展開します。
- 「新規変数」をページにドラッグします。 「新規 EGL データ変数の作成」ウィンドウが開きます。
- 「型の選択」において、プリミティブ、データ項目、またはレコード変数が必要かどうかを選択する。 このページの残りのオプションは、選択する変数の型によって異なります。
- 変数の型を選択します。データ項目およびレコードの場合は、ご使用のプロジェクトからパーツを選択してください。 プリミティブ変数の場合は、プリミティブ型を選択し、必要に応じてディメンションを指定してください。
- 「フィールド名を入力してください」フィールドに、 変数の名前を入力します。
- 変数を配列にする場合は、「配列」チェック・ボックスを選択し、「サイズ」フィールドで開始長を指定します。
- 「コントロールを追加して EGL 要素を Web ページに表示」を選択します。
- 「OK」をクリックします。 変数のタイプに応じて、「挿入のコントロール」ウィンドウまたは「リスト挿入のコントロール」ウィンドウが開きます。
- 「コントロールの作成対象」の下にあるラジオ・ボタンをクリックします。
- 読み取り専用の出力コントロールが必要な場合は、「既存レコードの表示」を選択します。
- 編集可能な入力コントロールが必要な場合は、「既存レコードの更新」または「新規レコードの作成」を選択します。このコンテキストでは、これら 2 つのオプションは同じ意味を持ちます。
- 複数のフィールドでレコード変数を選択した場合は、表示したいフィールドの横にあるチェック・ボックスを選択します。「コントロール・タイプ」列から、フィールドまたは変数を表すコントロール・タイプを選択することもできます。
- 「終了」をクリックします。
制限
コントロールを変数にバインディングする場合には、Web ページの動作方法を原因とする制限が発生します。主な制限事項の 1 つは、Web ページで実行されるフォームから送られる変更済みの変数しか、JSF ハンドラーは受け取らないということです。
handler formTestPage type JSFHandler
{view = "formTestPage.jsp"}
stringOne string;
stringTwo string;
function doSomething()
SysLib.writeStderr("stringOne = " + stringOne);
SysLib.writeStderr("stringTwo = " + stringTwo);
end
end
この関数をボタンにバインドし、変数を 2 つの入力コントロールにバインドした場合、コントロールに値を入力し、ボタンを押すと、入力した値がコンソールに書き込まれることになります。<body>
<hx:scriptCollector id="scriptCollector1"
preRender="#{formTestPage._preRender}"
postRender="#{formTestPage._postRender}">
<h:form id="form1" styleClass="form">
<h:inputText id="text1" styleClass="inputText"
value="#{formTestPage.stringOne}"
binding="#{formTestPage.stringOne_Ref}"></h:inputText>
<br>
<h:inputText id="text2" styleClass="inputText"
value="#{formTestPage.stringTwo}"
binding="#{formTestPage.stringTwo_Ref}"></h:inputText>
<br>
<hx:commandExButton id="buttonDoSomething1"
styleClass="commandExButton" type="submit" value="doSomething"
action="#{formTestPage.doSomething}"
actionListener="#{formTestPage._commandActionListener}">
</hx:commandExButton>
</h:form>
</hx:scriptCollector>
</body>
ボタン (ページ上で
commandExButton タグとして表される) と 2 つの入力コントロール
(ページ上で inputText タグとして表される)
の両方が、<h:form> タグで囲まれていることに注意してください。
こうすることで、ボタンをクリックしたときに、両方の入力コントロールが JSF ハンドラーで使用可能になります。
つまり、入力コントロールに入力した値が、ハンドラーの変数に割り当てられるわけです。<body>
<hx:scriptCollector id="scriptCollector1"
preRender="#{formTestPage._preRender}"
postRender="#{formTestPage._postRender}">
<h:inputText id="text1" styleClass="inputText"
value="#{formTestPage.stringOne}"
binding="#{formTestPage.stringOne_Ref}"></h:inputText>
<br>
<h:form id="form1" styleClass="form">
<h:inputText id="text2" styleClass="inputText"
value="#{formTestPage.stringTwo}"
binding="#{formTestPage.stringTwo_Ref}"></h:inputText>
<br>
<hx:commandExButton id="buttonDoSomething1"
styleClass="commandExButton" type="submit" value="doSomething"
action="#{formTestPage.doSomething}"
actionListener="#{formTestPage._commandActionListener}">
</hx:commandExButton>
</h:form>
</hx:scriptCollector>
</body>
このケースでは、最初の入力コントロールはフォームの外部にありますが、2 番目の入力コントロールとボタンはフォームの内部にあります。
この状態でボタンをクリックすると、JSF ハンドラーは 2 番目のコントロールのみを受け取ることになり、最初のコントロールにバインドされた変数は変更されないままになります。