JSF ハンドラーの変数を、Web ページの入力コントロールまたは出力コントロールにバインドすることができます。 ページ上のコントロールに変数がバインドされたときに、ユーザーがそのコントロールの値を変更すると、その変更内容に一致するように、変数の値が変更されます。JSF ハンドラーのロジックによって変数の値が変更された場合は、その変更内容に一致するよう、ページの値が変更されます。
コントロールがページに追加され、ページにドラッグした変数に自動的にバインドされます。 どの変数に JSF コントロールがバインドされたかを、確認することができます。 対象のコントロールをクリックして選択し、「プロパティー」ビューを開いてください。 選択したコントロールのバインド先の変数が、「値」フィールドに表示されます。
ユーザー独自のコントロールを作成し、手動で EGL 変数にバインドすることができます。 ページの外観のデザインを最初に行い、あとでデータの追加を行う場合には、この方法が便利です。
コントロールを読み取り専用にする場合は、「出力」テキスト・コントロールなどの、出力コントロールを使用してください。 コントロールを入出力ともに編集可能にする場合は、「入力」コントロールを使用してください。 レコードの場合は、「データ・テーブル」コントロールを使用して、レコードの各フィールドごとにデータ・テーブル内に列を作成します。
「パレット」ビューの EGL ドロワーにある「新規変数」項目を使用して、バインドされたコントロールと変数をまとめて同時に作成することができます。
コントロールを変数にバインディングする場合には、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 番目のコントロールのみを受け取ることになり、最初のコントロールにバインドされた変数は変更されないままになります。