エンタープライズアプリケーション II 第10回 / 2006年7月23日 JSFのライフサイクル エンタープライズアプリケーション II 第10回 / 2006年7月23日

ここでの目標 UIコンポーネント・ツリー、イベント、JSFのライフサイクルについて一通り理解する。

UIコンポーネント・ツリー

UIコンポーネント・ツリー JSFでは、JSF独自のタグでJSPの画面を構成する。 JSFのアプリケーションの内部では、このタグの階層構造をJavaオブジェクトの階層構造に置き換えたものを管理する。 このJavaオブジェクトの階層構造が「コンポーネント・ツリー」 JSFでは、この「コンポーネント・ツリー」を使って、さまざまな処理を実行する。

guessNumberアプリケーションを構成するタグ <f:view> <h:form id="helloForm"> <h:outputText ...... /> <h:graphicImage …… /> <h:inputText ...... /> <h:commandButton ...... /> <h:message ...... /> </h:form> </f:view>

タグと UIコンポーネント・ツリー (1) <f:view> <h:form id="helloForm"> <h:outputText ...... /> <h:graphicImage …… /> <h:inputText ...... /> <h:commandButton ...... /> <h:message ...... /> </h:form> </f:view>

タグと UIコンポーネント・ツリー (2) UIコンポーネント・ツリーの各コンポーネントとJSPのタグが対応する UIViewRoot --> f:view UIForm --> h:form UIOutputText --> h:outputText UIInputText --> h:inputText UICommandButton --> h:commandButton UIMessage --> h:message

UIコンポーネント・ツリーの 保存場所 (1) サーバ → HttpSession に。 クライアント → 表示される HTMLの hidden タグに。 デフォルトではサーバ側で保存される。 web.xmlで設定できる。

UIコンポーネント・ツリーの 保存場所 (2) web.xmlで設定できる。 <context-param> <param-name> javax.faces.STATE_SAVING_METHOD </param-name> <param-value>client</param-value> </context-param>

JSFのイベント処理

イベント処理とは イベント ＝ アプリケーションで行われる操作 イベント処理とは、ある特定のイベントが起こったときに、何らかの処理を行うこと イベント　＝　アプリケーションで行われる操作 ボタンを押する 入力フィールドにデータを入力する イベント処理とは、ある特定のイベントが起こったときに、何らかの処理を行うこと

イベント処理のしくみ イベント発生元 イベントリスナー イベントが起こるところ ボタン、テキストフィールドなど 発生したイベントを受け取り、イベントに対応する処理を行うところ

JSFでの２種類のイベント処理 Action イベント Value Change イベント ボタンやハイパーリンクが押されたときに発生するイベント Value Change イベント ボタンが押されたとき、対象となるUIコンポーネントが変化していたら発生するイベント

JSFのライフサイクル

JSFのライフサイクル JSFのアプリケーションが、Webブラウザからリクエストを受け取ってからレスポンスを返すまでの処理手順 ライフサイクルには６つのフェーズがある

ライフサイクルの ６つのフェーズ (1) (1) ビューの復元 (2) リクエスト値の適用 (3) 入力値の検証 リクエスト元の画面のUIコンポーネントツリーを復元 (2) リクエスト値の適用 リクエストのときのパラメータ情報をUIコンポーネントツリーにセットする (3) 入力値の検証 設定された値にコンバータとバリデータを適用

ライフサイクルの ６つのフェーズ (2) (4) モデル値の更新 (5) アプリケーションの起動 (6) レスポンスのレンダリング UIコンポーネントの値を Managed Bean のプロパティにセット (5) アプリケーションの起動 Action Method を実行して遷移先を決定 (6) レスポンスのレンダリング 遷移先画面のUIコンポーネントツリーから、ブラウザに返すレスポンスを生成

ライフサイクルの詳細

guessNumberを題材に guessNumberサンプルアプリケーションの動作を確認しながら、ライフサイクルの各フェーズの動きを追ってみよう。

guessNumberを 題材に Webブラウザで0〜10までの数を入力して "Submit" ボタンを押すと WebブラウザからJSFのアプリケーションに対してリクエストが行われる。 その後でレスポンスとして「あたり」か「はずれ」の画面が出力される。 このリクエストからレスポンスにいたるまでのライフサイクルについて見てみよう。

(1) ビューの復元 WebブラウザからのリクエストがあってJSFのアプリケーションが呼ばれた場合、ライフサイクルはこのフェーズからはじまります。 ２つのパターンがある このJSFアプリケーションに対する、最初のリクエストである場合 JSFアプリケーション内でのページ遷移によって、JSFページにアクセスがあった場合

(1) ビューの復元 このJSFアプリケーションに対する、最初のリクエストである場合 空のUIコンポーネント・ツリーを生成 「(6)レスポンスのレンダリング」フェーズに移る

(1) ビューの復元 JSFアプリケーション内でのページ遷移によって、JSFページにアクセスがあった場合 サーバかクライアントからUIコンポーネント・ツリーを復元

(2) リクエスト値の適用 リクエストのパラメータ情報をUIコンポーネント・ツリーに設定する。 guessNumber の場合、h:inputTextタグに入力された “9” が UIInput にセットされる。

(2) リクエスト値の適用 アクションイベントの発生 h:commandButton や h:commandLink が押された場合 「アクションイベント」が発生して アクションイベントが「イベント・キュー」に蓄えられる。 これらのイベントをどのフェーズで処理するか、アプリケーション制作者が調整できる。

(2) リクエスト値の適用 immediate / アクションイベント <h:commandButton immediate=“true” action=“cancel” value=“キャンセル” /> immediate属性の値が true のとき、アクションリスナへの通知とアクションの実行は、このフェーズで行われる。 これ以降のフェーズ (Managed Bean への値の設定など) を実行せずとも処理できるので、キャンセルボタンなどの実現に使われる。

(2) リクエスト値の適用 immediate / アクションイベント immediate属性の値が false のとき、アクションリスナへの通知とアクションの実行は、「(5) アプリケーションの起動」フェーズで行われる。 デフォルト値は false

(2) リクエスト値の適用 immediate/Value Changeイベント <h:inputText immediate=“true” value=“#{bean.quantity}” /> h:inputText などで値が変更された場合 immediate属性の値が true のとき、このフェーズで当該コンポーネントに関する次の処理が行われる。 コンバータ バリデータ Managed Bean のプロパティへの値のセット Value Change リスナの実行

(2) リクエスト値の適用 immediate/Value Changeイベント immediate属性の値が false のとき、Value Change リスナへの通知とリスナの実行は、「(5) アプリケーションの起動」フェーズで行われる。 デフォルト値は false

(3) 入力値の検証 バリデータが設定されているときに実行される。 （必要があれば）まずコンバータを実行 次にバリデータを実行 成功なら → Value Change イベントがイベントキューに蓄えられる 失敗なら → 「(6) レスポンスのレンダリング」フェーズに移る

(3) 入力値の検証 guessNumber では Validator である UserNumberBean#validate メソッドを実行している

(4) モデル値の更新 UIコンポーネント・ツリーの値を Managed Bean のプロパティにセット。 必要があれば、まずコンバータを実行する 失敗なら → 「(6) レスポンスのレンダリング」フェーズに移る Value Binding 式で指定された Managed Bean のプロパティに、UIコンポーネントの値をセットする。

(4) モデル値の更新 guessNumber の場合 h:inputText の Value Binding 式で指定されている userNumber プロパティは Integer 型である。 まずコンバータを実行して、入力データを Integer に変換する。 その後で userNumber プロパティに格納する。

(5) アプリケーションの起動 イベントキューの中身をリスナに通知する。 Action Method を実行する。 次の遷移先を決定する。 アクションイベント Value Change イベント Action Method を実行する。 次の遷移先を決定する。

(5) アプリケーションの起動 guessNumber の場合 <h:commandButton id="submit" action="success" value="Submit" /> action 属性の値と faces-config.xml での設定によって、次の画面遷移先が決まる。

(6) レスポンスのレンダリング これまでのフェーズで、次はどの画面に移り変わるかわかっている。 通常は「(5) アプリケーションの起動」で遷移先が決まる。 これまでのフェーズでエラーが起きているため、元の画面にとどまる場合もある 「(3)入力値の検証」でエラーが起きた。 「(4)モデル値の更新」でエラーが起きた。

(6) レスポンスのレンダリング 遷移先で 遷移先に移り変わる。 UIコンポーネント・ツリーを生成する。 Managed Bean の値をUIコンポーネント・ツリーに設定する。 レスポンスで返す HTML を生成する。 UIコンポーネント・ツリーを保存する。 サーバかクライアントに

(6) レスポンスのレンダリング guessNumber の場合 h:inputText の action 属性の値と faces-config.xml の設定によって、response.jsp に遷移する。 response.jsp では、Managed Bean の response プロパティの値をUIコンポーネントに設定する。 このとき、「あたり」か「はずれ」かをチェックする UIコンポーネント・ツリーから HTML を生成する。