Java EE 7 アプリケーション設計ガイド - JSF(JavaServer Faces) 2.2 入門編 日本アイ ビー エムシステムズ エンジニアリング株式会社 1
Disclaimer この資料は日本アイ ビー エム株式会社ならびに日本アイ ビー エムシステムズ エンジニアリング株式会社の正式なレビューを受けておりません 当資料は 資料内で説明されている製品の仕様を保証するものではありません 資料の内容には正確を期するよう注意しておりますが この資料の内容は 2015 年 7 月現在の情報であり 製品の新しいリリース PTF などによって動作 仕様が変わる可能性があるのでご注意下さい 今後国内で提供されるリリース情報は 対応する発表レターなどでご確認ください IBM IBM ロゴおよび ibm.com は 世界の多くの国で登録された International Business Machines Corporation の商標です 他の製品名およびサービス名等は それぞれ IBM または各社の商標である場合があります 現時点での IBM の商標リストについては www.ibm.com/legal/copytrade.shtml をご覧ください 当資料をコピー等で複製することは 日本アイ ビー エム株式会社ならびに日本アイ ビー エムシステムズ エンジニアリング株式会社の承諾なしではできません 当資料に記載された製品名または会社名はそれぞれの各社の商標または登録商標です Java およびすべての Java 関連の商標およびロゴは Oracle やその関連会社の米国およびその他の国における商標または登録商標です Microsoft, Windows および Windows ロゴは Microsoft Corporation の米国およびその他の国における商標です Linux は Linus Torvalds の米国およびその他の国における登録商標です UNIX は The Open Group の米国およびその他の国における登録商標です 2
目次 1. はじめに 2. JSF とは 3. 作成するアプリケーションの概要 1. 画面と動き 2. 構成要素 3. アプリケーションのソース 4. JSFの機能説明 1. 管理 Bean 2. Facelets 1. EL(Expression Language) 2. タグライブラリ 3. HTMLタグ 4. コンバーター 5. バリデーター 6. Errorメッセージ 3. JSFアプリケーションの動作 4. JSFのライフサイクル 5. 開発の仕方 1. Eclipse Luna と WDT の導入 2. JSF Project の作り方 Web プロジェクト Project Facets の設定 3. XHTML の新規作成 New web page 4. XHTML の編集 Open with web page editor 6. まとめ 3
1. はじめに 4
Bean Validations 1.1 Java EE 7 に含まれる仕様 (JSR 一覧 ) Java EE 7 では 4つの仕様が新規に追加され 3つの仕様がバージョンアップされている 当ガイドでは Java EE7で機能拡張されたJSF 2.2を対象とし その入門編とする CDI Extensions Web Fragments JSF 2.2 JSP 2.3 EL 3.0 JAX-RS 2.0 JAX-WS 2.2 JSON 1.0 WebSocket 1.0 Servlet 3.1 CDI 1.1 Interceptors 1.2 JTA 1.2 Common Annotations 1.1 Concurrency 1.0 Managed Beans 1.0 EJB 3.2 JPA 2.1 JMS 2.0 JCA 1.7 Batch 1.0 5
WebSphere Application Server のサポート状況 (2015 年 7 月現在 ) Liberty Profile WAS V8.5.5.6 で JSF2.2 対応 Full Profile( 従来の WebSphere Application Server) JSF2.0 対応 6
2. JSF とは 7
JSF の概要 JSF とは Java ベースの Web アプリケーションフレームワークである JSF による開発の特徴は Struts や Ruby on Rails などのような HTTP リクエスト ベースでの開発ではなく 画面に配置したコンポーネントに処理をひも付けるコンポーネント ベースの開発になる点である テキストフィールドやボタンなどのコンポーネントの中に実行したいアクションなどを組み込むことができるため コンポーネント駆動型のフレームワークである JSF を利用して Web アプリケーションを構築する際には ブラウザなどに表示されるプレゼンテーションの部分と アプリケーションのロジックを実装する部分をそれぞれ実装する アプリケーションのロジックでは 入力データに対する整合性のチェックや データ変換を行うコンバージョン 画面遷移の仕組み 入力データの変更通知やボタンが押下されたといった ユーザの操作に起因するイベント処理などを JSF を利用して実装する DB 連携やビジネスロジック等は別途 JPA や EJB といった技術と連携して実装する UI コンポーネントの状態は クライアントが新しいページをリクエストした際に保存され リクエストに対するレスポンスが返されるときに復帰される JSF は当初 画面表示技術に JavaServer Pages (JSP) を用いていたが 2.0 以降は Facelets が採用されている Facelets とは Facelets は JSF のために開発された Web テンプレートエンジンである Facelets のテンプレートは主に XHTML で作成される テンプレートを記述する方法としては Facelets 独自のタグを直接埋め込む 8
JSF アプリケーションの構成 (1) JSF は MVC アーキテクチャーのフレームワークである そのため JSF アプリケーションでは次の 3 つの要素が中心的な役割を果たす これらのうち FacesServlet は JSF のフレームワークが提供するものであり 開発者は残る 2 つ ( Facelets と管理 Bean) をアプリケーション毎に作成する HTTP リクエスト HTTP レスポンス Controller (Faces Servlet) 操作 リダイレクト View (Facelets) 生成 管理 アクセス Model ( 管理 Bean) 9
JSF アプリケーションの構成 (2) 1. FacesServlet(Controller) Web ブラウザとのやり取りの窓口の役割を果たす リクエストを受け取ると適切なコンポーネントに処理を受け渡し 処理結果を受けて新しいビューを生成し ブラウザに返信する 2. Facelets(View) 詳細は 4 章で解説する 画面の構成要素を記述する XHTML 内に JSF のタグを記述すると そのタグに対応したコンポーネントが必要な処理を行う 処理の結果はコンポーネント ツリーとして構成され レンダリングされたものがレスポンスとなる 3. 管理 Bean(Model) 詳細は 4 章で解説する 画面遷移やビジネス ロジックの呼び出し 入出力値の管理などを行うコンポーネント JSF の管理 Bean と CDI の管理 Bean が使える 当資料では CDI の管理 Bean を使用する 10
3. 作成するアプリケーションの概要 11
画面と動き 当資料は以下のように画面が遷移するアプリケーションを使って JSF の基本的な機能を説明する アプリケーションの動き : ブラウザから開始ページにアクセスして 入力欄に数字を入力後 計算 ボタンをクリックすると計算結果が 履歴 に表示される 再度数字を入力して 計算 をクリックすると 履歴に計算結果が表示される 計算 をクリック 数字を入力 計算結果が表示される 12
構成要素 当アプリケーションでは以下のファイルを用意する 次ページ以降にファイルの全ソースを示すが 解説は次章以降で行う Facelets(XHTML) adding.xhtml:facelets の HTML タグや Core タグを使ってブラウザ画面の構成要素を記述している EL 式を使って管理 Bean にバインドしている 管理 Bean AddingBean.java: RecordList.java: 計算メソッドを実行するオブジェクト HTTP セッションが有効な間 計算結果の履歴を保持する 個々の計算結果は Record.java に保持する Java クラス Record.java: 個々の計算結果を保持する 13
Facelets adding.xhtml のソース <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1 -transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"> <h:head> <title>javaee7_jsf2.2</title> </h:head> <h:body> <h:messages id="messages" style="color:#ff0000;" /> <h:form> <h:inputtext required="true" id="augend" value= #{addingbean.augend}"> <f:converter converterid="javax.faces.integer" /> <f:validatelongrange minimum="0" maximum="100" /> </h:inputtext> + <h:inputtext required="true" id="addend" value= "#{addingbean.addend}"> <f:converter converterid="javax.faces.integer" /> <f:validatelongrange minimum="0" maximum="100" /> </h:inputtext> <h:commandbutton value=" 計算 " action= "#{addingbean.add}" /> </h:form> <h:datatable id="history" value="${addingbean.history}" var="record" border="1"> <h:column id="column1"> <f:facet name="header"> <h:outputtext value=" 履歴 "></h:outputtext> </f:facet> <h:outputformat value="{0} + {1} = {2}"> <f:param value="${record.augend}" /> <f:param value="${record.addend}" /> <f:param value="${record.result}" /> </h:outputformat> </h:column> </h:datatable> </h:body> </html> 14
管理 Bean AddingBean.java のソース package javaee7jsf22; import java.io.serializable; import java.util.arraylist; import javax.enterprise.context.requestscoped; import javax.enterprise.context.sessionscoped; import javax.inject.inject; import javax.inject.named; @Named @RequestScoped public class AddingBean implements Serializable { private Integer addend; private Integer augend; @Inject private RecordList history; public Object add() { Record record = new Record(); record.augend = augend; record.addend = addend; record.result = augend + addend; history.add(record); } augend = null; addend = null; return null; } public Integer getaddend() { return addend; } public Integer getaugend() { return augend; } //public ArrayList<Record> gethistory() { public RecordList gethistory() { return history; } public void setaddend(integer addend) { this.addend = addend; } public void setaugend(integer augend) { this.augend = augend; } 15
管理 Bean RecordList.java のソース java クラス Record.java のソース RecordList.java package javaee7jsf22; import java.util.arraylist; import javax.enterprise.context.requestscoped; import javax.enterprise.context.sessionscoped; @SessionScoped public class RecordList extends ArrayList<Record> { } Record.java package javaee7jsf22; import java.io.serializable; public class Record implements Serializable { } protected Integer addend; protected Integer augend; protected Integer result; public Integer getaddend() { return addend; } public Integer getaugend() { return augend; } public Integer getresult() { return result; } 16
4. JSF の機能説明 17
管理 Bean(1) 管理 BeanはMVCモデルのModelの役割を担っている 画面レイアウトとバックエンドでのビジネスロジックを明確に分離 結合する仕組みを提供する Javaクラスに @Namedやその他の何らかのアノテーションを付けることで CDIの管理 Beanになる 当サンプルアプリケーションでは以下の 2 つの管理 Bean を使う AddingBean.java: RecordList.java: 計算メソッドを実行するオブジェクト HTTP セッションが有効な間 計算結果の履歴を保持する個々の計算結果は Record.java に保持する 上記管理 Bean で以下の 3 つのことを実現する 管理 Bean のプロパティやメソッドを画面側で表示 / セットする値やボタン押下時にコールされるロジックとして関連付けする AddingBean は画面に入力したデータを受け取る RecordList はセッションをまたがって履歴を保持する AddingBean で計算した結果を RecordList に保管するために 管理 Bean から別の Java クラスから管理 Bean にアクセスする 18
管理 Bean(2) @Named @Named は管理 Bean に任意の名前を付けるアノテーション @Named で付けた名前は EL 名という EL 名をもつ管理 Bean だけが JSF ページからアクセスできるようになる Facelets(XHTML) に EL( Expression Language) 式を記述することで CDI の管理 Bean を参照することができる @Named の後に名前を指定しない場合にはクラス名の最初の文字を小文字にしたデフォルト名が使用される AddingBean.java import javax.inject.named; @Named @RequestScoped adding.xhtml <h:inputtext required="true" id="augend" value= "#{addingbean.augend}"> <f:converter converterid="javax.faces.integer" /> <f:validatelongrange minimum="0" maximum="100" /> </h:inputtext> 任意の名前にしたい場合 @Named の後に名前を記述すると別の名前を指定することができる 例 @Named("OtherName") 19
管理 Bean(3) スコープアノテーション :@RequestScoped, @SessionScoped CDI 管理 Bean では new でオブジェクトを生成することはできない その代わりに 管理 Bean にスコープアノテーションを付けることで Bean の生成と廃棄のタイミングを指定する オブジェクトの生成と廃棄は CDI コンテナが自動的に行う 当アプリケーションでは @RequestScoped と @SessionScoped を使用している @RequestScoped:HTTP リクエストを受けてからレスポンスを返すまでの間有効 @SessionScoped:HTTP セッションの間有効 例えば @RequestScoped を付けた管理 Bean(AddingBean.java) は ブラウザで送信ボタンを押す動作 ( リクエスト ) が発生したときにオブジェクトが自動生成される そして受信したデータを処理し ブラウザに返信する動作 ( レスポンス ) が完了すると廃棄される AddingBean.java RecordList.java @RequestScoped @SessionScoped public class RecordList extends ArrayList<Record> CDI とスコープの詳細については Java EE7 アプリケーション設計ガイド CDI1.2 編 を参照 20
管理 Bean(4) @Inject @Injectは 変数にオブジェクトを注入する というCDIのアノテーションである 当アプリケーションではRecordList 型オブジェクトを変数 historyに注入している AddingBean.java @RequestScoped public class AddingBean implements Serializable { @Inject private RecordList history; public Object add() { Record record = new Record(); record.augend = augend; record.addend = addend; record.result = augend + addend; history.add(record); augend = null; addend = null; return null; } RecordList.java @SessionScoped public class RecordList extends ArrayList<Record> { } 以下のように記述すると CDI 管理 Bean ではなく 単なる java のオブジェクトになるので セッションスコープにならなくなってしまう RecordList history = new RecordList(); CDI の詳細については Java EE7 アプリケーション設計ガイド CDI1.2 編 を参照 21
Facelets Facelets は主に Facelets タグを使って XHTML にウェブ画面を記述する XHTML ファイルには主に以下の項目を記述する Facelets と管理 Bean を結び付ける EL 式 ネームスペースの定義 画面表示に関する記述 :HTML タグ Core タグ コンバーター バリデーターなど 次ページより アプリケーションを使って Facelets に記述する上記の項目の基本的な使い方について説明する HTML タグ adding.xhtml <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1 -transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"> <h:head> <title>javaee7_jsf2.2</title> </h:head> <h:body> ネームスペースの定義 <h:messages id="messages" style="color:#ff0000;" /> <h:form> <h:inputtext required="true" id="augend" value= "#{addingbean.augend}"> <f:converter converterid="javax.faces.integer" EL 式 /> <f:validatelongrange minimum="0" maximum="100" /> </h:inputtext> 22
EL(Expression Language) 以下のアプリケーションの Facelets(XHTML) で使われている #{ } で囲む形式を EL 式 ( Expression Language ) という EL 式を使うことで Facelets と管理 Bean を結びつけることができる 使い方はピリオドをセパレータとし 管理 Bean の名称に続けて関連付けしたいプロパティ名やメソッド名を指定する 以下の例において addingbean.augend は管理 Bean の AddingBean のプロパティ augend を指しており JSF 画面に入力された値は プロパティ augend に入力される このように h:inputtext タグが addingbean のプロパティとバインドしている adding.xhtml <h:inputtext required="true" id="augend" value="#{addingbean.augend}"> <f:converter converterid="javax.faces.integer" /> <f:validatelongrange minimum="0" maximum="100" /> </h:inputtext> EL 式 + <h:inputtext required="true" id="addend" value="#{addingbean.addend}"> <h:commandbutton value=" 計算 " action="#{addingbean.add}" /> AddingBeanにはプロ addingbean.java パティaugendの getter/setterが定義 private Integer augend; されている public Integer getaugend() { return augend; } public void setaugend(integer augend) { this.augend = augend; } 23
タグライブラリの定義 Facelets タグを使用するためにはネームスペースの宣言が必要になる 当アプリケーションでは HTML タグ ( 接頭辞 h:) と Core タグ ( 接頭辞 f:) を使用している JSF2.2 から HTML タグと Core タグのネームスペースが以下のように変更されている ただし 以下の変更前のネームスペースも使用できる eclipse のバージョンによっては新しいネームスペースを定義してもコード補完機能のポップアップが表示されない 名称接頭辞用途ネームスペースの宣言 HTML タグ h: HTML タグに対応する Facelets タグ xmlns:h="http://java.sun.com/jsf/html" Coreタグ f: イベント処理やデータ変換などの HTMLタグを機能的に補完するタグ xmlns:f="http://java.sun.com/jsf/core" adding.xhtml <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"> 名称 HTML タグ Cire タグ JSF2.2 ネームスペースの宣言 http://xmlns.jcp.org/jsf/html http://xmlns.jcp.org/jsf/core 24
HTML タグ :<h:inputtext> h:inputtext タグは 一行のテキストボックスを作成する HTMLタグの <input type="text"> にレンダリングされる ブラウザに入力された値は value 属性で指定しているAddingBeanのaugend addendに渡される adding.xhtml <h:form> <h:inputtext required="true" id="augend" value="#{addingbean.augend}"> <f:converter converterid="javax.faces.integer" /> <f:validatelongrange minimum="0" maximum="100" /> </h:inputtext> + <h:inputtext required="true" id="addend" value="#{addingbean.addend}"> <f:converter converterid="javax.faces.integer" /> <f:validatelongrange minimum="0" maximum="100" /> </h:inputtext> <h:commandbutton value=" 計算 " action="#{addingbean.add}" /> </h:form> AddingBean.java private Integer addend; private Integer augend; 25
HTML タグ :<h:datatable> h:datatable タグはコレクション (List, 配列など ) のデータを表にして表示する HTML の <table> タグに対応している h:column タグは表に列を生成する 当アプリケーションでは value 属性に指定した addingbean.history が出力するリストになる var はリストの中の 1 つの要素を表す変数名を表している レンダリングする際にhistoryリストの先頭から最後まで繰り返し要素が取り出され 表が作成される adding.xhtml <h:datatable id="history" value="${addingbean.history}" var="record" border="1"> <h:column id="column1"> <f:facet name="header"> <h:outputtext value=" 履歴 "></h:outputtext> </f:facet> <h:outputformat value="{0} + {1} = {2}"> <f:param value="${record.augend}" /> <f:param value="${record.addend}" /> <f:param value="${record.result}" /> </h:outputformat> </h:column> </h:datatable> AddingBean.java @Inject private RecordList history; 26
HTML タグ :<h:outputformat> h:outputformat タグは文字列にデータを埋め込んで表示する 出力するテキストはvalue 属性に指定する value 属性には {0}{1}{2} のようなパラメータを指定できる パラメータはf:paramタグで指定し 記した順番にしたがって {0}{1} に埋め込まれる 当アプリケーションのadding.xhtmlはEL 式を使って f:paramのvalue 属性にBeanの変数を指定している adding.xhtml Record.java public class Record implements Serializable { protected Integer addend; protected Integer augend; protected Integer result; <h:datatable id="history" value="${addingbean.history}" var="record" border="1"> <h:column id="column1"> <f:facet name="header"> <h:outputtext value=" 履歴 "></h:outputtext> </f:facet> <h:outputformat value="{0} + {1} = {2}"> <f:param value="${record.augend}" /> <f:param value="${record.addend}" /> <f:param value="${record.result}" /> </h:outputformat> </h:column> </h:datatable> 27
HTML タグ :<h:commandbutton> (1) h:commandbutton タグは コマンドボタンを作成する action 属性にはビジネスロジックを実行する管理 Bean のメソッドを指定する 以下の例では コマンドボタンを押すと action 属性で指定した管理 Bean addingbean のaddメソッドが実行される adding.xhtml <h:commandbutton value=" 計算 " action="#{addingbean.add}" /> AddingBean.java public Object add() { } Record record = new Record(); record.augend = augend; record.addend = addend; record.result = augend + addend; history.add(record); augend = null; addend = null; return null; 28
HTML タグ :<h:commandbutton> (2) 画面遷移 AddingBean の add メソッドの戻り値には null が指定されている 戻り値に null を指定すると同じページが表示される 戻り値に遷移先の XHTML を指定すると画面が遷移する 例 return "nextpage" adding.xhtml <h:commandbutton value=" 計算 " action="#{addingbean.add}" /> AddingBean.java public Object add() { Record record = new Record(); record.augend = augend; record.addend = addend; record.result = augend + addend; history.add(record); augend = null; addend = null; return null; } 29
コンバーター :<f:converter> コンバーターは テキスト入力フィールドと管理 Bean のプロパティ間でデータ変換を行う 例えば テキスト入力フィールドに入力された文字列を Java の Integer や Date 型に変換する また Integer や Date 型のオブジェクトを h:outputtext タグなどで画面上に出力する 変換に失敗した場合は h:messages タグなどを記述しておくと エラーとして通知する adding.xhtml 入力されたデータを Integer 型に変換するコンバーターを指定している コンバートされたデータは Integer 型の addingbean の augend addend プロパティに保存される <h:form> <h:inputtext required="true" id="augend" value="#{addingbean.augend}"> <f:converter converterid="javax.faces.integer" /> <f:validatelongrange minimum="0" maximum="100" /> </h:inputtext> + <h:inputtext required="true" id="addend" value="#{addingbean.addend}"> <f:converter converterid="javax.faces.integer" /> <f:validatelongrange minimum="0" maximum="100" /> </h:inputtext> <h:commandbutton value=" 計算 " action="#{addingbean.add}" /> </h:form> 30
バリデーター :<f:validatelongrange> バリデーターは 入力されたデータが適切に記述されているかを検証する h:messages タグなどを記述しておくと 不適切な箇所があった場合にはエラーとして通知する 当アプリケーションでは f:validatelongrange タグを使用し long など整数値について範囲を指定している ここでは最小値 :0 最大値 :100 に制限している adding.xhtml 入力値の上限は 100 のためエラーになる 何も入力していないためエラーになる <h:form> <h:inputtext required="true" id="augend" value="#{addingbean.augend}"> <f:converter converterid="javax.faces.integer" /> <f:validatelongrange minimum="0" maximum="100" /> </h:inputtext> + <h:inputtext required="true" id="addend" value="#{addingbean.addend}"> <f:converter converterid="javax.faces.integer" /> <f:validatelongrange minimum="0" maximum="100" /> </h:inputtext> <h:commandbutton value=" 計算 " action="#{addingbean.add}" /> </h:form> 31
エラーメッセージ : <h:messages> h:messages タグは全てのコンポーネントからのエラーメッセージを一括して表示するタグ 1 つ指定しておくことで そのページで発生したメッセージを全て表示する 以下の例では コンバーターとバリデーターのエラーが表示されている AddingBean.xhtml <h:messages id="messages" style="color:#ff0000;" /> <f:converter converterid="javax.faces.integer" /> <f:validatelongrange minimum="0" maximum="100" /> <f:converter converterid="javax.faces.integer" /> <f:validatelongrange minimum="0" maximum="100" /> 入力された文字列のコンバートとバリデーションの結果を画面に表示している 変換エラー : 入力されたデータが Integer 型に変換できません バリデーションエラー : 文字が入力されていない 32
JSF アプリケーションの動作 ブラウザから HTTP リクエストをサーバに対して送信すると FacesServlet がリクエストを受信する FacesServlet がリクエストを受信すると XHTML や管理 Bean などの適切なコンテンツに対してリクエストをリダイレクトする Facelets タグで作成したページは JSF 内部でオブジェクトに変換される そして JSF ページをオブジェクトの集合体に変換して保持している これをコンポーネントツリーという JSF はリクエストを受けてから XHTML を読み込んで コンポーネントツリーに変換し JSF 内部で処理を実行した後にレスポンスを返す 次ページに JSF がリクエストを受けてからレスポンスを返すまでの一連の流れを記載する リクエストの制御 コンポーネントツリーと管理 Bean の呼び出しを実行する 入出力の文字列と管理 Bean の間のデータ型の変換を行う HTTP リクエスト FacesServlet XHTML コンバーター HTTP レスポンス レンダリング バリデーター コンポーネントツリーから HTML ファイルを生成する Facelets タグで Web 画面を作成 EL 式を使って管理 Bean とバインドする 管理 Bean 入力値の有効性を検証する ビジネスロジックや画面遷移を実行する データを保持する 33
JSF のライフサイクル (1) JSF がリクエストを受信したあとにスレッド上で実行される一連の処理を JSF のライフサイクルという JSF のライフサイクルは以下の 6 段階にあらわせる 具体的には 受信したデータを管理 Bean にバインドし 指定されたメソッドなどを実行し 最後にレンダリングして JSF ページを送信するまでの過程をいう リクエスト 1 2 3 ビュー復元 入力値の適用 入力値の変換と検証 レスポンス 6 レスポンスのレンダリング 5 アプリケーションの呼び出し 4 モデル値の更新 34
JSF のライフサイクル (2) 以下に前スライドのライフサイクルの各フェーズについて記載する 1 2 3 4 5 6 ビュー復元 リクエストに対応するコンポーネントツリーを復元する 新規リクエストの場合 新規にコンポーネントツリーを作成し 6 に移る 入力値適用 コンポーネントツリーの中にあるコンポーネントオブジェクトに受信した入力値をセットする 変換と検証 コンポーネントのうち 型変換が必要な場合は変換を実行する 入力値に範囲や文字パターンなどの条件が付けられている場合には適正か検証する エラーが検出された場合には 6 に移る モデル値の更新 コンポーネントの値を管理 Bean のフィールドに EL 式にしたがってセットする アプリケーションの呼び出し ビジネスロジックなどを実行する レスポンスのレンダリング JSF ページをレンダリングしてブラウザに返信する レンダラーによりコンポーネントツリーから HTML を生成して返す 35
JSF のライフサイクル (3) 以下は当アプリケーションにアクセスした際の一連の流れを表している ユーザーインターフェース 1. ブラウザからアクセス 2. ブラウザに JSF ページが表示される ( このアプリケーションでは入力欄と履歴の初期値は空にしている ) 3. 表示されたブラウザに数字を入力し 送信ボタンをクリックする 4. 計算結果がブラウザに表示される JSF のライフサイクル 1 2 1 2 3 4 5 6 ビューの復元 新規リクエストのため コンポーネントツリーを生成する レスポンスのレンダリング コンポーネントツリーから管理 Beanの初期値でHTMLを生成し ブラウザに返信する ビュー復元 リクエストに対応するコンポーネントツリーを復元する 入力値適用 受信した入力値をコンポーネントオブジェクトにセットする 変換と検証 コンバーターとバリデーターを実行する モデル値の更新 入力値を管理 Bean のフィールドにセットする アプリケーションの呼び出し 計算メソッドを実行する レスポンスのレンダリング コンポーネントツリーから計算結果を含む HTML を生成して返信する 36
5. 開発の仕方 37
開発の流れ 1. EclipseとWDTの導入 2. JSF Projectの作り方 Web プロジェクトを作成し JSF のファセットを有効にする 3. XHTMLの新規作成 4. XHTMLの編集 Pallete からドラッグ & ドロップで開発を行う 38
1. EclipseとWDTの導入 以下のサイトの手順を参考にEclipseとWDTを導入する http://www.ibm.com/developerworks/jp/websphere/library/was/liberty_intro/1.html 39
2.JSF Project の作り方 - Web プロジェクト (1) 1. ツールバーの File を開いて New - Dynamic Web Project を開く 2. Project Name を入力して Next をクリックする 40
2.JSF Project の作り方 - Web プロジェクト (2) 4. Context root を入力し Generate web.xml deployment descriptor にチェックを入れて Finish をクリックする 3. Next をクリックする 41
2.JSF Project の作り方 - Project Facets の設定 (1) 5. プロジェクトを右クリックして Properties を開く 6. Project Facets を選択して JavaServer Faces と Context and dependency injection(cdi) にチェックを入れる ここで OK すると web.xml が作られ FacesServlet が自動で登録される 自動で登録される内容を確認または修正したい場合は Further configuration available をクリックする 42
2.JSF Project の作り方 - Project Facets の設定 (2) web.xml に登録される FacesServlet の情報 8. OK をクリックする 7. OK をクリックする 43
3.XHTML の新規作成 - New web page(1) 1. File - New - Web Page を開く 2. HTML を選択する File Name を入力して options をクリックする 44
3.XHTML の新規作成 - New web page(2) 3. Markup Language:XHTML Document Type:XHTML 1.0 Traditional を選択して Close をクリックする 4. Finish をクリックする 45
4.XHTML の編集 - Open with web page editor 2. 必要な JSF タグを Pallete からドラッグ & ドロップで開発が行える 1.xhtml ファイルを右クリックして Open eith を選択し Web Page Editor をクリックする 46
6. まとめ 47
まとめ 当ガイドでは Java EE 7 アプリケーション設計ガイドとして JSF 2.2 の入門編について解説を行いました JSF 2.2 JSFはJava EE 標準仕様のWebアプリケーション フレームワーク 画面表示技術に Facelets(XHTML) を採用 画面に配置したコンポーネントに処理をひも付けることが可能 EL 式によりXHTMLと管理 Beanをバインド 48
参考文献 JSR 344: JavaServerTM Faces 2.2 https://jcp.org/en/jsr/detail?id=344 Java EE 7 Specification APIs http://docs.oracle.com/javaee/7/api/ The Java EE 7 Tutorial http://docs.oracle.com/javaee/7/tutorial/index.html IBM Knowledge Center - WebSphere Application Server Liberty Core 8.5.5 http://www-01.ibm.com/support/knowledgecenter/ssd28v/welcome Liberty Profile Beta https://developer.ibm.com/wasdev/ IBM Knowledge Center - WebSphere Application Server Liberty Profile Beta http://www-01.ibm.com/support/knowledgecenter/was_beta_liberty/as_ditamaps/wasbeta_welcome_wlp.html 49