Build layout template use sitemesh with spring MVC

Monday, December 7th, 2015 (0 Comment)

In this article, we will build a template default for our website use sitemesh decorator library. Besides, we use open source framework CSS Bootstrap to develop site run all device. layout template as image below:

layout sitemesh

layout sitemesh

When you click Home, show template as image above. Click No template, not use sitemesh template.

Step 1: Create project with struct as below

sitemesh project

sitemesh project

  • You need download Boostrap and extract folder into resources folder of project
  • springmvc.css: add css file for main template
  • jquery.min.js: add jquery file to use in full site
  • header.jsp: show information in section header
  • footer,jsp: show information in section footer
  • menu-top.jsp: display menu navigation
  • sidebar.jsp: right content
  • default.jsp: main layout of template, it will include header, footer, menu-top and sidebar

Step 2: add sitemesh library and config

porn.xml: add sitemesh decorator library

decorators.xml: config point to default.jsp and excludes folders that do not want to use template

  • line 5: excludes all page not use template in nodecorate folder

servlet-context.xml:

  • line 13: use mvc:annotation-driven replace context:annotation-config in part helloworld 

web.xml: config load sitemesh

Step 3: modify controller to handle layout

HelloWorldController.java:

  • line 18: function showNodecorate to show page not use template

Step 4: edit some template files and pages

header.jsp: you add information in here if any

footer.jsp:

sidebar.jsp:

menu-top.jsp: use bootstrap to make menu navigation

  • you want to change backgroud color and text color of menu, you click tool boostrap to select color and copy code CSS is generated.

default.jsp: include files template

  • line 13: load css file bootstrap
  • line 14: load css file of private project
  • line 16: load jquery file, must load before other js files
  • line 17: load js file bootstrap
  • line 19: define title tag to use other pages
  • line 38: define body tag to use other pages

hello.jsp: hello page will use default.jsp template

nodecorate.jsp: example page not use template

index.jsp: redirect to hello page

Step 5: modify css of project

springmvc.css:

Finally, Build and Run project.

Notes: During create and build project, you should delete all cache in web server (tmp folder) and clean Server Runtime (in Server tab, right click Server Runtime -> Clean).

Tags: , , , , , ,

Related Posts

spring
How to create quartz spring dynamic in database
spring
Spring mvc mongodb crud users roles
spring
Java spring mvc tutorial on lvtutorial.com
spring
Angularjs spring mvc crud example

Related Posts

spring
How to create quartz spring dynamic in database
spring
Spring mvc mongodb crud users roles
spring
Java spring mvc tutorial on lvtutorial.com
spring
Angularjs spring mvc crud example

Leave a Reply

Your email address will not be published. Required fields are marked *