JSF2でアプリケーションのビューを作成する

JavaEE6 開発入門（3）

サーブレットとJSFの関連

　今回のサンプルは従来のJavaWebアプリケーションと同様のサーブレット＋JSPの組み合わせのようにJSFを利用してみることにします。なお、Faceletsを利用する場合は、JSFとManagedBeanの組み合わせでより簡潔に構築できますが、それに関しては次回： JSF2の画面でAjaxの非同期通信を作る で解説しています。

 

図2　サンプルでのサーブレットとJSFの関連図

　このように、従来のWebアプリケーションは画面とロジックの分割を行う構成にする手法が一般的ですので今回もこれに従います。サーブレットはユーザーからのリクエストを受け取り、表示するデータを作成して、正しく完了したらJSFへ遷移させます。JSFは受け取ったデータを元に、表示用に加工するのみの役割を行わせます。

　ではサンプルのサーブレットを見てみましょう。ここでは画面に渡すデータを作成しています。

［リスト3］dataTableに対して出力する内容を作成するサーブレット JsfDataTableServlet

// サーブレット定義：urlPatternで定義している /jsfsample がURLになる
@WebServlet(name="JsfDataTableServlet", urlPatterns={"/jsfsample"})
public class JsfDataTableServlet extends HttpServlet {
    
    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {

        // テーブル表示用のデータを作成
        List dataList = new ArrayList();

        // １行目のデータ
        Map dataMap1 = new HashMap();
        dataMap1.put("day", "2011/4/29");
        dataMap1.put("name", "昭和の日");
        dataList.add(dataMap1);

        // ２行目のデータ
        Map dataMap2 = new HashMap();
        dataMap2.put("day", "2011/5/3");
        dataMap2.put("name", "憲法記念日");
        dataList.add(dataMap2);

        // ３行目のデータ
        Map dataMap3 = new HashMap();
        dataMap3.put("day", "2011/5/4");
        dataMap3.put("name", "みどりの日");
        dataList.add(dataMap3);

        // ４行目のデータ
        Map dataMap4 = new HashMap();
        dataMap4.put("day", "2011/5/5");
        dataMap4.put("name", "こどもの日");
        dataList.add(dataMap4);

        // ５行目のデータ
        Map dataMap5 = new HashMap();
        dataMap5.put("day", "2011/5/8");
        dataMap5.put("name", "母の日");
        dataList.add(dataMap5);

        // samplejsfで参照できるようにリクエスト属性へデータを渡す。
        // jsfでは dataList の名前で参照ができる。
        request.setAttribute("dataList", dataList);
        
        // JSFへ処理を移すRequestDispatcherを取得する。遷移したいURLを指定する。
        RequestDispatcher rd = request.getRequestDispatcher("faces/samplejsf.xhtml");
        // RequestDispatcherを起動し、サーブレットの処理を終えて、遷移する。
        rd.forward(request, response);
    }
}

　dataTableに渡すデータの形式は、行データとしてListに代表される複数行のオブジェクトを繰り返し格納できるクラスで構成し、その中身を示す列データ用のクラス（またはMap)で表を構成します。今回はMapを利用します。その構成の模式は図3のようになります。

図3　dataTableに渡すオブジェクトの構成

　これでデータを作成するサーブレットの準備ができたので、次はデータを表示するJSFです。今回サンプルで作成したものが［リスト4］の内容になります。

［リスト4］dataTableの稼働サンプル samplejsf.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:h="http://java.sun.com/jsf/html">
    <h:head>
        <title>Facelet Sample(dataTable)</title>
    </h:head>
    <h:body>
        <h:dataTable var="item" value="#{dataList}" border="1"> … （1）
            <h:column id="day">
                <h:outputText value="#{item.day}" /> … （2）
            </h:column>
            <h:column id="name">
                <h:outputText value="#{item.name}" /> …（3）
            </h:column>
        </h:dataTable>
    </h:body>
</html>

　簡潔に、データの表示をテーブル形式で作成する画面となります。