JSF 2.0 の新機能概要とFacelets テンプレートのご紹介

2011年1月14日 at 6:26 午後 1件のコメント

JavaServer Faces 2.0(JSF) は Java EE 6 含まれる標準 Web ユーザインタフェース技術です。これから数回に渡り、JSF 2.0 の新機能を紹介して行きたいと思います。

JSF 2.0 の新機能

Facelets/VDL による実装
Ajax 対応
カスタム複合コンポーネント
Behavior
Partial State
ページナビゲーションの改良
Resource Loading
ブックマーク可能なページ
New Event API
例外ハンドリング
JSR-303 Bean Validation のサポート
faces-config.xml のオプション化

JSF 2.0 では JSF 1.2 に比べ上記のような新機能が含まれますが、今日は JSF 2.0 から標準仕様に含まれた Facelets について紹介します。
Facelets は JSF 1.2 まで View を記載する方法として使用されていた JavaServer Pages(JSP) での代替え方法として開発されました。JSF 1.2 の頃は Facelets は標準仕様内に組み込まれていなかったため、別途利用するための設定等が必要でしたが、JSF 2.0 からは JSF の標準仕様内に組み込まれたため、今後は JSP の変わりに Facelets(XHTML) を記載して開発するようになります。
また、JSF 1.2 は Servlet 2.5 と組み合わせて動作させる必要がありましたが、JSF 2.0 では Servlet 3.0 との組み合わせは必須ではなく、Servlet 2.5 との組み合わせでも動作させる事ができるようになっています。つまり JSF 2.0 の実行環境(参照実装は Mojjara(モハラ)) は Java EE 6 の環境下だけでなく Java EE 5 の環境でも動作させる事ができるようになっています。WebLogic 10.3.3 等 Java EE 5 のアプリケーションサーバ上でも JSF 2.0 を動作させる事ができるようになっています。

● Facelets による開発の利点
JSF 1.2 までは JSP で JSF を開発していました。しかし JSP で開発する際には、コンパイル時にオーバヘッドが掛かっていました。例えば、JSP のコードを編集したり、保存、ページの再読み込みのような処理を行うたびに、JSP コンパイラは Java の Servlet コードを生成し、コンパイルをを行っていました。これは JSP の Translation プロセスと呼ばれ、約１～２秒程のオーバヘッドが掛かっていました（サーバの処理能力に依存）。
一方、JSP と異なり、Facelets ページは Servlet にコンパイルされず、XML として処理を行います。そして Facelets は表示を行うために高速な SAX ベースのコンパイラを使用しています。また Facelets はページの変更等を即座に検知する事ができるため、JSF における開発効率が向上します。

■テンプレート機能
多くの Web サイトではページ間のデザインを統一するため、共通の表示部分を持たせる事が多いかと思います

例えば、共通のヘッダやフッダ、サイドバー等はページ間で統一したいかと思います。上記の Web ページでは下記のように共通部分を５つ（ヘッダ、左ペイン、右ペイン、フッダ、自由記載のコンテンツ領域）に分割する事ができます。

この内、「自由記載のコンテンツ領域」以外は全ページで同一コンテンツを表示したいと考えます。このような場合、作成するページ毎に共通部分（ヘッダ、フッダ等）を記載すると、開発効率やメンテナンス性が非常に悪くなります。このような重複コンテンツを効率よく扱うために、Facelets では「テンプレート機能」を持ち共通部分をテンプレート内に記載し、必要な部分だけを編集する事ができるようになっています。

PrimeFaces について
上記の画面は全て NetBeans 7.0 Beta に含まれる PrimeFaces を使用して作成しています。Oracle のホームページの画面に似せて作成してみましたが、PrimeFaces は非常にリッチな JSF のコンポーネントを提供していますので、簡単にこのようなリッチな JSF Web アプリケーションを作成する事ができます。PrimeFaces が提供している各種 JSF コンポーネントの詳細は下記をご参照ください。

ご参考：PrimeFaces ShowCase　（提供されるコンポーネント一覧）

NetBeans 7.0 Beta で PrimeFaces を利用するためには、新規プロジェクトを作成する際、フレームワークの選択時に、「JavaServer Faces 」をチェックし「コンポーネント」より「PrimeFaces 2.1」を選択してください。

● プロジェクトの進め方とディレクトリ構成
今回、NetBeans 7.0 のプロジェクトを作成しますが、下記のような手順で画面を作成していきます。

1. ヘッダの作成
2. 左ペインの作成
3. 右ペインの作成
4. フッダの作成
5. テンプレートの作成
6. 各種ページの作成

ちなみに、プロジェクトのディレクトリ構成は下記のように作成しています。
「Web ページ」配下に「templates」ディレクトリを作成し、JSF のテンプレートファイル (1〜5) はすべてこのディレクトリ配下に作成します。

1. ヘッダ部分の作成

まず、ヘッダ部分を作成します。ヘッダ部分は PrimeFaces で提供されている MenuBar を利用します。

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:p="http://primefaces.prime.com.tr/ui"
      xmlns:h="http://java.sun.com/jsf/html">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        <h:form id="menue">
            <h:graphicImage url="/resources/images/Oracle_ja.gif"/>
            <p:menubar>
                <p:submenu label="製品">
                    <p:menuitem value="Oracle DataBase" url="http://www.oracle.com/jp/products/database/index.html">
                    </p:menuitem>
                    <p:menuitem value="Oracle Fusion Middleware" url="http://www.oracle.com/jp/products/middleware/index.html">
                    </p:menuitem>
                </p:submenu>

                <p:submenu label="ダウンロード">
                    <p:menuitem value="DataBase"></p:menuitem>
                    <p:menuitem value="DataBase 11g" url="http://www.oracle.com/technetwork/database/enterprise-edition/downloads/index.html">
                    </p:menuitem>
                </p:submenu>

                <p:submenu label="価格/ライセンス">
                    <p:menuitem value="価格表" url="http://www.oracle.com/jp/corporate/pricing/pricing-pricelists-079522-ja.html">
                    </p:menuitem>
                </p:submenu>

                <p:submenu label="サポート">
                    <p:menuitem value="価格表" url="http://www.oracle.com/jp/corporate/pricing/pricing-pricelists-079522-ja.html">
                    </p:menuitem>
                </p:submenu>            

                <p:submenu label="研修／資格">
                    <p:menuitem value="価格表" url="http://www.oracle.com/jp/corporate/pricing/pricing-pricelists-079522-ja.html">
                    </p:menuitem>
                </p:submenu>            

                <p:submenu label="パートナー">
                    <p:menuitem value="価格表" url="http://www.oracle.com/jp/corporate/pricing/pricing-pricelists-079522-ja.html">
                    </p:menuitem>
                </p:submenu>            

                <p:submenu label="日本オラクルについて">
                    <p:menuitem value="価格表" url="http://www.oracle.com/jp/corporate/pricing/pricing-pricelists-079522-ja.html">
                    </p:menuitem>
                </p:submenu>            
            </p:menubar>

        </h:form>
    </h:body>
</html>

2. 左ペイン部分の作成
次に左ペインの部分を作成します。

左ペインの部分は PrimeFaces で提供されている Menu を利用します。

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:p="http://primefaces.prime.com.tr/ui"
      xmlns:h="http://java.sun.com/jsf/html">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        <h:form>
            <div class="leftString">
                <p:menu>  
                    <p:submenu label="Oracle Fusion Middleware">  
                        <p:menuitem value="アプリケーション・グリッド"/>
                        <p:menuitem value="アプリケーション統合アーキテクチャ"/>
                        <p:menuitem value="WebLogic Server"/>
                        <p:menuitem value="ビジネス・インテリジェンス"/>
                        <p:menuitem value="ビジネスプロセス管理"/>
                        <p:menuitem value="コラボレーション"/>
                        <p:menuitem value="コンテンツ管理"/>
                        <p:menuitem value="データ統合"/>
                        <p:menuitem value="開発ツール"/>
                        <p:menuitem value="イベント駆動アーキテクチャ"/>
                        <p:menuitem value="Exalogic"/>
                        <p:menuitem value="ID管理"/>
                        <p:menuitem value="インメモリ・データグリッド"/>
                    </p:submenu>
                </p:menu>
            </div>
        </h:form>
    </h:body>
</html>

3. 右ペイン部分の作成
次に右ペインの部分を作成します。

右ペインの部分は PrimeFaces で提供されている Accordion Panel を利用します。

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:p="http://primefaces.prime.com.tr/ui"
      xmlns:h="http://java.sun.com/jsf/html">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        <h:form>
            <div class="leftString">
                <p:accordionPanel autoHeight="false">  
                    <p:tab title="ダウンロード">
                        <h:panelGrid columns="2" cellpadding="10">
                            <h:outputText value="Oracle Universal Content Management"/>
                        </h:panelGrid>
                    </p:tab>
                    <p:tab title="サポート">  
                        <h:panelGrid columns="2" cellpadding="10">  
                            <h:outputText value="Oracle Support"/>
                            <h:outputText value="Advanced Customer Services"/>
                        </h:panelGrid>
                    </p:tab>
                    <p:tab title="技術情報">  
                        <h:panelGrid columns="2" cellpadding="10">  
                            <h:outputText value="Oracle Content Management"/>
                        </h:panelGrid>
                    </p:tab>
                    <p:tab title="パートナー">  
                        <h:panelGrid columns="2" cellpadding="10">  
                            <h:outputText value="Find Specialized partner"/>
                        </h:panelGrid>
                    </p:tab>
                    <p:tab title="カタログ/データシート">  
                        <h:panelGrid columns="2" cellpadding="10">  
                            <h:outputText value="Brochure: Oracle Content Management (PDF)"/>
                            <h:outputText value="Data Sheet: Unversal Content Management (PDF)"/>
                        </h:panelGrid>
                    </p:tab>
                    <p:tab title="ホワイトペーパー">  
                        <h:panelGrid columns="2" cellpadding="10">  
                            <h:outputText value="Information Workplace Platform: Oracle vs Microsoft(PDF)"/>
                            <h:outputText value="Get More from Microsoft SharePoint with Oracle Fusion Middleware (PDF)"/>
                        </h:panelGrid>
                    </p:tab>
                </p:accordionPanel> 
            </div>
        </h:form>
    </h:body>
</html>

4.フッダ部分の作成
次にフッダ部を作成します。

フッダ部分はちょっと手抜きですが、下記のように記述します。

<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>
        <div class="greyBarBottom"><!--footer--></div>
        <h:graphicImage url="/resources/images/oracle-footer-tagline.gif"/>
        <div class="footerString">
        会社情報 | オラクルとサン | Oracle RSS Feeds | Subscribe | 採用情報 | お問い合わせ | サイトマップ | ウェブサイトのご使用条件 | 個人情報保護基本方針 | 情報保護基本方針
        </div>
    </h:body>
</html>

5. JSF テンプレートの作成
次に、上記で作成した各共通部分を含むテンプレートを作成します。NetBeans のプロジェクトから「新規」→「その他…」を選択してください。

すると下記の画面が表示されます。ここで「Facelets テンプレート」を選択します。

選択すると下記の画面が表示されますので、レイアウトのスタイルを選択して「完了(F)」ボタンを押下します。

ボタンを押下するとテンプレートの雛形が生成されますので、これを編集して Facelets テンプレートを完成させます。ここでは、 <ui:include src=”./top.xhtml”/>、<ui:include src=”./left.xhtml”/>、<ui:include src=”./right.xhtml”/>、<ui:include src=”./bottom.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:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html">

    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link href="./../resources/css/default.css" rel="stylesheet" type="text/css" />
        <link href="./../resources/css/tableLayout.css" rel="stylesheet" type="text/css" />
        <title>Facelets Template</title>
    </h:head>
    <h:body>
        <table cellspacing="10px">
            <tr>
                <td id="top" colspan="3">
                    <ui:insert name="top">
                        <ui:include src="./top.xhtml"/>
                    </ui:insert>
                </td>
            </tr>
            <tr>
                <td id="left">
                    <ui:insert name="left">
                        <ui:include src="./left.xhtml"/>
                    </ui:insert>
                </td>
                <td id="content">
                    <ui:insert name="content">Content</ui:insert>
                </td>
                <td id="right">
                    <ui:insert name="right">
                        <ui:include src="./right.xhtml"/>
                    </ui:insert>
                </td>
            </tr>
            <tr>
                <td id="bottom" colspan="3">
                    <ui:insert name="bottom">
                        <ui:include src="./bottom.xhtml"/>
                    </ui:insert>
                </td>
            </tr>
        </table>
    </h:body>
</html>

6. JSF テンプレートクライアント（表示用のページ）の作成

次に、テンプレートを利用した表示用のページを作成します。NetBeans のプロジェクトから「新規」→「その他…」を選択してください。

すると下記の画面が表示されます。ここで「Facelets テンプレートクライアント」を選択します。

ここで「テンプレート：」の「参照…」ボタンを押下してください。すると下記のように、テンプレートを選択するウィンドウが表示されます。

作成したテンプレート（tableTemplate2.xhtml）を選択し「ファイルを選択」ボタンを押下します。最後に「完了(F)」ボタンを押下します。
すると下記の雛形が自動生成されます。

<?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:ui="http://java.sun.com/jsf/facelets">
    
    <body>
        
        <ui:composition template="./templates/tableTemplate2.xhtml">
            
            <ui:define name="top">
                top
            </ui:define>

            <ui:define name="left">
                left
            </ui:define>

            <ui:define name="content">
                content
            </ui:define>

            <ui:define name="right">
                right
            </ui:define>

            <ui:define name="bottom">
                bottom
            </ui:define>

        </ui:composition>
        
    </body>
</html>

ここで「Facelets テンプレート」と「テンプレートクライアント」の関係を説明します。「Facelets テンプレート」の中身を確認すると下記のタグが記載されている事が確認できます。（それぞれ、17行目, 24行目, 29行目, 32行目, 39行目)

                    <ui:insert name="top">
                    <ui:insert name="left">
                    <ui:insert name="right">
                    <ui:insert name="content">Content</ui:insert>
                    <ui:insert name="bottom">

一方で、「テンプレートクライアント」の中身を確認すると下記のタグが記載されている事が確認できます。（それぞれ10行目, 14行目, 18行目, 22行目, 26行目）

        <ui:composition template="./templates/tableTemplate2.xhtml">
            <ui:define name="top">
            <ui:define name="left">
            <ui:define name="content">
            <ui:define name="right">
            <ui:define name="bottom">
        </ui:composition>

Facelets ではテンプレート中に記載されている <ui:insert name=”NAME”> の箇所をテンプレートクライアントの <ui:define name=”NAME”> で更新する事ができます。テンプレートの全てを変更したい場合は全て上書きする事ができますが（NetBeans で自動的に作成される上記の雛形は全てを上書きします）、自由記載のコンテンツ領域だけを編集したい場合は、下記のように必要な部分のみ（<ui:define name=”content”> のタグの部分だけを残してその部分のみ）を編集します。

<?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:ui="http://java.sun.com/jsf/facelets">
    
    <body>
        <ui:composition template="./templates/tableTemplate2.xhtml">
            <ui:define name="content">
                ここに「自由記載　コンテンツ領域」の内容を書きます。
            </ui:define>
        </ui:composition>
    </body>
</html>

テンプレートを使用して作成したコンテンツへアクセスすると下記の画面が表示されます。

JSF 2.0 の Facelets のテンプレート機能を効果的に利用すると Web ページの開発が効率化され、本当に必要な部分の開発にのみ集中できるようになります。また、NetBeans 7.0 Beta に含まれる PrimeFaces も非常にリッチな JSF コンポーネントが用意されていますので、見栄えのよい Web ページをかんたんに作成する事ができるようになります。

是非、お試しください。

本ページで使用した NetBeans 7.0 Beta のプロジェクトは下記より入手可能です。JSFSampleApplication.jar (NB7 プロジェクトファイルのアーカイブ)の入手はコチラ

余談：
上記、プロジェクトですが、web.xml の設定を Development にすると画面中に下記のワーニングが表示されます。（すいません、原因がつかめていません。）

The button/link/text component needs to have a Form in its ancestry. Please add <h:form>.
<param-name>javax.faces.PROJECT_STAGE</param-name>
<param-value>Development</param-value>

下記のように、Production に変更するとワーニングは表示されません。

<param-name>javax.faces.PROJECT_STAGE</param-name>
<param-value>Production</param-value>

原因がわかったら追記します。

Entry filed under: Application Server/GlassFish, GlassFish, Java.

今年１年を振り返って WebLogic 10.3.4 が正式リリース

1件のコメント

1. JSF 2.0 の詳細について « 寺田　佳央 – Yoshio Terada | 2012年8月24日 12:28 午前

[…] JSF 2.0 の新機能概要とFacelets テンプレートのご紹介 […]

寺田　佳央 – Yoshio Terada