16.1 Create a composite web page with basic JSP statement ... 2
16.2 Creating a composite web page with JSP's Include instructions ... 6
16.3 Create a composite web page in the tag ... 10
16.4 Creating a composite web page with TILES template ... 12
16.5 Create a composite web page with TILES template and TILES components ... 14
16.5.1 Basic Usage of TILES Components ... 15
16.5.2 call TILES components through struts action ... 17
16.5.3 Combination of TILES components ... 17
16.5.4 Extension of TILES components ... 19
16.6 section ... 20
Chapter 16 TILES Framework
When developing a Web site, you often require all Web pages of the same site to maintain a consistent look, such as with the same layout, page, page, and menus. Figure 16-1 shows a typical webline layout.
Menu
HEADER
Content
Footer
Figure 16-1 A typical webline layout
In Figure 16-1, the web page is divided into four parts: Header, Menu, Footer and Content. For all web pages of the same site, the header, menu and the Footer section are the same, and only the contents of the Content portion are different. If you use basic JSP statements to write all Web pages, it is clear that a large number of duplication codes are used, increase development and maintenance costs.
The TILES framework provides a template mechanism for the creation web page, which separates the layout and content of the web page. It allows the template to be created first, and then insert the contents to the template at runtime. The TILES framework is based on the JSP's Include instruction, but it provides a more powerful feature than the JSP's Include instruction. The TILES framework has the following features:
l Create reusable templates
l Dynamic build and load page
l Define reusable TILES components
l Support internationalization
The TILES framework contains the following:
l tiles tag library
l TILES component configuration file
l tilesplugin plugin
This chapter steps from a gradual introduction of several programs that construct a composite web page displayed in Figure 16-1, each of which is based on the previous program. The sample programs of this chapter provide a separate version for Tilestaglibs applications.
16.1 Create a composite web page using basic JSP statement
The most basic way to create a dynamic web page is to create a separate JSP file for each page. Figure 16-2 and Figure 16-3 are the main page index.jsp and product page for Tilestaglibs applications, respectively.
This section introduces the source program of the Tilestaglibs application in the SourceCode / TileStaglibs / Version1 / Tilestaglibs directory of the supporting CD. If you want to post this app on Tomcat, just copy the entire TileStaglibs subdirector of the version1 directory to the / webapps directory.
Figure 16-2 Main page of Tilestaglibs Applications INDEX.JSP
Figure 16-3 Product page product page for TileStaglibs Application Product.jsp
Routines 16-1 and routines 16-2 are source code for index.jsp and product.jsp, respectively.
As can be seen from routine 16-1 and routine 16-2, in index.jsp and product.jsp files, only the code blocks of only the crude word identifier are not repeated, and the rest are repeated code. If the same part of the web page needs to change, you must manually modify all JSP files. It can be seen that the basic JSP statement is used to write the above web page, which will cause a large amount of redundancy of JSP code, increase development and maintenance costs.
16.2 Creating a compound web page with JSP's Include instruction
In order to reduce the redundancy of the code, you can put the same part in Index.jsp and Product.jsp, and then include other JSP files through the JSP Include instruction in the index.jsp and product.jsp files. Figure 16-4 and Figure 16-5 show other JSP files included in the index.jsp and product.jsp files, respectively.
The source program of the Tilestaglibs application described in this section is located in the Sourcecode / TileStaglibs / Version2 / TileStaglibs directory of the supporting CD. If you want to post this app on Tomcat, just copy the entire TileStaglibs subdirectory in the Version2 directory to the / webapps directory.
Sidebar.jsp
HEADER.JSP
IndexContent.jsp
FOOTER.JSP
Figure 16-4 INDEX.JSP contains other JSP files
Sidebar.jsp
HEADER.JSP
ProductContent.jsp
FOOTER.JSP
Figure 16-5 Other JSP files included in Product.jsp
As can be seen from Figures 16-4 and 16-5, including header.jsp, sidebar.jsp, and footer.jsp, SideBar.jsp, and Footer.jsp, only the JSP files included in the web main body part. Routines 16-3, 16-4, 16-5, 16-6, 16-7, 16-8 and 16-9 are header.jsp, footer.jsp, sidebar.jsp, indexcontent.jsp, productcontent.jsp , INDEX.JSP and PRODUCT.JSP source code. Routines 16-3 Header.jsp
<% - One Table Lays Out of The Content for this Page -%>
<% - Sidebar Section -%>
td>
<% - main content section -%>
<% - header section -%>
td>
<% - Content Section -%>
td>
TR>
<% - Footer Section -%>
td>
TR>
TABLE>
td>
TR>
TABLE>
body>
html>
The JSP Include instruction is used to create a composite page, which has taken the right step in improving the code reusability. The same content contained in Index.jsp and Product.jsp is placed in a separate JSP page. INDEX.JSP and Product.JSP simply include these same contents through the JSP Include instruction, which improves the reusability of the code. However, the JSP Include instruction does not completely avoid code redundancy, such as from routine 16-8 and routine 16-9, there is still a lot of repetition code in Index.jsp and Product.jsp, only a crude word identity code block Not a duplication code.
In addition, the number of JSP files increases, although the second solution is reduced, the number of JSP files increases, and the complexity of the software has also increased.
16.3 Create a composite page with tab
The tag and JSP Include instruction of the TILES tag library have the same function, and other JSP pages can be inserted into the current page. For example, the effect of the following two statements is the same:
Tag Page Property Specifies the inserted JSP file, the optional value of the Flush property includes True and false, when the Flush property is TRUE , Indicating the FLUSH () method of the output stream of the current page before performing the insertion operation.
The source program of the Tilestaglibs application described in this section is located in the Sourcecode / TileStaglibs / Version3 / Tilestaglibs directory of the supporting CD. If you want to publish this app on Tomcat, just copy the entire TileStaglibs subdirectory under the Version3 directory to the / webappus directory.
The following is the step of using the tag in Tilestaglibs applications.
(1) Install the file required for the Tiles tag library
The files required to run the Tiles tag library are included in the Struts download software. If the Tiles tag library is used in web applications, the following files must be in the web-inf / lib directory:
l struts.jar
l Commons-Digester.jar
l Commons-beanutils.jar
l Commons-Collects.jar
l commons-logging.jar
In addition, the definition files for the Tiles tag library should be copied to the web-infers.
(2) Configure the element in the web.xml file:
/web-inf/struts-tiles.tld taglib-uri>
/web-inf/struts-tiles.tld taglib-location>
taglib>
(3) Create index.jsp and product.jsp files
Modify the 16.2 routine 16-8 (Index.jsp) and routine 16-9 (Product.jsp), at the beginning of index.jsp and product.jsp file, introduce Tiles tag libraries through <% @ taglib> instruction, Then change the JSP INCLUDE instruction in the source code to the tag. Routines 16-10 and routines 16-11 are modified index.jsp and product.jsp files, respectively.
<% - One Table Lays Out of The Content for this Page -%>
<% - Sidebar Section -%>
td>
<% - main content section -%>
<% - header section -%>
td>
<% - Content Section -%>
td>
TR>
<% - Footer Section -%>
td>
TR>
TABLE>
td>
TR>
TABLE>
body>
html>
As can be seen from routines 16-10 and routines 16-11, replacing the JSP INCLUDE directive with the tag to create a composite page, the code is only a slight difference, and the advantages and disadvantages of the two are also very similar. Use the tag to create a composite page, and have not fully utilized the advantage of the TILES framework.
16.4 Creating a compound web page with TILES template
In Section 16.3, although tags, index.jsp, and product.jsp files still have a lot of repetition code. In order to improve the reusability and maintainability of the web page, Tiles template mechanism can be introduced.
The source program of the Tilestaglibs application described in this section is located in the SourceCode / TileStaglibs / Version4 / Tilestaglibs directory of the supporting CD. If you want to post this app on Tomcat, just copy the entire TileStaglibs subdirectory in the Version4 directory to the / webapps directory.
Popular speaking, Tiles template is a JSP page that describes page layout. Tiles templates only define the style of the web page, not to specify content. Insert a specific content in the template page when the web application is running. The same template can be shared by multiple web pages.
Using templates, you can easily implement all of the page of the web application to remain the same appearance and layout without having to hard coding each page. In an app, most pages use the same template, some pages may require different appearances, using other templates, so an application may have more than one template.
The following is the step of using the Tiles template in the Tilestaglibs application. (1) Install the file required for the TILES tag library, step 1 of 16.3.
(2) Configure the element in the web.xml file, step 2 of 16.3.
The layout of the web page is defined in the template file layout.jsp, but does not specify the specific content of each part. Layout.jsp contains multiple tags, and its Attribute property specifies the logical name of the content to be inserted without specifying a file that is really inserted. (4) Use the TILES template in Index.jsp and Product.jsp, see routines 16-13 and routines 16-14.
In Index.jsp and Product.jsp, the tab specifies the inserted template file, index.jsp, and product.jsp use the same template file Layout.jsp. The tag contains several sub-tags, which specifies the specific content inserted into the template. Name Properties and Template Files in the Template File, the attribute property matching, the value of the tag specifies the specific JSP file inserted into the template.
The TILES template mechanism greatly improves the reusability and maintainability of the code, and the template contains web-common layout. If the layout changes, you only need to modify the template file without modifying the specific web file. However, from routine 16-13 and 16-14, it can be seen, although index.jsp and product.jsp files are shortened, but both still have duplicate code. 16.5 Creating a composite page with Tiles template and Tiles components
In order to maximize the reusability and flexibility of the code, the TILES framework introduces the concept of Tiles components. The TILES component can represent a complete web page or a part of the web page. Simple TILES components can be combined into complex Tiles components, or are extended to complex TILES components.
16.5.1
Basic use of TILES components
The TILES framework allows TILES components to be configured in a dedicated XML file. For example, the following code defines a TILES component called "index-definition", which describes the entire index.jsp page:
definition>
tiles-definitions>
Element Name Properties Specifies the name of the Tiles component, the Path property specifies the template used by the Tiles component, sub-elements of the element are used to insert specific web content into the template.
This section describes the source program of the Tilestaglibs application in the SourceCode / TileStaglibs / Version5 / Tilestaglibs directory of the supporting CD. If you want to post this app on Tomcat, just copy the entire TileStaglibs subdirectory under the Version5 directory to the / webapps directory.
The following is the step of using Tiles components in Tilestaglibs applications.
(1) Install the files required for the Tiles tag library, step 1 in 16.3
(2) Configuring elements in the web.xml file, step 2 in 16.3.
(3) Configure TILES components in a special XML file, named this profile to Tiles-Defs.xml in this example, this file is located in a web-inflicity. Routines 16-15 is the code for the Tiles-Defs.xml file.
The above code defines two TILES components that represent the complete index.jsp and Product.jsp page, respectively.
(4) Configure the TILESPLUGIN plugin in the strut configuration file, the code is as follows:
plug-in>
The TILESPLUGIN plug-in is used to load the TILES component configuration file. In the element contains several 子 子, it is used to pass to the TILESPLUGIN plug-in to add additional parameters:
l Definitions-config parameters: Specify the configuration file of the Tiles component, if there are multiple configuration files, then divide it with a comma.
l Definitions-Parser-Validate Parameters: Specify whether the XML parser verifies Tiles profiles, optional values include True and false, the default value is TRUE.
(5) Configuring an ActionServlet in a web.xml file
To ensure that the TILESPLUGIN plug-in is loaded while the web application is started, you should join the ActionServlet controller, and the ActionServlet controller can load all plugins in initialization. The following is the code for configuring an ActionServlet in a web.xml file:
If the TILES component represents a complete web page, you can call TILES components directly via Struts Action. For example, if you want to call via Struts Action
16.5.1
The TILES component defined as "index-definition" can be configured in the Struts profile:
Type = "org.apache.struts.Actions.forwardAction"
Parameter = "INDEX-Definition">
action>
action-mappings>
Next, access http: // localhost: 8080 / tilestaglibs / index.do by the browser, which is first forwarded to forwardaction, forwardaction forwards the request to the Tiles component called "index-definition", and finally in the browser The user will see the same page as INDEX.JSP. To call the TILES component through Struts Action, you can give full play to the function of the Struts framework responsible for process control. In addition, the number of JSP files can be reduced. For example, if you call Tiles components called "index-definition" directly via Struts Action, you don't have to create an index.jsp file.
16.5.3
Combination of TILES components
TILES components are a reusable component. Like a wooden, the simple TILES component is assembled into a complex Tiles component, for example, split the left part of the TILES component named "index-definition" into a separate TILES component, named "Sidebar-Definition" As shown in Figure 16-6.
Index-Definition
Template file: Layout.jsp
Sidebar-definition
Template file: sidebar-layout.jsp
Flags.jsp
Sidebar-links.jsp
HEADER.JSP
IndexContent.jsp
FOOTER.JSP
Figure 16-6 Split the left part of the Tiles component called "index-definition" into a separate TILES component
The source program of the Tilestaglibs application described in this section is located in the Sourcecode / TileStaglibs / Version6 / Tilestaglibs directory of the supporting CD. If you want to publish this app on Tomcat, just copy the entire TileStaglibs subdirectory under the Version6 directory to the / webapps directory.
The following is the step of using a combined TILES component in a Tilestaglibs application.
(1) Three TILES components "Sidebar-Definition", "Index-Definition", and "Product-Definition" are redefined in Tiles-Def.xml files. In a TILES component, the syntax of another TILES component is:
......
definition>
The value attribute of the child element specifies the name of the TILES component, the Type property is set to "definition", indicating that the value attribute is a TILES component, not a JSP file. Routines 16-18 is the code for the Tiles-Def.xml file.
(2) Create a related JSP file for Tiles components named "Sidebar-Definition".
Template files for Tiles components called "Sidebar-Definition" are Sidebar-layout.jsp, which is inserted into this template for: flags.jsp and sidebar-links.jsp. Routines 16-19, 16-20 and 16-21 are the source code for these JSP files, respectively.
In the Tiles-Def.xml file, "index-definition" and "product-definition" two TILES components still have a duplication code. The redundant code can be further eliminated using the scalable characteristics of TILES components. Solution To define a parent class tiles component that contains the common content of these two TILES components, named "Base-Definition", then let "index-definition" and "product-definition" inherit this Parent class components. Figure 16-7 shows the relationship between the improved TILES components.
Sidebar-definition
Base-definition
contain
Index-Defintion
Product-Definition
inherit
Figure 16-7 Relationship between the improved TILES components
The source program of the Tilestaglibs application described in this section is located in the Sourcecode / TileStaglibs / Version7 / TileStaglibs directory of the supporting CD. If you want to publish this app on Tomcat, just copy the entire TileStaglibs subdirectory under the Version7 directory to the / webapps directory. A TILES component inherits the syntax of another TILES component as follows, where the extends attribute of the element specifies the extended parent class tiles component:
Routines 16-22 are code for improved Tiles-Def.xml.
Traditional GUI kits, such as Java AWT and Java Swing, provide some powerful layout managers that specify the distribution location of each view component in the window. The layout manager helps create a composite complex interface, and a compound interface consists of some simple basic interfaces. Use the layout manager to create the GUI interface has the following advantages:
l Reusability: The basic interface can be reused, combined into a variety of different composite interfaces.
l Sclectability: It can be easily extended to create a more complex interface.
l Maintainability: Each basic interface is independent, and when the local area in the composite interface changes, it does not affect other areas
Unfortunately, JSP technology itself does not provide a layout or layout manager. To simplify the development of the web page, improve reusability and scalability, the Struts Tiles framework provides a template mechanism, the template defines the layout of the web page, and the same template can be shared by multiple web pages. In addition, the TILES framework also allows a reusable TILES component that can describe a complete web page or part of the web page. Simple TILES components can be combined or extended to become more complex TILES components.
This chapter is shallower to introduce several options for creating a composite web page. The TILES framework greatly improves the reusability, scalability, and maintainability of the view layer program code compared to the basic JSP language to create a web page. However, using the TILES framework also increases the difficulty and complexity of development views. If the web application size is small, the interface is very simple, you may wish to use the basic JSP language to write a web page. For large-scale complex web applications, you can use the advantages of TILES framework, and improve the efficiency of web development from the whole.