Tiles framework

xiaoxiao2021-03-06 95

Chapter 16 TILES Framework ... 2

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.

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.

Routines 16-1 INDEX.JSP

<% @ Page ContentType = "Text / HTML; Charset = UTF-8"%>

Tilestaglibs Sample </ TISTLE> </ hEAD> <body> <% - One Table Lays Out of The Content for this Page -%> <Table Width = "100%" Height = "100%"> <tr> <% - sidebar -%> <td width = "150" valign = "top" align = "left" bgcolor = "# ccffcc"> <table> <tr> <% - Sidebar Top -%> <td width = "150" height = "65" valign = "top" align = "left"> <a href=""> <img src = "chinese.gif" border = "0" /> </A> <a href=""> <img src = "usa.gif" border = "0" /> </A> </ td> </ TR> <tr> <% - Sidebar Bottom -%> <TD> links <a href="index.jsp"> Home </a> <a href="product.jsp"> Products </A> <a href=""> Hot link1 </a> <a href=""> Hot link2 </a> <a href=""> Hot link3 </a> </ td> </ TR> </ TABLE> </ td> <% - main content -%> <TD Valign = "TOP" Height = "100%" width = "*"> <Table Width = "100%" Height = "100%"> <tr> <% - header -%> <TD Valign = "TOP" Height = "15%"> Welcome to abc inc. <hr> </ td> <tr> <tr> <% - Content -%> <TD Valign = "TOP" Height = "*"> Page-Specific Content Goes Here </ td> </ TR> <TR> <% - Footer -%> <TD Valign = "Bottom" Height = "15%"> <hr> Thanks for Stopping By! </ td> </ TR> </ TABLE> </ td> </ TR> </ TABLE> </ body> </ html> Routines 16-2 Product.jsp <% @ Page ContentType = "Text / HTML; Charset = UTF-8"%> <html> <HEAD> <title> Tilestaglibs Sample </ Title> </ hEAD> <body> <% - One Table Lays Out of The Content for this Page -%> <Table Width = "100%" Height = "100%"> <tr> <% - sidebar -%> <td width = "150" valign = "top" align = "left" bgcolor = "# ccffcc"> <table> <tr> <% - Sidebar Top -%> <td width = "150" height = "65" valign = "top" align = "left"> <a href=""> <img src = "chinese.gif" border = "0" /> </A> <a href=""> <img src = "usa.gif" border = "0" /> </A> </ td> </ TR> <tr> <% - Sidebar Bottom -%> <TD> links <a href="index.jsp"> Home </a> <a href="product.jsp"> Products </A> <a href=""> Hot link1 </a> <a href=""> Hot link2 </a> <a href=""> Hot link3 </a> </ td> </ TR> </ TABLE> </ td> <% - main content -%> <TD Valign = "TOP" Height = "100%" width = "*"> <Table Width = "100%" height = "100%"> <tr> <% - header -%> <TD Valign = "TOP" Height = "15%"> Welcome to abc inc. <hr> </ td> <tr> <tr> <% - Content -%> <TD Valign = "TOP" Height = "*"> Products <Li> Product1 </ li> <li> product2 </ li> <li> product3 </ li> </ td> </ TR> <tr> <% - Footer -%> <TD Valign = "Bottom" Height = "15%"> <hr> Thanks for Stopping By! </ td> </ TR> </ TABLE> </ td> </ TR> </ TABLE> </ body> </ html> 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 <catalina_home> / 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 Welcome to abc inc. <hr> Routines 16-4 FOOTER.JSP <hr> Thanks for Stopping By! Routines 16-5 SideBar.jsp <% @ Page ContentType = "Text / HTML; Charset = UTF-8"%> <table> <tr> <% - Sidebar Top Component -%> <td width = "150" height = "65" valign = "top" align = "left"> <a href=""> <img src = "chinese.gif" border = "0" /> </A> <a href=""> <img src = "usa.gif" border = "0" /> </A> </ td> </ TR> <tr> <% - Sidebar Bottom Component -%> <TD> <table> <tr> <TD> links <a href="index.jsp"> Home </a> <a href="product.jsp"> Products </A> <a href=""> Hot link1 </a> <a href=""> Hot link2 </a> <a href=""> Hot link3 </a> </ td> </ TR> </ TABLE> </ td> </ TR> </ TABLE> Routines 16-6 indexContent.jsp Page-Specific Content Goes Here Routines 16-7 ProductContent.jsp Products <Li> Product1 </ li> <Li> Product2 </ li> <li> Product3 </ li> Routines 16-8 Index.jsp <% @ Page ContentType = "Text / HTML; Charset = UTF-8"%> <html> <HEAD> <title> Tilestaglibs Sample </ TISTLE> </ hEAD> <body> <% - One Table Lays Out of The Content for this Page -%> <Table Width = "100%" Height = "100%"> <tr> <% - Sidebar Section -%> <td width = "150" valign = "top" align = "left" bgcolor = "# ccffcc"> <jsp: include page = "sidebar.jsp" /> </ td> <% - main content section -%> <TD Height = "100%" width = "*"> <Table Width = "100%" Height = "100%"> <tr> <% - header section -%> <TD Valign = "TOP" Height = "15%"> <jsp: include page = "header.jsp" /> </ td> <tr> <tr> <% - Content Section -%> <TD Valign = "TOP" Height = "*"> <jsp: include page = "indexcontent.jsp" /> </ td> </ TR> <tr> <% - Footer Section -%> <TD Valign = "Bottom" Height = "15%"> <jsp: include page = "footer.jsp" /> </ td> </ TR> </ TABLE> </ td> </ TR> </ TABLE> </ body> </ html> Routines 16-9 Product.jsp <% @ Page ContentType = "Text / HTML; Charset = UTF-8"%> <html> <HEAD> <title> Tilestaglibs Sample </ TISTLE> </ hEAD> <body> <% - One Table Lays Out of The Content for this Page -%> <table width = "100%" height = "100%"> <TR> <% - Sidebar Section -%> <td width = "150" valign = "top" align = "left" bgcolor = "# ccffcc"> <jsp: include page = "sidebar.jsp" /> </ td> <% - main content section -%> <TD Height = "100%" width = "*"> <Table Width = "100%" Height = "100%"> <tr> <% - header section -%> <TD Valign = "TOP" Height = "15%"> <jsp: include page = "header.jsp" /> </ td> <tr> <tr> <% - Content Section -%> <TD Valign = "TOP" Height = "*"> <jsp: include page = "productcontent.jsp" /> </ td> </ TR> <tr> <% - Footer Section -%> <TD Valign = "Bottom" Height = "15%"> <jsp: include page = "footer.jsp" /> </ 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 <Tiles: Insert> tab The <tiles: Insert> 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: <jsp: include page = "indexcontent.jsp" /> <tiles: insert page = "indexcontent.jsp" Flush = "true" /> <tiles: Insert> 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 <catalina_home> / webappus directory. The following is the step of using the <Tiles: Insert> 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 <taglib> element in the web.xml file: <taglib> <taglib-uri> /web-inf/struts-tiles.tld </ taglib-uri> <taglib-location> /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 <Tiles: Insert> tag. Routines 16-10 and routines 16-11 are modified index.jsp and product.jsp files, respectively. Routine 16-10 ndex.jsp <% @ Page ContentType = "Text / HTML; Charset = UTF-8"%> <% @ Taglib Uri = "/ Web-INF / STRUTS-TILES.TLD" prefix = "tiles"%> <html> <HEAD> <title> Tilestaglibs Sample </ TISTLE> </ hEAD> <body> <% - One Table Lays Out of The Content for this Page -%> <Table Width = "100%" Height = "100%"> <TR> <% - Sidebar Section -%> <td width = "150" valign = "top" align = "left" bgcolor = "# ccffcc"> <Tiles: Insert Page = "SideBar.jsp" Flush = "true" /> </ td> <% - main content section -%> <TD Height = "100%" width = "*"> <Table Width = "100%" Height = "100%"> <tr> <% - header section -%> <TD Valign = "TOP" Height = "15%"> <tiles: INSERT Page = "Header.jsp" flush = "true" /> </ td> <tr> <tr> <% - Content Section -%> <TD Valign = "TOP" Height = "*"> <Tiles: Insert Page = "IndexContent.jsp" Flush = "true" /> </ td> </ TR> <tr> <% - Footer Section -%> <TD Valign = "Bottom" Height = "15%"> <Tiles: Insert Page = "Footer.jsp" Flush = "true" /> </ td> </ TR> </ TABLE> </ td> </ TR> </ TABLE> </ body> </ html> Routines 16-11 Product.jsp <% @ Page ContentType = "Text / HTML; Charset = UTF-8"%> <% @ Taglib Uri = "/ Web-INF / STRUTS-TILES.TLD" prefix = "tiles"%> <html> <HEAD> <title> Tilestaglibs Sample </ TISTLE> </ hEAD> <body> <% - One Table Lays Out of The Content for this Page -%> <Table Width = "100%" Height = "100%"> <tr> <% - Sidebar Section -%> <td width = "150" valign = "top" align = "left" bgcolor = "# ccffcc"> <Tiles: Insert Page = "SideBar.jsp" Flush = "true" /> </ td> <% - main content section -%> <TD Height = "100%" width = "*"> <Table Width = "100%" Height = "100%"> <tr> <% - header section -%> <TD Valign = "TOP" Height = "15%"> <tiles: INSERT Page = "Header.jsp" flush = "true" /> </ td> <tr> <tr> <% - Content Section -%> <TD Valign = "TOP" Height = "*"> <Tiles: Insert Page = "ProductContent.jsp" Flush = "true" /> </ td> </ TR> <tr> <% - Footer Section -%> <TD Valign = "Bottom" Height = "15%"> <Tiles: Insert Page = "Footer.jsp" Flush = "true" /> </ 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 <Tiles: INSERT> 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 <Tiles: Insert> 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 <Tiles: Insert> 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 <catalina_home> / 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 <taglib> element in the web.xml file, step 2 of 16.3. (3) Define the template file, see routines 16-12. Routines 16-12 Layout.jsp <% @ Page ContentType = "Text / HTML; Charset = UTF-8"%> <% @ Taglib Uri = "/ Web-INF / STRUTS-TILES.TLD" prefix = "tiles"%> <html> <HEAD> <title> Tilestaglibs Sample </ TISTLE> </ hEAD> <body> <% - One Table Lays Out All of the Content -%> <Table Width = "100%" Height = "100%"> <% - Sidebar Section -%> <tr> <td width = "150" valign = "top" align = "left" bgcolor = "# ccffcc"> <tiles: insert attribute = "sidebar" /> </ td> <% - main content section -%> <TD Valign = "TOP" Height = "100%" width = "*"> <Table Width = "100%" Height = "100%"> <tr> <% - header section -%> <TD Height = "15%"> <tiles: insert attribute = "header" /> </ td> <tr> <tr> <% - Content Section -%> <TD Valign = "TOP" Height = "*"> <Tiles: Insert Attribute = "Content" /> </ td> </ TR> <tr> <% - Footer Section -%> <TD Valign = "Bottom" Height = "15%"> <tiles: insert attribute = "footer" /> </ td> </ TR> </ TABLE> </ td> </ TR> </ TABLE> </ body> </ html> 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 <tiles: INSERT> 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. Routines 16-13 Index.jsp <% @ Page ContentType = "Text / HTML; Charset = UTF-8"%> <% @ Taglib Uri = "/ Web-INF / STRUTS-TILES.TLD" prefix = "tiles"%> <tiles: INSERT Page = "Layout.jsp" Flush = "True"> <tiles: put name = "sidebar" value = "sidebar.jsp" /> <tiles: put name = "header" value = "Header.jsp" /> <Tiles: Put name = "content" value = "indexcontent.jsp" /> <Tiles: Put Name = "Footer" Value = "Footer.jsp" /> </ tiles: insert> Routines 16-14 Product.jsp <% @ Page ContentType = "Text / HTML; Charset = UTF-8"%> <% @ Taglib Uri = "/ Web-INF / STRUTS-TILES.TLD" prefix = "tiles"%> <tiles: INSERT Page = "Layout.jsp" Flush = "True"> <tiles: put name = "sidebar" value = "sidebar.jsp" /> <tiles: put name = "header" value = "Header.jsp" /> <tiles: put name = "content" value = "productcontent.jsp" /> <Tiles: Put Name = "Footer" Value = "Footer.jsp" /> </ tiles: insert> In Index.jsp and Product.jsp, the <tiles: Insert> tab specifies the inserted template file, index.jsp, and product.jsp use the same template file Layout.jsp. The <tiles: Insert> tag contains several <Tiles: PUT> sub-tags, which specifies the specific content inserted into the template. <Tiles: PUT> Name Properties and Template Files in the Template File, the attribute property matching, the value of the <tiles: Put> 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: <Tiles-Definitions> <definition name = "index-definition" Path = "/ layout.jsp"> <put name = "sidebar" value = "sidebar.jsp" /> <put name = "header" value = "Header.jsp" /> <Put Name = "Content" value = "indexcontent.jsp" /> <Put Name = "Footer" Value = "Footer.jsp" /> </ definition> </ tiles-definitions> <Definition> Element Name Properties Specifies the name of the Tiles component, the Path property specifies the template used by the Tiles component, <PUT> sub-elements of the <definition> 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 <catalina_home> / 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 <taglib> 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. Routines 16-15 TILES-Defs.xml <? Xml Version = "1.0" encoding = "ISO-8859-1"?> DOCTYPE TILES-Definitions PUBLIC "- // Apache Software Foundation // DTD TILES Configuration 1.1 // en" "http://jakarta.apache.org/struts/dtds/tiles-config_1_1.dtd"> <Tiles-Definitions> <definition name = "index-definition" Path = "/ layout.jsp"> <put name = "sidebar" value = "sidebar.jsp" /> <put name = "header" value = "Header.jsp" /> <Put Name = "Content" value = "indexcontent.jsp" /> <Put Name = "Footer" Value = "Footer.jsp" /> </ definition> <definition name = "product-definition" Path = "/ layout.jsp"> <put name = "sidebar" value = "sidebar.jsp" /> <put name = "header" value = "Header.jsp" /> <put name = "content" value = "productcontent.jsp" /> <Put Name = "Footer" Value = "Footer.jsp" /> </ definition> </ tiles-definitions> 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 classname = "org.apache.struts.tiles.tilesplugin"> <set-protety proty = "definitions-config" value = "/ web-inf / tiles-defs.xml" /> <set-protety property = "definitions-parser-validate" value = "true" /> </ plug-in> The TILESPLUGIN plug-in is used to load the TILES component configuration file. In the <plug-in> element contains several <set-print> 子子, 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: <servlet> <servlet-name> Action </ servlet-name> <servlet-class> org.apache.struts.Action.ActionServlet </ servlet-class> <init-param> <param-name> config </ param-name> <param-value> /web-inf/struts-config.xml </ param-value> </ init-param> <load-on-startup> 3 </ load-on-startup> </ servlet> <servlet-mapping> <servlet-name> Action </ servlet-name> <url-pattern> *. do </ url-pattern> </ servlet-maping> (6) Insert TILES components in Index.JSP and Product.jsp, see routines 16-16 and routines 16-17: Routine 16-16 index.jsp <% @ Page ContentType = "Text / HTML; Charset = UTF-8"%> <% @ Taglib Uri = "/ Web-INF / STRUTS-TILES.TLD" prefix = "tiles"%> <Tiles: Insert Definition = "Index-Definition" /> Routines 16-17 Product.jsp <% @ Page ContentType = "Text / HTML; Charset = UTF-8"%> <% @ Taglib Uri = "/ Web-INF / STRUTS-TILES.TLD" prefix = "tiles"%> <tiles: insert definition = "product-definition" /> 16.5.2 Call TILES components via struts action 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: <action-mappings> <action path = "/ index" 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 <catalina_home> / 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 name = "index-definition" Path = "/ layout.jsp"> <put name = "sidebar" value = "sidebar-definition" type = "definition" /> ...... </ definition> The value attribute of the <PUT> 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. Routines 16-18 TILES-DEF.XML <? Xml Version = "1.0" encoding = "ISO-8859-1"?> DOCTYPE TILES-Definitions PUBLIC "- // Apache Software Foundation // DTD TILES Configuration // En" "http://jakarta.apache.org/struts/dtds/tiles-config.dtd"> <Tiles-Definitions> <definition name = "sidebar-definition" path = "/ sidebar-layout.jsp"> <put name = "TOP" value = "flags.jsp" /> <put name = "bottom" value = "sidebar-links.jsp" /> </ definition> <definition name = "index-definition" Path = "/ layout.jsp"> <put name = "sidebar" value = "sidebar-definition" type = "definition" /> <put name = "header" value = "Header.jsp" /> <Put Name = "Content" value = "indexcontent.jsp" /> <Put Name = "Footer" Value = "Footer.jsp" /> </ definition> <definition name = "product-definition" Path = "/ layout.jsp"> <put name = "sidebar" value = "sidebar-definition" type = "definition" /> <put name = "header" value = "Header.jsp" /> <put name = "content" value = "productcontent.jsp" /> <Put Name = "Footer" Value = "Footer.jsp" /> </ definition> </ tiles-definitions> (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. Roller 16-19 Sidebar-layout.jsp <% @ Page ContentType = "Text / HTML; Charset = UTF-8"%> <% @ Taglib Uri = "/ Web-INF / STRUTS-TILES.TLD" prefix = "tiles"%> <table> <tr> <% - Sidebar Top Component -%> <Tiles: Insert Attribute = "TOP" /> </ TR> <tr> <% - Sidebar Bottom Component -%> <Tiles: Insert Attribute = "Bottom" /> </ TR> </ TABLE> Routines 16-20 Sidebar-Links.jsp <% - Sidebar Bottom Component -%> <TD> <table> <tr> <TD> links <a href="index.jsp"> Home </a> <a href="product.jsp"> Products </A> <a href=""> Hot link1 </a> <a href=""> Hot link2 </a> <a href=""> Hot link3 </a> </ td> </ TR> </ TABLE> </ td> Routines 16-21 Flags.jsp <% - Sidebar Top Component -%> <td width = "150" height = "65" valign = "top" align = "left"> <a href=""> <img src = "chinese.gif" border = "0" /> </A> <a href=""> <img src = "usa.gif" border = "0" /> </A> </ td> 16.5.4 TILES components extension in 16.5.3 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 <catalina_home> / webapps directory. A TILES component inherits the syntax of another TILES component as follows, where the extends attribute of the <definition> element specifies the extended parent class tiles component: <definition name = "index-definition" extends = "base-definition"> Routines 16-22 are code for improved Tiles-Def.xml. RRR 16-22 TILES-DEF.XML <? Xml Version = "1.0" encoding = "ISO-8859-1"?> DOCTYPE TILES-Definitions PUBLIC "- // Apache Software Foundation // DTD TILES Configuration 1.1 // en" "http://jakarta.apache.org/struts/dtds/tiles-config_1_1.dtd"> <Tiles-Definitions> <definition name = "sidebar-definition" path = "/ sidebar-layout.jsp"> <put name = "TOP" value = "flags.jsp" /> <put name = "bottom" value = "sidebar-links.jsp" /> </ definition> <definition name = "base-definition" Path = "/ layout.jsp"> <put name = "sidebar" value = "sidebar-definition" type = "definition" /> <put name = "header" value = "Header.jsp" /> <Put Name = "Content" Value = "" /> <Put Name = "Footer" Value = "Footer.jsp" /> </ definition> <definition name = "index-definition" extends = "base-definition"> <Put Name = "Content" value = "indexcontent.jsp" /> </ definition> <definition name = "product-definition" extends = "base-definition"> <put name = "content" value = "ProductContent.jsp" /> </ definition> </ tiles-definitions> 16.6 Section 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.</div><div class="text-center mt-3 text-grey"> 转载请注明原文地址:https://www.9cbs.com/read-123887.html</div><div class="plugin d-flex justify-content-center mt-3"></div><hr><div class="row"><div class="col-lg-12 text-muted mt-2"><h2 class="h6 mb-0 small"><a class="text-secondary" href="tag-2.html">9cbs</a></h2></div></div></div></div><div class="card card-postlist border-white shadow"><div class="card-body"><div class="card-title"><div class="d-flex justify-content-between"><div>New Post(0) </div><div></div></div></div><ul class="postlist list-unstyled"> </ul></div></div><div class="d-none threadlist"><input type="checkbox" name="modtid" value="123887" checked /></div></div></div></div></div><footer class="text-muted small bg-dark py-4 mt-3" id="footer"><div class="container"><div class="row"><div class="col">CopyRight © 2020 All Rights Reserved </div><div class="col text-right">Processed: 0.054, SQL: 9</div></div></div></footer><script src="./lang/en-us/lang.js?2.2.0"></script><script src="view/js/jquery.min.js?2.2.0"></script><script src="view/js/popper.min.js?2.2.0"></script><script src="view/js/bootstrap.min.js?2.2.0"></script><script src="view/js/xiuno.js?2.2.0"></script><script src="view/js/bootstrap-plugin.js?2.2.0"></script><script src="view/js/async.min.js?2.2.0"></script><script src="view/js/form.js?2.2.0"></script><script> var debug = DEBUG = 0; var url_rewrite_on = 1; var url_path = './'; var forumarr = {"1":"Tech"}; var fid = 1; var uid = 0; var gid = 0; xn.options.water_image_url = 'view/img/water-small.png'; </script><script src="view/js/wellcms.js?2.2.0"></script><a class="scroll-to-top rounded" href="javascript:void(0);"></a><a class="scroll-to-bottom rounded" href="javascript:void(0);" style="display: inline;"></a></body></html><script> var forum_url = 'list-1.html'; var safe_token = 'GqF36Ry_2BSJ_2F56gkvJa23QkmwmqUUBip_2FuztdiuoBrPY8pFeJQzf1iNiAy9Ljg9wAodwgMWFL6hmLeMc2BAobNg_3D_3D'; var body = $('body'); body.on('submit', '#form', function() { var jthis = $(this); var jsubmit = jthis.find('#submit'); jthis.reset(); jsubmit.button('loading'); var postdata = jthis.serializeObject(); $.xpost(jthis.attr('action'), postdata, function(code, message) { if(code == 0) { location.reload(); } else { $.alert(message); jsubmit.button('reset'); } }); return false; }); function resize_image() { var jmessagelist = $('div.message'); var first_width = jmessagelist.width(); jmessagelist.each(function() { var jdiv = $(this); var maxwidth = jdiv.attr('isfirst') ? first_width : jdiv.width(); var jmessage_width = Math.min(jdiv.width(), maxwidth); jdiv.find('img, embed, iframe, video').each(function() { var jimg = $(this); var img_width = this.org_width; var img_height = this.org_height; if(!img_width) { var img_width = jimg.attr('width'); var img_height = jimg.attr('height'); this.org_width = img_width; this.org_height = img_height; } if(img_width > jmessage_width) { if(this.tagName == 'IMG') { jimg.width(jmessage_width); jimg.css('height', 'auto'); jimg.css('cursor', 'pointer'); jimg.on('click', function() { }); } else { jimg.width(jmessage_width); var height = (img_height / img_width) * jimg.width(); jimg.height(height); } } }); }); } function resize_table() { $('div.message').each(function() { var jdiv = $(this); jdiv.find('table').addClass('table').wrap('<div class="table-responsive"></div>'); }); } $(function() { resize_image(); resize_table(); $(window).on('resize', resize_image); }); var jmessage = $('#message'); jmessage.on('focus', function() {if(jmessage.t) { clearTimeout(jmessage.t); jmessage.t = null; } jmessage.css('height', '6rem'); }); jmessage.on('blur', function() {jmessage.t = setTimeout(function() { jmessage.css('height', '2.5rem');}, 1000); }); $('#nav li[data-active="fid-1"]').addClass('active'); </script>