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打交道 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:navigationMenuItems(http://www.hexiao.cn/myfaces/tlddoc/tomahawk-1.1.3-tlddoc/t/navigationMenuItems.html ) .有时也要用到类 org.apache.myfaces.custom.navmenu.NavigationMenuItem; 在web.xml文件中还要配置myfaces的filter,请参考MyFaces的网站来配置(http://myfaces.apache.org/tomahawk/extensionsFilter.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是通过mbean来通过编程的方式来生成Menu. 这在MenuItem是动态的时候很有用. 该标签只有3个属性binding, value , 和id. 通过value来取得
org.apache.myfaces.custom.navmenu.NavigationMenuItem
(http://www.hexiao.cn/myfaces/NavigationMenuItem.html)的一个集合.
示例:
public List getPanelNavigationItems() {
List menu = new ArrayList();
// Products
NavigationMenuItem products = getMenuNaviagtionItem("#{example_messages
['panelnav_products']}", null);
menu.add(products);
products.add(getMenuNaviagtionItem("#{example_messages['panelnav_serach']}", "#
{navigationMenu.getAction2}")); // 在NavigationMenuItem 中可以添加二级菜单
products.add(getMenuNaviagtionItem("#{example_messages['panelnav_serach_acc']}", "#
{navigationMenu.getAction2}"));
NavigationMenuItem item = getMenuNaviagtionItem("#{example_messages
['panelnav_search_adv']}", "#{navigationMenu.getAction2}");
item.setActive(true);
item.setOpen(true);
item.setTarget("_blank");
products.add(item);
// Shop
menu.add(getMenuNaviagtionItem("#{example_messages['panelnav_shop']}", "#
{navigationMenu.getAction2}"));
// Corporate Info
NavigationMenuItem corporateInfo = getMenuNaviagtionItem("#{example_messages
['panelnav_corporate']}", null);
menu.add(corporateInfo);
corporateInfo.add(getMenuNaviagtionItem("#{example_messages['panelnav_news']}", "#
{navigationMenu.getAction2}"));
item = getMenuNaviagtionItem("#{example_messages['panelnav_investor']}", "#
{navigationMenu.getAction3}");
//item.setIcon("images/arrow-first.gif");
item.setDisabled(true);
corporateInfo.add(item);
// Contact
menu.add(getMenuNaviagtionItem("#{example_messages['panelnav_contact']}", "#
{navigationMenu.getAction2}"));
// External Link
item = getMenuNaviagtionItem("External Link", null);
item.setExternalLink("#{example_messages['external_link']}");
item.setTarget("_blank");
menu.add(item);
return menu;
}
private static NavigationMenuItem getMenuNaviagtionItem(String label, String action) {
NavigationMenuItem item = new NavigationMenuItem(label, action);
item.setActionListener("#{navigationMenu.actionListener}");
item.setValue(label);
return item;
}
jsp代码:
<t:jscookMenu id="menu2" layout="hbr" theme="ThemeOffice" styleLocation="css/jscookmenu">
<t:navigationMenuItems id="navitems" value="#{navigationMenu.panelNavigationItems}" />
</t:jscookMenu>
最后关于使用JSCookMenu的导航设置,请使用导航规则来控制( 必要时候可以使用<redirect/>属性 )以方便导航管理和避免多级目录的导航混乱问题 。 最后有个综合示例来演示如何使用JSCookmenu，做好后将放出， 敬请关注JSF中文社区：http://www.hexiao.cn/jsf/
