1. 程式人生 > >springmvc 整合 tiles2實現頁面模板區域性重新整理(一)

springmvc 整合 tiles2實現頁面模板區域性重新整理(一)

pom依賴

<tiles.version>2.2.2</tiles.version>
			<dependency>
				<groupId>org.apache.tiles</groupId>
				<artifactId>tiles-jsp</artifactId>
				<version>${tiles.version}</version>
			</dependency>
			<dependency>
				<groupId>org.apache.tiles</groupId>
				<artifactId>tiles-api</artifactId>
				<version>${tiles.version}</version>
			</dependency>
			<dependency>
				<groupId>org.apache.tiles</groupId>
				<artifactId>tiles-core</artifactId>
				<version>${tiles.version}</version>
			</dependency>
			<dependency>
				<groupId>org.apache.tiles</groupId>
				<artifactId>tiles-servlet</artifactId>
				<version>${tiles.version}</version>
			</dependency>
			<dependency>
				<groupId>org.apache.tiles</groupId>
				<artifactId>tiles-template</artifactId>
				<version>${tiles.version}</version>
			</dependency>

tiles配置檢視解析 

注:tiles檢視解析配置推薦配置在springmvc的檢視解析器之前,這樣就會優先匹配tiles配置來進行檢視解析。(配在springmvc配置檔案中)
	  <!-- 引入tiles配置檔案 -->
    <bean id="tilesConfigurer" class="org.springframework.web.servlet.view.tiles2.TilesConfigurer" >
        <property name="definitions">
            <list>
                <value>/WEB-INF/tiles.xml</value>
            </list>
        </property>
    </bean>
    <!-- 配置檢視解析器 -->
    <bean id="tilesViewResolver" class="org.springframework.web.servlet.view.UrlBasedViewResolver">
    	<!--不能省略-->
        <property name="viewClass">
            <value>org.springframework.web.servlet.view.tiles2.TilesView</value>
        </property>
    </bean>
    
    <mvc:resources mapping="/css/**" location="/resources/css" />
    <mvc:resources mapping="/img/**" location="/resources/img" />
    <mvc:resources mapping="/js/**" location="/resources/js" />
    <mvc:default-servlet-handler/>  
 關於 tiles.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">
<tiles-definitions>

    <!-- 定義一個基礎模板頁 -->
    <definition name="template_base" template="/WEB-INF/jsp/main/template.jsp"></definition>

    <!-- 不繼承直接引用也行 -->
    <definition name="baseLayout" extends="template_base">
        <put-attribute name="title" value="" />
        <put-attribute name="header" value="/WEB-INF/jsp/main/header.jsp" />
        <put-attribute name="menu" value="/WEB-INF/jsp/main/menu.jsp" />
        <put-attribute name="body" value="/WEB-INF/jsp/main/content-right.jsp" />
        <put-attribute name="footer" value="/WEB-INF/jsp/main/footer.jsp" />
    </definition>
    
   	<!-- 右側內容模板定義 -->
	<definition name="contentLayout" template="/WEB-INF/jsp/main/content.jsp">
		<put-attribute name="body" value="/WEB-INF/jsp/main/content-right.jsp"/>
	</definition>
	
	<!-- 主頁面<先執行,佈局框架> -->
	<definition name="mainView" extends="baseLayout">
		<put-attribute name="title" value="公共平臺管理系統-主頁面"/>
	</definition>
	<!--test 測試-->
<span style="white-space:pre">	</span><definition name="test" extends="contentLayout">
<span style="white-space:pre">		</span><put-attribute name="title" value="公共平臺管理系統-使用者管理"/>
<span style="white-space:pre">		</span><put-attribute name="body" value="/WEB-INF/jsp/mrquest/test.jsp"/>
<span style="white-space:pre">	</span></definition>
	
</tiles-definitions>

template.jsp檔案
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="t"%>

<!-- HTML頭 開始 -->
<html>
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

</head>

<!-- HTML檔案內容 開始 -->
<body>
	<div id="wrapper">
		<!-- 左側導航欄 開始-->
		<t:insertAttribute name="menu" />
		<!-- 左側導航欄 結束-->
		<div id="page-wrapper" class="gray-bg">
			<!-- 頁面頭 開始 -->
			<t:insertAttribute name="header" />
			<!-- 頁面頭 結束 -->
			<!--  IFRAME佈局 開始 -->
			<div class="main-content">
				<t:insertAttribute name="body" />
			</div>
			<!--  IFRAME佈局 結束 -->
			<!-- 頁面尾 開始 -->
			<t:insertAttribute name="footer" />
			<!-- 頁面尾 結束 -->
		</div>
	</div>

</body>

</html>

header.jsp檔案
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<div class="row border-bottom">
   測試標頭檔案
</div>

menu.jsp檔案
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>


<div class="sidebar-collapse">
	<ul >
		<li  ><span class="nav-label"> 左側</span> </li>
	</ul>
</div>


footer.jsp檔案
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<div class="footer">
	<div class="pull-right">
		used by <strong>xiangjia</strong> Free.
	</div>

</div>


下面tiles 藉助iframe 實現內容的區域性重新整理

content.jsp檔案
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title><tiles:insertAttribute name="title" ignore="true"/></title>
</head>
<body style="padding-top:0px !important;border-top: 0px;" >
	<div id="container" >
		<tiles:insertAttribute name="body" />
	</div>
</body>
</html>


content-right.jsp檔案
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>右側頁面-用於展示框架右側的內容</title>
</head>
<body>
	<div id="container" style="height:900px;width:100%">
		<!-- 用於展示所有右側區域的內容 -->
		<iframe name="commonFrame" id="commonFrame" src="${context}/test"  height="auto" scrolling="no" frameborder="0"  style="margin:0;padding:0;width:100%;height:100%;"></iframe>
	</div>		
</body>
</html>


TestController配置
@Controller
public class TestController {

	@RequestMapping(value = "/test")
	public String testGet() {
		return "test";
	}
}