更新要求によるページの更新

更新 タイプの AJAX 要求は、ページの指定エリア内にあるコントロールの値を更新するよう、サーブレットに促します。ただし、この更新要求では、ページ上のコントロールと一致させるための、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. ページ上のコントロールのうち、要求内のパラメーターとして渡したいものについて、ID 属性を設定します。これらのコントロールは、パネル・コントロール内に配置する必要はありませんが、その ID 属性はページ内で固有のものである必要があります。また、これらのコントロールは、入力コントロールでなければなりません。
  5. 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>
    この動作は、次の例のようになります。
    「クイック編集」ビュー内の動作の図
  6. 更新するパネルおよび要求のパラメーターを指定して、要求を作成します。
    1. Web ページで、パネル・コントロールを選択します。
    2. パネルを選択した状態で、「プロパティー」ビューを開きます。
    3. 「プロパティー」ビューで、パネル・コントロールのタイプの下にある「Ajax」タブに移動します。
    4. 「Ajax」タブで、「Ajax 更新の許可」チェック・ボックスを選択します。
    5. 要求のタイプとして「更新」を選択します。
    6. 要求のタイプの下で、「クリックして Ajax 要求プロパティーを編集 (Click to edit Ajax request properties)」というラベルが付いているボタンをクリックします。
    7. 「ターゲット」リストで、更新するパネルの ID 属性を選択します。
    8. 「パラメーターの追加」ボタンのいずれかをクリックして、パラメーターを要求に追加します。

      「ブラウザーから送信されたパラメーター値」というラベルが付いている表内のパラメーターは、ページ上の入力コントロールの値を参照します。例えば、ページ上の入力コントロールの現行値をパラメーターとして渡す場合は、その入力コントロールの ID をここで追加します。

      「サーバーで計算されたパラメーター値」というラベルが付いている表内のパラメーターは、ここで入力するリテラル値または JSF ハンドラー内にある変数の値の、いずれかを参照します。

    例えば、ページ上の入力コントロールの値が渡されるようにした場合、新規の要求は次のようになります。
    <hx:ajaxRefreshRequest id="ajaxRefreshRequest1" 
      target="updatablePanel" params="nameText">
    </hx:ajaxRefreshRequest>
    エディターでの AJAX 要求は、次の例のようになります。
    「プロパティー」ビュー内の AJAX 要求の図
  7. ページの JSF ハンドラー内で、要求を受け入れるように onPreRenderFunction を構成します。

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

    function onPreRender()
      
      if (J2EELib.getQueryParameter("$$ajaxmode") == NULL)
        //このページは、初めてロードされました。
        //ページのロード操作を、ここで行ってください。
      else
        //AJAX 要求の結果、このページがロードされました。
        //AJAX の更新操作を、ここで行ってください。
      end
    
    end
  8. onPreRenderFunction が AJAX 要求の結果として起動されたことを確認したら、ページ上のコントロールにバインドされている変数の値を設定して、そのコントロールを更新することができます。更新できるのは、要求に含まれている、パネル内のコントロールのみです。
    要求と一緒に渡されるパラメーターは、J2EELib.getQueryParameter() システム関数を使用して取得することができます。例えば、nameText という ID を持つテキスト・コントロールの値が渡された場合、次のコードを使用して、そのパラメーターの値を取得することができます。
    outputText = "Hello "::J2EELib.GetQueryParameter("nameText")::"!";

AJAX 更新要求の例については、AJAX 要求による Web ページの部分的な更新を参照してください。


フィードバック