チュートリアル - 入力した値を表示させてみる

ここでは，以下のような画面を作ります。

この画面には以下の機能を持たせることにします。

  1. 画面上部の入力項目（テキストフィールド）に文字入力を行なうと，入力された内容をサーバに送信する。
  2. サーバはブラウザから送信された文字列をそのままブラウザに返す。
  3. ブラウザは画面下部の表示項目にサーバから受信した文字列を表示する。

ステップ１　：　HTMLの作成

まず，HTML はこんな感じになります。

<html>
 <head>
  <script type="text/javascript" src="/conga/dhtml/conga.js" charset="UTF-8"></script>
 </head>

 <body>
  <form>

   <!-- 入力項目 -->
   <input type="text" name="text" onkeyup="new CongaRequest().send('test.r');">

   <!-- 表示項目 -->
   <p id="outputArea"></p>

  </form>
 </body>
</html>

記述に関するポイントは以下の４点です。

ステップ２　：　Value オブジェクト（Page オブジェクト）クラスの作成

Value オブジェクト（Page オブジェクト）は，画面で入力された項目の値を格納するための入れ物です。
このクラスには，HTML で定義した入力項目の名前（name 属性の値。ここでは "text"）に一致する名前（プロパティ名）をもつ getter メソッド，setter メソッドを作成します。 

package test.nga.servlet;

public class TestData {

    private String text;

    public void setText(String text) {
        this.text = text;
    }

    public String getText() {
        return text;
    }
}

ステップ３　：　リクエスト定義ファイル(XML)の設定

最後にリクエスト定義ファイルを記述し，HTML と Value オブジェクトとの関連付けを行ないます。

<?xml version="1.0" encoding="UTF-8"?>
<module>

    <request id="test.r" page="test.nga.servlet.TestData" >

        <parameter>
            <property name="text" />
        </parameter>

        <result>
            <target value="text" id="outputArea" />
        </result>

    </request>

</request>
</module>

<request> タグの記述

<request> タグには，id 属性と page 属性を記述します。

<parameter> タグの記述

        <parameter>
            <property name="text" />
        </parameter>

<parameter> タグの中には，入力項目に対応する <property> タグを記述します。
proprty タグには name 属性を記述します。name 属性の値には，HTML の入力項目の name属性で指定したものと同じ名前（"text"）を指定してください。

<result> タグの記述

        <result>
            <target value="text" id="outputArea" />
        </result>

<result> タグの中には表示項目に対応する <target> タグを記述します。
target タグの value 属性には，HTML の name属性で指定した名前，すなわち，作成した Value オブジェクトの該当プロパティ名と同じ名前 (text) を指定します。
id 属性には，HTML の出力項目の id 属性で指定したものと同じ値 (inputArea) を指定します。

TOP