SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Java EE 6 開発入門

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

JavaEE6 開発入門(3)


  • X ポスト
  • このエントリーをはてなブックマークに追加

サーブレットとJSFの関連

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

 

図2 サンプルでのサーブレットとJSFの関連図
図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();

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

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

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

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

        // 5行目のデータ
        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に渡すオブジェクトの構成
図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>

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

次のページ
まとめ

修正履歴

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Java EE 6 開発入門連載記事一覧

もっと読む

この記事の著者

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

WINGSプロジェクト 東 浩二(アズマ コウジ)

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/5971 2011/08/08 12:32

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング