第1回：JavaScriptを記述しなくてもいいんです！ (3/3)

TOP＞システム開発＞第1回：JavaScriptを記述しなくてもいいんです！ (3/3)

Ajax4JSFで簡単Ajax！

第1回：JavaScriptを記述しなくてもいいんです！

著者：カサレアル岡本充洋

公開日：2007/12/11（火）

前のページ 1 2 3

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と同様にアクションメソッドを指定します。
a4j:commandButton	h:formタグの中で利用する。formのデータをAjax(XmlHttpLRequest)で送信する。	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」について触れていきます。お楽しみに！

前のページ 1 2 3

著者プロフィール
株式会社カサレアル岡本充洋
プロフェッショナルサービスセンター所属。
エンジニア向けトレーニングの実施や技術コンサルティングなどに従事し、企業への技術支援を行う。その傍ら、各種ユーザーグループでの活動を通してエンジニア同士の情報交換を行い、日々精進を重ねている。
カサレアル：http://www.casareal.co.jp/
ブログ：http://mitsublo.blogspot.com/

INDEX
第1回：JavaScriptを記述しなくてもいいんです！
	Ajax4JSFとは
	サンプルアプリケーションの作成
	Ajax4JSF専用のタグの記述

Ajax4JSFで簡単Ajax！
第1回	JavaScriptを記述しなくてもいいんです！
第2回	Javascriptを記述せずにリッチなUIを実現する！
第3回	Java Ajaxフレームワーク比較

タイプ

連載

特集

第1回：JavaScriptを記述しなくてもいいんです！ (3/3)

人気記事トップ10

新着記事

企画広告も役立つ情報バッチリ！ Sponsored