[特別企画]
JavaServer Facesを理解する（後編）
JSFによるWebアプリケーション開発

　

  UIコンポーネント、JSFタグライブラリを使用した
  JSPの作成

　オンラインショップのトップページのStorefront.jspから作成します。なお、今回はHTML関連のタグに関しては基本的に説明を省略し、今回開発したActionListener、Validatorなどを利用するタグを中心に説明します。

　アプリケーション全般で、uri="http://java.sun.com/jstl/fmt"を指定したタグライブラリを使用していますが、このタグライブラリは、JTSL（JSP Standard Tag Library）の国際化用タグになります。JSFでは、アプリケーションの国際化として独自の機能もありますが、既存の技術も積極的に利用しています。fmt:setBundleにより、リソース・バンドル名を設定し、それぞれのHTMLタグ内でリソース・バンドル内のメッセージを利用しています。

　例えば、<h:command_button..>では、key="moreButtun" bundle="carshopBundle"と指定することにより、設定したリソースのmoreButtonキーの値を取り出し、ボタンのラベルとして使用しています。

　Storefront.jspでは、ボタンとして表示されているUIコマンドコンポーネントを使用しており、このコマンドコンポーネントに、<f:action_listener type="carshop.CarActionListener"/>タグを指定することにより、ActionListenerをコンポーネントに登録しています。この定義により、このボタンがクリックされた際イベントが、CarActionListenerで処理されることになります。

リスト9　Storefront.jsp
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>

  <fmt:setBundle basename="carshop.Resources"
 scope="session" var="carshopBundle"/>

  <f:use_faces>
  <h:form formName="carStoreForm">

  <TABLE BORDER="0" CELLPADDING="0"
 CELLSPACING="6" WIDTH="660" BGCOLOR="white">
      <TR>
          <TD WIDTH="50%" VALIGN="TOP">
              <TABLE BORDER="0" ALIGN="left">
                  <TR>
                      <TD><h:graphic_image  graphicClass=
"alignLeft" url="/150x126_Roadster.jpg" />
                  </TR>
              </TABLE>
              <P><BR>
              <B><FONT SIZE="4" COLOR="#330066"
 FACE="Arial, Helvetica">
                  <h:output_text key="car1Title"
 bundle="carshopBundle" />
              </FONT></B>
              <FONT FACE="Arial, Helvetica"><BR><BR>
                  <h:output_text  key="car1Desc"
 bundle="carshopBundle"  />
              <BR></FONT>
              <h:command_button label="More"
 key="moreButton"
 action="success" bundle="carshopBundle"
 commandName="more1">
                  <f:action_listener type=
"carshop.CarActionListener"/>
              </h:command_button>
          </TD>
     -- 省略 --

初期ページ（Storefront.jsp）

　次にパッケージの変更（Custom、Deluxe）、オプションの選択（エンジン、Audio、SecuritySystem、GPS）、金額を計算するmore.jspです。more.jsp内でEngineオプションを選択するためのリスクボックス、Audioのオプションを選択するラジオボタンを表示しているコンポーネントに対して<f:valuechanged_listener type="carshop.PackageValueChanged" />タグで、value-changedイベントを登録しています。

リスト10　more.jsp
-- 省略 --
<TR>
  <TD WIDTH="100%" BGCOLOR="white"><B>
    <FONT SIZE="3" COLOR="#330066" FACE="Arial, Helvetica">
      <h:output_text key="Package" bundle="carshopBundle" />
    </FONT></B>
    <BR>
    <%-- パッケージを選択するためのボタン及びActionListenerを登録 --%>
    <h:command_button id="custom"
 commandName= "custom" 
commandClass="package-selected" key="Custom" bundle="carshopBundle">
      <f:action_listener type="carshop.CarActionListener" />
    </h:command_button>
    <h:command_button id="deluxe" commandName=
"deluxe" key="Deluxe" bundle="carshopBundle">
     <f:action_listener type="carshop.CarActionListener" />
    </h:command_button>
    <BR><BR>
-- 省略 --
        <TD><P><B>
          <FONT COLOR="#93B629" FACE="Arial, Helvetica">
            <h:output_text key="Engine" bundle="carshopBundle" />
          </FONT></B></P>
          <BLOCKQUOTE><P>
          <FONT FACE="Arial, Helvetica">
<%-- エンジンオプション選択用セレクトメニュー、
ValueChangedListenerの登録--%>
            <h:selectone_menu id="currentEngine" 
valueRef="CurrentOptionServer.currentEngineOption">
              <f:valuechanged_listener type=
"carshop.PackageValueChanged" />
              <h:selectitems valueRef=

"CurrentOptionServer.engineOption"/>
            </h:selectone_menu>  
          </FONT></P>
          </BLOCKQUOTE>
        </TD>
-- 省略 --

オプション選択画面（more.jsp）

　Customer.jspは、ユーザーの情報を入力するためのページで、ここでは独自に実装したコンバータ、バリデータおよびバリデータタグを使用しています。<cd:format_validator…>タグでステップ3で開発したFormatValidatorTagを使用したタグになります。タグ内のformatPatternsにクレジットカード番号として期待する正しいフォーマットを指定しています。ここで指定した値が、FormatValidatorTagのプロパティに設定され、さらにFormatValidatorに値が渡されます。

　そして次の<h:output_errors for="ccno"/>が、Validattionが失敗した場合のメッセージを表示する部分になります。

リスト11　Customer.jsp
-- 省略 --
<td valign="top"> <font face="Arial, Helvetica">
  <%-- カスタムバリデータ --%>
  <h:input_text id="ccno" size="16" converter="creditcard" >
    <cd:format_validator formatPatterns=
      "9999999999999999|9999 9999 9999 9999|
         9999-9999-9999-9999"/>
  </h:input_text>
  <h:output_errors for="ccno"/></font>
</td>
-- 省略 --

ユーザー情報を入力する画面（customer.jsp）

　最後のthanks.jspは、買い上げ後にメッセージを表示するためのページです。

thanks.jspによる画面

  ページナビゲーションの定義

　最後に、JSFナビゲーション・ルールおよびそのほかのJSFアプリケーションの動作に必要となる定義を設定ファイルに追加します。

　前回も説明したように、ページの遷移はfaces-config.xmlファイルにナビゲーション・ルールとして定義します。

<navigation-rule>
  <from-tree-id>/Storefront.jsp</from-tree-id>
  <navigation-case>
    <from-outcome>success</from-outcome>
    <to-tree-id>/more.jsp</to-tree-id>
  </navigation-case>
</navigation-rule>
<navigation-rule>
  <from-tree-id>/more.jsp</from-tree-id>
  <navigation-case>
    <from-outcome>success</from-outcome>
    <to-tree-id>/buy.jsp</to-tree-id>
  </navigation-case>
</navigation-rule>
<navigation-rule>
  <from-tree-id>/buy.jsp</from-tree-id>
  <navigation-case>
    <from-outcome>success</from-outcome>
    <to-tree-id>/Customer.jsp</to-tree-id>
  </navigation-case>
</navigation-rule>
<navigation-rule>
  <from-tree-id>/Customer.jsp</from-tree-id>
  <navigation-case>
    <from-outcome>success</from-outcome>
    <to-tree-id>/thanks.jsp</to-tree-id>
  </navigation-case>
</navigation-rule>

　最後に、JSFアプリケーションを動作させるために必要な定義をweb.xmlに追加します。以下の<servlet>と<servlet-mapping>定義は、JSFアプリケーションにおいて必須となります。

<description>Car Demo Sample Application</description>
<display-name>Car Demo Sample Application</display-name>

<servlet>
    <servlet-name>Faces Servlet</servlet-name>
    <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>/faces/*</url-pattern>
</servlet-mapping>

　また、アプリケーションにおいて必要になるリソースファイルについてはここでは説明しませんが、使用する言語ごとのリソースバンドルファイルは、別途用意してください。これで、アプリケーションは完成です。

　アプリケーションのパッケージングは、前回インストールしたJWSDPのサンプルで提供されているbuild.xmlなどを参考にantを使用して作成してください。また、すでにパッケージしたものはこちら（carShop.war）からダウンロードできます。

  まとめ

　連載を通してJSFの概要およびアプリケーションの構築方法について解説してきました。JSFは、いままでWebアプリケーションを構築する際にJSPおよびJavaBeansで実現していたプレゼンテーションロジックをより簡単に構築するためのテクノロジです。さらに、JCPで仕様策定が進められていることで、今後Webアプリケーションを構築する際の標準テクノロジになることが期待されており、多くの企業が注目しています。

　サン・マイクロシステムズ、IBM、オラクル、BEA、ボーランドなど、J2EEをリードする各社は、JSFをツールに取り入れることで、より簡単にユーザーインターフェイスを構築するソリューションを用意しているようです。

　サン・マイクロシステムズでは、今年の「JavaOne 2003」において「Project Rave」を発表しました。Project Raveとは、「Project」という名が付いていて、少々混乱を招きますが、Webアプリケーションをより簡単に構築する「開発ツール」です。このツールでは、Webインターフェイス全体をキャンパスとしてとらえ、そのキャンバスにUIコンポーネント（テキストボックスやセレクトボックスなど）をドラッグ＆ドロップ（グラフィカル）で貼り付けることができ、またその貼り付けたコンポーネントに対してコンバータやバリデータなどの機能を付加することができます。さらに、本稿で紹介したさまざまなソースコーディングもこのツールを使用することによって簡略化が期待できるでしょう。

 4/4 　

　INDEX
JavaServer Facesを理解する（後編）
　 Page1
JSFアプリケーションの構築
 

Page2
モデルとビジネスロジック

  Page3
カスタムコンバータ、カスタムバリデータ、タブハンドラ
Page4
UIコンポーネント、JSFタグライブラリを使用したJSPの作成
ページナビゲーションの定義
まとめ


INDEX
特別企画：JavaServer Facesを理解する
　 前編　JSFの構造を理解する
後編　JSFによるWebアプリケーション開発



連載記事一覧






Java Agile フォーラム 新着記事
＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

注目のテーマ

Java Agile 記事ランキング

本日 月間
＠IT