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

ボディ部にはモデルのデータが表示されます。ボディ部の詳細な構造を紹介します。

題材とするモデル

ここでは、「ちゃんぷるぅ２」に含まれるスタッフ管理データベースを題材にしています。スタッフ管理の Wagby 定義ファイルを入手し、ビルドを行うことで、以下の解説に示されているすべてのファイルを確認することができます。

画面毎に用意されるtiles-defs.xmlの定義

自動生成されるtiles-defs.xmlには、画面毎の定義が含まれています。具体的には、次のようになっています。


...

 <definition name="showStaff.page" extends="classic2.page">

    <put name="body" value="/staff/showStaff_body.jsp"/>

    <put name="javascript" value="/staff/showStaff_javascript.jsp"/>

    <put name="navigationbar" value="/staff/showStaff_navigationbar.jsp"/>

    <put name="pagetitle" value="/staff/showStaff_pagetitle.jsp"/>

    <put name="sidebar" value="/staff/showStaff_sidebar.jsp"/>

    <put name="title" value="/staff/showStaff_title.jsp"/>

 </definition>

...

definition 要素は、画面毎に用意されます。 definition 要素の extends 属性により、各画面は "classic2.page" という定義をベースとすることが示されています。

さらに、put 要素において、部品の置き換えが指定されています。 tiles-defs.xmlのclassic2.page定義においては、"body" という名前には body.jsp を使うとされていました。しかしその定義は上書きされ、新たに staff/showStaff_body.jsp が用いると指定されています。

このように、base_classic2.jsp が参照する部品は画面毎に変動するものがあります。固定されている部品と、画面毎に異なる部品については、自動生成された tiles-defs.xml を確認してください。

レイアウト定義ファイル

ここでは、上記の tiles-defs.xml に従って、画面毎（この例では showStaff 画面）に用意された JSP 部品の内容を確認してみます。

showStaff_title.jsp

タイトルを表示する JSP は、各モデルの画面毎に用意されます。具体例を以下に示します。


<%@ page pageEncoding="Shift_JIS" %>

<fmt:setBundle basename="jfcapp"/>

<title><fmt:message key="staff.title.show"/></title>

<fmt:message>タグが参照しているメッセージリソースの詳細な説明については、画面に表示されるメッセージの変更をお読みください。

showStaff_pagetitle.jsp

ページタイトルを表示する JSP は、各モデルの画面毎に用意されます。具体例を以下に示します。


<%@ page pageEncoding="Shift_JIS" %>

<fmt:setBundle basename="jfcapp"/>

<div class="pagetitle" id="showStaff">

<fmt:message key="staff.pagetitle.show"/>

</div>

CSS クラス定義 .pagetitle については、テーマ別 CSS の解説をお読みください。

showStaff_sidebar.jsp

サイドバーを表示する JSP は、各モデルの画面毎に用意されます。具体例を以下に示します。


<%@ page pageEncoding="Shift_JIS" %>

<fmt:setBundle basename="jfcapp"/>

<%@ include file="/system/sidebar.jsp" %>

実際には、@include ディレクティブにより、予め用意されている $(DEVHOME)￥env￥webpage￥system￥sidebar.jsp が埋め込まれるようになっています。これは Wadget の表示を行います。Wadget の詳細については「Wadget の開発」をお読み下さい。

showStaff_body.jsp

showStaff_body.jsp では、更新画面などへの遷移のためのボタンを用意します。各ボタン毎に権限チェックが行われていることがわかります。具体例を以下に示します。


<%@ page pageEncoding="Shift_JIS" %>

<fmt:setBundle basename="jfcapp"/>

  <table class="action_table">

    <tr>

      <td class="action_field">

        <jfc:ifLogon

          permclassname="jp.jasminesoft.jfc.JFCAppPermission"

          permname="staff"

          permactions="update">

          <form name="LinkupdateStaff.do"

            action="updateStaff.do" method="post"

            onSubmit="buttonOff(); return true;">

            ...

          </form>

        </jfc:ifLogon>

      </td>

      <td class="action_field">

        ...

      </td>

      <td class="action_field">

        ...

      </td>

    </tr>

  </table>

  ...

  <c:import url="showStaffP.jsp"/>

  <c:import url="showStaffLicense.jsp"/>

  <c:import url="showStaffAfterLicense.jsp"/>

通常、Wagby でビルドした Web データベースでは、詳細表示画面に「更新」や「削除」といったボタンが用意されます。これらのボタンがボディ部内におけるアクション部に配置されます。

showStaff_body.jsp の大半は、このアクション部の定義となっています。 CSS クラス .action_tableは、ボタンの配置ルールを決めています。

なお、各ボタンを示すフォーム要素は、<jfc:ifLogon>タグで囲まれています。これは Wagby が独自に提供するタグライブラリであり、このボタンの表示可否を行うための権限情報を指定しています。

このファイルからわかるように、showStaff_body.jsp はアクション部の指定が主であり、実際のモデル情報の表示は行っています。この部分は、同ファイルの末尾にある<c:import>タグライブラリに委譲されています。すなわち、showStaffP.jsp が、モデル情報を表示する本体となります。

[ 1 | 2 ] 次へ

このページ

見栄えのカスタマイズ