AjaxFacesサンプルに必要な環境
AjaxFacesは、以下の環境で動作します。
- J2SE Development Kit 1.4以上
- JavaServer Faces 1.1_01のインストールされたサーブレットコンテナ上
また本記事のサンプルは、次の環境で動作確認をしています。
- J2SE Development Kit 5.0 Update 2
- Tomcat 5.0
- AjaxFaces 1.0（Evaluation Version）
AjaxFacesの概要
AjaxFacesは、JSF環境でAjax（Asynchronous Javascript And Xml）を使用してリッチなUIを実現するためのタグライブラリです。CyberXP.NET社の製品で、価格などは現在のところメール問い合わせとなっていますが、将来的にはオンライン購入が可能になるようです。
本記事では、ユーザ登録することで無料ダウンロードできるEvaluation Versionを使用します。Evaluation Versionは通常版と同じ機能を持っていますが、リクエスト処理回数およびコンポーネントの使用回数が99回までに制限されています。それぞれの回数はサーブレットコンテナを再起動することでクリアされますので、評価目的の使用であれば、さほど問題はありません。
現在のところ、AjaxFacesでは以下のUIコンポーネントが提供されています。
Tree | 一般的なツリーコントロールを実現するためのコンポーネントです。Swing JTreeと完全互換のデザインを持ち、Swing TreeModel/TreeSelectionModelなどのJTree用のクラスを流用可能です。 |
TabbedPane | タブ切り替え画面を実現するためのコンポーネントです。Swing JTabbedPaneと完全互換のデザインを実現し、任意のコンポーネントをペイン上に配置することができます。 |
Calendar | カレンダーを実現するためのコンポーネントです。日付のハンドリングや前月・次月への遷移などの機能を持っています。 |
AjaxFacesのセットアップ方法
AjaxFacesライブラリのダウンロード
AjaxFaces公式サイトにアクセスし、左側にあるリンクの［Downloads］からユーザ登録を行い、「ajaxtags-1.0.1.zip」をダウンロードしてください。
JavaServer Faces（JSF）のダウンロード
JavaServer Facesダウンロードサイトにアクセスし、「JavaServer Faces v1.1.01 Reference Implementation」の［Download］から、「jsf-1_1_01.zip」をダウンロードしてください。
Webアプリケーションの作成
ご使用のサーブレットコンテナの利用方法に従い、Webアプリケーションを作成してください。本記事では、Tomcat 5.0上に「ajaxfaces-sample」というWebアプリケーションを作成したものとして説明します。
ライブラリのインストール
ダウンロードした「ajaxfaces-1_0.zip」を解凍し、「ajaxfaces.jar,ajaxfaces_license_t.jar」をWebアプリケーションの「WEB-INF/lib」ディレクトリにコピーします。同じくダウンロードした「jsf-1_1_01.zip」を解凍し、「jsf-api.jar」、「jsf-impl.jar」をWebアプリケーションの「WEB-INF/lib」ディレクトリにコピーします。
「web.xml」の作成
作成したWebアプリケーションの「WEB-INF/web.xml」に、FacesServletおよびAjaxFacesのServletの定義を追加します。
<context-param> <param-name>javax.faces.STATE_SAVING_METHOD</param-name> <param-value>client</param-value> </context-param> <context-param> <param-name>net.CyberXP.ajaxfaces.STATE_SAVING_NAME</param-name> <param-value>com.sun.faces.VIEW</param-value> </context-param> <listener> <listener-class>com.sun.faces.config.ConfigureListener </listener-class> </listener> <servlet> <display-name>Faces Servlet</display-name> <servlet-name>Faces Servlet</servlet-name> <servlet-class>javax.faces.webapp.FacesServlet</servlet-class> <load-on-startup>1</load-on-startup> </servlet> <servlet> <display-name>Ajax Servlet</display-name> <servlet-name>Ajax Servlet</servlet-name> <servlet-class>net.CyberXP.ajaxfaces.webapp.AjaxServlet </servlet-class> </servlet> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>*.cxp</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>Ajax Servlet</servlet-name> <url-pattern>/AjaxServlet</url-pattern> </servlet-mapping>
これにより、「*.cxp」へのアクセスがFaces Servletで処理されるようになります。「/AjaxServlet」は、AjaxFacesがAjaxリクエスト処理時に内部的に使用するものと思われます。
AjaxFacesのJavaScriptファイルのインクルード
AjaxFacesを使用する各ページで、AjaxFacesが使用するJavaScriptファイルをインクルードします。以下の内容をJSPファイルに追加してください。このajaxScriptタグは、最終的にAjaxFacesのサーブレットからJavaScriptファイルを取得するHTMLのscriptタグに変換されます。
<af_h:ajaxScript rendered="true"/>
以上でAjaxFacesのセットアップは終了です。以降にそれぞれのタグの使用方法について説明します。
AjaxFacesの使用方法
使用方法の流れ
AjaxFacesの使用方法は、以下のような流れとなります。
- AjaxFacesを使ったJSPファイルの作成
- AjaxFacesと連携するサーバサイドハンドラの作成
- AjaxFacesと連携するモデルの作成
では、AjaxFacesのコンポーネントをどのように使用すればよいのか、実際のコードを見ていきましょう。ここではTreeタグの使用法について説明します。
Treeタグの使い方
Treeタグの使用法として、簡単な階層構造をブラウザに表示してみましょう。
JSPページの作成
Webアプリケーション上にJSPページ「myjsf/tree.jsp」を新規作成し、Treeタグを配置します。
| 属性名 | 説明 |
id | treeタグのID。 |
ajax | Ajaxを有効にするかどうかのフラグtrueを設定する。 |
rootVisible | ルート要素を表示するかどうかのフラグ。 |
showsRoothandles | ルート要素から子ノードへの線を表示するかどうかのフラグ。 |
value | ツリーモデルを取得するためのサーバサイドハンドラを指定する（詳細は後述）。 |
var | ツリーの変数名を指定するツリー表示を行うJSFコンポーネントから参照される。 |
Treeタグの下位要素に、実際のツリーを表示するためのJSFコンポーネントを配置します。この配置は定型コードとなりますので、詳細はソースコード（「myjsf/tree.jsp」）を参照してください。
サーバサイドハンドラ作成
「WEB-INF/src」に「TreeOptionsBean.java」を作成し、サーバサイドハンドラを実装します。このハンドラはTreeタグの下位に配置したJSFコンポーネントから呼び出され、ノード選択時のアクション（selectNodeメソッド）および選択ノード/未選択ノードのスタイル（getSelectedNodeStyleメソッド/getNodeStyleメソッド）を指定します。それぞれのメソッドの詳細はソースコード「TreeOptionsBean.java」をご覧ください。
ツリーモデル作成
「WEB-INF/src」に「MyTreeModel.java」を作成し、ツリーモデルを実装します。このクラスはSwingのTreeModelクラスを実装し、getTreeModelメソッドでツリーモデルを返します。
DefaultMutableTreeNode root = new DefaultMutableTreeNode("UITree"); DefaultMutableTreeNode colors = new DefaultMutableTreeNode("色"); root.add(colors); colors.add(new DefaultMutableTreeNode("青")); colors.add(new DefaultMutableTreeNode("紫")); colors.add(new DefaultMutableTreeNode("赤")); colors.add(new DefaultMutableTreeNode("黄"));
「faces-config.xml」の作成
Webアプリケーションの「WEB-INF」フォルダに「faces-config.xml」を作成します。先ほど作成したサーバサイドハンドラTreeOptionsBeanおよびツリーモデルMyTreeModelを登録し、JSFにインスタンス化してもらうようにします。
<faces-config> <managed-bean> <description>Backing bean for UITree</description> <managed-bean-name>treeOptions</managed-bean-name> <managed-bean-class>TreeOptionsBean</managed-bean-class> <managed-bean-scope>session</managed-bean-scope> </managed-bean> <managed-bean> <description>My Tree Bean</description> <managed-bean-name>myTree</managed-bean-name> <managed-bean-class>MyTreeModel</managed-bean-class> <managed-bean-scope>session</managed-bean-scope> </managed-bean> </faces-config>
動作確認
以上でtreeタグを使ったページを作成することができました。以下のURLへアクセスしてみましょう。拡張子が「.jsp」ではなく「.cxp」であること、Faces Servletを介してアクセスすることに注意してください。
http://{サーバ名}:{ポート番号}/ajaxfaces-sample/myjsf/tree.cxp
動作させるとツリー構造が表示され、各ノードを選択するとポストバックなしに（＝Ajaxを使用して）、次の階層のデータを取得して表示していることが分かると思います。日本語も文字化けすることなく処理されています。
まとめ
ここまでAjaxTags/AjaxFacesの提供する機能について、簡単なサンプルを通して使用方法を説明しました。それぞれ簡単にまとめてみましょう。
AjaxTagsの記述量は比較的少なかったことに気づかれたのではないでしょうか。Ajaxの取っ掛かりとしては扱いやすいライブラリですので、今後のコンポーネントの拡充に期待しましょう。
一方AjaxFacesでは、クライアント・サーバサイド連携のスムーズさが目立ちます。AjaxTagsでは「GETリクエストを処理してXMLを返して……」という処理を自分で記述する必要がありましたが、AjaxFacesでは、例えばTreeタグであれば、SwingのTreeModelクラスを実装すれば後の通信はすべてAjaxFacesのコンポーネントが世話してくれます。まだコンポーネントの種類が少ないですが、こちらも今後の拡充が期待されます。機能的な面ではありませんが、ドキュメント・サンプルの充実度はまだまだ苦しいものがあります。商用製品として進めていくのであれば、さらに開発者のための情報を増やしていただきたいものです。
今回取り扱うことはできませんでしたが、ServletからAjaxを使用するためのライブラリとしてDWR（Direct Web Rendering）があります。こちらは、AjaxFacesと同様のサーバ/クライアント連携のためのフレームワークを持っています。DWRのサーバサイドハンドラは、Servletである必要はなく、ただのJavaオブジェクト、最近よく言われるPOJO（Plain Old Java Object）です。DWRのフレームワークが、任意のPOJOを透過的にクライアントサイドのJavaScriptからアクセスできるようにしてくれます。その一方で、DWRはAjaxTags/AjaxFacesほどの豊富なUIコンポーネントを持ち合わせていません。また、AjaxTags/AjaxFacesがJavaScriptのコーディング無しで使用できるのに対し、DWRではJavaScriptのコーディングが必要となります。これはAjaxを用いたアプローチの違いであり、単純なライブラリの優劣の問題とは異なると言えるでしょう。
Ajaxを使った高機能なUIをわずかなタグ記述だけで実現することができ、しかもクライアントサイドのJavaScriptを記述する必要がない。AjaxTags/AjaxFacesは確かにJ2EE開発者にとって強力な道具となり得ます。本稿が快適なAjaxライフの一助となれば幸いです。
