java ee 7 アプリケーション設計ガイド -...

© 2015 IBM Corporation

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

1

日本アイ・ビー・エムシステムズ・エンジニアリング株式会社


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

Disclaimer

この資料は日本アイ・ビー・エム株式会社ならびに日本アイ・ビー・エムシステムズ・エンジニアリング株式会社の正式なレビューを受けておりません。

当資料は、資料内で説明されている製品の仕様を保証するものではありません。資料の内容には正確を期するよう注意しておりますが、この資料の内容は2015年7月現在の情報であり、製品の新しいリリース、PTFなどによって動作、仕様が変わる可能性があるのでご注意下さい。

今後国内で提供されるリリース情報は、対応する発表レターなどでご確認ください。ＩＢＭ、ＩＢＭロゴおよびibm.comは、世界の多くの国で登録されたInternational Business Machines

Corporationの商標です。他の製品名およびサービス名等は、それぞれＩＢＭまたは各社の商標である場合があります。現時点でのＩＢＭの商標リストについては、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



Java EE 7 に含まれる仕様 (JSR一覧)

Java EE 7 では、４つの仕様が新規に追加され、３つの仕様がバージョンアップされている

当ガイドでは、Java EE7で機能拡張されたJSF 2.2を対象とし、その入門編とする。

5

CDIExtensions

CDI 1.1

Managed Beans 1.0

JPA 2.1 JMS 2.0 JCA 1.7

CommonAnnotations 1.1

EJB 3.2

Servlet 3.1

Concurrency 1.0

Batch 1.0

WebSocket1.0

JSON 1.0Web

Fragments

JSF 2.2JSP 2.3EL 3.0

Bea

n V

ali

da

tio

ns

1.1

JAX-RS 2.0

JAX-WS 2.2

Interceptors 1.2

JTA 1.2



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アプリケーションの構成（１）

JSFはMVCアーキテクチャーのフレームワークである。そのため、JSFアプリケーションでは次の3つの要素が中心的な役割を果たす。これらのうち、FacesServletはJSFのフレームワークが提供するものであり、開発者は残る2つ（Faceletsと管理Bean）をアプリケーション毎に作成する。

9

Controller

(Faces Servlet)

Model

(管理Bean)

View

(Facelets)

HTTP

リクエスト

HTTP

レスポンス操作・リダイレクト

生成・管理

アクセス



JSFアプリケーションの構成（２）

1. FacesServlet（Controller）

–Webブラウザとのやり取りの窓口の役割を果たす。リクエストを受け取ると適切なコンポーネントに処理を受け渡し、処理結果を受けて新しいビューを生成し、ブラウザに返信する。

2. Facelets（View）詳細は４章で解説する

–画面の構成要素を記述する。XHTML内にJSFのタグを記述すると、そのタグに対応したコンポーネントが必要な処理を行う。

–処理の結果はコンポーネント・ツリーとして構成され、レンダリングされたものがレスポンスとなる。

3. 管理Bean（Model）詳細は４章で解説する

–画面遷移やビジネス・ロジックの呼び出し、入出力値の管理などを行うコンポーネント。JSFの管理BeanとCDIの管理Beanが使える。当資料ではCDIの管理Beanを使用する。

10



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

11



画面と動き

12

当資料は以下のように画面が遷移するアプリケーションを使ってJSFの基本的な機能を説明する。

アプリケーションの動き：ブラウザから開始ページにアクセスして、入力欄に数字を入力後、「計算」ボタンをクリックすると計算結果が「履歴」に表示される。

数字を入力

「計算」をクリック

計算結果が表示される

再度数字を入力して「計算」をクリックすると、履歴に計算結果が表示される。



構成要素

当アプリケーションでは以下のファイルを用意する。

次ページ以降にファイルの全ソースを示すが、解説は次章以降で行う。

Facelets（XHTML）

–adding.xhtml：FaceletsのHTMLタグやCoreタグを使ってブラウザ画面の構成要素を記述している。EL式を使って管理Beanにバインドしている。

管理Bean

–AddingBean.java：計算メソッドを実行するオブジェクト。

–RecordList.java： HTTPセッションが有効な間、計算結果の履歴を保持する。個々の計算結果はRecord.javaに保持する。

Javaクラス

–Record.java：個々の計算結果を保持する

13



Facelets adding.xhtmlのソース

14

<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>

<?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}">



管理Bean AddingBean.javaのソース

15

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;}

}

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@RequestScopedpublic class AddingBean implements Serializable {

private Integer addend;private Integer augend;@Injectprivate RecordList history;public Object add() {

Record record = new Record();record.augend = augend;record.addend = addend;record.result = augend + addend;history.add(record);



管理Bean RecordList.javaのソースjavaクラス Record.javaのソース

16

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;

}

}

package javaee7jsf22;

import java.util.ArrayList;

import javax.enterprise.context.RequestScoped;

import javax.enterprise.context.SessionScoped;

@SessionScoped

public class RecordList extends ArrayList<Record> {

}

RecordList.java Record.java



４. JSFの機能説明

17



管理Bean（１）

管理BeanはMVCモデルのModelの役割を担っている。

画面レイアウトとバックエンドでのビジネスロジックを明確に分離・結合する仕組みを提供する。

Javaクラスに@Namedやその他の何らかのアノテーションを付けることで、CDIの管理Beanになる。

当サンプルアプリケーションでは以下の２つの管理Beanを使う。

–AddingBean.java：計算メソッドを実行するオブジェクト。

–RecordList.java： HTTPセッションが有効な間、計算結果の履歴を保持する個々の計算結果はRecord.javaに保持する。

上記管理Beanで以下の３つのことを実現する。

–管理Beanのプロパティやメソッドを画面側で表示/セットする値やボタン押下時にコールされるロジックとして関連付けする。

–AddingBeanは画面に入力したデータを受け取る。RecordListはセッションをまたがって履歴を保持する。

–AddingBeanで計算した結果をRecordListに保管するために、管理Beanから別のJavaクラスから管理Beanにアクセスする。

18



管理Bean（２）

@Named

@Namedは管理Beanに任意の名前を付けるアノテーション。@Namedで付けた名前はEL名という。

EL名をもつ管理Beanだけが、JSFページからアクセスできるようになる。Facelets（XHTML）に、EL（Expression Language）式を記述することで、CDIの管理Beanを参照することができる。@Namedの後に名前を指定しない場合にはクラス名の最初の文字を小文字にしたデフォルト名が使用される。

任意の名前にしたい場合、@Namedの後に名前を記述すると別の名前を指定することができる。

19

・・・・

import javax.inject.Named;

・・・・

@Named

@RequestScoped

・・・・

AddingBean.java・・・・

<h:inputText required="true" id="augend" value=

"#{addingBean.augend}">

<f:converter converterId="javax.faces.Integer" />

<f:validateLongRange minimum="0" maximum="100" />

</h:inputText>

・・・・

adding.xhtml

@Named("OtherName")例



管理Bean（３）

スコープアノテーション：@RequestScoped, @SessionScoped

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

–@RequestScoped：HTTPリクエストを受けてからレスポンスを返すまでの間有効

–@SessionScoped：HTTPセッションの間有効

例えば、 @RequestScopedを付けた管理Bean（AddingBean.java）は、ブラウザで送信ボタンを押す動作（リクエスト）が発生したときにオブジェクトが自動生成される。そして受信したデータを処理し、ブラウザに返信する動作（レスポンス）が完了すると廃棄される。

CDIとスコープの詳細については、「Java EE7アプリケーション設計ガイド – CDI1.2編」を参照。

20

@RequestScoped

・・・・

AddingBean.java

・・・・

@SessionScoped

public class RecordList extends ArrayList<Record>

・・・・

RecordList.java



管理Bean（４）

@Inject

@Injectは、「変数にオブジェクトを注入する」というCDIのアノテーションである。

当アプリケーションではRecordList型オブジェクトを変数historyに注入している。

CDIの詳細については、「Java EE7アプリケーション設計ガイド – CDI1.2編」を参照。

21

@RequestScopedpublic class AddingBean implements Serializable {@Injectprivate 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;}

AddingBean.java

・・・・

@SessionScoped

public class RecordList extends ArrayList<Record> {

}

RecordList.java

以下のように記述すると、CDI管理Beanではなく、単なるjavaのオブジェクトになるので、セッションスコープにならなくなってしまう。RecordList history = new RecordList();



Facelets

Faceletsは主にFaceletsタグを使ってXHTMLにウェブ画面を記述する。

XHTMLファイルには主に以下の項目を記述する

–Faceletsと管理Beanを結び付けるEL式

–ネームスペースの定義

–画面表示に関する記述：HTMLタグ、Coreタグ、コンバーター、バリデーターなど

次ページより、アプリケーションを使ってFaceletsに記述する上記の項目の基本的な使い方について説明する。

22

<?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>・・・・

adding.xhtml

EL式

ネームスペースの定義

HTMLタグ



23

EL（Expression Language）

以下のアプリケーションのFacelets（XHTML）で使われている#{…}で囲む形式をEL式（ Expression Language ）という。EL式を使うことで、Faceletsと管理Beanを結びつけることができる。使い方はピリオドをセパレータとし、管理Beanの名称に続けて関連付けしたいプロパティ名やメソッド名を指定する。

以下の例において、addingBean.augendは管理BeanのAddingBeanのプロパティaugendを指しており、JSF画面に入力された値は、プロパティaugendに入力される。このように、h:inputTextタグがaddingBeanのプロパティとバインドしている。

<h:inputText required="true" id="augend" value="#{addingBean.augend}">



</h:inputText>

+

<h:inputText required="true" id="addend" value="#{addingBean.addend}">

･･････

<h:commandButton value="計算" action="#{addingBean.add}" />

･･････

adding.xhtml

EL式

private Integer augend;

・・・・public Integer getAugend() {return augend;}・・・・public void setAugend(Integer augend) {this.augend = augend;}

addingBean.javaAddingBeanにはプロパティaugendのgetter/setterが定義されている。



タグライブラリの定義

Faceletsタグを使用するためにはネームスペースの宣言が必要になる。当アプリケーションではHTMLタグ（接頭辞h：）とCoreタグ（接頭辞 f：）を使用している。

JSF2.2からHTMLタグとCoreタグのネームスペースが以下のように変更されている。ただし、以下の変更前のネームスペースも使用できる。eclipseのバージョンによっては新しいネームスペースを定義してもコード補完機能のポップアップが表示されない。

24

・・・・

<html xmlns="http://www.w3.org/1999/xhtml"

xmlns:h="http://java.sun.com/jsf/html"

xmlns:f="http://java.sun.com/jsf/core">

adding.xhtml

名称接頭辞用途ネームスペースの宣言

HTMLタグ h： HTMLタグに対応するFaceletsタグ xmlns:h="http://java.sun.com/jsf/html"

Coreタグ f：イベント処理やデータ変換などのHTMLタグを機能的に補完するタグ

xmlns:f="http://java.sun.com/jsf/core"

名称 JSF2.2 ネームスペースの宣言

HTMLタグ http://xmlns.jcp.org/jsf/html

Cireタグ http://xmlns.jcp.org/jsf/core



HTMLタグ：<h:inputText>

25

adding.xhtml

AddingBean.java

<h:form>




</h:inputText>

+




</h:inputText>


</h:form>

private Integer addend;

private Integer augend;

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



HTMLタグ：<h:dataTable>

h:dataTable タグはコレクション(List,配列など)のデータを表にして表示する。 HTML の <table> タグに対応している。h:column タグは表に列を生成する。

当アプリケーションでは、value属性に指定したaddingBean.historyが出力するリストになる。varはリストの中の１つの要素を表す変数名を表している。

レンダリングする際にhistoryリストの先頭から最後まで繰り返し要素が取り出され、表が作成される。

26

<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>

adding.xhtml

AddingBean.java

@Inject

private RecordList history;



HTMLタグ：<h:outputFormat>

h:outputFormat タグは文字列にデータを埋め込んで表示する。出力するテキストはvalue属性に指定する。value属性には、｛０｝｛１｝｛２｝のようなパラメータを指定できる。パラメータはf:paramタグで指定し、記した順番にしたがって｛０｝｛１｝・・・に埋め込まれる。当アプリケーションのadding.xhtmlはEL式を使ってf:paramのvalue属性にBeanの変数を指定している。

27

<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>

adding.xhtml

Record.java

public class Record implements Serializable {

protected Integer addend;

protected Integer augend;

protected Integer result;



HTMLタグ：<h:commandButton> （１）

28

adding.xhtml

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;

}

h:commandButton タグは、コマンドボタンを作成する。action属性にはビジネスロジックを実行する管理Beanのメソッドを指定する。以下の例では、コマンドボタンを押すと、action属性で指定した管理Bean”addingBean”のaddメソッドが実行される。



HTMLタグ：<h:commandButton> （２）画面遷移

AddingBeanのaddメソッドの戻り値にはnullが指定されている。戻り値にnullを指定すると同じページが表示される。

戻り値に遷移先のXHTMLを指定すると画面が遷移する。例、return "nextPage"

29

adding.xhtml

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;

}



コンバーター：<f:converter>

コンバーターは、テキスト入力フィールドと管理Beanのプロパティ間でデータ変換を行う。例えば、テキスト入力フィールドに入力された文字列をJavaのIntegerやDate型に変換する。また、IntegerやDate型のオブジェクトを、h:outputTextタグなどで画面上に出力する。

変換に失敗した場合は、h:messages タグなどを記述しておくと、エラーとして通知する。

30

adding.xhtml

<h:form>




</h:inputText>

+




</h:inputText>


</h:form>

入力されたデータを、Integer型に変換するコンバーターを指定している。コンバートされたデータは、Integer型のaddingBeanのaugend、addendプロパティに保存される。



バリデーター：<f:validateLongRange>

バリデーターは、入力されたデータが適切に記述されているかを検証する。 h:messages タグなどを記述しておくと、不適切な箇所があった場合にはエラーとして通知する。

当アプリケーションでは、 f:validateLongRange タグを使用し、longなど整数値について範囲を指定している。ここでは最小値：０、最大値：１００に制限している。

31

adding.xhtml

<h:form>




</h:inputText>

+




</h:inputText>


</h:form>入力値の上限は100のためエラーになる

何も入力していないためエラーになる



エラーメッセージ： <h:messages>

32

<h:messages id="messages" style="color:#ff0000;" />

・・・・



・・・・



h:messages タグは全てのコンポーネントからのエラーメッセージを一括して表示するタグ。１つ指定しておくことで、そのページで発生したメッセージを全て表示する。

以下の例では、コンバーターとバリデーターのエラーが表示されている。

AddingBean.xhtml

入力された文字列のコンバートとバリデーションの結果を画面に表示している。変換エラー：入力されたデータがInteger型に変換できません。バリデーションエラー：文字が入力されていない



JSFアプリケーションの動作

ブラウザからHTTPリクエストをサーバに対して送信すると、FacesServletがリクエストを受信する。FacesServletがリクエストを受信すると、XHTMLや管理Beanなどの適切なコンテンツに対してリクエストをリダイレクトする。

Faceletsタグで作成したページはJSF内部でオブジェクトに変換される。そしてJSFページをオブジェクトの集合体に変換して保持している。これをコンポーネントツリーという。JSFはリクエストを受けてからXHTMLを読み込んで、コンポーネントツリーに変換し、JSF内部で処理を実行した後にレスポンスを返す。次ページにJSFがリクエストを受けてからレスポンスを返すまでの一連の流れを記載する。

33

HTTP

リクエスト

HTTP

レスポンス

XHTML

管理Bean

コンバーター

バリデーター

FacesServlet

レンダリング

リクエストの制御、コンポーネントツリーと管理Beanの呼び出しを実行する。

入力値の有効性を検証する。

入出力の文字列と管理Beanの間のデータ型の変換を行う。

FaceletsタグでWeb画面を作成。EL式を使って管理Beanとバインドする。ビジネスロジックや画面遷移を

実行する。データを保持する。

コンポーネントツリーからHTMLファイルを生成する。



JSFのライフサイクル（１）

JSFがリクエストを受信したあとにスレッド上で実行される一連の処理をJSFのライフサイクルという。JSFのライフサイクルは以下の６段階にあらわせる。

具体的には、受信したデータを管理Beanにバインドし、指定されたメソッドなどを実行し、最後にレンダリングしてJSFページを送信するまでの過程をいう。

34

ビュー復元入力値の変換と検証

モデル値の更新アプリケーションの呼び出し

レスポンスのレンダリング

リクエスト

レスポンス

① ② ③

④⑤⑥

入力値の適用



JSFのライフサイクル（２）

以下に前スライドのライフサイクルの各フェーズについて記載する。

① ビュー復元

–リクエストに対応するコンポーネントツリーを復元する。新規リクエストの場合、新規にコンポーネントツリーを作成し⑥に移る。

② 入力値適用

–コンポーネントツリーの中にあるコンポーネントオブジェクトに受信した入力値をセットする。

③ 変換と検証

–コンポーネントのうち、型変換が必要な場合は変換を実行する。入力値に範囲や文字パターンなどの条件が付けられている場合には適正か検証する。エラーが検出された場合には⑥に移る。

④ モデル値の更新

–コンポーネントの値を管理BeanのフィールドにEL式にしたがってセットする。

⑤ アプリケーションの呼び出し

–ビジネスロジックなどを実行する。

⑥ レスポンスのレンダリング

– JSFページをレンダリングしてブラウザに返信する。レンダラーによりコンポーネントツリーからHTMLを生成して返す。

35



JSFのライフサイクル（３）以下は当アプリケーションにアクセスした際の一連の流れを表している。

36

１．ブラウザからアクセス

２．ブラウザにJSFページが表示される。

（このアプリケーションでは入力欄と履歴の初期値は空にしている）

３．表示されたブラウザに数字を入力し、送信ボタンをクリックする。

４．計算結果がブラウザに表示される

JSFのライフサイクル

① ビューの復元

–新規リクエストのため、コンポーネントツリーを生成する。

② レスポンスのレンダリング

– コンポーネントツリーから管理Beanの初期値でHTMLを生成し、ブラウザに返信する。

① ビュー復元

– リクエストに対応するコンポーネントツリーを復元する。

② 入力値適用

–受信した入力値をコンポーネントオブジェクトにセットする。

③ 変換と検証

– コンバーターとバリデーターを実行する。

④ モデル値の更新

–入力値を管理Beanのフィールドにセットする。

⑤ アプリケーションの呼び出し

–計算メソッドを実行する。

⑥ レスポンスのレンダリング

– コンポーネントツリーから計算結果を含むHTMLを生成して返信する。

ユーザーインターフェース



５. 開発の仕方

37



開発の流れ

1. EclipseとWDTの導入

2. JSF Projectの作り方

– Webプロジェクトを作成し、JSFのファセットを有効にする

3. XHTMLの新規作成

4. XHTMLの編集

– Palleteからドラッグ＆ドロップで開発を行う

38



１． EclipseとWDTの導入

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

–http://www.ibm.com/developerworks/jp/websphere/library/was/liberty_intro/1.html

39

http://www.ibm.com/developerworks/jp/websphere/library/was/liberty_intro/1.html



２．JSF Projectの作り方 - Webプロジェクト（１）

40

１．ツールバーの「File」を開いて「New」 - 「Dynamic Web

Project」を開く。

２．「Project Name」を入力して「Next」をクリックする。



２．JSF Projectの作り方 - Webプロジェクト（２）

41

３．「Next」をクリックする。

４．「Context root」を入力し、「Generate web.xml deployment descriptor」にチェックを入れて「Finish」をクリックする。



２．JSF Projectの作り方 - Project Facetsの設定（１）

42

６．「Project Facets」を選択して「JavaServer Faces」と「Context and

dependency injection(CDI)」にチェックを入れる。ここでOKすると、web.xmlが作られ、FacesServletが自動で登録される。自動で登録される内容を確認または修正したい場合は「Further

configuration available」をクリックする。

５．プロジェクトを右クリックして「Properties」を開く。



２．JSF Projectの作り方 - Project Facetsの設定（２）

43

８．「OK」をクリックする。

７．「OK」をクリックする。

web.xmlに登録されるFacesServletの情報



３．XHTMLの新規作成 - New web page（１）

44

１．「File」 - 「New」-「Web Page」を開く。

２．「HTML」を選択する。「File Name」を入力して、「options」をクリックする。



３．XHTMLの新規作成 - New web page（２）

45

４．「Finish」をクリックする。

３．「Markup Language：XHTML」「Document Type：XHTML 1.0 Traditional」を選択して

「Close」をクリックする。



４．XHTMLの編集 - Open with web page editor

46

２．必要なJSFタグをPalleteからドラッグ＆ドロップで開発が行える。

１．xhtmlファイルを右クリックして「Open eith」を選択し、「Web

Page Editor」をクリックする。



６. まとめ

47



まとめ

当ガイドでは Java EE 7 アプリケーション設計ガイドとして、JSF 2.2 の入門編について解説を行いました。

48

• JSFはJava EE標準仕様のWebアプリケーション・フレームワーク

• 画面表示技術に、Facelets(XHTML)を採用

• 画面に配置したコンポーネントに処理をひも付けることが可能

• EL式によりXHTMLと管理Beanをバインド

JSF 2.2



参考文献

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

https://jcp.org/en/jsr/detail?id=344

http://docs.oracle.com/javaee/7/api/

http://docs.oracle.com/javaee/7/tutorial/index.html

http://www-01.ibm.com/support/knowledgecenter/SSD28V/welcome

https://developer.ibm.com/wasdev/

http://www-01.ibm.com/support/knowledgecenter/was_beta_liberty/as_ditamaps/wasbeta_welcome_wlp.html

java ee 7 アプリケーション設計ガイド -...

Documents