サブミット要求によるページの更新

サブミット・タイプの AJAX 要求は、EGL 制御の Web ページ上にあるボタンをユーザーがクリックしたときに発生するアクションと、同様の働きをします。つまり、制御が JSF ハンドラーに渡され、JSF ハンドラー内のすべての変数が、JSF コントロールの値と一致するように更新されます。更新要求とは異なり、JSF ハンドラー内のすべての変数がコントロールの現行値によって更新されるため、パラメーターを渡す必要はありません。ただし、更新要求と同様、更新されるのは JSF パネル・コントロール内のコントロールのみです。

このタイプの要求では、更新対象となるページのエリアおよび要求を起動するイベントを指定します。次に、ページの指定部分が更新されるように、JSF ハンドラーの onPreRenderFunction を構成します。

以下のステップに従って、AJAX サブミット要求を Web ページに追加します。以下のステップでは、Web ページ上のコントロールにバインドされている変数が、JSF ハンドラーに組み込まれているものとします。
  1. Web ページ上で JSF パネル・コントロールを作成し、AJAX 要求によって更新するエリアを指定します。

    EGL の AJAX 要求では、JSF パネル・コントロール内のページ部分のみを更新することができます。JSF パネル・コントロールは、他の JSF コントロールのコンテナーおよびオーガナイザーとして、主に機能します。「パレット」ビューの「拡張 Faces コンポーネント」ドロワーにある「パネル - グループ・ボックス」コントロールは、使い勝手のよいコントロールです。単なるコンテナーとして機能し、ページ上には表示されません。

  2. パネル・コントロールの ID 属性に、ページ内で固有の値を設定します。この ID は、AJAX 要求で指定する必要があります。
  3. 更新する JSF コントロールをパネル・コントロール内に配置し、そのコントロールが EGL 変数にバインドされるようにします。
    パネル・コントロールのコードは、次の例のようになります。このケースでは、パネル内の出力コントロールは 1 つだけです。
    <h:panelGrid id="updatablePanel" styleclass="panelGrid">
      <h:outputText id="textToUpdate" value="#{myPage.message}"
        binding="#{myPage.message_Ref}" styleClass="outputText" />
    </h:panelGrid>
  4. AJAX 要求を起動するユーザー・イベントを指定します。

    そのためには、JSF 動作をページ上の入力コントロールに追加してから、要求を起動するイベントを選択します。この動作が組み込まれているコントロールは、パネル・コントロール内に配置する必要はありませんが、要求を起動できるのは入力コントロールのみです。

    例えば、ユーザーが特定のコントロールにフォーカスを移動させたときに、AJAX 要求が発生するようにすることができます。その場合には、onFocus イベントを使用します。ユーザーが特定のコントロールからフォーカスを移動させたときに、要求が実行されるようにするには、onBlur イベントを使用します。その他のよく使用されるイベントとしては、onClickonMouseOveronSelect などがあります。

    1. Web ページで、トリガーとして使用する入力コントロールを選択します。
    2. コントロールを選択した状態で、「クイック編集」ビューを開きます。
    3. 「クイック編集」ビューの左側で、onBlur などのイベントを選択します。
    4. 「事前定義の振る舞いを使用」チェック・ボックスを選択します。
    5. 「アクション」リストで、「指定タグの Ajax 動作を起動」を選択します。
    6. 「ターゲット」リストで、更新するパネルの ID を選択します。
    これで、AJAX 要求を起動する動作がコントロールに付加されます。例えば、入力テキスト・コントロールに動作を付加し、onBlur イベントを使用するように設定する場合、ページのコードは次のようになります。
    <h:inputText id="nameText" value="#{myPage.name}" 
      binding="#{myPage.name_Ref}" styleClass="inputText" >
      <hx:behavior event="onblur" id="behavior1" 
        behaviorAction="get" targetAction="updatablePanel">
      </hx:behavior>
    </h:inputText>
    この動作は、次の例のようになります。
    「クイック編集」ビュー内の動作の図
  5. 更新するパネルを指定して、要求を作成します。
    1. Web ページで、パネル・コントロールを選択します。
    2. パネルを選択した状態で、「プロパティー」ビューを開きます。
    3. 「プロパティー」ビューで、パネル・コントロールのタイプの下にある「Ajax」タブに移動します。
    4. 「Ajax」タブで、「Ajax 更新の許可」チェック・ボックスを選択します。
    5. 要求のタイプとして「サブミット」を選択します。

      「プロパティー」ビューが、次の例のようになります。

      選択されたパネルを更新する要求のタイプを指定している「プロパティー」ビュー

    6. 「プロパティー」ビューの要求のタイプの下で、「クリックして Ajax 要求プロパティーを編集 (Click to edit Ajax request properties)」というラベルが付いているボタンをクリックします。
    7. 「ターゲット」リストで、更新するパネルの ID 属性を選択します。
    例えば、新規の要求は次のようになります。
    <hx:ajaxRefreshSubmit id="ajaxRefreshSubmit1" 
      target="updatablePanel">
    </hx:ajaxRefreshSubmit>
  6. ページの JSF ハンドラー内で、要求を受け入れるように onPreRenderFunction を構成します。

    AJAX 要求の実行時だけでなく、ページの初回ロード時にも onPreRenderFunction が実行されるため、この関数がどのような操作の結果として実行されることになったかを確認することをお勧めします。 そのためには、パラメーター $$ajaxmode の値をテストします。通常のページ・ロード操作の結果として関数が実行されている場合、このパラメーターは NULL になります。一方、AJAX 要求の結果として関数が実行されている場合、このパラメーターには値が含まれます。

    function onPreRender()
      
      if (J2EELib.getQueryParameter("$$ajaxmode") == NULL)
        //このページは、初めてロードされました。
        //ページのロード操作を、ここで行ってください。
      else
        //AJAX 要求の結果、このページがロードされました。
        //AJAX の更新操作を、ここで行ってください。
      end
    
    end
  7. onPreRenderFunction が AJAX 要求の結果として呼び出されたことを確認したら、ページ上のコントロールにバインドされている変数の値を設定して、そのコントロールを更新することができます。更新できるのは、要求に含まれている、パネル内のコントロールのみです。

フィードバック