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