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

はじめに

　2005年にIBMはJWL（JavaScript-based Widget Library）を導入しました。JWLは、豊富な入出力コンポーネントやナビゲーションコンポーネントを利用してJSPおよびHTMLページの機能を向上させるものです。JWLになじみがなく、詳しく知りたいという読者の方は、IBM Developer WorksのWebサイトに掲載されている下記の記事を読むと、JWLのおおよその機能を理解できるでしょう。

　IBMのRAD 6.0（Rational Application Developer）では、JWLのAJAXコンポーネントのサポートシステムが大幅に改良されました。この記事ではこれらのコンポーネントの概要を紹介し、ステップバイステップの演習を3つ行います。お使いのワークスペースにインポートできるサンプルソースコードも用意してあります。

AJAXタグの定義（1） ―コンテンツの取得―

　AJAXタグは、任意のJWLパネルタグの子タグとして定義しなければいけません。AJAXタグでは、パネルの代わりとなるコンテンツを定義します。AJAXタグを含むパネルが実行されると、そのAJAXタグはサーバーリクエストを生成します。サーバーはリクエストを処理して、パネルに制御を戻します。

　JWLライブラリには3つのAJAXコンポーネントが用意されています。以降では、これらのコンポーネントについて詳しく説明します。

コンテンツの取得： <hx:ajaxRefreshRequest>

　<hx:ajaxRefreshRequest>タグを使用すると、同じJSFページの親タグ内のコンテンツを非同期に置き換えることができます。置き換えるためのコンテンツはHTTP GETリクエストで取得します。このタグは、サーバーへ大量の情報を渡す必要がないとき、もしくはフォーム全体に対して少数のパラメータのみを扱いたいときに使用します。

　このタグの使い方を、順を追って見ていきましょう。なお、この記事の演習はすべてRAD 6.1を使って実施しています。

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

図1　ajaxRefreshRequestExample.jspの新規作成

Sourceモードで「ajaxRefreshRequestExample.jsp」を開きます。

［Palette］ペイン内で［Enhanced Faces Components］をクリックします（Webパースペクティブにいることを確認してください）。

図2　［Palette］ペインの画面

Inputコンポーネントをパレットからページへドラッグ＆ドロップします。リスト1のようなコードが生成されます。

リスト1　Inputコンポーネントのソースコード

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

Panel Groupコンポーネントをパレットからページへドラッグ＆ドロップします。
Text Outputコンポーネントをパレットから手順5で追加したパネルにドラッグ＆ドロップします。Outputコンポーネントの［Properties］をクリックし、［Value］フィールドに#{param.text1}と入力します。

図3　OutputTextコンポーネントのプロパティ

Panel Groupを選択し、［Properties］→［AJAX］をクリックします。［Allow Ajax Updates］をクリックし、Ajaxリクエストを［Refresh］に設定します。

図4　AJAXのプロパティ

手順7で追加した<hx:ajaxRefreshRequest>タグをクリックし、ブラウザから送られるパラメータを追加します。ここでは手順4で追加した入力フィールド「text1」を指定します。

図5　ajaxRefreshRequestのプロパティ

Button Commandをドラッグ＆ドロップし、新規ビヘイビアを追加します。このビヘイビアではターゲットアクションを「group1」とし、マウスクリックで呼び出されるようにします。

リスト2　［Submit］ボタンのビヘイビアのソースコード

<hx:behavior event="onclick"
             behaviorAction="get"
             targetAction="group1" />

このJSFページをサーバー上で実行してみます（Websphere 6.1以上で実行していることを確認してください）。

図6　Websphere 6.1サーバー上でサンプルを実行

ページが読み込まれたら、入力フィールドに値を入力し、ボタンをクリックします。入力した値がボタンの横に表示されるはずです。

図7　ajaxRefreshRequestサンプルの出力

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

リスト3　ajaxRefreshRequestサンプルの全ソースコード

<f:view>
   <body>
   <hx:scriptCollector id="scriptCollector1">
      <h:form id="form1" styleClass="form">
         <h:inputText id="text1"
                      styleClass="inputText">
         </h:inputText>
         <hx:commandExButton type="submit"
                             value="Submit"
                             id="button1"
                             styleClass="commandExButton">
            <hx:behavior event="onclick"
                         behaviorAction="get"
                         targetAction="group1">
            </hx:behavior>
         </hx:commandExButton>
         <h:panelGroup    id="group1" styleClass="panelGroup">
            <h:outputText id="text2"  styleClass="outputText"
                          value="#{param.text1}">
            </h:outputText>
         </h:panelGroup>
         <hx:ajaxRefreshRequest id="ajaxRefreshRequest1"
                               target="group1" params="text1">
         </hx:ajaxRefreshRequest>
      </h:form>
   </hx:scriptCollector>
   </body>
</f:view>

AJAXタグの定義（2） ―コンテンツの更新―

コンテンツの更新： <hx:ajaxRefreshSubmit>

　<hx:ajaxRefreshSubmit>タグを使用すると、同じJSFページの親タグ内のコンテンツを非同期に置き換えることができます。置き換えるためのコンテンツはHTTP POSTリクエストで取得します。このタグはフォーム全体をサーバーへ送信したいときに使用します。

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

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

図8　新規JSFページの作成

Sourceモードで「ajaxRefreshSubmitExample.jsp」を開きます。
［Palette］ペインで、［Enhanced Faces Components］をクリックします（Webパースペクティブにいることを確認してください）。

図9　［Palette］ペイン

3つの入力コンポーネントをパレットからページへドラッグ＆ドロップします。これでリスト4のコードが生成されます。

リスト4　3つの入力テキストフィールドのコード

<hx:scriptCollector id="scriptCollector1">
<h:form id="form1" styleClass="form">
   <h:inputText id="text1"
                styleClass="inputText">
   </h:inputText>
   <h:inputText id="text2"
                styleClass="inputText">
   </h:inputText>
   <h:inputText id="text3"
                styleClass="inputText">
   </h:inputText>
</h:form>
</hx:scriptCollector>

Panel Groupコンポーネントをパレットからページへドラッグ＆ドロップします。
Text Outputコンポーネントをパレットから手順5で追加したパネルへドラッグ＆ドロップします。
Panel Groupを選び、［Properties］→［AJAX］をクリックします。［Allow Ajax Updates］をクリックしてAjaxリクエストを［Submit］に設定します。

図10　AJAXのプロパティ

Button Commandをドラッグ＆ドロップし、新規ビヘイビアを追加します。このビヘイビアではターゲットアクションを「group1」とし、マウスクリックで呼び出されるようにします。

リスト5　［Submit］ボタンのビヘイビアのコード

<hx:behavior event="onclick"
             behaviorAction="get"
             targetAction="group1" />

3つの変数text1、text2、text3を持つ新規Javaクラス「ThreeStringsConcatenatorBean.java」を作成します。

図11　新規^^Java^^クラスThreeStringsConcatenatorBean.javaの作成

ThreeStringsConcatenatorBean.javaの中に、変数のゲッターメソッドおよびセッターメソッドを作成します。text1、text2、text3を結合して結果を返すgetConcatenateThreeFields()というメソッドを新たに追加します。

リスト6　getConcatenateThreeFields()メソッドの実装

public String getConcatenateThreeFields() {

   return text1 + text2 + text3;

}

ajaxRefreshSubmitExample.jspを選択します。［Page Data］画面で、［Faces Managed Beans］→［New］→［Faces Managed Bean］を選択します。

図12　新規Faces Managed Beanの作成

ThreeStringsConcatenatorBeanというJavaBeanを「faces-config.xml」に登録します。

図13　新規Faces Managed Beanの登録

JavaBean内のフィールドをページ上へドラッグして、これらのフィールドをJSPページ内のフィールドと対応付けます。

図14　Bean内のフィールドをページ上のInputフィールドに対応付け

サーバー上でこのページを実行してみます（Websphere 6.1以上で実行していることを確認してください）。

図15　サーバー上でサンプルを実行

コードが正しく動作するかどうかをテストしてください。

図16　ajaxRefreshSubmitサンプルの出力結果

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

リスト7　ajaxRefreshSubmitの全ソースコード

<f:view>
   <body>
   <hx:scriptCollector id="scriptCollector1">
      <h:form id="form1" styleClass="form">
         <h:inputText id="text1"
                       styleClass="inputText"
                       value="#{concatenatorBean.text1}">
         </h:inputText>
         <h:inputText id="text2"
                      styleClass="inputText"
                      value="#{concatenatorBean.text2}">
         </h:inputText>
         <h:inputText id="text3"
                      styleClass="inputText"
                      value="#{concatenatorBean.text3}">
         </h:inputText>

         <hx:commandExButton type="button"
                             value="Submit"
                             id="button1"
                             styleClass="commandExButton">
            <hx:behavior behaviorAction="get;stop"
                         event="onclick"
                         targetAction>="group1" >
            </hx:behavior>
         </hx:commandExButton>

         <h:panelGroup id="group1" styleClass="panelGroup">
            <h:outputText id="text4"
                          styleClass="outputText"
                          value="#{concatenatorBean.
                                   concatenateThreeFields}">
            </h:outputText>
         </h:panelGroup>

         <hx:ajaxRefreshSubmit id="ajaxRefreshSubmit1"
                               target="group1" >
         </hx:ajaxRefreshSubmit>
      </h:form>
   </hx:scriptCollector>
   </body>
</f:view>

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

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

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

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

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

図17　ajaxExternalRequestExample.jspページの新規作成

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

図18　［Palette］ペインの画面

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

図19　AJAXプロパティの画面

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

図20　AjaxExternalRequestのプロパティ

サーバー上でこのページを実行してみましょう（Websphere 6.1以上で実行していることを確認してください）。
コードが正しく動作するかどうかをテストしてください。

図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>