Sitemesh tutorial - page decoration technology principles and applications

Sitemesh tutorial - page decoration technology principles and applications

1. Basic Concepts

1. Sitemesh is a page decoration technology:

1 : It intercepts page access through filters
2 : Find the appropriate decoration template based on the URL of the visited page
3 : Extract the content of the visited page and put it in the appropriate position in the decoration template
4 : Finally, the decorated page is sent to the client.

2. In sitemesh, pages are divided into two types: decorative templates and ordinary pages.
1) Decorative template refers to a page used to decorate other pages.
2) Ordinary pages, generally referring to various application pages.
3. Next, we will use a simple example to illustrate the basic principle of sitemesh modification of web pages.

Second, the principle of template modification of web pages







Through Sitemesh's registration mechanism, tell Sitemesh to use the XXX template (assuming the previous template is used) to modify the visited page when accessing the path.



When the user clicks "Show the Great Wall" (/ShowGreatWall.do) in the left navigation bar, the "Show the Great Wall" page on the right will be decorated with the specified template



To summarize the above process, the basic principle of Sitemesh modifying web pages can be explained as follows:



3. Configuration and use of Sitemesh

1) Add filter definition and sitemesh taglib definition to WEB-INF/web.xml

Copy
the code as follows:

<filter>
<filter-name>sitemesh</filter-name>
<filter-class>com.opensymphony.module.sitemesh.filter.PageFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>sitemesh</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<taglib>
<taglib-uri>sitemesh-decorator</taglib-uri>
<taglib-location>/WEB-INF/sitemesh-decorator.tld</taglib-location>
</taglib>
<taglib>
<taglib-uri>sitemesh-page</taglib-uri>
<taglib-location>/WEB-INF/sitemesh-page.tld</taglib-location>
</taglib>

2) Create WEB-INF/decorators.xml, in which you can configure which templates are included and which URLs each template modifies. You can also configure which URLs do not need template control. An example of decorators.xml is as follows:

Copy
the code as follows:

<excludes>
<pattern>/Login*</pattern>
</excludes>
<decorators defaultdir="/decorators">
<decorator name="main" page="DecoratorMainPage.jsp">
<pattern>/*</pattern>
</decorator>
<decorator name="pop" page="PopPage.jsp">
<pattern>/showinfo.jsp*</pattern>
<pattern>
/myModule/GreatWallDetailAction.do*
</pattern>
</decorator>
</decorators>

3) Let's look at an example of a modified template

Copy
the code as follows:

<%@page contentType="text/html;?charset=GBK"%>
<%@taglib uri="sitemesh-decorator"?prefix="decorator" %>
<html>
<head>
<title> <decorator:title/> </title>
<decorator:head/>
</head>
<body>
Hello World <hr/>
<decorator:body/>
</body>
</html>

4) Let's look at an example of a modified page:

Copy
the code as follows:

<%@ page contentType="text/html;?charset=GBK"%>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<p>Decorated page goes here.</p
</body>
</html>

5) Let’s take a look at the Sitemesh tag

<decorator:head />

that can be used in the decoration template

and extract the content in the head tag of the decorated page.

<decorator:body />

takes out the content of the body tag of the decorated page.

<decorator:title default="" />

takes out the content of the title tag of the decorated page. default is the default value

<decorator:getProperty property="" default="" writeEntireProperty=""/>

takes out the attribute value of the relevant tag of the decorated page.

writeEntireProperty indicates whether to display the value of the property or

the attribute of the "property=value" HTML tag
Body Tag Attributes

Note that if the content value

of the Meta tag

contains ">" or <", an error will be reported and it needs to be transcoded. For example, &lt;

default is the default value.

<decorator:usePage id="" />

will be constructed as an object by the decorated page and can be directly referenced in the JSP of the decorated page .

6) See an example of using tags in a decoration template

Copy
the code as follows:

<html lang=" <decorator:getProperty property="lang"/> ">
<head>
<title> <decorator:title default="Hello" /> </title>
<decorator:head />
</head>

<body <decorator:getProperty property="body.onload" writeEntireProperty="1"/> >
Get the name of the variable company from meta:
<decorator:getProperty property="meta.company"/>
The following is the content of the body of the modified page:
<decorator:body />
<decorator:usePage id="myPage" />
<%=myPage.getRequest().getAttribute("username")%>
</body>
</html>

7) Take a look at the corresponding code in the modified page:

Copy
the code as follows:

<html lang="en">
<head>
<title>My sitemesh</title>
<meta name="company" content="smartdot"/>
<meta name="Author" content="zhangsan"/>
<script>
function count(){return 10;}
</script>
</head>
<body onload="count()">
<p>This is a modified page</p>
</body>
</html>

IV. Conclusion

1. The most important thing about Sitemesh is to make templates for decoration, and configure these templates in decorators.xml to decorate which pages. Therefore, the main process of using Sitemesh is to make a decoration template and then configure the URL Pattern in decorators.xml

2. Analyze the entire project to see which pages need to be abstracted into templates. For example, secondary pages, tertiary pages, pop-up windows, etc. may all need to be made into corresponding templates. Generally speaking, a large OA system will not have more than 8 templates.

What if a special request path is within the scope of the filter but you don’t want to use a template

?


You can't be so unreasonable!

Don't worry, SiteMesh has already considered this, and the decorators.xml mentioned in step 5 above will come into play at this time!
Below is my decorators.xml :

Copy
the code as follows:

<?xml version="1.0" encoding="ISO-8859-1"?>
<decorators defaultdir="/decorators">
<!-- Any urls that are excluded will never be decorated by Sitemesh -->
<excludes>
<pattern>/index.jsp*</pattern>
<pattern>/login/*</pattern>
</excludes>
<decorator name="main" page="main.jsp">
<pattern>/*</pattern>
</decorator>
</decorators>

There are two main nodes in decorators.xml :
The decorator node specifies the location and file name of the template, and uses the pattern to specify which paths reference which templates.
The excludes node specifies which paths of requests do not use any templates.

For example, in the above code, /index.jsp and any request path starting with /login/ do not use templates.

Another point to note is that the defaultdir attribute of the decorators node specifies the directory where template files are stored.

<<:  Using CSS3 to implement font color gradient

>>:  A practical record of an accident caused by MySQL startup

Recommend

Some tips on deep optimization to improve website access speed

<br />The website access speed can directly ...

Practical record of solving MySQL deep paging problem

Table of contents Preface Why does limit deep pag...

JavaScript tips to help you improve your coding skills

Table of contents 1. Filter unique values 2. Shor...

MySQL cross-table query and cross-table update

Friends who have some basic knowledge of SQL must...

Learn the operating mechanism of jsBridge in one article

Table of contents js calling method Android 1.js ...

How to use geoip to restrict regions in nginx

This blog is a work note environment: nginx versi...

IE8 browser will be fully compatible with Web page standards

<br />According to foreign media reports, in...

A brief discussion on the built-in traversal methods of JS arrays and their differences

Table of contents forEach() (ES6) method map() (E...

Whitespace processing in HTML/CSS and how to preserve whitespace in the page

Whitespace rules in HTML In HTML, multiple spaces...

MySQL detailed summary of commonly used functions

Table of contents MySQL Common Functions 1. Numer...

impress.js presentation layer framework (demonstration tool) - first experience

I haven’t blogged for half a year, which I feel a ...

Detailed tutorial on how to install MySQL 5.7.18 in Linux (CentOS 7) using YUM

The project needs to use MySQL. Since I had alway...

How to set horizontal navigation structure in Html

This article shares with you two methods of setti...

Detailed explanation of the reasons why MySQL connections are hung

Table of contents 1. Background Architecture Prob...

How to upgrade all Python libraries in Ubuntu 18.04 at once

What is pip pip is a Python package management to...