ページの先頭行へ戻る
 Formcoordinatorユーザーズガイド
第6章 チュートリアル > 6.8 まとめ：電子フォームを使用するシステムの構築例
前次

6.8 まとめ：電子フォームを使用するシステムの構築例

ステップ1～6で学習した内容を基にして、電子フォームを使用するシステムを構築していきます。

■概要

次に示す流れで画面が遷移するシステムを構築します。

(1) 電子フォームを作成する

申請書の入力用の電子フォームと、申請書の確認用の電子フォームを作成します。

申請書の入力用の電子フォーム

次に示す電子フォームを作成します。
作成した電子フォームを「Shoseki」という名前で保存します。

この電子フォームのサンプルファイルは、Windowsの場合は「フレームワークのインストールフォルダ\sample\tutorial\eform」にあります。SolarisおよびLinuxの場合は「/opt/FJSVfcdn/sample/tutorial/eform」にあります。各項目の設定内容については、サンプルファイルを参照してください。

作成するときのポイントを次に示します。

申請書の確認用の電子フォーム

入力用の電子フォーム「Shoseki」を基にして、次に示す電子フォームを作成します。
作成した電子フォームを「Shoseki-Kakunin」という名前で保存します。

この電子フォームのサンプルファイルは、Windowsの場合は「フレームワークのインストールフォルダ\sample\tutorial\eform」にあります。SolarisおよびLinuxの場合は「/opt/FJSVfcdn/sample/tutorial/eform」にあります。各項目の設定内容については、サンプルファイルを参照してください。
入力用の電子フォームから変更する内容を次に示します。

(2) Webページを作成する

メニュー画面と工事中画面のWebページを作成します。

メニュー画面のWebページ

Webアプリケーションを起動するために、次に示すWebページ「Menu.htm」を作成します。
このWebページのサンプルファイルは、Windowsの場合は「フレームワークのインストールフォルダ\sample\tutorial\Shoseki」にあります。SolarisおよびLinuxの場合は「/opt/FJSVfcdn/sample/tutorial/Shoseki」にあります。

このWebページでは、［作成］ボタンまたは［変更/取消］ボタンをクリックしたときに、Webアプリケーション「AppController」が起動されて、Webアプリケーションにコマンド名と申請書名が通知されます。

例：

「書籍購入申請書」の［作成］ボタンをクリックすると、次に示す値が通知されます。

menu=作成
docName=書籍購入申請書

工事中画面のWebページ

「書籍購入申請書」の［作成］ボタン以外のボタンがクリックされたときに表示される、次に示すWebページ「UnderConstruction.htm」を作成します。
このWebページのサンプルファイルは、Windowsの場合は「フレームワークのインストールフォルダ\sample\tutorial\Shoseki」にあります。SolarisおよびLinuxの場合は「/opt/FJSVfcdn/sample/tutorial/Shoseki」にあります。

(3) Webアプリケーションを作成する

次に示す3つのWebアプリケーションを作成します。これらのWebアプリケーションのサンプルプログラムは、Windowsの場合は「フレームワークのインストールフォルダ\sample\tutorial\Shoseki\WEB-INF\classes」にあります。SolarisおよびLinuxの場合は「/opt/FJSVfcdn/sample/tutorial/Shoseki/WEB-INF/classes」にあります。

それぞれのWebアプリケーションのソースプログラムを次に示します。

AppControllerクラスのソースプログラム

// WebページとWebアプリケーションの制御を行うWebアプリケーション

import java.io.*;
import java.text.*;
import java.util.*;
import javax.servlet.*;
import javax.servlet.http.*;

import com.fujitsu.form.*;

import java.util.Enumeration;

public class AppController extends HttpServlet {

  public void doPost(HttpServletRequest request,
                     HttpServletResponse response)
    throws IOException, ServletException
  {
    // Menu.htmからの送信なのか、書籍購入申請書の入力画面からの送信なのかを
    // 切り分けます。
    if (HtmlFormUtil.getEnctyp(request) == HtmlFormUtil.MULTIPART){

      HtmlFormUtil hfu = new HtmlFormUtil(request);
      request.setAttribute("FormInputStream", hfu.getInputStream());

      String 申請 = hfu.getParameter("申請");
      if (申請 != null && 申請.equals("申請")) {
        // 書籍購入申請書の入力画面から送信されている場合は、
        // 申請受付処理を行います。
        // サーブレットのリクエストディスパッチを使用して、申請受付処理を
        // 実行します。
        ServletContext context = getServletContext();
        RequestDispatcher rd = 
          context.getRequestDispatcher("/servlet/ApplyProg");
        rd.forward(request, response);
      } else if (hfu.getParameter("確認").equals("確認")) {
        // 書籍購入申請書の確認画面から送信されている場合は、メニュー画面に
        // 戻ります。
        response.sendRedirect("../Menu.htm");
      }
    } else {
      // メニュー画面でどのボタンがクリックされたかを判定します。
      String 書類 =
        new String(
          (request.getParameter("docname").getBytes("iso-8859-1")),
          "Shift_JIS"
        );
      String メニュー =
        new String(
          (request.getParameter("menu").getBytes("iso-8859-1")),
          "Shift_JIS"
        );

      // 書籍購入申請書の［作成］ボタンがクリックされた場合、書籍購入申請画面
      // 表示処理を行います。それ以外の場合は、工事中画面を表示します。
      if ((書類 != null && 書類.equals("書籍購入申請書")) &&
          (メニュー != null && メニュー.equals("作成"))) {
        ServletContext context = getServletContext();
        RequestDispatcher rd = 
          context.getRequestDispatcher("/servlet/DispAppProg");
        rd.forward(request, response);

      } else {
        // 書籍購入申請書の［作成］ボタン以外がクリックされたので、
        // リダイレクトを使用して、固定のHTMLファイルを表示します。
        response.sendRedirect("../UnderConstruction.htm");
      }
    }
  }
}

DispAppProgクラスのソースプログラム

// 入力用の電子フォームを表示するWebアプリケーション

import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
import com.fujitsu.form.*;
import org.w3c.dom.*;
import java.util.*;

public class DispAppProg extends HttpServlet {

  public void doPost(HttpServletRequest request,
                     HttpServletResponse response)
    throws IOException, ServletException
  {
    try {
      OutputDataBuilder odb =
        new OutputDataBuilder(request, "Shoseki");

      // 電子フォーム表示モードに環境定義モードを指定します。
      odb.setDisplayMode(odb.DISPMODE_ENV);

      // コンテントタイプを設定します。
      response.setContentType(odb.getContentType());

      // 申請日を設定するために、XMLデータの雛形からXmlDataAccess
      // オブジェクトを生成します。
      XmlDataAccess xda = 
        new XmlDataAccess(odb.getTemplateXMLData());

      // 申請日の編集を行います。日付は、たとえば、2001年8月1日であれば、
      // "20010801"としなければなりません。
      Calendar cal =
        Calendar.getInstance(TimeZone.getDefault(), Locale.JAPAN);
      int year = cal.get(Calendar.YEAR);
      String month = "" + (cal.get(Calendar.MONTH) + 1);
      String day = "" + cal.get(Calendar.DATE);
      if (month.length() == 1) {
        month = "0" + month;
      }
      if (day.length() == 1) {
        day = "0" + day;
      }
      String applyDate = year + month + day;

      // 編集した申請日を申請日タグの値として設定します。
      xda.setValue("申請者情報/申請日", applyDate);

      // 編集したXMLデータを出力データとして設定します。
      odb.setXMLData(xda.getDocument(), true);

      // HTMLデータを生成し、Webブラウザへ送信します。
      odb.write(response.getOutputStream());
    } catch (Exception e) {
      e.printStackTrace();
    }
  }
}

ApplyProgクラスのソースプログラム

// 申請を受け付けるWebアプリケーション
// このサンプルでは、受け取ったデータを単に返すだけの処理を行っています。

import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
import org.w3c.dom.*;
import com.fujitsu.form.*;

public class ApplyProg extends HttpServlet {

  public void doPost(HttpServletRequest request,
                     HttpServletResponse response)
    throws IOException, ServletException
  {
    // AppControllerクラスでリクエストオブジェクトに設定した、入力ストリーム
    // を取得します。
    InputStream is = (InputStream)request.getAttribute("FormInputStream");

    InputDataBuilder idb;
    try {
      // InputDataBuilderオブジェクトを生成します。
      if (is == null) {
        idb = new InputDataBuilder(request);
      } else {
        idb = new InputDataBuilder(is, request.getContentType());
      }

      OutputDataBuilder odb =
        new OutputDataBuilder(request, "Shoseki-Kakunin");

      // 電子フォーム表示モードに環境定義モードを指定します。
      odb.setDisplayMode(odb.DISPMODE_ENV);

      // コンテントタイプを設定します。
      response.setContentType(odb.getContentType());

      // 項目制御情報を変更するので、その雛形を取得し、ItemAttributeAccess
      // オブジェクトを生成します。
      ItemAttributeAccess iaa =
        new ItemAttributeAccess("項目制御情報");

      // 電子フォームの入力項目をすべて読み取り専用にします。
      iaa.setReadonly("氏名", ItemAttributeAccess.TRUE);
      iaa.setReadonly("従業員番号", ItemAttributeAccess.TRUE);
      iaa.setReadonly("所属", ItemAttributeAccess.TRUE);
      iaa.setReadonly("申請日", ItemAttributeAccess.TRUE);
      iaa.setReadonly("合計", ItemAttributeAccess.TRUE);

      // また、同じ項目の文字色を青色にします。
      iaa.setColor("氏名", ItemAttributeAccess.BLUE);
      iaa.setColor("従業員番号", ItemAttributeAccess.BLUE);
      iaa.setColor("所属", ItemAttributeAccess.BLUE);
      iaa.setColor("申請日", ItemAttributeAccess.BLUE);
      iaa.setColor("合計", ItemAttributeAccess.BLUE);

      // 書籍記入欄は4行あるので、１～４まで4回繰り返します。
      int cnt;
      String sCnt[] = new String [4];

      sCnt[0] = "１";
      sCnt[1] = "２";
      sCnt[2] = "３";
      sCnt[3] = "４";

      for ( cnt = 0 ; cnt <= 3 ; cnt++ ) {
        // 入力項目をすべて読み取り専用にします。
        iaa.setReadonly("書籍名" + sCnt[cnt], ItemAttributeAccess.TRUE);
        iaa.setReadonly("著者名" + sCnt[cnt], ItemAttributeAccess.TRUE);
        iaa.setReadonly("発行所" + sCnt[cnt], ItemAttributeAccess.TRUE);
        iaa.setReadonly("あり" + sCnt[cnt], ItemAttributeAccess.TRUE);
        iaa.setReadonly("なし" + sCnt[cnt], ItemAttributeAccess.TRUE);
        iaa.setReadonly("単価" + sCnt[cnt], ItemAttributeAccess.TRUE);
        iaa.setReadonly("冊数" + sCnt[cnt], ItemAttributeAccess.TRUE);
        iaa.setReadonly("金額" + sCnt[cnt], ItemAttributeAccess.TRUE);

        // また、同じ項目（あり、なしは除く）の文字色を青色にします。
        iaa.setColor("書籍名" + sCnt[cnt], ItemAttributeAccess.BLUE);
        iaa.setColor("著者名" + sCnt[cnt], ItemAttributeAccess.BLUE);
        iaa.setColor("発行所" + sCnt[cnt], ItemAttributeAccess.BLUE);
        iaa.setColor("単価" + sCnt[cnt], ItemAttributeAccess.BLUE);
        iaa.setColor("冊数" + sCnt[cnt], ItemAttributeAccess.BLUE);
        iaa.setColor("金額" + sCnt[cnt], ItemAttributeAccess.BLUE);
      }

      // Webブラウザで電子フォームに入力されたデータおよび項目制御情報を
      // 出力データとして設定します。
      odb.setXMLData(idb.getXMLData(), false);
      odb.setItemAttribute(iaa.getDocument());

      // HTMLデータを生成し、Webブラウザへ送信します。
      odb.write(response.getOutputStream());
    } catch (Exception e) {
      e.printStackTrace();
    }
  }
}

(4) Webアプリケーション環境定義ファイルを作成する

Webアプリケーション環境定義ファイル(deployment descriptor)を作成します。
次に示すxmlファイルを作成し、「web.xml」という名前で保存します。

web.xmlファイルの内容

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.2//EN"  "http://java.sun.com/j2ee/dtds/web-app_2.2.dtd">
 
    <web-app>
 
       <servlet>
         <servlet-name>AppController</servlet-name>
         <servlet-class>AppController</servlet-class>
       </servlet>
       <servlet>
         <servlet-name>DispAppProg</servlet-name>
         <servlet-class>DispAppProg</servlet-class>
       </servlet>
       <servlet>
         <servlet-name>ApplyProg</servlet-name>
         <servlet-class>ApplyProg</servlet-class>
       </servlet>
 
       <servlet-mapping>
         <servlet-name>AppController</servlet-name>
         <url-pattern>/servlet/AppController</url-pattern>
       </servlet-mapping>
       <servlet-mapping>
         <servlet-name>DispAppProg</servlet-name>
         <url-pattern>/servlet/DispAppProg</url-pattern>
       </servlet-mapping>
       <servlet-mapping>
         <servlet-name>ApplyProg</servlet-name>
         <url-pattern>/servlet/ApplyProg</url-pattern>
       </servlet-mapping>
 
    </web-app>

(5) Webサーバに配置する

(1)～(4)で作成したファイルをWebサーバに配置します。

配置するファイル

配置する場所

電子フォームのファイル

  • Shoseki.pmd

  • Shoseki.ovd

  • Shoseki.fae

  • Shoseki.js

  • Shoseki.psf

  • Shoseki.bip

  • Shoseki-Kakunin.pmd

  • Shoseki-Kakunin.ovd

  • Shoseki-Kakunin.fae

  • Shoseki-Kakunin.psf

  • Shoseki-Kakunin.bip

WindowsC:\Interstage\APC\sample\tutorial\eform

SolarisLinux/opt/FJSVfcdn/sample/tutorial/eform

Webページのファイル

  • Menu.htm

  • UnderConstruction.htm

WindowsC:\Interstage\APC\sample\tutorial\Shoseki

SolarisLinux/opt/FJSVfcdn/sample/tutorial/Shoseki

Webアプリケーションをコンパイルしたクラスファイル

  • AppController.class

  • DispAppProg.class

  • ApplyProg.class

WindowsC:\Interstage\APC\sample\tutorial\Shoseki\WEB-INF\classes

SolarisLinux/opt/FJSVfcdn/sample/tutorial/Shoseki/WEB-INF/classes

Webアプリケーション環境定義ファイル
web.xml

WindowsC:\Interstage\APC\sample\tutorial\Shoseki\WEB-INF

SolarisLinux/opt/FJSVfcdn/sample/tutorial/Shoseki/WEB-INF

(6) WARファイルを作成する

アプリケーションサーバがWARファイルによるWebアプリケーションの配備に対応している場合、（5）で配置したファイルを使用して、WARファイルを作成します。jarコマンドを実行するために、Windowsの場合は、「コマンド プロンプト」を起動します。SolarisおよびLinuxの場合は、「端末エミュレータ」等を起動します。

  1. Shosekiフォルダ配下に移動します。
    次に示すコマンドを実行します。

    Windowscd C:\Interstage\APC\sample\tutorial\Shoseki

    SolarisLinuxcd /opt/FJSVfcdn/sample/tutorial/Shoseki

  2. 「Shoseki.war」という名前でWARファイルを作成します。
    次に示すコマンドを実行します。

    jar cvf Shoseki.war *.htm WEB-INF

(7) WARファイルを配備する

作成したWARファイルをアプリケーションサーバに配備します。配備の方法については、使用しているアプリケーションサーバのマニュアルを参照してください。

(8) 動作を確認する

  1. Webブラウザで、アドレスに「http://localhost/Shoseki/Menu.htm」を指定して、［移動］ボタンをクリックします。

    →メニュー画面のWebページが表示されます。

  2. 「書籍購入申請書」の［作成］ボタンをクリックします。

    →入力用の電子フォームが表示されます。

  3. データを入力して、［申請］ボタンをクリックします。

    →次に示すメッセージが表示されます。

  4. ［OK］ボタンをクリックします。
    →確認用の電子フォームが表示されます。

  5. ［確認］ボタンをクリックします。

    →次に示すメッセージが表示されます。

  6. ［OK］ボタンをクリックします。
    →メニュー画面のWebページが表示されます。

  7. 「書籍購入申請書」の［作成］ボタン以外のボタンをクリックします。

    →工事中画面のWebページが表示されます。

前次
Copyright FUJITSU LIMITED 2001-2011
Copyright PFU LIMITED 2001-2011