はじめに
2005年にIBMはJWL（JavaScript-based Widget Library）を導入しました。JWLは、豊富な入出力コンポーネントやナビゲーションコンポーネントを利用してJSPおよびHTMLページの機能を向上させるものです。JWLになじみがなく、詳しく知りたいという読者の方は、IBM Developer WorksのWebサイトに掲載されている下記の記事を読むと、JWLのおおよその機能を理解できるでしょう。
- Developing an application with the JWL DataGrid using Rational Application Developer
- The JWL Tree component
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」を作成します。
- Sourceモードで「ajaxRefreshRequestExample.jsp」を開きます。
- ［Palette］ペイン内で［Enhanced Faces Components］をクリックします（Webパースペクティブにいることを確認してください）。
- Inputコンポーネントをパレットからページへドラッグ＆ドロップします。リスト1のようなコードが生成されます。
- Panel Groupコンポーネントをパレットからページへドラッグ＆ドロップします。
- Text Outputコンポーネントをパレットから手順5で追加したパネルにドラッグ＆ドロップします。Outputコンポーネントの［Properties］をクリックし、［Value］フィールドに#{param.text1}と入力します。
- Panel Groupを選択し、［Properties］→［AJAX］をクリックします。［Allow Ajax Updates］をクリックし、Ajaxリクエストを［Refresh］に設定します。
- 手順7で追加した
<hx:ajaxRefreshRequest>タグをクリックし、ブラウザから送られるパラメータを追加します。ここでは手順4で追加した入力フィールド「text1」を指定します。 - Button Commandをドラッグ＆ドロップし、新規ビヘイビアを追加します。このビヘイビアではターゲットアクションを「group1」とし、マウスクリックで呼び出されるようにします。
- このJSFページをサーバー上で実行してみます（Websphere 6.1以上で実行していることを確認してください）。
- ページが読み込まれたら、入力フィールドに値を入力し、ボタンをクリックします。入力した値がボタンの横に表示されるはずです。
<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>
<hx:behavior event="onclick"
behaviorAction="get"
targetAction="group1" />
リスト3は、ここまで作成してきたサンプルの全ソースコードです。全体のソースコードはこの記事のダウンロードサンプルにも収録されています。
<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>
