電子フォームに入力されたデータをWebアプリケーションで取得する方法を学習していきます。
■このステップの概要
電子フォームで入力されたデータを取得し、取得したデータを電子フォームに設定して再表示する処理を行うシステムを作ります。
ステップ2で使用した電子フォーム「Step2-1」を基にして、データを入力できる電子フォームを作成します。また、作成した電子フォームを基にして、入力データを表示するための電子フォームを作成します。
Webページは、ステップ2で使用したWebページを基にして作成します。
ステップ2で使用したWebアプリケーションを基にして、電子フォームを表示するWebアプリケーションを作成します。また、ステップ4で使用したWebアプリケーションを基にして、入力されたデータを取得して電子フォームを再表示するWebアプリケーションを作成します。
Webアプリケーション環境定義ファイルは、ステップ3で使用したWebアプリケーション環境定義ファイル「web.xml」を基にして作成します。
WARファイルによるWebアプリケーションの配備に対応しているアプリケーションの場合は、Webアプリケーションの配置を容易に行うことができるようにWARファイルを作成します。
(1) 電子フォームを作成する
ステップ2で使用した電子フォームを基にして、次に示す電子フォームを作成します。
データを入力するための電子フォーム
ステップ2で使用した電子フォームに、所属と氏名を入力するエディットボックスを作成します。
電子フォームデザイナで電子フォーム「Step2-1」を開きます。
スタティックテキスト項目を2個挿入して、「所属」および「氏名」という文字列を指定します。
タグ名および項目名が「所属」および「氏名」のテキスト項目を挿入します。
それぞれのテキスト項目のプロパティの［入力値チェック］タブで、［入力必須］チェックボックスをオンにします。
コマンドボタン項目のプロパティの［送信情報］タブで、送信先を「Step5_2」に変更します。
「Step5-1」という名前で保存します。
入力データを表示するための電子フォーム
電子フォーム「Step5-1」を基にして、入力領域を読み取り専用にした電子フォームを作成します。
電子フォームデザイナで電子フォーム「Step5-1」を開きます。
テキスト項目「所属」および「氏名」のプロパティで、次に示す設定情報を変更します。
タブ名 | 設定情報 | 指定内容 |
|---|---|---|
入力種別 | 読み取り専用 | オン |
コマンドボタン項目「送信」を削除します。
「Step5-2」という名前で保存します。
(2) Webページを作成する
ステップ2で使用したWebページから起動するWebアプリケーションを「Step2_1」から「Step5_1」に変更します。変更したWebページを「Step5.htm」という名前で保存します。
変更する箇所を次に示します。変更する箇所は太字と下線で表しています。
Step5.htmの内容
<html> <head> <title>Step5 入力データを取得する</title> </head> <body> <h1>Step5 入力データを取得する</h1> <form action="servlet/Step5_1"> <input type="submit" name="送信" value="実行"> </form> </body> </html>
(3) Webアプリケーションを作成する
次に示すWebアプリケーションを作成します。
Webページから起動されるWebアプリケーション
電子フォームを表示するWebアプリケーションとして、「Step5_1」というクラスを作成します。ステップ2で使用したWebアプリケーションのクラス名を「Step5_1」に、電子フォーム名を「Step5-1」に変更します。
変更する箇所を次に示します。変更する箇所は太字と下線で表しています。
・
・
・
public class Step5_1 extends HttpServlet {
public void doGet(HttpServletRequest request,
HttpServletResponse response)
throws IOException, ServletException
・
・
・
try {
// OutputDataBuilderオブジェクトを生成します。
// 生成するときに電子フォーム名を指定します。
OutputDataBuilder odb =
new OutputDataBuilder(request, "Step5-1");
・
・
・入力されたデータを取得して電子フォームに再表示するWebアプリケーション
ステップ4で使用したWebアプリケーションを基にして、入力されたデータを取得して電子フォームに再表示するWebアプリケーションとして「Step5_2」というクラスを作成します。
電子フォームに入力されたデータを取得するためのdoPost()メソッドを追加します。(1)で作成した電子フォームに入力されたデータは、次に示す構造のXMLデータになっています。
XMLデータを取得するには、InputDataBuilderクラスのgetXMLData()メソッドを使用します。取得したXMLデータから各項目のデータを取得するにはXmlDataAccessクラスを使用します。
次に示す流れで処理を行います。
InputDataBuilderオブジェクトを生成する
OutputDataBuilderオブジェクトを生成する
Webブラウザから送信されたXMLデータ（電子フォームに入力されたデータ）を取得する
XMLデータを使用してXmlDataAccessオブジェクトを生成する
取得したXMLデータから各項目のデータを取得する
取得したXMLデータをOutputDataBuilderオブジェクトに設定する
OutputDataBuilderクラスのwrite()メソッドを使用してWebブラウザへHTMLデータを送信する
Step5_2クラスのソースプログラム
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.w3c.dom.Document;
import com.fujitsu.form.InputDataBuilder;
import com.fujitsu.form.OutputDataBuilder;
import com.fujitsu.form.XmlDataAccess;
import java.io.IOException;
import javax.servlet.ServletException;
public class Step5_2 extends HttpServlet {
public void doPost(HttpServletRequest request,
HttpServletResponse response)
throws IOException, ServletException
{
try {
// InputDataBuilderオブジェクトを生成します。
InputDataBuilder idb = new InputDataBuilder(request);
// OutputDataBuilderオブジェクトを生成します。
OutputDataBuilder odb =
new OutputDataBuilder(request, "Step5-2");
// 電子フォーム表示モードに環境定義モードを指定します。
odb.setDisplayMode(odb.DISPMODE_ENV);
// コンテントタイプを設定します。
response.setContentType(odb.getContentType());
// Webブラウザから送信されたXMLデータを取得します。
Document idoc = idb.getXMLData();
// 取得したXMLデータからXmlDataAccessオブジェクトを生成します。
XmlDataAccess xda = new XmlDataAccess(idoc);
// 所属を取得します。
String belong = xda.getValue("所属");
// 氏名を取得します。
String name = xda.getValue("氏名");
// 取得したXMLデータを初期値として設定します。
odb.setXMLData(xda.getDocument(), false);
// HTMLデータを生成し、Webブラウザへ送信します。
odb.write(response.getOutputStream());
} catch (Exception e) {
e.printStackTrace();
}
}
}
(4) Webアプリケーション環境定義ファイルを作成する
Webアプリケーション環境定義ファイル(deployment descriptor)を作成します。
ステップ3で作成した「web.xml」のWebアプリケーションのクラス名を「Step3_1」を「Step5_1」、「Step3_2」を「Step5_2」に変更します。
変更する箇所を次に示します。変更する箇所は太字と下線で表しています。
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>Step5_1</servlet-name>
<servlet-class>Step5_1</servlet-class>
</servlet>
<servlet>
<servlet-name>Step5_2</servlet-name>
<servlet-class>Step5_2</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Step5_1</servlet-name>
<url-pattern>/servlet/Step5_1</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>Step5_2</servlet-name>
<url-pattern>/servlet/Step5_2</url-pattern>
</servlet-mapping>
</web-app>(5) Webサーバに配置する
(1)～(4)で作成したファイルをWebサーバに配置します。
配置するファイル | 配置する場所 |
|---|---|
電子フォームのファイル
|
|
Webページのファイル |
|
Webアプリケーションをコンパイルしたクラスファイル
|
|
Webアプリケーション環境定義ファイル |
|
(6) WARファイルを作成する
アプリケーションサーバがWARファイルによるWebアプリケーションの配備に対応している場合、（5）で配置したファイルを使用して、WARファイルを作成します。jarコマンドを実行するために、Windowsの場合は、「コマンド プロンプト」を起動します。SolarisおよびLinuxの場合は、「端末エミュレータ」等を起動します。
Step5フォルダ配下に移動します。
次に示すコマンドを実行します。
|
「Step5.war」という名前でWARファイルを作成します。
次に示すコマンドを実行します。
jar cvf Step5.war *.htm WEB-INF |
(7) WARファイルを配備する
作成したWARファイルをアプリケーションサーバに配備します。配備の方法については、使用しているアプリケーションサーバのマニュアルを参照してください。
(8) 動作を確認する
Webブラウザで、アドレスに「http://localhost/Step5/Step5.htm」を指定して、［移動］ボタンをクリックします。
→Webページが表示されます。
［実行］ボタンをクリックします。
→電子フォームが表示されます。
データを入力して、［送信］ボタンをクリックします。
→次に示すメッセージが表示されます。
［OK］ボタンをクリックします。
→入力データが設定された電子フォームが表示されます。
C:\Interstage\APC\sample\tutorial\eform
/opt/FJSVfcdn/sample/tutorial/eform