ここでは,以下のような画面を作ります。
この画面には以下の機能を持たせることにします。
まず,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点です。
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; } }
最後にリクエスト定義ファイルを記述し,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> タグには,id 属性と page 属性を記述します。
<parameter> <property name="text" /> </parameter>
<parameter> タグの中には,入力項目に対応する <property> タグを記述します。
proprty タグには name 属性を記述します。name 属性の値には,HTML の入力項目の name属性で指定したものと同じ名前("text")を指定してください。
<result> <target name="text" id="outputArea" /> </result>
<result> タグの中には表示項目に対応する <target> タグを記述します。
target タグの name 属性には,HTML の name属性で指定した名前,すなわち,作成した Value オブジェクトの該当プロパティ名と同じ名前 (text) を指定します。
id 属性には,HTML の出力項目の id 属性で指定したものと同じ値 (inputArea) を指定します。