【ハウツー】

JavaScriptの記述が不要! Java開発者向け本格的AjaxフレームワークICEfaces

1 JSFの文法でAjaxアプリを作成可能

足羽崇
  • <<
  • <

1/5

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アプリケーションを開発することが可能である。

  • <<
  • <

1/5

インデックス

目次
(1) JSFの文法でAjaxアプリを作成可能
(2) ICEfacesの基本アーキテクチャ(1) - 内部構造とリクエストの送信/処理
(3) ICEfacesの基本アーキテクチャ(2) - JSFのライフサイクルとレスポンスの送信
(4) ICEfacesのセキュリティ
(5) Cometタイプのアプリケーションも簡単! - デモアプリケーション「オークションモニタ」


転職ノウハウ

あなたが本領発揮できる仕事を診断
あなたの仕事適性診断

シゴト性格・弱点が20の質問でサクッと分かる!

「仕事辞めたい……」その理由は?
「仕事辞めたい……」その理由は?

71%の人が仕事を辞めたいと思った経験あり。その理由と対処法は?

3年後の年収どうなる? 年収予報
3年後の年収どうなる? 年収予報

今の年収は適正? 3年後は? あなたの年収をデータに基づき予報します。

激務な職場を辞めたいが、美女が邪魔して辞められない
激務な職場を辞めたいが、美女が邪魔して辞められない

美人上司と可愛い過ぎる後輩に挟まれるエンジニアの悩み

人気記事

一覧

イチオシ記事

新着記事

求人情報