1/29/2007

网页中添加三层菜单

gf 的项目中需要用到三层菜单,总结如下:

Renders a Javascript Menu based on the excellent JSCookMenu by Heng Yuan(http://www.cs.ucla.edu/~heng/JSCookMenu), the nested NavigationMenuItem(s) are rendered as Javascript Menu.

If you want to use jscookMenu in your application, you will have to:
* Add jscookmenu directory containing css and scripting code to your web directory (you can find it in the examples application).
* Add scripts and stylesheets for the theme you would like to use to html-header (see also inc/header.inc in the examples application)
* Put the tomahawk.jar in your WEB-INF/lib directory (or in the classpath of your application server.)
* Add the following to your JSP page in order to use one of the MyFaces custom components:
<%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t" %>

Well,the syntax of jscookMenu is as follows:

<t:jscookMenu [ user-role-support-attributes ]
[layout="values {hbr, hbl, hur, hul, vbr, vbl, vur, vul}"]
[theme="values {ThemeIE, ThemeMiniBlack, ThemeOffice, ThemePanel}"]
Nested <t:navigationMenuItem> or <t:navigationMenuItems> tags (menu items)
</t:jscookMenu>



不同的 theme (效果)可以到这里查看 http://jscook.yuanheng.org/JSCookMenu/ThemeMiniBlack.html

例子:
The code in my menu.jsp is as follows:

<%@ taglib uri="http://myfaces.apache.org/extensions" prefix="x"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>

<x:jscookMenu layout="vbr" theme="ThemeECCGroup" rendered="#{MenuBean.hasMenu}">
<x:navigationMenuItems value="#{MenuBean.menu}" />
</x:jscookMenu>


The code in my backing bean is as follows: (this will eventually be generated from the database)

/**
* Package that this class belongs to.
*/
package uk.co.eccgroup.controller.action;

import java.util.ArrayList;
import java.util.List;

import javax.faces.context.FacesContext;

import org.apache.myfaces.custom.navmenu.NavigationMenuItem;
import org.apache.log4j.Logger;

/**
* MenuBean backing bean for application menus
*/
public class MenuBean
{
private static final Logger logger = Logger.getLogger(MenuBean.class);

public List<NavigationMenuItem> getContextMenu()
{
//Get view id
String viewId = FacesContext.getCurrentInstance().getViewRoot().getViewId();
logger.debug("view id: " + viewId);

//Menu
List<NavigationMenuItem> contextMenu = null;

if(viewId.equals("/home.jsp"))
{
//Context Menu
contextMenu = new ArrayList<NavigationMenuItem>();
contextMenu.add(new NavigationMenuItem("Application Development", "nav_services_applicationdevelopment", null, false));
contextMenu.add(new NavigationMenuItem("Consultancy Services", "nav_services_consultancy", null, false));
contextMenu.add(new NavigationMenuItem("Recruitment Services", "nav_services_recruitment", null, false));
contextMenu.add(new NavigationMenuItem("Contact Us", "nav_contact", null, false));
}

if(
viewId.equals("/applicationdevelopment.jsp")
|| viewId.equals("/recruitment.jsp")
)
{
contextMenu = new ArrayList<NavigationMenuItem>();
contextMenu.add(new NavigationMenuItem("Price Guide", "nav_price", null, false));
contextMenu.add(new NavigationMenuItem("Contact Us", "nav_contact", null, false));
}

if(viewId.equals("/consultancy.jsp"))
{
contextMenu = new ArrayList<NavigationMenuItem>();
contextMenu.add(new NavigationMenuItem("Our Consultants", "nav_consultants", null, false));
contextMenu.add(new NavigationMenuItem("Price Guide", "nav_price", null, false));
contextMenu.add(new NavigationMenuItem("Contact Us", "nav_contact", null, false));
}

//Return menu
return contextMenu;
}

public boolean getHasContextMenu()
{
boolean hasMenu = false;

List<NavigationMenuItem> contextMenu = getContextMenu();

if(contextMenu != null)
hasMenu = true;

return hasMenu;
}

public boolean getHasMenu()
{
return true;
}

public List<NavigationMenuItem> getMenu()
{
//Main Menu
List<NavigationMenuItem> menu = new ArrayList<NavigationMenuItem>();
menu.add(new NavigationMenuItem("Home", "nav_home", null, false));
menu.add(new NavigationMenuItem("Our Consultants", "nav_consultants", null, false));
menu.add(new NavigationMenuItem("Services", "nav_services", null, false));
//menu.add(new NavigationMenuItem("Documents", "nav_documents", null, false));
menu.add(new NavigationMenuItem("Price Guide", "nav_price", null, false));
//menu.add(new NavigationMenuItem("Web Log", "nav_weblog", null, false));
menu.add(new NavigationMenuItem("Contact Us", "nav_contact", null, false));

//Services Sub Menu
List<NavigationMenuItem> services = new ArrayList<NavigationMenuItem>();
services.add(new NavigationMenuItem("Application Development", "nav_services_applicationdevelopment", null, false));
services.add(new NavigationMenuItem("Consultancy", "nav_services_consultancy", null, false));
services.add(new NavigationMenuItem("Recruitment Services", "nav_services_recruitment", null, false));

//Documents Sub Menu
List<NavigationMenuItem> documents = new ArrayList<NavigationMenuItem>();
documents.add(new NavigationMenuItem("AJAX", "nav_documents_ajax", null, false));
documents.add(new NavigationMenuItem("EJB", "nav_documents_ejb", null, false));
documents.add(new NavigationMenuItem("Hibernate", "nav_documents_hibernate", null, false));
documents.add(new NavigationMenuItem("JBoss", "nav_documents_jboss", null, false));
documents.add(new NavigationMenuItem("JSF", "nav_documents_jsf", null, false));

//Add services to main menu
NavigationMenuItem[] servicesArray = services.toArray(new NavigationMenuItem[0]);
menu.get(2).setNavigationMenuItems(servicesArray);

//Add documents to main menu
NavigationMenuItem[] documentsArray = documents.toArray(new NavigationMenuItem[0]);
//menu.get(3).setNavigationMenuItems(documentsArray);

//Return menu
return menu;
}

public void setContextMenu(List<NavigationMenuItem> contextMenu)
{
//Do nothing
}

public void setHasContextMenu(boolean hasContextMenu)
{
//Do nothing
}

public void setHasMenu(boolean hasMenu)
{
//Do nothing
}

public void setMenu(List<NavigationMenuItem> menu)
{
//Do nothing
}
}

没有评论: