Apache Tiles is a popular templating framework used for Java web application. Tiles gain the popularity because Struts 1.x use Tiles as its default template framewrok. SpringMvc that is MVC framework just like Strust, also supports integration with Tiles as template framework.
In this tutorial we will go together to integrate SpringMvc 3 and Tiles 2.2.2. Remember, we use Tiles 2.2.2 although version 3 is ready.
The application we will make is like this:
Every menu in the left when it is clicked will change only the main part of the page (the center part). The old fashioned way to achieve this is using a number of pages that have same left side menu but different layout in the main part. But what happen if we have 100 pages and the footer has changed, we have to change all of the pages. What a waste of time.
I assume you have already know how to use SpingMVC 3
1. Configure The Library
The very first step is to install the needed libraries to the project.
2. Configure dispatcher-servlet.xml
|
1 2 3 4 5 6 7 8 9 10 11 |
<bean id="tilesConfigurer" class="org.springframework.web.servlet.view.tiles2.TilesConfigurer"> <property name="definitions"> <list> <value>/WEB-INF/tiles.xml</value> </list> </property> </bean> <bean id="viewResolver" class="org.springframework.web.servlet.view.UrlBasedViewResolver"> <property name="viewClass" value="org.springframework.web.servlet.view.tiles2.TilesView"/> </bean> |
3. Configure tiles.xml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<?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/jsp/tiles/layout.jsp"> <put-attribute name="title" value="AwanLabs" /> <put-attribute name="header" value="/WEB-INF/jsp/tiles/header.jsp" /> <put-attribute name="navigation" value="/WEB-INF/jsp/tiles/navigation.jsp" /> <put-attribute name="body" value="" /> <put-attribute name="footer" value="/WEB-INF/jsp/tiles/footer.jsp" /> </definition> <definition name="welcome" extends="baseLayout"> <put-attribute name="title" value="AwanLabs : Welcome" /> <put-attribute name="body" value="/WEB-INF/jsp/tiles/welcome.jsp" /> </definition> <definition name="createUser" extends="baseLayout"> <put-attribute name="title" value="AwanLabs : Create User" /> <put-attribute name="body" value="/WEB-INF/jsp/tiles/createUser.jsp" /> </definition> <definition name="listUsers" extends="baseLayout"> <put-attribute name="title" value="AwanLabs : Create User" /> <put-attribute name="body" value="/WEB-INF/jsp/tiles/listUsers.jsp" /> </definition> </tiles-definitions> |
In this configuration file we created one main layout and three partial pages. These partial pages will make our application has dynamic page.
4. JSP Code
layout.jsp
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%> <html> <head> <title><tiles:insertAttribute name="title" ignore="true" /></title> </head> <body> <table border="1" style="border-collapse: collapse;" cellpadding="2" cellspacing="2" align="center" width="800"> <tbody><tr> <td height="30" colspan="2"><tiles:insertAttribute name="header" /></td> </tr> <tr> <td width="150" height="450" valign="top"> <tiles:insertAttribute name="navigation" /> </td> <td valign="top" width="650"> <tiles:insertAttribute name="body" /> </td> </tr> <tr> <td height="30" colspan="2"> <tiles:insertAttribute name="footer" /> </td> </tr> </tbody></table></body> </html> |
header.jsp
|
1 |
<h2>AwanLabs : Riset Teknologi</h2> |
navigation.jsp
|
1 2 3 |
<p><a href="createUser">Create User</a></p> <p><a href="listUsers">View Users</a></p> <p><a href="logout.do">Logout</a></p> |
footer.jsp
|
1 2 3 |
<center> <b>© 2011 AwanLabs All Rights Reserved</b> </center> |
welcome.jsp
|
1 2 3 4 5 6 |
<h2>Welcome to SpringMVC+Tiles Sample Application </h2> Agung Setiawan </br> Agung Setiawan </br> Agung Setiawan </br> Agung Setiawan </br> Agung Setiawan </br> |
createUser.jsp
|
1 |
<h2>List Users</h2> |
listUsers.jsp
|
1 |
<h2>List Users</h2> |
5. TilesController
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
package com.agung.springmvcapachetiles.controller; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; @Controller @RequestMapping(value="tiles/*") public class TilesController { @RequestMapping(value="/") public String welcome(){ return "welcome"; } @RequestMapping(value="createUser") public String createUser(){ return "createUser"; } @RequestMapping(value="listUsers") public String listUsers(){ return "listUsers"; } } |
Return String in the methods above refers to tiles name in the tiles.xml file.
Run the application and test the navigation menu.
Saya persilahkan jika ada yang mengalami error 😀
Saya persilahkan jika ada yang mengalami error 😀