posts - 309, comments - 6940, trackbacks - 0, articles - 3
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

【转载】Myfaces Tomahawk--JSCookMenu教程

Posted on 2008-01-16 15:25 诗特林 阅读(2383) 评论(1)  编辑  收藏 所属分类: JSF
 

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


评论

# re: 【转载】Myfaces Tomahawk--JSCookMenu教程  回复  更多评论   

2008-02-28 13:32 by 新鲜鱼排
如何定义下拉菜单中链接文字的字体,以及Hover情况的字体。
谢谢。
Email: dutguoyi@hotmail.com

只有注册用户登录后才能发表评论。


网站导航: