Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
『Java EE 7 徹底入門』
プレゼンテーション層の開発 JSF
2016/02/15 JJUG ナイトセミナー
#JJUG
加藤田 益嗣
@den2sn
Safe Harbor Statement
• 本資料は私個人の見解であり所属会社の見解を反映したものではありません。
• 本資料の作成にあたっては正確な記述につとめましたが、内容に対してなんら
保証をするものではなく、内容に基づくいかなる運用...
自己紹介
加藤田 益嗣(Katoda Masuji)
• 日本オラクル株式会社
クラウド・テクノロジーコンサルティング統括本部
シニアコンサルタント
• Java、Java EEの開発技術支援
• Java EE 7 徹底入門[第2~4 章担当...
本日話す内容
• 本書の概要
• 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の応用 そ...
Java EE 7徹底入門の目次(第2~4章)
• 第2章 JSFの基本
– JSF概要
– JSFの構成要素
– JSFの画面遷移
– JSF の内部処理
– JSF の基本設定
– フェースレットタグライブラリ
– EL(Expressio...
第2~4章で説明するJSFの主な機能
92016/02/15 JJUG Night Seminar #JJUG
サーバ
フェースレット
マネージドビーン
タグライブラリ
EL
画面遷移 スコープ
入力チェック コンバータ
コンポーネント
テンプ...
サンプルアプリケーション
• ナレッジバンク
– ナレッジを収集するためのシステム
– ナレッジの投稿、コメントの追加が可能
– 本書でより実用的な機能を説明するために作成
102016/02/15 JJUG Night Seminar #JJ...
サンプルアプリケーションのデモ
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
データ
ベース...
プレゼンテーション層のフレームワーク
• 主にブラウザの画面とサーバ間の処理を受け持つ
• Java EE 5以前はサーブレット+JSPを使用
– HTTPアクセスに対する低レイヤーの機能を提供
• サーブレットだけでは値のマッピングや入力チェ...
プレゼンテーション層のフレームワークイメージ
2016/02/15 JJUG Night Seminar #JJUG 16
サーブレット
Struts Spring MVC JSF
Webアプリケーション Webアプリケーション Webアプリケ...
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のコードが使用できない
– 画面と処理を明確に分離
• 文字列のサニタイジング
– 表示文...
フェースレットの記載例
• アカウント登録画面
2016/02/15 JJUG Night Seminar #JJUG 20
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<htm...
フェースレットの構成要素
• フェースレットタグライブラリ
• 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="#{accou...
マネージドビーンとは
• フェースレットとバインドする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 {
priv...
フェースレットとマネージドビーンの処理イメージ
262016/02/15 JJUG Night Seminar #JJUG
アカウント登録画面
(account/register.xhtml)
アカウント登録マネージドビーン
(AccountB...
本書では触れられなかった話
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式
– 文字列連結...
Java EE 8(JSF2.3)
• JSF2.3で予定されている新機能
– WebSocket対応
• <f:socket>タグ
– マルチフィールドバリデーション
• <f:validateWholeBean>
– Java Timeサポ...
MVC1.0
• MVC1.0
– アクション指向フレームワーク
– Java EE 8で導入(現在ドラフト)
– JAX-RSを拡張
– ビューにはフェースレット,JSPをサポート
• 画面のコンポーネントなどの提供は現状なし
– 名前が直接...
MVC1.0実装例
2016/02/15 JJUG Night Seminar #JJUG 32
@Path("hello")
public class HelloController {
@GET
@Controller
public Str...
今後のプレゼンテーションの選択肢
332016/02/15 JJUG Night Seminar #JJUG
どのアーキテクチャを選択しても今後はコンポーネント指向に収束。
Java EE 7 Java EE 8
JSF
JAX-RS+クライア...
まとめ
• プレゼンテーション層の開発について
– Java EE 7環境でのプレゼンテーション層の選択肢
• サーバサイドでJavaで開発=JSF
• クライアントサイドでJavaScriptで開発=クライアントサイドフレームワーク
+JAX...
以上です。
ご清聴ありがとうございました。
2016/02/15 JJUG ナイトセミナー
#JJUG
加藤田 益嗣
@den2sn
Upcoming SlideShare
Loading in …5
×

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

3,861 views

Published on

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

Published in: Technology

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

  1. 1. 『Java EE 7 徹底入門』 プレゼンテーション層の開発 JSF 2016/02/15 JJUG ナイトセミナー #JJUG 加藤田 益嗣 @den2sn
  2. 2. Safe Harbor Statement • 本資料は私個人の見解であり所属会社の見解を反映したものではありません。 • 本資料の作成にあたっては正確な記述につとめましたが、内容に対してなんら 保証をするものではなく、内容に基づくいかなる運用結果に関してもいっさいの 責任を負いません。 22016/02/15 JJUG Night Seminar #JJUG
  3. 3. 自己紹介 加藤田 益嗣(Katoda Masuji) • 日本オラクル株式会社 クラウド・テクノロジーコンサルティング統括本部 シニアコンサルタント • Java、Java EEの開発技術支援 • Java EE 7 徹底入門[第2~4 章担当] 32016/02/15 JJUG Night Seminar #JJUG
  4. 4. 本日話す内容 • 本書の概要 • JSFの概要と構成要素 • 本書では触れられなかった話 42016/02/15 JJUG Night Seminar #JJUG
  5. 5. 本書の概要 2016/02/15 JJUG Night Seminar #JJUG 5
  6. 6. アンケート JSFを使用して開発したことがある方 62016/02/15 JJUG Night Seminar #JJUG (^_^)/
  7. 7. 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 ページ
  8. 8. 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
  9. 9. 第2~4章で説明するJSFの主な機能 92016/02/15 JJUG Night Seminar #JJUG サーバ フェースレット マネージドビーン タグライブラリ EL 画面遷移 スコープ 入力チェック コンバータ コンポーネント テンプレート HTML5 Ajax 認証認可 国際化 ブックマーカビリティ フェーズリスナ ユーザ 第2章 第3章 第4章
  10. 10. サンプルアプリケーション • ナレッジバンク – ナレッジを収集するためのシステム – ナレッジの投稿、コメントの追加が可能 – 本書でより実用的な機能を説明するために作成 102016/02/15 JJUG Night Seminar #JJUG
  11. 11. サンプルアプリケーションのデモ 2016/02/15 JJUG Night Seminar #JJUG 11
  12. 12. サンプルアプリケーションの画面遷移 2016/02/15 JJUG Night Seminar #JJUG 12 アカウント登録ログイン ナレッジ変更 ナレッジ投稿 アカウント登録 登録 ログイン 検索 詳細 変更 投稿 削除 コメント投稿 ナレッジ投稿 ログアウト 変更 ナレッジ詳細 ナレッジ一覧
  13. 13. JSFの概要と構成要素 2016/02/15 JJUG Night Seminar #JJUG 13
  14. 14. JSFとは • Java EE 5から導入されたプレゼンテーション層を作成するための フレームワーク • Java EE 7でのバージョンはJSF2.2 142016/02/15 JJUG Night Seminar #JJUG データ ベース アプリケーションサーバ JPA jBatch EJB JAX-RS JSF CDI アプリケーション
  15. 15. プレゼンテーション層のフレームワーク • 主にブラウザの画面とサーバ間の処理を受け持つ • Java EE 5以前はサーブレット+JSPを使用 – HTTPアクセスに対する低レイヤーの機能を提供 • サーブレットだけでは値のマッピングや入力チェックなどWebアプリ ケーションで必要な機能がなく、サードパーティ製フレームワークを 併用 – Struts、Spring MVC等 • Java EE 5以降はJSFをJava EEの標準仕様として導入 152016/02/15 JJUG Night Seminar #JJUG
  16. 16. プレゼンテーション層のフレームワークイメージ 2016/02/15 JJUG Night Seminar #JJUG 16 サーブレット Struts Spring MVC JSF Webアプリケーション Webアプリケーション Webアプリケーション ブラウザとHTTP通信を するための機能を提供 値のマッピングや 入力値のチェックやなど、 Webアプリケーションで必要な 機能を提供 開発するアプリケーション Java EEの仕様で提供
  17. 17. JSFの構成要素 • JSFを構成する要素にはフェースレットとマネージドビーンがある 2016/02/15 JJUG Night Seminar #JJUG 17 フェースレット マネージドビーン 画面の定義 処理の定義
  18. 18. フェースレットとは • 画面のレイアウトを記述するXHTMLベースのテン プレートエンジン • JSF2.0からJSPの代わりに使用 182016/02/15 JJUG Night Seminar #JJUG フェースレット マネージドビーン
  19. 19. フェースレットとJSPとの違い • XHTML(XML)なので記載が厳密 – 記載を統一しやすい • スクリプトレットが記載できない – 画面中にJavaのコードが使用できない – 画面と処理を明確に分離 • 文字列のサニタイジング – 表示文字列中のHTMLの特殊文字はサニタイジングする – セキュアに画面が作成 • nullの文字列表示処理 – nullは空文字として表示 • テンプレート機能 – テンプレート機能をタグライブラリで提供 192016/02/15 JJUG Night Seminar #JJUG フェースレット マネージドビーン
  20. 20. フェースレットの記載例 • アカウント登録画面 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とほぼ同様の記載 フェースレット マネージドビーン
  21. 21. フェースレットの構成要素 • フェースレットタグライブラリ • EL(Expression Language) 212016/02/15 JJUG Night Seminar #JJUG フェースレット マネージドビーン
  22. 22. 入力と登録ボタン部分のソースコード 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メ ソッドが呼ばれる フェースレット マネージドビーン
  23. 23. マネージドビーンとは • フェースレットとバインドするJavaのクラス • 入力値の保持やボタン押下時の処理などを行う 232016/02/15 JJUG Night Seminar #JJUG フェースレット マネージドビーン
  24. 24. マネージドビーンの構成要素 • スコープ • バインドする値の保持 • ビジネスロジックの呼び出し • 画面遷移 242016/02/15 JJUG Night Seminar #JJUG フェースレット マネージドビーン
  25. 25. マネージドビーンの記載例 • アカウント登録マネージドビーン 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"; } } スコープの定義 入力値を保有する フィールド ボタン押下時の処理 ログイン画面に遷移 フェースレット マネージドビーン
  26. 26. フェースレットとマネージドビーンの処理イメージ 262016/02/15 JJUG Night Seminar #JJUG アカウント登録画面 (account/register.xhtml) アカウント登録マネージドビーン (AccountBean.java) アカウント情報(account) ・ユーザID(userId) ・名前(name) ・メールアドレス(mail) ・パスワード(password) 登録処理(register) { } ユーザID アカウント登録 名前 メールアドレス パスワード 登録 EL式でバインド ビジネス ロジック の処理へ コンポーネントを主軸にコードを作成するためコンポーネント指向と言われる。
  27. 27. 本書では触れられなかった話 2016/02/15 JJUG Night Seminar #JJUG 27
  28. 28. 本書では触れられなかった話 • JSFのより詳細な機能 • Java EE 8(JSF2.3) • MVC1.0 282016/02/15 JJUG Night Seminar #JJUG
  29. 29. JSFのより詳細な機能 • カスタムコンポーネント • イベントハンドリング – Value Change Events – Action Events • ビーンバリデーション – グループ化機能 • EL – Lambda式 – 文字列連結オペレータ 292016/02/15 JJUG Night Seminar #JJUG 本資料でも詳細な説明は省略。
  30. 30. 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
  31. 31. MVC1.0 • MVC1.0 – アクション指向フレームワーク – Java EE 8で導入(現在ドラフト) – JAX-RSを拡張 – ビューにはフェースレット,JSPをサポート • 画面のコンポーネントなどの提供は現状なし – 名前が直接的だけど紛らわしい... 312016/02/15 JJUG Night Seminar #JJUG
  32. 32. 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に遷移
  33. 33. 今後のプレゼンテーションの選択肢 332016/02/15 JJUG Night Seminar #JJUG どのアーキテクチャを選択しても今後はコンポーネント指向に収束。 Java EE 7 Java EE 8 JSF JAX-RS+クライアントサイドフレームワーク (AngularJS、React、Backbone.jsなど) MVC1.0 + Web Components?
  34. 34. まとめ • プレゼンテーション層の開発について – Java EE 7環境でのプレゼンテーション層の選択肢 • サーバサイドでJavaで開発=JSF • クライアントサイドでJavaScriptで開発=クライアントサイドフレームワーク +JAX-RS – JSFはかなり成熟(1.0は2004年3月にリリース) • 本書について – Java EE 7のJSFを使用した機能を概ね網羅 – サンプルアプリケーションをベースとしたより実践的な説明 342016/02/15 JJUG Night Seminar #JJUG
  35. 35. 以上です。 ご清聴ありがとうございました。 2016/02/15 JJUG ナイトセミナー #JJUG 加藤田 益嗣 @den2sn

×