第2回：Javascriptを記述せずにリッチなUIを実現する！ (3/3)

サンプルページ作成

ページの作成はAjax4JSFと同様にRichFacesのカスタムタグをincludeしてJSPページに記述するだけです。例えばリスト5のようなページを作成してみましょう。

サンプルページ

タグ名	タグの説明	含まれる属性	属性の説明
rich:simple TogglePanel	トグル可能なパネルを生成	switchType	トグル時の画面切り替えをどのように行うかをclient、server 、ajaxの3種類から設定します
		label	トグルバーに表示されるタイトル
		opened	初回表示時にバーがオープンかどうかを設定します
		width	トグルバーの幅をしています
rich: suggestionbox	テキストボックスの入力支援（インプットサジェスト）を行う	for	対象となるテキストボックスのID
		suggestion Action	実行されるメソッドをELでメソッドバインディングします
		var	suggestionAction実行により返却されたリストの1要素をあらわす
		height	サジェッションボックスの高さを設定します
		width	サジェッションボックスの幅を設定します
rich: dataTable	行や列の結合ができる高機能番のh:dataTable	--	※今回はh:dataTabeと同様の利用方法以外はしていません
rich: modalPanel	モーダルダイアログを表示	id	Javascriptから呼び出すためのIDを指定します
rich:effect	コンポーネントにアニメーション効果を付与	event	どの処理が呼び出しの契機となるかを設定します（onClink、onMouseOverなど）
		type	アニメーションの種類を指定します
		params	動作のスピードなどのパラメータを設定します

少々長いコードですが、RichFacesのカスタムタグに注目して解説していきましょう。まず6行目でtaglibディレクティブでRichFacesのカスタムタグを読み込み込んでいます。

13行目から30行目までは<rich:simpleTogglePanel>というカスタムタグで囲まれています。これは、その名の通りこの範囲をトグルパネル化して表示するタグです。クリックごとに表示、非表示を切り替えることが可能です。

さらに内部には<rich:suggestionbox>タグが記述されています。このタグは、for属性で指定されたテキストボックスが入力状態になったときに入力補完候補を表示してくれるタグです。

先ほどのSearchBeanクラス内のsearchSuggestメソッドの戻り値を利用して、候補を画面に表示します。今回は単純にテキストを表示するだけですが、この補完候補には画像なども記述することができます。

今度は少し飛ばして72行目から80行目をみてください。<rich:modalPanel>タグに囲まれた部分があります。こちらもその名の通りモーダルパネルを表示するためのタグです。

この<rich:modalPanel>タグはコード中のどこに書いてもよく、最初の画面描画時には表示されません。32行目に<h:outputLink value="javascript:Richfaces.showModalPanel('help')">とあり、「Richfaces.showModalPanel('コンポーネントのID')」といったJavaScriptを実行すると、モーダルパネルが表示される仕組みになっています。ここは唯一JavaScriptを記述しなければならない部分です。モーダルパネルを閉じる場合には79行目のように「Richfaces.hideModalPanel('コンポーネントのID')」を呼び出します。

40行目には<rich:dataTable>タグを利用しています。こちらは通常の<h:dataTable>タグよりも複雑なテーブル構造実現することのできるタグです。今回は特に<h:dataTable>でも代用できる範囲で利用しました。しかし、RicihfacesにはSKINと呼ばれる機能が提供されており、<rich:dataTable>タグを利用するとグラデーションの掛かった美しいヘッダが表示できるようになります。またSKINを自作することでサイト全体のデザインをCSSなどを利用して自由に設定することも可能です。

最後に38行目に注目してください。<rich:effect>というタグが記述されています。こちらは画面上のコンポーネントにアニメーションをつけるタグになります。event属性ではどういったときに動作するか、type属性ではアニメーションの種類、params属性では速度などの細かなパラメータを設定します。今回の設定では、検索結果のテーブルをダブルクリックすると、アニメーションしながら消えていくといった動作となります。

今回使ったタグを表1にまとめました。この他にもRichFacesには便利なタグや属性が多数用意されています。どのようなタグがあるのかもっと知りたい方は、JBoss Richfaces Documentation
（http://labs.jboss.com/jbossrichfaces/docs/index.html）を参照するとよいでしょう。

動作確認

作成したアプリケーションをデプロイしてWebブラウザから「http://localhost:8080/<プロジェクトのContextPath>/faces.search.jsp」にアクセスすれば、Ajaxによるインプットサジェスションやアプリケーションのパネルが表示されます。

まとめ

RichFacesは、Ajax4JSFをベースにした、リッチなユーザインターフェースを作成するためのフレームワークです。JavaScriptをほとんど書かずに、トグルパネルやモーダルダイアログ、インプットサジェストなどの機能を持った画面を実現することができます。

生のJavaScriptを記述する方法に比べると自由度は少ないかもしれません。しかし、JSPとカスタムタグを利用する開発方法でそのままリッチなUIを持つAjaxアプリケーションを作成できるため、Javaエンジニアにとっては直感的で使いやすいでしょう。

次回はRichFaces以外のJavaベースAjaxフレームワークを例に、それぞれの利点、欠点、使いどころなどを解説します。お楽しみに！