Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |
JavaServer Faces 入門
はじめてのJava EEアプリケーション開発シリーズ 第2回:
...
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |
Safe Harbor Statement
The following is intended to o...
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |
Agenda
JavaServer Faces (JSF) とは?
Webアプリケーションを作ってみよう
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |
JavaServer Faces (JSF)とは?
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |
Java Platform, Enterprise Edition
• Java SE をベースにした企...
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |
Java EE 6 の主な標準仕様
標準仕様 開発領域 特徴
JSF 2.1
Webアプリケーション
•...
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |
JavaServer Facesとは?
• Java EE標準で提供されるWebアプリケーションのための...
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |
Webコンテナ
JSFとMVC
HTTPリクエスト
HTTPレスポンス
コントローラー
(Faces S...
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |
JSFの構成要素
ブラウザ
HTML
JavaScript
CSS
Faces
Servlet
XUL
...
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |
FacesServletの役割
• MVCモデルのコントローラーに
相当
– リクエストに応じて、JSF...
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |
JSFのライフサイクル
ビューの
復元
入力値の
適用
検証処理
イベント
処理
イベント
処理
レスポ...
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |
JSFのライフサイクル
•リクエストに基づいてページのUIComponentツリーを作成(復元)する
(...
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |
Webコンテナ
JSFを使用した開発イメージ
HTTPリクエスト
HTTPレスポンス
JSF
(Webア...
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |
Webアプリケーションを作ってみよう
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |
WebLogic Server
Webアプリケーション
プレゼンテーション
ビジネス・ロジック
永続化ロ...
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |
今回作成する部分
index.xhtml (メニュー)
<p>商品管理</p>
<h:form>
商品の...
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |
プロジェクトを作成する (1)
新規プロジェクト を選択
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |
プロジェクトを作成する (2)
Webアプリケーション
を選択
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |
プロジェクトを作成する (3)
[Java EE 6 Web] と
[コンテキストと依存性の
注入を有効...
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |
NetBeansの編集画面
One Point:
• NetBeansでは作成するプ
ログラムをプロジェ...
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |
プロジェクト・プロパティの設定
チェックを外す
One Point:
• WebLogic Server...
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |
EclipseでのWebプロジェクトの作成
One Point:
• Ecliplse ではWebプロジ...
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |
<?xml version='1.0' encoding='UTF-8' ?>
<html xmlns=...
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |
JSF 標準タグライブラリ
接頭辞 説明 Namespace URI
composite 複合コンポーネ...
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |
JSFページの作成
One Point:
• オプション: で指定する
JSFページのビュー記述言
語は...
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |
JSFページを編集する前に…
<?xml version='1.0' encoding='UTF-8' ...
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |
index.xhtmlを書いてみよう
<?xml version='1.0' encoding='UTF...
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |
<h:form>
<h:outputText value="名前: " />
<h:inputText ...
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |
One Point: 日本語の入力を処理するには?
• デプロイメント記述子(weblogic.xml)...
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |
その他の JSF タグ
<h:commandButton>
<h:inputText><h:output...
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |
その他の JSF タグ
JSFタグ HTMLタグ
テキストフィールド <h:inputSecret va...
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |
JSF での画面遷移
• 暗黙的ナビゲーション
<h:commandButton id="subimt"...
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |
マネージド Bean の作成
One Point:
• JSF マネージドBean は、
通常のJava...
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |
マネージド Bean のスコープ
スコープ スコープをあらわす注釈 有効期間
request @Requ...
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |
マネージド Bean の実装
import javax.faces.bean.ManagedBean;
...
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |
マネージド Bean にアクセスする
<?xml version='1.0' encoding='UTF...
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |
EL 式の使い方
<h:dataTable border="1" value="#{productBea...
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |
<h:dataTable value="#{productBean.list}" var="c" bor...
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |
表の生成 <h:dataTable>タグ
<h:dataTable value="#{productBe...
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |
JSFでの検証と変換処理
• JSFライフサイクル・フェーズで呼び出される
• JSFでは標準でバリデー...
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |
入力値を検証するには? (1)
• 入力必須のフィールドの検証を行うには …
– UIComponent...
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |
入力値を検証するには? (1)
<h:form>
<h:outputText value="名前: "/...
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |
入力値を検証するには? (2)
• 入力値の値の範囲を検証するには …
– JSFでは標準バリデータ(j...
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |
入力値を検証するには? (2)
<h:form>
<h:outputText value="名前: "/...
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |
入力値を変換するには?
• フォームに入力された値は String 型で扱われる
– UICompone...
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |
入力値を変換するには?
<h:column>
<f:facet name="header">
<h:ou...
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |
list.xhtml を完成させよう
<?xml version='1.0' encoding='UTF...
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |
まとめ
• JSFは、Java EE 標準のWebアプリケーション・フレームワークです
– JSFでのプ...
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |
オラクルユニバーシティからのお知らせ
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |
オラクルユニバーシティからのお知らせ
• WebLogic Serverの管理方法やJava EE 6を...
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |
コース内容
■Oracle WebLogic Server概要
■ドメインの作成
■Administra...
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |
コース内容
■Java EE 6 概要
■開発環境の整備
■Webコンポーネントモデル
■JSFを使用し...
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |
キャンペーンのご案内:
Java SE 7 対応認定資格受験を検討されている皆さまに朗報です
• Jav...
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |
OCJP Silver SE 7 資格試験の受験準備は
Oracle トレーニング・オンデマンドで!
O...
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |
JavaServer Faces入門:  はじめてのJava EEアプリケーション開発シリーズ: 第2回
Upcoming SlideShare
Loading in...5
×

JavaServer Faces入門: はじめてのJava EEアプリケーション開発シリーズ: 第2回

4,650

Published on

「JSF入門」
 :
JSF (JavaServer Faces)は、Webアプリケーションのユーザインタフェースを開発するため
の仕様です。Webアプリのユーザインタフェースの要件、JSFの特長と構成、画面遷移を説明
します。また、JSF画面コンポーネント、入力値が適正な範囲かどうかなどをチェックする
バリデーション機能、Ajax対応などを解説します。

日本オラクル株式会社 オラクルユニバーシティ 岡田 大輔

Published in: Technology

Transcript of "JavaServer Faces入門: はじめてのJava EEアプリケーション開発シリーズ: 第2回"

  1. 1. Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | JavaServer Faces 入門 はじめてのJava EEアプリケーション開発シリーズ 第2回: 日本オラクル株式会社 オラクルユニバーシティ 岡田 大輔 2014年06月24日
  2. 2. Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | Safe Harbor Statement The following is intended to outline our general product direction. It is intended for information purposes only, and may not be incorporated into any contract. It is not a commitment to deliver any material, code, or functionality, and should not be relied upon in making purchasing decisions. The development, release, and timing of any features or functionality described for Oracle’s products remains at the sole discretion of Oracle.
  3. 3. Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | Agenda JavaServer Faces (JSF) とは? Webアプリケーションを作ってみよう
  4. 4. Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | JavaServer Faces (JSF)とは?
  5. 5. Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | Java Platform, Enterprise Edition • Java SE をベースにした企業システム向けのフレームワーク – オープンなWebシステムの構築を支える機能群の標準仕様 • コミュニティ主導のエンタープライズ・ソフトウェア標準 • コンポーネント仕様とサービスアクセスのための各種APIを規定 – 移植性(Write Once Run Anywhere を担保) – Oracle などのベンダーは、Java EE に準拠した実装としてアプリケーション・ サーバーを提供 • Oracle WebLogic Server • GlassFish
  6. 6. Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | Java EE 6 の主な標準仕様 標準仕様 開発領域 特徴 JSF 2.1 Webアプリケーション • リッチなユーザインタフェースの効率的な開発を実現する Webアプリケーション・フレームワーク Servlet 3.0 • 冗長な設定・コード記述の削減により開発生産性を向上 • 非同期ServletによるAjax対応 EJB 3.1 ビジネスロジック • 冗長な設定・コード記述の削減により開発生産性を向上 • より柔軟な制御機能の追加 JAX-RS Webサービス • 容易なサービス公開を実現するWebサービス標準仕様 CDI 全領域 • レイヤ間の疎結合化による柔軟性を向上するDIフレームワー ク標準仕様
  7. 7. Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | JavaServer Facesとは? • Java EE標準で提供されるWebアプリケーションのためのUIフレーム ワーク – コンポーネント・ベースでユーザー・インタフェースを作成 • UIの構成要素は「UIコンポーネント」として提供される • イベント駆動型プログラミング – ビュー定義はFacelet (XHTML+JSFタグ)を使用 • テンプレート・エンジン • Ajaxをサポート • … Webアプリケーションを効率良く開発可能に
  8. 8. Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | Webコンテナ JSFとMVC HTTPリクエスト HTTPレスポンス コントローラー (Faces Servlet) ビュー (Facelet) モデル (マネージドBean) 生成・管理 操作・リダイレクト アクセス
  9. 9. Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | JSFの構成要素 ブラウザ HTML JavaScript CSS Faces Servlet XUL JSP XHTML コンバータ バリデータ マネージド Bean faces- config.xml (オプション) レンダラ HTTP リクエスト HTTP レスポンス リクエストの制御とマ ネージドBeanの呼び出し レスポンスと生成(デ フォルトではHTML 生成) ページ記述する Faceletの使用を推奨 入出力の文字列とマ ネージドBeanのデータ 型を変換 失敗時はエラーを返す 入力値の有効性を検証 失敗時はエラーを返す 画面遷移やコンポーネン トとのデータ同期、ビジ ネスロジックを実行 <f:ajax>タグ でAjax対応
  10. 10. Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | FacesServletの役割 • MVCモデルのコントローラーに 相当 – リクエストに応じて、JSFライフサ イクルを管理するフロント・コント ローラー・コンポーネント – javax.faces.context.FacesContext • リクエスト処理とレスポンス生成に関連 するコンテキスト情報 • ライフサイクルの各フェーズで利用され る 3. 6つのライフサイ クル・フェーズ を処理 FacesServlet Lifecycle FacesContext 1. FacesContextを生 成する 2. 制御をLifecycle に渡す
  11. 11. Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | JSFのライフサイクル ビューの 復元 入力値の 適用 検証処理 イベント 処理 イベント 処理 レスポンスの レンダリング イベント 処理 イベント 処理 アプリケーショ ン 呼び出し モデル値の 更新 HTTP リクエスト HTTP レスポンス
  12. 12. Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | JSFのライフサイクル •リクエストに基づいてページのUIComponentツリーを作成(復元)する (初期リクエスト時は作成、ポスト・バック時は復元) ビューの復元 •送信されたフォームの値をUIコンポーネントに適用する 文字列データをJavaデータ型に変換 (コンバータ) 入力値の適用 •UIComponentに関連付けられた検証(バリデータ)を行う検証処理 •入力値の適用フェーズで適用されたUIComponentの値をマネージドBeanにコピーするモデル値の更新 •マネージドBeanのメソッドを呼び出してビジネスロジックを実行するアプリケーション呼び出し •マネージドBeanの値を読み取り(EL式)、レスポンスを返すレスポンスのレンダリング
  13. 13. Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | Webコンテナ JSFを使用した開発イメージ HTTPリクエスト HTTPレスポンス JSF (Webアプリケーションフレームワーク) Webアプリケーション プレゼンテーション アプリケーションロ ジック • 画面遷移ロジック • 検証ロジック • イベント処理 • … ビジネスロジック • DBアクセス • … Facelet (XHTML) マネージド Bean / CDI POJO 開発環境 開発・ デプロイ
  14. 14. Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | Webアプリケーションを作ってみよう
  15. 15. Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | WebLogic Server Webアプリケーション プレゼンテーション ビジネス・ロジック 永続化ロジック これから作成するアプリケーション Product Integer id; String productName; Integer price; Integer units; 開発環境 開発・ デプロイ ProductEJB List<Product> getAllProducts() { } void create(Product entity); void remove(Product entity); void edit(Product entity); @Named ProductController List<Product> list; String search() { } String create() { } String delete() { } String update() { } ProductBean List<Product> list; String search() { } String create() { } String delete() { } String update() { } search.xhtml 検索 list.xhtml 一覧 index.xhtml メニュー create.xhtml 作成 update.xhtml 更新 delete.xhtml 削除 第2回(今回)説明します 第3回で説明します 第4回で説明します
  16. 16. Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | 今回作成する部分 index.xhtml (メニュー) <p>商品管理</p> <h:form> 商品の表示 <h:commandButton value="表示" action="#{productBean.toList}" /> </h:form> ProductBean private List<Product> list; public List<Product> getList() { return list; } public String toList() { return "list"; } public String toIndex() { return "index"; } list.xhtml (一覧) <p><h:outputText value="商品一覧: " /></p> <h:dataTable value="#{productBean.list}" var="c" border="1"> <h:column> <f:facet name="header"> <h:outputText value="商品番号" /> </f:facet> <h:outputText value="#{c.id}" /> </h:column> </h:dataTable> <h:form> <h:commandButton value="戻る” action="#{productBean.toIndex}" /> </h:form> Product private Integer id; private Date creationDate; private String description; private Date modificationDate; private Integer price; private String productCode; private String productName; private String status; private Integer units;
  17. 17. Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | プロジェクトを作成する (1) 新規プロジェクト を選択
  18. 18. Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | プロジェクトを作成する (2) Webアプリケーション を選択
  19. 19. Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | プロジェクトを作成する (3) [Java EE 6 Web] と [コンテキストと依存性の 注入を有効にする]を選択 [JavaServer Faces] を選択 登録されているライブラリで [JSF2.2] を選択
  20. 20. Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | NetBeansの編集画面 One Point: • NetBeansでは作成するプ ログラムをプロジェクト という単位で管理してい ます • プロジェクト・ウィンド ウには作成したソース コード(.javaファイル)が表 示されます • エディタ・ウィンドウに はソースコードを編集す ることができます • 出力ウィンドウにはプロ グラムの実行結果などが 表示されます プロジェクト ウィンドウ エディタ ウィンドウ 出力 ウィンドウ
  21. 21. Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | プロジェクト・プロパティの設定 チェックを外す One Point: • WebLogic Serverにアプリ ケーションをデプロイす る場合は、JSF2.2 ライブ ラリをパッケージ対象か ら除外します • 必要に応じて [ソース] の ソース/バイナリ形式 を 適切なJDKバージョン (JDK7など)に変更します
  22. 22. Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | EclipseでのWebプロジェクトの作成 One Point: • Ecliplse ではWebプロジェ クトを作成します • Webプロジェクトの 構成 では「JavaServer Faces v2.0」プロジェクトを選 択します • 必要に応じて 「Java」 の バージョンを 1.7 などに 変更します
  23. 23. Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | <?xml version='1.0' encoding='UTF-8' ?> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core"> <h:head> <title>hello</title> </h:head> <h:body> <h2>hello.xhtml</h2> <hr/> <h3>メッセージを表示します。</h3> <p> <h:outputText value="#{helloBean.message}" /> <ui:repeat value="#{helloBean.choice}" var="data">#{data} </ui:repeat> </p> <h:dataTable value="#{helloBean.country}" var="p" border="1"> <h:column> <f:facet name="header"><h:outputText value="都道府県"/></f:facet> <h:outputText value="#{p.name}" /> </h:column> <h:column> <f:facet name="header"><h:outputText value="都道府県庁所在地"/></f:facet> <h:outputText value="#{p.capital}" /> </h:column> <h:column> <f:facet name="header"><h:outputText value="地域"/></f:facet> <h:outputText value="#{p.region}"/> </h:column> </h:dataTable> <h:link value="戻る" outcome="index" /> </h:body> </html> JSFページ • Webアプリケーションのビュー を提供 – JSFページは Facelet で記述 • XHTML構文を使用してページを宣言 • 複数のタグライブラリを使用可能 • ページのテンプレート作成が可能 • Faclet で記述したページは UIComponent とし て扱われる UIComponentツリー UIRootView HtmlOutput Text HtmlOutput Link Html DataTable Facelet ブラウザUI
  24. 24. Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | JSF 標準タグライブラリ 接頭辞 説明 Namespace URI composite 複合コンポーネントの宣言と定義するためのJSFタグ http://java.sun.com/jsf/composite h コンポーネントとHTMLレンダラを含む JSF HTML タグ http://java.sun.com/jsf/html f 特定のレンダリングに依存しない コアFacesタグ http://java.sun.com/jsf/core ui Facletテンプレート作成のためのJSFタグ http://java.sun.com/jsf/facelets c JSTLコアライブラリのサブセット http://java.sum.com/jsp/jstl/c ore fn JSTL関数タグライブラリ http://java.sum.com/jsp/jstl/functions
  25. 25. Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | JSFページの作成 One Point: • オプション: で指定する JSFページのビュー記述言 語はFacletsを選択します • JSPも使用可能ですが、Facletsをオ ススメします
  26. 26. Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | JSFページを編集する前に… <?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"> <h:head> <title>Facelet Title</title> </h:head> <h:body> Hello from Facelets </h:body> </html> Java EE 6 用にNamespace URIを変更
  27. 27. Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | index.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"> <h:head> <title>prodMgmt</title> </h:head> <h:body> <h2> <h:outputText value="index.xhtml" /> </h2> <hr /> <p>商品管理</p> <h:form> <div> <span>商品の表示</span> <span /> <span> <h:commandButton action="#{productBean.toList}" value="表示" /> </span> </div> </h:form> </h:body> </html> <h:outputText> <h:commandButton>
  28. 28. Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | <h:form> <h:outputText value="名前: " /> <h:inputText value="#{helloBean.name}" /> <h:commandButton id="subimt" value="送信" action="response" /> </h:form> フォームの作成 <h:form> タグ 遷移先のJSFページを指 定 入力した値は、HelloBean オブジェクトの変数 name に格納される
  29. 29. Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | One Point: 日本語の入力を処理するには? • デプロイメント記述子(weblogic.xml)でエンコーディングを指定 WEB-INF/weblogic.xml <?xml version="1.0" encoding="UTF-8"?> <weblogic-web-app xmlns:wls="http://xmlns.oracle.com/weblogic/weblogic-web-app" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"> <charset-params> <input-charset> <resource-path>/*</resource-path> <java-charset-name>UTF-8</java-charset-name> </input-charset> </charset-params> </weblogic-web-app>
  30. 30. Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | その他の JSF タグ <h:commandButton> <h:inputText><h:outputText> <h:dataTable> <h:column> <h:commandLink> <h:inputSecret> <h:selectBooleanCheckbox> <h:selectOneListbox> <h:selectOneRadio> <h:selectManyCheckBox>
  31. 31. Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | その他の JSF タグ JSFタグ HTMLタグ テキストフィールド <h:inputSecret value="" /> <input type="password" name="j_idt6:j_idt11" value="" /> ラジオボタン <h:selectOneRadio value=""> <f:selectItem itemValue="i1" itemLabel="男性"/> <f:selectItem itemValue="i2" itemLabel="女性"/> </h:selectOneRadio> <input type="radio" name="j_idt6:j_idt16" id="j_idt6:j_idt16:0" value="i1" /> <label for="j_idt6:j_idt16:0"> 男性</label> <input type="radio" name="j_idt6:j_idt16" id="j_idt6:j_idt16:1" value="i2" /> <label for="j_idt6:j_idt16:1"> 女性</label> リストボックス <h:selectOneListbox value=""> <f:selectItem itemValue="ib1" itemLabel="20代"/> <f:selectItem itemValue="ib2" itemLabel="30代"/> <f:selectItem itemValue="ib3" itemLabel="40代"/> </h:selectOneListbox> <select name="j_idt6:j_idt21" size="3"> <option value="ib1">20代</option> <option value="ib2">30代</option> <option value="ib3">40代</option> </select> チェックボックス <h:outputLabel for="cb1" value="チェック"/> <h:selectBooleanCheckbox id="cb1" value="" /> <label for="j_idt6:cb1">チェック</label> <input id="j_idt6:cb1" type="checkbox" name="j_idt6:cb1" />
  32. 32. Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | JSF での画面遷移 • 暗黙的ナビゲーション <h:commandButton id="subimt" value="送信" action="list" /> list.xhtml <h:outputText value="何かを表示します" /> index.xhtml <h:form> <h:inputText id="userNumber"/> <h:commandButton id="subimt" value="送信" action="list" /> </h:form> 指定されたJSFページに 遷移(静的ナビゲーション) マネージドBeanのメソッドも指定可能 (動的ナビゲーション) action = "#{productBean.navigation}" ProductBean public String navigation() { return "list"; } 遷移先のページを戻り値で指定 戻り値の型がvoidのメソッドの呼び出し、または メソッドの戻り値が null の場合は呼び出し元の ページを表示 遷移先のJSFページを指定できる
  33. 33. Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | マネージド Bean の作成 One Point: • JSF マネージドBean は、 通常のJavaクラスとして 作成し、@ManagedBean 注釈を指定します • マネージドBeanの生成、 および破棄はコンテナに よって管理されます
  34. 34. Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | マネージド Bean のスコープ スコープ スコープをあらわす注釈 有効期間 request @RequestScoped HTTP リクエストを受けてからレスポンスを返すまでの間 (デフォルト) view @ViewScoped ページがロードされてから他のページに遷移するまでの間 session @SessionScoped HTTP セッションが有効な間 application @ApplicationScoped Web アプリケーションが起動してから終了するまでの間 none @NoneScoped スコープには属さない flash - ページが別のページに遷移する間 注: importするパッケージは javax.faces.bean パッケージ マネージドBeanは注釈で指定された 期間で、コンテナによって インスタンス化・破棄されます One Point: • スコープ flash には、注釈がありません。マネージドBean からはメソッド, Faclets からは暗黙オブジェ クト flash でアクセスします マネージドBeanからアクセス: FacesContext.getCurrentInstance().getExternalContext().getFlash().put("name", "abc"); Flaceletsからアクセス: <h:inputText value="#{flash.name}" />
  35. 35. Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | マネージド Bean の実装 import javax.faces.bean.ManagedBean; @ManagedBean public class ProductBean { private List<Product> list; public List<Product> getList() { return list; } public String toList() { return "list"; } public String toIndex() { return "index"; } // list の初期化処理 … } One Point: 変数 list の初期化は @PostConstruct 注釈がついた メソッドで行うことができます @PostConstruct private void populateList() { if (list == null) { list = new ArrayList<>(); String[] index = {"01", "02", "03", "04", "05", "06", "07", "08", "09", "10"}; for (String idx : index) { Product product = new Product(); product.setId(Integer.valueOf(idx)); product.setProductCode("P00" + idx); product.setProductName("商品" + idx); product.setDescription("説明" + idx); product.setPrice(new Random().nextInt(10) * 100); product.setUnits(new Random().nextInt(10)); product.setStatus("Y"); product.setCreationDate(new Date()); list.add(product); } } } @ManagedBean注釈とスコープの注釈を指定 (省略すると @RequestScoped と同じ) 画面遷移を行うメソッド
  36. 36. Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | マネージド Bean にアクセスする <?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>prodMgmt</title> </h:head> <h:body> <h2> <h:outputText value="list.xhtml" /> </h2> <hr /> <p> <h:outputText value="商品一覧: " /> </p> <h:form> <h:commandButton action="#{productBean.toIndex}" value="戻る" /> </h:form> <h:dataTable value="#{productBean.list}" var="c" border="1"> … 途中略 … マネージドBeanへのアクセス はEL式を使います
  37. 37. Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | EL 式の使い方 <h:dataTable border="1" value="#{productBean.list}" var="c" > JSFのEL式の構文は #{ マネージド Bean の名前.プロパティ 名 } @ManagedBean public class ProductBean { private List<Product> list; public List<Product> getList() { return list; } マネージドBean名はクラス名(先頭小文字) (@ManedBean注釈のname属性で変更可能) マネージドBeanのプロパティの getterメソッドを呼び出します
  38. 38. Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | <h:dataTable value="#{productBean.list}" var="c" border="1"> <h:column> <f:facet name="header"> <h:outputText value="商品番号" /> </f:facet> <h:outputText value="#{c.id}" /> </h:column> … 以下略 … </h:dataTable> 表の生成 <h:dataTable>タグ ProductBean private List<Product> list; public List<Product> getList() { return list; } Product private Integer id; private Date creationDate; private String description; private Date modificationDate; private Integer price; private String productCode; private String productName; private String status; private Integer units; value 属性には表を生成するデータ (コレクション)を指定 var 属性には、コレクション内の各 オブジェクトの参照変数を指定
  39. 39. Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | 表の生成 <h:dataTable>タグ <h:dataTable value="#{productBean.list}" var="c" border="1"> <h:column> <f:facet name="header"> <h:outputText value="商品番号" /> </f:facet> <h:outputText value="#{c.id}" /> </h:column> … 以下略 … </h:dataTable> 表のヘッダーやフッターは <f:facet>タグで header や footerを 指定します。
  40. 40. Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | JSFでの検証と変換処理 • JSFライフサイクル・フェーズで呼び出される • JSFでは標準でバリデータやコンバータを提供 – Converter クラスや Validator クラスの開発、および Bean Validation も使用可能 ビューの 復元 入力値の 適用 検証処理 イベント 処理 イベント 処理 レスポンスの レンダリング イベント 処理 イベント 処理 アプリケー ション 呼び出し モデル値の 更新 HTTP リクエスト HTTP レスポンス コンバータ バリデータ コンバータ
  41. 41. Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | 入力値を検証するには? (1) • 入力必須のフィールドの検証を行うには … – UIComponent タグの required 属性を true に設定 – 検証失敗時のエラーメッセージは requiredMessage 属性で指定できる • エラーメッセージを表示するには … – <h:messages>タグ、<h:message>タグを使用 – for 属性でどのタグに対するメッセージなのかを指定 • 対象になる<h:inputText>タグなどにも、id 属性を追加する
  42. 42. Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | 入力値を検証するには? (1) <h:form> <h:outputText value="名前: "/> <h:inputText id="it1" value="#{helloBean.name}” required="true" requiredMessage="名前を入力してください。" /> <br/> <h:commandButton value="送信" action="hello" /> </h:form> <h:messages for="it1" style="color: red" />
  43. 43. Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | 入力値を検証するには? (2) • 入力値の値の範囲を検証するには … – JSFでは標準バリデータ(java.facesvalidator.*)が用意されている – 標準バリデータに対応したJSFタグがある • UIコンポーネントタグにバリデータタグをネストして使用 JSFタグ <f:validateLongRange> 整数値の最大値(maximum)と最小値(minimum)を検証 <f:validateDoubleRange> 浮動小数点数の最大値(maximum)と最小値(minimum)を検証 <f:validateLength> 入力文字数の最大値(maximum)と最小値(minimum)を検証 JSFで使用できるタグ
  44. 44. Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | 入力値を検証するには? (2) <h:form> <h:outputText value="名前: "/> <h:inputText id="it1" value="#{helloBean.name}" required="true" requiredMessage="名前を入力してください。"> <f:validateLength minimum="2" /> </h:inputText> <br/> <h:commandButton value="送信" action="hello" /> </h:form> <h:messages for="it1" style="color: red" /> UIComponentタグのrequired 属性が先に評価される
  45. 45. Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | 入力値を変換するには? • フォームに入力された値は String 型で扱われる – UIComponent への反映時に対応したマネージド Bean のデータ型に変換される – 一般的なデータ型(数値, 日付など)には標準コンバーターが用意されている • マネージド Bean のプロパティ型に基づいて暗黙的に変換される • 変換するデータ型は converter 属性でも指定可能 – converter 属性に指定された型に変換できない場合はエラー・メッセージが表 示される One Point: • 日付や数値に対して標準のコンバーター タグを使うことができます。 (<f:dateTimeConverter>タグ, <f:convertNumber>タグ)
  46. 46. Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | 入力値を変換するには? <h:column> <f:facet name="header"> <h:outputText value="作成日" /> </f:facet> <h:outputText value="#{c.creationDate}"> <f:convertDateTime pattern="yyyy-MM-dd HH:mm:ss" timeZone="Japan" /> </h:outputText> </h:column> JSTで表示する場合は timeZone 属性を指定
  47. 47. Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | list.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>prodMgmt</title> </h:head> <h:body> <h2> <h:outputText value="list.xhtml" /> </h2> <hr /> <p> <h:outputText value="商品一覧: " /> </p> <h:form> <h:commandButton action="#{productBean.toIndex}" value="戻る" /> </h:form> <h:dataTable value="#{productBean.list}" var="c" border="1"> <h:column> <f:facet name="header"> <h:outputText value="商品番号" /> </f:facet> <h:outputText value="#{c.id}" /> </h:column> <h:column> <f:facet name="header"> <h:outputText value="商品コード" /> </f:facet> <h:outputText value="#{c.productCode}" /> </h:column> <h:column> <f:facet name="header"> <h:outputText value="商品名" /> </f:facet> <h:outputText value="#{c.productName}" /> </h:column> <h:column> <f:facet name="header"> <h:outputText value="説明" /> </f:facet> <h:outputText value="#{c.description}" /> </h:column> <h:column> <f:facet name="header"> <h:outputText value="単価" /> </f:facet> <h:outputText value="#{c.price}" /> </h:column> <h:column> <f:facet name="header"> <h:outputText value="販売単位" /> </f:facet> <h:outputText value="#{c.units}" /> </h:column> <h:column> <f:facet name="header"> <h:outputText value="ステータス" /> </f:facet> <h:outputText value="#{c.status}" /> </h:column> <h:column> <f:facet name="header"> <h:outputText value="作成日" /> </f:facet> <h:outputText value="#{c.creationDate}"> <f:convertDateTime pattern="yyyy-MM-dd HH:mm:ss" timeZone="Japan" /> </h:outputText> </h:column> <h:column> <f:facet name="header"> <h:outputText value="更新日" /> </f:facet> <h:outputText value="#{c.modificationDate}"> <f:convertDateTime pattern="yyyy-MM-dd HH:mm:ss" timeZone="Japan" /> </h:outputText> </h:column> </h:dataTable> </h:body> </html>
  48. 48. Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | まとめ • JSFは、Java EE 標準のWebアプリケーション・フレームワークです – JSFでのプレゼンテーションは Facelet で記述します • コンポーネント・ベースのテンプレート・フレームワーク • 豊富なJSFタグを利用できます – JSFでのページ遷移は、暗黙的なナビゲーションが使用できます • action や outcome に 遷移先 を文字列で指定できます (index.xhtml の場合は index ) • マネージド Bean でメソッドを定義する場合も遷移先の文字列を戻り値で返します – データはマネージドBeanで保持できます • マネージド Bean はコンテナによってインスタンスのライフサイクルが管理されます (適切なスコープを指定しましょう) • Facelet からは EL式 を使ってアクセス可能です
  49. 49. Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | オラクルユニバーシティからのお知らせ
  50. 50. Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | オラクルユニバーシティからのお知らせ • WebLogic Serverの管理方法やJava EE 6を使ったアプリケーション開発方法を体系 的に学習したい方に最適な研修コースをご提供しています。 – Classroomトレーニングだけでなく、Live Virtual Classや『Oracle トレーニング・オンデマ ンド』など多様な受講形態から選択いただけます。
  51. 51. Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | コース内容 ■Oracle WebLogic Server概要 ■ドメインの作成 ■Administration Console ■ドメインのモニタリング ■アプリケーションのデプロイメント ■WebLogic Server セキュリティ ■ドメインのバックアップおよびリカバリ ■WebLogic Serverのインストールおよびパッチ適用 ■サーバーの起動および停止 ■JDBCデータソースの構成 ■ノードマネージャ ■WebLogic Serverクラスタリング ■トランザクション・サービスのコンフィグレーション 受講前提条件 ・Linux の基本的な操作方法の理解 ・Java EE の基礎知識(サーブレットや JSP など) ※推奨 対象者 ・Oracle WebLogic Server 管理者 ・Javaアプリケーション開発者 ・アーキテクト コース日程 5日間 日程の詳細は Oracle University Webサイト にてご確認ください。 受講料 定価¥374,850(税込) ※Oracle PartnerNetwork会員様は、パートナー割引価格で受講いただけます。 Oracle WebLogic Server 12c の運用管理スキルをしっかり習得 待望のWebLogic Server 12c(12.1.2)対応研修がいよいよ提供開始です。 このコースでは、アプリケーション・サーバー管理者がOracle WebLogic Server 12cのインストールおよび設定方法を習得することができま す。管理コンソールやコマンドラインツール(WLST)などを使用してドメインを構成する方法やJava EEアプリケーションをサーバーにデ プロイする方法についても説明します。さらに、Oracle WebLogic Server のプロキシとしてOracle HTTP Serverを設定し、WebLogic Serverク ラスタによるアプリケーションのフェイルオーバーとロードバランシングをサポートする方法など、環境構築に必要なスキルとWebLogic Serverのモニタリングやログ情報の収集など運用に必要なスキルを実機演習を通して習得できます。さらに、Oracle WebLogic Server 12cで 強化されたActive GridLink for RACの構成方法やWebLogic Server 12.1.2の新機能である動的クラスタなど注目の新機能もカバーします。 Oracle WebLogic Server 12c: 管理 I ミドルウェア 開催日程 ■ 2014年 7月 7日 (月) 〜 11日 (金)
  52. 52. Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | コース内容 ■Java EE 6 概要 ■開発環境の整備 ■Webコンポーネントモデル ■JSFを使用した開発 ■CDIによる依存性注入 ■JSF モバイルアプリケーションの作成 ■Bean Validationの使用 ■EJBコンポーネントモデル ■Java Persistence API ■トランザクションポリシーの実装 ■セキュリティポリシーの実装 ■WebサービスおよびJava EE 統合技術 受講前提条件 ・SQLおよびHTML, CSSの基礎知識 ・統合開発環境(IDE)を使用したJavaプログラミング経験 対象者 ・Javaアプリケーション開発者 ・システム・エンジニア ・アーキテクト コース日程 5日間 日程の詳細は Oracle University Webサイト にてご確認ください。 受講料 定価¥374,850(税込) ※Oracle PartnerNetwork会員様は、パートナー割引価格で受講いただけます。 開発生産性がさらに向上したJava EE 6 標準技術で作る Webアプリケーションの開発ポイントが分かる。開発者にオススメのコース このコースでは、Java EE 6 に準拠したWebアプリケーションを開発、およびデプロイするための知識を習得することができます。 JavaServer Faces、Enterprise Java Beans、Java Persistence API をはじめとしたJava EE 6の主要な標準仕様について理解し、主にJSFテクノ ロジーを使用した、デスクトップやモバイルWebブラウザからアクセス可能なエンドツーエンドのWebアプリケーションの開発方法 を豊富な演習を通して学習することができます。 Java EE 6 アプリケーション開発 開催日程 ■ 2014年 9月 1日 (月) 〜 5日 (金) Java
  53. 53. Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | キャンペーンのご案内: Java SE 7 対応認定資格受験を検討されている皆さまに朗報です • Java SE 7 対応認定資格試験の成績 上位 10 名様 に受験チケットプレゼント 期間中にOCJP Bronze SE 7試験、またはOCJP Silver SE 7試験に合格された成績上位者10名様に次のス テップに進める受験チケットをプレゼントします。この機会にJava認定資格に挑戦してみてくださ い! – 対象者: • 2014年6月1日(日)〜8月31日(日)までに、次の資格試験に合格し認定資格を取得した方 *各試験とも対象者が10名を超える場合は抽選となります。予めご了承ください。 お問い合せは オラクルユニバーシティ まで http://www.oracle.com/jp/education/ Tel: 0120-155-092 資格試験 認定資格 Java SE 7 Bronze (1Z0-802) Oracle Certified Java Programmer, Bronze SE 7 Java SE 7 Programmer I (1Z0-803) Oracle Certified Java Programmer, Silver SE 7
  54. 54. Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | OCJP Silver SE 7 資格試験の受験準備は Oracle トレーニング・オンデマンドで! OCJP Silver SE 7資格取得準備セミナーを 90日間いつでも何度でも。 新時代のラーニングソリューション •インターネット経由でお好きな時間に お好きな場所で •実際の講義をそのまま収録してストリーミング配信 •資格試験の出題ポイントをわかりやす い講義と実践的な模擬問題で確認 •担当講師による Q&A いまなら無償体験版を視聴可能です!
  55. 55. Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×