使用struts-menu制作树型菜单实例

新建j2ee工程，工程名称为：struts-menu

Context root URL: /menu

选中Add JSTL libraries to WEB-INF/lib forlder? JSTL版本（随意）

 

以下所有的文件可以从源代码中拷贝

拷贝文件中的以下内容到工程的webroot目录中

images 、 scripts 、 styles 、 templates 四个文件夹

 

拷贝以下文件到 /WEB-INF/ 目录

struts-menu.tld

struts-menu-el.tld

menu-config.xml

 

拷贝以下文件到 /WEB-INF/lib/ 目录

struts-menu-2.3.jar

velocity-1.4.jar

velocity-tools-view-1.0.jar

 

拷贝以下文件到 /src/ 目录

globalMacros.vm

 

拷贝以下文件到 /WEB-INF/lib/ 目录， 此文件是在使用j2ee1.4版本创建工程时才需要

commons-lang-2.0.jar          ， 此文件将在录像包中提供

 

刷新工程

 

创建Struts框架

 

按下 Ctrl + N ，使用向导新增 struts 插件

 

Plugin class: net.sf.navigator.menu.MenuPlugIn

点击 add 按钮，在对话框中填入以下内容

Property： menuConfig

   Value： /WEB-INF/menu-config.xml

 

 

按下 Ctrl + N ，使用向导新增 Action

Use case： find

其它使用默认值

 

在WebRoot目录中新建两个jsp文件 ，index.jsp 、 ok.jsp

 

创建一个 Forward

name： okGo

Path： /ok.jsp

 

修改 index.jsp 文件，内容如下：

< html >

  < head >

    < title > ok </ title >

  </ head >

  < body >

    < a href = "find.do" > Find </ a >

  </ body >

</ html >

 

修改 ok.jsp 文件，内容如下：

<%@ page contentType = "text/html;charset=UTF-8" language = "java" %>

<%@ taglib uri = "/WEB-INF/struts-menu.tld" prefix = "menu" %>

<%@ taglib uri = "/WEB-INF/struts-menu-el.tld" prefix = "menu-el" %>

<%@ taglib uri = "/WEB-INF/c.tld" prefix = "c" %>

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

< html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en" lang = "en" >

< head >

    < title > Dynamic, Database-driven Menu </ title >

    < link rel = "stylesheet" type = "text/css" media = "all"

        href = " < c:url value = "/styles/menuExpandable.css" /> " />

    < script type = "text/javascript"

        src = " < c:url value = "/scripts/menuExpandable.js" /> " ></ script >

    < link rel = "stylesheet" type = "text/css" media = "all"

        href = " < c:url value = "/styles/xtree.css" /> " />

    < script type = "text/javascript"

        src = " < c:url value = "/scripts/xtree.js" /> " ></ script >

    < link rel = "stylesheet" type = "text/css" media = "all"

        href = " < c:url value = "/styles/global.css" /> " />

    < script type = "text/javascript" >

        /* Function for showing and hiding elements that use 'display:none' to hide */

        function toggleDisplay(targetId) {

            if (document.getElementById) {

                target = document.getElementById(targetId);

                if (target.style.display == "none" ) {

                    target.style.display = "" ;

                } else {

                    target.style.display = "none" ;

                }

            }

        }

    </ script >

</ head >

< body >

    < div class = "dynamicMenu" >

        < menu:useMenuDisplayer name = "ListMenu" repository = "repository" >

            < menu:displayMenu name = "DatabaseMenu" />

            < menu:displayMenu name = "StandaloneMenu" />

        </ menu:useMenuDisplayer >

    </ div >

    < div class = "dynamicMenu tree" >

    < script type = "text/javascript" >

        <menu:useMenuDisplayer name= "Velocity" config= "/templates/xtree.html"

            repository= "repository" >

          <c:forEach var = "menu" items= "${repository.topMenus}" >

            <menu-el:displayMenu name= "${menu.name}" />

          </c:forEach>

        </menu:useMenuDisplayer>

    </ script >

    </ div >

</ body >

</ html >

 

创建数据库表

CREATE TABLE `menu_item` (

 `id` bigint(20) NOT NULL default '0',

 `parent_name` varchar(30) default NULL,

 `name` varchar(30) default NULL,

 `title` varchar(30) default NULL,

 `description` varchar(50) default NULL,

 `location` varchar(255) default NULL,

 `target` varchar(10) default NULL,

 `onclick` varchar(100) default NULL,

 `onmouseover` varchar(100) default NULL,

 `onmouseout` varchar(100) default NULL,

 `image` varchar(50) default NULL,

 `altImage` varchar(30) default NULL,

 `tooltip` varchar(100) default NULL,

 `roles` varchar(100) default NULL,

 `page` varchar(255) default NULL,

 `width` varchar(5) default NULL,

 `height` varchar(5) default NULL,

 `forward` varchar(50) default NULL,

 `action` varchar(50) default NULL,

 PRIMARY KEY (`id`)

);

INSERT INTO menu_item (id, name, title) VALUES (1,'DatabaseMenu','Database Menu');

INSERT INTO menu_item (id, parent_name, name, title, location) VALUES (2,'DatabaseMenu','Yahoo','Yahoo Mail','http://mail.yahoo.com');

INSERT INTO menu_item (id, parent_name, name, title, location) VALUES(3,'DatabaseMenu','JavaBlogs','JavaBlogs','http://javablogs.com');

INSERT INTO menu_item (id, name, title, location) VALUES (4,'StandaloneMenu','Standalone Menu','http://raibledesigns.com');

 

 

创建 Hibernate 框架，配置数据库连接，关于数据库连接的配置就不做介绍了，如果不知道如何配置的话请参考以前发布的录像！

记得点击 Copy JDBC Driver and add to classpath 链接

 

打开 MyEclipse Database Explorer 视图，创建 menu_item 的映射文件

 

修改 FindAction.java 文件，内容如下：

import java.util.List;

import javax.servlet.ServletContext;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import javax.servlet.http.HttpSession;

import net.sf.navigator.menu.MenuComponent;

import net.sf.navigator.menu.MenuRepository;

import org.apache.struts.action.Action;

import org.apache.struts.action.ActionForm;

import org.apache.struts.action.ActionForward;

import org.apache.struts.action.ActionMapping;

import org.hibernate.Query;

import org.hibernate.Session;

import org.hibernate.Transaction;

import com.Hibernate.MenuItem;

import com.Hibernate.SessionFactory;

 

public class FindAction extends Action {

 

    public ActionForward execute(

        ActionMapping mapping,

        ActionForm form,

        HttpServletRequest request,

        HttpServletResponse response) {

        //创建连接

                   Session session=SessionFactory.currentSession();

        //创建事务

                   Transaction tx=session.beginTransaction();

        //创建对话

                   Query query=session.createQuery("FROM MenuItem m order by id");

        List list=query.list();

        //事务提交

                   tx.commit();

        if(list.size()<0)

            return mapping.getInputForward();

        MenuRepository repository = new MenuRepository();

        HttpSession httpsession=(HttpSession)request.getSession();

        ServletContext application=(ServletContext)httpsession.getServletContext();

        MenuRepository defaultRepository = (MenuRepository)application.getAttribute(MenuRepository.MENU_REPOSITORY_KEY);

        repository.setDisplayers(defaultRepository.getDisplayers());

        for (int i=0; i < list.size(); i++) {

            MenuComponent mc = new MenuComponent();

            MenuItem mi=(MenuItem) list.get(i);

            String name = mi.getName();

            mc.setName(name);

            String parent = (String) mi.getParentName();

            System.out.println(name + ", parent is: " + parent);

            if (parent != null) {

                MenuComponent parentMenu = repository.getMenu(parent);

                if (parentMenu == null) {

                    System.out.println("parentMenu '" + parent + "' doesn't exist!");

                    // create a temporary parentMenu

                    parentMenu = new MenuComponent();

                    parentMenu.setName(parent);

                    repository.addMenu(parentMenu);

                }

                mc.setParent(parentMenu);

            }

            String title = (String)mi.getTitle();

            mc.setTitle(title);

            String location = (String) mi.getLocation();

            mc.setLocation(location);

            repository.addMenu(mc);

        }

        request.setAttribute("repository", repository);

        return mapping.findForward("okGo");

    }

}

 

以上代码是使用了 hibernate 操作数据，得到一个数据集，并将数据集添加到 MenuRepository中

然后在jsp页面中使用以下代码显示树型菜单

< menu:useMenuDisplayer name = "ListMenu" repository = "repository" >

            < menu:displayMenu name = "DatabaseMenu" />

            < menu:displayMenu name = "StandaloneMenu" />

        </ menu:useMenuDisplayer >

 

menu-config.xml 文件中的内容已经被精减了，如果要使用 XML 文件来配置菜单的话，请查看 struts-menu 的示例

代码完成，现在进行测试！