2006年 7月 08日 土曜日
2006年 7月 08日 土曜日
前回までのエントリで，以下のような順序でリクエストが処理されるアプリケーションを構築できました。
各種のAjaxライブラリ，ツール等が提供されているようですが，今回使うのはAjax4jsfです。
これは，JSFで構築したサーバサイドのプログラムに全く手を入れることなく，プレゼンテーション(JSP)の修正だけでAjaxを用いた非同期更新の仕組みを組み込むことが出来るスグレモノです。
ソースコードを見てもらうと分かり易いと思いますので，前回のエントリで作成したJSPにAjax4jsfを適用したものを見ていただきましょう。
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@taglib prefix="a4j" uri="https://ajax4jsf.dev.java.net/ajax"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<f:view>
<h1><h:outputText value="Java Server Faces" /></h1>
<h:form>
<h:inputText value="#{PricingManagedBean.productId}"/>
<a4j:commandButton reRender="productId,productName,price" value="Submit" action="#{PricingManagedBean.findBooksData}"/>
</h:form>
<hr>
<table border="1">
<thead>
<tr>
<th>Product Id</th>
<th>Product Name</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td><h:outputText id="productId" value="#{PricingManagedBean.productId}"/></td>
<td><h:outputText id="productName" value="#{PricingManagedBean.productName}"/></td>
<td><h:outputText id="price" value="#{PricingManagedBean.price}"/></td>
</tr>
</tbody>
</table>
</f:view>
</body>
</html>
ソースコードで修正した箇所は，太字の部分だけです。
（＊） 他には，web.xmlの修正や，ライブラリの修正が必要です。詳細についてはアーカイブ（本日現在の最新はv1.0rc1）に含まれるreadmeを参照してください。Glassfishで動かす場合には，さらにApache Commonsが必要なようです。私の場合，BeanUtils 1.7.0, Collections 3.2, Digester 1.7, Logging 1.1のjarをライブラリに追加すると動きました。
commandButtonをAjax4jsfが提供するcommandButtonに変更し，更新を反映するコンポーネントのidをreRender属性で指定するだけで，Ajaxアプリになってしまいます。つまり，
他のAjaxライブラリやツールだと，サーバサイドの仕組みが独自になってしまい，既存のJ2EE/Java EEアプリケーションのアーキテクチャと整合性をとるのが難しくなってしまいそうなのですが，Ajax4jsfの場合は，JSFのモデルを崩すことなく，簡単にAjaxの要素を取り入れることが出来ますし，JavaScriptのコードを記述する必要も一切ありません。現在はまだコンポーネントの種類も少なく，思ったような処理を実現できない場合もあるようですが，今後の展開に期待したいと思います。
- Webブラウザ
- JSF
- BPEL on OpenESB (JBI)
- Web Service (EJB 3.0)
- Stateless SessionBean (EJB 3.0)
- Entity Object (EJB 3.0)
- Java DB
各種のAjaxライブラリ，ツール等が提供されているようですが，今回使うのはAjax4jsfです。
これは，JSFで構築したサーバサイドのプログラムに全く手を入れることなく，プレゼンテーション(JSP)の修正だけでAjaxを用いた非同期更新の仕組みを組み込むことが出来るスグレモノです。
ソースコードを見てもらうと分かり易いと思いますので，前回のエントリで作成したJSPにAjax4jsfを適用したものを見ていただきましょう。
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@taglib prefix="a4j" uri="https://ajax4jsf.dev.java.net/ajax"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<f:view>
<h1><h:outputText value="Java Server Faces" /></h1>
<h:form>
<h:inputText value="#{PricingManagedBean.productId}"/>
<a4j:commandButton reRender="productId,productName,price" value="Submit" action="#{PricingManagedBean.findBooksData}"/>
</h:form>
<hr>
<table border="1">
<thead>
<tr>
<th>Product Id</th>
<th>Product Name</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td><h:outputText id="productId" value="#{PricingManagedBean.productId}"/></td>
<td><h:outputText id="productName" value="#{PricingManagedBean.productName}"/></td>
<td><h:outputText id="price" value="#{PricingManagedBean.price}"/></td>
</tr>
</tbody>
</table>
</f:view>
</body>
</html>
ソースコードで修正した箇所は，太字の部分だけです。
（＊） 他には，web.xmlの修正や，ライブラリの修正が必要です。詳細についてはアーカイブ（本日現在の最新はv1.0rc1）に含まれるreadmeを参照してください。Glassfishで動かす場合には，さらにApache Commonsが必要なようです。私の場合，BeanUtils 1.7.0, Collections 3.2, Digester 1.7, Logging 1.1のjarをライブラリに追加すると動きました。
commandButtonをAjax4jsfが提供するcommandButtonに変更し，更新を反映するコンポーネントのidをreRender属性で指定するだけで，Ajaxアプリになってしまいます。つまり，
- 修正前
コマンドボタンを押下すると，サーバから同期的にHTMLが返信され，ページ全体が更新される。 - 修正後
コマンドボタンを押下すると，サーバから非同期にXMLが返信され，reRender属性で指定した箇所だけが動的に更新される。
他のAjaxライブラリやツールだと，サーバサイドの仕組みが独自になってしまい，既存のJ2EE/Java EEアプリケーションのアーキテクチャと整合性をとるのが難しくなってしまいそうなのですが，Ajax4jsfの場合は，JSFのモデルを崩すことなく，簡単にAjaxの要素を取り入れることが出来ますし，JavaScriptのコードを記述する必要も一切ありません。現在はまだコンポーネントの種類も少なく，思ったような処理を実現できない場合もあるようですが，今後の展開に期待したいと思います。