JSFプログラミング解説

掲載日：2005年1月11日 （月）

日本アイ・ビー・エム システムズ・エンジニアリング（株） 大石 貴之

概要

Java技術のロードマップは、EoD（Ease of Development）を目指しています。JSFはEoD実現のための技術であり、開発者の負担を軽減しながら短期間に高品質のJ2EEアプリケーションが開発可能になることを目指しています。

JSFとは

JSFとはJavaベースのWebアプリケーションを対象としたユーザーインターフェース構築のためのフレームワークです。JSR-127で仕様が作成されており、2004年2月にVersion1.0、2004年5月にVersion1.1がリリースされています。
JSFではJ2EEアプリケーションで多く採用されているMVCモデル2を採用しています。ビューとコントローラー、モデルを分離し、それぞれの開発担当者の役割分担を明確にしています。これにより画面デザイナーやビジネスロジック開発者などの開発時の専業化が推進され、チーム開発も行いやすくなります。
JSFの特徴は次に示しているような、ユーザーインターフェース構築のために必要となる多くの機能を仕様として提供していることです。

• 多くの多機能コンポーネントの実装
• 入力値の妥当性検査を行うバリデーション機能
• 値の型変換を行うデータ・コンバージョン機能
• イベント処理を行うイベント・リスナー機能
• 画面遷移を行うページ・ナビゲーター機能
• 値を保持するためのモデル・データ機能
• クライアントにレスポンスを返信するためのレンダラー機能

JSFはこれらの機能を提供するためのAPIとタグ・ライブラリーから構成されています。そしてAPIやタグ・ライブラリーを利用するJSFアプリケーションは通常のWebアプリケーションと同じくWebコンテナー上で動作します。
次の図はJSFアプリケーションがクライアントからのリクエストを受けて、JSFフレームワークの機能を使用して処理を実行している様子を概念的に示したものです。処理の中で使用される機能について説明を行います。

• FacesServlet
  JSFページのエントリー・ポイントとして機能するサーブレットです。このサーブレットはJSFフレームワークのファサードのような役割を担います。クライアントからのリクエストURLに基づいてJSFページに処理をフォワードします。このサーブレットはJSF1.0実装が提供します。
  
  
• JSPページ
  JSFタグが含まれるJSPページはMVCモデルのビューを担当します。ブラウザなどのクライアント画面を作成するのがこのJSPページです。JSPページの中ではビューを表すコンポーネントが、タグを使用してプレゼンテーションと振る舞いを定義されます。JSPページはアプリケーション開発者が実装します。
  
  
• タグ・ライブラリー
  JSPページが使用するタグはタグ・ライブラリーとして提供されています。JSF1.0実装ではコア・タグとHTMLコンポーネント・タグが提供されています。アプリケーション開発者が新規に開発することも可能です。このように新規で開発したタグをカスタム・タグと呼びます。
  
  
• バリデーター
  入力項目のバリデーション・チェックを行います。入力コンポーネントの設定を元に、必須項目には値が入力されているか、入力値の設定された最大・最小の数に収まっているかなどがチェックされます。バリデーション・チェックでエラーが発生したときには、エラー・メッセージを表示させることが可能です。JSF1.0実装ではデフォルト・バリデーター実装を提供しています。アプリケーション開発者が新規に開発することも可能です。このように新規で開発されたバリデーターをカスタム・バリデーターと呼びます。
  
  
• コンバーター
  入力された値の型変換を行います。クライアントからのHTTPリクエストを受信すると、入力コンポーネントの入力値はバインドされたモデル・データに格納されますが、その際にはモデル・データの属性への型変換が行われます。JSF1.0実装ではデフォルト・コンバーター実装を提供しています。アプリケーション開発者が新規に開発することも可能です。このように新規で開発されたコンバーターをカスタム・コンバーターと呼びます。
  
  
• モデル・データ
  ユーザー・アプリケーションの処理に必要なデータを保持します。モデル・データの属性を入力コンポーネントにバインドすることで、ビューとモデル間のデータの同期化を図ることが出来ます。ブラウザからのリクエスト・データは自動的にモデル・データの属性に設定されます。またモデル・データの属性値が自動的に処理結果画面に表示されます。モデル・データはアプリケーション開発者が開発します。
  
  
• イベント・リスナー
  画面のイベントをキャッチしてユーザー・アプリケーションの処理を実行します。イベントの種類としては入力値の変更時にイベントを発生させるバリュー・チェンジ・イベントやボタンのクリック時にイベントを発生させるアクション・イベントなどがあります。イベントへのリスナー登録やイベント発生時の処理の実装はアプリケーション開発者が開発します。
  
  
• アクション・メソッド
  画面の遷移先を決定する処理です。登録されているバッキング・ビーンのアクションメソッドを呼び出し、その返り値で渡される文字列で遷移先の画面を決定します。アプリケーション開発者が開発します。
  
  
• アプリケーション・コンフィグレーション・リソース・ファイル
  JSFの構成ファイルです。JSFフレームワークはこのファイルの設定を元に動作します。アプリケーション開発者が開発します。

上に戻る

ライフ・サイクル

JSFではリクエストを受け取ってからユーザー・アプリケーションの処理を実行してレスポンスを返すまでのライフ・サイクルが仕様として規定されています。このライフ・サイクルの中でJSFが提供する機能が実行されます。

• Restore View
  JSFページのビューを作成し、JSFのコンテキスト（FacesContext）に保管します。JSFページにおけるビューは、フォーム（h:formタグで記述される）や入力フィールド（h:inputTextタグで記述される）などのクライアントのUIコンポーネントを構成要素としており、コンポーネントの関係はツリー構造として表されます。
  クライアントからの初回のリクエストでは空のビューを作成し、それをFacesContextに保管します。2回目以降のリクエストの場合、セッションを元にビューを作成し、それをFacesContextに保管します。ビューの保管後にApplyRequestValues局面に移動します。

• Apply Request Values
  Restore Viewで作成したビューのUIコンポーネントに対してリクエストのHTTPリクエスト、Cookie、HTTPヘッダーをセットします。これはUIコンポーネントのdecodeメソッドを使用して行われます。パラメーターのコンバージョンに失敗した場合にはエラーメッセージがFacesContextのキューに追加され、JSF実装はリスナーに対してイベントを通知します。コンポーネントが属性immediate=trueを持つ場合、コンポーネントに関連付けられたバリデーション、コンバージョン、イベントはこの局面で処理されます。
  
  
• Process Validations
  コンポーネントに格納されたデータのバリデーションを検証します。ここでバリデーション・エラーが発生したらFacesContextにエラー・メッセージを追加して、Render Response局面へ移動してエラー・メッセージを表示します。
  
  
• Update Model Values
  バリデーションまで完了したデータを使用してモデルのプロパティーを更新します。モデルのプロパティーへの型変換に失敗した場合にはRender Response局面へ移動してエラー・メッセージを表示します。
  
  
• Invoke Application
  アプリケーション・イベントを処理し、実行結果に応じて遷移先のページを決定します。UICommandコンポーネントに対応するタグのaction属性の値を元に関連付けられているアクション・リスナーを呼び出し、その返り値とアプリケーション・コンフィグレーション・リソース・ファイルの構成を参照して遷移先のページを決定します。
  
  
• Render Response
  各コンポーネントのレンダラーを呼び出し、レスポンスを作成します。各局面でエラーが発生した場合にはエラー画面を作成します。
  その後でビューの状態をセッションに保管します。ここで保管されたビューは次回のリクエストのRestore View局面で復元されます。

上に戻る

Strutsとの比較

JSFとStrutsは共にMVCモデル2対応のフレームワークです。Webアプリケーションのユーザーインターフェースを構築するという目的や、コントローラーとなるServletがリクエストを受け取り、構成ファイルを参照してビジネスロジックを実行し、JSPがレスポンスを返すというアーキテクチャも似通っています。異なる点は、JSFの仕様がJCPで策定されている標準の仕様であるのに対して、StrutsはJakartaプロジェクトで開発されており標準の仕様とはなっていません。実績では、Struts1.0.2が2002年2月にリリースされて以来多くのプロジェクトで使用されており製品の対応も進んでいますが、JSF1.0がリリースされたのが2004年2月でありプロジェクトの実績や製品の対応といった面ではStrutsの方が進んでいます。しかし現在は多くのベンダーがJSFサポートを表明しており、製品対応の充実と共にJSFの実績も豊富になってくると予想されます。

パッケージ

JSFのパッケージは機能別にjavax.faces以下に次のようにまとめられています。JSFの機能を使用する際にはこれらのパッケージをimportして下さい。

• javax.faces
• javax.faces.application
• javax.faces.component
• javax.faces.component.html
• javax.faces.context
• javax.faces.convert
• javax.faces.el
• javax.faces.event
• javax.faces.lifecycle
• javax.faces.model
• javax.faces.render
• javax.faces.validator
• javax.faces.webapp

稼働環境

JSFはWebコンテナーで稼働し、Servlet2.3以降、およびJSP1.2以降が前提APIとなっています。その他にJSFアプリケーションを稼働させるためには以下のjarファイルをクラスパスに設定して下さい。

• jsf-api.jar
• jsf-impl.jar
• jstl.jar
• standard.jar
• commons-beanutils.jar
• commons-digester.jar
• commons-collections.jar
• commons-logging.jar

上に戻る

開発

IBMではJSF1.0に対応した統合開発環境としてWSAD5.1.2を発表しています。ここではWSAD5.1.2を使用したJSFアプリケーションの開発方法について、サンプル・アプリケーションを実際に作成しながら、その作成手順を解説します。

作成するアプリケーション

開発手順で使用するサンプル・アプリケーションの解説を行います。このアプリケーションはユーザーIDとパスワードを入力するためのlogon.jspとログオンが成功した際に表示されるwelcome.jspの2つの画面から構成されている、ログオンを実行するだけの単純なアプリケーションです。logon.jspではユーザーIDとパスワードを入力し、入力値の妥当性検査を実行します。OKボタンをクリックする事で、ユーザー・ロジックが実行され、ユーザーが入力したユーザーIDとパスワードが正しければwelcome.jspに遷移し、誤っていればログオン画面にエラーを表示します。welcome.jspではlogon.jspで入力されたユーザーIDを表示します。Logonへ戻るボタンをクリックすることでlogon.jspへ遷移します。

上に戻る

環境設定

WSAD5.1.2でJSFアプリケーションを開発するにはクラスパスにJSFで必要なjarファイルが存在している必要があります。jarファイルの設定方法は、新規のJSFアプリケーションを開発する場合と、既存のJSFアプリケーションに設定する場合の2つの方法があります。
新規のJSFアプリケーションの場合はファイルを作成する際に、「Faces JSF ファイル」を選択します。そうするとJSPファイルを作成する時に自動的に［WebContent］-［WEB-INF］-［lib］以下に必要なjarファイルが設定されます。
作成済みのWebプロジェクトに対して後からJSFを使用する場合には、Webプロジェクトのプロパティーから「Webプロジェクト・フィーチャー」を選択し、「Faces基本コンポーネントの追加」を指定してください。JSFの中でWDOを使用している場合にはさらに「WDOリレーショナル・データベース・ランタイム」も指定してください。これによって［WebContent］-［WEB-INF］-［lib］以下にjarファイルが設定されます。

サーバーの作成

JSFのテスト環境としては「WebSphere バージョン5.1」が必要です。「サーバー」パースペクティブの「サーバーとサーバー構成」で「WebSphere バージョン5.1」の「テスト環境」を新規に作成して下さい。このテスト環境によって、作成したFaces JSPファイルをWSAD上でテストすることが可能になります。
テストの方法は「Web」パースペクティブでFaces JSPファイルを選択し「サーバーで実行」をクリックします。するとサーバーの選択画面が表示されるので、この画面で先ほど作成したテスト環境を選択します。WebSphere5.1のテスト環境が起動しFaces JSPファイルの実行結果が表示されますので、この画面を使用してテストを実行してください。

画面作成

1. メニューから空のFacesJSPファイルを作成
2. 画面上にFacesコンポーネントをドラッグ＆ドロップ

welcome.jspファイルも同様にして作成します。welcome.jspで必要なコンポーネントはユーザーIDを出力するための「出力」コンポーネントとログオン画面へ遷移するイベントを発生させる「コマンド－ボタン」コンポーネントの2つです。

上に戻る

妥当性検査

JSFでは入力コンポーネントに妥当性検査の属性を設定することが可能です。この属性を設定することにより、入力された値が事前に設定された属性に適合しているかのチェックを行うことが可能になります。
logon.jspの入力コンポーネントに対して妥当性検査の属性の設定を説明します。設定する属性は入力必須の属性と、入力値の最大値、最小値の属性です。
「Web」パースペクティブを選択して妥当性検査を行う入力コンポーネントをクリックします。コンポーネントが選択されると左下に入力コンポーネントの属性を設定するパネルが表示されるので「妥当性検査」タグをクリックします。「値を必須にする」というチェック・ボックスがあるので、これにチェックを入れます。次に入力値の最小長と最大長を設定します。入力できる文字数を6文字に制限するときには最小長と最大長の両方に6を設定します。こうすることで、入力コンポーネントに6文字以外を入力するとエラーが発生します。これらの妥当性検査でエラーになった場合にエラー・メッセージを表示させるために「エラー表示コントロールの追加」チェック・ボックスにチェックを入れます。チェックを入れることで画面上にエラー・メッセージ出力用のテキスト・ボックスが配置され、妥当性検査エラーが発生すると入力コンポーネントに紐付いたエラー・メッセージが出力されます。

モデル・データの利用

logon.jspで入力したユーザー名をwelcome.jspで出力するといった、画面をまたがったデータの扱いにはモデル・データを利用します。モデル・データとはJSFフレームワークに登録されているJavaBeanであり、このJavaBeanはユーザーが自由に作成することができます。JavaBeanはJSFフレームワークに登録するときに有効範囲としてnone、request、session、applicationの4つから選択することが可能です。ここでsessionを選択すると、JavaBeanのインスタンスをセッションが同じHTTPリクエストから参照することが可能となります。従ってJavaBeanにユーザー・アプリケーションが使用するデータをセットすることで、同一セッションの処理ではそのデータを使用することが可能になります。
モデル・データを利用するためには、データを保管するためのJavaBeanを作成します。サンプル・アプリケーションではユーザーIDとパスワードを保管しますのでStringの2つの属性を持つJavaBeanを作成します。JavaBeanを作成したら、ページ・データの［新規作成］-［JavaBean］をクリックしてこのJavaBeanを選択し、他のページでも使用できるように「このJavaBeanを再使用可能にする」チェック・ボックスにチェックを入れます。有効範囲はsessionを選択して終了をクリックします。JavaBeanがページ・データに登録できたら、JavaBeanの2つの属性をドラッグ＆ドロップで対応する入力フィールドにバインディングします。これにより入力フィールドに入力された値がJavaBeanの属性に保管されます。

上に戻る

画面遷移

JSFでは画面遷移はアクション・メソッドの実装とコマンドを実行するコンポーネントの属性で設定されます。ボタンやハイパーリンクなどコマンドを実行するコンポーネントをクリックすると、コンポーネントに関連付けられているアクション・メソッドが実行され返り値として文字列が返ります。この文字列を遷移したい画面を関連付けることでボタンがクリックされることでユーザー実装が実行され特定の画面へ遷移させることが可能になります。
logon.jspの画面で正しいユーザーIDとパスワードを入力してボタンをクリックしたときに、welcome.jsp画面へ遷移するための設定を説明します。WSAD上でlogon.jspのボタンを選択して高速編集のコマンドを選択します。このコマンドはpagecode.Logon.クラスのアクション・メソッドdoButton1Action（メソッドの数字が異なることがあります）を表しています。このメソッドがボタンクリック時に実行され、返り値によって画面の遷移先が決定されます。コマンドの中でユーザーIDとパスワードの値を取得し、適切な値を入力した場合にはsuccessという文字列を返すように実装してください。次に属性のナビゲーションタグをクリックします。ここで登録ボタンをクリックし、ページにプルダウンで表示される遷移先のwelcome.jsp、別名にコマンドの返り値のsuccess、アクションにプルダウンで表示される#{pc_Logon.doButton1Action}を選択します。これによりログオン画面でボタンをクリックしたらウェルカム画面へ遷移します。

エラー・メッセージのローカライゼーション

入力フィールドにおける入力値の妥当性検査でエラーが発生した場合には、エラー・メッセージが表示されます。デフォルトのメッセージは英語ですが、メッセージ表示を編集して日本語のメッセージを表示させることが可能です。JSFではローカライゼーションを実現するためリソース・バンドルをサポートしています。デフォルトのリソース・バンドル・ファイルはjsf-impl.jarのjavax.facesにあるMessages.propertiesファイルです。
ここでは入力コンポーネントの入力フィールドの最大長を超える値を入力したときに表示されるメッセージのローカライゼーションを例に説明します。まず、リソース・バンドル・ファイルを作成します。Message_ja.propertiesという名前のファイルをtestパッケージ作成します。入力コンポーネントの最大長のエラー・メッセージに関連付けられている定数名をJavaDocで調べるとjavax.faces.validator.LengthValidator.MAXIMUMであることが分かります。この定数名をキーワードにしてリソース・バンドル・ファイルに記述します。ここで注意しなければならないことは、日本語の文字列を直接入力すると実行時に文字化けを起こすことです。これを回避するためにnative2asciiのコンバートを行います。「''{0}''文字以下で入力してください」という文字列は「''{0}''\u6587\u5b57\u4ee5\u4e0b\u3067\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044」に変換されます。
リソース・バンドル・ファイルが作成できたらこれをアプリケーション・コンフィグレーション・リソース・ファイルに登録します。これにはmessage-bundleタグを使用します。

この設定を行った後でアプリケーションを実行して、入力フィールドに妥当性検査で設定した値より多くの文字を入力してボタンをクリックすると、定義したエラー・メッセージが表示されます。

上に戻る

レンダラーの変更

最後に、サンプル・アプリケーションとは関係ありませんがJSFのユニークな特徴であるレンダラーについて説明します。すでに説明しましたがJSFのライフ・サイクルでは最後にRender Responseが実行され、各コンポーネントはレンダラーを呼び出してレスポンスを生成します。デフォルトのレンダラーはHTMLを生成しますが、このレンダラーを変更することでさまざまなレスポンスをクライアントへ応答することが可能となります。
JSFの全てのコンポーネントは対応するレンダラーを持っています。コンポーネントのレンダラーの対応はcomponent-familyとrenderer-typeによって行われます。それぞれのコンポーネントのcomponent-familyとrenderer-typeを調べるにはJSF Specificationのrenderkitdocsに記述されているRenderer Summaryを参照してください。
レンダラーはそれぞれのコンポーネントに対応していますので、変更したいコンポーネントの数だけレンダラーを用意します。レンダラーはjavax.faces.render.Rendererクラスを継承することで作成され、encodeBeginメソッドをオーバーライドすることで応答が変更されます。
入力コンポーネントのレンダラーを変更する方法を説明します。まず最初にjavax.faces.render.Rendererクラスを継承したクラスを作成します。ここではtest.MyRendererクラスを作成しました。この中でencodeBeginメソッドをオーバーライドし、適当なタグを応答するようにします。次にこのレンダラーを入力コンポーネントに対応させます。Renderer Summaryを見ると入力コンポーネントのcomponent-familyはjavax.faces.Input、renderer-typeはjavax.faces.Textであることが判ります。このコンポーネントのレンダラーをtest.MyRendererに変更するようにアプリケーション・コンフィグレーション・リソース・ファイルを編集します。

<render-kit>
　<renderer>
　　<component-family>javax.faces.Input</component-family>
　　<renderer-type>javax.faces.Text</renderer-type>
　　<renderer-class>test.MyRenderer</renderer-class>
　</renderer>
</render-kit>

これで入力コンポーネントのレンダラーは変更されました。ブラウザで確認すると、今まで入力コンポーネントが表示されていた場所に、レンダラーが作成した別のタグが表示していることが確認できます。

付属サンプルの実行方法

1. サンプル・アプリケーションの保管
   サンプル・アプリケーションのファイル名はISE_JSF.earです。このファイルをローカルに保存してください。
   
   
2. WSAD5.1.2の起動
   WSAD5.1.2を起動してください。
   
   
3. サンプル・アプリケーションのインポート
   メニューの［ファイル］-［インポート］をクリックします。インポート・ソースの選択画面が表示されるので「EARファイル」を選択して「次へ」をクリックします。インポートするEARファイルとしてISE_JSF.earを選択します。プロジェクト名にISE_JSFが自動的に入力されたことを確認して「終了」をクリックします。
   
   
4. テスト・サーバーの作成
   サンプルを稼働させるためのテスト・サーバーを作成します。「サーバー」パースペクティブを表示してください。サーバーの構成パネルで「サーバーとサーバーの構成」をクリックします。新規サーバーとサーバー構成の作成画面が表示されるので、サーバー名にBaseServerと入力してください。サーバー型にWebSphereバージョン5.1のテスト環境を選択して「終了」をクリックします。
   
   
5. サンプルの実行
   「J2EE」パースペクティブを表示します。プロジェクト・ナビゲーターのツリー表示を展開し「ISE_JSFWeb」-「WebContent」の下にあるlogon.jspを選択します。選択したらマウスの右クリックをしてプルダウン・メニューを表示させ、「サーバーで実行」をクリックします。サーバーの選択画面が表示されるのでBaseServerを選択して「終了」をクリックします。クリックするとBaseServerが起動を開始します。起動状況はコンソールに表示されます。
   
   
6. サンプルの操作
   サンプルの実行を行うとlogon画面が表示されます。ログオン画面にはユーザーIDとパスワードの入力コンポーネントがありますので、
   ユーザーID：isejsf
   パスワード：isejsf
   を入力して「OK」をクリックしてください。ログオン成功の画面に遷移します。確認したら「Logonへ戻る」ボタンをクリックしてログオン画面へ戻ってください。次にパスワードに5桁以下の値を入力してください。バリデーター・エラーが発生し、標準のエラー・メッセージが表示されます。また7桁以上の値を入力すると、エラー・メッセージにカスタマイズした文字列が表示されます。

上に戻る

参考文献

	JSR 127: JavaServer Faces
	WebSphere Update ワークショップ（2004年6月版）JSF

添付資料

	付属サンプル （2.25MB）

上に戻る