サポート > Wagby Developer Network > 見栄えのカスタマイズ > ボディ部の構造（詳細表示） (2/2)

モデルの表示を行うJSPファイルの定義を説明します。

表示対象となるデータのXML表現

ここでは、表示対象モデルの例として、「スタッフ」モデルを取り上げてみます。スタッフモデルは Java オブジェクトですが、Wagby ではこれを XML として扱うこともできるようになっています。 XML で表現すると次のようになります。


<staff_p>

<userid id="admin" priority="0" content="admin" choose="true"

           invalid="false" errorcode="" label=""></userid>

<name errorcode="">管理者</name>

<kana_name errorcode="">カンリシャ</kana_name>

<photo errorcode=""></photo>

<mailaddress errorcode="">admin@aaa.bbb.com</mailaddress>

<birth errorcode="">昭和44年5月1日</birth>

<age errorcode="">37</age>

<sex id="1" priority="0" content="男性" choose="true"

        invalid="false" errorcode="" label=""></sex>

<zipcode errorcode="">9042234</zipcode>

<address errorcode="" anorm="true">沖縄県うるま市州崎5-1</address>

<tel errorcode="">098-333-4444</tel>

<ktaitel id="1" content="090-111-2222" errorcode=""></ktaitel>

<ktaiaddress errorcode=""></ktaiaddress>

<deptid id="1" priority="0" content="総務企画部" choose="true"

           invalid="false" errorcode="" label=""></deptid>

<titleid id="2" priority="0" content="主任" choose="true"

            invalid="false" errorcode="" label=""></titleid>

...

<updatedatetime errorcode="">2006-08-01 09:46:43</updatedatetime>

</staff_p>

表示用のモデルにおいて、開発者が知っておくべき Wagby 特有のルールは次のとおりです。

表示用モデル名は、「モデル名（英語）+ "_p"」となります。ここで "p" は "presentation" の略です。
モデル項目名が、そのまま XML 表現時でのタグ名となります。
各モデル項目には、errorcode 属性が用意されています。この値が空であればエラーはありません。
選択肢（上の例では userid, sex, deptid, titleid など）は、id 属性、priority 属性、content 属性、choose 属性、invalid 属性、errorcode 属性、label 属性が用意されます。表示時には content 属性の値が用いられます。
繰り返し項目（上の例では ktaitel）には、id 属性、content 属性が用意されます。表示時には content 属性の値が用いられます。

showStaff_body.jsp の末尾に以下のコードを挿入することで、staff モデルの内容を確認することができます。（Tomcat のコンソールに表示されます。）


<%

  System.out.println(request.getAttribute("staff_p"));

%>

データの表示

showStaffP.jsp は実際のスタッフ情報が格納されたオブジェクトから値を取り出し、これを HTML として出力します。


...

<table width="100%" class="display_table" cellspacing="1">

  <tr>

    <th class="display_label_nowrap_notnull" width="20%">

      <!-- ${staff_p.userid.label} -->

      <fmt:message key="staff.userid"/>

    </th>

    <td width="80%" align="left" valign="top"

           class="display_field_noalign">

      <!-- ${staff_p.userid} -->

      <c:out value="${staff_p.userid[0].content}"/>

    </td>

  </tr>

</table>

...

<fieldset>

  <legend>

    <!-- ${staff._group.1.label} -->

    <fmt:message key="staff._group.1"/>

  </legend>

  <table class="display_inner_table" cellspacing="0">

    <tr>

      <td colspan="2" class="display_field_inner">

        <table class="display_inner_table" cellspacing="0">

          <tr>

            <td valign="top" width="33%">

              <table class="display_inner_table" cellspacing="0">

                <tr>

                  <th class="display_label_nowrap_notnull"

                         width="20%">

                    <!-- ${staff_p_name.label} -->

                    <fmt:message key="staff_name"/>

                  </th>

                  <td width="80%" align="left" valign="top"

                         class="display_field_noalign">

                    <!-- ${staff_p_name} -->

                    <div id="content_staff_p$002fname"

                            name="staff_p$002fname">

                      <c:set var="__value"

                                value="${staff_p_name.content}"/>

                      <c:out value="${__value}"/>

                    </div>

                  </td>

                </tr>

              </table>

            </td>

...

各項目は HTML のテーブル要素を使ってレイアウトされています。 CSS クラス display_table や display_field 定義については、テーマ別 CSS の解説をお読みください。

モデル項目の値を実際に取り出しているのは、<c:set>タグと<c:out>タグです。例えば ${staff_p_name.content} という表記により、staff_p モデルの name 要素内に含まれる content 属性の値を取得するという意味になります。

Wagby で自動生成された JSP ファイルでは、EL 式を用いてオブジェクトを走査します。

繰り返しコンテナの扱い

ここでは、スタッフモデルにおいて、"取得資格" という項目を「繰り返しコンテナ」として定義したものとします。 Wagby では繰り返しコンテナを用いた場合、JSP ファイルは別途用意（自動生成）されます。


<fieldset>

  <legend>

    <!-- ${staff_p.license.label} -->

    <fmt:message key="staff._group.4"/>

  </legend>

  <table cellspacing="1" width="100%" class="display_container_table">

    <tr>

      <th class="display_label_nowrap" width="25%">

        <!-- ${staff_p.license/lid.label} -->

        <fmt:message key="staff.license.lid"/>

      </th>

      ...

      <th class="display_label">

        <!-- ${staff_p.license/takedate.label} -->

        <fmt:message key="staff.license.takedate"/>

      </th>

      <th class="display_label">

        <!-- ${staff_p.license/limitdate.label} -->

        <fmt:message key="staff.license.limitdate"/>

      </th>

    </tr>

 ...

 <!-- DO NOT REMOVE THIS CODE : BEGIN -->

    <c:forEach var="license" varStatus="__position"

          items="${staff_p.license}">

      <!-- DO NOT REMOVE THIS CODE : END -->

      <c:choose>

        <c:when test="${__position.index % 2 == 0}">

          <tr class="display_field_center">

        </c:when>

        <c:otherwise>

          <tr class="display_field2_center">

        </c:otherwise>

      </c:choose>

      <td align="left">

        <!-- ${staff_p.license/lid} -->

        <div name="license$002flid">

           <c:set var="__value"

             value="${license.lid.content}"/>

           <c:out value="${__value}"/>

        </div>

      </td>

      <td align="left">

        <!-- ${staff_p.license/lname} -->

        <c:out value="${license.lname[0].content}"/>

        <c:if test="${license.lname[0].id > 0}">

          <a href= "showLicenseList.do?action_Show=&id=

            <c:out value="${license.lname[0].id}"/>">

            <img src="img/icon_yajirushi.gif" border="0"/>

          </a>

        </c:if>

      </td>

    ...

繰り返しコンテナの HTML 表現では、はじめに「項目名」を用意します。次に、実際の表示データは複数、用意されているため、<c:forEach>タグを用いてループ処理を実現します。

さらに、繰り返しコンテナでは行毎に背景色を変化させています。このため、<c:choose>タグを用いて、CSS クラス display_field と display_field2を切り替える仕組みを提供しています。

前へ [ 1| 2 ]

このページ

見栄えのカスタマイズ