Java EE 7 アプリケーション設計ガイド - JSF(JavaServer Faces) 2.2 入門編

Size: px

Start display at page:

Download "Java EE 7 アプリケーション設計ガイド - JSF(JavaServer Faces) 2.2 入門編"

しげじろうむこやま
4 years ago
Views:

1 Java EE 7 アプリケーション設計ガイド - JSF(JavaServer Faces) 2.2 入門編日本アイビーエムシステムズエンジニアリング株式会社 1

2 Disclaimer この資料は日本アイビーエム株式会社ならびに日本アイビーエムシステムズエンジニアリング株式会社の正式なレビューを受けておりません当資料は資料内で説明されている製品の仕様を保証するものではありません資料の内容には正確を期するよう注意しておりますがこの資料の内容は 2015 年 7 月現在の情報であり製品の新しいリリース PTF などによって動作仕様が変わる可能性があるのでご注意下さい今後国内で提供されるリリース情報は対応する発表レターなどでご確認ください IBM IBM ロゴおよび ibm.com は世界の多くの国で登録された International Business Machines Corporation の商標です他の製品名およびサービス名等はそれぞれ IBM または各社の商標である場合があります現時点での IBM の商標リストについてはをご覧ください当資料をコピー等で複製することは日本アイビーエム株式会社ならびに日本アイビーエムシステムズエンジニアリング株式会社の承諾なしではできません当資料に記載された製品名または会社名はそれぞれの各社の商標または登録商標です Java およびすべての Java 関連の商標およびロゴは Oracle やその関連会社の米国およびその他の国における商標または登録商標です Microsoft, Windows および Windows ロゴは Microsoft Corporation の米国およびその他の国における商標です Linux は Linus Torvalds の米国およびその他の国における登録商標です UNIX は The Open Group の米国およびその他の国における登録商標です 2

3 目次 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

4 1. はじめに 4

5 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

6 WebSphere Application Server のサポート状況 (2015 年 7 月現在 ) Liberty Profile WAS V で JSF2.2 対応 Full Profile( 従来の WebSphere Application Server) JSF2.0 対応 6

7 2. JSF とは 7

8 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

9 JSF アプリケーションの構成 (1) JSF は MVC アーキテクチャーのフレームワークであるそのため JSF アプリケーションでは次の 3 つの要素が中心的な役割を果たすこれらのうち FacesServlet は JSF のフレームワークが提供するものであり開発者は残る 2 つ ( Facelets と管理 Bean) をアプリケーション毎に作成する HTTP リクエスト HTTP レスポンス Controller (Faces Servlet) 操作リダイレクト View (Facelets) 生成管理アクセス Model ( 管理 Bean) 9

10 JSF アプリケーションの構成 (2) 1. FacesServlet(Controller) Web ブラウザとのやり取りの窓口の役割を果たすリクエストを受け取ると適切なコンポーネントに処理を受け渡し処理結果を受けて新しいビューを生成しブラウザに返信する 2. Facelets(View) 詳細は 4 章で解説する画面の構成要素を記述する XHTML 内に JSF のタグを記述するとそのタグに対応したコンポーネントが必要な処理を行う処理の結果はコンポーネントツリーとして構成されレンダリングされたものがレスポンスとなる 3. 管理 Bean(Model) 詳細は 4 章で解説する画面遷移やビジネスロジックの呼び出し入出力値の管理などを行うコンポーネント JSF の管理 Bean と CDI の管理 Bean が使える当資料では CDI の管理 Bean を使用する 10

11 3. 作成するアプリケーションの概要 11

12 画面と動き当資料は以下のように画面が遷移するアプリケーションを使って JSF の基本的な機能を説明するアプリケーションの動き : ブラウザから開始ページにアクセスして入力欄に数字を入力後計算ボタンをクリックすると計算結果が履歴に表示される再度数字を入力して計算をクリックすると履歴に計算結果が表示される計算をクリック数字を入力計算結果が表示される 12

13 構成要素当アプリケーションでは以下のファイルを用意する次ページ以降にファイルの全ソースを示すが解説は次章以降で行う 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.

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.

14 Facelets adding.xhtml のソース <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" " -transitional.dtd"> <html xmlns=" xmlns:h=" xmlns:f=" <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.

15 管理 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; public class AddingBean implements Serializable { private Integer addend; private Integer 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.

java package javaee7jsf22; import java.io.

16 管理 Bean RecordList.java のソース java クラス Record.java のソース RecordList.java package javaee7jsf22; import java.util.arraylist; import javax.enterprise.context.requestscoped; import 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

17 4. JSF の機能説明 17

18 管理 Bean(1) 管理 BeanはMVCモデルのModelの役割を担っている画面レイアウトとバックエンドでのビジネスロジックを明確に分離結合する仕組みを提供する 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 を参照することができる

19 は管理 Bean で付けた名前は EL 名という EL 名をもつ管理 Bean だけが JSF ページからアクセスできるようになる Facelets(XHTML) に EL( Expression Language) 式を記述することで CDI の管理 Bean の後に名前を指定しない場合にはクラス名の最初の文字を小文字にしたデフォルト名が使用される AddingBean.java 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> の後に名前を記述すると別の名前を指定することができる 19

管理 Bean(3) スコープアノテーション :@RequestScoped, @SessionScoped CDI 管理 Bean では new でオブジェクトを生成することはできないその代わりに管理 Bean にスコープアノテーションを付けることで Bean の生成と廃棄のタイミングを指定するオブジェクトの生成と廃棄は CDI コンテナが自動的に行う当アプリケーションでは

20 管理 Bean(3) CDI 管理 Bean では new でオブジェクトを生成することはできないその代わりに管理 Bean にスコープアノテーションを付けることで Bean の生成と廃棄のタイミングを指定するオブジェクトの生成と廃棄は CDI コンテナが自動的に行うセッションの間有効を付けた管理 Bean(AddingBean.java) はブラウザで送信ボタンを押す動作 ( リクエスト ) が発生したときにオブジェクトが自動生成されるそして受信したデータを処理しブラウザに返信する動作 ( レスポンス ) が完了すると廃棄される public class RecordList extends ArrayList<Record> CDI とスコープの詳細については Java EE7 アプリケーション設計ガイド CDI1.2 編を参照 20

管理 Bean(4) @Inject @Injectは変数にオブジェクトを注入するというCDIのアノテーションである当アプリケーションではRecordList 型オブジェクトを変数 historyに注入している AddingBean.

21 変数にオブジェクトを注入するというCDIのアノテーションである当アプリケーションではRecordList 型オブジェクトを変数 historyに注入している public class AddingBean implements Serializable 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 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

22 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" " -transitional.dtd"> <html xmlns=" xmlns:h=" xmlns:f=" <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

xhtml <h:inputtext required="true" id="augend" value="#{addingbean.augend}"> <f:converter converterid="javax.faces.

23 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

24 タグライブラリの定義 Facelets タグを使用するためにはネームスペースの宣言が必要になる当アプリケーションでは HTML タグ ( 接頭辞 h:) と Core タグ ( 接頭辞 f:) を使用している JSF2.2 から HTML タグと Core タグのネームスペースが以下のように変更されているただし以下の変更前のネームスペースも使用できる eclipse のバージョンによっては新しいネームスペースを定義してもコード補完機能のポップアップが表示されない名称接頭辞用途ネームスペースの宣言 HTML タグ h: HTML タグに対応する Facelets タグ xmlns:h=" Coreタグ f: イベント処理やデータ変換などの HTMLタグを機能的に補完するタグ xmlns:f=" adding.xhtml <html xmlns=" xmlns:h=" xmlns:f=" 名称 HTML タグ Cire タグ JSF2.2 ネームスペースの宣言

HTML タグ :<h:inputtext> h:inputtext タグは一行のテキストボックスを作成する HTMLタグの <input type="text"> にレンダリングされるブラウザに入力された値は value 属性で指定しているAddingBeanのaugend addendに渡される adding.

25 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="record" border="1"> <h:column id="column1"> <f:facet name="header"> <h:outputtext value=" 履歴 "></h:outputtext> </f:facet> <h:outputformat value="{0} + {1} =

26 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> private RecordList history; 26

HTML タグ :<h:outputformat> h:outputformat タグは文字列にデータを埋め込んで表示する出力するテキストはvalue 属性に指定する value 属性には {0}{1}{2} のようなパラメータを指定できるパラメータはf:paramタグで指定し記した順番にしたがって {0}{1} に埋め込まれる当アプリケーションのadding.

java public class Record implements Serializable { protected Integer addend; protected Integer augend; protected Integer result; <h:datatable id="history" value="${addingbean.

27 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

xhtml <h:commandbutton value=" 計算 " action="#{addingbean.add}" /> AddingBean.

28 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

29 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 タグなどで画面上に出力する変換に失敗した場合は

xhtml 入力されたデータを Integer 型に変換するコンバーターを指定しているコンバートされたデータは Integer 型の addingbean の augend addend プロパティに保存される <h:form> <h:inputtext required="true" id="augend" value="#{addingbean.

30 コンバーター :<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 など整数値について範囲を指定している

augend}"> <f:converter converterid="javax.faces.

31 バリデーター :<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.

32 エラーメッセージ : <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

33 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

34 JSF のライフサイクル (1) JSF がリクエストを受信したあとにスレッド上で実行される一連の処理を JSF のライフサイクルという JSF のライフサイクルは以下の 6 段階にあらわせる具体的には受信したデータを管理 Bean にバインドし指定されたメソッドなどを実行し最後にレンダリングして JSF ページを送信するまでの過程をいうリクエストビュー復元入力値の適用入力値の変換と検証レスポンス 6 レスポンスのレンダリング 5 アプリケーションの呼び出し 4 モデル値の更新 34

35 JSF のライフサイクル (2) 以下に前スライドのライフサイクルの各フェーズについて記載するビュー復元リクエストに対応するコンポーネントツリーを復元する新規リクエストの場合新規にコンポーネントツリーを作成し 6 に移る入力値適用コンポーネントツリーの中にあるコンポーネントオブジェクトに受信した入力値をセットする変換と検証コンポーネントのうち型変換が必要な場合は変換を実行する入力値に範囲や文字パターンなどの条件が付けられている場合には適正か検証するエラーが検出された場合には 6 に移るモデル値の更新コンポーネントの値を管理 Bean のフィールドに EL 式にしたがってセットするアプリケーションの呼び出しビジネスロジックなどを実行するレスポンスのレンダリング JSF ページをレンダリングしてブラウザに返信するレンダラーによりコンポーネントツリーから HTML を生成して返す 35

36 JSF のライフサイクル (3) 以下は当アプリケーションにアクセスした際の一連の流れを表しているユーザーインターフェース 1. ブラウザからアクセス 2. ブラウザに JSF ページが表示される ( このアプリケーションでは入力欄と履歴の初期値は空にしている ) 3. 表示されたブラウザに数字を入力し送信ボタンをクリックする 4. 計算結果がブラウザに表示される JSF のライフサイクルビューの復元新規リクエストのためコンポーネントツリーを生成するレスポンスのレンダリングコンポーネントツリーから管理 Beanの初期値でHTMLを生成しブラウザに返信するビュー復元リクエストに対応するコンポーネントツリーを復元する入力値適用受信した入力値をコンポーネントオブジェクトにセットする変換と検証コンバーターとバリデーターを実行するモデル値の更新入力値を管理 Bean のフィールドにセットするアプリケーションの呼び出し計算メソッドを実行するレスポンスのレンダリングコンポーネントツリーから計算結果を含む HTML を生成して返信する 36

37 5. 開発の仕方 37

38 開発の流れ 1. EclipseとWDTの導入 2. JSF Projectの作り方 Web プロジェクトを作成し JSF のファセットを有効にする 3. XHTMLの新規作成 4. XHTMLの編集 Pallete からドラッグ & ドロップで開発を行う 38

39 1. EclipseとWDTの導入以下のサイトの手順を参考にEclipseとWDTを導入する 39

40 2.JSF Project の作り方 - Web プロジェクト (1) 1. ツールバーの File を開いて New - Dynamic Web Project を開く 2. Project Name を入力して Next をクリックする 40

41 2.JSF Project の作り方 - Web プロジェクト (2) 4. Context root を入力し Generate web.xml deployment descriptor にチェックを入れて Finish をクリックする 3. Next をクリックする 41

42 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

43 2.JSF Project の作り方 - Project Facets の設定 (2) web.xml に登録される FacesServlet の情報 8. OK をクリックする 7. OK をクリックする 43

44 3.XHTML の新規作成 - New web page(1) 1. File - New - Web Page を開く 2. HTML を選択する File Name を入力して options をクリックする 44

45 3.XHTML の新規作成 - New web page(2) 3. Markup Language:XHTML Document Type:XHTML 1.0 Traditional を選択して Close をクリックする 4. Finish をクリックする 45

46 4.XHTML の編集 - Open with web page editor 2. 必要な JSF タグを Pallete からドラッグ & ドロップで開発が行える 1.xhtml ファイルを右クリックして Open eith を選択し Web Page Editor をクリックする 46

47 6. まとめ 47

48 まとめ当ガイドでは Java EE 7 アプリケーション設計ガイドとして JSF 2.2 の入門編について解説を行いました JSF 2.2 JSFはJava EE 標準仕様のWebアプリケーションフレームワーク画面表示技術に Facelets(XHTML) を採用画面に配置したコンポーネントに処理をひも付けることが可能 EL 式によりXHTMLと管理 Beanをバインド 48

49 参考文献 JSR 344: JavaServerTM Faces Java EE 7 Specification APIs The Java EE 7 Tutorial IBM Knowledge Center - WebSphere Application Server Liberty Core Liberty Profile Beta IBM Knowledge Center - WebSphere Application Server Liberty Profile Beta 49

Make the Future Java FY13 PPT Template

Make the Future Java FY13 PPT Template Yoshio Terada Java Evangelist http://yoshio3.com, Twitter : @yoshioterada 1 以下の事項は弊社の一般的な製品の方向性に関する概要を説明するものですまた情報提供を唯一の目的とするものでありいかなる契約にも組み込むことはできません以下の事項はマテリアルやコード機能を提供することをコミットメント ( 確約 ) するものではないため