JSF2.0で一覧表示

JAX-RSでデータの一覧表示を作成してみましたが今度は同じ画面をJSFで作成してみます。


JSFはサーバサイドのメモリーを多く使用するため不特定多数ユーザが利用するサービスには不向きですが、クライアントサーバ型のアプリケーションのようにWEBアプリケーションを作成する事ができるので社内アプリケーションや利用者が限定されているアプリケーションを簡単に作成&メンテナンスするにはとても良いアーキテクチャです。JSFはバージョン2.0よりテンプレートにFaceletsが導入されビューがとても簡単に作成できるようになりました。また、ajax対応等現状のWEBのアーキテクチャが多く取り入られています。

バッキングビーンの作成

JSFではバッキングビーンという画面の値や処理を記載するクラスを作成するのが一般的です。まずはそのクラスを作成します。

package com.den2sn.mavenproject1;

import java.util.ArrayList;
import java.util.List;
import javax.enterprise.context.RequestScoped;
import javax.inject.Named;

@Named
@RequestScoped
public class HelloBackingBean {
    
    private List<String> messages;
    
    public void init() {
        messages = new ArrayList<String>();
        messages.add("message1");
        messages.add("message2");
        messages.add("message3");
    }
    
    public List<String> getMessages() {
        return messages;
    }
}


バッキングビーンは単純なJavaのクラスです。今回はinitという初期処理を行うメソッドとメッセージの値を返すgetMessagesメソッドを作成します。このクラスを画面側より参照するためにCDIの@Namedアノテーションをつけています。@Namedアノテーションを付加すると画面側よりデフォルトではバッキングビーンのクラス名でインスタンスを参照する事ができるようになります。またメッセージデータをリクエスト中は保持したいので@RequestScopedアノテーションを付加しています。

画面の作成

次に画面を作成してみます。画面にはFaceletsというものを使用しますが中身はxhtmlJSPとほぼ変わらないようなイメージで画面開発ができます。


メニューの新規ファイルから
f:id:den2sn:20130331162407p:plain


JavaServer Faces」 > 「JSFページ」 を選択します。
f:id:den2sn:20130331162401p:plain


ファイル名を設定します。今回はindexとします。
f:id:den2sn:20130331162352p:plain


生成された画面を一覧を表示するように修正します。

<?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>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        <h1>Hello World!</h1>
        <f:event type="preRenderView" listener="#{helloBackingBean.init}" />
        <div id="list">
            <ui:repeat var="row" value="#{helloBackingBean.messages}">
                <div>#{row}</div>
            </ui:repeat>
        </div>
    </h:body>
</html>


h:やf:やui:がついているものがFaceletsのカスタムタグです。まずはf:eventタグでinitの処理を呼び出し、ui:repeatタグでメッセージの一覧を表示しています。Netbeansで画面を作成するとわかりますが、カスタムタグやバッキングビーンの参照を自動補完してくれるためとてもスムーズにコーディング出来ます。


前回のJAX-RSのサンプルでは事後のajaxの部分更新を考慮して一覧部分のみ非同期で画面を取得していましたが、JSFではajaxの部分更新をJSF自体がサポートしているため初期画面表示時に一覧画面も一緒に描画しています。

設定ファイルの修正・作成

Faceletsを使用するにはweb.xmlにFacesServletの設定が必要です。Netbeansを使用して上記手順でFacelets画面を作成していれば自動的に必要な記載をNetbeansが追加してくれるので特に修正は不要です。またCDIを有効にするためにbeans.xmlをWEB-INFフォルダに配置する必要がありますがbeans.xmlが無い状態でCDIアノテーションを使用すると下記のようにワーニングを表示してくれるので修正候補に沿ってbeans.xmlを生成すれば問題ありません。この辺りのJavaEE開発の利便性がNetbeansを使用するメリットでもあります。


f:id:den2sn:20130331164121p:plain

実行

以上で作成は終了です。実行すると一覧が表示されます。
f:id:den2sn:20121204002935p:plain


JSFではJAX-RSではサポートされていない画面周りの機能が充実しています。また、PrimeFaces等のサードパーティ製のコンポーネントが充実しているのも強みです。


一覧表示のアプリをJAX-RSJSFを使用して作成してみましたが用途に合わせて取捨選択出来るというのもJavaEEの良いところではないかと思います。