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

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

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

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>

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

- CongaRequest クラスを使用できるようにするために，<script> タグで conga.js を読み込んでおく。
- キーUPイベント発生時（onkeyup）に，CongaRequest クラスの send メソッドを呼び出して，サーバへの処理依頼を行なう。
- 入力項目には name 属性を必ず指定する。
- 表示項目には id 属性を必ず指定する。

## ステップ２　：　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 属性を記述します。

- id 属性には，キーUPイベント発生時（onkeyup）に呼び出される CongaRequest.send メソッドの引数で指定した文字列と同じもの (test.r) を指定します。
- page 属性には，Value オブジェクトのクラス名 (test.nga.servlet.TestData) を指定します。

### <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