Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
Java EE 7 ではじめる
Webアプリケーション開発
日本オラクル株式会社
オラクルユニバーシテ...
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
Safe Harbor Statement
The following is intended to ...
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
Java EE とは?
4
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
Java Platform, Enterprise Edition
• Java SE をベースにした...
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | 6
Java EE 7
Connector
1.7
JPA 2.1 JTA 1.2 JMS 2.0
M...
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
Java EE 7 の主な標準仕様
標準仕様 開発領域 特徴
JSF 2.2
Webアプリケーション
...
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
JavaServer Facesとは?
• Java EE標準で提供されるWebアプリケーションのため...
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
Webコンテナ
JSFとMVC
HTTPリクエスト
HTTPレスポンス
コントローラー
(Faces ...
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
JSFの構成要素
ブラウザ
HTML
JavaScript
CSS
Faces
Servlet
XUL...
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
FacesServletの役割
• MVCモデルのコントローラーに相
当
– リクエストに応じて、JS...
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
JSFのライフサイクル
ビューの
復元
入力値の
適用
検証処理
イベント
処理
イベント
処理
レス...
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
JSFのライフサイクル
•リクエストに基づいてページのUIComponentツリーを作成(復元)する
...
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
Webコンテナ
JSF&CDIを使用した開発イメージ
HTTPリクエスト
HTTPレスポンス
JSF
...
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
Webアプリケーションを作ってみよう
15
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
Webアプリケーション
これから作成するアプリケーション
index.xhtml
<h3>名前と地域を...
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
プロジェクトを作成する (1)
新規プロジェクト を選択
17
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
プロジェクトを作成する (2)
18
Webアプリケーション
を選択
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
プロジェクトを作成する (3)
[Java EE 7] を選択
[JavaServer Faces] ...
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
NetBeansの編集画面
One Point:
• NetBeansでは作成するプロ
グラムをプロジ...
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
<?xml version='1.0' encoding='UTF-8' ?>
<html xmlns...
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
JSF 標準タグライブラリ
接頭辞 説明 Namespace URI
composite 複合コンポー...
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
JSFページの作成
One Point:
• オプション: で指定するJSF
ページのビュー記述言語は...
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
index.xhtmlを書いてみよう
<?xml version='1.0' encoding='UT...
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
<h:form>
名前:
<h:inputText value="#{helloBean.name}"...
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
One Point: 日本語の入力を処理するには?
• デプロイメント記述子(glassfish-we...
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
その他の JSF タグ
<h:commandButton>
<h:inputText><h:outpu...
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
その他の JSF タグ
JSFタグ HTMLタグ
テキストフィールド
(パスワード)
<h:input...
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | 29
JSF 2.2 での マークアップの改善
<h:form>
名前:
<h:inputText v...
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
JSF での画面遷移
• 暗黙的ナビゲーション
<h:commandButton id="subimt...
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
マネージド Bean の作成
One Point:
• マネージドBean は、CDI Bean
とし...
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
マネージド Bean (CDI) のスコープ
スコープ スコープをあらわす注釈 有効期間
reques...
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
マネージド Bean (CDI)の実装
import javax.enterprise.context...
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
マネージド Bean (CDI) にアクセスする
<?xml version='1.0' encodi...
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
EL 式の使い方
<ui:repeat value="#{helloBean.choice}" var...
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
<h:dataTable value="#{helloBean.country}" var="p" b...
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
<h:dataTable value="#{helloBean.country}" var="p" b...
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
One Point:
テンプレートを使用すると、アプ
リケーションに共通のルック・ア
ンド・フィールを...
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | 39
テンプレートの作成
<?xml version='1.0' encoding='UTF-8' ?...
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | 40
index.xhtml にテンプレートを適用する
<?xml version='1.0' enc...
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
JSFでの検証と変換処理
• JSFライフサイクル・フェーズで呼び出される
• JSFでは標準でバリデ...
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
入力値を検証するには? (1)
• 入力必須のフィールドの検証を行うには …
– UIComponen...
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
入力値を検証するには? (1)
<h:form>
<h:outputText value="名前: "...
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
入力値を検証するには? (2)
• 入力値の値の範囲を検証するには …
– JSFでは標準バリデータ(...
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
入力値を検証するには? (2)
<h:form>
<h:outputText value="名前: "...
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
入力値を変換するには?
• フォームに入力された値は String 型で扱われる
– UICompon...
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
入力値を変換するには?
<h:column>
<f:facet name="header">
<h:o...
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
まとめ
• JSFは、Java EE 標準のWebアプリケーション・フレームワークです
– JSFでの...
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
Safe Harbor Statement
The preceding is intended to ...
Getting Started Java EE from OU
Getting Started Java EE from OU
Upcoming SlideShare
Loading in …5
×

Getting Started Java EE from OU

918 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
918
On SlideShare
0
From Embeds
0
Number of Embeds
48
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • This is a Safe Harbor Front slide, one of two Safe Harbor Statement slides included in this template.

    One of the Safe Harbor slides must be used if your presentation covers material affected by Oracle’s Revenue Recognition Policy

    To learn more about this policy, e-mail: Revrec-americasiebc_us@oracle.com

    For internal communication, Safe Harbor Statements are not required. However, there is an applicable disclaimer (Exhibit E) that should be used, found in the Oracle Revenue Recognition Policy for Future Product Communications. Copy and paste this link into a web browser, to find out more information.

    http://my.oracle.com/site/fin/gfo/GlobalProcesses/cnt452504.pdf

    For all external communications such as press release, roadmaps, PowerPoint presentations, Safe Harbor Statements are required. You can refer to the link mentioned above to find out additional information/disclaimers required depending on your audience.
  • Getting Started Java EE from OU

    1. 1. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | Java EE 7 ではじめる Webアプリケーション開発 日本オラクル株式会社 オラクルユニバーシティ 岡田 大輔 2014年8月1日
    2. 2. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | Safe Harbor Statement The following is intended to outline our general product direction. It is intended for information purposes only, and may not be incorporated into any contract. It is not a commitment to deliver any material, code, or functionality, and should not be relied upon in making purchasing decisions. The development, release, and timing of any features or functionality described for Oracle’s products remains at the sole discretion of Oracle. 3
    3. 3. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | Java EE とは? 4
    4. 4. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | Java Platform, Enterprise Edition • Java SE をベースにした企業システム向けのフレームワーク – オープンなWebシステムの構築を支える機能群の標準仕様 • コミュニティ主導のエンタープライズ・ソフトウェア標準 • コンポーネント仕様とサービスアクセスのための各種APIを規定 – 移植性(Write Once Run Anywhere を担保) – Oracle などのベンダーは、Java EE に準拠した実装としてアプリケーション・サーバー を提供 • Oracle WebLogic Server • GlassFish 5
    5. 5. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | 6 Java EE 7 Connector 1.7 JPA 2.1 JTA 1.2 JMS 2.0 Managed Bean 1.0 EJB 3.2 Common Annotations 1.2 Interceptors 1.2 CDI 1.1 Portable Extensions Servlet 3.1 JSP 2.3 JSF 2.2 JAX-RS 2.0 EL 3.0 BeanValidation1.1 Concurrency Utilities (JSR 236) Batch Application (JSR 352) Java API for JSON (JSR 353) Java API for WebSocket (JSR 356) New Updated Major Release
    6. 6. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | Java EE 7 の主な標準仕様 標準仕様 開発領域 特徴 JSF 2.2 Webアプリケーション • リッチなユーザインタフェースの効率的な開発を実現するWebア プリケーション・フレームワーク Servlet 3.1 • 冗長な設定・コード記述の削減により開発生産性を向上 • 非同期ServletによるAjax対応 EJB 3.2 ビジネスロジック • 冗長な設定・コード記述の削減により開発生産性を向上 • より柔軟な制御機能の追加 JPA 2.1 永続化ロジック • 標準ORマッピング・フレームワーク • Java EE だけでなく Java SE でも使用可能 JAX-RS 2.0 Webサービス • 容易なサービス公開を実現するWebサービス標準仕様 CDI 1.1 全領域 • レイヤ間の疎結合化による柔軟性を向上するDIフレームワーク 標準仕様 7
    7. 7. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | JavaServer Facesとは? • Java EE標準で提供されるWebアプリケーションのためのUIフレームワーク – コンポーネント・ベースでユーザー・インタフェースを作成 • UIの構成要素は「UIコンポーネント」として提供される • イベント駆動型プログラミング – ビュー定義はFacelet (XHTML+JSFタグ)を使用 • テンプレート・エンジン • Ajaxをサポート • … Webアプリケーションを効率良く開発可能に 8
    8. 8. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | Webコンテナ JSFとMVC HTTPリクエスト HTTPレスポンス コントローラー (Faces Servlet) ビュー (Facelet) モデル (マネージドBean) 生成・管理 操作・リダイレクト アクセス 9
    9. 9. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | JSFの構成要素 ブラウザ HTML JavaScript CSS Faces Servlet XUL JSP XHTML コンバータ バリデータ マネージド Bean faces- config.xml (オプション) レンダラ HTTP リクエスト HTTP レスポンス リクエストの制御とマネージ ドBeanの呼び出し レスポンスと生成(デ フォルトではHTML生 成) ページ記述する Faceletの使用を推奨 入出力の文字列とマ ネージドBeanのデータ型 を変換 失敗時はエラーを返す 入力値の有効性を検証 失敗時はエラーを返す 画面遷移やコンポーネント とのデータ同期、ビジネス ロジックを実行 <f:ajax>タグで Ajax対応 10
    10. 10. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | FacesServletの役割 • MVCモデルのコントローラーに相 当 – リクエストに応じて、JSFライフサイクル を管理するフロント・コントローラー・コ ンポーネント – javax.faces.context.FacesContext • リクエスト処理とレスポンス生成に関連する コンテキスト情報 • ライフサイクルの各フェーズで利用される 3. 6つのライフサイク ル・フェーズを処 理 FacesServlet Lifecycle FacesContext 1. FacesContextを生 成する 2. 制御をLifecycle に渡す 11
    11. 11. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | JSFのライフサイクル ビューの 復元 入力値の 適用 検証処理 イベント 処理 イベント 処理 レスポンスの レンダリング イベント 処理 イベント 処理 アプリケーション 呼び出し モデル値の 更新 HTTP リクエスト HTTP レスポンス 12
    12. 12. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | JSFのライフサイクル •リクエストに基づいてページのUIComponentツリーを作成(復元)する (初期リクエスト時は作成、ポスト・バック時は復元)ビューの復元 •送信されたフォームの値をUIコンポーネントに適用する 文字列データをJavaデータ型に変換 (コンバータ)入力値の適用 •UIComponentに関連付けられた検証(バリデータ)を行う検証処理 •入力値の適用フェーズで適用されたUIComponentの値をマネージドBeanにコピーするモデル値の更新 •マネージドBeanのメソッドを呼び出してビジネスロジックを実行するアプリケーション呼び出し •マネージドBeanの値を読み取り(EL式)、レスポンスを返すレスポンスのレンダリング 13
    13. 13. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | Webコンテナ JSF&CDIを使用した開発イメージ HTTPリクエスト HTTPレスポンス JSF (Webアプリケーションフレームワーク) Webアプリケーション プレゼンテーション アプリケーションロ ジック • 画面遷移ロジック • 検証ロジック • イベント処理 • … ビジネスロジック • DBアクセス • … Facelet (XHTML) マネージドBean(CDI) POJO/EJB/JPA 開発環境 開発・ デプロイ 14
    14. 14. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | Webアプリケーションを作ってみよう 15
    15. 15. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | Webアプリケーション これから作成するアプリケーション index.xhtml <h3>名前と地域を選択してください。</h3> <h:form> <h:outputText value="名前: "/> <h:inputText id="it1" value="#{helloBean.name}" /> <br/> <h:outputText value="地域: " /> <h:selectManyCheckbox id="cb1" value="#{helloBean.choice}"> <f:selectItems value="#{helloBean.options}" /> </h:selectManyCheckbox> <h:commandButton value="送信" action="hello" /> </h:form> HelloBean private String name; public void setName(String name) { this.name = name; } public String getName() { return name; } public String toHello() { return "hello"; } hello.xhtml <h3>メッセージを表示します。</h3> <p> <h:outputText value="#{helloBean.message}" /> <br/>選択した地域は <ui:repeat value="#{helloBean.choice}" var="data">#{data} </ui:repeat> ですね。 </p> <h:link value="戻る" outcome="index" /> Prefecture private String name; private String capital; private String region; 16
    16. 16. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | プロジェクトを作成する (1) 新規プロジェクト を選択 17
    17. 17. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | プロジェクトを作成する (2) 18 Webアプリケーション を選択
    18. 18. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | プロジェクトを作成する (3) [Java EE 7] を選択 [JavaServer Faces] を選択 登録されているライブラリで [JSF2.2] を選択 19
    19. 19. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | NetBeansの編集画面 One Point: • NetBeansでは作成するプロ グラムをプロジェクトという単 位で管理しています • プロジェクト・ウィンドウには 作成したソースコード(.java ファイル)が表示されます • エディタ・ウィンドウにはソー スコードを編集することがで きます • 出力ウィンドウにはプログラ ムの実行結果などが表示さ れます プロジェクト ウィンドウ エディタ ウィンドウ 出力 ウィンドウ 20
    20. 20. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | <?xml version='1.0' encoding='UTF-8' ?> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core"> <h:head> <title>hello</title> </h:head> <h:body> <h2>hello.xhtml</h2> <hr/> <h3>メッセージを表示します。</h3> <p> <h:outputText value="#{helloBean.message}" /> <ui:repeat value="#{helloBean.choice}" var="data">#{data} </ui:repeat> </p> <h:dataTable value="#{helloBean.country}" var="p" border="1"> <h:column> <f:facet name="header"><h:outputText value="都道府県"/></f:facet> <h:outputText value="#{p.name}" /> </h:column> <h:column> <f:facet name="header"><h:outputText value="都道府県庁所在地"/></f:facet> <h:outputText value="#{p.capital}" /> </h:column> <h:column> <f:facet name="header"><h:outputText value="地域"/></f:facet> <h:outputText value="#{p.region}"/> </h:column> </h:dataTable> <h:link value="戻る" outcome="index" /> </h:body> </html> JSFページ • Webアプリケーションのビューを提 供 – JSFページは Facelet で記述 • XHTML構文を使用してページを宣言 • 複数のタグライブラリを使用可能 • ページのテンプレート作成が可能 • Faclet で記述したページは UIComponent として 扱われる UIComponentツリー UIRootView HtmlOutput Text HtmlOutput Link Html DataTable Facelet ブラウザUI 21
    21. 21. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | JSF 標準タグライブラリ 接頭辞 説明 Namespace URI composite 複合コンポーネントの宣言と定義するためのJSFタグ http://xmlns.jcp.org/jsf/composite h コンポーネントとHTMLレンダラを含む JSF HTML タグ http://xmlns.jcp.org/jsf/html f 特定のレンダリングに依存しない コアFacesタグ http://xmlns.jcp.org/jsf/core ui Facletテンプレート作成のためのJSFタグ http://xmlns.jcp.org/jsf/facelets c JSTLコアライブラリのサブセット http://xmlns.jcp.org/jsp/jstl/core fn JSTL関数タグライブラリ http://xmlns.jcp.org/jsp/jstl/functions 22
    22. 22. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | JSFページの作成 One Point: • オプション: で指定するJSF ページのビュー記述言語は Facletsを選択します • JSPも使用可能ですが、Facletsをオス スメします 23
    23. 23. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | index.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://xmlns.jcp.org/jsf/html"> <h:head> <title>hello</title> </h:head> <h:body> <h2> <h:outputText value="index.xhtml" /> </h2> <hr /> <h3>名前を入力してください。</h3> <h:form> 名前: <h:inputText id="it1" value="#{helloBean.name}" /> <h:commandButton value="送信" action="hello" /> </h:form> </h:body> </html> <h:outputText> <h:commandButton> 24 <h:inputText> index.xhtml
    24. 24. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | <h:form> 名前: <h:inputText value="#{helloBean.name}" /> <h:commandButton id="subimt" value="送信" action="hello" /> </h:form> フォームの作成 <h:form> タグ 遷移先のJSFページを指定 入力した値は、HelloBean オブジェクトの変数 name に格納される 25
    25. 25. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | One Point: 日本語の入力を処理するには? • デプロイメント記述子(glassfish-web.xml)でエンコーディングを指定 WEB-INF/glassfish-web.xml <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE glassfish-web-app PUBLIC "-//GlassFish.org//DTD GlassFish Application Server 3.1 Servlet 3.0//EN” "http://glassfish.org/dtds/glassfish-web-app_3_0-1.dtd"> <glassfish-web-app error-url=""> <parameter-encoding default-charset="UTF-8" /> </glassfish-web-app> 26 Oracle WebLogic Serverでもデプロイメント記述子(weblogic.xml)で 同様の設定ができます
    26. 26. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | その他の JSF タグ <h:commandButton> <h:inputText><h:outputText> <h:dataTable> <h:column> <h:commandLink> <h:inputSecret> <h:selectBooleanCheckbox> <h:selectOneListbox> <h:selectOneRadio> <h:selectManyCheckBox> 27
    27. 27. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | その他の JSF タグ JSFタグ HTMLタグ テキストフィールド (パスワード) <h:inputSecret value="" /> <input type="password" name="j_idt6:j_idt11" value="" /> ラジオボタン <h:selectOneRadio value=""> <f:selectItem itemValue="i1" itemLabel="男性"/> <f:selectItem itemValue="i2" itemLabel="女性"/> </h:selectOneRadio> <input type="radio" name="j_idt6:j_idt16" id="j_idt6:j_idt16:0" value="i1" /> <label for="j_idt6:j_idt16:0"> 男性</label> <input type="radio" name="j_idt6:j_idt16" id="j_idt6:j_idt16:1" value="i2" /> <label for="j_idt6:j_idt16:1"> 女性</label> リストボックス <h:selectOneListbox value=""> <f:selectItem itemValue="ib1" itemLabel="20代"/> <f:selectItem itemValue="ib2" itemLabel="30代"/> <f:selectItem itemValue="ib3" itemLabel="40代"/> </h:selectOneListbox> <select name="j_idt6:j_idt21" size="3"> <option value="ib1">20代</option> <option value="ib2">30代</option> <option value="ib3">40代</option> </select> チェックボックス <h:outputLabel for="cb1" value="チェック"/> <h:selectBooleanCheckbox id="cb1" value="" /> <label for="j_idt6:cb1">チェック</label> <input id="j_idt6:cb1" type="checkbox" name="j_idt6:cb1" /> 28
    28. 28. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | 29 JSF 2.2 での マークアップの改善 <h:form> 名前: <h:inputText value="#{helloBean.name}" /> <h:commandButton id="subimt" value="送信” action="hello" /> </h:form> <form jsf:id="f1"> 名前: <input type="text" id="it1" jsf:value="#{helloBean.name}" /> <input type="submit" value="送信" jsf:action="hello" /> </form> HTMLタグに接頭辞 jsf で指定するとJSFタグとして認識される (jsf のnamespace宣言は xmlns:jsf="http://xmlnx.jcp.org/jsf") index.xhtml index.xhtml
    29. 29. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | JSF での画面遷移 • 暗黙的ナビゲーション <h:commandButton id="subimt" value="送信" action="hello" /> hello.xhtml <h:outputText value="何かを表示します" /> index.xhtml <h:form> <h:inputText id="name"/> <h:commandButton id="subimt" value="送信" action="hello" /> </h:form> 指定されたJSFページに 遷移(静的ナビゲーション) マネージドBeanのメソッドも指定可能 (動的ナビゲーション) action = "#{helloBean.navigation}" 戻り値の型がvoidのメソッドの呼び出し、または メソッドの戻り値が null の場合は呼び出し元の ページを表示 遷移先のJSFページを指定できる HelloBean public String navigation() { return "hello"; } 遷移先のページを戻り値で指定 30 index.xhtml
    30. 30. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | マネージド Bean の作成 One Point: • マネージドBean は、CDI Bean として作成され、@Named 注 釈とスコープを表す注釈を指 定します • CDI Beanの生成、および破 棄はコンテナによって管理さ れます 31
    31. 31. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | マネージド Bean (CDI) のスコープ スコープ スコープをあらわす注釈 有効期間 request @RequestScoped HTTP リクエストを受けてからレスポンスを返すまでの間 session @SessionScoped HTTP セッションが有効な間 application @ApplicationScoped Web アプリケーションが起動してから終了するまでの間 conversation @ConversationScoped Conversation.begin()からConversation.end()を実行するまでの間 dependent @Dependent インジェクション先のライフサイクルと同じ ( デフォルト) CDI Beanは注釈で指定された 期間で、コンテナによって インスタンス化・破棄されます 32
    32. 32. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | マネージド Bean (CDI)の実装 import javax.enterprise.context.RequestScoped; import javax.inject.Named; @Named(value = "helloBean") @RequestScoped public class HelloBean { private List<SelectItem> options; public List<SelectItem> getOptions() { return options; } public String toIndex() { return "index"; } // options の初期化処理 … } One Point: 変数 options の初期化は @PostConstruct 注釈がつ いたメソッドでも行うことができます @PostConstruct public void init() { String[] category = {"北海道", "東北", "関東", "中部", "近畿", "中国", "四国", "九州"}; options = new LinkedList<>(); for (String var : category) { options.add(new SelectItem(var, var)); } } @Named 注釈とスコープの注釈を指定 (スコープの注釈はできるだけ省略しない) 33 画面遷移を行うメソッド hello.xhtml
    33. 33. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | マネージド Bean (CDI) にアクセスする <?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://xmlns.jcp.org/jsf/html" xmlns:f="http://xmlns.jcp.orag/jsf/core"> <h:head> <title>hello</title> </h:head> <h:body> <h2> <h:outputText value="hello.xhtml" /> </h2> <hr /> <h3>メッセージを表示します。</h3> <p> <h:outputText value="#{helloBean.message}" /> <br/>選択した地域は <ui:repeat value="#{helloBean.choice}" var="data">#{data} </ui:repeat> ですね。 </p> … 途中略 … マネージドBeanへのアクセスは EL式を使います 34 hello.xhtml
    34. 34. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | EL 式の使い方 <ui:repeat value="#{helloBean.choice}" var="data">#{data} </ui:repeat> JSFのEL式の構文は #{ マネージド Bean の名前.プロパティ名 } @Named @RequestScoped public class HelloBean { private List<String> choice; public List<Product> getChoice() { return choice; } マネージドBean名はクラス名(先頭小文字) (@Named注釈のvalue属性で変更可能) マネージドBeanのプロパティの getterメソッドを呼び出します 35 hello.xhtml
    35. 35. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | <h:dataTable value="#{helloBean.country}" var="p" border="1"> <h:column> <f:facet name="header"> <h:outputText value="都道府県"/> </f:facet> <h:outputText value="#{p.name}" /> </h:column> … 以下略 … </h:dataTable> 表の生成 <h:dataTable>タグ HelloBean private List<Prefecture> country; public List<Prefecture> getCountry() { return selectedCountry; } Prrefecture private String name; private String capital; private String region; value 属性には表を生成するデータ(コレクション)を指定 var 属性には、コレクション内の各オブジェクトの参照変 数を指定 36 index.xhtml
    36. 36. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | <h:dataTable value="#{helloBean.country}" var="p" border="1"> <h:column> <f:facet name="header"> <h:outputText value="都道府県"/> </f:facet> <h:outputText value="#{p.name}" /> </h:column> … 以下略 … </h:dataTable> 表の生成 <h:dataTable>タグ 37 表のヘッダーやフッターは <f:facet>タグで header や footerを 指定します。 hello.xhtml
    37. 37. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | One Point: テンプレートを使用すると、アプ リケーションに共通のルック・ア ンド・フィールを持たせることが できます • <ui:insert> … テンプレートにコン テンツを挿入 • <ui:composition> … 適用するテ ンプレートの指定 • <ui:define> … テンプレートに挿 入(<ui:insert>を置き換える)す るコンテンツを定義 38 テンプレートの作成
    38. 38. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | 39 テンプレートの作成 <?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:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:h="http://xmlns.jcp.org/jsf/html"> <h:head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <h:outputStylesheet name="./css/default.css"/> <h:outputStylesheet name="./css/cssLayout.css"/> <title>hello</title> </h:head> <h:body> <div id="top" class="top"> <ui:insert name="top">Top</ui:insert> </div> <div id="content" class="center_content"> <ui:insert name="content">Content</ui:insert> </div> </h:body> </html> ヘッダー (top) コンテンツ (content) template.xhtml
    39. 39. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | 40 index.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://xmlns.jcp.org/jsf/html"> <h:body> <ui:composition template="./template.xhtml"> <ui:define name="top"> <h2>index.xhtml</h2> </ui:define> <ui:define name="content"> <h3>名前を入力してください。</h3> <h:form> <h:outputText value="名前: "/> <h:inputText id="it1" value="#{helloBean.name}" /> <h:commandButton value="送信" action="hello" /> </h:form> </ui:define> </ui:composition> </h:body> </html> [content] [top] index.xhtml <ui:composition>で指定したテンプレート に挿入するコンテンツを定義
    40. 40. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | JSFでの検証と変換処理 • JSFライフサイクル・フェーズで呼び出される • JSFでは標準でバリデータやコンバータを提供 – Converter クラスや Validator クラスの開発、および Bean Validation も使用可能 ビューの 復元 入力値の 適用 検証処理 イベント 処理 イベント 処理 レスポンスの レンダリング イベント 処理 イベント 処理 アプリケーショ ン 呼び出し モデル値の 更新 HTTP リクエスト HTTP レスポンス コンバータ バリデータ 41 コンバータ
    41. 41. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | 入力値を検証するには? (1) • 入力必須のフィールドの検証を行うには … – UIComponent タグの required 属性を true に設定 – 検証失敗時のエラーメッセージは requiredMessage 属性で指定できる • エラーメッセージを表示するには … – <h:messages> タグ、<h:message>タグを使用 – for 属性でどのタグに対するメッセージなのかを指定できる • 対象になる<h:inputText>タグなどにも、id 属性を追加する 42
    42. 42. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | 入力値を検証するには? (1) <h:form> <h:outputText value="名前: "/> <h:inputText id="it1" value="#{helloBean.name}” required="true" requiredMessage="名前を入力してください。" /> <br/> <h:commandButton value="送信" action="hello" /> </h:form> <h:messages for="it1" style="color: red" /> 43
    43. 43. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | 入力値を検証するには? (2) • 入力値の値の範囲を検証するには … – JSFでは標準バリデータ(java.facesvalidator.*)が用意されている – 標準バリデータに対応したJSFタグがある • UIコンポーネントタグにバリデータタグをネストして使用 JSFタグ <f:validateLongRange> 整数値の最大値(maximum)と最小値(minimum)を検証 <f:validateDoubleRange> 浮動小数点数の最大値(maximum)と最小値(minimum)を検証 <f:validateLength> 入力文字数の最大値(maximum)と最小値(minimum)を検証 JSFで使用できるタグ 44
    44. 44. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | 入力値を検証するには? (2) <h:form> <h:outputText value="名前: "/> <h:inputText id="it1" value="#{helloBean.name}" required="true" requiredMessage="名前を入力してください。"> <f:validateLength minimum="2" /> </h:inputText> <br/> <h:commandButton value="送信" action="hello" /> </h:form> <h:messages for="it1" style="color: red" /> UIComponentタグのrequired属 性が先に評価される 45
    45. 45. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | 入力値を変換するには? • フォームに入力された値は String 型で扱われる – UIComponent への反映時に対応したマネージド Bean のデータ型に変換される – 一般的なデータ型(数値, 日付など)には標準コンバーターが用意されている • マネージド Bean のプロパティ型に基づいて暗黙的に変換される • 変換するデータ型は converter 属性でも指定可能 – converter 属性に指定された型に変換できない場合はエラー・メッセージが表示され る One Point: • 日付や数値に対して標準のコンバーター タグを使うことができます。 (<f:dateTimeConverter>タグ, <f:convertNumber>タグ) 46
    46. 46. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | 入力値を変換するには? <h:column> <f:facet name="header"> <h:outputText value="作成日" /> </f:facet> <h:outputText value="#{c.creationDate}"> <f:convertDateTime pattern="yyyy-MM-dd HH:mm:ss" timeZone="Japan" /> </h:outputText> </h:column> JSTで表示する場合は timeZone 属性を指定 47
    47. 47. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | まとめ • JSFは、Java EE 標準のWebアプリケーション・フレームワークです – JSFでのプレゼンテーションは Facelet で記述します • コンポーネント・ベースのテンプレート・フレームワーク • 豊富なJSFタグを利用できます – JSFでのページ遷移は、暗黙的なナビゲーションが使用できます • action や outcome に 遷移先 を文字列で指定できます (index.xhtml の場合は index ) • マネージド Bean でメソッドを定義する場合も遷移先の文字列を戻り値で返します – データは マネージドBean(CDI) で保持できます • CDI Bean はコンテナによってインスタンスのライフサイクルが管理されます (適切なスコープを注釈で指定しましょう) • Facelet からは EL式 を使ってアクセス可能です 48
    48. 48. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | Safe Harbor Statement The preceding is intended to outline our general product direction. It is intended for information purposes only, and may not be incorporated into any contract. It is not a commitment to deliver any material, code, or functionality, and should not be relied upon in making purchasing decisions. The development, release, and timing of any features or functionality described for Oracle’s products remains at the sole discretion of Oracle. 49

    ×