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

Nginx configuration PC site mobile site separation to achieve redirection

Use nginx to configure the separation of PC site ...

MySQL database architecture details

Table of contents 1. MySQL Architecture 2. Networ...

vue-pdf realizes online file preview

This article example shares the specific code of ...

hr horizontal line style example code

Copy code The code is as follows: <hr style=&q...

How to view the network routing table in Ubuntu

What are Routing and Routing Table in Linux? The ...

Using Docker run options to override settings in the Dockerfile

Usually, we first define the Dockerfile file, and...

Detailed explanation of Docker usage under CentOS8

1. Installation of Docker under CentOS8 curl http...

How to maintain MySQL indexes and data tables

Table of contents Find and fix table conflicts Up...

VPS builds offline download server (post-network disk era)

motivation Due to learning needs, I purchased a v...

uniapp project optimization methods and suggestions

Table of contents 1. Encapsulate complex page dat...

Solution to the problem that Docker container cannot be stopped or killed

Docker version 1.13.1 Problem Process A MySQL con...

Learn the common methods and techniques in JS arrays and become a master

Table of contents splice() Method join() Method r...

How to reset the root password in mysql8.0.12

After installing the database, if you accidentall...