56
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | JavaServer Faces 入門 はじめてのJava EEアプリケーション開発シリーズ 2: 日本オラクル株式会社 オラクルユニバーシティ 岡田 大輔 20140624

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

Embed Size (px)

DESCRIPTION

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

Citation preview

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

Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |

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

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

Page 2: JavaServer Faces入門:  はじめてのJava EEアプリケーション開発シリーズ: 第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.

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

Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |

Agenda

JavaServer Faces (JSF) とは?

Webアプリケーションを作ってみよう

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

Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |

JavaServer Faces (JSF)とは?

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

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

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

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フレームワーク標準仕様

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

Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |

JavaServer Facesとは?

• Java EE標準で提供されるWebアプリケーションのためのUIフレームワーク

–コンポーネント・ベースでユーザー・インタフェースを作成 • UIの構成要素は「UIコンポーネント」として提供される

• イベント駆動型プログラミング

–ビュー定義はFacelet (XHTML+JSFタグ)を使用 • テンプレート・エンジン

• Ajaxをサポート

• …

Webアプリケーションを効率良く開発可能に

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

Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |

Webコンテナ

JSFとMVC

HTTPリクエスト

HTTPレスポンス

コントローラー

(Faces Servlet)

ビュー

(Facelet)

モデル

(マネージドBean)

生成・管理

操作・リダイレクト

アクセス

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

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

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

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に渡す

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

Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |

JSFのライフサイクル

ビューの 復元

入力値の 適用

検証処理 イベント 処理

イベント 処理

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

イベント 処理

イベント 処理

アプリケーション

呼び出し

モデル値の 更新

HTTP リクエスト

HTTP レスポンス

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

Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |

JSFのライフサイクル

•リクエストに基づいてページのUIComponentツリーを作成(復元)する

(初期リクエスト時は作成、ポスト・バック時は復元) ビューの復元

•送信されたフォームの値をUIコンポーネントに適用する

文字列データをJavaデータ型に変換 (コンバータ) 入力値の適用

•UIComponentに関連付けられた検証(バリデータ)を行う 検証処理

•入力値の適用フェーズで適用されたUIComponentの値をマネージドBeanにコピーする モデル値の更新

•マネージドBeanのメソッドを呼び出してビジネスロジックを実行する アプリケーション呼び出し

•マネージドBeanの値を読み取り(EL式)、レスポンスを返す レスポンスのレンダリング

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

Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |

Webコンテナ

JSFを使用した開発イメージ

HTTPリクエスト

HTTPレスポンス

JSF (Webアプリケーションフレームワーク)

Webアプリケーション

プレゼンテーション アプリケーションロジック • 画面遷移ロジック • 検証ロジック • イベント処理

• …

ビジネスロジック • DBアクセス

• …

Facelet (XHTML) マネージド Bean / CDI POJO

開発環境

開発・ デプロイ

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

Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |

Webアプリケーションを作ってみよう

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

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回で説明します

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

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;

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

Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |

プロジェクトを作成する (1)

新規プロジェクト を選択

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

Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |

プロジェクトを作成する (2)

Webアプリケーション を選択

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

Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |

プロジェクトを作成する (3)

[Java EE 6 Web] と [コンテキストと依存性の 注入を有効にする]を選択

[JavaServer Faces] を選択

登録されているライブラリで [JSF2.2] を選択

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

Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |

NetBeansの編集画面

One Point:

• NetBeansでは作成するプログラムをプロジェクトという単位で管理しています

• プロジェクト・ウィンドウには作成したソースコード(.javaファイル)が表示されます

• エディタ・ウィンドウにはソースコードを編集することができます

• 出力ウィンドウにはプログラムの実行結果などが表示されます

プロジェクト ウィンドウ

エディタ ウィンドウ

出力 ウィンドウ

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

Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |

プロジェクト・プロパティの設定

チェックを外す

One Point:

• WebLogic Serverにアプリケーションをデプロイする場合は、JSF2.2 ライブラリをパッケージ対象から除外します

• 必要に応じて [ソース] のソース/バイナリ形式 を適切なJDKバージョン(JDK7など)に変更します

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

Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |

EclipseでのWebプロジェクトの作成

One Point:

• Ecliplse ではWebプロジェクトを作成します

• Webプロジェクトの 構成 では「JavaServer Faces v2.0」プロジェクトを選択します

• 必要に応じて 「Java」 のバージョンを 1.7 などに変更します

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

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

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

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

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

Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |

JSFページの作成

One Point:

• オプション: で指定するJSFページのビュー記述言語はFacletsを選択します

• JSPも使用可能ですが、Facletsをオススメします

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

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を変更

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

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>

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

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 に格納される

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

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>

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

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>

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

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

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

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ページを指定できる

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

Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |

マネージド Bean の作成

One Point:

• JSF マネージドBean は、通常のJavaクラスとして作成し、@ManagedBean 注釈を指定します

• マネージドBeanの生成、および破棄はコンテナによって管理されます

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

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

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

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 と同じ)

画面遷移を行うメソッド

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

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式を使います

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

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メソッドを呼び出します

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

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 属性には、コレクション内の各オブジェクトの参照変数を指定

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

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を指定します。

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

Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |

JSFでの検証と変換処理

• JSFライフサイクル・フェーズで呼び出される

• JSFでは標準でバリデータやコンバータを提供

– Converter クラスや Validator クラスの開発、および Bean Validation も使用可能

ビューの 復元

入力値の 適用

検証処理 イベント 処理

イベント 処理

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

イベント 処理

イベント 処理

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

モデル値の 更新

HTTP リクエスト

HTTP レスポンス

コンバータ バリデータ

コンバータ

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

Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |

入力値を検証するには? (1)

• 入力必須のフィールドの検証を行うには …

– UIComponent タグの required 属性を true に設定

–検証失敗時のエラーメッセージは requiredMessage 属性で指定できる

•エラーメッセージを表示するには …

– <h:messages>タグ、<h:message>タグを使用

– for 属性でどのタグに対するメッセージなのかを指定 • 対象になる<h:inputText>タグなどにも、id 属性を追加する

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

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

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

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で使用できるタグ

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

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属性が先に評価される

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

Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |

入力値を変換するには?

• フォームに入力された値は String 型で扱われる

– UIComponent への反映時に対応したマネージド Bean のデータ型に変換される

–一般的なデータ型(数値, 日付など)には標準コンバーターが用意されている • マネージド Bean のプロパティ型に基づいて暗黙的に変換される

•変換するデータ型は converter 属性でも指定可能

– converter 属性に指定された型に変換できない場合はエラー・メッセージが表示される

One Point:

• 日付や数値に対して標準のコンバーター タグを使うことができます。 (<f:dateTimeConverter>タグ, <f:convertNumber>タグ)

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

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 属性を指定

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

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>

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

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式 を使ってアクセス可能です

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

Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |

オラクルユニバーシティからのお知らせ

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

Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |

オラクルユニバーシティからのお知らせ

• WebLogic Serverの管理方法やJava EE 6を使ったアプリケーション開発方法を体系的に学習したい方に最適な研修コースをご提供しています。

– Classroomトレーニングだけでなく、Live Virtual Classや『Oracle トレーニング・オンデマンド』など多様な受講形態から選択いただけます。

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

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日 (金)

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

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

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

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

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

Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |

OCJP Silver SE 7 資格試験の受験準備は Oracle トレーニング・オンデマンドで!

OCJP Silver SE 7資格取得準備セミナーを90日間いつでも何度でも。 新時代のラーニングソリューション

•インターネット経由でお好きな時間にお好きな場所で

•実際の講義をそのまま収録してストリーミング配信

•資格試験の出題ポイントをわかりやすい講義と実践的な模擬問題で確認

•担当講師による Q&A

いまなら無償体験版を視聴可能です!

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

Copyright © 2014 Oracle and/or its affiliates. All rights reserved. |

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