特集記事

AjaxTags・AjaxFacesを利用したサーバーサイドプログラミング

J2EEでJavaScriptのコーディングを行わずにAjaxを利用する方法

WINGSプロジェクト　土井毅[著] / 山田祥寛[監修]

更新日: 2006/10/11
公開日: 2005/10/12

ポスト

ダウンロードサンプルファイル (1.3 MB)

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コンポーネントが提供されています。

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の定義を追加します。

「web.xml」のソース一部

<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タグに変換されます。

JSPファイルに追加する内容

<af_h:ajaxScript rendered="true"/>

　以上でAjaxFacesのセットアップは終了です。以降にそれぞれのタグの使用方法について説明します。

AjaxFacesの使用方法

使用方法の流れ

　AjaxFacesの使用方法は、以下のような流れとなります。

AjaxFacesを使ったJSPファイルの作成
AjaxFacesと連携するサーバサイドハンドラの作成
AjaxFacesと連携するモデルの作成

　では、AjaxFacesのコンポーネントをどのように使用すればよいのか、実際のコードを見ていきましょう。ここではTreeタグの使用法について説明します。

Treeタグの使い方

　Treeタグの使用法として、簡単な階層構造をブラウザに表示してみましょう。

JSPページの作成

　Webアプリケーション上にJSPページ「myjsf/tree.jsp」を新規作成し、Treeタグを配置します。

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でツリーを作成する

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.xml」のソース

<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ライフの一助となれば幸いです。

参考資料

この記事は参考になりましたか？

連載通知を行うには会員登録(無料)が必要です。
既に会員の方はを行ってください。

印刷用を表示

ポスト

特集記事連載記事一覧: 【随時更新・まとめ読み】開発者のための「AWS re:Invent 2024」関連記事

開発者のための「WWDC 2024」関連発表まとめ

LeSSやSAFeなど、大規模アジャイルにおけるソフトウェア品質の課題とは？

もっと読む

この記事の著者: 山田祥寛（ヤマダヨシヒロ）

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ（Java・C#・Python・PHP・Ruby・JSP＆サーブレットなど）」「速習シリーズ（ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど）」「改訂3版JavaScript本格入門」「これからはじめるLaravel実践入門」「はじめてのAndroidアプリ開発 Kotlin編」他、著書多数。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この著者の最近の執筆記事; WINGSプロジェクト　土井毅（ドイツヨシ）

＜WINGSプロジェクトについて＞有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表山田祥寛）。主にWeb開発分野の書籍／記事執筆、翻訳、講演等を幅広く手がける。 2026年時点での登録メンバは約50名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書、記事多数。 RSS X: @WingsPro_info（公式）、@WingsPro_info/wings（メンバーリスト） Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この著者の最近の執筆記事