Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Working with Struts application using Tiles

This article will help you to understand what is Struts Tiles and why do we use it and also how to write an application using struts tiles.

Struts Tiles is a template management system that is used to create and manage web application templates by using struts framework libraries. Tiles can be used using struts and without using struts. The newer version of tiles (Tiles2) is used without using struts framework to create web application templates that helps the web application theme and contents to be managed easily.

Shows the separation of contents in web application using Struts Tiles

Figure 1: Shows the separation of contents in web application using Struts Tiles

Above figure shows contents of a web application manages by tiles, where application contents are spited as Web Application Header, Left Content, Middle Content, Right Content, and Web Application Footer modules. These modules are summarized in a single module using struts tile, while these are managed independently.

Struts Tiles in Details

There are three ways to define tile:

  • Using Tile insert tag inside the JSP Page.
  • By Defining a Tiles definition tag inside the JSP Page.
  • By Defining a Tile in XML file and load it from a factory using Tiles insert tag.

We will have a look on all these mechanism in this article to create a web application using tiles.

  • Step 1: Create a layout.jsp file for our web application that will web application template schema or structure.
  • Step 2: Use insert Tiles insert tag to include
  • Step 3: Configure struts.xml file
  • Step 4: Configure tiles.xml file
  • Step 5: Configure web.xml file

Listing 1: struts.xml (Writing Struts Configuration file)

<?xml version=”1.0” encoding=”UTF-8”?>

<!DOCTYPE struts PUBLIC
“-//Apache Software Foundation//DTD Struts Configuration 2.0//EN”
"http://struts.apache.org/dtds/struts-2.0.dtd">

<struts>
<package name="default" extends="struts-default">
	<result-types>
		<result-type name="tiles" class="org.apache.struts2.views.tiles.TilesResult" />
	</result-types>
	<default-action-ref name="index" />
	<action name="index" class = "com.ajo.actions.Dashboard" method = "getDashboard">
              	<result name="success" type="tiles">layout</result>
             </action>
	<action name="login" class = "com.ajo.actions.Login" method = "">
		<result name = "input" type = "tiles">input</result>
		<result name="success" type="tiles">success</result>
		<result name="error" type="tiles">error</result>
	</action>
	</package>
</struts>

The above code table defines the struts configuration xml file that has first tag is the Document type descriptor. The next and the root tag is <struts> tag having the packages description using its sub-tag <package>.

There is a one package defined in this configuration file, which is the default package. The <package> tag contains sub-tag <result-type> that has the specification of tiles configuration xml file. The next sub-tag is <default-action-ref> that loads the default action on startup and <action> and its sub-tags. The <action> tag define the action to be performed on request. The performed action is decided on result-type using <result> tag.

Listing 2: tiles.xml (Writing tiles configuration file)

<?xml version=”1.0” encoding=”UTF-8” ?>

<!DOCTYPE tiles-definitions PUBLIC
       "-//Apache Software Foundation//DTD Tiles Configuration 2.0//EN"
       "http://tiles.apache.org/dtds/tiles-config_2_0.dtd">
<tiles-definitions>
  <definition name="layout" template="/jsp/theme/layout.jsp">   
      <put-attribute name="header" 		value="/jsp/theme/header.jsp"/>   
      <put-attribute name="topMenu"   	value="/jsp/theme/topMenu.jsp"/>
      <put-attribute name="body"   		value="/jsp/theme/body.jsp"/>
      <put-attribute name="rightMenu"   value="/jsp/theme/rightMenu.jsp"/>
      <put-attribute name="footer"   	value="/jsp/theme/footer.jsp"/>
  </definition>  
   <definition name="journals" extends = "layout">
  		<put-attribute name = "journalsIndex" value = "/jsp/journals/index.jsp" />
   </definition>
</tiles-definitions>

This file defines the tile configuration of the struts application template. The first tag of this file is <!DOCTYPE> that is the document type descriptor. The next root tag is <tiles-definitions> that defines the tiles configuration using its sub-tags. The tag <definition> is the sub-tag of <tiles-definition> defines the theme jsp file specification, in which the tile structure is being created. The structure is created using the sub-tag <put> of <definition> tag that describes the jsp file to be used as tile in the specified jsp file of the <definition> tag.

Listing 3: web.xml (Writing deployment descriptor file for web application)

<?xml version=”1.0” encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
  <context-param>
    <param-name>org.apache.tiles.impl.BasicTilesContainer.DEFINITIONS_CONFIG</param-name>
    <param-value>/WEB-INF/tiles.xml</param-value>
  </context-param>
  <listener>
    <listener-class>org.apache.struts2.tiles.StrutsTilesListener</listener-class>
  </listener>
  <filter>
    <filter-name>struts2</filter-name>
    <filter-class>org.apache.struts2.dispatcher.FilterDispatcher</filter-class>
  </filter>
  <filter-mapping>
    <filter-name>struts2</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>

The web.xml configuration file is web application descriptor file, that handles the flow of control and passes all requests coming from the clients to struts.xml configuration file using tag <filter> tag. The root tag of this file is <web-app> contains the sub-tags <filter> <context-param> and <listener>. The <listener> tag is used to enable the functionality of tile configuration in this application.

Listing 4: layout.jsp (Writing a layout file for web application template)

<%@ taglib uri=”http://tiles.apache.org/tags-tiles" prefix="tiles" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
        
<html dir="ltr" lang="en-US"><head><!-- Created by Artisteer v4.0.0.58475 -->
    <meta charset="utf-8">
    <title>New Page</title>
    <meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width = device-width"> 
<meta name="description" content="Description">
<meta name="keywords" content="Keywords">
</head>
<body>
<table>
            <tr>
                 <td colspan = ‘2’><tiles:insertAttribute name="header" /></td>
                 <td colspan = ‘2’><tiles:insertAttribute name="topMenu" /></td>
           </tr>
           <tr>
                 <td><tiles:insertAttribute name="content" /></td>
                 <td><tiles:insertAttribute name="rightMenu" /></td>
           </tr>
           <tr>
                 <td colspan = ‘3’><tiles:insertAttribute name="footer" /></td>
           </tr>
</table>
</body>
</html>

The above code defines the layout.jsp file and accepts 5 other jsp files as tiles of this layout file. To access tiles into the jsp page, tag name <tiles:insertAttribute name = “<tiles-name>” /> is used.

Listing 5: header.jsp (Header module of the web application is written in this page)

<%@ page language=”java” contentType=”text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<header class="art-header clearfix">
    <div class="art-shapes">
<h1 class="art-headline" data-left="36.43%">
    <a href="#">Academic Journals Online</a>
</h1>
<h2 class="art-slogan" data-left="17.24%">Effective Solution for Journals & Education</h2>

<div class="art-object1558980007" data-left="1.15%"></div>

            </div>
<div class="art-textblock art-object1568157223" data-left="96.98%">
    <form class="art-search" name="Search" action="javascript:void(0)">
    <input type="text" value="">
    <input type="submit" value="Search" name="search" class="art-search-button">
</form>
</div>
</header>

The above table defines the contents for the jsp file header.jsp that will be displayed in the header tile area of the layout.jsp.

Listing 6: topMenu.jsp (Top menu of the website designed in page)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<nav class="art-nav clearfix">
    <div class="art-nav-inner">
<a href="" class="active">Home</a>  |  
    <a href="">Contacts</a>
        </div>
</nav>

The above table defines the contents for the jsp file topMenu.jsp that will be displayed in the topMenu tile area of the layout.jsp.

Listing 7: rightMenu.jsp (Right Menu or Contents are designed in this page)

<%@ page language=”java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<div class="art-block clearfix">
        <div class="art-blockheader">
            <h3 class="t">Connect And Share</h3>
        </div>
        <div class="art-blockcontent"><p style="text-align: center;"><img width="45" height="45" alt="" src="./images/rss.jpg" class="">   <img width="45" height="45" alt="" src="./images/facebook.jpg" class="">    <img width="45" height="45" alt="" src="./images/twitter.jpg"></p></div>
</div><div class="art-block clearfix">
        <div class="art-blockheader">
            <h3 class="t">Login</h3>
        </div>
        <div class="art-blockcontent"><p style="text-align: left;">Username : <input type="text" name="username"><br>
Password : <input type="password" name="password"></p>
<p style="text-align:center;"><input type="submit" value="Login"></p></div>
</div><div class="art-block clearfix">
        <div class="art-blockheader">
            <h3 class="t">Getting Started</h3>
        </div>
        <div class="art-blockcontent"><ul>
<li><a href="#">Effective To-Do Lists</a></li>
<li><a href="#">80/20 Rule</a></li>
<li><a href="#">Setting Priorities</a></li>
<li><a href="#">Effective Filing</a></li>
<li><a href="#">Inflow Management</a></li>
<li><a href="#">Time Charts</a></li>
</ul></div>
</div><div class="art-block clearfix">
        <div class="art-blockheader">
            <h3 class="t">On-Line Consultation</h3>
        </div>
        <div class="art-blockcontent"><p style="text-align:center;"><img width="170" height="170" alt="" src="./images/blockimage2.jpg" class=""></p>
<p style="text-align:center;"><a href="#">Start chat »</a></p></div>
</div>

The above table defines the contents for the jsp file rightMenu.jsp that will be displayed in the rightMenu tile area of the layout.jsp.

Listing 8: body.jsp (The main contents of the page will be listed in this page)

<%@ page language=”java” contentType=”text/html; charset=UTF-8”
    pageEncoding="UTF-8"%>
<article class="art-post art-article">
	<div class="art-postcontent art-postcontent-0 clearfix"><div class="art-content-layout">
    <div class="art-content-layout-row">
    <div class="art-layout-cell layout-item-0" style="width: 100%" >
        <h3>Important Basics</h3>
        <div style="border-top: 1px solid #FFFFFF; border-bottom: 1px solid #C6C1BB; height: 0px"></div>
        <p style="float: left; margin-right: 30px"><img width="280" height="210" alt="" src="./images/content-image04.jpg" class=""><br>
        <br></p>
        <br>
        <br>
        <p align="left">         </p>
        <h3><br></h3>
        <div style="border-top: 1px solid #FFFFFF; border-bottom: 1px solid #C6C1BB; height: 0px"></div>
        <p><span class="style13" style="font-weight: bold; font-size: 24px; color: #000000;">About Us</span></p>
        <p><span class="style13">Welcome to tiles!</span></p>
        <div align="justify"><br>
       <br></div>
        <p style="text-align: right;"><a href="#" class="art-button">Learn more</a></p>
    </div>
    </div>
</div>
<div class="art-content-layout layout-item-1">
    <div class="art-content-layout-row">
    <div class="art-layout-cell layout-item-2" style="width: 33%" >
        <h4>Working In Time</h4>
        <p><img width="186" height="170" alt="" src="./images/content-image01.jpg" class=""></p>
    </div><div class="art-layout-cell layout-item-0" style="width: 34%" >
        <h4>Education In Time</h4>
        <p><img width="186" height="170" alt="" src="./images/content-image02.jpg" class=""></p>
    </div><div class="art-layout-cell layout-item-0" style="width: 33%" >
        <h4>Resting In Time</h4>
        <p><img width="186" height="170" alt="" src="./images/content-image03.jpg" class=""></p>
    </div>
    </div>
</div>
<div class="art-content-layout layout-item-3">
    <div class="art-content-layout-row">
    <div class="art-layout-cell layout-item-0" style="width: 100%" >
        <div style="border-top: 1px solid #FFFFFF; border-bottom: 1px solid #C6C1BB; height: 0px"></div>
   This is test.
 <p><a href="#" class="art-button">Learn more</a></p>
    </div>
    </div>
</div>
</div>                          
</article>

The above table defines the contents for the jsp file content.jsp that will be displayed in the content tile area of the layout.jsp.

Listing 9: footer.jsp (Footer of the web application)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<footer class="art-footer clearfix">
<div class="art-content-layout">
    <div class="art-content-layout-row">
    <div class="art-layout-cell layout-item-0" style="width: 100%">
        <p style="text-align:center"><a href="#" class="art-rss-tag-icon" style="line-height: 38px;">RSS</a>  <span style="display:inline-block;text-align:left;margin-left:10px;"><a href="#">About us</a> | <a href="#">Programms</a> | <a href="#">Contacts</a><br> 
</span></p>
    </div>
    </div>
</div>
</footer>

The above table defines the contents for the jsp file footer.jsp that will be displayed in the footer tile area of the layout.jsp.

Shows struts tile template layout structure by above written code

Figure 2: Shows struts tile template layout structure by above written code

Required Jar Files:

These are the jar files that are required to run this application struts tile application.

Struts Jar Files to run this example

Figure 3: Struts Jar Files to run this example

strutsTiles Direcotry structure in Eclipse IDE

Figure 4: strutsTiles Direcotry structure in Eclipse IDE

The above figure shows the directory structure of the application in Eclipse IDE.

Tools Used:

  • Tomcat Apache Server
  • Eclipse IDE
  • JDK Environment
Application run on server, looks like as shown in image

Figure 5: Application run on server, looks like as shown in image

Conclusion:

In this article, we learned about:

  • What are tiles and their types?
  • How to write a web application using tiles?


Have more than 5 years experience about Java, .Net, C and C++.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login