【轉載】Myfaces Tomahawk--JSCookMenu教程
Myfaces Tomahawk -- JSCookMenu教程
by:icess (blog: http://blog.matrix.org.cn/page/icess )
JSCookMenu(http://jscook.yuanheng.org/JSCookMenu/)是一位留學UCLA(University of California Los Angeles,加州大學洛杉磯分校)的中國留學生(袁衡 http://www.cs.ucla.edu/~heng/)創建的一個JS菜單開源項目。在很多項目上都有運用。Apache 的myfaces集成了JSCookMenu以方便JSF用戶使用JSCookMenu。
要使用Myfaces的Tomahawk的JSCookMenu需要和3個tab打交道
l t:jscookMenu
(http://www.hexiao.cn/myfaces/tlddoc/tomahawk-1.1.3-tlddoc/t/jscookMenu.html)
t:navigationMenuItem
(http://www.hexiao.cn/myfaces/tlddoc/tomahawk-1.1.3-tlddoc/t/navigationMenuItem.html)
一、t:jscookMenu
用來控制menu的主題風格,t:jscookMenu有兩個必須的屬性layout,theme分別用于指定menu的布局和主題, 其取值范圍在Tomahawk中分別為
layout: hbr, hbl, hur, hul, vbr, vbl, vur, vul
themes: ThemeIE, ThemeMiniBlack, ThemeOffice, ThemePanel
如果要使用自定義主題,恐怕要修改Tomahawk的源代碼了, 但是你可以在上面的四個主題基礎上修改主題,只要保證里面用到的資源名字不改變就可以不用修改源代碼使用自定義主題了.
t:jscookMenu還有幾個JSF tag中的標準屬性(id, binding, rendered,
immediate,enabledOnUserRole,visibleOnUserRole);
另外還有三個可能你會經常使用的屬性javascriptLocation , imageLocation 和 styleLocation;
javascriptLocation 屬性可以指定一個目錄來加載JSCookMenu需要的JS文件. 如果沒有指定則利用
ExtensionsFilter或者AddResource從tomahawk-1.1.4-SNAPSHOT.jar中加載. 注意: 如果你使用該屬性,必須保證JSCookMenu的兩個重要的JS文件(JSCookMenu.js,MyFacesHack.js在不久的將來MyFacesHack.js可能會消失 ^_^)
在所給出的目錄下. 然后在該目錄下把每個主題要用到的js文件放到以主題名字命名的文件夾中. 例如 我使用了該屬性
<t:jscookMenu layout="vbl" theme="ThemeIE" javascriptLocation="css/jscookmenu">
則在css/jscookmenu目錄中的文件結構如下:
- jscookmenu
- ThemeIE
theme.js
JSCookMenu.js
MyFacesHack.js
必須保證上面的目錄結構, 不然會找不到js文件.
imageLocation 屬性用來指定一個目錄來加載JSCookMenu用到的圖片資源. 如果指定該屬性則在指定的目錄下面一定要有相應的圖片, 圖片的命名為 在原來主題中的圖片名字前面加上主題名字. 例如我指定了該屬性:
<t:jscookMenu layout="vbl" theme="ThemeIE" imageLocation="css/jscookmenu/ThemeIE"
javascriptLocation="css/jscookmenu">
則在ThemeIE目錄下面一定要有該主題使用到的三個圖片,在原來的主題包中這三個圖片的名字分別
為,folder.gif,arrow.gif,link.gif. 現在由于使用到了上面的屬性, 所以要把這3個圖片的名字改為(主題名字+
原來的名字)ThemeIEfolder.gif, ThemeIEarrow.gif,ThemeIElink.gif
styleLocation用來指定一個目錄來加載JSCookMenu用到的主題css文件. 如果指定了該屬性,則在指定的目錄下面把每個主題要用到的css文件放到以主題名字命名的文件夾中. 例如:
<t:jscookMenu layout="vbl" theme="ThemeIE" styleLocation="css/jscookmenu"
imageLocation="css/jscookmenu/ThemeIE" javascriptLocation="css/jscookmenu">
則在jscookmenu目錄下面要建立一個ThemeIE的目錄, 然后 在ThemeIE目錄中放入theme.css文件.
使用上面的屬性時候,要注意imageLocation 屬性使用.
上面的資源文件在tomahawk-1.1.4-SNAPSHOT.jar中可以找到, 目錄如下:
"org"apache"myfaces"custom"navmenu"jscookmenu"resource
一般來說只要使用t:jscookMenu的layout,theme屬性就可以了. 對JSCookMenu不是很熟悉的不要輕易使用上面的屬性,以免找不到資源文件.
t:jscookMenu只是控制menu的主題和資源文件的加載.要想讓JSCookMenu發揮作用,少不了后面的兩個標簽
t:navigationMenuItems 和t:navigationMenuItem(這兩個標簽類似于f:selectitems和f:selectitem ). 下面我
們就來看看這兩個標簽吧.
二、t:navigationMenuItem
該標簽的主要屬性有
id,actionListener,itemLabel,itemValue,action,rendered,icon,split等.這些屬性的使用都是很簡單的請參考這里 http://www.hexiao.cn/myfaces/tlddoc/tomahawk-1.1.3-tlddoc/t/navigationMenuItem.html
如果同時指定了itemLabel和icon則menuItem會同時顯示圖片和文字. 如果指定了split="true"則該MenuItem會與上面的MenuItem用一個分割符號分割開.一個示例:
<t:navigationMenuItem id="nav_1" actionListener="#{navigationMenu.actionListener}"
itemLabel="返回首頁" itemValue="go_home" icon="images/myfaces.gif"
action="go_home" split="true" />
t:navigationMenuItems