struts-menu简介内容分析

struts-menu简介内容分析

struts-menu简介内容分析

目前版本 1.3, 由此下载 binary/source 文件


在网页开发的时候,我们常常需要用到一些选单(选 择菜单), 可能是下拉选单, 可能是标签式选单, 可能是树状选单, struts-menu, 帮我们实现了一些常用的选单, 可以 节省我们开发的的时间, 目前提供的有以下几种.
  • SimpleMenuDisplayer
  • DropDownMenuDisplayer
  • CoolMenuDisplayer
  • CoolMenuDisplayer4
  • ListMenuDisplayer
  • TabbedMenuDisplayer
让我们先来安装 struts-menu 的范例, 你可以在解压缩的目录中找到一个 struts-menu.war 的文件, 将他放到 %TOMCAT_HOME%/webapps/ 之下, 接着使用 http://localhost:8080/struts-menu/ 就可以看到了.


SECTION 02 struts-menu 的安装

  1. 将 /lib/struts-menu.jar 放到 WEB-INF/lib/ 之下
  2. 将 /lib/struts-menu.tld 放到 WEB-INF/lib/ 之下
  3. 修改 web.xml 加入 taglib 的调用
    <taglib>
      <taglib-uri>/WEB-INF/struts-menu.tld</taglib-uri>
      <taglib-location>/WEB-INF/struts-menu.tld</taglib-location>
    </taglib>
    
  4. 你的 jsp 程序需要加入.
    <%@ taglib uri="/WEB-INF/struts-menu.tld" prefix="menu" %>
    
  5. 修改你的 WEB-INF/struts-config.xml, 在最后加入 plugin
    <plug-in className="com.fgm.web.menu.MenuPlugIn">
      <set-property property="menuConfig" value="/WEB-INF/menu-config.xml"/>
    </plug-in>
    
  6. 建立 /WEB-INF/menu-config.xml 作为 Menu 的配置文件, 以下 是范例文件
    <?xml version="1.0" 
    
    encoding="UTF-8" ?>
    
    <MenuConfig>
     <Displayers>
      <Displayer   name="DropDown"
                     type="com.fgm.web.menu.displayer.DropDownMenuDisplayer"/>
      <Displayer   name="Simple"
                     type="com.fgm.web.menu.displayer.SimpleMenuDisplayer"/>
      <Displayer   name="CoolMenu"
                     type="com.fgm.web.menu.displayer.CoolMenuDisplayer"/>
      <Displayer   name="CoolMenu4"
                     type="com.fgm.web.menu.displayer.CoolMenuDisplayer4"/>
      <Displayer   name="MenuForm"
                     type="com.fgm.web.menu.example.PermissionsFormMenuDisplayer
    
    "/>
      <Displayer   name="ListMenu"
                     type="com.fgm.web.menu.displayer.ListMenuDisplayer"/>
      <Displayer   name="TabbedMenu"
                     type="com.fgm.web.menu.displayer.TabbedMenuDisplayer"/>
     </Displayers>
     <Menus>
    
      <Menu  name="indexMenu"  title="Examples">
        <Item  name="indexMenu1"  title="Basic Example"  
                   toolTip="Shows usage of the menu displayers using defaults."
                   page="/menutest1.jsp"/>
        <Item  name="indexMenu2"  title="Advanced Example"
                   toolTip="Shows customized menu displays."
                   page="/menutest2.jsp"/>
        <Item  name="indexMenu3"  title="CoolMenu Example"
                   toolTip="Shows menu using CoolMenu3"
                   page="/coolmenu1.jsp"/>
        <Item  name="indexMenu4"  title="CoolMenu Example - With Form"
            
    
    toolTip="Shows menu using CoolMenu3 with forms."
                   page="/coolmenu2.jsp"/>
        <Item  name="indexMenu5"  title="Permissions Example"
            
    
    toolTip="Example use of menu disable and permission checking with CoolMenus."
                   page="/permissionsForm.jsp"/>
        <Item  name="indexMenu6"  title="CoolMenu4 Example"
                   toolTip="Shows menu using CoolMenu4"
                   page="/coolmenu4.jsp"/>
        <Item  name="indexMenu7"  title="Expandable DHTML List Example"
                   toolTip="Shows Expandable DHTML list"
                   page="/dhtmlExpandable.jsp"/>
        <Item  name="indexMenu7"  title="Dropdown DHTML List Example"
                   toolTip="Shows Dropdown DHTML list"
                   page="/dhtmlDropdown.jsp"/>
        <Item  name="indexMenu8"  title="Roles Menu Example"
                   toolTip="Shows Menus based on user's role"
                   page="/rolesMenu.jsp"/>
        <Item  name="indexMenu9"  title="Tabbed Menu Example [New!]"
                   toolTip="Shows Tabbed-based Menu"
                   forward="tabbedMenu"/>
      </Menu>
    </MenuConfig>  
    



SECTION 03 基本型选单 - SimpleMenuDisplayer 的 taglib 使用方法

我们可以简单的使用 menu:useMenuDisplayer name="Simple" 去调用 SimpleMenuDisplayer, 接着指定 menu:displayMenu 指定 indexMenu, 将可以将 menu-config.xml 的配置的选单组件显示出來. 如果是多层的状况,也会內缩样式呈现.
<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib uri="/WEB-INF/struts-menu.tld" prefix="menu"%>
<menu:useMenuDisplayer name="Simple">
    <menu:displayMenu name="indexMenu"/>
</menu:useMenuDisplayer>



SECTION 04 下拉型选单 - DropDownMenuDisplayer 的 taglib 使用方法

下拉型选单, 就是可以展开及关闭,使用的方法与 SimpleMenuDisplayer 雷同,只需要改成 menu:useMenuDisplayer name="DropDown" 就 可以了.


SECTION 05 浮动式选单 - CoolMenuDisplayer 的 taglib 使用方法

浮动式选单除了需要改成 menu:useMenuDisplayer name="CoolMenu" 或 "CoolMenu4" 可以了. CoolMenu 还需要取得 javascript coolmenu3.js, CoolMenu4 则是需要取得 javascript coolmenu4.js 及 cm_addins.js, 并且要配置相关的 coolmenu-config.js, 你可以配置他显示的图形及 颜色等等.


SECTION 06 树状选单 - ListMenuDisplayer 的 taglib 使用方法

树状选单则是把 menu:useMenuDisplayer name 设为 "ListMenu". 可以加入 menuExpandable.js, 调用 expandMenus() 将所有子节点显 示出來.


SECTION 07 标签选单 - TabbedMenuDisplayer 的 taglib 使用方法

标签选单將 menu:useMenuDisplayer name 设为 "TabbedMenu",并且 加入 tabs.js 即可,


SECTION 08 结论

struts-menu 还可以和 permission , role 结合, 让具有该权限的使用者才能够看到及使用那些选项, 有兴趣的可以参 考范例, 我想, 台湾孙三才先生的 jspwidget 的 taglib 组件设计风格 更吸引人, 如果能够结合这两项, 并且修改为各种浏览器都可以正常浏览, 那么 web ui-component 开发的梦想, 将会到來...
参考 -- 相关书目或相关文章

  1. struts
    http://jakarta.apache.org/struts/
  2. struts-menu
    http://sourceforge.net/pr ojects/struts-menu/