【ハウツー】たった一行、これは簡単 - JSFでAjax、Ajax4jsf (2) Hello Ajax4jsf! | エンタープライズ

急上昇ワード

[

]

【ハウツー】

たった一行、これは簡単 - JSFでAjax、Ajax4jsf

2 Hello Ajax4jsf!

後藤大地　 [2006/08/17]

印刷

Ajax4jsfのプロジェクトサイトには成果物以外にデモンストレーション用のWebアプリケーションも用意されている。.warファイルをダウンロードしてデプロイしてみてほしい。Ajaxが実現されることがわかる。以降に動作例を紹介する。


図2.1 Simple Repeator Demo – テキストフィールドに入力する文字が、その下にテキストとして描画される。描画は非同期で部分的であり、ページの再読み込みは発生していない	図2.2 Simple Repeator Demo – テキストフィールドに入力する文字が、その下にテキストとして描画される。描画は非同期で部分的であり、ページの再読み込みは発生していない


図2.3 Using Buttons and Links – ボタンとリンクに対してAjax機能を実現している例。ボタンやリンクをクリックすると非同期に下部のテキストエリアやテキストラベルの部分などが更新される	図2.4 Facelets: Number Guess Tutorial – 数当てゲーム。数値の入力に対して非同期に数値があたりか、あたりよりも小さいかまたは大きいかを表示する。もちろんページのリロードはなし


図2.5 Fruits Selector – チェックボックスを選択すると、内容に応じてほかのチェックボックスの内容が動的に変化する	図2.6 Drop Down Boxes – コンボボックスの選択の応じてほかのコンボボックスの内容を変化するデモ。実際のWebアプリケーションシステム構築において要求されることが多いインターフェースのひとつ


図2.7 a4j:mediaOutput – a4j:mediaOutput コンポーネントによって出力される内容の表示例	図2.8 Wrapper HTML for Widget – GWTウィジェットを使用するデモンストレーション

図2.9 GWT-JSF Integration Library Demo – GWTライブラリを活用して作成されたデモンストレーション。実際にどのようなWebアプリケーションシステムを開発できるか知るうえでは興味深いデモ

どのデモンストレーションもページの再描画は発生しない。動的に一部分だけが更新される。Ajaxはもはや当り前になった感があるが、これをJavaScriptを使っていちから作るとなるとなかなか面倒だ。

使ってみようAjax4jsf

Ajax4jsfを実際にどのように使うかは、デモアプリケーションを参考にするとわかりやすい。なかでもSimple Repeator Demo Webは簡単でわかりやすいだろう。同サンプルは図3.1のようなディレクトリ構造で構成されている。ライブラリやデプロイ、ビルドに必要なファイルなどをのぞけば、実質的には図3.2が必要な部分ということになる。


図3.1 Simple Repeator Demo Webアプリケーションのディレクトリ構造	図3.2 Simple Repeator Demo Webアプリケーションのディレクトリ構造 – 本質的な部分

Bean.javaはデータを表現しているだけだから、図3.2の場合は実質的にdemo.jspが本体だ。リスト3.3をみるとわかるが、ほとんどはJSFで構成されている。そのなかに一行だけ「<a4j:support event="onkeyup" reRender="repeater" />」があることがわかるが、この部分がAjax4jsfだ。

リスト3.3 demo.jsp から抜粋 - Ajax4jsfコンポーネントの活用例

<%@ taglib uri="https://ajax4jsf.dev.java.net/ajax" prefix="a4j"%> <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%> <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%> ……略…… <f:view> <h:form> <h:panelGrid columns="2"> <h:outputText value="Type the Text:" /> <h:inputText size="50" value="#{bean.text}"> <a4j:support event="onkeyup" reRender="repeater" /> </h:inputText> <h:outputText value="Text in the Ajax Response:" /> <h:outputText id="repeater" value="#{bean.text}" /> </h:panelGrid> </h:form> ……略…… </f:view> </body> </html>

Ajax4jsfを使うと、JSP PageとJSP Phasesの間に、Ajax EngineとAjax4jsfによるビューの処理が挟まることになる。この部分で自動的に非同期通信と部分再描画を実施するという手順だ。だから間にa4j:support要素をはさんだだけで、Ajax機能が実現されている。1行追加するだけでAjax化完了だ。これは興味深い。