Ajax4JSFで簡単Ajax！
第1回：JavaScriptを記述しなくてもいいんです！
著者：カサレアル 岡本 充洋
公開日：2007/12/11（火）
Ajax4JSF専用のタグの記述
最後にページ内にAjax4JSF専用のタグを記述します。これによりJavaScriptを記述しなくてもAjaxページを生成できようになります。
Ajax4JSFが用意するカスタムタグを利用するには、5行目のようにTaglibディレクティブで宣言します。
ここで注目すべきなのは、15行目にある<a4j:commandButton>タグです。このタグは通常のJSF標準タグのcommandButtonと非常によく似ています。action属性にアクションメソッドを指定することで、ボタンを押した時にそのメソッドが実行されます。
通常のcommandButtonと違う点として、reRenderという属性があります。このreRender属性によって、UIコンポーネントのIDを指定するとアクションメソッド実行後にコンポーネント部分のみが再読み込みされるのです。つまり15行目のボタンが押されると、21行目から27行目のコードで描画されていた部分が再読み込みされます。
また19行目に<h:form>タグで囲まれた「<a4j:poll interval="1000" reRender="commentHistory" />」という記述があります。こちらはいわゆるポーリングを行って、自動的にサーバのデータを取得して再描画を行います。時間間隔や、どの部分再描画するのかをinterval属性やreRenderで指定します。
21行目の<a4j:outputPanel>タグは、このタグで囲まれた範囲が再描画の対象となることを指示するためのタグです。
リスト4：JSPページ
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<html>
<head>
<title>簡易チャット</title>
</head>
<body>
<f:view>
<h:form>
名前:<h:inputText value="#{chatBean.name}" />
コメント:<h:inputText value="#{chatBean.comment}" />
<a4j:commandButton value="送信" action="#{chatBean.postComment}"
reRender="commentHistory" />
</h:form>
<h:form>
<a4j:poll interval="1000" reRender="commentHistory" />
</h:form>
<a4j:outputPanel id="commentHistory">
<h:dataTable value="#{chatBean.commentList}" var="comment">
<h:column>
<h:outputText value="#{comment}" />
</h:column>
</h:dataTable>
</a4j:outputPanel>
</f:view>
</body>
</html>
| タグ名 |
タグの説明 |
含まれる属性 |
属性の説明 |
| a4j:poll |
h:formタグの中で利用する。一定時間ごとに任意のアクションメソッドの実行や、画面項目の再描画を行うことができる。 |
interVal |
処理の実行間隔をミリ秒単位で指定します。 |
| action |
時間到来時に実行するアクションメソッドを指定します。 |
| reRender |
時間到来時に再描画する箇所のIDを指定します。 |
| a4j:commandButton |
h:formタグの中で利用する。formのデータをAjax(XmlHttpLRequest)で送信する。 |
action |
通常のJSFと同様にアクションメソッドを指定します。 |
| reRender |
アクションメソッド実行後に再描画する箇所のIDを指定します。 |
| a4j:outputPanel |
パネル。主に他のカスタムタグのreRendar属性で指定します。 |
id |
動的に再描画するために自身のIDを指定します。 |
表1：タグと属性
今回使用しているタグと属性をまとめると、表1のようになります。この他にもAjax4JSFではAjaxアプリケーションを作成するのに便利なタグが多数用意されています。もっと知りたい方は、Ajax4jsf Developer Guide
（http://labs.jboss.com/jbossajax4jsf/docs/devguide/en/html/index.html）を参照してください。
動作確認
それでは作成したアプリケーションをTomcatにデプロイして実行します。「http://localhost:8080/<プロジェクトのContextPath>/faces/chat.jsp」へアクセスすると簡易チャットの画面が表示されます。
では、Webブラウザを複数立ち上げて、片方から何か入力してみましょう。するとすぐにもう一方のWebブラウザにも入力した情報が反映されます。また、入力する際にも画面すべてを描画し直すのではなく、表示欄のみが再描画されているのが確認できるでしょう。
この程度のアプリケーションは、JavaScriptをまったく書かずに実現できます。また、カスタムタグが直感的に記述できるのも注目すべき点でしょう。
まとめ
Ajax4JSFでは通常のJSFタグにはない「Ajax通信」「画面の一部を動的に書き換える」「ポーリング」といった処理をJavaScriptを記述することなくプログラミングできるフレームワークです。ただし、足回り的な部分に特化していて、DojoやExt.jsなどに代表されるようなリッチなUIを実現する機能は備わっていません。
そこで第2回では、リッチなUIコンポーネントを実現する「RichFaces」について触れていきます。お楽しみに！
