Showing posts with label TILES. Show all posts
Showing posts with label TILES. Show all posts

Thursday, July 7, 2011

SPRING - Tiles View with Spring Example

This example shows how to use to tiles view with Spring. This example assumes that you have defined the following JSPs for the layout. These JSPs can be simple onces with just "Hello World" on it.
  • Header.jsp
  • Menu.jsp
  • Content.jsp
  • Sidebar.jsp
  • Footer.jsp
1. Define the Template.jsp to design the layout of the application. 
<!-- 
      The Tag Lib That includes the Tiles custom tags.
-->
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">


<!-- 
      tiles:getAsString is used to replace this tile with a string value. This is used to change the title of the web page according to the contents.
-->
<title><tiles:getAsString name="title" /></title>


<link rel="stylesheet" type="text/css"
href="/SpacingLO/css/Layout.css">
<link rel="stylesheet" type="text/css"
href="/SpacingLO/css/StatusTray.css">
<link rel="stylesheet" type="text/css"
href="/SpacingLO/css/Header.css">
<link rel="stylesheet" type="text/css"
href="/SpacingLO/css/Menu.css">
<link rel="stylesheet" type="text/css"
href="/SpacingLO/css/Footer.css">
</head>


<body>
<div id="mainContainer">


<!-- 
      tiles:insertAttribute is used to insert a JSP (HTML) page at that tile location. These tiles can be customized in tiles-definition.xml that is explained in the next section to display different contents based on the web page that has to get displayed.
-->
<div id="statusTray"><tiles:insertAttribute name="statusTray" /></div>


<div id="header"><tiles:insertAttribute name="header" /></div>


<div id="body">
<div id="layer1">
<div id="layer2">
<div id="layer3">
<div id="menuContainer"><tiles:insertAttribute name="menu" /></div>
<div id="contentContainer"><tiles:insertAttribute name="content" /></div>
<div id="sidebarContainer"><tiles:insertAttribute name="sidebar" /></div>
</div>
</div>
</div>
</div>
<div id="footer"><tiles:insertAttribute name="footer" /></div>
</div>
</body>
</html>
2. Define the tiles-definition.xml, that will define the layout of the tiles and different web pages that uses the tiles.


<?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>
        <!-- 
        Defining the base Layout for the Application. The layout contains header, footer, menu, content, side bar and status tray sections.
        -->  
<definition name="baseLayout"
template="/WEB-INF/jsp/Template.jsp">
<put-attribute name="title" value="Template" />
<put-attribute name="statusTray"
value="/WEB-INF/jsp/StatusTray.jsp">
</put-attribute>
<put-attribute name="header" value="/WEB-INF/jsp/Header.jsp" />
<put-attribute name="menu" value="/WEB-INF/jsp/Menu.jsp" />
<put-attribute name="content" value="/WEB-INF/jsp/Content.jsp" />
<put-attribute name="sidebar" value="/WEB-INF/jsp/Sidebar.jsp" />
<put-attribute name="footer" value="/WEB-INF/jsp/Footer.jsp" />
</definition>
        <!-- 
        This tile definition extends the base layout and just provides a title message to the layout
        -->
<definition name="HomePage" extends="baseLayout">
<put-attribute name="title" value="Leasing Office Home Page" />
</definition>

<!-- 
        This tile definition extends the base layout and provides a title and a different content for the content area
        -->
<definition name="ViewAllApartments" extends="baseLayout">
<put-attribute name="title" value="Leasing Office Apartments"/>
<put-attribute name="content" value="/WEB-INF/jsp/ViewAllApartments.jsp"/>
</definition>

</definition>
</tiles-definitions>
3. Define the SPRING Configuration to use the tiles view for resolving the views.

<!-- View Resolvers -->
<bean id="viewResolver"
class="org.springframework.web.servlet.view.UrlBasedViewResolver">
<property name="viewClass"
value="org.springframework.web.servlet.view.tiles2.TilesView" />
</bean>

<!-- Tiles Configuration -->
<bean id="tilesConfigurer"
class="org.springframework.web.servlet.view.tiles2.TilesConfigurer">
<property name="definitions" value="/WEB-INF/tiles/tiles-definitions.xml" />
</bean>

SPRING - Tiles View with Spring

Tiles is just another view technology that helps in making the web page layout easier for the developers. Before the tiles were introduced, developers need to write code to include all the headers, footers, side panes on each and every web page they develop. Tiles View helps in removing such boiler plate code and to make the code maintenance easier.

While using the Tiles view, developer just need to define the layout of the web page in the form of a set of tiles say header, menu, left pane, content pane, right pane, status bar, etc. Once the layout is designed, the developer just need to develop the content area and configure them to get displayed in content pane in the tile.


Tiles View
To use Tiles in Spring, we need to add a couple of additional dependencies in our project. The following is the list of dependencies we need.
  • Struts version 1.1 or higher
  • Commons BeanUtils
  • Commons Digester
  • Commons Logging
These dependencies are all available in the Spring distribution.


Refer to Tiles View With Spring Example for a simple example on the usage of Tiles View with SPRING based application.