ICEfacesとは、カナダのICEsoft Technologiesにより開発された、Ajaxに対応したJSFベースのWebアプリケーションフレームワークである。MPL(Mozilla Public License)の下に公開されているオープンソースのプロダクトであり、ICEfacesのWebサイトからダウンロードできる(本稿執筆時の最新バージョンは1.6.1)。

Ajax対応のWebアプリケーションと言えば、JavaScriptによる開発が多くなるイメージを持つ方がいるかもしれない。しかし、ICEfacesの目標の一つは、JavaScript開発における困難や落とし穴を回避することにある。ICEfacesを用いると、次のことが可能となる。

• JavaScriptを記述しない、サーバセントリックなAjaxアプリケーション開発
• 従来のJSFアプリケーション開発と同じ感覚でのAjaxアプリケーション開発

現在のICEfacesのWebサイトには、デモアプリケーションがいくつか用意されている。もちろんこれらのバイナリやソースコードをダウンロードすることも可能だ。本稿では、Ajaxの基本的な動作、JSFの仕組みを理解している方を対象に、これらのデモを例にとりながら、ICEfacesの基本的な仕組み、そしてどのようにして上記のスタイルによる開発が実現されるのかについて紹介したい。

デモアプリケーション「アドレスフォーム」を使ってみる

早速、最初のデモアプリケーションを見てみよう。「http://address.icefaces.org/address/」にアクセスすると、以下のような画面(画面1)が表示される。

画面1: アドレスフォームの入力画面

このデモ「アドレスフォーム」は、ユーザ情報を入力し、決定するだけの大変シンプルなアプリケーションだ。少し動作させれば、典型的とも言えるAjaxアプリケーションであることに気がつくだろう。例えば、次のように動作する。

(A) Last Nameに"ASHIWA"と入力すると、フォーカスを外した時点で"Ashiwa"に変換される

(B) CityにNew Yorkと入力すると、フォーカスを外した時点で、Stateも自動で入力され、該当するZipがプルダウンのリストとして現れる

このような典型的なAjaxアプリケーションではあるが、ICEfacesを用いると、JavaScriptを記述することなく、これまでのJSFアプリケーションと同様の手順で容易に開発を進められる。例えば、Last Nameの入力部分のJSPを示すとリスト1のようになる。

リスト1: JSP(Last Nameの入力部分のみを抜粋)

<td><ice:outputLabel for="lastName" value="Last Name" /></td>
<td class="input">
    <ice:inputText
        style="width:120px;" id="lastName"
        accesskey="L"
        styleClass="textField" tabindex="30"
        value="#{address.elementContainer.lastName.value}"
        converter="fixCaps"
        partialSubmit="true"
        binding="#{address.addressFormProcessor.lastNameText}" />
</td>

ここにはJavaScriptの記述が存在しない。ICEfacesで用意されているカスタムタグinputTextを用いているが、属性としてはJSFでおなじみのカスタムコンバータ、バリューバインディングなどを指定しているだけで、イベント属性なども存在しない。

Ajaxアプリケーションを意識させる要素を強いて挙げるなら、partialSubmit属性になる。この属性は、ユーザの適当なアクション時に、パーシャルサブミット(後述)を有効にするかどうかを記述するためのものだ。

このように、JavaScriptの記述なしに、これまでのJSFアプリケーションと同様の手順により、Ajaxアプリケーションを開発することが可能である。