JSF (JavaServer Faces) 2.0 の詳細について 日本オラクル Fusion Middleware 製品事業統括本部寺田佳央 (http://yoshio3.com) 1 2011 Oracle Corporation All rights reserved.
以下の事項は 弊社の一般的な製品の方向性に関する概要を説明するものです また 情報提供を唯一の目的とするものであり いかなる契約にも組み込むことはできません 以下の事項は マテリアルやコード 機能を提供することをコミットメント ( 確約 ) するものではないため 購買決定を行う際の判断材料になさらないで下さい オラクル製品に関して記載されている機能の開発 リリースおよび時期については 弊社の裁量により決定されます Oracle は 米国オラクルコーポレーション及びその子会社 関連会社の米国及びその他の国における登録商標です 文中の社名 商品名等は各社の商標または登録商標である場合があります 2 2011 Oracle Corporation All rights reserved.
デモ :JSF サンプルアプリケーションの構成 Web コンテナ クライアント Web アプリケーション Facelets (xhtml) CDI EJB JPA (O/R Mapping) DB 3 2011 Oracle Corporation All rights reserved.
JSF 2.0 (JPA+EJB+CDI+JSF+Ajax) デモ YouTube : http://youtu.be/qkopawr0yqy 4 2011 Oracle Corporation All rights reserved.
JSF : コンポーネント ベース開発 5 2011 Oracle Corporation All rights reserved.
JSF フレームワークと開発の概要 Web コンテナ クライアント Web アプリケーション プレゼンテーション アプリケーションロジック コンバート ( 変換 ) バリデーション ( 検証 ) ナビゲーション ( 画面遷移 ) ビジネスロジック DB JavaServer Faces Web サービス 6 2011 Oracle Corporation All rights reserved.
JSF における MVC HTTP リクエスト HTTP レスポンス コントローラ (Faces Servlet) 操作 リダイレクト 生成 管理 モデル ( マネージド Bean) ビュー (XHTML) アクセス 7 2011 Oracle Corporation All rights reserved.
JSF の内部アーキテクチャ ブラウザ HTML JavaScript CSS HTTP リクエスト HTTP レスポンス Faces Servlet ( コントローラ ) faces-config.xml ( 省略可能 ) レンダラ XUL JSP XHTML コンポーネント コンポーネント マネージド Bean コンバータ バリデータ 8 2011 Oracle Corporation All rights reserved.
JSF 開発者の役割 ( 役割毎に疎で開発可能 ) Web ページ作成者 ( デザイナー ) アプリケーション開発者 コンポーネント開発者 BackEnd 処理 DB 9 2011 Oracle Corporation All rights reserved.
Web ページ作成者 ( プレゼンテーション ) Web ページ作成者 ( デザイナー ) アプリケーション開発者 コンポーネント開発者 BackEnd 処理 DB 10 2011 Oracle Corporation All rights reserved.
Web ページの基本 テキストフィールド ラジオボタン コンボボックス テキストフィールド 11 2011 Oracle Corporation All rights reserved. ボタン
HTML と対応する JSF タグ テキストフィールド <h:inputtext> タグ HTML タグ <INPUT TYPE= TEXT value= > JSF タグ <h:inputtext id="username" value=""/> ラジオボタン <h:selectoneradio> タグ HTML タグ <input type= radio name= sex value= 1 > 男性 <input type= radio name= sex value= 2 > 女性 JSF タグ <h:selectoneradio id= sex value="sex"> <f:selectitem itemvalue="1" itemlabel=" 男性 " /> <f:selectitem itemvalue="2" itemlabel=" 女性 " /> </h:selectoneradio> 12 2011 Oracle Corporation All rights reserved.
HTML と対応する JSF タグ コンボボックス <h:selectonemenu> タグ HTML タグ <select size="1"> <option value= 1"> 北海道 </option> <option value= 2"> 青森 </option> <option value= 3"> 岩手 </option> </select> JSF タグ <h:selectonemenu> <f:selectitem itemvalue="1" itemlabel=" 北海道 " /> <f:selectitem itemvalue="2" itemlabel=" 青森 " /> <f:selectitem itemvalue="3" itemlabel=" 岩手 " /> </h:selectonemenu> ボタン <h:commandbutton> タグ HTML タグ JSF タグ <input type="submit" value=" 確認画面へ進む " /> <h:commandbutton value=" 確認画面へ進む " /> 13 2011 Oracle Corporation All rights reserved.
標準仕様で用意されている JSF タグ http://javaserverfaces.java.net/nonav/docs/2.0/pdldocs/facelets/ 14 2011 Oracle Corporation All rights reserved.
HTML 4.0 & DHTML 属性利用可 accesskey hreflang lang style readonly border disabled onkeyup onfocus type onblur target title onmouseout rel onchange onselect styleclass alt dir onclick ondblclick onfocus onsubmit accept rev onkeypress onload size rows onmousedown coords onmouseup onunload maxlength shape charset tabindex width acceptcharset onreset onkeydown onmousemove onmouseover 15 2011 Oracle Corporation All rights reserved.
スタイルシートの適用 <HTML> <h:head> <h:outputstylesheet" library="css" name="commonpage.css /> </h:head> <h:body> ( 省略 ) <h:inputtext class="intext" id="username" value=""/>.intext { width: 300px; border: solid 1px #000099; background-color: #9999ff; } 全外部リソースは /resources ディレクトリ配下に配置 library で指定した css/ よりファイルを取得 16 2011 Oracle Corporation All rights reserved.
JavaScript の読み込み (h:outputscript) <h:head> <h:outputscript library="javascript" name="checkpassword.js"/> </h:head> <h:body> <h:form> ログイン名 : <h:inputtext/> パスワード : <h:inputsecret id="password"/> パスワード ( 確認 ): <h:inputsecret id="passwordconfirm"/> <h:commandbutton type="button" value="submit Form" onclick="checkpassword(this.form)"/> </h:form> </h:body> JSF (Facelets) のコード /resources/javascript/checkpassword.js function checkpassword(form) { var password = form[form.id + ":password"].value; var passwordconfirm = form[form.id + ":passwordconfirm"].value; if (password == passwordconfirm) form.submit(); else alert( パスワードと確認用パスワードの内容が違います ); } JavaScript のコード 17 2011 Oracle Corporation All rights reserved.
表示メッセージの国際化対応 <h:outputtext value="#{msgs.username1}"/> 表示用の文字列をプロパティより取得対応ロケールに応じた適切な文字列を取得 ロケール :ja_jp ロケール :en_us 18 2011 Oracle Corporation All rights reserved.
properties ファイルの作成と利用方法 <h:outputtext value="#{msgs.username1}"/> <faces-config <application> <resource-bundle> <base-name> jp.co.oracle.msgs.msgproperties </base-name> <var>msgs</var> </resource-bundle> </application> </faces-config> faces-config.xml /WEB-INF/classes 配下に作成 username1=name username1= 名前 _en_us.properties _ja_jp.properties 19 2011 Oracle Corporation All rights reserved.
20 2011 Oracle Corporation All rights reserved. 1 ヘッダ部作成 2 左ペイン作成 4 フッダ部作成 3 右ペイン作成共通部分の作成 5 テンプレート作成テンプレートの作成コンテンツ各種ページの作成コンテンツコンテンツコンテンツコンテンツコンテンツご参考 : http://yoshio3.com/2011/01/14/jsf20-new-with-facelets-template/ 強力なテンプレート機能
デザイナーと開発者の共同作業が可能に (jsfc= ) 今までの開発スタイル JSF 2.0 の開発スタイル デザイナー (HTML) コード変換が必要 プログラマー (JSP) (XHTML) デザイナープログラマー 同一ファイルを参照編集可能 デザイナーはテキスト & ブラウザで確認 プログラマーは JSP&Web コンテナで確認 プログラム後のデザイン修正は困難 デザイナーはテキスト & ブラウザで確認 プログラマーは XHTML に要素を挿入 同一ファイルの為デザイン修正も容易 21 2011 Oracle Corporation All rights reserved.
XHTML に対する JSF 要素の埋め込み (jsfc= ) <BODY> <FORM> <input type="submit" value="ok"/> </FORM> </BODY> デザイナー <BODY jsfc="h:body > <FORM jsfc="h:form > <input type= submit value="ok jsfc="h:commandbutton class="button1" action="#{action.button1action()} /> </FORM> </BODY> <h:body>, <h:form> 等 JSF タグと同一タグを指定 ブラウザは理解できない要素を無視するためブラウザで直接確認可能 22 2011 Oracle Corporation All rights reserved. プログラマー
JSF 利用者の役割 Web ページ作成者 ( デザイナー ) アプリケーション開発者 コンポーネント開発者 BackEnd 処理 DB 23 2011 Oracle Corporation All rights reserved.
JSF のリクエスト処理のライフサイクル View の復元 リクエスト値の適用 入力値の検証 レスポンスのレンダリング App ロジックの呼び出し モデル値の更新 24 2011 Oracle Corporation All rights reserved.
JSF のリクエスト処理のライフサイクル View の復元 リクエスト値の適用 入力値の検証 レスポンスのレンダリング App ロジックの呼び出し モデル値の更新 25 2011 Oracle Corporation All rights reserved.
View の復元 (UI コンポーネント ツリーの作成 復元 ) <HTML> <h:head> <title> タイトル </title> </h:head> <h:body> <h:form> <h:inputtext/> <h:commandbutton/> </h:form> </h:body> </HTML> デコード XHTML (Facelets) UIComponent ツリー 26 2011 Oracle Corporation All rights reserved.
JSF のリクエスト処理のライフサイクル View の復元 リクエスト値の適用 入力値の検証 レスポンスのレンダリング App ロジックの呼び出し モデル値の更新 27 2011 Oracle Corporation All rights reserved.
リクエスト値の適用 <h:inputtext value= #{somedata} /> コンポーネントツリー UIVewRoot# processdecodes() リクエスト値の適用 <HtmlInputText disabled="false" id="username" immediate="false" inview="true" localvalueset="true" maxlength="-2147483648" readonly="false" rendered="true" required="false" size="-2147483648" styleclass="intext" transient="false" valid="false" value="hogehoge /> 28 2011 Oracle Corporation All rights reserved.
JSF のリクエスト処理のライフサイクル View の復元 リクエスト値の適用 入力値の検証 レスポンスのレンダリング App ロジックの呼び出し モデル値の更新 29 2011 Oracle Corporation All rights reserved.
バリデーション (Bean Validation) <h:inputtext class="intext" id="e-mail" value="#{person.mail}"/> <h:message for="e-mail" style="color:red"/> public class Customer implements Serializable { ( 省略 ) @NotNull @Size(max = 40) @Pattern(regexp = "[a-za-z0-9]+@[a-za-z0-9]+.[a-za-z0-9]+", message = " メールアドレスの書式が不正です ") private String email; } 30 2011 Oracle Corporation All rights reserved.
バリデーション ( JSF カスタムバリデータ ) @FacesValidator("jp.co.oracle.validate.EmailValidator") public class EmailValidator implements Validator{ private static final String EMAIL_PATTERN = "[a-za-z0-9]+@[a-za-z0-9]+.[a-za-z0-9]+"; private Pattern pattern; private Matcher matcher; public EmailValidator(){ pattern = Pattern.compile(EMAIL_PATTERN); } 31 2011 Oracle Corporation All rights reserved.
バリデーション ( JSF カスタムバリデータ ) 続き @Override public void validate(facescontext context, UIComponent component, Object value) throws ValidatorException { matcher = pattern.matcher(value.tostring()); if(!matcher.matches()){ FacesMessage msg = new FacesMessage("E-mail validation failed.", "Invalid E-mail format."); msg.setseverity(facesmessage.severity_error); throw new ValidatorException(msg); }}} 32 2011 Oracle Corporation All rights reserved.
コンバージョン 入力データの変換 <h:inputtext id="cal" value="#{person.date}" required= true requiredmessage= 日付を入力してください convertermessage=" 日付の書式が違います 例 :12/26/2011"> <f:convertdatetime pattern="mm/dd/yyyy /> </h:inputtext> <h:message for="cal" style="color:red"/> public class Person{ Date date; } 33 2011 Oracle Corporation All rights reserved.
JSF のリクエスト処理のライフサイクル View の復元 リクエスト値の適用 入力値の検証 レスポンスのレンダリング App ロジックの呼び出し モデル値の更新 34 2011 Oracle Corporation All rights reserved.
Value バインディング ( 通常はコチラを使用 ) 35 2011 Oracle Corporation All rights reserved. @ManagedBean(name= person ) //@Named(value= person ) public class Person implements Serializable { private String name; private String addressline1; private String addressline2; private String city; private String phone; private String email; } // 別途 Setter,Getter メソッドを用意 <h:inputtext class="intext" id="username" value="#{person.name}"/> <h:inputtext class="intext" id="e-mail" value="#{person.email}"/> XHTML 側でバックエンド値にバインド
Bean を ManagedBean と JPA Entity で共用可能 @ManagedBean(name= person ) @Entity @Table(name = "PERSON") public class Person implements Serializable { @Id @GeneratedValue @Column(name = "PERSON_ID") private Integer personid; private String name; private String addressline1; private String addressline2; private String city; private String phone; private String email; } // 別途 Setter,Getter メソッドを用意 DB PERSON テーブル 36 2011 Oracle Corporation All rights reserved.
Component バインディング ( ニーズに応じて使用 ) @ManagedBean(name= person ) //@Named(value= person ) public class Person implements Serializable { private HtmlInputText name; private HtmlInputText addressline1; private HtmlInputText addressline2; private HtmlInputText city; private HtmlInputText phone; private HtmlInputText email; } // 別途 Setter,Getter メソッドを用意 <h:inputtext class="intext" id="username binding="#{person.name}"/> <h:inputtext class="intext" id="e-mail" binding="#{person.email}"/> Component バインディングは モデル値の更新 フェーズより前から利用可能 37 2011 Oracle Corporation All rights reserved.
JSF のリクエスト処理のライフサイクル View の復元 リクエスト値の適用 入力値の検証 レスポンスのレンダリング App ロジックの呼び出し モデル値の更新 38 2011 Oracle Corporation All rights reserved.
実際の処理の実装 action でボタンが押下された際のメソッドにバインディング ManagedBean もしくは CDI で実装 @ManagedBean(name = "customermanage") //@Named(value = customermanage ) @RequestScoped public class CustomerManage { <h:commandbutton value="db へ登録 action="#{customermanage.saveperson} /> XHTML 側でバックエンド処理にバインド 39 2011 Oracle Corporation All rights reserved. } public String saveperson() { // バックエンド処理の実装 return "success"; }
画面遷移 ( ナビゲーション ) <navigation-rule> <from-view-id>page1.xhtml</from-view-id> <navigation-case> <from-outcome>next</from-outcome> <to-view-id>/page2.xhtml</to-view-id> </navigation-case> </navigation-rule> ページ 1 ページ 2 ページ 3 JSF 1.2 までのナビゲーションの設定 ページ 4 40 2011 Oracle Corporation All rights reserved.
画面遷移 (JSF 2.0 暗黙のナビゲーション ) <h:commandbutton action="page2" value="submit" /> ボタンが押下された場合 page2.xhtml へ画面遷移 <h:commandbutton action="page2.xhtml" value="submit" /> <h:commandbutton action= page2.jsf value= Submit /> 拡張子付きのファイル名で指定可能 41 2011 Oracle Corporation All rights reserved.
画面遷移 (JSF 2.0 暗黙のナビゲーション ) <h:commandbutton action= #{customermanage.saveperson}" value="submit" /> @ManagedBean(name ="customermanage") @RequestScoped public class CustomerManage { } public String saveperson() { // 何らかの処理 return page2 ; // page2.xhtml へ遷移 } メソッドの戻り値 (String) が画面遷移先のページを示す 42 2011 Oracle Corporation All rights reserved.
リダイレクト (JSF 2.0 暗黙のナビゲーション ) <h:commandbutton action="page2?faces-redirect=true" value="submit" /> @ManagedBean(name ="customermanage") @RequestScoped public class CustomerManage { } public String saveperson() { // 何らかの処理 return page2.xhtml?faces-redirect=true ; }?faces-redirect=true を指定しリダイレクト操作 43 2011 Oracle Corporation All rights reserved.
ManagedBean or CDI 似たような事はできますが別物それぞれ できる事が違います!! 開発者が用途によって選択 44 2011 Oracle Corporation All rights reserved.
オブジェクトとして一括データ取得 (ManagedBean のみ ) @ManagedBean(name= person ) public class Person implements Serializable { private String name; private String addressline1; private String addressline2; private String city; private String phone; private String email; } // 別途 Setter,Getter メソッドを用意 @ManagedBean(name ="customermanage") @RequestScoped public class CustomerManage { @ManagedProperty( value = "#{person}") private Person person; } public void setperson(person person) { this.person = person; }//ManagedProperty には Setter が必須 public String saveperson() { myejb.persist(person); //DB に保存 return "success"; } 45 2011 Oracle Corporation All rights reserved.
JSF のリクエスト処理のライフサイクル View の復元 リクエスト値の適用 入力値の検証 レスポンスのレンダリング App ロジックの呼び出し モデル値の更新 46 2011 Oracle Corporation All rights reserved.
レスポンスのレンダリング HTML HTML HTML エンコード UIComponent ツリーからレンダリングコンポーネントの状態保存 47 2011 Oracle Corporation All rights reserved.
JSF 利用者の役割 Web ページ作成者 ( デザイナー ) アプリケーション開発者 コンポーネント開発者 BackEnd 処理 DB 48 2011 Oracle Corporation All rights reserved.
49 2011 Oracle Corporation All rights reserved. 別の機会で
50 2011 Oracle Corporation All rights reserved. 参考資料
JSF 2.0 に対応した書籍 ( 英語 ) 51 2011 Oracle Corporation All rights reserved.
52 2011 Oracle Corporation All rights reserved.