Project Confucius: Tiles

Our UI consists of 3 JSPs - HelloWorld.jsp, Confirm.jsp and Error.jsp

What if we wanted a consistent layout for this, with a standard header, footer, styles, etc

What if we eventually have 100s of JSPs, which all need a consistent look and feel?

Enter Tiles.

Tiles is a layout framework which allows you to "dismantle" your UI into multiple little pieces - say a header, a footer, a copyright, a layout, etc

You can then build your JSPs by combining these pieces.

The nice thing is Tiles comes already bundled with Struts, so we can use it immediately. All we need to do is include the tiles TLD in the JSP, like this:

 <%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles" %>

Let us now dismantle our UI to use tiles.

In your /web-content/jsp folder, create a header.jsp.
It contains a single line, like this:

 <h1>Welcome to HelloWorld</h1>

In your /web-content/jsp folder, create a footer.jsp.
It contains a single line, like this:

 <i>Copyright 2012 Project Confucius</i>

In your /web-content/jsp folder, create a layout.jsp. It pulls in the header and footer, like this;

 <%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles" %>      
 <tiles:insert page="header.jsp"/>  
 <br/>  
 <tiles:insert attribute="body"/>  
 <br/>  
 <hr>  
 <tiles:insert page="footer.jsp"/>

Now, let us dismantle HelloWorld.jsp.

In your /web-content/jsp folder, create a registerForm.jsp.
It contains the Form, like this:

 <form method=post action="/HelloWorld/register.do">   
        First Name: <input type=text name=firstName>   
        <br/>   
       Last Name: <input type=text name=lastName>   
        <br/>   
        <input type=submit value="Register">   
 </form>

Now, update HelloWorld.jsp to use the layout, like this:

 <html>    
        <head>    
           <%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles" %>      
      </head>    
        <body>    
           <tiles:insert page="layout.jsp">  
                 <tiles:put name="body"  value="registerForm.jsp" />  
           </tiles:insert>  
   </body>    
  </html>

Now, let us dismantle Confirm.jsp.

In your /web-content/jsp folder, create a ConfirmMessage.jsp.
It contains the confirmation message, like this:

 <%@taglib uri="http://struts.apache.org/tags-bean" prefix="bean"%>  
   
 Confirmation: Registration accepted for <bean:write name="helloWorldForm" property="firstName"/> <bean:write name="helloWorldForm" property="lastName"/>

Now update Confirm.jsp to use the layout, like this:

 <html>    
        <head>    
           <%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles" %>      
      </head>    
        <body>    
           <tiles:insert page="layout.jsp">  
                 <tiles:put name="body"  value="ConfirmMessage.jsp" />  
           </tiles:insert>  
   </body>    
  </html>

Now, let us dismantle Error.jsp

In your /web-content/jsp folder, create a ErrorMessage.jsp.
It contains the error message, like this:

 Error! You entered names with numbers in them.

Now update your Error.jsp to use the layout, like this:

 <html>    
        <head>    
           <%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles" %>      
      </head>    
        <body>    
           <tiles:insert page="layout.jsp">  
                 <tiles:put name="body"  value="ErrorMessage.jsp" />  
           </tiles:insert>  
   </body>    
 </html>

If you now build and deploy HelloWorld.war, and point your browser to:
http://localhost:8080/HelloWorld/jsp/HelloWorld.jsp

you will see that all the pages have a consistent header, footer and layout.

Tiles helps you create a consistent look and feel to all your pages.
It also helps keep individual JSPs small and easy to maintain.

Project Confucius

Thursday, February 2, 2012

Tiles

No comments: