26035 - How to Create a JSP MenuBar

Sample 26035: How to Create a JSP MenuBar

Overview

The MenuBar is a TransformationBean^TM that generates the appropriate HTML 4.0 and JavaScript for creating a MenuBar. The MenuBar TransformationBean contains Menus that contain MenuItems. The MenuBar can be horizontally or vertically oriented. The default orientation is horizontal. A MenuBar can have a type of DROP_HOVER, DROP_CLICK or NAVIGATION. DROP_HOVER will cause the submenu items to appear when you hover over a menu item. DROP_CLICK will cause the submenu items to appear when you click on a menu item. If you have no menu items, the type will be NAVIGATION.

Here are the steps for creating a simple MenuBar.

Create a MenuBarNode model.
Create a MenuBar.
Set the model on the MenuBar.
Render the MenuBar.

This sample shows how to create and render a JSP MenuBar. The Full Code tab contains the source code for the default example, and also for the customizations listed below.

The best practice for a JSP Web application is a JSP architecture that uses servlets and .jsp files in order to dynamically deliver content. JSP, Model 2 uses the Model-View-Controller paradigm. For simplicity, this sample does not use the JSP Model 2 approach.

Customization

This example contains the following customization:

Changing style classes

A default MenuBar looks like the following:

MenuBar

Changing style classes

You might want to change the styles of the components in the MenuBar to get a different look.

To change the styles, you should perform these steps.

Add the following styles in the <head> section of your JSP file:

<style>
	.myContainer{border: solid 2px #000000;font-family: Trebuchet MS, Helvetica, sans-serif;}
	.myMenuDivider {background-color: #DCDCDC; color: #000000;}
	.myMenu, .myMenuLink {background-color: #DCDCDC;color: #275E94;cursor:hand;text-align: center;}
	.myMenu A, .myMenuLink A {text-decoration: none;color:#3872ac;}
	.myMenuItem, .myMenuItemLink {background-color:#FFFFFF; color:#3872ac;}
	.myMenuItem A, .myMenuItemLink A {text-decoration: none;color:#3872ac;}
	.myMenuItem A:hover, .myMenuItemLink A:hover {text-decoration: underline;}
	.myMenuItemContainer{font-family: Trebuchet MS, Helvetica, sans-serif;background-color: white; 
			border-color: #3872ac; color: #3872ac;text-align: left;border-style: solid; 
			padding:1px; border-width:1px;}
</style>

Edit your MenuBar tag to set new style names. Add the following lines of code inside the MenuBar tag:

<sas:MenuBar id="menuBar1" model="menuModel" widthPercentage="50" separator="|">
	<sas:StyleMapKey key="MENUBAR_CONTAINER" classid="myContainer" />
	<sas:StyleMapKey key="MENU" classid="myMenu" />
	<sas:StyleMapKey key="MENU_LINK" classid="myMenuLink" />
	<sas:StyleMapKey key="MENU_DIVIDER" classid="myMenuDivider" />
	<sas:StyleMapKey key="MENU_ITEM" classid="myMenuItem" />
	<sas:StyleMapKey key="MENU_ITEM_LINK" classid="myMenuItemLink" />
	<sas:StyleMapKey key="MENU_ITEM_DIVIDER" classid="myMenuItemDivider" />
	<sas:StyleMapKey key="MENU_ITEM_CONTAINER" classid="myMenuItemContainer" />
</sas:MenuBar>

Your new MenuBar will look like the following:

MenuBar with custom styles

Additional Documentation

For a list of samples for common tasks, see SAS Note 32218.
The SAS AppDev Studio Developer's Site contains detailed information that will assist you when developing Web applications with SAS AppDev Studio, including an API reference and the custom tag reference for the sas tagset.

These sample files and code examples are provided by SAS Institute Inc. "as is" without warranty of any kind, either express or implied, including but not limited to the implied warranties of merchantability and fitness for a particular purpose. Recipients acknowledge and agree that SAS Institute shall not be liable for any damages whatsoever arising out of their use of this material. In addition, SAS Institute will provide no support for the materials contained herein.

Instructions

Build a new Web application project in SAS AppDev Studio. No Web application template is necessary.
Create new JSP pages using the code below.
Execute the JSP page on the test Tomcat server.

Tip: For help with building a Web application project and testing a Web application, see SAS Note 32218.

Code for default MenuBar


<%@ taglib uri="http://www.sas.com/taglib/sas" prefix="sas" %>
<%@ page pageEncoding="UTF-8"%>
<%@page import="com.sas.servlet.tbeans.models.MenuBarNode"%>
<%@page import="com.sas.servlet.tbeans.models.MenuNode"%>
<%@page import="com.sas.servlet.tbeans.models.MenuItemNode"%>

<html>
<head>
    <link href="styles/sasComponents.css" rel="STYLESHEET" type="text/css">
</head>

<body>

<%
	MenuBarNode menuModel = new MenuBarNode();

	MenuNode child1 = new MenuNode("Menu 1", null, "http://www.sas.com");
	MenuNode child2 = new MenuNode("Menu 2", null, "http://www.sas.com");
	MenuNode child3 = new MenuNode("Menu 3", null, "http://www.sas.com");
	MenuNode child4 = new MenuNode("Menu 4", null, "http://www.sas.com");

	child1.add(new MenuItemNode("Menu Item 1 ", null, "http://www.sas.com"));
	child1.add(new MenuItemNode("Menu Item 2 ", null, "http://www.sas.com"));
	child1.add(new MenuItemNode()); //divider
	child1.add(new MenuItemNode("Menu Item 3", null, "http://www.sas.com"));
	child1.add(new MenuItemNode("Menu Item 4", null, "http://www.sas.com"));

	child2.add(new MenuItemNode("Menu Item 5", null, "http://www.sas.com"));
	child2.add(new MenuItemNode("Menu Item 6", null, "http://www.sas.com"));

	MenuNode child7 = new MenuNode("Menu Item 7",null,"http://www.sas.com");
	child7.add(new MenuItemNode("Menu Item 8", null, "http://www.sas.com"));
	child7.add(new MenuItemNode("Menu Item 9", null, "http://www.sas.com"));
	child2.add(child7);

	menuModel.add(child1);
	menuModel.add(child2);
	menuModel.add(child3);
	menuModel.add(child4);

	session.setAttribute("menuModel", menuModel);
%>

<sas:MenuBar id="menuBar1" model="menuModel" widthPercentage="50" separator="|">
</sas:MenuBar>

</body>
</html>

Code for customization - Customizing the Styles by changing style classes


<%@ taglib uri="http://www.sas.com/taglib/sas" prefix="sas" %>
<%@ page pageEncoding="UTF-8"%>
<%@page import="com.sas.servlet.tbeans.models.MenuBarNode"%>
<%@page import="com.sas.servlet.tbeans.models.MenuNode"%>
<%@page import="com.sas.servlet.tbeans.models.MenuItemNode"%>

<html>
<head>
    <link href="styles/sasComponents.css" rel="STYLESHEET" type="text/css">
    <style>
       .myContainer{border: solid 2px #000000;font-family: Trebuchet MS, Helvetica, sans-serif;}
       .myMenuDivider {background-color: #DCDCDC; color: #000000;}
       .myMenu, .myMenuLink {background-color: #DCDCDC;color: #275E94;cursor:hand;text-align: center;}
       .myMenu A, .myMenuLink A {text-decoration: none;color:#3872ac;}
       .myMenuItem, .myMenuItemLink {background-color:#FFFFFF; color:#3872ac;}
       .myMenuItem A, .myMenuItemLink A {text-decoration: none;color:#3872ac;}
       .myMenuItem A:hover, .myMenuItemLink A:hover {text-decoration: underline;}
       .myMenuItemContainer{font-family: Trebuchet MS, Helvetica, sans-serif;background-color: white; 
                            border-color: #3872ac; color: #3872ac;text-align: left;border-style: solid; 
                            padding:1px; border-width:1px;}
     </style>
</head>

<body>

<%
	MenuBarNode menuModel = new MenuBarNode();

	MenuNode child1 = new MenuNode("Menu 1", null, "http://www.sas.com");
	MenuNode child2 = new MenuNode("Menu 2", null, "http://www.sas.com");
	MenuNode child3 = new MenuNode("Menu 3", null, "http://www.sas.com");
	MenuNode child4 = new MenuNode("Menu 4", null, "http://www.sas.com");

	child1.add(new MenuItemNode("Menu Item 1 ", null, "http://www.sas.com"));
	child1.add(new MenuItemNode("Menu Item 2 ", null, "http://www.sas.com"));
	child1.add(new MenuItemNode()); //divider
	child1.add(new MenuItemNode("Menu Item 3", null, "http://www.sas.com"));
	child1.add(new MenuItemNode("Menu Item 4", null, "http://www.sas.com"));

	child2.add(new MenuItemNode("Menu Item 5", null, "http://www.sas.com"));
	child2.add(new MenuItemNode("Menu Item 6", null, "http://www.sas.com"));

	MenuNode child7 = new MenuNode("Menu Item 7",null,"http://www.sas.com");
	child7.add(new MenuItemNode("Menu Item 8", null, "http://www.sas.com"));
	child7.add(new MenuItemNode("Menu Item 9", null, "http://www.sas.com"));
	child2.add(child7);

	menuModel.add(child1);
	menuModel.add(child2);
	menuModel.add(child3);
	menuModel.add(child4);

	session.setAttribute("menuModel", menuModel);
%>

<sas:MenuBar id="menuBar1" model="menuModel" widthPercentage="50" separator="|">
  <sas:StyleMapKey key="MENUBAR_CONTAINER" classid="myContainer" />
  <sas:StyleMapKey key="MENU" classid="myMenu" />
  <sas:StyleMapKey key="MENU_LINK" classid="myMenuLink" />
  <sas:StyleMapKey key="MENU_DIVIDER" classid="myMenuDivider" />
  <sas:StyleMapKey key="MENU_ITEM" classid="myMenuItem" />
  <sas:StyleMapKey key="MENU_ITEM_LINK" classid="myMenuItemLink" />
  <sas:StyleMapKey key="MENU_ITEM_DIVIDER" classid="myMenuItemDivider" />
  <sas:StyleMapKey key="MENU_ITEM_CONTAINER" classid="myMenuItemContainer" />
</sas:MenuBar>

</body>
</html>

These sample files and code examples are provided by SAS Institute Inc. "as is" without warranty of any kind, either express or implied, including but not limited to the implied warranties of merchantability and fitness for a particular purpose. Recipients acknowledge and agree that SAS Institute shall not be liable for any damages whatsoever arising out of their use of this material. In addition, SAS Institute will provide no support for the materials contained herein.

Date Modified:	2008-08-28 16:37:13
Date Created:	2006-02-20 11:45:41

Product Family	Product	Host	Product Release		SAS Release
Product Family	Product	Host	Starting	Ending	Starting	Ending
SAS System	SAS AppDev Studio	Microsoft Windows Server 2003 Enterprise Edition	3.2		9.1 TS1M3 SP4
		Microsoft Windows Server 2003 Datacenter Edition	3.2		9.1 TS1M3 SP4
		Microsoft Windows NT Workstation	3.2		9.1 TS1M3 SP4
		Microsoft Windows 2000 Professional	3.2		9.1 TS1M3 SP4
		Microsoft Windows 2000 Server	3.2		9.1 TS1M3 SP4
		Microsoft Windows 2000 Datacenter Server	3.2		9.1 TS1M3 SP4
		Microsoft Windows 2000 Advanced Server	3.2		9.1 TS1M3 SP4
		Microsoft® Windows® for x64	3.2		9.1 TS1M3 SP4
		Microsoft Windows Server 2003 Standard Edition	3.2		9.1 TS1M3 SP4
		Microsoft Windows XP Professional	3.2		9.1 TS1M3 SP4
		Windows Vista	3.2		9.1 TS1M3 SP4

E-mail This Page

Knowledge Base