Apache Tiles 2 Basic Demo

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

Apache Tiles 2 Basic Demo_第1张图片
 

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>

 

5.Results

启动Tomcat服务器,查看页面布局结果

http://localhost:8080/Tiles2/home.jsp
Apache Tiles 2 Basic Demo_第2张图片
 http://localhost:8080/Tiles2/about.jsp

Apache Tiles 2 Basic Demo_第3张图片
 

 

 

 

你可能感兴趣的:(apache)