Home > Developer > Web Develop
Tiles is the framework for a free open source template Java application. The construction of user interface based on compound mode simplification. For complex sites, it is still the simplest and most elegant way to work with any MVC technology. STRUTS2 has supported tiles, and today tiles has grown for 13 years, becoming a standalone project for Apache, and we can use tiles alone to build user interface layouts.
Tiles Project: http://tiles.apache.org/index.html
Configuration DTD definition for tiles: http://tiles.apache.org/framework/tiles-core/dtddoc/index.html
This article mainly constructs a simple page layout to understand the Apache tiles3.x (due to the large difference between tiles2.x and tiles3.x).
My directory structure is as follows:
1. Preparatory work
1.1 Installing Apache tiles3.x-dependent jars
<dependency> <groupId>org.apache.tiles</groupId> <artifactId>tiles-extras</artifactId> <version>3.0.5</version> </dependency> <dependency> <groupId>org.apache.tiles</groupId> <artifactId>tiles-servlet</artifactId> <version>3.0.5</version> </dependency> <dependency> <groupId>org.apache.tiles</groupId> <artifactId>tiles-jsp</artifactId> <version>3.0.5</version> </dependency>
Note: The apache3.x full package dependency is used here.
1.3 Configuring Web. Xml
? Adding a tiles listener to Web. xml
<listener> <listener-class>org.apache.tiles.extras.complete.CompleteAutoloadTilesListener</listener-class> </listener>
Listeners about tiles can customize the implementation, see: Http://tiles.apache.org/framework/config-reference.html
2. Analysis interface composition, build layout file
Assume that the page in this case is composed
Analyze the layout of the interface, find the non-generic section, special section. Under WebApp, create the layout folder and place the snippet folder in the public section.
Through analysis, the layout is cut to Header,body,footer, and the Meta,script public part of the HTML page is extracted.
/snippet/meta.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
/snippet/script.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><style>div { width: 480px; height: 80px; background: silver;} #body { background: lime;} </style><script type="text/javascript"> document.writeln("这句话是由JavaScript写入页面的。");</script>
/snippet/header.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
/snippet/footer.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
/snippet/index_body.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><pre> 这是页面的主体部分</pre>
Build a layout file from the public part and the main body as follows:
/layout/index_layout.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://tiles.apache.org/tags-tiles" prefix="tiles"%><!DOCTYPE html>
Composite layout definition for 3.Tiles
Tiles is a combination of page layout and reuse of the common parts of a page by configuring the definition in an XML file.
After/web-inf/tiles-defs.xml defines the public part, the layout of the page is combined by configuring the definition.
<?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"><!-- Definitions for Tiles documentation --><tiles-definitions> <definition name="tiles.base.definition"> <put-attribute name="meta" value="/snippet/meta.jsp" /> <put-attribute name="script" value="/snippet/script.jsp" /> <put-attribute name="header" value="/snippet/header.jsp" /> <put-attribute name="footer" value="/snippet/footer.jsp" /> </definition> </tiles-definitions>
The definition above can be said to be abstract, extracting only the most common parts of the interface as a basic definition, and not specifying a specific template file (layout file). The following inherits Tiles.base.definition to set a tiles.index.definition whose layout template is/layout/index_layout.jsp.
<definition name="tiles.index.definition" extends="tiles.base.definition" template="/layout/index_layout.jsp"> <put-attribute name="body" value="/snippet/index_body.jsp" /> </definition>
The tiles.index.definition is defined above and the body is added with a value of/snippet/index_body.jsp page.
4. Using composite layouts
? The layout of the page has been segmented and combined. Now apply definition to build a Request response page.
/example/index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%><tiles:insertDefinition name="tiles.index.definition"> <tiles:putAttribute name="title" value="这是一个有Apache Tiles构建的页面布局." /></tiles:insertDefinition>
5. Start the server and access the/example/index.jsp
Page Display effect:
Next look at the source code of the page:
<! DOCTYPE html>
In this example, the body of the layout index_layout.jsp is variable, and the title has different caption settings for a different page. In Tiles-defx.xml Tiles.index.definition inherited Tiles.base.definition, and added its body page, The title is added to the index.jsp page where the tiles.index.definition is inserted. The effect of this is to extract the entire site header,footer,meta,script to a definition, and then extend through inheritance, enrich the different layout of the page composition elements, in the specific response page to define the content of the page. In order to achieve the control of the layout of the page, the effect of the public part of the reuse.
6. Summary
This article is just a simple example, but most of the content is taken up by the public part, so the result is not unexpected, for page layout, composition, reuse is the most onerous and complex work before using tiles, these work can do reasonable, elegant, configuration definition naturally more easily.
6th-Rendering Web View-defining layouts using the Apache tiles view
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
