Ajax4JSFで簡単Ajax!
第2回:Javascriptを記述せずにリッチなUIを実現する!
著者:カサレアル 岡本 充洋
公開日:2007/12/18(火)
サンプルページ作成
ページの作成は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 |
動作のスピードなどのパラメータを設定します |
表1:コードで利用しているタグ一覧
少々長いコードですが、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フレームワークを例に、それぞれの利点、欠点、使いどころなどを解説します。お楽しみに!