# チュートリアル - 色々なところにデータを表示してみる

データの表示先は，定義ファイル target タグの id 属性で指定します。
ここでは，id属性指定により，同一のデータを複数の場所に表示させることをやってみます。

| 「test」ボタンを押すと → |

## ステップ１　：　HTMLの作成

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

    <html>

     <head>
      <script type="text/javascript" src="/conga/dhtml/conga.js" charset="UTF-8"></script>
      <link rel="stylesheet" href="/conga/dhtml/conga.css" type="text/css">
      <style type="text/css">
       .i {width:100px; border:blue 1px solid; margin-top:0px}
      </style>
     </head>

     <body>

    <form>
     入力領域：<input type="text" name="text">
     <input type="button" value="test" onclick="new CongaRequest().send('test.r')">
    </form>

    INPUTタグ (id="input-tag"): <br>
    <input id="input-tag" type="text" ></input><br><br>

    Pタグ (id="p-tag"):
    <p   id="p-tag"     class="i" style="height:20px;"></p><br>

    DIVタグ (id="div-tag"):
    <div id="div-tag"   class="i" style="height:200px;"></div>

    </body>
    </html>

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

- 今回は CongaRequest と IWindow (内部ウインドウ) を使用するため，conga.css を読み込んでおく。
- 表示項目の id 属性は，リクエスト定義ファイルの target タグで指定する id 属性と一致させる。 。

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

Value オブジェクトは，「チュートリアル - 入力した値を表示させてみる」で作成した TestData クラスを使用します。

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

リクエスト定義ファイルは以下のようになります。

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

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

        <result>
          <target value="text" id="input-tag" />
          <target value="text" id="p-tag" />
          <target value="text" id="div-tag" include="./jsp/test.jsp" />
          <target type="iwindow" value="text" id="window"
            title="ウインドウへも"
            bounds="20,20,200,100"
            icon="url(/conga/dhtml/img/mail.png)"
          />
        </result>

      </request>
    </module>

リクエスト定義ファイルの記述ポイントは「<target> タグの id 属性を HTML で記述した id 属性と同じにする」ということだけです。

なお，今回は，内部ウインドウ表示を行なっていますが，この場合は，target タグの type 属性に "iwindow" を指定してください。

## ステップ４　：　JSPの作成

リクエスト定義ファイルの target タグに include 属性を指定することにより，JSP や HTML の内容を表示データとすることができます。
この例では div-tag に表示する内容を include="./jsp/test.jsp" で指定しています。

    <%@ page contentType="text/html; charset=Shift_JIS" %>
    <%@page import="nga.servlet.dsp.writer.DefaultResultWriter"%>

    <%Object value = DefaultResultWriter.getTargetValue(request).getValue();%>
    <h1><%=value%></h1>
    <h2><%=value%></h2>
    <h3><%=value%></h3>

DefaultResultWriter クラスの getTargetValue(request) メソッドを呼び出すことにより，現在処理対象となっているデータに関する情報 (TargetValue) を取得できます。
TargetValue の getValue() メソッドを呼び出すことにより，現在出力対象となっている値を取得することができます。

TOP