使用struts-menu实现动态菜单 MenuRepository

 入门（一个简单的例子）：

 

1.开发环境

 

 

   myeclipse + jdk1.4

 

 

2.建立工程（project）

 

 

  在myeclipse下建立一个web project,名字为“test-menu”.

 

3. 引入struts

 

   点击菜单栏“myeclipse->add struts capabilities” 引入 struts。

 

4.使用struts-menu

 

  1. 将struts-menu.jar（还需要一些jar包）拷贝到WEB-INF/lib目录下；

 

  2. 将struts-menu.tld拷贝到WEB-INF目录下；

  3.将struts-menu.war中的scripts、styles、images，templates目录拷贝到你的应用"/"目录下

  4.修改struts-config.xml，在其中添加如下plugin代码：
   
       
    

  5. 配置menu-config.xml（此文件位于WEB-INF目录下）

    内容为：

 

     
   

   
       
   

  它将http://locaohost:8080/test.do 的请求映射给test/test.java处理

 7.test.java的内容为：

 

/**
 *
 */
package test;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.navigator.menu.*;

import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;

/**
 * @author renshui
 *
 */
public class test extends Action{

 public ActionForward execute(ActionMapping mapping, ActionForm form,
   HttpServletRequest request, HttpServletResponse response) {
  
  MenuRepository repository = new MenuRepository();
  
  MenuRepository defaultRepository =(MenuRepository)this.getServlet().getServletContext
        ().getAttribute(MenuRepository.MENU_REPOSITORY_KEY);
       
  
  repository.setDisplayers(defaultRepository.getDisplayers());

  MenuComponent mc = new MenuComponent();
       
  mc.setName("child");
  
  mc.setTitle("child");
  
  MenuComponent parentMenu = new MenuComponent();
  
  parentMenu.setName("parent");
  
  parentMenu.setTitle("parent");
  
  repository.addMenu(parentMenu);
  
  mc.setParent(parentMenu);
  
  
  repository.addMenu(mc);
  
  request.setAttribute("repository", repository);
  
  return mapping.findForward("b");
 }
}

在这段代码里，建立了一个

 

 parent

 

     child

 

的菜单，转向b.jsp显示

8.   b.jsp的内容为

 

 

9.部署和运行，

在地址栏中输入http://localhost:8080/test-menu/test.do效果如下

 

 

更进一步：

 

   通过上面那个简单的例子，我们已经知道如何建立一个简单的菜单了。但是菜单的展现形式并不是我们所熟悉的类windows目录结构的形式，很容易使得用户用起来感到别扭，那么怎么实现这种效果（如下图）呢？

 
 

下面是我的实现步骤：

 

 

（1）-（7）同上。

 

（8）

前端显示代码如下：

 

 

  


 
 

 

  跟前面例子不同的地方主要是阴影区域，menuDisplayer变成了Velocity，

并且通过config="/templates/xtree.html"来控制显示方式。

 

  但是默认的显示方式可能并不是我们想要的，如果想实现自己的效果就要自己去改写xtree.html文件。

该文件的原始内容是这样的：

 
 

 

代码分析：

 

var $node = new WebFXTree('$title'#if($menu.url),'$!menu.url'#end);

新建一个根节点。

 

 var $node = new WebFXTreeItem('$title'#if($menu.url),'$!menu.url'#end)； //新建子节点

 

${menu.parent.name}.add($node);//建立起节点之间的父子关系。

 

 

 

如果使用如上默认的xtree.html作为显示模版，则将所有子节点的图标为“基础理论”“其它类型”前面的图标。有时候这跟我们的本意是不一样的。比如这些叶子节点语义上是“目录”，只不过当前没有“文件”罢了，而如果如下显示很可能给用户一个错觉，那就是把“基础理论”“其它类型”这些“目录”当成“文件”看了。

 

 

 

我们可以通过改变xtree.html来消除这种歧异，修改后的文件如图所示：

 

 

  阴影部分为增加的内容：

 

 
 

我们先取出再test.java里为menu的url属性

  #set ($url = $displayer.getMessage($menu.url))

 

阴影部分根据url 判断当前这个menu是不是“文件”，如果url是真的是文件则按照默认方式显示，如果不是则按照“目录显示”。

 

 

 

还有一个问题：

 

 一般含有树状菜单的页面都被设计成frameset,

 

  

我们点击树的一个节点，会在main页面中显示返回的页面。这是通过设置

 

""超链接的 target="main"来实现的。

在struts-menu里，你如果使用  DropDownMenuDisplayer，可以设置menu的target属性，但是如果你使用VelocityMenuDisplayer显示，设置target属性

是不会起作用的。因为真正实现显示的是scripts/xtree.js,而xtree.js会对menu设置的target视而不见，那只能通过修改xtree.js的代码来设置target了。

 

在WebFXTreeAbstractNode的定义中，增加了一个target属性：

 

 

this.target = "Main"; //Main是显示结果frame的名字

 

 

这样target的问题就解决了！