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/