AJAXタグの定義（2） ―コンテンツの更新―
コンテンツの更新： <hx:ajaxRefreshSubmit>
<hx:ajaxRefreshSubmit>タグを使用すると、同じJSFページの親タグ内のコンテンツを非同期に置き換えることができます。置き換えるためのコンテンツはHTTP POSTリクエストで取得します。このタグはフォーム全体をサーバーへ送信したいときに使用します。
このタグの使い方を、順を追って見ていきましょう。
- ［File］→［New］→［Other］→［Web］→［Web Page］をクリックして、新規JSFページ「ajaxRefreshSubmitExample.jsp」を作成します。
- Sourceモードで「ajaxRefreshSubmitExample.jsp」を開きます。
- ［Palette］ペインで、［Enhanced Faces Components］をクリックします（Webパースペクティブにいることを確認してください）。
- 3つの入力コンポーネントをパレットからページへドラッグ＆ドロップします。これでリスト4のコードが生成されます。
- Panel Groupコンポーネントをパレットからページへドラッグ＆ドロップします。
- Text Outputコンポーネントをパレットから手順5で追加したパネルへドラッグ＆ドロップします。
- Panel Groupを選び、［Properties］→［AJAX］をクリックします。［Allow Ajax Updates］をクリックしてAjaxリクエストを［Submit］に設定します。
- Button Commandをドラッグ＆ドロップし、新規ビヘイビアを追加します。このビヘイビアではターゲットアクションを「group1」とし、マウスクリックで呼び出されるようにします。
- 3つの変数text1、text2、text3を持つ新規
Javaクラス「ThreeStringsConcatenatorBean.java」を作成します。 - ThreeStringsConcatenatorBean.javaの中に、変数のゲッターメソッドおよびセッターメソッドを作成します。text1、text2、text3を結合して結果を返す
getConcatenateThreeFields()というメソッドを新たに追加します。 - ajaxRefreshSubmitExample.jspを選択します。［Page Data］画面で、［Faces Managed Beans］→［New］→［Faces Managed Bean］を選択します。
- ThreeStringsConcatenatorBeanというJavaBeanを「faces-config.xml」に登録します。
- JavaBean内のフィールドをページ上へドラッグして、これらのフィールドをJSPページ内のフィールドと対応付けます。
- サーバー上でこのページを実行してみます（Websphere 6.1以上で実行していることを確認してください）。
- コードが正しく動作するかどうかをテストしてください。
図8 新規JSFページの作成
図9 ［Palette］ペイン
リスト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>
図10 AJAXのプロパティ
リスト5 ［Submit］ボタンのビヘイビアのコード
<hx:behavior event="onclick"
behaviorAction="get"
targetAction="group1" />
図11 新規^^Java^^クラスThreeStringsConcatenatorBean.javaの作成
リスト6 getConcatenateThreeFields()メソッドの実装
public String getConcatenateThreeFields() { return text1 + text2 + text3; }
図12 新規Faces Managed Beanの作成
図13 新規Faces Managed Beanの登録
図14 Bean内のフィールドをページ上のInputフィールドに対応付け
図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>
