Thursday, 9 May 2013

JSP Templates


I was disappointed when I searched for a good tutorial of JSP 2.0 as part of my web application development. So I thought of writing a blog with essential features so that it may help my readers.
JSP 2.0 specification introduces many new features, including a unified expression language,  XML syntax, templates, tag files, tag extension and more. Let’s take a look at templates first.

JSP 2.0 Templates

If you are familiar with Struts-tiles or XHTML ui-composition tag, then this is just a piece of cake. You can simply add a top and bottom banner to your web page by adding a few tags to your web.xml.
  • Uses <include-prelude> to include the top banner.
  • Uses <include-coda> to include the bottom banner.
 <jsp-config>  
  <jsp-property-group>  
    <url-pattern>/extentions/*.jsp</url-pattern>  
    <include-prelude>templates/header.jsp</include-prelude>  
    <include-coda>templates/footer.jsp</include-coda>  
  </jsp-property-group>  
 </jsp-config>  

Now, lets have a jsp page which follows the url pattern.

Content.jsp

 <div>  
 <div >  
   <label for=”name” >UserName</label>  
   <input type=”text” name=”name” id=”name”/>  
 </div>  
 <div>  
   <label for=”password” >Password</label>  
   <input type=”password” name=”password” id=”password”/>  
 </div>  
 <div>  
   <input type=”submit” value=”Submit”/>  
 </div>  
 </div>  

header.jsp
 <head>  
   <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>  
   <link href=”css/mystyle.css” rel=”stylesheet” type=”text/css” media=”all” />  
   <script src=”js/myjs.js” type=”text/javascript” charset=”utf-8″></script>  
 </head>  
 <div id=”logo”>  
  <a href=”#”>MyLogo</a>  
 </div>  
 <div id=”menu”>  
   <a href=”page1.jsp”>1</a>  
   <a href=”page2.jsp”>2</a>  
 </div>  

footer.jsp


 <div id=”footer”>  
 <p>Copyright (c) 2012 Lorem Ipsum .</p>  
 </div>  
 If you make a request ”http://……../extentions/content.jsp“, the web page will look like this.  
 <head>  
   <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>  
   <link href=”css/mystyle.css” rel=”stylesheet” type=”text/css” media=”all” />  
   <script src=”js/myjs.js” type=”text/javascript” charset=”utf-8″></script>  
 </head>  
 <div id=”logo”>  
  <a href=”#”>MyLogo</a>  
 </div>  
 <div id=”menu”>  
   <a href=”page1.jsp”>1</a>  
   <a href=”page2.jsp”>2</a>  
 </div>  
 <div>  
 <div >  
   <label for=”name” >UserName</label>  
   <input type=”text” name=”name” id=”name”/>  
 </div>  
 <div>  
   <label for=”password” >Password</label>  
   <input type=”password” name=”password” id=”password”/>  
 </div>  
 <div>  
   <input type=”submit” value=”Submit”/>  
 </div>  
 </div>  
 <div id=”footer”>  
 <p>Copyright (c) 2012 Lorem Ipsum .</p>  
 </div>  
Next blog is about  expression language (EL) in JSP 2.0.

No comments:

Post a Comment