Apache Tiles 2 Basic Demo

fairy_xzc

浏览: 363577 次
性别:
来自: 北京

最近访客更多访客>>

huan0727

漂移361john

scj2cy

smallbug2010

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

apache-tiles

0.Maven Dependency

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<groupId>org.fool.tiles2</groupId>
	<artifactId>Tiles2</artifactId>
	<version>1</version>
	<packaging>war</packaging>

	<dependencies>
		<dependency>
			<groupId>org.apache.tiles</groupId>
			<artifactId>tiles-core</artifactId>
			<version>2.2.2</version>
		</dependency>
		<dependency>
			<groupId>org.apache.tiles</groupId>
			<artifactId>tiles-jsp</artifactId>
			<version>2.2.2</version>
		</dependency>

		<dependency>
			<groupId>org.slf4j</groupId>
			<artifactId>slf4j-nop</artifactId>
			<version>1.7.2</version>
		</dependency>
	</dependencies>

	<build>
		<sourceDirectory>src</sourceDirectory>
		<plugins>
			<plugin>
				<artifactId>maven-compiler-plugin</artifactId>
				<version>2.3.2</version>
				<configuration>
					<source>1.7</source>
					<target>1.7</target>
				</configuration>
			</plugin>
			<plugin>
				<artifactId>maven-war-plugin</artifactId>
				<version>2.2</version>
				<configuration>
					<warSourceDirectory>WebRoot</warSourceDirectory>
					<failOnMissingWebXml>false</failOnMissingWebXml>
				</configuration>
			</plugin>
		</plugins>
	</build>
</project>

1.web.xml configuration

有三种方式配置Tiles，详细配置见http://tiles.apache.org/tutorial/configuration.html，这里我选择如下配置

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
	id="WebApp_ID" version="3.0">
	<display-name>Tiles2</display-name>

	<context-param>
		<param-name>org.apache.tiles.impl.BasicTilesContainer.DEFINITIONS_CONFIG</param-name>
		<param-value>/WEB-INF/tiles.xml</param-value>
	</context-param>

	<listener>
		<listener-class>org.apache.tiles.web.startup.TilesListener</listener-class>
	</listener>
</web-app>

2.tiles.xml configuration

这里我使用了Tiles Inheritance，可以精简一下代码。

<?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="template" template="/WEB-INF/tiles/template.jsp">
		<put-attribute name="header" value="/WEB-INF/tiles/defaultHeader.jsp" />
		<put-attribute name="menu" value="/WEB-INF/tiles/defaultMenu.jsp" />
		<put-attribute name="footer" value="/WEB-INF/tiles/defaultFooter.jsp" />
	</definition>
	
	<definition name="homePage" extends="template">
		<put-attribute name="body" value="/WEB-INF/tiles/home_body.jsp" />
	</definition>
	
	<definition name="aboutPage" extends="template">
		<put-attribute name="body" value="/WEB-INF/tiles/about_body.jsp" />
	</definition>
</tiles-definitions>

3.Project Directory

4.JSP Views

注意，这里主要是为了演示如何使用Apache Tiles，一切从简，所以并没有进行CSS美化，如果要进行CSS美化，可以自行修改，这里不再赘述。

template.jsp

<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
	<table border="1" cellspacing="0" cellpadding="0" width="1200dp" align="center">
		<tr height="100dp">
			<td colspan="2"><tiles:insertAttribute name="header" /></td>
		</tr>
		<tr height="500dp">
			<td><tiles:insertAttribute name="menu" /></td>
			<td><tiles:insertAttribute name="body" /></td>
		</tr>
		<tr height="100dp">
			<td colspan="2"><tiles:insertAttribute name="footer" /></td>
		</tr>
	</table>
</body>
</html>

defaultHeader.jsp

<div>This is the default header</div>

defaultMenu.jsp

<div>
	<ul>
		<li><a href="/Tiles2/home.jsp">Home</a></li>
    	<li><a href="/Tiles2/about.jsp">About us</a></li>
		<li>Menu item 1</li>
		<li>Menu item 2</li>
		<li>Menu item 3</li>
		<li>Menu item 4</li>
		<li>Menu item 5</li>
		<li>Menu item 6</li>
	</ul>
</div>

defaultFooter.jsp

<div>This is the default footer...</div>

home_body.jsp

<div id="header">
	<h1>This is the home page's body</h1>
</div>

about_body.jsp

<h1>About us</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br>
Morbi tempus mauris condimentum arcu. Nunc in quam. Vivamus <br>
quis quam sed tortor euismod pellentesque. Nulla lobortis. <br>
Donec urna metus, adipiscing vel, iaculis vel, congue at, odio. <br>
Nullam et dolor id tortor tempor gravida. Curabitur eleifend <br>