Beginning Java EE 6 勉強会(4) #bje_study

Beginning Java EE 6 勉強会(4)
-プレゼンテーション-

担当者：@georgenano
George OKADA
2012/05/30

目次

プレゼンテーション

第10章：JavaServer Faces
第11章：ページとコンポーネント @georgenano
第12章：処理とナビゲーション

ビジネスロジック相互運用

第06章：Enterprise Java Beans
第07章：セッションBeanとタイマサービス @inatus 第13章：メッセージの送信
第08章：コールバックとインターセプタ第14章：SOAP Webサービス
第09章：トランザクションとセキュリティ第15章：RESTful Webサービス

永続化

第02章：Javaと永続化 @making
第03章：ORM
第04章：永続性オブジェクトの管理
@kjstylepp
第05章：コールバックエリア

12/05/30 Beginning JavaEE6 勉強会(4) 2

第10章
JavaServer Faces


JSF(JavaServer Faces)とは

JavaServer Faces (JSF) is a user interface (UI) framework for Java web
applications. [2]

HTTP
リクエスト XUL ④
コンバータ
ブラウザ (Ajax)
① ③ JSP コンバータ
XHTML
HTML ⑦ Faces レンダラ
JavaScript Servlet
CSS ② ⑤
HTTP バリデータ
バリデータ
レスポンス

faces- ① マネージド
config.xml
(オプション) Bean
⑥
[1] ※但し、赤文字は発表者が追記した


参考｜StrutsとJSFとの比較

Struts JSF1.2 JSF2.0
struts-config.xml faces-config.xml マネージドBeanなどへの
アノテーション

DispatchAction メソッドバインディングメソッドバインディング

アクションマッピング faces-config.xmlのマネージドBeanなどへの
navigation-rule アノテーション

ActionForm マネージドBean マネージドBean

[3] ※発表者がJSF2.0の列を追加した


①FacesServletとfaces-conﬁg.xml (第12章に詳解)

FacesServlet:
‣MVCモデルのコントローラの役割
‣ユーザからのリクエストに応じて、マネージドBean上で定義したアク
ションを実行する
‣JSF実装の内部に存在し、利用者が直接触ることはできない
➡JSFの利用者は気にしなくてもよい
faces-config.xml:
‣後述するマネージドBeanの一覧や、画面遷移情報を記述する設定
ファイル
‣JSF2.0からはマネージドBeanにアノテーションをつけることで同様の
意味となるため、省略可能になった
➡JSF2.0の利用者は気にしなくてもよい


①FacesServletとfaces-conﬁg.xml (第12章に詳解)

faces-config.xmlのサンプル

<?xml version="1.0" encoding=‘UTF-8’?>
<faces-config xmlns=”http://java.sun.com/xml/ns/javaee”
xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance”
xsi:schemaLocation=”http://java.sun.com/xml/nsjavaee
http://java.sun.com/xml/ns/javaee/web-faceconfig_2_0.xsd”
version=”2.0”>

<managed-bean>
<managed-bean-name>BookController</managed-bean-name>
<managed-bean-class>BookController</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
</managed-bean>

<navigation-rule>
<from-view-id>newBook.xhtml</from-view-id>
<navigation-case>
<from-outcome>success</from-outcome>
<to-view-id>listBooks.html</to-view-id>
</navigation-case>
</navigation-rule>

</faces-config>


②ページとコンポーネント (第11章に詳解)

ページ：
‣MVCモデルのビューの役割
‣ページ宣言言語にはFaceletsの利用が推奨（JSPも利用可）
コンポーネント：
‣ページを記述するための構成要素
‣例：<h:head>, <h:body>, <h:outputLabel>...

[3]


③レンダラ

レンダラ：
‣ユーザーインターフェイスの構造を、デバイスに適合したユーザーイン
ターフェイスの表現形式に変換するクラスのこと [3]
‣レンダラの例：HTML4.01関連レンダラ、ワイヤレス・マークアップ言
語（WML）、Scalable Vector Graphics（SVG）...
➡JSFの利用者は（それほど）気にしなくて良い

[3]

④コンバータと⑤バリデータ (第12章に詳解)

コンバータ：
‣次の2つの役割
(1)画面から入力された文字列をマネージドBeanのプロパティの型のオブ
ジェクトに変換
(2)マネージドBeanのプロパティの型のオブジェクトをレンダラ用の文字
列に変換
‣変換時にエラーが発生した場合、エラーメッセージを返却
バリデータ：
‣ユーザが入力した値が有効か否か検証する役割
‣複数のバリデータを1つのコンポーネントに関連付け可能
‣検証時にエラーが発生した場合、エラーメッセージを返却


⑥マネージドBeanと画面遷移 (第12章に詳解)

マネージドBean：
‣画面遷移、EJB呼出、コンポーネントとデータの同期、ビジネスロジック
を行う役割
➡JSFの肝

マネージドBeanの例
@ManagedBean(name = “bookController”)
public class BookController {
@EJB
private BookEJB bookEJB;

private Book book = new Book();

public String doCreateBook(){
book = bookEJB.createBook(book);
return “listBooks.xhtml”;
}
// bookのゲッター、セッター
}

マネージドBeanのページからの利用例
<h:inputText value=”#{bookController.book.isbn}”/>
<h:outputText value=”#{bookController.book.isbn}”/>
<h:commandButton value=”Create” action=”#{bookController.doCreateBook}”/>

⑦Ajaxサポート (第12章で詳解)

Ajaxサポート：
‣非同期でページの一部を少しずつ更新する技術
‣JSF2.0からは標準仕様でAjaxがサポートされた
‣<f:ajax>タグを利用することで非同期処理が可能に


Exercise①｜サンプルプログラムの確認

目的：サンプルプログラムの概要を把握する

課題：サンプルプログラムの中身を確認する

準備：https://svn.kenai.com/svn/beginningee6~src/book/trunk/
chapter10からチェックアウトして、「依存関係で構築」

手順：

1.「プロジェクトを実行」してサンプルアプリの挙動を確認
2.Book.java, BookEJB.java, BookController.javaの中身を確認
3.newBook.xhtml, listBooks.xhtmlの中身を確認
4.faces-config.xmlが無く、BookController.javaに「@ManagedBean」アノ
テーションがある事を確認


Exercise②｜書籍情報の追加

目的：JSFの概要を把握する

課題：書籍情報に「著者名」を追加する

手順： Chapter10プロジェクトの各ソースを変更

1.Bookエンティティへ「著者名」を追加
2.BookEJB, BookControllerに影響が及ばないことを確認
3.newBook.xhtml, listBooks.xhtmlへ「著者名」を追加


第11章
ページとコンポーネント


【再掲】JSF(JavaServer Faces)とは

applications. [2]

HTTP
コンバータ
ブラウザ (Ajax)
XHTML
JavaScript Servlet
CSS ② ⑤
バリデータ
レスポンス

config.xml
⑥


準備

以下では実例のソースを見ながら、（適宜、結果をブラウザなど
で表示しながら）説明をお聞きください
1.https://svn.kenai.com/svn/beginningee6~src/book/trunk/chapter11
からチェックアウト

2.「プロジェクトを実行」

3.http://localhost:8080/chapter11/から結果を確認


HTML

Hypertext Markup Language(HTML):
‣Webページで最も使用されている言語
‣通常<HTML>や<BODY>タグが必要だが、省略されてもブラウザは
表示してくれる
‣XML的には無効な場合が多く、検証できない
‣XML的には無効な例
‣必要なタグがない
‣終了タグがない
‣タグに大文字と小文字が混在している
‣実例：ex01/newBook.html


XHTML

eXtensible HyperText Markup Language(XHTML):
‣Webページの推奨言語
‣厳密なXML構文規則に則っている
‣XML構文規則とスキーマ制約の検証で管理、解析が用意
‣XML的には有効にした例
‣必要なタグを記述している
‣終了タグを記述している
‣タグを小文字で統一している
‣実例：ex01/newBook.xhtml


CSS

Cascading Style Sheets(CCS):
‣ドキュメントのプレゼンテーションを表現するスタイル言語
‣色、フォント、レイアウトなどのデザインを定義
‣ドキュメントのコンテンツとデザインを分離可能になる
‣実例：ex01/newBookWithCSS.xhtml


JavaScript

JavaScript:
‣クライアント側のWeb開発に使用するスクリプト言語
‣クライアント側で動的コンテンツを提供可能
‣実例：ex01/newBookWithJavascript.xhtml
‣必須入力項目（価格情報）が正しく入力されているか検証


JSP

JavaServer Pages(JSP):
‣クライアントのリクエストに対するレスポンスを動的に生成する言語
‣サーバ側で保持されるDBやEJBを利用可能
‣サーバ側で処理され、サブレットとしてコンパイルされる
‣コンパイルされた結果はHTML、XHTMLの両方ある
‣ビジネスロジックとプレゼンテーションが混じっており、開発・保守が難
しい
‣基本構文：�<%@ ディレクティブ %>, <%! 宣言 %>,
<% スクリプトレット %>, <%= 式 %>
‣実例：ex05/listBooks.jsp ex05/listBooks.jspx


式言語(EL)とJSP Standard Tag Library

Expression Language(EL式):
‣JSPのスクリプト要素と同様のアクションを実行する簡単な構文の言語
‣基本構文：�${expr}
JSP Standard Tag Library(JSTL)：
‣JSPでよく使われるタグのライブラリ
‣JavaコードとXHTMLタグの混在を避ける事ができる
‣オブジェクトに対する値の設定、例外ハンドリング、条件付き処理、繰
り返し処理、DBアクセス...
‣コアアクション：<c:out>, <c:if>, <c:forEach>...
‣実例： ex06/checkNumbers.jsp


Facelets

Facelets:
‣JSPに代わってビューを記述できるテンプレートフレームワーク
‣XHTMLとFaceletsの標準タグ（ui接頭辞）で記述する
‣実例：ex11/newBook.xhtml ex11/layout.xhtml
Faceletsのタグ [1] ※一部の説明を簡略化した

タグ説明
<ui:composition> テンプレートを使用するコンポジションの定義
<ui:component> コンポーネントの作成
<ui:debug> デバッグ情報の取得
<ui:define> テンプレートを使用し、ページに挿入するコンテンツを定義
<ui:decorate> ページ内の一部コンテンツを装飾
<ui:fragment> ページ内のフラグメントの追加
<ui:include> <jsp:include>と同様
<ui:insert> テンプレートにコンテンツを挿入
<ui:param> インクルードしたファイルまたはテンプレートにパラメータを渡す
<ui:repeat> <c:foreach>と同様
<ui:remove> ページからコンテンツを削除


JavaServer Faces

JavaServer Faces:
‣a user interface (UI) framework for Java web applications.[2]
‣下記以外のJSTLは未サポート
‣実例：htmlcomponents.xhtml(HTML components)

FaceletsをPDLとして使用するページで使用可能なタグライブラリ [1] ※一部の説明を簡略化した

URI 接頭辞説明
http://java.sun.com/jsf/html h このタグライブラリはコンポーネントとHTMLレンダラを含む
http://java.sun.com/jsf/core f このライブラリは特定のレンダリングに依存しないカスタムアクショ
ンを含む
http://java.sun.com/jsf/facelets ui このライブラリのタグはテンプレート化のサポートを追加
http://java.sun.com/jsf/composit composit このタグライブラリは複合コンポーネントの宣言と定義に使用
http://java.sun.com/jsp/jstl/core c FaceletsページはJSPコアタグライブラリの一部を使用可能
http://java.sun.com/jsp/jstl/functions fn Faceletsページは全てのJSP関数タグライブラリを使用可能


第12章
処理と画面遷移


【再掲】JSF(JavaServer Faces)とは

applications. [2]

HTTP
コンバータ
ブラウザ (Ajax)
XHTML
JavaScript Servlet
CSS ② ⑤
バリデータ
レスポンス

config.xml
⑥


①FacesServlet

javax.faces.webapp.FacesServlet
‣JSFにおけるjavax.servlet.Servletの実装
‣全てのユーザからのリクエストはこのコントローラを経由する

FacesServletの相互作用
[1]

Lifecycle
3: 6つのフェーズで利用する

2: 制御をライフサイクルに渡す FacesContext

1: FacesContextを生成する
画面のイベント
FacesServlet
ボタン


FacesContext

javax.faces.context.FacesContext
‣リクエストの処理と対応するレスポンスの作成に関連付けるコンテキス
ト情報
‣マネージドBeanでgetCurrentInstance()で取得できる
FacesContextのメソッドの一部 [1]

メソッド説明
addMessage メッセージの追加
getApplication Webアプリケーションと関連付けられるApplicationインスタンスの取得
getAttributes FacesContextインスタンスと関連付けられる属性をMapで取得
getCurrentInstance 現在のスレッドが処理するリクエストのFacesContextインスタンスの取得
getELContext 現在のFacesContextインスタンスのELContextインスタンスの取得
getMaximumSeverity キューに登録されているFacesMessageの重要度の最大値を取得
getMessage FacesMessageコレクションの取得
getPartialViewContext リクエストのPartialViewContextオブジェクトの取得
getViewRoot リクエストに関連付けられているルートコンポーネントを取得
release FacesContextインスタンスに関連付けられるリソースの解放


JavaServer Facesページの６つのライフサイクル

利用者は
気にしないコンバータレスポンスバリデータレスポンス

リクエストビュー入力値イベント検証イベント
の復元の適用の処理の処理の処理

レスポンスレスポンス

レスポンスレスポンスのイベントアプリのイベントモデル値
レンダリングの処理呼出しの処理の更新
コンバータマネージドBean 利用者は
型変換または気にしない
検証のエラー
[1] ※赤文字は発表者が追記し
た
JSFライフサイクルにおける6つのフェーズ [4]

フェーズ名説明
ビューの復元リクエストに基づいて、ページのUIViewRootコンポーネントツリーを作成（復元）する
入力値の適用送信されたフォーム値をUIコンポーネントに適応する
検証処理 UIコンポーネントに関連付けられたバリデータ（データ検証）を行う
モデル値の更新入力の適用でUIコンポーネントと関連付けられた値をマネージドBeanに更新する
アプリの呼出しマネージドBeanのイベントメソッドを起動し、ビジネスロジックを処理する
レスポンスのレンダリング処理結果をHTMLなどにレンダリングを行い、レスポンスとして返す


④コンバータ

javax.faces.convert.*
‣UIコンポーネントの値と対応するプリミティブ型を相互自動変換
‣使い方：
‣<f:convertDataTime pattern=”MM/dd//yy”/>
‣実例：ex12/newBook.xhtml
‣プリミティブ型ではない場合、独自コンバータを作成する必要有
➡カスタムコンバータという
カスタムコンバータ
‣作り方：javax.faces.convert.Convertインターフェースを実装したク
ラスに、@FacesConverterアノテーションを付与する
‣使い方：<f:converter converterId=”カスタムコンバータ名”/>


⑤バリデータ

javax.faces.validator.*
‣ユーザの入力を検証する
‣使い方：<f:validateLength minimum=”2” maximum=”20”/>
‣標準バリデータで満足できない場合、独自バリデータを作成する必要
有
➡カスタムバリデータという
カスタムバリデータ
‣作り方：javax.faces.validator.Validatorインターフェースを実装し
たクラスに、@FacesValidatorアノテーションを付与する
‣使い方：<f:validator validatorId=”カスタムバリデータ名”/>


Exercise③｜発行日の追加とタイトルの文字数チェック

目的：コンバータとバリデータの使い方を把握する

課題：書籍情報に「発行日」を追加し、「タイトル」が2文字以上20文字以下チェック
を追加する

手順：Exercise②の結果のソースに以下を実施

1.BookエンティティへのDate型の「発行日」追加
‣「@Temporal」の付与不足を忘れずに
2.BookEJB, BookControllerマネージドBeanの確認
3.newBook.xhtml, listBooks.xhtmlへの「発行日」追加
4.newBook.xhtmlへの標準コンバータ「convertDateTime」タグの追加
‣htmlタグ内に「xmlns:f="http://java.sun.com/jsf/core"」追加
5.newBook.xhtmlへの標準バリデータ「validateLength」タグの追加


⑥マネージドBean

作り方：
‣@ManagedBeanアノテーションをクラスに付与
‣JSF1.2まではfaces-config.xmlへのエントリが必要だった
役割：
‣状態の保持�book属性
‣ページで参照するアクションメソッドの定義�doCreateBook()
‣画面遷移�return “listBooks.xhtml”
必要条件：
‣スコープの設定が必要。設定しないと@RequestScopeを使用
‣クラスをpublicとして定義。finalやabstractの定義は不可
‣クラスは引数なしのパブリックコンストラクタが必要
‣クラス中でfinalize()メソッドの定義は不可
‣属性はパブリックのゲッター、セッターが必要


⑦Ajax

概要：JSF2.0からAjaxが標準仕様になった
使い方：
‣準備：標準仕様で定義されたJavaScriptライブラリ(jsf.js)を使用
‣<h:outputScript name=”jsf.js” library=”javax.faces”
target=”head”/>
‣使用したいタグ内で<f:ajax>タグを使用する
‣<f:ajax execute=”@form” render=”:bookList”/>
‣実例：Chapter12/ex14/newBook.xhtml


Exercise④｜書籍情報を非同期で表示する機能

目的：マネージドBeanとAjaxの使い方を把握する

課題：書籍情報を非同期で表示する機能を追加する

手順：Exercise③の結果のソースに以下を実施

1.newBook.xhtmlに非同期で表示する機能を追加
‣listBooks.xhtmlから必要部分をコピペ
‣ボタンタグ内に<f:ajax>タグを追加
‣renderとid
2.BookController.javaの遷移先を変更


引用文献

[1] Antonio Goncalves 著, 日本オラクル株式会社監訳「Beginning Java EE 6」2012年, 翔泳社

[2] Java Community Process「JSR-000314 JavaServerTM Faces 2.0(Final Release)」http://
jcp.org/aboutJava/communityprocess/final/jsr314/index.html

[3] 佐藤治夫, 小泉守義「ThinkIT JDeveloperで学ぶJSF入門第2回：JSFを構成する要素」http://
thinkit.co.jp/free/article/0607/8/2/

[4] Syboos.jp編集長「ライフサイクルから理解するJSFの仕組み」 http://www.syboos.jp/jsf/doc/
phase-in-lifecycle.html


Beginning Java EE 6 勉強会(4) #bje_study

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Beginning Java EE 6 勉強会(4) #bje_study

Similaire à Beginning Java EE 6 勉強会(4) #bje_study (20)

Beginning Java EE 6 勉強会(4) #bje_study

Notes de l'éditeur