【转载】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