Create a Tile Layout


Lets us start with an example.

We have two web pages say dog.jsp and cat.jsp

A JSP dog.jsp

<html>
  <body>Header
  <p>Some description and pictures of dogs
  <p>Footer <p>
  </body>
</html>

Another JSP called cat.jsp

<html>
  <body>Header
  <p>Some description and pictures of cats
  <p>Footer <p>
  </body>
</html>


First thing you have to find the similarities and common between pages. Then you should create a new layout page

Create two new content pages that contain just the differences between dog.jsp and cat.jsp.

Insert the tile layout in the page -- that is, have dog.jsp and cat.jsp insert the tile layout into their page, passing the content as a parameter and any other necessary parameters (like Title).

We create newlayout page with the similarities between the dog.jsp and cat.jsp pages

To create a tile layout, you must do the following:

Import the tiles taglib into the JSP and any other taglibs you need with the taglib
directive.
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>

Use string parameters to display things like the page title using the tiles:getAsString tag. We can use string parameters to display things like the page title. You not only want to change the page's content, you also want to change the title that appears in thebrowser. To do so, pass in a title that the tile layout will use:

<html>
  <head>Header
  <title>
<tiles:getAsString name="title" ignore="true"/>
  </head>
</html>

Use the tiles:getAsString tag to display string parameters. We can not only pass string parameters but also we can pass other pages to be inserted into this page. That assumes the calling JSP page passes a title to this tile layout; otherwise, the title will be blank. The ignore attribute, if true, means ignore the attribute if missing. Otherwise, If ignore is false, the tiles framework will throw an exception and the page will not display if the parameter does not pass (false is the default).

Insert the tiles in the correct regions of the layout using the tiles:insert tag. To insert the content JSP, use the tiles:insert tag, which inserts any page or Web resource that the framework refers to as a tile. The tag effectively defines a region in the tile layout. Remember, the objective of the tile layout is to lay out the tiles into the layout. Here is an example of inserting a tile into the layout:

<tiles:insert attribute="content"/>

The example above is really simple. What if you want to insert a tile and pass it items in the current page scope? For example, it's possible to pass the title parameter (in tile scope) to header.jsp with the Tiles framework.

Pass any needed parameters to the internal tiles using tiles:put -- a subtag of
tiles:insert. We can pass the tile parameters while we insert a tile. The parameter passes has the tile scope.

To use the tiles taglib, don't forget to include the tag library in your web.xml file:

<taglib>
<taglib-uri>/WEB-INF/struts-tiles.tld</taglib-uri>
<taglib-location>/WEB-INF/struts-tiles.tld
</taglib-location>
</taglib>


complete code for the layout layout.jsp

<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
<html>
  <head>
    <title>
    <tiles:getAsString name="title" ignore="true"/>
</title>
  </head>
  <body>
    <table >
      <tr>
        <td>
          <tiles:insert attribute="header" ignore="true">
<tiles:put name="title" beanName="title" beanScope="tile"/>
</tiles:insert>
        </td>
      </tr>
    <tr>
<td>

</td>
</tr>
</table>
      <tr>
        <td>
          <div align="center">
<tiles:insert attribute="content"/>
</div>
        </td>
      </tr>
      <tr>
        <td>
          <tiles:insert attribute="footer" ignore="true"/>
        </td>
      </tr>
  <body>
</html>

In the next section Use a Tile layout,we will see how to use this layout.

Tiles tutorial
Introduction to Tiles
Web Page Layouts
JSP pages with embedded HTML
JSP pages with JSP include directive's (static) or JSP actions (dynamic)
JSP templates
Tiles
Layouts
Classic layout
Menu layout
Vertical box or vbox or vstack layout layout
Multi-columns layout
Center layout
Tabs layout
Installing Tiles
For Struts1.0
For Struts1.1
For Tiles stand alone
Configuring Tiles
Internationalizing Tiles
Create a Tile Layout
Use a Tile Layout
Create a Tile Definition
Use a Tile Definition

Use of this website constitutes acceptance of the AllAppLabs.com Terms and Conditions