Java EE 7 アプリケーション設計ガイド - JSF(JavaServer Faces) 2.2 入門編 日本アイ・ビー・エム システムズ・エンジニアリング株式会社
by user
Comments
Transcript
Java EE 7 アプリケーション設計ガイド - JSF(JavaServer Faces) 2.2 入門編 日本アイ・ビー・エム システムズ・エンジニアリング株式会社
Java EE 7 アプリケーション設計ガイド
- JSF(JavaServer Faces) 2.2 入門編
日本アイ・ビー・エム システムズ・エンジニアリング株式会社
1
© 2015 IBM Corporation
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
© 2015 IBM Corporation
Java EE 7 アプリケーション設計ガイド –JSF(JavaServer Faces)2.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のライフサイクル
3
5. 開発の仕方
1. Eclipse Luna とWDTの導入
2. JSF Projectの作り方
• Webプロジェクト
• Project Facetsの設定
3. XHTMLの新規作成
• New web page
4. XHTMLの編集
• Open with web page editor
6. まとめ
© 2015 IBM Corporation
Java EE 7 アプリケーション設計ガイド –JSF(JavaServer Faces)2.2 入門編
1. はじめに
4
© 2015 IBM Corporation
Java EE 7 アプリケーション設計ガイド –JSF(JavaServer Faces)2.2 入門編
Java EE 7 に含まれる仕様 (JSR一覧)
Java EE 7 では、４つの仕様が新規に追加され、３つの仕様がバージョンアップされている
当ガイドでは、Java EE7で機能拡張されたJSF 2.2を対象とし、その入門編とする。
CDI
Extensions
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
Managed Beans 1.0
JPA 2.1
5
JMS 2.0
Concurrency 1.0
EJB 3.2
JCA 1.7
Bean Validations 1.1
JSF 2.2
JSP 2.3
EL 3.0
Web
Fragments
Batch 1.0
© 2015 IBM Corporation
Java EE 7 アプリケーション設計ガイド –JSF(JavaServer Faces)2.2 入門編
WebSphere Application Serverのサポート状況
（2015年7月現在)
Liberty Profile
– WAS V8.5.5.6でJSF2.2対応
Full Profile（従来のWebSphere Application Server)
– JSF2.0対応
6
© 2015 IBM Corporation
Java EE 7 アプリケーション設計ガイド –JSF(JavaServer Faces)2.2 入門編
2. JSFとは
7
© 2015 IBM Corporation
Java EE 7 アプリケーション設計ガイド –JSF(JavaServer Faces)2.2 入門編
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
© 2015 IBM Corporation
Java EE 7 アプリケーション設計ガイド –JSF(JavaServer Faces)2.2 入門編
JSFアプリケーションの構成（１）
JSFはMVCアーキテクチャーのフレームワークである。そのため、JSFアプリケーションでは次の3つの要素が中心的な
役割を果たす。これらのうち、FacesServletはJSFのフレームワークが提供するものであり、開発者は残る2つ（
Faceletsと管理Bean）をアプリケーション毎に作成する。
HTTP
リクエスト
HTTP
レスポンス
Controller
(Faces Servlet)
Model
(管理Bean)
操作・
リダイレクト
View
(Facelets)
9
生成・管理
アクセス
© 2015 IBM Corporation
Java EE 7 アプリケーション設計ガイド –JSF(JavaServer Faces)2.2 入門編
JSFアプリケーションの構成（２）
1. FacesServlet（Controller）
– Webブラウザとのやり取りの窓口の役割を果たす。リクエストを受け取ると適切なコンポーネントに処理を受け渡し、処理結果
を受けて新しいビューを生成し、ブラウザに返信する。
2. Facelets（View）
詳細は４章で解説する
– 画面の構成要素を記述する。XHTML内にJSFのタグを記述すると、そのタグに対応したコンポーネントが必要な処理を行う。
– 処理の結果はコンポーネント・ツリーとして構成され、レンダリングされたものがレスポンスとなる。
3. 管理Bean（Model）
詳細は４章で解説する
– 画面遷移やビジネス・ロジックの呼び出し、入出力値の管理などを行うコンポーネント。JSFの管理BeanとCDIの管理Bean
が使える。当資料ではCDIの管理Beanを使用する。
10
© 2015 IBM Corporation
Java EE 7 アプリケーション設計ガイド –JSF(JavaServer Faces)2.2 入門編
3. 作成するアプリケーションの概要
11
© 2015 IBM Corporation
Java EE 7 アプリケーション設計ガイド –JSF(JavaServer Faces)2.2 入門編
画面と動き
当資料は以下のように画面が遷移するアプリケーションを使ってJSFの基本的な機能を説明する。
アプリケーションの動き：ブラウザから開始ページにアクセスして、入力欄に数字を入力後、「計算」ボタンをクリックす
ると計算結果が「履歴」に表示される。
再度数字を入力して「計算」をクリック
すると、履歴に計算結果が表示される。
「計算」をクリック
数字を入力
計算結果が表示される
12
© 2015 IBM Corporation
Java EE 7 アプリケーション設計ガイド –JSF(JavaServer Faces)2.2 入門編
構成要素
当アプリケーションでは以下のファイルを用意する。
次ページ以降にファイルの全ソースを示すが、解説は次章以降で行う。
Facelets（XHTML）
–adding.xhtml：FaceletsのHTMLタグやCoreタグを使ってブラウザ画面の構成要素を記述している。EL式
を使って管理Beanにバインドしている。
管理Bean
–AddingBean.java：
–RecordList.java：
Javaクラス
–Record.java：
13
計算メソッドを実行するオブジェクト。
HTTPセッションが有効な間、計算結果の履歴を保持する。
個々の計算結果はRecord.javaに保持する。
個々の計算結果を保持する
© 2015 IBM Corporation
Java EE 7 アプリケーション設計ガイド –JSF(JavaServer Faces)2.2 入門編
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.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}">
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>
© 2015 IBM Corporation
Java EE 7 アプリケーション設計ガイド –JSF(JavaServer Faces)2.2 入門編
管理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;
import javax.inject.Named;
@Named
@RequestScoped
public class AddingBean implements Serializable {
private Integer addend;
private Integer augend;
@Inject
private RecordList history;
public Object add() {
Record record = new Record();
record.augend = augend;
record.addend = addend;
record.result = augend + addend;
history.add(record);
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;
}
}
© 2015 IBM Corporation
Java EE 7 アプリケーション設計ガイド –JSF(JavaServer Faces)2.2 入門編
管理Bean RecordList.javaのソース
javaクラス Record.javaのソース
RecordList.java
Record.java
package javaee7jsf22;
import java.io.Serializable;
package javaee7jsf22;
import java.util.ArrayList;
import javax.enterprise.context.RequestScoped;
import javax.enterprise.context.SessionScoped;
@SessionScoped
public class RecordList extends ArrayList<Record> {
}
16
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;
}
}
© 2015 IBM Corporation
Java EE 7 アプリケーション設計ガイド –JSF(JavaServer Faces)2.2 入門編
４. JSFの機能説明
17
© 2015 IBM Corporation
Java EE 7 アプリケーション設計ガイド –JSF(JavaServer Faces)2.2 入門編
管理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
© 2015 IBM Corporation
Java EE 7 アプリケーション設計ガイド –JSF(JavaServer Faces)2.2 入門編
管理Bean（２）
@Named
@Namedは管理Beanに任意の名前を付けるアノテーション。@Namedで付けた名前はEL名という。
EL名をもつ管理Beanだけが、JSFページからアクセスできるようになる。Facelets（XHTML）に、EL（
Expression Language）式を記述することで、CDIの管理Beanを参照することができる。@Namedの後に
名前を指定しない場合にはクラス名の最初の文字を小文字にしたデフォルト名が使用される。
AddingBean.java
adding.xhtml
・・・・
import javax.inject.Named;
・・・・
<h:inputText required="true" id="augend" value=
"#{addingBean.augend}">
・・・・
@Named
@RequestScoped
・・・・
<f:converter converterId="javax.faces.Integer" />
<f:validateLongRange minimum="0" maximum="100" />
</h:inputText>
・・・・
任意の名前にしたい場合、@Namedの後に名前を記述すると別の名前を指定することができる。
例
19
@Named("OtherName")
© 2015 IBM Corporation
Java EE 7 アプリケーション設計ガイド –JSF(JavaServer Faces)2.2 入門編
管理Bean（３）
スコープアノテーション：@RequestScoped, @SessionScoped
CDI管理Beanでは、newでオブジェクトを生成することはできない。その代わりに、管理Beanにスコープアノテーショ
ンを付けることで、Beanの生成と廃棄のタイミングを指定する。オブジェクトの生成と廃棄は、CDIコンテナが自動的
に行う。当アプリケーションでは、@RequestScopedと@SessionScopedを使用している。
– @RequestScoped：HTTPリクエストを受けてからレスポンスを返すまでの間有効
– @SessionScoped：HTTPセッションの間有効
例えば、 @RequestScopedを付けた管理Bean（AddingBean.java）は、ブラウザで送信ボタンを押す動作
（リクエスト）が発生したときにオブジェクトが自動生成される。そして受信したデータを処理し、ブラウザに返信する
動作（レスポンス）が完了すると廃棄される。
AddingBean.java
RecordList.java
@RequestScoped
・・・・
・・・・
@SessionScoped
public class RecordList extends ArrayList<Record>
・・・・
CDIとスコープの詳細については、「Java EE7アプリケーション設計ガイド – CDI1.2編」を参照。
20
© 2015 IBM Corporation
Java EE 7 アプリケーション設計ガイド –JSF(JavaServer Faces)2.2 入門編
管理Bean（４）
@Inject
@Injectは、「変数にオブジェクトを注入する」というCDIのアノテーションである。
当アプリケーションではRecordList型オブジェクトを変数historyに注入している。
AddingBean.java
@RequestScoped
public class AddingBean implements Serializable {
@Inject
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;
}
RecordList.java
・・・・
@SessionScoped
public class RecordList extends ArrayList<Record> {
}
以下のように記述すると、CDI管理Beanではなく、単なるjavaのオブジェクトに
なるので、セッションスコープにならなくなってしまう。
RecordList history = new RecordList();
CDIの詳細については、「Java EE7アプリケーション設計ガイド – CDI1.2編」を参照。
21
© 2015 IBM Corporation
Java EE 7 アプリケーション設計ガイド –JSF(JavaServer Faces)2.2 入門編
Facelets
Faceletsは主にFaceletsタグを使ってXHTMLにウェブ画面 adding.xhtml
を記述する。
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional
XHTMLファイルには主に以下の項目を記述する
//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1
–Faceletsと管理Beanを結び付けるEL式
-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
–ネームスペースの定義
xmlns:h="http://java.sun.com/jsf/html"
–画面表示に関する記述：HTMLタグ、Coreタグ、コンバ xmlns:f="http://java.sun.com/jsf/core">
<h:head>
ーター、バリデーターなど
<title>JavaEE7_JSF2.2</title>
次ページより、アプリケーションを使ってFaceletsに記述する
上記の項目の基本的な使い方について説明する。
ネームスペースの定義
</h:head>
<h:body>
<h:messages id="messages" style="color:#ff0000;" />
<h:form>
<h:inputText required="true" id="augend" value=
"#{addingBean.augend}">
HTMLタグ
22
<f:converter converterId="javax.faces.Integer"
/>
EL式
<f:validateLongRange minimum="0" maximum="100" />
</h:inputText>
・・・・
© 2015 IBM Corporation
Java EE 7 アプリケーション設計ガイド –JSF(JavaServer Faces)2.2 入門編
EL（Expression Language）
以下のアプリケーションのFacelets（XHTML）で使われている#{…}で囲む形式をEL式（ Expression
Language ）という。EL式を使うことで、Faceletsと管理Beanを結びつけることができる。使い方はピリオドをセ
パレータとし、管理Beanの名称に続けて関連付けしたいプロパティ名やメソッド名を指定する。
以下の例において、addingBean.augendは管理BeanのAddingBeanのプロパティaugendを指しており、
JSF画面に入力された値は、プロパティaugendに入力される。このように、h:inputTextタグがaddingBeanの
プロパティとバインドしている。
adding.xhtml
addingBean.java
<h:inputText required="true" id="augend" value="#{addingBean.augend}">
<f:converter converterId="javax.faces.Integer" />
<f:validateLongRange minimum="0" maximum="100" />
EL式
</h:inputText>
+
<h:inputText required="true" id="addend" value="#{addingBean.addend}">
･･････
<h:commandButton value="計算" action="#{addingBean.add}" />
･･････
private Integer augend;
・・・・
23
AddingBeanにはプロ
パティaugendの
getter/setterが定義
されている。
public Integer getAugend() {
return augend;
}
・・・・
public void setAugend(Integer augend) {
this.augend = augend;
}
© 2015 IBM Corporation
Java EE 7 アプリケーション設計ガイド –JSF(JavaServer Faces)2.2 入門編
タグライブラリの定義
Faceletsタグを使用するためにはネームスペースの宣言が必要になる。当アプリケーションではHTMLタグ（接頭辞
h：）とCoreタグ（接頭辞 f：）を使用している。
JSF2.2からHTMLタグとCoreタグのネームスペースが以下のように変更されている。ただし、以下の変更前のネーム
スペースも使用できる。eclipseのバージョンによっては新しいネームスペースを定義してもコード補完機能のポップアッ
プが表示されない。
名称
接頭辞
用途
ネームスペースの宣言
HTMLタグ
h：
HTMLタグに対応するFaceletsタグ
xmlns:h="http://java.sun.com/jsf/html"
Coreタグ
f：
イベント処理やデータ変換などの
HTMLタグを機能的に補完するタグ
xmlns:f="http://java.sun.com/jsf/core"
adding.xhtml
・・・・
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
24
名称
JSF2.2 ネームスペースの宣言
HTMLタグ
http://xmlns.jcp.org/jsf/html
Cireタグ
http://xmlns.jcp.org/jsf/core
© 2015 IBM Corporation
Java EE 7 アプリケーション設計ガイド –JSF(JavaServer Faces)2.2 入門編
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
© 2015 IBM Corporation
Java EE 7 アプリケーション設計ガイド –JSF(JavaServer Faces)2.2 入門編
HTMLタグ：<h:dataTable>
h:dataTable タグはコレクション(List,配列など)のデータを表にして表示する。 HTML の <table> タグに対応
している。h:column タグは表に列を生成する。
当アプリケーションでは、value属性に指定したaddingBean.historyが出力するリストになる。varはリストの中
の１つの要素を表す変数名を表している。
レンダリングする際に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}" />
AddingBean.java
<f:param value="${record.result}" />
</h:outputFormat>
@Inject
</h:column>
private RecordList history;
</h:dataTable>
26
© 2015 IBM Corporation
Java EE 7 アプリケーション設計ガイド –JSF(JavaServer Faces)2.2 入門編
HTMLタグ：<h:outputFormat>
h:outputFormat タグは文字列にデータを埋め込んで表示する。出力するテキストはvalue属性に指定する。
value属性には、｛０｝｛１｝｛２｝のようなパラメータを指定できる。 パラメータはf:paramタグで指定し、記
した順番にしたがって｛０｝｛１｝・・・に埋め込まれる。当アプリケーションのadding.xhtmlはEL式を使って
f:paramのvalue属性にBeanの変数を指定している。
adding.xhtml
<h:dataTable id="history" value="${addingBean.history}" var="record"
border="1">
Record.java
public class
protected
protected
protected
27
Record implements Serializable {
Integer addend;
Integer augend;
Integer result;
<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>
© 2015 IBM Corporation
Java EE 7 アプリケーション設計ガイド –JSF(JavaServer Faces)2.2 入門編
HTMLタグ：<h:commandButton> （１）
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
© 2015 IBM Corporation
Java EE 7 アプリケーション設計ガイド –JSF(JavaServer Faces)2.2 入門編
HTMLタグ：<h:commandButton> （２）画面遷移
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
© 2015 IBM Corporation
Java EE 7 アプリケーション設計ガイド –JSF(JavaServer Faces)2.2 入門編
コンバーター：<f:converter>
コンバーターは、テキスト入力フィールドと管理Beanのプロパティ間でデータ変換を行う。例えば、テキスト入力フィー
ルドに入力された文字列をJavaのIntegerやDate型に変換する。また、IntegerやDate型のオブジェクトを、
h:outputTextタグなどで画面上に出力する。
変換に失敗した場合は、h:messages タグなどを記述しておくと、エラーとして通知する。
adding.xhtml
入力されたデータを、Integer型に変換するコンバーターを
指定している。コンバートされたデータは、Integer型の
addingBeanのaugend、addendプロパティに保存され
る。
30
<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>
© 2015 IBM Corporation
Java EE 7 アプリケーション設計ガイド –JSF(JavaServer Faces)2.2 入門編
バリデーター：<f:validateLongRange>
バリデーターは、入力されたデータが適切に記述されているかを検証する。 h:messages タグなどを記述しておくと
、不適切な箇所があった場合にはエラーとして通知する。
当アプリケーションでは、 f:validateLongRange タグを使用し、longなど整数値について範囲を指定している。
ここでは最小値：０、最大値：１００に制限している。
adding.xhtml
入力値の上限は100の
ためエラーになる
31
何も入力していないため
エラーになる
<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>
© 2015 IBM Corporation
Java EE 7 アプリケーション設計ガイド –JSF(JavaServer Faces)2.2 入門編
エラーメッセージ： <h:messages>
h:messages タグは全てのコンポーネントからのエラーメッセージを一括して表示するタグ。 １つ指定しておくこと
で、そのページで発生したメッセージを全て表示する。
以下の例では、コンバーターとバリデーターのエラーが表示されている。
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
© 2015 IBM Corporation
Java EE 7 アプリケーション設計ガイド –JSF(JavaServer Faces)2.2 入門編
JSFアプリケーションの動作
ブラウザからHTTPリクエストをサーバに対して送信すると、FacesServletがリクエストを受信する。FacesServletがリクエストを受信すると、
XHTMLや管理Beanなどの適切なコンテンツに対してリクエストをリダイレクトする。
Faceletsタグで作成したページはJSF内部でオブジェクトに変換される。そしてJSFページをオブジェクトの集合体に変換して保持している。これ
をコンポーネントツリーという。JSFはリクエストを受けてからXHTMLを読み込んで、コンポーネントツリーに変換し、JSF内部で処理を実行した後
にレスポンスを返す。次ページにJSFがリクエストを受けてからレスポンスを返すまでの一連の流れを記載する。
入出力の文字列と管理Beanの間
のデータ型の変換を行う。
リクエストの制御、コンポーネントツリーと
管理Beanの呼び出しを実行する。
HTTP
リクエスト
コンバーター
XHTML
FacesServlet
バリデーター
HTTP
レスポンス
レンダリング
コンポーネントツリーから
HTMLファイルを生成する。
FaceletsタグでWeb画面を
作成。EL式を使って管理
Beanとバインドする。
33
入力値の有効性
を検証する。
管理Bean
ビジネスロジックや画面遷移を
実行する。データを保持する。
© 2015 IBM Corporation
Java EE 7 アプリケーション設計ガイド –JSF(JavaServer Faces)2.2 入門編
JSFのライフサイクル（１）
JSFがリクエストを受信したあとにスレッド上で実行される一連の処理をJSFのライフサイクルという。JSFのライフサイ
クルは以下の６段階にあらわせる。
具体的には、受信したデータを管理Beanにバインドし、指定されたメソッドなどを実行し、最後にレンダリングして
JSFページを送信するまでの過程をいう。
リクエスト
①
②
ビュー復元
レスポンス
34
⑥
レスポンスの
レンダリング
入力値の適用
⑤
アプリケーション
の呼び出し
③
入力値の
変換と検証
④
モデル値の更新
© 2015 IBM Corporation
Java EE 7 アプリケーション設計ガイド –JSF(JavaServer Faces)2.2 入門編
JSFのライフサイクル（２）
以下に前スライドのライフサイクルの各フェーズについて記載する。
① ビュー復元
– リクエストに対応するコンポーネントツリーを復元する。新規リクエストの場合、新規にコンポーネントツリーを作成し⑥に移る。
② 入力値適用
– コンポーネントツリーの中にあるコンポーネントオブジェクトに受信した入力値をセットする。
③ 変換と検証
– コンポーネントのうち、型変換が必要な場合は変換を実行する。入力値に範囲や文字パターンなどの条件が付けられている
場合には適正か検証する。エラーが検出された場合には⑥に移る。
④ モデル値の更新
– コンポーネントの値を管理BeanのフィールドにEL式にしたがってセットする。
⑤ アプリケーションの呼び出し
– ビジネスロジックなどを実行する。
⑥ レスポンスのレンダリング
– JSFページをレンダリングしてブラウザに返信する。レンダラーによりコンポーネントツリーからHTMLを生成して返す。
35
© 2015 IBM Corporation
Java EE 7 アプリケーション設計ガイド –JSF(JavaServer Faces)2.2 入門編
JSFのライフサイクル（３）
以下は当アプリケーションにアクセスした際の一連の流れを表している。
ユーザーインターフェース
１．ブラウザからアクセス
２．ブラウザにJSFページが表示される。
（このアプリケーションでは入力欄と履歴の初
期値は空にしている）
３．表示されたブラウザに数字を入力し、送信
ボタンをクリックする。
４．計算結果がブラウザに表示される
36
JSFのライフサイクル
① ビューの復元
– 新規リクエストのため、コンポーネントツリーを生成する。
② レスポンスのレンダリング
– コンポーネントツリーから管理Beanの初期値でHTMLを生成し、ブラウザに返信
する。
① ビュー復元
– リクエストに対応するコンポーネントツリーを復元する。
② 入力値適用
– 受信した入力値をコンポーネントオブジェクトにセットする。
③ 変換と検証
– コンバーターとバリデーターを実行する。
④ モデル値の更新
– 入力値を管理Beanのフィールドにセットする。
⑤ アプリケーションの呼び出し
– 計算メソッドを実行する。
⑥ レスポンスのレンダリング
– コンポーネントツリーから計算結果を含むHTMLを生成して返信する。
© 2015 IBM Corporation
Java EE 7 アプリケーション設計ガイド –JSF(JavaServer Faces)2.2 入門編
５. 開発の仕方
37
© 2015 IBM Corporation
Java EE 7 アプリケーション設計ガイド –JSF(JavaServer Faces)2.2 入門編
開発の流れ
1. EclipseとWDTの導入
2. JSF Projectの作り方
–
Webプロジェクトを作成し、JSFのファセットを有効にする
3. XHTMLの新規作成
4. XHTMLの編集
–
38
Palleteからドラッグ＆ドロップで開発を行う
© 2015 IBM Corporation
Java EE 7 アプリケーション設計ガイド –JSF(JavaServer Faces)2.2 入門編
１． EclipseとWDTの導入
以下のサイトの手順を参考にEclipseとWDTを導入する。
–http://www.ibm.com/developerworks/jp/websphere/library/was/liberty_intro/1.html
39
© 2015 IBM Corporation
Java EE 7 アプリケーション設計ガイド –JSF(JavaServer Faces)2.2 入門編
２．JSF Projectの作り方
- Webプロジェクト（１）
１．ツールバーの「File」を開いて「New」 - 「Dynamic Web
Project」を開く。
２．「Project Name」を入力して「Next」をクリックする。
40
© 2015 IBM Corporation
Java EE 7 アプリケーション設計ガイド –JSF(JavaServer Faces)2.2 入門編
２．JSF Projectの作り方
- Webプロジェクト（２）
４．「Context root」を入力し、「Generate web.xml deployment descriptor」に
チェックを入れて「Finish」をクリックする。
３．「Next」をクリックする。
41
© 2015 IBM Corporation
Java EE 7 アプリケーション設計ガイド –JSF(JavaServer Faces)2.2 入門編
２．JSF Projectの作り方
- Project Facetsの設定（１）
５．プロジェクトを右クリックして「Properties」を開く。
６．「Project Facets」を選択して「JavaServer Faces」と「Context and
dependency injection(CDI)」にチェックを入れる。
ここでOKすると、web.xmlが作られ、FacesServletが自動で登録される。
自動で登録される内容を確認または修正したい場合は「Further
configuration available」をクリックする。
42
© 2015 IBM Corporation
Java EE 7 アプリケーション設計ガイド –JSF(JavaServer Faces)2.2 入門編
２．JSF Projectの作り方
- Project Facetsの設定（２）
web.xmlに登録されるFacesServletの情報
８．「OK」をクリックする。
７．「OK」をクリックする。
43
© 2015 IBM Corporation
Java EE 7 アプリケーション設計ガイド –JSF(JavaServer Faces)2.2 入門編
３．XHTMLの新規作成
- New web page（１）
１．「File」 - 「New」-「Web Page」を開く。
２．「HTML」を選択する。「File Name」を入力して、「options」をク
リックする。
44
© 2015 IBM Corporation
Java EE 7 アプリケーション設計ガイド –JSF(JavaServer Faces)2.2 入門編
３．XHTMLの新規作成
- New web page（２）
３．「Markup Language：XHTML」
「Document Type：XHTML 1.0 Traditional」を選択して
「Close」をクリックする。
45
４．「Finish」をクリックする。
© 2015 IBM Corporation
Java EE 7 アプリケーション設計ガイド –JSF(JavaServer Faces)2.2 入門編
４．XHTMLの編集
- Open with web page editor
２．必要なJSFタグをPalleteからドラッグ＆ドロップで開
発が行える。
１．xhtmlファイルを右クリックして「Open eith」を選択し、「Web
Page Editor」をクリックする。
46
© 2015 IBM Corporation
Java EE 7 アプリケーション設計ガイド –JSF(JavaServer Faces)2.2 入門編
６. まとめ
47
© 2015 IBM Corporation
Java EE 7 アプリケーション設計ガイド –JSF(JavaServer Faces)2.2 入門編
まとめ
当ガイドでは Java EE 7 アプリケーション設計ガイドとして、JSF 2.2 の入門編について解説を行いました。
JSF 2.2
• JSFはJava EE標準仕様のWebアプリケーション・フレームワーク
• 画面表示技術に、Facelets(XHTML)を採用
• 画面に配置したコンポーネントに処理をひも付けることが可能
• EL式によりXHTMLと管理Beanをバインド
48
© 2015 IBM Corporation
Java EE 7 アプリケーション設計ガイド –JSF(JavaServer Faces)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
© 2015 IBM Corporation