JSF2の画面でAjaxの非同期通信を作る

JavaEE6 開発入門（4）

　本連載は、Java Enterprise Edition 6（Java EE 6）の導入方法をはじめとして、新導入された仕様や概念を紹介していきます。今回も前回に引き続き、JSF（JavaServer Faces）を取り上げます。

はじめに

　本稿では、Java Enterprise Edition 6のプレゼンテーションの基本となるJSF（JavaServer Faces）の送信機能と、Ajaxの扱い方について紹介します。

対象読者

• JavaEE6開発に興味がある方
• これからJavaのWebアプリケーション開発をはじめる方

必要な環境

　動作環境は以下のとおりです。

• Java SE 6
• NetBeans 6.9.1

フォームの送信をJSF2のAjax機能で行う

　今回紹介するJSF2でのAjax機能で使われている基本の技術について、簡単におさらいします。

フォームの送信とAjax

　Webアプリケーションは、利用ユーザーからの入力情報をサーバへ送信し、その結果を画面へ返すまでをひとつのサイクルとしています。送信するデータをくくるHTMLタグは<form>で、フォームと呼ばれます。この<form>と</form>で囲まれた内容をサーバへ送信します。サーバへの送信は送信ボタン<input type="submit">を押すことで行われ、この送信ボタンを押すとサーバで処理された結果画面がブラウザへ返され、サーバでの処理結果の画面が表示されます。

　一方、Ajaxとは、サーバとの通信をフォームの送信を使わず、JavaScript内で非同期に送受信を行う仕組みです。先ほどのフォーム送信との大きな違いは、サーバから受け取るのは画面ではなく結果データのみになることです。そのデータを受け取って、JavaScriptで現在表示している画面の一部を変更することで、フォーム送信した場合と同様に振る舞うことができます。

JSF2でAjaxするために必要なファイル

　JSF2でのAjax機能は、Faceletsを利用することで簡単に実装できます。他のライブラリを導入する必要も、またJavaScriptを組む必要も一切ありません。宣言部に1行追加するだけで利用できます。

　JSF2でAjaxを使ったアプリケーションを作るために必要なファイルは、次の2つだけです。

• Facelets（XHTMLファイル）
• ManagedBean（JavaEEクラス）

　今回、サーブレットは使いません。Faceletsを呼び出す際のURLに「/facelet/」を付けることで、サーバではFacelets用の標準サーブレットが内部で呼び出されているので、特に必要ありません。

図1 FaceletsとManagedBeanの概念図

　ManagedBeanとは、今回取り扱うJavaEEクラスの1つで、JSFが管理するコンポーネントとして宣言されたクラスです。NetBeans6.9で作成する際には特に設定ファイルを記述する必要ありません。生成されるコードについては後ほど取り上げます。

　なお、@NamedアノテーションはJSFの機能ではなく、JavaEE6で採用されているCDI(Contexts And Dependency Injection)の機能です。NetBeans6.9ではCDIの機能がはじめから組み込まれており、このCDIによりJavaEEのコンポーネントも注入されますので、@NamedでCDI管理と定義したManagedBeanもJSFから参照できるようになります。これによりボタンの押下やフォームの送信など、イベントの発生や監視による疎結合方式の通信が可能になります。