Tilesによる画面レイアウト
================================================================================

.. only:: html

 .. contents:: 目次
    :depth: 3
    :local:

Overview
--------------------------------------------------------------------------------
| ヘッダ、フッタ、サイドメニューといった共通的なレイアウトを持つWebアプリケーションを開発する場合に、全てのJSPに共通部分をコーディングすると、メンテナンスが煩雑になる。
| 例えば、ヘッダのデザインを修正する必要がある場合、全てのJSPに修正を加えなければならない。

| JSPでの開発で多くの画面で同じレイアウトを使用する場合は、 `Apache Tiles <https://tiles.apache.org/>`_\ (以下、Tiles)の利用を推奨する。
| 理由は、以下3つの通りである。

#. 設計者によるレイアウトの誤差をなくすこと
#. 冗長なコードを減らすこと
#. 大きなレイアウトの変更が容易になること

| Tilesは、統一的な画面レイアウトの際に定義を行うことで、別々のJSPを組み合わせることができる。
| その結果、各々のJSPファイルに、余計なコードを記述することがなくなるため、開発者の作業を楽にできる。
| 例えば、下記のようなレイアウト構成が複数の画面に存在する場合、

 .. figure:: ./images/screen_layout.png
    :alt: screen layout
    :width: 50%
    :align: center

    **Picture - Image of screen layout**


| Tilesを使用することにより、同じレイアウトの全ての画面でheaderやmenu、footerをincludeしてサイズを指定することなく、bodyの作成のみに集中することができる。
| 実際のJSPファイルは下記のようになる。

 .. figure:: ./images/layout_jsp.png
    :alt: layout jsp
    :width: 50%
    :align: center

    **Picture - Image of layout jsp**

よって、Tilesで画面レイアウトを設定した後は、業務に相当するJSPのみ(buisness.jsp)画面毎に作成すればよい。

    .. note::

     Tilesの適用をしない方がよい場合もある。例えば、エラー画面にTilesを使用するのは、以下の理由により推奨しない。

     * エラー画面表示中にTilesによるエラーが発生すると解析がしにくくなるため。(二重障害発生の場合)
     * web.xmlの<error-pages>タグで設定するJSPでは、必ずしも画面表示にTilesによるテンプレートが適用されないため。

|

.. _TilesLayoutHowToUse:

How to use
--------------------------------------------------------------------------------

pom.xmlの設定
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
| TilesをMavenで使用する場合、以下のdependencyをpom.xmlに追加する必要がある。

.. code-block:: xml

        <dependency>
            <groupId>org.terasoluna.gfw</groupId>
            <artifactId>terasoluna-gfw-recommended-web-dependencies</artifactId><!-- (1) -->
            <type>pom</type><!-- (2) -->
        </dependency>

.. tabularcolumns:: |p{0.10\linewidth}|p{0.90\linewidth}|
.. list-table::
   :header-rows: 1
   :widths: 10 90

   * - 項番
     - 説明
   * - | (1)
     - | webに関連するライブラリ群が定義してあるterasoluna-gfw-recommended-web-dependenciesをdependencyに追加する。
   * - | (2)
     - | terasoluna-gfw-recommended-web-dependenciesは依存関係が定義してあるpomファイルでしかないため、
       | ``<type>pom</type>`` の指定が必要である。

|

    .. note::
        上記設定例は、依存ライブラリのバージョンを親プロジェクトである terasoluna-gfw-parent で管理する前提であるため、pom.xmlでのバージョンの指定は不要である。

|

Spring MVCとTilesの連携
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

| Spring MVCとTilesを連携するには ``org.springframework.web.servlet.view.tiles3.TilesViewResolver`` を利用すればよい。
| Spring MVCのControllerの実装(View名の返却)を変更する必要は無い。

設定方法について、以下に示す。

**Beanの定義(ViewResolver、TilesConfigurer)**

- spring-mvc.xml

 .. code-block:: xml

    <mvc:view-resolvers>
        <mvc:tiles /> <!-- (1) -->
        <mvc:jsp prefix="/WEB-INF/views/" /> <!-- (2) -->
    </mvc:view-resolvers>

    <!-- (3) -->
    <mvc:tiles-configurer>
        <mvc:definitions location="/WEB-INF/tiles/tiles-definitions.xml" />
    </mvc:tiles-configurer>


 .. tabularcolumns:: |p{0.10\linewidth}|p{0.90\linewidth}|
 .. list-table::
   :header-rows: 1
   :widths: 10 90


   * - 項番
     - 説明
   * - | (1)
     - \ ``<mvc:tiles>``\ 要素を使用して、\ ``TilesViewResolver``\ を定義する。

       \ ``<mvc:jsp>``\ 要素より上に定義することで、最初にTiles定義ファイル(:file:`tiles-definitions.xml`)を参照して\ ``View``\を解決するようにする。
       Controllerから返却されたView名が、Tiles定義ファイル内の\ ``definition``\ 要素の\ ``name``\ 属性のパターンに合致する場合、\ ``TilesViewResolver``\ によって\ ``View``\が解決される。
   * - | (2)
     - \ ``<mvc:jsp>``\ 要素を使用して、JSP用の\ ``InternalResourceViewResolver``\ を定義する。

       \ ``<mvc:tiles>``\ 要素より下に定義することで、\ ``TilesViewResolver``\で解決できなかったView名のみ、JSP用の\ ``InternalResourceViewResolver``\を使用して\ ``View``\を解決するようにする。
       View名に対応するJSPファイルが、\ ``/WEB-INF/views/``\ 配下に存在する場合、JSP用の\ ``InternalResourceViewResolver``\ によって\ ``View``\が解決される。
   * - | (3)
     - \ ``<mvc:tiles-configurer>``\ 要素を使用して、Tiles定義ファイルを読み込む。

       \ ``<mvc:definitions>``\ 要素の\ ``location``\ 属性に、Tiles定義ファイルを指定する。



**Tilesの定義**

- tiles-definitions.xml

 .. code-block:: xml

    <?xml version="1.0" encoding="UTF-8" ?>
    <!DOCTYPE tiles-definitions PUBLIC
       "-//Apache Software Foundation//DTD Tiles Configuration 3.0//EN"
       "http://tiles.apache.org/dtds/tiles-config_3_0.dtd"> <!-- (1) -->

    <tiles-definitions>
        <definition name="layouts"
            template="/WEB-INF/views/layout/template.jsp"> <!-- (2) -->
            <put-attribute name="header"
                value="/WEB-INF/views/layout/header.jsp" /> <!-- (3) -->
            <put-attribute name="footer"
                value="/WEB-INF/views/layout/footer.jsp" /> <!-- (4) -->
        </definition>

        <definition name="*/*" extends="layouts"> <!-- (5) -->
            <put-attribute name="title" value="title.{1}.{2}" /> <!-- (6) -->
            <put-attribute name="body" value="/WEB-INF/views/{1}/{2}.jsp" /> <!-- (7) -->
        </definition>
    </tiles-definitions>


 .. tabularcolumns:: |p{0.10\linewidth}|p{0.90\linewidth}|
 .. list-table::
   :header-rows: 1
   :widths: 10 90


   * - 項番
     - 説明
   * - | (1)
     - | tilesのdtdを定義する。
   * - | (2)
     - | レイアウト構成の親定義。
       | template属性には、レイアウトを定義しているjspファイルを指定する。
   * - | (3)
     - | headerを定義しているjspファイルを指定する。
   * - | (4)
     - | footerを定義しているjspファイルを指定する。
   * - | (5)
     - | 描画の際にControllerから返却されたView名がnameのパターンと同じ場合に呼ばれるレイアウト定義。
       | extendsしている layouts定義も適用される。
   * - | (6)
     - | タイトルを指定する。
       | valueはspring-mvcに取り込まれているpropertiesの中から取得する。(以下の説明では application-messages.propertiesに設定する。)
       | {1},{2}はControllerから返却されたView名の"\*/\*"の「*」の1つ目、2つ目に該当する。
   * - | (7)
     - | bodyを定義しているjspファイルの置き場所について、{1},{2}にControllerから返却されたView名の"\*/\*"の「*」の1つ目、2つ目が一致するように設計する。これにより、Controllerから返却されるView名ごとの定義を記述する手間を省くことができる。

 .. note::

     Tilesの適用をしたくない画面(エラー画面等)の場合、Tiles使用対象にならないようなファイル構成にする必要がある。
     ブランクプロジェクトでは、エラー画面に InternalResourceViewResolverが使われるように("\*/\*"形式にならないように)、 /WEB-INF/views/common/error/xxxError.jsp形式にしている。

- `application-messages.properties`

 .. code-block:: properties

  title.staff.createForm = Create Staff Information

 .. note::
   メッセージプロパティファイルの記載方法については、 :doc:`../WebApplicationDetail/MessageManagement` を参照されたい。


Tilesを設定したときのファイル構成を以下に示す。

- tiles File Path

 .. figure:: ./images/tiles_filepath.png
   :alt: tiles file path

**カスタムタグの設定**


Tilesを使用するためにカスタムタグ(TLD)を設定する必要がある。

- /WEB-INF/views/common/include.jsp

 .. code-block:: jsp

  <%@ page session="false"%>
  <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
  <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
  <%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
  <%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
  <%@ taglib uri="http://www.springframework.org/security/tags" prefix="sec"%>
  <%@ taglib uri="http://terasoluna.org/functions" prefix="f"%>
  <%@ taglib uri="http://terasoluna.org/tags" prefix="t"%>
  <%@ taglib uri="https://tiles.apache.org/tags-tiles" prefix="tiles"%> <!-- (1) -->
  <%@ taglib uri="https://tiles.apache.org/tags-tiles-extras" prefix="tilesx"%> <!-- (2) -->

 .. tabularcolumns:: |p{0.10\linewidth}|p{0.90\linewidth}|
 .. list-table::
   :header-rows: 1
   :widths: 10 90

   * - 項番
     - 説明
   * - | (1)
     - | Tiles用のカスタムタグ(TLD)の定義を追加する。
   * - | (2)
     - | Tiles-extras用のカスタムタグ(TLD)の定義を追加する。

Tilesのカスタムタグの詳細は、\ `こちら <https://tiles.apache.org/framework/tiles-jsp/tagreference.html>`_\ を参照されたい。

.. tip::

    | version 2系では tiles taglib は一つであったが、version 3から tiles-extras taglib が追加された。
    | version 2系では tiles taglib で利用可能であった useAttribute tag がversion 3から tiles-extras taglib へ移動されているので、利用していた場合は注意すること。
    | 変更例 ) `<tiles:useAttribute>` : version 2 -> `<tilesx:useAttribute>` : version 3


- web.xml

 .. code-block:: xml

    <jsp-config>
        <jsp-property-group>
            <url-pattern>*.jsp</url-pattern>
            <el-ignored>false</el-ignored>
            <page-encoding>UTF-8</page-encoding>
            <scripting-invalid>false</scripting-invalid>
            <include-prelude>/WEB-INF/views/common/include.jsp</include-prelude> <!-- (1) -->
        </jsp-property-group>
    </jsp-config>

 .. tabularcolumns:: |p{0.10\linewidth}|p{0.90\linewidth}|
 .. list-table::
   :header-rows: 1
   :widths: 10 90

   * - 項番
     - 説明
   * - | (1)
     - | web.xmlの設定で、jspファイル(～.jsp)を読み込む場合、事前にinclude.jspを読み込ませることができる。

 .. note::

     カスタムタグはtemplate.jspに設定しても問題は無いが、カスタムタグの定義はインクルード用の共通jspファイルに作成することを推奨する。
     詳細は :ref:`view_jsp_include-label` を参照されたい。

**レイアウト作成**


レイアウトの枠となるjsp（template）と、レイアウトに埋め込むjspを作成する。

- template.jsp

 .. code-block:: xml

  <!DOCTYPE html>
  <html class="no-js">
  <head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width" />
  <script type="text/javascript">

  </script> <!-- (1) -->
  <c:set var="titleKey"> <!-- (2) -->
      <tiles:insertAttribute name="title" ignore="true" />
  </c:set>
  <title><spring:message code="${titleKey}" text="Create Staff Information" /></title><!-- (3) -->
  <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/app/css/styles.css">
  </head>
  <body>
      <div id="header">
          <tiles:insertAttribute name="header" /> <!-- (4) -->
      </div>
      <div id="body">
          <tiles:insertAttribute name="body" /> <!-- (5) -->
      </div>
      <div id="footer">
          <tiles:insertAttribute name="footer" /> <!-- (6) -->
      </div>
  </body>
  </html>

 .. tabularcolumns:: |p{0.10\linewidth}|p{0.90\linewidth}|
 .. list-table::
   :header-rows: 1
   :widths: 10 90


   * - 項番
     - 説明
   * - | (1)
     - | 共通的に記述する必要のある内容を(1)より上に記述する。
   * - | (2)
     - | tiles-definitions.xmlの(6)で指定した ``title`` の値を取得し、 ``titleKey`` に設定する。
   * - | (3)
     - | タイトルを設定する。
       | ``titleKey`` が取得できなかった際は、text属性で定義したタイトルを表示する。
   * - | (4)
     - | tiles-definitions.xmlで定義した"header"を読み込む。
   * - | (5)
     - | tiles-definitions.xmlで定義した"body"を読み込む。
   * - | (6)
     - | tiles-definitions.xmlで定義した"footer"を読み込む。


- header.jsp

 .. code-block:: jsp

  <h1>
      <a href="${pageContext.request.contextPath}">Staff Management
          System</a>
  </h1>


- createForm.jsp(body部分の例)

    開発者は、headerやfooterの余分なソースを記述せずに、body部分のみに集中して記述できる。

 .. code-block:: jsp

  <h2>Create Staff Information</h2>
  <table>
      <tr>
          <td>Staff First Name</td>
          <td><input type="text" /></td>
      </tr>
      <tr>
          <td>Staff Family Name</td>
          <td><input type="text" /></td>
      </tr>
      <tr>
          <td rowspan="5">Staff Authorities</td>
          <td><input type="checkbox" name="sa" value="01" /> Staff
              Management</td>
      </tr>
      <tr>
          <td><input type="checkbox" name="sa" value="02" /> Master
              Management</td>
      </tr>
      <tr>
          <td><input type="checkbox" name="sa" value="03" /> Stock
              Management</td>
      </tr>
      <tr>
          <td><input type="checkbox" name="sa" value="04" /> Order
              Management</td>
      </tr>
      <tr>
          <td><input type="checkbox" name="sa" value="05" /> Show Shopping
              Management</td>
      </tr>
  </table>

  <input type="submit" value="cancel" />
  <input type="submit" value="confirm" />


- footer.jsp

 .. code-block:: jsp

  <p style="text-align: center; background: #e5eCf9;">Copyright &copy; 20XX CompanyName</p>

 .. note::

    フッターに記載する著作権に関しては :ref:`CreateWebApplicationProjectCustomizeCopyrightOnScreenFooter` を参照すること。


**Controller作成**

ControllerからView名として"staff/createForm"を返却する。

- StaffCreateController.java

 .. code-block:: java

  @RequestMapping(value = "create", method = RequestMethod.GET, params = "form")
  public String createForm() {
      return "staff/createForm"; // (1)
  }

 .. tabularcolumns:: |p{0.10\linewidth}|p{0.90\linewidth}|
 .. list-table::
   :header-rows: 1
   :widths: 10 90


   * - 項番
     - 説明
   * - | (1)
     - | staffが{1}、createFormが{2}となり、propertiesからタイトル名を取得し、JSPを特定する。


**画面描画**

View名に"staff/createForm"が指定されると、
以下のようにTilesがレイアウトを構築して画面描画を行う。

 .. code-block:: xml

    <definition name="layouts"
        template="/WEB-INF/views/layout/template.jsp"> <!-- (1) -->
        <put-attribute name="header"
            value="/WEB-INF/views/layout/header.jsp" /> <!-- (2) -->
        <put-attribute name="footer"
            value="/WEB-INF/views/layout/footer.jsp" /> <!-- (3) -->
    </definition>

    <definition name="*/*" extends="layouts">
      <put-attribute name="title" value="title.{1}.{2}" /> <!-- (4) -->
      <put-attribute name="body"
        value="/WEB-INF/views/{1}/{2}.jsp" /> <!-- (5) -->
    </definition>


 .. tabularcolumns:: |p{0.10\linewidth}|p{0.90\linewidth}|
 .. list-table::
   :header-rows: 1
   :widths: 10 90


   * - 項番
     - 説明
   * - | (1)
     - | 該当するView名が指定された時、親レイアウトである layouts が呼ばれ、テンプレートが /WEB-INF/views/layout/template.jspに設定される。
   * - | (2)
     - | テンプレート /WEB-INF/views/layout/template.jsp内に存在する ``header`` に WEB-INF/views/layout/header.jspが設定される。
   * - | (3)
     - | テンプレート /WEB-INF/views/layout/template.jsp内に存在する ``footer`` に /WEB-INF/views/layout/footer.jspが設定される。
   * - | (4)
     - | staffが{1}、createFormが{2}となり、spring-mvcに取り込まれているpropertiesから ``title.staff.createForm`` をkeyにvalueを取得する。
   * - | (5)
     - | staffが{1}、createFormが{2}となり、テンプレート/WEB-INF/views/layout/template.jsp内に存在する ``body`` に/WEB-INF/views/staff/createForm.jspが設定される。


結果として上記のtemplate.jspに、header.jsp、createForm.jsp、footer.jspが組み合わされた方法でブラウザに出力される。

 .. figure:: ./images/tiles_result.png
   :alt: tiles result
   :width: 100%
   :align: center

|

How to extend
--------------------------------------------------------------------------------

複数レイアウトを設定する場合
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

| 実際に業務アプリケーションを作成する場合、業務内容によって表示レイアウトを分けたい場合がある。
| 今回は、スタッフ検索機能の場合、メニューを画面の左側に出す要望があると想定する。
| その設定方法について、 :ref:`TilesLayoutHowToUse` をベースに以下に示す。

**Tilesの定義**

- tiles-definitions.xml

 .. code-block:: xml
   :emphasize-lines: 7-20

    <?xml version="1.0" encoding="UTF-8" ?>
    <!DOCTYPE tiles-definitions PUBLIC
       "-//Apache Software Foundation//DTD Tiles Configuration 3.0//EN"
       "http://tiles.apache.org/dtds/tiles-config_3_0.dtd">

    <tiles-definitions>
        <definition name="layoutsOfSearch"
            template="/WEB-INF/views/layout/templateSearch.jsp"> <!-- (1) -->
            <put-attribute name="header"
                value="/WEB-INF/views/layout/header.jsp" />
            <put-attribute name="menu"
                value="/WEB-INF/views/layout/menu.jsp" />
            <put-attribute name="footer"
                value="/WEB-INF/views/layout/footer.jsp" />
        </definition>

        <definition name="*/search*" extends="layoutsOfSearch"> <!-- (2) -->
            <put-attribute name="title" value="title.{1}.search{2}" /> <!-- (3) -->
            <put-attribute name="body" value="/WEB-INF/views/{1}/search{2}.jsp" /> <!-- (4) -->
        </definition>

        <definition name="layouts"
            template="/WEB-INF/views/layout/template.jsp">
            <put-attribute name="header"
                value="/WEB-INF/views/layout/header.jsp" />
            <put-attribute name="footer"
                value="/WEB-INF/views/layout/footer.jsp" />
        </definition>

        <definition name="*/*" extends="layouts">
            <put-attribute name="title" value="title.{1}.{2}" />
            <put-attribute name="body" value="/WEB-INF/views/{1}/{2}.jsp" />
        </definition>
    </tiles-definitions>

 .. tabularcolumns:: |p{0.10\linewidth}|p{0.90\linewidth}|
 .. list-table::
   :header-rows: 1
   :widths: 10 90


   * - 項番
     - 説明
   * - | (1)
     - | 今回追加するレイアウト構成の親定義。
       | 別のレイアウトを使用する場合、difinitionタグのname属性について、既存のレイアウト定義"layouts"と重複しないようにする。
   * - | (2)
     - | 今回追加するレイアウトについて、描画の際にControllerから返却されたView名がnameのパターンと同じ場合に呼ばれるレイアウト定義。
       | View名が"\*/search\*"に該当する場合、このレイアウト定義が読み込まれる。
       | extendsしている レイアウト定義"layoutsOfSearch"も適用される。
   * - | (3)
     - | 今回追加するレイアウトで使用するタイトルを指定する。
       | valueはspring-mvcに取り込まれているpropertiesの中から取得する。(以下の説明では application-messages.propertiesに設定する。)
       | {1}はControllerから返却されるView名の"\*/search\*"の「\*」の1つ目、"search{2}"はView名の"\*/search\*"の"search\*"に該当する為、先頭が"search"で始まる必要がある。
   * - | (4)
     - | bodyを定義しているjspファイルの置き場所について、{1}にControllerから返却されるView名の"\*/search\*"の「\*」の1つ目、"search{2}"はView名の"\*/search\*"の"search\*"であるため、先頭に"search"を含んだJSPファイル名が一致するように設計する。
       | JSPファイルの置き場所の構成によってvalue属性の値を変更する必要がある。

 .. note::

     Controllerから返却されるView名がdefinitionタグのname属性のパターンに複数該当する場合、上から順に確認し、1番最初に該当するパターンが採用される。
     上記の場合、スタッフ検索画面のView名が、definitionタグのname属性のパターンに複数該当するため、1番上にレイアウト定義している。

- `application-messages.properties`

 .. code-block:: properties
   :emphasize-lines: 2

   title.staff.createForm = Create Staff Information
   title.staff.searchStaff = Search Staff Information # (1)

 .. tabularcolumns:: |p{0.10\linewidth}|p{0.90\linewidth}|
 .. list-table::
   :header-rows: 1
   :widths: 10 90

   * - 項番
     - 説明
   * - | (1)
     - | 今回追加するメッセージ。
       | "staff"はControllerから返却されたView名の"\*/search\*"の「*」の1つ目。
       | "searchStaff"はControllerから返却されたView名の"\*/search\*"の"search\*"に該当する為、先頭が"search"で始まる必要がある。

**レイアウト作成**

レイアウトの枠となるjsp（template）と、レイアウトに埋め込むjspを作成する。

- templateSearch.jsp

 .. code-block:: xml

  <!DOCTYPE html>
  <html class="no-js">
  <head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width" />
  <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/app/css/styles.css"
      media="screen, projection">
  <script type="text/javascript">

  </script>
  <c:set var="titleKey">
      <tiles:insertAttribute name="title" ignore="true" />
  </c:set>
  <title><spring:message code="${titleKey}" text="Search Staff Information" /></title>
  </head>
  <body>
      <div id="header">
          <tiles:insertAttribute name="header" />
      </div>
      <div id="menu">
          <tiles:insertAttribute name="menu" /> <!-- (1) -->
      </div>
      <div id="body">
          <tiles:insertAttribute name="body" />
      </div>
      <div id="footer">
          <tiles:insertAttribute name="footer" />
      </div>
  </body>
  </html>

 .. tabularcolumns:: |p{0.10\linewidth}|p{0.90\linewidth}|
 .. list-table::
   :header-rows: 1
   :widths: 10 90


   * - 項番
     - 説明
   * - | (1)
     - | tiles-definitions.xmlで定義した"menu"を読み込む。
       | それ以外は :ref:`TilesLayoutHowToUse` と同じ

- styles.css

 .. code-block:: css

  div#menu { /* (1) */
      float: left;
      width: 20%;
  }

  div#searchBody { /* (2) */
      float: right;
      width: 80%;
  }

  div#footer { /* (3) */
      clear: both;
  }

 .. tabularcolumns:: |p{0.10\linewidth}|p{0.90\linewidth}|
 .. list-table::
   :header-rows: 1
   :widths: 10 90


   * - 項番
     - 説明
   * - | (1)
     - | menu部分のstyleを設定する。
       | ここでは、float:leftでメニュー画面を左側に寄せて、width:20%として横幅2割で表示をするようにしている。
   * - | (2)
     - | body部分のstyleを設定する。
       | ここでは、float:rightで業務画面を右側に寄せて、width:80%として横幅8割で表示をするようにしている。
       | 名前をsearchBodyにしているのは、既存のレイアウトと名前が重複することにより、既存のレイアウトのstyleに影響を与えないためである。
   * - | (3)
     - | footer部分のstyleを設定する。
       | 上記menu部分とbody部分のfloatの効果を初期化している。これにより、menu部分とbody部分の下に表示するようにしている。


- header.jsp

  :ref:`TilesLayoutHowToUse` と同じ

- menu.jsp

 .. code-block:: jsp

  <table>
      <tr>
          <td><a href="${pageContext.request.contextPath}/staff/create?form">Create Staff Information</a></td>
      </tr>
      <tr>
          <td><a href="${pageContext.request.contextPath}/staff/search">Search Staff Information</a></td>
      </tr>
  </table>

- searchStaff.jsp(body部分の例)

 .. code-block:: jsp

  <h2>Search Staff Information</h2>
  <table>
      <tr>
          <td>Staff First Name</td>
          <td><input type="text" /></td>
      </tr>
      <tr>
          <td>Staff Family Name</td>
          <td><input type="text" /></td>
      </tr>
      <tr>
          <td rowspan="5">Staff Authorities</td>
          <td><input type="checkbox" name="sa" value="01" /> Staff
              Management</td>
      </tr>
      <tr>
          <td><input type="checkbox" name="sa" value="02" /> Master
              Management</td>
      </tr>
      <tr>
          <td><input type="checkbox" name="sa" value="03" /> Stock
              Management</td>
      </tr>
      <tr>
          <td><input type="checkbox" name="sa" value="04" /> Order
              Management</td>
      </tr>
      <tr>
          <td><input type="checkbox" name="sa" value="05" /> Show Shopping
              Management</td>
      </tr>
  </table>

  <input type="submit" value="Search" />

- footer.jsp

  :ref:`TilesLayoutHowToUse` と同じ

**Controller作成**

ControllerからView名として"staff/searchStaff"を返却する。

- StaffSearchController.java

 .. code-block:: java

  @RequestMapping(value = "search", method = RequestMethod.GET)
  public String createForm() {
      return "staff/searchStaff"; // (1)
  }

 .. tabularcolumns:: |p{0.10\linewidth}|p{0.90\linewidth}|
 .. list-table::
   :header-rows: 1
   :widths: 10 90


   * - 項番
     - 説明
   * - | (1)
     - | staffが{1}、searchStaffが{2}となり、propertiesからタイトル名を取得し、JSPを特定する。


**画面描画**

View名に"staff/searchStaff"が指定されると、
以下のように別のレイアウトを構築して画面描画を行う。


 .. code-block:: xml

    <definition name="layoutsOfSearch"
        template="/WEB-INF/views/layout/templateSearch.jsp"> <!-- (1) -->
        <put-attribute name="header"
            value="/WEB-INF/views/layout/header.jsp" /> <!-- (2) -->
        <put-attribute name="menu"
            value="/WEB-INF/views/layout/menu.jsp" /> <!-- (3) -->
        <put-attribute name="footer"
            value="/WEB-INF/views/layout/footer.jsp" /> <!-- (4) -->
    </definition>

    <definition name="*/search*" extends="layoutsOfSearch"> <!-- (5) -->
        <put-attribute name="title" value="title.{1}.search{2}" /> <!-- (6) -->
        <put-attribute name="body" value="/WEB-INF/views/{1}/search{2}.jsp" /> <!-- (7) -->
    </definition>

 .. tabularcolumns:: |p{0.10\linewidth}|p{0.90\linewidth}|
 .. list-table::
   :header-rows: 1
   :widths: 10 90


   * - 項番
     - 説明
   * - | (1)
     - | 該当するView名が指定された時、親レイアウトであるlayoutsOfSearchが呼ばれ、テンプレートが /WEB-INF/views/layout/templateSearch.jspに設定される。
   * - | (2)
     - | テンプレート /WEB-INF/views/layout/templateSearch.jsp内に存在する ``header`` に WEB-INF/views/layout/header.jspが設定される。
   * - | (3)
     - | テンプレート /WEB-INF/views/layout/templateSearch.jsp内に存在する ``menu`` に /WEB-INF/views/layout/menu.jspが設定される。
   * - | (4)
     - | テンプレート /WEB-INF/views/layout/templateSearch.jsp内に存在する ``footer`` に /WEB-INF/views/layout/footer.jspが設定される。
   * - | (5)
     - | Controllerから返却されたView名が"\*/search\*"に該当する場合、このレイアウト定義が読み込まれる。
       | その時、親レイアウトである"layoutsOfSearch"も読み込まれる。
   * - | (6)
     - | staffが{1}、searchStaffが"search{2}"となり、spring-mvcに取り込まれているpropertiesから ``title.staff.searchStaff`` をkeyにvalueを取得する。
   * - | (7)
     - | staffが{1}、searchStaffが"search{2}"となり、テンプレート/WEB-INF/views/layout/templateSearch.jsp内に存在する ``body`` に/WEB-INF/views/staff/searchStaff.jspが設定される。


結果として上記のtemplateSearch.jspに、header.jsp、menu.jsp、searchStaff.jsp、footer.jspが組み合わされた方法でブラウザに出力される。

 .. figure:: ./images/tiles_result2.png
   :alt: tiles result another template
   :width: 100%
   :align: center

.. raw:: latex

   \newpage