Spring MVC Tiles tutorial with example


Apache Tiles is a template composition framework. Tiles was originally built to simplify the development of web application user interfaces, but it is no longer restricted to the JavaEE web environment.

Tiles allows authors to define page fragments which can be assembled into a complete page at runtime. 

These fragments, or tiles, can be used as simple includes in order to reduce the duplication of common page elements or embedded within other tiles to develop a series of reusable templates. 

These templates streamline the development of a consistent look and feel across an entire application.

Apache Tiles is compatible with most of the MVC framework like Spring MVC, Struts1, Struts 2 etc.

Example
Tiles configuration with spring dispatcher xml
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p"
	xmlns:context="http://www.springframework.org/schema/context"
	xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
		http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd">

	<bean id="viewResolver"
		class="org.springframework.web.servlet.view.ResourceBundleViewResolver"
		p:basename="views" />

	<context:component-scan base-package="com.candidjava.springmvc" />

	<bean id="tilesConfigurer"
		class="org.springframework.web.servlet.view.tiles2.TilesConfigurer"
		p:definitions="/WEB-INF/tiles-defs.xml" />

</beans>

Tiles.xml
<?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="baseLayout" template="/WEB-INF/tiles/baseLayout.jsp">
      <put-attribute name="title"  value="Template"/>
      <put-attribute name="header" value="/WEB-INF/tiles/header.jsp"/>
      <put-attribute name="menu"   value="/WEB-INF/tiles/menu.jsp"/>
      <put-attribute name="body"   value="/WEB-INF/tiles/body.jsp"/>
      <put-attribute name="footer"   value="/WEB-INF/tiles/footer.jsp"/>
  </definition>
  
  <definition name="xxx" extends="baseLayout">
      <put-attribute name="title"  value="Welcome"/>
      <put-attribute name="body"   value="/WEB-INF/jsp/welcome.jsp"/>      
  </definition>
  
  <definition name="friends" extends="baseLayout">
      <put-attribute name="title"  value="Friends"/>
      <put-attribute name="body"   value="/WEB-INF/jsp/friends.jsp"/>      
  </definition>
  
  <definition name="office" extends="baseLayout">
      <put-attribute name="title"  value="Office"/>
      <put-attribute name="body"   value="/WEB-INF/jsp/office.jsp"/>      
  </definition>
  
  <definition name="about" extends="baseLayout">
      <put-attribute name="title"  value="About"/>
      <put-attribute name="body"   value="/WEB-INF/jsp/about.jsp"/>      
  </definition>
  
</tiles-definitions>

Baselayout
    Defines the base template to assemble the view pages
<%@ 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>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <title><tiles:insertAttribute name="title" ignore="true" /></title>
    </head>
    <body>
        <table border="1" cellpadding="2" cellspacing="2" align="center">
            <tr>
                <td height="30" colspan="2">
                    <tiles:insertAttribute name="header" />
                </td>
            </tr>
            <tr>
                <td height="250">
                    <tiles:insertAttribute name="menu" />
                </td>
                <td width="350">
                    <tiles:insertAttribute name="body" />
                </td>
            </tr>
            <tr>
                <td height="30" colspan="2">
                    <tiles:insertAttribute name="footer" />
                </td>
            </tr>
        </table>
    </body>
</html>

Screenshot
            

Download




Related Post

Comments


©candidjava.com