Spring 3 MVC: Tiles Plugin Tutorial With Example In Eclipse
- By Viral Patel on July 8, 2010
Welcome to Part 4 for Spring 3.0 MVC Series. In previous article we saw how to create a form using Spring 3 MVC and display it in JSP. Also we learn about annotation @ModelAttribute
.
In this part we will discuss about Tiles Framework and its Integration with Spring 3.0 MVC. We will add Tiles support to our HelloWorld Spring application that we created in previous parts. I strongly recommend you to go through previous articles and download the source code of our sample application.
Spring 3.0 MVC Series
- Part 1: Introduction to Spring 3.0 MVC framework
- Part 2: Create Hello World Application in Spring 3.0 MVC
- Part 3: Handling Forms in Spring 3.0 MVC
- Part 4: Spring 3 MVC Tiles Plugin Tutorial with Example in Eclipse
- Part 5: Spring 3 MVC Internationalization & Localization Tutorial with Example in Eclipse
- Part 6: Spring 3 MVC Themes in Spring-Tutorial with Example
- Part 7: Create Spring 3 MVC Hibernate 3 Example using Maven in Eclipse
- Spring 3 MVC Interceptor tutorial
- Spring MVC: Save / Retrieve BLOB object with Hibernate
- How to change spring-servlet.xml filename
- Spring MVC: Multiple Row Form Submit using List of Beans
- Spring 3 MVC – Autocomplete with JQuery & JSON example
- Spring MVC + FreeMarker (FTL) Integration example
- Spring MVC HashMap Form Integration example
- Spring MVC Multiple File Upload example
Introduction to Tiles 2
Nowadays, website are generally divided into pieces of reusable template that are being rendered among different web pages. For example a site containing header, footer, menu etc. This items remains same through out the website and give it a common look and feel. It is very difficult to hard code this in each and every webpage and if later a change is needed than all the pages needs to be modified. Hence we use templatization mechanism. We create a common Header, Footer, Menu page and include this in each page.
Tiles Plugin allow both templating and componentization. In fact, both mechanisms are similar: you
define parts of page (a “Tile”) that you assemble to build another part or a full page. A part can
take parameters, allowing dynamic content, and can be seen as a method in JAVA language. Tiles is a templating system used to maintain a consistent look and feel across all the web pages of a web application. It increase the reusability of template and reduce code duplication.
A common layout of website is defined in a central configuration file and this layout can be extended across all the webpages of the web application.
Our Application Layout
Our goal is to add Header, Footer and Menu to our Spring 3 HelloWorld application. Following will be the layout of the same.
Required JAR files
In order to add Tiles support to our Spring3 application, we will need few jar files. Following is the list of JARs in our example. Add these JARs in WEB-INF/lib folder.
The highlighted jar files in above list are the new jars to be added in project for Tiles integration.
Configuring Tiles framework in Spring MVC
To configure Tiles, an entry for bean TilesConfigure
has to be made in spring-servlet.xml. Open the spring-servlet.xml from WEB-INF folder and add following code between <beans> </beans>
tag.
File: /WebContent/WEB-INF/spring-servlet.xml
< bean id = "viewResolver"
class = "org.springframework.web.servlet.view.UrlBasedViewResolver" >
< property name = "viewClass" >
< value >
org.springframework.web.servlet.view.tiles2.TilesView
</ value >
</ property >
</ bean >
< bean id = "tilesConfigurer"
class = "org.springframework.web.servlet.view.tiles2.TilesConfigurer" >
< property name = "definitions" >
< list >
< value >/WEB-INF/tiles.xml</ value >
</ list >
</ property >
</ bean >
|
An input configuration file /WEB-INF/tiles.xml is passed as argument in above bean definition. This file contains the Tiles definition for our web application.
Create a file tiles.xml in WEB-INF folder and copy following code into it.
File: WebContent/WEB-INF/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 = "base.definition"
template = "/WEB-INF/jsp/layout.jsp" >
< put-attribute name = "title" value = "" />
< put-attribute name = "header" value = "/WEB-INF/jsp/header.jsp" />
< put-attribute name = "menu" value = "/WEB-INF/jsp/menu.jsp" />
< put-attribute name = "body" value = "" />
< put-attribute name = "footer" value = "/WEB-INF/jsp/footer.jsp" />
</ definition >
< definition name = "contact" extends = "base.definition" >
< put-attribute name = "title" value = "Contact Manager" />
< put-attribute name = "body" value = "/WEB-INF/jsp/contact.jsp" />
</ definition >
</ tiles-definitions >
|
Here in tiles.xml we have define a template base.definition. This layout contains attributes such as Header, Title, Body, Menu and Footer. The layout is then extended and new definitions for Contact page. We have override the default layout and changed the content for Body and Title.
Creating View – The JSPs
We will define the template for our webapplication in a JSP file called layout.jsp. This template will contain different segments of web page (Header, Footer, Menu etc). Create four new JSP files layout.jsp, header.jsp, menu.jsp and footer.jsp and copy following content in each of them.
File: WebContent/WEB-INF/jsp/layout.jsp
<%@ 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 >
|
File: WebContent/WEB-INF/jsp/header.jsp
< h1 >Header</ h1 >
|
File: WebContent/WEB-INF/jsp/menu.jsp
< p >Menu</ p >
|
File: WebContent/WEB-INF/jsp/footer.jsp
< p >Copyright © ViralPatel.net</ p >
|
That’s All Folks
Compile and Execute the application in Eclipse and see that the header, menu and footer are properly applied.
Download Source Code
Moving On
Today we saw how we can configure Tiles framework with Spring 3 MVC application. We used org.springframework.web.servlet.view.tiles2.TilesConfigurer class in bean definition to define the tiles configuration file. In next part we will discuss about Internationalization/Localization and adding its support in Spring 3 MVC. I hope you liked this article. Feel free to post your queries and comments in comment section.
Related Posts
Get our Articles via Email. Enter your email address.
120 Comments
- By Viral Patel on July 8, 2010
Welcome to Part 4 for Spring 3.0 MVC Series. In previous article we saw how to create a form using Spring 3 MVC and display it in JSP. Also we learn about annotation @ModelAttribute
.
In this part we will discuss about Tiles Framework and its Integration with Spring 3.0 MVC. We will add Tiles support to our HelloWorld Spring application that we created in previous parts. I strongly recommend you to go through previous articles and download the source code of our sample application.
Spring 3.0 MVC Series
- Part 1: Introduction to Spring 3.0 MVC framework
- Part 2: Create Hello World Application in Spring 3.0 MVC
- Part 3: Handling Forms in Spring 3.0 MVC
- Part 4: Spring 3 MVC Tiles Plugin Tutorial with Example in Eclipse
- Part 5: Spring 3 MVC Internationalization & Localization Tutorial with Example in Eclipse
- Part 6: Spring 3 MVC Themes in Spring-Tutorial with Example
- Part 7: Create Spring 3 MVC Hibernate 3 Example using Maven in Eclipse
- Spring 3 MVC Interceptor tutorial
- Spring MVC: Save / Retrieve BLOB object with Hibernate
- How to change spring-servlet.xml filename
- Spring MVC: Multiple Row Form Submit using List of Beans
- Spring 3 MVC – Autocomplete with JQuery & JSON example
- Spring MVC + FreeMarker (FTL) Integration example
- Spring MVC HashMap Form Integration example
- Spring MVC Multiple File Upload example
Introduction to Tiles 2
Nowadays, website are generally divided into pieces of reusable template that are being rendered among different web pages. For example a site containing header, footer, menu etc. This items remains same through out the website and give it a common look and feel. It is very difficult to hard code this in each and every webpage and if later a change is needed than all the pages needs to be modified. Hence we use templatization mechanism. We create a common Header, Footer, Menu page and include this in each page.
Tiles Plugin allow both templating and componentization. In fact, both mechanisms are similar: you
define parts of page (a “Tile”) that you assemble to build another part or a full page. A part can
take parameters, allowing dynamic content, and can be seen as a method in JAVA language. Tiles is a templating system used to maintain a consistent look and feel across all the web pages of a web application. It increase the reusability of template and reduce code duplication.
A common layout of website is defined in a central configuration file and this layout can be extended across all the webpages of the web application.
Our Application Layout
Our goal is to add Header, Footer and Menu to our Spring 3 HelloWorld application. Following will be the layout of the same.
Required JAR files
In order to add Tiles support to our Spring3 application, we will need few jar files. Following is the list of JARs in our example. Add these JARs in WEB-INF/lib folder.
The highlighted jar files in above list are the new jars to be added in project for Tiles integration.
Configuring Tiles framework in Spring MVC
To configure Tiles, an entry for bean TilesConfigure
has to be made in spring-servlet.xml. Open the spring-servlet.xml from WEB-INF folder and add following code between <beans> </beans>
tag.
File: /WebContent/WEB-INF/spring-servlet.xml
< bean id = "viewResolver"
class = "org.springframework.web.servlet.view.UrlBasedViewResolver" >
< property name = "viewClass" >
< value >
org.springframework.web.servlet.view.tiles2.TilesView
</ value >
</ property >
</ bean >
< bean id = "tilesConfigurer"
class = "org.springframework.web.servlet.view.tiles2.TilesConfigurer" >
< property name = "definitions" >
< list >
< value >/WEB-INF/tiles.xml</ value >
</ list >
</ property >
</ bean >
|
An input configuration file /WEB-INF/tiles.xml is passed as argument in above bean definition. This file contains the Tiles definition for our web application.
Create a file tiles.xml in WEB-INF folder and copy following code into it.
File: WebContent/WEB-INF/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 = "base.definition"
template = "/WEB-INF/jsp/layout.jsp" >
< put-attribute name = "title" value = "" />
< put-attribute name = "header" value = "/WEB-INF/jsp/header.jsp" />
< put-attribute name = "menu" value = "/WEB-INF/jsp/menu.jsp" />
< put-attribute name = "body" value = "" />
< put-attribute name = "footer" value = "/WEB-INF/jsp/footer.jsp" />
</ definition >
< definition name = "contact" extends = "base.definition" >
< put-attribute name = "title" value = "Contact Manager" />
< put-attribute name = "body" value = "/WEB-INF/jsp/contact.jsp" />
</ definition >
</ tiles-definitions >
|
Here in tiles.xml we have define a template base.definition. This layout contains attributes such as Header, Title, Body, Menu and Footer. The layout is then extended and new definitions for Contact page. We have override the default layout and changed the content for Body and Title.
Creating View – The JSPs
We will define the template for our webapplication in a JSP file called layout.jsp. This template will contain different segments of web page (Header, Footer, Menu etc). Create four new JSP files layout.jsp, header.jsp, menu.jsp and footer.jsp and copy following content in each of them.
File: WebContent/WEB-INF/jsp/layout.jsp
<%@ 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 >
|
File: WebContent/WEB-INF/jsp/header.jsp
< h1 >Header</ h1 >
|
File: WebContent/WEB-INF/jsp/menu.jsp
< p >Menu</ p >
|
File: WebContent/WEB-INF/jsp/footer.jsp
< p >Copyright © ViralPatel.net</ p >
|
That’s All Folks
Compile and Execute the application in Eclipse and see that the header, menu and footer are properly applied.
Download Source Code
Click here to download Source Code (8.88kb).
Moving On
Today we saw how we can configure Tiles framework with Spring 3 MVC application. We used org.springframework.web.servlet.view.tiles2.TilesConfigurer class in bean definition to define the tiles configuration file. In next part we will discuss about Internationalization/Localization and adding its support in Spring 3 MVC. I hope you liked this article. Feel free to post your queries and comments in comment section.
Get our Articles via Email. Enter your email address.
相关推荐
Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。
毕业设计物流管理系统的设计与实现(Java版本) 采用Struts2+hibernate+Oracle10g+Tomcat 涉及车辆管理,配送点管理,运输方式管理,订单管理,员工管理,用户管理,部门管理,权限管理,角色管理等基础管理功能。
基于VB+access实现的成绩分析统计系统(论文+源代码) 【适用人群】:适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。
ASP+ACCESS网上购物系统设计(源代码+设计说明书+调研报告).zip
污水处理计算书
Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。
ASP+ACCESS在线考试系统设计(源代码+设计说明书).zip
Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。
毕业设计基于知识图谱和循环神经网络的推荐系统python源码+数据集.zip毕业设计基于知识图谱和循环神经网络的推荐系统python源码+数据集.zip毕业设计基于知识图谱和循环神经网络的推荐系统python源码+数据集.zip毕业设计基于知识图谱和循环神经网络的推荐系统python源码+数据集.zip 毕业设计基于知识图谱和循环神经网络的推荐系统python源码+数据集.zip 毕业设计基于知识图谱和循环神经网络的推荐系统python源码+数据集.zip毕业设计基于知识图谱和循环神经网络的推荐系统python源码+数据集.zip
行业报告
基于matlab实现的导线网平差,主要是附和导线平差程序,用于计算各点坐标并评定其精度。.rar
基于VB+access实现的学生学籍管理系统(系统+论文) 【适用人群】:适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
ASP基于BS的工艺品展示系统的设计与实现(源代码+设计说明书).zip
污水处理计算书
ASP+ACCESS网上花店毕业设计全套(设计说明书+源代码+说明).zip
污水处理计算书
行业报告
ASP基于WEB教学评估系统设计(源代码+设计说明书).zip
JSP教师档案管理系统(源代码+设计说明书).zip