1月 | 2011 | 寺田　佳央

Archive for 1月, 2011

JSF 2.0 で Facelets タグをコメントする方法

今日は、JSF 2.0 の Facelets でコンポーネントタグをコメントする方法をご紹介します。テスト用のコードを記載する際、デバッグ用のコード、もしくはダミーのコードを埋め込んだりする事があるかと思いますが、本番環境での表示には必要ないコンポーネントをコメントする方法を下記に紹介します。

まず、始めに、下記のようなサンプルページを作成してください。

<?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>
        <h:commandButton action="#{user.login_dummy}" value="Submit-Dummy"/><br/>
        <h:commandButton action="#{user.login}" value="Submit"/>
    </h:body>
</html>

CDI の UserBean.java

package jp.co.oracle.cdi;
import java.io.Serializable;
import javax.enterprise.context.SessionScoped;
import javax.faces.application.FacesMessage;
import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import javax.faces.validator.ValidatorException;
import javax.inject.Named;

@Named("user")
@SessionScoped
public class UserBean implements Serializable{
    
    public void login(){
        ;
    }

    public void login_dummy(){
        ;
    }
}

今回は上記コード中の「Submit-Dummy」ボタンをコメントします。何も考えず、通常通り HTML/XML のコメント(<!– –>)を使って下記のようにコメントをして実行してください。

<?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>
<!--        <h:commandButton action="#{user.login_dummy}" value="Submit-Dummy"/><br/> -->
        <h:commandButton action="#{user.login}" value="Submit"/>
    </h:body>
</html>

すると、下記のようなエラーが表示されます。

致命的: Error Rendering View[/comentSample.xhtml]
javax.el.PropertyNotFoundException: The class ‘jp.co.oracle.cdi.org$jboss$weld$bean-$Users$yt133043$NetBeansProjects$JSFSampleApplication$build$web$-ManagedBean-class_jp$co$oracle$cdi$UserBean_$$_WeldClientProxy’ does not have the property ‘login_dummy’.
警告: StandardWrapperValve[Faces Servlet]: PWC1406: Servlet.service() for servlet Faces Servlet threw exception

これは、通常の XML/HTML のコメントのように、<!– –> でコメントしても JSF 2.0 の実行環境では完全にコメントできていない事を表しています。内部的には、 #{user.login_dummy}の EL式が評価・処理されています。

そこで、JSF のコンポーネントタグをコメントする方法(EL式も含め)を２通り紹介します。

１． <ui:remove>　</ui:remove> タグを使用する方法
２． facelets.SKIP_COMMENTS を web.xml に記載する方法

まず、始めの方法は
<ui:remove> タグを使用する方法です。下記の 10 行目〜12 行目のように、コメントしたいコンポーネントを　<ui:remove>　</ui:remove> でくくってください。

<?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:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        <ui:remove>
            <h:commandButton action="#{user.login_dummy}" value="Submit-Dummy"/><br/>
        </ui:remove>
        <h:commandButton action="#{user.login}" value="Submit"/>
    </h:body>
</html>

コメントした後、画面を再描画すると「Submit-Dummy」のコマンドが非表示になっている事を確認できます。

この時の描画されたページの HTML ソースコードは下記のようになります。

<?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">
    <head>	
        <link rel="stylesheet" type="text/css" href="/JSFSampleApplication/primefaces_resource/2.1/skins/sam/skin.css" />
        <title>Facelet Title</title>
    </head>
    <body>
        <input type="submit" name="j_idt7" value="Submit" />
    </body>
</html>

次にもう一つの方法は、
web.xml 設定ファイルに facelets.SKIP_COMMENTS を記述する方法です。下記の7 行目〜10 行目のように web.xml に facelets.SKIP_COMMENTS を追加してください。すると<!– –> でくくられた箇所が EL 式も評価されずコメントされる事が確認できます。

web.xml 設定ファイルの編集：

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
    <context-param>
        <param-name>javax.faces.PROJECT_STAGE</param-name>
        <param-value>Production</param-value>
    </context-param>
    <context-param>
        <param-name>facelets.SKIP_COMMENTS</param-name>
        <param-value>true</param-value>
    </context-param>
...

この時の HTML の出力結果は下記のようになります。

<?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">
    <head>	
        <link rel="stylesheet" type="text/css" href="/JSFSampleApplication/primefaces_resource/2.1/skins/sam/skin.css" />
        <title>Facelet Title</title>
    </head>
    <body>
        <input type="submit" name="j_idt7" value="Submit" />
    </body>
</html>

どちらの方法を使用してもコメントができるようになりますので、開発者の皆様の使い勝手の良い方法を選択してください。

2011年1月19日 at 5:34 午後

JSF 2.0 の Ajax 対応はとてもかんたん

JSF 2.0 の新機能の一つに Ajax 対応があります。今日は JSF 2.0 に追加された Ajax と画面遷移が無いページ(同一描画内)で利用可能な @ViewScope について紹介します。

JSF 2.0 で追加された Ajax の機能を使うと、JavaScript の知識が殆どなくても Ajax のページを作成する事ができます。またその際、自身で XMLHttpRequest, XMLHttpResponse の通信処理も記載する必要がないため開発効率が向上します。

もっと誇張していうなら、通常の JSF ページに対してほんの数行追加するだけで、簡単に Ajax 対応させる事ができます。下記に示す例ではほんの１〜２行追加するだけで Ajax 対応ページを実現しています。

JSF 2.0 のページを Ajax 対応させるための開発の手順としては、通常の JSF のページを記載して頂き、最後に Ajax 対応用のタグを追加するという手順で行って頂く事ができます、そのため、Ajax 対応を意識をせずに記載できるようになっています。

それでは、JSF 2.0 における Ajax 対応について詳細に説明していきます。JSF では「実行」と「描画」に分けて処理を行います。

実行フェーズでは下記を行います
●　コンポーネントデータのコンバートやバリデート
●　入力データをモデル（サーバ側の CDI/Managed Bean）に送信
●　アクション、アクションリスナーの実行

描画フェーズでは下記を行います。
●　処理結果の描画

必要な描画部分だけを更新できるため、サーバ、クライアント（ブラウザ）共に負荷（データ転送容量や全データの描画処理等）を軽減する事ができるようになります。

サンプルアプリケーションの作成
それでは、サンプルのアプリケーションを作成してみます。ユーザ名、パスワードを入力し、ボタンを押下するアプリケーションを作成します。

このアプリケーションの描画部分である Facelets は下記のように記載します。

ログイン Facelets のソースコード (Ajax 未対応)：

                <h:form>
                <h:inputText id="name" value="#{user.name}" validator="#{user.validateName}">
                </h:inputText> #{' '}
                <h:message for="name" id="nameError" style="color: red"/>
                <br/>

                <h:inputSecret id="password" value="#{user.password}">
                </h:inputSecret> 
                <br/>                
                <h:commandButton value="Submit" action="#{user.login}">
                </h:commandButton>
                </h:form>

CDI の UserBean.java は下記のように書きます。下記のコードは Submit ボタンが押下された際 (UserBean#logic が実行される)、画面遷移は行わず入力されたデータのバリデーションのみ行います。@Named(“user”) の代わりに @ManagedBean(name=”user”) を指定すると、本クラスは CDI ではなく JSF の Managed Bean として扱われます。
(※ データの入力値チェックは通常 JavaScript で記載する事が多いと思いますが、今回は説明をかんたんにするためサーバ側でチェックを行っています。)

UserBean.java のソースコード：

package jp.co.oracle.cdi;

import java.io.Serializable;
import javax.enterprise.context.SessionScoped;
import javax.faces.bean.ManagedBean;
import javax.faces.application.FacesMessage;
import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import javax.faces.validator.ValidatorException;
import javax.inject.Named;

@Named("user") //@ManagedBean(name="user")
@SessionScoped
public class UserBean implements Serializable{
    private String name="";
    private String password;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }
    
    public void validateName(FacesContext fc, UIComponent uic, Object value){
        String inputData = (String)value;
        if(inputData.length() > 25){
            throw new ValidatorException(new FacesMessage("25 文字以上は入力できません。"));
        } else if(inputData.contains("_")){
            throw new ValidatorException(new FacesMessage("アンダースコアは入力できません。"));
        } else if (! inputData.matches("^[\\u0020-\\u007E]+$")){
            throw new ValidatorException(new FacesMessage("入力文字は ASCII 文字でなければなりません。"));           
        } else{
            ;
        }
    }
    
    public void login(){
        ;
    }
    
}

コードを記述した後、アプリケーションを実行してください。「Submit」ボタンを押下すると Validation が実行されます。この際、画面の一部ではなく全画面が再読み込みされている事を確認してください。

次に、上記のコードに対して下記のコードを追加してください。

3 行目：<f:ajax execute=”name” render=”nameError” event=”blur” />
12 行目：<f:ajax/>

追記したログイン Facelets のソースコード（Ajax 対応）：

                <h:form>
                <h:inputText id="name" value="#{user.name}" validator="#{user.validateName}">
                    <f:ajax execute="name" render="nameError" event="blur" />
                </h:inputText> #{' '}
                <h:message for="name" id="nameError" style="color: red"/>
                <br/>

                <h:inputSecret id="password" value="#{user.password}">
                </h:inputSecret> 
                <br/>                
                <h:commandButton value="Submit" action="#{user.login}">
                    <f:ajax/>
                </h:commandButton>
                </h:form>

コードを追記後、アプリケーションを再実行してください。実行すると、画面をリフレッシュせず Validation を実行する事が確認できます。

上記で追加した <f:ajax execute=”name” render=”nameError” event=”blur” /> は execute, render, event の 3 つの属性を持っています。

execute=”name” で指定した “name” は Ajax のリクエストを送信した際、サーバ側で実行される JSF コンポーネント名を指定します（複数のコンポーネントを実行する場合、スペースで区切ります。また、直接コンポーネント名を指定する他、@this, @form, @all, @none 等の予約語を指定する事もできます。）。上記の例では <h:inputText id=”name” のコンポーネントが実行されます。

次に、render=”nameError” ですが、Ajax の実行結果を描画する JSF コンポーネントを指定します（複数のコンポーネントを実行する場合、スペースで区切ります）。上記の例では <h:message for=”name” id=”nameError” style=”color: red”/> の部分が再描画されます。

次に event=”blur” ですが、どのタイミングでこの Ajax が実行されるかを指定します。blur は onblur の事を指し、コンポーネントのフォーカスが失われた際に実行する事を意味しています。

つまり、上記のコードを追加すると、テキストフィールドに対するフォーカスを失った際、id=”name” で指定したコンポーネントを実行し、id=”nameError” で指定した箇所にエラーコードを出力するという動きになります。

最後に、上記の例では<h:commandButton/> のタグ内に <f:ajax> タグを記載しています。これは input 内にフォーカスがあたっている際に、ボタンが押下された場合、Ajax イベントとボタン押下のイベントが競合して同時実行されてしまう可能性があるため、このような意図しない振る舞いを防ぐために記載しています。なぜなら、JSF では Ajax のリクエストをキューイングしますので、最初の Ajax のリクエストが終了した後に、次の commandButton 内に記載した Ajax リクエストが実行されるようになります。

<f:ajax> タグはその他、disabled, event, execute, immediate, onerror, onevent, listener, render の属性を指定する事ができます。
例えば、下記のようにしてエラーハンドリングを行う事ができます。

<f:ajax onerror=”handleAjaxError”/>

如何でしょうか？たった１、２行の追加で、
かんたんに Ajax 対応ができる事ができました。

それでは、
上記よりちょっとだけ複雑な Ajax のページを作成してみます。

このページはテキストフィールド内に入力したデータをテーブル内に追加していく（カートのような）ページです。この例では直接製品名を入力していますが、製品の写真を表示したりボタン等を設けてよりリッチなページも作成する事ができるかと思います。
（※　今回は説明かんたんにするためテキスト入力にさせて頂きます。）

まず、このページの描画用 Facelets を下記のように記載します。

簡易カート Facelets のソースコード (Ajax 未対応)

                <h:form prependId="false">
                    <h:inputText id="productname" value="#{cart.product.productname}">
                    </h:inputText> #{' '}
                    <h:commandButton action="#{cart.addItem}" value="カートに追加">
                    </h:commandButton>
                    <br/>
                    <br/>

                    <h:dataTable border="1" id="tables" value="#{cart.selectedItems}" var="item">
                        <f:facet name="header">  
                            <h:outputText value="追加された製品一覧" />  
                        </f:facet>
                        <h:column>
                            <h:outputText value="#{item.productname}" />  
                        </h:column>
                    </h:dataTable>
                </h:form>

次に、製品名を持つ製品 Bean を作成します。

製品 Bean のソースコード：

package jp.co.oracle.cdi;
import java.io.Serializable;

public class Product implements Serializable{

    private String productname;

    public String getProductname() {
        return productname;
    }

    public void setProductname(String productname) {
        this.productname = productname;
    }    
}

最後に、入力された製品名を格納する Cart Bean を作成します。

カート Bean のソースコード：

package jp.co.oracle.cdi;
import java.io.Serializable;
import java.util.ArrayList;
import javax.enterprise.context.SessionScoped;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import javax.inject.Named;
import javax.validation.constraints.NotNull;

@Named("cart")
@SessionScoped
public class Cart implements Serializable{
    @NotNull
    private Product product = new Product();

    private ArrayList<Product> selectedItems = new ArrayList();

    public ArrayList<Product> getSelectedItems() {
        return selectedItems;
    }

    public void setSelectedItems(ArrayList<Product> selectedItems) {
        this.selectedItems = selectedItems;
    }
    
    public Product getProduct() {
        return product;
    }

    public void setProduct(Product product) {
        this.product = product;
    }

    public void addItem(){
        String inputProductName = product.getProductname();

        Product item = new Product();
        item.setProductname(inputProductName);
        selectedItems.add(item);
    }
}

補足：

このページの振る舞いについて若干補足します。
1. <h:inputText id=”productname” value=”#{cart.product.productname}”>
の描画領域にデータを入力します。

2. 入力された値は、下記の呼び出しによって Product のインスタンスが生成されます。
Cart#setProduct()#setProductname(productname)

3. ボタンが押下された際、Cart#addItem が実行されます。
<h:commandButton action=”#{cart.addItem}” value=”カートに追加”>

4. Cart#addItem は、内部で持つ ArrayList に対して入力された値を追加します。
この際画面遷移は行わず同一ページを表示します。

5. Cart 中の ArrayList に含まれる一覧をリスト表示します。
<h:dataTable border=”1″ id=”tables” value=”#{cart.selectedItems}” var=”item”>

6. 配列の各要素は、var=”item” となるため、#{item.productname}で製品名を表示します。

ソースコードを記述後、アプリケーションを実行してください。すると画面がリフレッシュされ、入力した文字列が画面下部に表示されます。

次に Ajax 対応させます。Ajax 対応させるために記載するコードは下記の１行だけです。

5 行目：<f:ajax execute=”productname” render=”tables”/>

上記 Ajax 対応のコードはテキストフィールドの値で Ajax の Request を送信し、dataTable の描画部分を更新しています。

追記した簡易カート Facelets のソースコード（Ajax 対応）：

                <h:form prependId="false">
                    <h:inputText id="productname" value="#{cart.product.productname}">
                    </h:inputText> #{' '}
                    <h:commandButton action="#{cart.addItem}" value="カートに追加">
                        <f:ajax execute="productname" render="tables"/> 
                    </h:commandButton>
                    <br/>
                    <br/>

                    <h:dataTable border="1" id="tables" value="#{cart.selectedItems}" var="item">
                        <f:facet name="header">  
                            <h:outputText value="追加された製品一覧" />  
                        </f:facet>
                        <h:column>
                            <h:outputText value="#{item.productname}" />  
                        </h:column>
                    </h:dataTable>
                </h:form>

追記したコードでアプリケーションを再度実行してください。画面がリフレッシュされず、ボタン押下時に画面下部に文字列が追加されている事を確認できるかと思います。

ViewScoped について
最後に、JSF 2.0 で追加された @ViewScoped を紹介します。上記 CDI の Cart Bean は @SessionScoped を宣言しています。つまり上記 Cart Bean はセッションの有効期限内はずっと保持されます。
JSF 2.0 では画面遷移の無い同一画面のみ有効なスコープ ViewScoped が新たに追加されました。ViewScoped は CDI(Weld) では実装されておらず、JSF の Managed Bean で実装されています。
そこで、ViewScope を扱うためには、CDI から Managed Bean に変更する必要があります（もしくは独自拡張を実施）。

Cart Bean を CDI から Managed Bean に変更するため下記のように書き直してください。

変更箇所（11〜14 行目）：
// @Named(“cart”)
// @SessionScoped
@ManagedBean(name=”cart”)
@ViewScoped

Managed Bean に修正したコード：

package jp.co.oracle.cdi;

import java.io.Serializable;
import java.util.ArrayList;
import javax.enterprise.context.SessionScoped;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import javax.inject.Named;
import javax.validation.constraints.NotNull;

// @Named("cart")
// @SessionScoped
@ManagedBean(name="cart")
@ViewScoped
public class Cart implements Serializable{
    @NotNull
    private Product product = new Product();

    private ArrayList<Product> selectedItems = new ArrayList();

    public ArrayList<Product> getSelectedItems() {
        return selectedItems;
    }

    public void setSelectedItems(ArrayList<Product> selectedItems) {
        this.selectedItems = selectedItems;
    }
    
    public Product getProduct() {
        return product;
    }

    public void setProduct(Product product) {
        this.product = product;
    }

    public void addItem(){
        String name = product.getProductname();
        System.out.println("Product Name: " + name);
        Product product = new Product();
        product.setProductname(name);
        selectedItems.add(product);
    }
}

変更後、再度アプリケーションを実行してください。
SessionScoped の場合は、画面をリロード（再読み込み）しても、過去に入力したデータが表示されていました。
一方 ViewScoped に変更すると画面をリロードすると(ビューが変わるため)、データが破棄されている事が確認できます。
この ViewScope は同一画面内で処理する Ajax 等に便利なので是非ご使用ください。

最後に、上記では <f:ajax/> タグを使って Ajax を実現しましたが、細かなカスタマイズを行いたい場合は、別途カスタマイズできるように JavaScript ライブラリを提供しています。
そういったニーズがある場合、JavaScript ライブラリを利用するために下記のコードを追加して実装してください。
<h:outputScript library=”javax.faces” name=”jsf.js”/>
また、jsf.ajax には addOnError(), addOnEvent(), isAutoExec(), request(), response() 等の関数が用意されていますので、これらを使って処理を柔軟に記載する事ができるようになります。

是非、JSF 2.0 の Ajax 対応を試してみてください。

2011年1月18日 at 6:25 午後 4件のコメント

WebLogic 10.3.4 が正式リリース

WebLogic 10.3.4 が正式リリースされました。WebLogic 10.3.4 は ExaLogic 対応等数多くの機能追加があります。例えば、JSF 2.0 や JPA 2.0 が利用できるようになっています。下記では昨年開催された Oracle DBA Developer Days 2010 のイベントで発表した WebLogic Server 10.3.4 の新機能概要をプレゼンでまとめていますので、どうぞご参照ください。

また、下記のデモは 10.3.4 に追加されたクラスローダ解析ツールを JSF 2.0 のアプリケーションを作成してデモしています。ClassLoader Analysis Tool はクラス名の衝突を Web の画面から確認できるようになっていますので、非常に便利です。
（画面を大きくし 720p に変更してご覧ください。）

また、下記のデモは 10.3.4 から Maven Plugin を提供しますが、WebLogic の Maven Plugin の利用方法について紹介しています。

2011年1月16日 at 10:39 午前

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

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>

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

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

寺田　佳央 – Yoshio Terada

Archive for 1月, 2011

JSF 2.0 で Facelets タグをコメントする方法

JSF 2.0 の Ajax 対応はとてもかんたん

WebLogic 10.3.4 が正式リリース

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

Java Champion & Evangelist

Translate

ご注意

カレンダー

カテゴリー

タグクラウド

Twitter

過去の人気記事

clustermap

ブログ統計情報

Feeds

アーカイブ

ブログ管理

2011年1月
月	火	水	木	金	土	日
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31

寺田 佳央 – Yoshio Terada

Archive for 1月, 2011

JSF 2.0 で Facelets タグをコメントする方法

JSF 2.0 の Ajax 対応はとてもかんたん

WebLogic 10.3.4 が正式リリース

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

Java Champion & Evangelist

Translate

ご注意

カレンダー

カテゴリー

タグクラウド

Twitter

過去の人気記事

clustermap

ブログ統計情報

Feeds

アーカイブ

ブログ管理

寺田　佳央 – Yoshio Terada