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>


4. Once the above configurations are done, the controller class can directly use the tile definition name in the ModelAndView object.

1 comment: