FrontPage > Spring Web MVCの覚書

Tiles

下図のような構成の画面を作成する。

spring20.png

1. ライブラリを追加する。

  • pom.xmlを右クリック、「Maven」→「依存関係の追加」
    「グループID、アーティファクトID・・・の入力(E):」へ"tiles-extras"と入力。
    「検索結果」から"org.apache.tiles tiles-extras"を選択。
    「バージョン」を"2.2.2"に変更して「OK」ボタンを押す。
  • pom.xmlを右クリック→「コマンド・プロンプトで開く」を選択。表示されるコマンド・プロンプトで以下を実行する。
    workspace\mvc-basic>mvn package

    target\mvc-basic-1.0.0-SNAPSHOT\WEB-INF\libをsrc\main\webapp\WEB-INF/libへ上書きコピーする。

2. 共通部分のjspを作成する。

  • ヘッダ部を作成する。
    例) WEB-INF/layouts/header.jsp
    <%@ page language="java" contentType="text/html; charset=UTF-8"
       pageEncoding="UTF-8"%>
    <h1>ヘッダ</h1>

  • フッタ部を作成する。
    例) WEB-INF/layouts/footer.jsp
    <%@ page language="java" contentType="text/html; charset=UTF-8"
       pageEncoding="UTF-8"%>
    フッター

  • メニュー部を作成する。
    例) WEB-INF/layouts/menu.jsp
    <%@ page language="java" contentType="text/html; charset=UTF-8"
       pageEncoding="UTF-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
    <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
    <%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
    メニュー
    <ul>
        <li><a href="<c:url value='/helloWorld'/>">hello world.</a></li>
        <li><a href="<c:url value='/loveTheWorld'/>">love the world.</a></li>
        <li>xxx</li>
    </ul>

3. レイアウトを定義する。

  • 基本となるTiles設定ファイルを作成する。
    例) WEB-INF/layouts/tiles-definitions.xml
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE tiles-definitions PUBLIC
    	"-//Apache Software Foundation//DTD Tiles Configuration 2.1//EN"
    	"http://tiles.apache.org/dtds/tiles-config_2_1.dtd">
    <tiles-definitions>
     <!-- defaultという名称でレイアウトを定義 -->
     <definition name="default" template="/WEB-INF/layouts/default.jsp">
       <put-attribute name="header" value="/WEB-INF/layouts/header.jsp" />
       <put-attribute name="menu" value="/WEB-INF/layouts/menu.jsp" />
       <put-attribute name="body" value="/WEB-INF/layouts/body.jsp" />
       <put-attribute name="footer" value="/WEB-INF/layouts/footer.jsp" />
     </definition>
    
    </tiles-definitions>

  • 実際のレイアウトを作成する。
    例) WEB-INF/layouts/default.jsp(上記設定ファイルで指定)
    <%@ page language="java" contentType="text/html; charset=UTF-8"
       pageEncoding="UTF-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
    <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
    <%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
    <%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles" %>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <link rel="stylesheet" href="<c:url value='/resources/css/stylesheet.css' />" type="text/css">
    </head>
    <body>
        <table class="tile">
        <tr>
            <td class="tile_header" colspan="2">
                <tiles:insertAttribute name="header" />
            </td>
        </tr>
        <tr>
            <td class="tile_menu">
            <div class="tile_menu">
                <tiles:insertAttribute name="menu" />
            </div>
            </td>
            <td class="tile_body">
                <tiles:insertAttribute name="body" />
            </td>
        </tr>
        <tr>
            <td class="tile_footer" colspan="2">
                <tiles:insertAttribute name="footer" />
            </td>
        </tr>
        </table>
    </body>
    </html>

    stylesheet.css
    @CHARSET "UTF-8";
    BODY {
    	font: normal 10pt "sans-serif";
    	padding: 0px;
    	margin: 0px;
    }
    table.tile {
    	width: 100%;
    	height: 100%;
    	margin: 0px;
    	border-collapse: collapse;
    }
    td.tile_header {
    	padding: 0px;
    	color: #e0e0ff;
    	background-color: LightSlateGray;
    	height: 80px;
    }
    td.tile_menu {
    	padding: 0px;
    	vertical-align: top;
    	text-align: left;
    	background-color: #8080ff;
    	width: 150px;
    }
    div.tile_menu {
    	padding: 5px;
    	overflow: hidden;
    	width: 150px;
    }
    td.tile_footer {
    	height: 20px;
    	padding: 0px;
    	background-color: LightSlateGray;
    }
    td.tile_body {
    	padding: 0px;
    	text-align: left;
    	vertical-align: top;
    }
    div.content {
    	margin: 0px;
    	padding: 10px;
    }

4. コントローラの戻り値に対するjspを指定する。

  • Tiles設定ファイルを作成する。

    例) 戻り値が"loveTheWorld"の場合、"default"で定義されているレイアウトの"body"部分に"loveTheWorld.jsp"を差し込む。

    WEB-INF/views/sample/views.xml
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE tiles-definitions PUBLIC
    	"-//Apache Software Foundation//DTD Tiles Configuration 2.1//EN"
    	"http://tiles.apache.org/dtds/tiles-config_2_1.dtd">
    
    <tiles-definitions>
    
     <definition name="loveTheWorld" extends="default">
       <put-attribute name="body" value="/WEB-INF/views/sample/loveTheWorld.jsp" />
     </definition>
    
    </tiles-definitions>

5. サーブレット設定ファイルを修正する。

  • サーブレット設定ファイル(servlet-context.xml等)に"TilesView"を登録する。
    例)
    <bean id="tilesViewResolver" class="org.springframework.web.servlet.view.UrlBasedViewResolver">
        <property name="viewClass" value="org.springframework.web.servlet.view.tiles2.TilesView"/>
    </bean>

  • サーブレット設定ファイル(servlet-context.xml等)にTilesConfigurerを登録する。
    <bean id="tilesConfigurer" class="org.springframework.web.servlet.view.tiles2.TilesConfigurer">
        <property name="definitions">
            <list>
                <!-- 先に作成したTiles設定ファイルを指定 -->
                <value>/WEB-INF/layouts/tiles-definitions.xml</value>
    	     <value>/WEB-INF/views/**/views.xml</value>
            </list>
        </property>
    </bean>

6. コントローラ、jspファイル例

  • コントローラ
    例)
    @Controller
    public class SampleController {
    
    	@RequestMapping("/loveTheWorld")
    	public String loveTheWorld(Model model) {
    		model.addAttribute("message", "Love the world.");
    		return "loveTheWorld";
    	}
    }

  • jsp
    例) WEB-INF/views/sample/loveTheWorld.jsp
    <%@ page language="java" contentType="text/html; charset=UTF-8"
       pageEncoding="UTF-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
    <div class="content">
        <h1>${message}</h1>
    </div>





添付ファイル: filespring20.png 28件 [詳細]

トップ   編集 凍結解除 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2012-09-03 (月) 02:25:50 (2233d)