JWLフレームワークでのAJAXコンポーネントの実装

3つの演習で実装、AJAXコンポーネント

AJAXタグの定義（3） ―外部コンテンツの取得―

外部コンテンツの取得： <hx:ajaxExternalRequest>

　<hx:ajaxExternalRequest>では、親タグのコンテンツを別のページのコンテンツで置き換える方法を定義します。置き換えるためのコンテンツはHTTPGETメソッドで取得します。このタグは1つのJSPを他のJSPのコンテンツに組み込みたいときに役に立ちます。

　このタグの使い方を、順を追って見ていきましょう。

1. ［File］→［New］→［Other］→［Web］→［Web Page］をクリックし、新規JSFページ「ajaxExternalRequestExample.jsp」を作成します。
図17　ajaxExternalRequestExample.jspページの新規作成

2. ［File］→［New］→［Other］→［Web］→［Web Page］をクリックし、新規JSFページ「externalPage.jsp」を作成します。ページ内に「External Page is Loaded!」と入力します。
3. Sourceモードで「ajaxExternalRequestExample.jsp」を開きます。
4. ［Palette］ペインで、［Enhanced Faces Components］をクリックします（Webパースペクティブにいることを確認してください）。
図18　［Palette］ペインの画面

5. Panel Groupコンポーネントをパレットからページにドラッグ＆ドロップします。
6. Text Outputコンポーネントをパレットから手順5で追加したパネルにドラッグ＆ドロップします。コンポーネントの値を「External Page will be loaded here.」に設定します。
7. Panel Groupを選択し、［Properties］→［AJAX］をクリックします。［Allow Ajax Updates］をクリックして、Ajaxリクエストを［External］に設定します。
図19　AJAXプロパティの画面

8. 手順7で追加した<hx:ajaxExternalRequest>タグをクリックし、さらに［Properties］をクリックしてください。URLフィールドに「externalPage.faces」と入力します。
図20　AjaxExternalRequestのプロパティ

9. サーバー上でこのページを実行してみましょう（Websphere 6.1以上で実行していることを確認してください）。
10. コードが正しく動作するかどうかをテストしてください。
図21　AjaxExternalRequestサンプルの出力結果

　リスト8は、ここまで作成してきたサンプルの全ソースコードです。全体のソースコードはこの記事のダウンロードサンプルにも収録されています。

リスト8　AjaxExternalRequestの全ソースコード

<f:view>
   <body>
   <hx:scriptCollector id="scriptCollector1">
      <h:form id="form1" styleClass="form">

      <hx:commandExButton type="submit"
                          value="Submit"
                          id="button1"
                          styleClass="commandExButton">
         <hx:behavior event="onclick"
                      behaviorAction="get;stop"
                      targetAction="group1">
         </hx:behavior>
      </hx:commandExButton>
      <h:panelGroup id="group1" styleClass="panelGroup">
         <h:outputText id="text2"
                       styleClass="outputText"
                       value="External Page will be loaded here!">
         </h:outputText>
      </h:panelGroup>
         <hx:ajaxExternalRequest id="ajaxExternalRequest1"
                                 target="group1"
                                 href="externalPage.faces"
                                 source="group1">
         </hx:ajaxExternalRequest>
      </h:form>
   </hx:scriptCollector>
   </body>
</f:view>

参考

　AJAXのコンポーネント（WebSphere Information Center）