JavaServer Faces 2.0入門

Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 1

WebLogic Server 勉強会 JavaServer Faces 2.0入門

2012年11月22日

日本オラクル株式会社

Fusion Middleware事業統括本部松林晶


Program Agenda

JSFとは

– JSFとは

– JSFのメリット

JSFの技術概要

RIAなJSFの作成（Ajaxサポート）


JSFとは


JSFとは

JavaServer Facesの略

JSFは、Java EE標準のWebアプリケーションフレームワーク

特徴

– リクエスト駆動ではなく、コンポネントベース

– JSP、XHTML、XULを画面コンポネントとして使用可能

Oracle WebLogic Server 12c(12.1.1)

– JSF 2.1, 2.0, 1.2, 1.1をサポート(http://docs.oracle.com/cd/E28613_01/web.1211/b65935/toc.htm#BGGBIJBI)

JSF概要

バージョンリリースコメント

1.2 2006年5月 Java EEに正式に採用（Java EE 5）

2.0 2009年6月 Java EE6

2.1 2010年10月 2011年9月現在の最新バージョン

http://docs.oracle.com/cd/E28613_01/web.1211/b65935/toc.htm


JSFとは JSFのメリット

安心のJava EE標準仕様アノテーションベースのかん

たん開発（EoD）

Ajaxタグによる

RIA開発

コンポネント駆動の

プログラミング

JSF


JSFとは

安心のJava EE 標準仕様

– 全てのAPサーバが実装及びサポートしているため安心して使用可能

アノテーションベースのかんたん開発

– XMLの記述がオプション化（XML地獄からの脱却）

– @Managed をPOJOに付与するだけでマネージドBean作成等

AjaxタグによるRIA開発

– <f:ajax>タグによって、RIAを従来よりも簡単に開発可能

JSFのメリット①


JSFとは

コンポネント駆動

– シンプルなプログラミング

ステートレスなHTTPのやり取りを意識することなく

スタンドアロンのアプリケーションのように作成可能

JSFのメリット②


JSFとは

アノテーションによるかんたん開発化

JSPに代わりFaceletsを使用可能(XHTMLの利用/テンプレート)

– 画面の部品の共通化

GETリクエストの使用(POSTだけでなく)

– ページをお気に入りに登録可能

Ajaxサポート

JSF2.0新機能概要


JSF技術概要


XUL

JSF技術概要 JSFの構成要素

FacesServlet

JSP コンバータ

バリデータ

マネージドBean

HTTPリクエスト

HTTPレスポンス

faces-config.xml (オプション)

XHTML

コンポネント

コンポネント

レンダラ

各コンポネントは、レンダラを呼び出してレスポンスを生成する。デフォルトのレンダラはHTMLを生成する（例えば、<h:button/>

⇒<input type=”button”>）

コンポネントツリーに展開された値のチェックを行う。

チェックエラーの場合は、レスポンスのレンダリングフェーズに進む

オブジェクトを表示用の文字列に変換する

各ページ間の画面遷移、EJB呼出し、出入力値の管理

※ XULとは、XML User Interface Languageの略で、“ずーる”と読む。

HTTPのリクエストから適切なページへ遷移させる


JSF技術概要シンプルなJSFの作成

<?xml version="1.0" encoding="windows-31j" ?> <!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:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-31j" /> <title>SimplePage</title> </head> <body> <f:view> <h:form> <h:commandButton value="Display" action="#{simplePageBean.actionDisplay}" /> <h:outputText value="#{simplePageBean.display}" /> </h:form> </f:view> </body></html>

package managed; import java.text.SimpleDateFormat; import java.util.Calendar; import javax.faces.bean.ManagedBean; @ManagedBean public class SimplePageBean { public void actionDisplay(){ display = new SimpleDateFormat("HH:mm:SS"). format(Calendar.getInstance().getTime()); } private String display = "まだボタンが押されていない"; public String getDisplay() { return display; } }

simple.xhtml SimplePageBean.java

実行イメージ


JSF技術概要 JSFのライフサイクル概要

④モデル値

の更新イベントの処理

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

イベントの処理 ⑥レスポンスの

レンダリング

①ビューの復元 ②入力値の適用イベントの処理イベントの処理 ③検証の処理

ターゲットビューを復元し、ユーザの入力を適用します

クライアントからサーバに対するリクエストの値（フォーム、ヘッダー等）をページの様々なコンポネントに適用します。

モデル(マネージドBean)の更新はまだ行わない

コンポネントツリーを操作しながら、型変換及び、値が有効か否か検証する

検証OK

検証NG

コンポネントに設定された値でマネージドBeanを更新する

ビジネスロジックを呼び出す

リクエスト

レスポンスレスポン

スを作成

する


JSF技術概要 JSFのライフサイクル概要

④モデル値

の更新イベントの処理

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

イベントの処理 ⑥レスポンスの

レンダリング

①ビューの復元 ②入力値の適用イベントの処理イベントの処理 ③検証の処理

検証OK

検証NG

root

input

output

root

input

output

“AAA”

ユーザの入力値

root

input

output

“AAA”

検証(5文字以内か)

root

input

output

マネージドBean

private String name;

public void execute()

“AAA”

root

input

output

マネージドBean

private String name;

public void execute()

“AAA”

実行

リクエスト

レスポンス


JSF技術概要コンポネント

GO

ID NAME BD

1 Akira 10/28

2 Shun 8/13

INPUT :

<h:commandButton> <h:inputText> <h:outputText>

<h:dataTable>

<h:column>

Next Page

<h:commandLink>

MAN

WOMAN

＊＊＊ <h:inputSecret>

CHECK

ID

NAME

BD

NAME

<h:selectBooleanCheckbox>

<h:selectOneListbox>

<h:selectOneRadio>

HTMLで使用可能な画面コンポネントはほぼ使用可能

– 従来のHTMLで記述することも可能 ⇒ デザイナとプログラマの分離


JSF技術概要 Facelets のテンプレート

HOME

NEWS

PRODUCT

LINK

COMPANY

<ui:insert name=“header”>

<ui:insert name=“footer”>

Welcome !

<ui:define name=“content”>

<ui:define name=“content”>

<ui:insert name=“content”>

News !

2011. 10. 28 03:13:21 Update

XXXX xxxxx

テンプレートの定義

<ui:insert name=“menu”>

画面の共通部品化


RIAなJSFの作成（Ajaxサポート）


Ajaxサポート

JavaScriptの知識がなくても、<f:ajax>タグで

リッチなアプリケーションを作成可能

例

サンプル例

<h:outputText id="keystr" value="#{indexBean.keyword}"/><br/>

<h:inputText id="keyword" value="#{indexBean.keyword}">

<f:ajax event="keyup" render="keystr"/>

</h:inputText>


Ajaxサポート

タグの属性

サンプル例

<f:ajax event="keyup" render="keystr"/>

属性意味

event 何をきっかけとして非同期でリクエストを送出するか

“keyup”の場合は、キーボードをタイプしたタイミング

render Ajaxの呼び出し後にレンダリング(再描画)する画面の範囲


まとめ

JSFは標準のWebアプリケーションフレームワーク

アノテーションベースのかんたん開発

Ajaxをサポートし簡単にRIA作成



Documents

JavaServer Faces 2.0入門