Ajax4JSFを利用したデータ検証

フレームワークを活用したAjaxの導入

動的検証の設定

　JSF UIコンポーネントとAjax4JSFフレームワークを利用して、ユーザーがデータを入力するときに動的検証を行うアプリケーションを作成します。このサンプルアプリケーションでは、フォームはカタログエントリを作成するインターフェースとして動作し、カタログエントリはデータベーステーブルに格納されます。各カタログエントリにはCatalog IDと呼ばれる一意なフィールドがあり、各レコードには、雑誌名、発行元、エディション、記事タイトル、および著者に対応するフィールドがあります。

　AJAX Webテクニックを使用すると、ID値が有効かどうかを動的に検証できます。AJAXを使用せずにこの類の検証を実行するには、フォーム全体をサーバに送信して、特定のIDが存在するかどうかを確認しなければなりません。特定のIDが既にデータベースにある場合、そのIDを新しいIDとして使用することはできないため、フォームを別のID値で再送信する必要があります。

　AJAXを使用すると、Catalog IDフィールドへの値の入力時に、ID値を動的に検証できます。今回のサンプルアプリケーションでは、カタログレコードをOracleデータベースに格納します。従って、このサンプルを自分で試す場合は、Oracle Database 10gをサンプルスキーマ付きでインストールし、ORCLという名前のデータベースインスタンスを作成しておいてください。次のSQLスクリプトを使ってデータベーステーブルを作成できます。

CREATE TABLE OE.Catalog(CatalogID VARCHAR(25) 
  PRIMARY KEY, Journal VARCHAR(25), Publisher VARCHAR(25), 
  Edition VARCHAR(25), Title Varchar(255), Author Varchar(25));

INSERT INTO OE.Catalog VALUES('catalog1', 'Oracle Magazine', 
  'Oracle Publishing', 'July-August 2006', 
  'Evolving Grid Management', 'David Baum');

INSERT INTO OE.Catalog VALUES('catalog2', 'Oracle Magazine', 
  'Oracle Publishing', 'July-August 2005',
  'Tuning Undo Tablespace', 'Kimberly Floss');

　JDeveloper 10.1.3.2をインストールすることもお勧めします。このバージョンはJSF 1.1をサポートしています。Ajax4JSFのバイナリディストリビューションZIPファイル（ajax4jsf-1.0.6-binary.zip）をダウンロードし、展開します。

　それでは、実際にJSFアプリケーションを作成し、Ajax4JSFフレームワークを使ってこのアプリケーションにAJAX機能を追加しましょう。このJSFアプリケーションは、カタログレコードの簡単な入力フォームから成ります。前に説明したように、フォームには一意のCatalog IDフィールドが必要であり、このフィールドに入力した値はサーバ上で動的に検証され、ID値の検証ステータスを示すメッセージが表示されます。まず、Applications Navigatorに追加される新しいアプリケーションとプロジェクトを作成します。

1. ［File］→［New］を選択して、［New Gallery］ダイアログでJDeveloperアプリケーションを作成します。
2. ［Categories］ペインの［General］ノードを選択し、［Items］ペインの［Application］を選択し、［OK］をクリックします。
3. アプリケーション名を指定し、［OK］をクリックします。
4. プロジェクト名を指定します。

　次に、JSFページを作成する必要があります。

1. ［File］→［New］を選択し、［Web Tier］→［JSF］を選択します。
2. ［JSF JSP］を選択し、［OK］をクリックします。
3. Create JSF JSPウィザードの［Next］をクリックします。
4. ［Web Application］フレームの［J2EE 1.4］を選択し、［Next］をクリックします。
5. ファイル名「input.jsp」を指定し、［Next］をクリックします。
6. ［Component Binding］フレームの［Automatically Expose UI Components in a New Managed Bean］を選択し、［Next］をクリックします。
7. JSF Core 1.0ライブラリとJSF HTML 1.0ライブラリが既定で選択されているため、次のフレームの［Next］をクリックします。
8. 既定の［HTML Options］を選択し、［Next］をクリックします。
9. ［Finish］をクリックします。

　この手順を完了すると、「input.jsp」ファイルがAjaxJSFプロジェクトに追加されます。

　次に、カタログエントリが問題なく作成された場合に表示する「catalog.jsp」という名前のJSF JSPページを追加します。また、エントリの作成時にエラーが生じた場合に表示する「error.jsp」という名前のJSF JSPページも作成します。どちらのページも、Create JSF JSPウィザードで既定のオプションを選択する必要があります。

　［Component Binding］フレームの［Do Not Automatically Expose UI Components in a Managed Bean］オプションを選択します。「lib/Ajax4jsf.jar」ファイルと「lib/oscache-2.3.2.jar」ファイルを、Ajax4JSFバイナリディストリビューションからプロジェクトに追加する必要もあります。図1は、Ajax4JSFプロジェクトのプロジェクトライブラリを示しています。

図1　プロジェクトライブラリ： Ajax4JSFプロジェクトのプロジェクトライブラリはAjax4JSFバイナリディストリビューションに含まれている

　JARファイル（「ajax4jsf.jar」および「oscache-2.3.2.jar」）を、Ajax4JSFバイナリディストリビューションの「lib」ディレクトリからAjaxJSFアプリケーションの「WEB-INF/lib」ディレクトリにコピーします。図2は、AjaxJSFアプリケーションのディレクトリ構造を示しています。

図2　ディレクトリ構造： Applications NavigatorにはAjaxJSFアプリケーションの階層ディレクトリ構造が表示される

入力の準備

　次に、JSFコンポーネントを使って入力フォームを作成します。まず、JSF HTMLコンポーネントライブラリからPanel Gridコンポーネントを「input.jsp」ページに追加します。Create PanelGridウィザードの［Next］をクリックします。［Create empty panel grid］を選択し、［PanelGrid Options］フレームで列数として2を指定し、［Finish］をクリックします。パネルグリッドに追加されるコンポーネントが、2列に配置されます。

　コンポーネントパレットの［Output Label］および［Input Text］コンポーネントをパネルグリッドに追加します。同様に、さらに5つの［Output Label］および［Input Text］コンポーネントを追加し、フォームの送信に使用される［Command Button］コンポーネントを追加します。また、ID値が有効かどうかを示す検証メッセージを表示するための［Output Text］コンポーネントも追加します（図3を参照）。［Property Inspector］エリアで、出力ラベルコンポーネントとコマンドボタンコンポーネントの値も指定します。

図3　フォームの作成： JDeveloper IDEのコンポーネントパレットを使って、5つのOutput LabelとInput Textコンポーネント、Command Buttonコンポーネント、およびOutput Textコンポーネントをパネルグリッドに追加する

　ここで、OracleデータベースとのJDBC接続を作成する必要があります。この接続を作成するには、［Connections］エリアの［Database］ノードを右クリックし、［New Database Connection］を選択します。Create Database Connectionウィザードが表示されたら、［Next］をクリックします。接続名を指定し、［Type］フレームで接続タイプとして［Oracle JDBC］を選択し、［Next］をクリックします。

　この例では、［Authentication］フレームでユーザー名とパスワードに「OE」を指定し、［Next］をクリックします。次に、［Connection］フレームで既定の接続設定を選択し、［Next］をクリックします。［Test］フレームの［Test Connection］をクリックし、［Finish］をクリックします。［Connections］エリアに接続が追加されます。

　Oracleデータソースの「web.xml」ファイルにresource-ref要素を追加し、ajax4jsfフィルタおよびフィルタマッピングも「web.xml」に追加します。リスナクラスも指定する必要があります。「web.xml」ファイルをリスト1に示します。

　場合によっては、JSFの「faces-config.xml」設定ファイルを変更します。カタログエントリが作成される場合の「catalog.jsp」ページへのナビゲート、および「error.jsp」ページへのナビゲートに関するナビゲーションルールを追加します。

<?xml version="1.0" encoding="windows-1252"?>
<!DOCTYPE faces-config PUBLIC
  "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN"
  "http://java.sun.com/dtd/web-facesconfig_1_1.dtd">
<faces-config xmlns="http://java.sun.com/JSF/Configuration">
  <managed-bean>
    <managed-bean-name>backing_input</managed-bean-name>
    <managed-bean-class>ajaxjsf.backing.Input</managed-bean-class>
    <managed-bean-scope>request</managed-bean-scope>
    <!--oracle-jdev-comment:managed-bean-jsp-link:1input.jsp-->
  </managed-bean>
  <navigation-rule>
    <from-view-id>/input.jsp</from-view-id>
      <navigation-case>
        <from-outcome>catalog</from-outcome>
        <to-view-id>/catalog.jsp</to-view-id>
      </navigation-case>
      <navigation-case>
        <from-outcome>error</from-outcome>
        <to-view-id>/error.jsp</to-view-id>
      </navigation-case>
  </navigation-rule>
</faces-config>

リスト1　web.xml

<?xml version = '1.0' encoding = 'windows-1252'?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation=
  "http://java.sun.com/xml/ns/j2ee 
  http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"
  version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee">
  <description>Empty web.xml file for Web Application
  </description>
    <context-param>
      <param-name>javax.faces.STATE_SAVING_METHOD</param-name>
      <param-value>server</param-value>
    </context-param>
    <filter>
      <display-name>Ajax4jsf Filter</display-name>
      <filter-name>ajax4jsf</filter-name>
      <filter-class>org.ajax4jsf.Filter</filter-class>
    </filter>
    <filter-mapping>
      <filter-name>ajax4jsf</filter-name>
      <servlet-name>Faces Servlet</servlet-name>
      <dispatcher>REQUEST</dispatcher>
      <dispatcher>FORWARD</dispatcher>
      <dispatcher>INCLUDE</dispatcher>
    </filter-mapping>
    <listener>
      <listener-class>com.sun.faces.config.ConfigureListener
      </listener-class>
    </listener>
    <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>
    <session-config>
      <session-timeout>35</session-timeout>
    </session-config>
    <mime-mapping>
      <extension>html</extension>
        <mime-type>text/html</mime-type>
    </mime-mapping>
    <mime-mapping>
      <extension>txt</extension>
        <mime-type>text/plain</mime-type>
    </mime-mapping>
    <resource-ref>
      <res-ref-name>jdbc/OracleDBConnectionDS</res-ref-name>
      <res-type>javax.sql.DataSource</res-type>
      <res-auth>Container</res-auth>
    </resource-ref>
</web-app>