Web ページ上のコントロールの変数へのバインディング

JSF ハンドラーの変数を、Web ページの入力コントロールまたは出力コントロールにバインドすることができます。 ページ上のコントロールに変数がバインドされたときに、ユーザーがそのコントロールの値を変更すると、その変更内容に一致するように、変数の値が変更されます。JSF ハンドラーのロジックによって変数の値が変更された場合は、その変更内容に一致するよう、ページの値が変更されます。

Web ページ・コントロールを EGL 変数にバインドする方法は、複数あります。

EGL 変数から自動的に JSF コントロールを作成する

この方式では、JSF ハンドラーに変数を作成し、EGL によってページ上に適切な表現を作成できるようにします。
  1. Web ページに関連付けられている JSF ハンドラーを開きます。エディターで JSP ファイルを見ている場合、 ページを右クリックして、「ページ・コードの編集」をクリックすれば、そのファイルの JSF ハンドラーを開くことができます。
  2. JSF ハンドラーで、EGL プリミティブ、データ項目、またはレコード変数を 1 つ以上定義して、ファイルを保存します。Web ページで使用する変数は、JSF ハンドラー・パーツ内のなんらかの関数の中に入れておくのではなく、パーツ内に直接入れておく必要があります。
  3. JSP ファイルを開きます。
  4. ページ・データ・ビューで、「JSF ハンドラー」 を展開します。 JSF ハンドラーで定義されている変数が、ここにリストされます。
  5. 「ページ・データ」ビューから Web ページに、その変数をドラッグします。 ドラッグする変数のタイプに応じて、「挿入のコントロール」ウィンドウまたは「リスト挿入のコントロール」ウィンドウが開きます。
  6. 「コントロールの作成対象」の下にあるラジオ・ボタンをクリックします。
    • 読み取り専用の出力コントロールが必要な場合は、「既存レコードの表示」を選択します。
    • 編集可能な入力コントロールが必要な場合は、「既存レコードの更新」または「新規レコードの作成」を選択します。このコンテキストでは、これら 2 つのオプションは同じ意味を持ちます。
    このウィザードでは、すべての EGL 変数をレコードのように処理します。
  7. レコード変数または複数の変数を選択した場合は、表示したいコントロールまたは変数の横にあるチェック・ボックスを選択します。 「コントロール・タイプ」列から、コントロールまたは変数を表すコントロール・タイプを選択することもできます。
  8. 「終了」をクリックします。

コントロールがページに追加され、ページにドラッグした変数に自動的にバインドされます。 どの変数に JSF コントロールがバインドされたかを、確認することができます。 対象のコントロールをクリックして選択し、「プロパティー」ビューを開いてください。 選択したコントロールのバインド先の変数が、「値」フィールドに表示されます。

JSF コントロールを作成し、手動でバインドする

ユーザー独自のコントロールを作成し、手動で EGL 変数にバインドすることができます。 ページの外観のデザインを最初に行い、あとでデータの追加を行う場合には、この方法が便利です。

  1. Web ページに関連付けられた JSF ハンドラーを開きます。 エディターで JSP ファイルを見ている場合、 ページを右クリックして、「ページ・コードの編集」をクリックすれば、そのファイルの JSF ハンドラーを開くことができます。
  2. JSF ハンドラーで、EGL プリミティブ、データ項目、またはレコード変数を 1 つ以上定義し、ファイルを保存します。 Web ページで使用する変数は、JSF ハンドラー・パーツ内のなんらかの関数の中に入れておくのではなく、パーツ内に直接入れておく必要があります。
  3. JSP ファイルを開きます。
  4. 「パレット」ビューで「拡張 Faces コンポーネント」ドロワーを展開し、コントロールを Web ページにドラッグします。

    コントロールを読み取り専用にする場合は、「出力」テキスト・コントロールなどの、出力コントロールを使用してください。 コントロールを入出力ともに編集可能にする場合は、「入力」コントロールを使用してください。 レコードの場合は、「データ・テーブル」コントロールを使用して、レコードの各フィールドごとにデータ・テーブル内に列を作成します。

  5. ページ・データ・ビューで、「JSF ハンドラー」 を展開します。 JSF ハンドラーで定義した変数が、ここにリストされます。
  6. 「ページ・データ」ビューから Web ページ上のコントロールに、その変数を直接ドラッグして、EGL 変数型で適切なコントロールを使用できるようにします。 例えば、単一のプリミティブ変数またはデータ項目を、単一の入力コントロールまたは出力コントロールにバインドすることができます。 配列およびレコードを、データ・テーブル内の列にバインドする必要があります。

コントロールと変数を同時に作成する

「パレット」ビューの EGL ドロワーにある「新規変数」項目を使用して、バインドされたコントロールと変数をまとめて同時に作成することができます。

  1. 「パレット」ビューで、「EGL」ドロワーを展開します。
  2. 「新規変数」をページにドラッグします。 「新規 EGL データ変数の作成」ウィンドウが開きます。
  3. 「型の選択」において、プリミティブ、データ項目、またはレコード変数が必要かどうかを選択する。 このページの残りのオプションは、選択する変数の型によって異なります。
  4. 変数の型を選択します。データ項目およびレコードの場合は、ご使用のプロジェクトからパーツを選択してください。 プリミティブ変数の場合は、プリミティブ型を選択し、必要に応じてディメンションを指定してください。
  5. 「フィールド名を入力してください」フィールドに、 変数の名前を入力します。
  6. 変数を配列にする場合は、「配列」チェック・ボックスを選択し、「サイズ」フィールドで開始長を指定します。
  7. 「コントロールを追加して EGL 要素を Web ページに表示」を選択します。
  8. 「OK」をクリックします。 変数のタイプに応じて、「挿入のコントロール」ウィンドウまたは「リスト挿入のコントロール」ウィンドウが開きます。
  9. 「コントロールの作成対象」の下にあるラジオ・ボタンをクリックします。
    • 読み取り専用の出力コントロールが必要な場合は、「既存レコードの表示」を選択します。
    • 編集可能な入力コントロールが必要な場合は、「既存レコードの更新」または「新規レコードの作成」を選択します。このコンテキストでは、これら 2 つのオプションは同じ意味を持ちます。
    このウィザードでは、すべての EGL 変数をレコードのように処理します。
  10. 複数のフィールドでレコード変数を選択した場合は、表示したいフィールドの横にあるチェック・ボックスを選択します。「コントロール・タイプ」列から、フィールドまたは変数を表すコントロール・タイプを選択することもできます。
  11. 「終了」をクリックします。

制限

コントロールを変数にバインディングする場合には、Web ページの動作方法を原因とする制限が発生します。主な制限事項の 1 つは、Web ページで実行されるフォームから送られる変更済みの変数しか、JSF ハンドラーは受け取らないということです。

例えば、変数を 2 つ、関数を 1 つ持つ、次のような 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 つの入力コントロールにバインドした場合、コントロールに値を入力し、ボタンを押すと、入力した値がコンソールに書き込まれることになります。
このサンプルでは、ボタンとコントロールを、同じ HTML フォームに配置するものと想定しています。 この Web ページの本体のコードは、以下のようになるはずです。
<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 番目のコントロールのみを受け取ることになり、最初のコントロールにバインドされた変数は変更されないままになります。

フィードバック