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
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
http://localhost:8080/Tiles2/about.jsp
本文来源 互联网收集，文章内容系作者个人观点，不代表 本站 对观点赞同或支持。如需转载，请注明文章来源,如您发现有涉嫌抄袭侵权的内容，请联系本站核实处理。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
B站导航 ，集网址、资源、资讯于一体的 综合网址导航站，简约优雅的设计风格，全面的前端用户功能，简单的模块化配置，欢迎您的体验