『Java EE 7 徹底入門』
プレゼンテーション層の開発 JSF
2016/02/15 JJUG ナイトセミナー
#JJUG
加藤田 益嗣
@den2sn
Safe Harbor Statement
• 本資料は私個人の見解であり所属会社の見解を反映したものではありません。
• 本資料の作成にあたっては正確な記述につとめましたが、内容に対してなんら
保証をするものではなく、内容に基づくいかなる運用結果に関してもいっさいの
責任を負いません。
22016/02/15 JJUG Night Seminar #JJUG
自己紹介
加藤田 益嗣(Katoda Masuji)
• 日本オラクル株式会社
クラウド・テクノロジーコンサルティング統括本部
シニアコンサルタント
• Java、Java EEの開発技術支援
• Java EE 7 徹底入門[第2~4 章担当]
32016/02/15 JJUG Night Seminar #JJUG
本日話す内容
• 本書の概要
• JSFの概要と構成要素
• 本書では触れられなかった話
42016/02/15 JJUG Night Seminar #JJUG
本書の概要
2016/02/15 JJUG Night Seminar #JJUG 5
アンケート
JSFを使用して開発したことがある方
62016/02/15 JJUG Night Seminar #JJUG
(^_^)/
Java EE 7徹底入門の目次
• 第1章 Java EEの基礎知識
• 第2章 プレゼンテーション層の開発―JSFの基本
• 第3章 プレゼンテーション層の開発―JSFの応用 その1
• 第4章 プレゼンテーション層の開発―JSFの応用 その2
• 第5章 ビジネスロジック層の開発―CDIの利用
• 第6章 ビジネスロジック層の開発―EJBの利用
• 第7章 データアクセス層の開発―JPAの基本
• 第8章 データアクセス層の開発―JPAの応用
• 第9章 RESTful Webサービスの開発
• 第10章 バッチアプリケーションの開発
72016/02/15 JJUG Night Seminar #JJUG
約150
ページ
Java EE 7徹底入門の目次(第2~4章)
• 第2章 JSFの基本
– JSF概要
– JSFの構成要素
– JSFの画面遷移
– JSF の内部処理
– JSF の基本設定
– フェースレットタグライブラリ
– EL(Expression
Language)
• 第4章 JSFの応用 その2
– 認証/認可
– 国際化
– ブックマーカビリティ
– フェーズリスナ
– Java EE 7で導入されたJSF
の機能
– まとめ
2016/02/15 JJUG Night Seminar #JJUG 8
• 第3章 JSFの応用 その1
– 入力チェック
– コンバータ
– コンポーネントのカスタマイズ
– フェースレットテンプレート
– HTML5フレンドリマークアップ
– Ajax
第2~4章で説明するJSFの主な機能
92016/02/15 JJUG Night Seminar #JJUG
サーバ
フェースレット
マネージドビーン
タグライブラリ
EL
画面遷移 スコープ
入力チェック コンバータ
コンポーネント
テンプレート
HTML5
Ajax
認証認可
国際化
ブックマーカビリティ
フェーズリスナ
ユーザ
第2章
第3章
第4章
サンプルアプリケーション
• ナレッジバンク
– ナレッジを収集するためのシステム
– ナレッジの投稿、コメントの追加が可能
– 本書でより実用的な機能を説明するために作成
102016/02/15 JJUG Night Seminar #JJUG
サンプルアプリケーションのデモ
2016/02/15 JJUG Night Seminar #JJUG 11
サンプルアプリケーションの画面遷移
2016/02/15 JJUG Night Seminar #JJUG 12
アカウント登録ログイン
ナレッジ変更
ナレッジ投稿
アカウント登録
登録
ログイン
検索
詳細
変更
投稿
削除
コメント投稿
ナレッジ投稿
ログアウト
変更
ナレッジ詳細
ナレッジ一覧
JSFの概要と構成要素
2016/02/15 JJUG Night Seminar #JJUG 13
JSFとは
• Java EE 5から導入されたプレゼンテーション層を作成するための
フレームワーク
• Java EE 7でのバージョンはJSF2.2
142016/02/15 JJUG Night Seminar #JJUG
データ
ベース
アプリケーションサーバ
JPA
jBatch
EJB
JAX-RS
JSF
CDI
アプリケーション
プレゼンテーション層のフレームワーク
• 主にブラウザの画面とサーバ間の処理を受け持つ
• Java EE 5以前はサーブレット+JSPを使用
– HTTPアクセスに対する低レイヤーの機能を提供
• サーブレットだけでは値のマッピングや入力チェックなどWebアプリ
ケーションで必要な機能がなく、サードパーティ製フレームワークを
併用
– Struts、Spring MVC等
• Java EE 5以降はJSFをJava EEの標準仕様として導入
152016/02/15 JJUG Night Seminar #JJUG
プレゼンテーション層のフレームワークイメージ
2016/02/15 JJUG Night Seminar #JJUG 16
サーブレット
Struts Spring MVC JSF
Webアプリケーション Webアプリケーション Webアプリケーション
ブラウザとHTTP通信を
するための機能を提供
値のマッピングや
入力値のチェックやなど、
Webアプリケーションで必要な
機能を提供
開発するアプリケーション
Java EEの仕様で提供
JSFの構成要素
• JSFを構成する要素にはフェースレットとマネージドビーンがある
2016/02/15 JJUG Night Seminar #JJUG 17
フェースレット
マネージドビーン
画面の定義
処理の定義
フェースレットとは
• 画面のレイアウトを記述するXHTMLベースのテン
プレートエンジン
• JSF2.0からJSPの代わりに使用
182016/02/15 JJUG Night Seminar #JJUG
フェースレット
マネージドビーン
フェースレットとJSPとの違い
• XHTML(XML)なので記載が厳密
– 記載を統一しやすい
• スクリプトレットが記載できない
– 画面中にJavaのコードが使用できない
– 画面と処理を明確に分離
• 文字列のサニタイジング
– 表示文字列中のHTMLの特殊文字はサニタイジングする
– セキュアに画面が作成
• nullの文字列表示処理
– nullは空文字として表示
• テンプレート機能
– テンプレート機能をタグライブラリで提供
192016/02/15 JJUG Night Seminar #JJUG
フェースレット
マネージドビーン
フェースレットの記載例
• アカウント登録画面
2016/02/15 JJUG Night Seminar #JJUG 20
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
<title>Knowledge Bank</title>
</h:head>
<h:body>
<div id="top_content">
<h:form id="form">
<h1>アカウント登録</h1>
<div class="entry">
<div>
<label>ユーザID</label>
<div>
<h:inputText id="userId" value="#{accountBean.account.userId}" />
<h:message for="userId" errorClass="error"/>
</div>
...
HTMLとほぼ同様の記載
フェースレット
マネージドビーン
フェースレットの構成要素
• フェースレットタグライブラリ
• EL(Expression Language)
212016/02/15 JJUG Night Seminar #JJUG
フェースレット
マネージドビーン
入力と登録ボタン部分のソースコード
222016/02/15 JJUG Night Seminar #JJUG
<label>ユーザID</label>
<div>
<h:inputText id="userId" value="#{accountBean.account.userId}" />
<h:message for="userId" errorClass="error"/>
</div>
フェースレットが提供する
タグライブラリ
入力項目とマネージドビーンとの紐
付け(バインド)にEL式を利用
<h:commandButton action="#{accountBean.register()}" value="登録" />
ボタンを押下するとregisterメ
ソッドが呼ばれる
フェースレット
マネージドビーン
マネージドビーンとは
• フェースレットとバインドするJavaのクラス
• 入力値の保持やボタン押下時の処理などを行う
232016/02/15 JJUG Night Seminar #JJUG
フェースレット
マネージドビーン
マネージドビーンの構成要素
• スコープ
• バインドする値の保持
• ビジネスロジックの呼び出し
• 画面遷移
242016/02/15 JJUG Night Seminar #JJUG
フェースレット
マネージドビーン
マネージドビーンの記載例
• アカウント登録マネージドビーン
252016/02/15 JJUG Night Seminar #JJUG
@Named
@RequestScoped
public class AccountBean {
private Account account = new Account();
public Account getAccount() {
return account;
}
public void setAccount(Account account) {
this.account = account;
}
public String register() {
account.setAccountGroup("userGroup");
account.setPassword(PasswordUtil.hash(password));
accountFacade.create(account);
return "/login?faces-redirect=true";
}
}
スコープの定義
入力値を保有する
フィールド
ボタン押下時の処理
ログイン画面に遷移
フェースレット
マネージドビーン
フェースレットとマネージドビーンの処理イメージ
262016/02/15 JJUG Night Seminar #JJUG
アカウント登録画面
(account/register.xhtml)
アカウント登録マネージドビーン
(AccountBean.java)
アカウント情報(account)
・ユーザID(userId)
・名前(name)
・メールアドレス(mail)
・パスワード(password)
登録処理(register) {
}
ユーザID
アカウント登録
名前
メールアドレス
パスワード
登録
EL式でバインド
ビジネス
ロジック
の処理へ
コンポーネントを主軸にコードを作成するためコンポーネント指向と言われる。
本書では触れられなかった話
2016/02/15 JJUG Night Seminar #JJUG 27
本書では触れられなかった話
• JSFのより詳細な機能
• Java EE 8(JSF2.3)
• MVC1.0
282016/02/15 JJUG Night Seminar #JJUG
JSFのより詳細な機能
• カスタムコンポーネント
• イベントハンドリング
– Value Change Events
– Action Events
• ビーンバリデーション
– グループ化機能
• EL
– Lambda式
– 文字列連結オペレータ
292016/02/15 JJUG Night Seminar #JJUG
本資料でも詳細な説明は省略。
Java EE 8(JSF2.3)
• JSF2.3で予定されている新機能
– WebSocket対応
• <f:socket>タグ
– マルチフィールドバリデーション
• <f:validateWholeBean>
– Java Timeサポート
• Date and Time APIのサポート
– EL式で利用可能な暗黙オブジェクトの追加
• facesContext、session、viewScopeなど
– マネージドビーン等への@Inject可能なオブジェクトの追加
• FacesContext、ExternalContextなど
302016/02/15 JJUG Night Seminar #JJUG
MVC1.0
• MVC1.0
– アクション指向フレームワーク
– Java EE 8で導入(現在ドラフト)
– JAX-RSを拡張
– ビューにはフェースレット,JSPをサポート
• 画面のコンポーネントなどの提供は現状なし
– 名前が直接的だけど紛らわしい...
312016/02/15 JJUG Night Seminar #JJUG
MVC1.0実装例
2016/02/15 JJUG Night Seminar #JJUG 32
@Path("hello")
public class HelloController {
@GET
@Controller
public String hello() {
return "hello.jsp";
}
}
@Controllerアノテーションを付
加するとMVCの処理と認識
JAX-RSとほぼ同様の記載
hello.jspに遷移
今後のプレゼンテーションの選択肢
332016/02/15 JJUG Night Seminar #JJUG
どのアーキテクチャを選択しても今後はコンポーネント指向に収束。
Java EE 7 Java EE 8
JSF
JAX-RS+クライアントサイドフレームワーク
(AngularJS、React、Backbone.jsなど)
MVC1.0 + Web Components?
まとめ
• プレゼンテーション層の開発について
– Java EE 7環境でのプレゼンテーション層の選択肢
• サーバサイドでJavaで開発=JSF
• クライアントサイドでJavaScriptで開発=クライアントサイドフレームワーク
+JAX-RS
– JSFはかなり成熟(1.0は2004年3月にリリース)
• 本書について
– Java EE 7のJSFを使用した機能を概ね網羅
– サンプルアプリケーションをベースとしたより実践的な説明
342016/02/15 JJUG Night Seminar #JJUG
以上です。
ご清聴ありがとうございました。
2016/02/15 JJUG ナイトセミナー
#JJUG
加藤田 益嗣
@den2sn

JavaEE7徹底入門 プレゼンテーション層の開発 JSF