JavaServer Faces アプリケーションの概要

5 分

このユニットでは、JavaServer Faces (JSF) の基本的な概念を学習するために、JSF を "ビュー" テクノロジとして使用します。

JavaServer Faces とは

JavaServer Faces は、Java EE 5 (2006) の一部として、Java Platform Enterprise Edition (Java EE) の仕様として採用されました。当初、JSF による HTML ページのレンダリングには、Java Server Pages (JSP) が使用されていました。バージョン 2.0 からは、通常の HTML に近い Facelets が使用されています。

JSF は、コンポーネントベースのアプリケーションフレームワークです。各コンポーネントの状態は、クライアントの操作に応じて保存されます。状態は、新しいページが要求されたときに保存され、返されるときに復元されます。

JSF の基本機能

JSF アプリケーションは、大きく次の 2 つの機能に分かれています。

Facelets:画面のレイアウトを記述する XHTML ベースのテンプレートエンジン
BackingBean:Facelets にバインドし、値を設定および処理する Java クラス

Facelets は、XHTML によって書かれた画面のレイアウトを記述する XHTML ベースのテンプレートエンジンです。 XHTML は、W3C で定義されているドキュメント型定義 (DTD) に準拠しており、xhtml 拡張子の付いたファイルとして記述されます。

BackingBean は、JSF ページにリンクされている Java クラスです。アクションメソッド、アクションリスナー、および値変更リスナーが含まれています。 Java EE 6 では、バッキング Bean は JSF によって管理される Bean で実装されていました。 Java EE 7 からは、Contexts and Dependency Injection (CDI) Bean が実装として使用されています。

PrimeFaces を使用して JSF ページを作成する

PrimeFaces はサードパーティによる JSF の実装であり、JSF Web コンポーネントを簡単に作成できます。 PrimeFaces は、jar が 1 つの軽量ライブラリであり、構成する必要はなく、必要な依存関係はありません。 xmlns:p="http://primefaces.org/ui" にあるように、PrimeFaces をダウンロードし、primefaces-<バージョン>.jar をクラスパスに追加して、名前空間をインポートするだけで、始めることができます。

例を見てみましょう。次の PrimeFaces ページでは、ラベル、入力フィールド、ボタンを表示するために、p:outputLabel、p:inputText、p:commandButton タグが使用されています。

<?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://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui" >
    <h:head>
        <title>Input Value Counter Sample</title>
    </h:head>
    <h:body>
        <h:form>
            <p:outputLabel value="Basic"/><br/>
            <p:inputText value="#{indexcontroller.inputValue}"/><br/>
            <p:commandButton value="Submit" action="#{indexcontroller.submitButtonAction()}"/><br/>
        </h:form>
    </h:body>
</html>

前の XHTML コードを記述すると、次の画面が表示されます。

Screenshot that shows a JSF Facelets sample.

PrimeFaces Ajax のサポート

JSF により Ajax アプリケーションが既定でサポートされています。画面を更新することなく、画面の一部を動的に更新できます。

PrimeFaces では、JSF によって提供される Ajax のサポートを簡単に実装できるようにするため、update 属性が使用されています。更新する必要があるコンポーネントを、そのターゲット ID で指定します。次の例を見ると、update ="ajaxUpdateText" 属性が p:commandButton に追加されているため、ボタンが選択されると <div id ="ajaxUpdateText"> パーツが更新されます。どの HTML コンポーネントでも、ここで id を指定できます。

<div id="ajaxUpdateText">
...
</div>

<p:commandButton update="ajaxUpdateText" 
   value="Submit" action="#{indexcontroller.submitButtonAction()}"/>

JSF バッキング Bean

バッキング Bean は、JSF ビューに関連付けられているバックエンド処理を実装する Java クラスです。次の例では、前述の XHTML にリンクされているバッキング Bean IndexController を参照します。 JSF Facelets から参照できるように JSF アプリケーションを構成するには、@Named 注釈を使用します。

Facelets で <p: inputText value ="#{indexcontroller.inputValue}"/> と記述すると、入力テキスト フィールドが画面に表示されます。入力した値は、IndexController クラスで定義されている inputValue にバインドされます。

また、<p:commandButton value ="Submit" action="#{indexcontroller.submitButtonAction()}"/> と記述すると、HTML のボタンが表示されます。ボタンが選択されると、IndexController クラスで定義されている submitButtonAction() メソッドが呼び出されます。

import java.io.Serializable;

import javax.faces.view.ViewScoped;
import javax.inject.Named;
import lombok.Getter;
import lombok.Setter;

@Named("indexcontroller")
@ViewScoped
public class IndexController implements Serializable {

    private static final long serialVersionUID = 8485377386286855408L;

    @Setter @Getter
    private String inputValue;

    private int counter;

    public void submitButtonAction(){
        inputValue = inputValue + " : " + counter;
        counter++;
    }
}

このようにして、JSF では、画面を構成するビュー (Facelets) とコントローラー (バッキング Bean) を別々に実装できます。