It's always a matter of concern for web developers to keep the page design constant across all of the application. Using frames is a dead idea, so what's left including your header, navigation and footer jsp on each and every page ?
Well there is something better than that, Sitemesh. It allows you to keep your page design consistent or even maintaining different UI styles for different parts of the site.
Well there is something better than that, Sitemesh. It allows you to keep your page design consistent or even maintaining different UI styles for different parts of the site.
But a major problem which Sitemesh users often come across is to implement a dynamic menu / navigation, like in a situation where menus in your application changes based on the 'role' of the logged in user. The solution for the same is here implemented in a simple JSP / Servlet code.
Dynamic menu with Sitemesh
To keep a dynamic approach, I have kept Menu texts and links in a properties file.
Dynamic menu with Sitemesh
To keep a dynamic approach, I have kept Menu texts and links in a properties file.
Downloads:
sitemesh-2.4.2.jar - http://wiki.sitemesh.org/display/sitemesh/Download
Logic:
The basic idea is once the user logs into the application, the user's role is stored into the application session. The sitemesh reads the user role and applies appropriate navigation menus based on the role. Secondly to highlight the menu item which is currently selected a meta tag is placed on each page just to denote under when menu item it belongs. The sitemesh decorator reads the same meta tag and applies a different css to it's menu item.
web.xml - Configure the sitemesh filter to intercept request and send for decoration
decorators.xml - sitemesh config file for defining decorators
main.jsp - decorator, the place where you design the layout of your design and implement the dynamic logic. The code below is pretty self-explainatory with the logic stated above.
Download the MyEclipse / Eclipse project SiteMeshDynamicMenu.zip
Hope these tips helped you, don't forget to leave your comments here.
Logic:
The basic idea is once the user logs into the application, the user's role is stored into the application session. The sitemesh reads the user role and applies appropriate navigation menus based on the role. Secondly to highlight the menu item which is currently selected a meta tag is placed on each page just to denote under when menu item it belongs. The sitemesh decorator reads the same meta tag and applies a different css to it's menu item.
web.xml - Configure the sitemesh filter to intercept request and send for decoration
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?xml version="1.0" encoding="UTF-8"?> | |
| <web-app version="2.5" | |
| xmlns="http://java.sun.com/xml/ns/javaee" | |
| xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" | |
| xsi:schemaLocation="http://java.sun.com/xml/ns/javaee | |
| http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> | |
| <display-name>SiteMeshDynamicMenu</display-name> | |
| <welcome-file-list> | |
| <welcome-file>index.jsp</welcome-file> | |
| </welcome-file-list> | |
| <filter> | |
| <filter-name>sitemesh</filter-name> | |
| <filter-class>com.opensymphony.sitemesh.webapp.SiteMeshFilter</filter-class> | |
| </filter> | |
| <filter-mapping> | |
| <filter-name>sitemesh</filter-name> | |
| <url-pattern>/*</url-pattern> | |
| </filter-mapping> | |
| <servlet> | |
| <description>Servlet Used for Login</description> | |
| <display-name>LoginServlet</display-name> | |
| <servlet-name>loginServlet</servlet-name> | |
| <servlet-class>com.abhishekmitra.servlet.loginServlet</servlet-class> | |
| </servlet> | |
| <servlet-mapping> | |
| <servlet-name>loginServlet</servlet-name> | |
| <url-pattern>/loginServlet</url-pattern> | |
| </servlet-mapping> | |
| </web-app> |
decorators.xml - sitemesh config file for defining decorators
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?xml version="1.0" encoding="UTF-8"?> | |
| <decorators defaultdir="/WEB-INF/decorators"> | |
| <decorator defaultdir="/WEB-INF/decorators" name="main" page="main.jsp"> | |
| <pattern>/*</pattern> | |
| </decorator> | |
| </decorators> |
main.jsp - decorator, the place where you design the layout of your design and implement the dynamic logic. The code below is pretty self-explainatory with the logic stated above.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <%@ page import="java.util.*" %> | |
| <%@ taglib prefix="decorator" uri="http://www.opensymphony.com/sitemesh/decorator" %> | |
| <decorator:usePage id="thePage" /> | |
| <% String pageName = thePage.getProperty("meta.currentPage");%> | |
| <head> | |
| <title> | |
| Abhishek Mitra - <decorator:title default="SiteMesh Dynamic Menu Example" /> | |
| </title> | |
| <link href="<%=request.getContextPath()%>/css/global.css" rel="stylesheet" type="text/css"> | |
| <decorator:head /> | |
| <body> | |
| <div id="header"> | |
| <h2 align="center" class="noMargin">Sitemesh Dynamic Menu Example</h2> | |
| </div> | |
| <div id="navigation" <%if (pageName.equals("Index")) {%>class="hideNav"<% } else {%> class="navDiv" <%}%>> | |
| <ul class="navigation"> | |
| <% | |
| String lUserRole = (String)session.getAttribute("ROLE"); | |
| if(lUserRole!=null){ | |
| String lMenuString = ResourceBundle.getBundle("menu").getString(lUserRole); | |
| StringTokenizer lMenus = new StringTokenizer(lMenuString,","); | |
| String lMenuItem = null; | |
| String[] lMenuDisplayLink = null; | |
| while (lMenus.hasMoreElements()) { | |
| lMenuItem = (String)lMenus.nextElement(); | |
| lMenuDisplayLink = ResourceBundle.getBundle("menu").getString(lMenuItem).split(","); | |
| %> | |
| <li> | |
| <div <%if (pageName.equals(lMenuDisplayLink[0])) {%>class="active"<% } else {%> class="inactive" <%} %>> | |
| <a href="<%=request.getContextPath()%>/jsp/<%=lMenuDisplayLink[1] %>"><%=lMenuDisplayLink[0] %></a> | |
| </div> | |
| </li> | |
| <% | |
| } | |
| } | |
| %> | |
| </ul> | |
| </div> | |
| <div id="content" class="contentDiv"> | |
| <decorator:body /> | |
| </div> | |
| </body> | |
| </html> |
Download the MyEclipse / Eclipse project SiteMeshDynamicMenu.zip
Hope these tips helped you, don't forget to leave your comments here.
Excelent!!!!!!!!!!!!!!!!!
ReplyDelete