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

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

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

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

ステップ1 : 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>

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

ステップ2 : 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;
    }
}

ステップ3 : リクエスト定義ファイル(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 name="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 name="text" id="outputArea" />
        </result>

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


TOP