[Apache Click快速开发]Click的组件(二) Menu、PickList和自定义TextArea

分类： Java 2011-10-09 17:50 89人阅读 评论(1) 收藏 举报

Menu组件：

Apache  Click的菜单组件是可配置的，如果要使用它，必须提供一个提供菜单结构的xml文件，可以任意命名，这里就叫menu.xml好了。

首先定义层级结构（第二级menu节点表示一个菜单项）

view plaincopy to clipboard?

1. <?xml version="1.0" encoding="UTF-8" standalone="yes"?>  
2. <menu>  
3.   <menu label="Home" path="#" imageSrc="/imgs/home.png" title="Home Page">  
4. <menu label="Open" path="#" title="Open Files" target="_blank"/>  
5. <menu label="Setting" path="#" title="Settings" target="_blank"/>  
6. <menu label="Exit" path="#" title="Exit"/>  
7.   </menu>  
8.   <menu label="Demos" path="#" imageSrc="/imgs/controls.png" title="Click Demos">  
9. <menu label="HelloPage" path="helloPage.htm" title="Hello Page" target="_blank"/>  
10. <menu label="HelloControls1" path="helloControls.htm" title="Hello Controls" target="_blank"/>  
11. <menu label="HelloControls2" path="helloControls2.htm" title="Hello Controls" target="_blank"/>  
12.   </menu>  
13. </menu>  

定义了菜单层级结构后，可以将web工程的任意位置，前提是对于你来说比较方便，这里就放在WEB-INF/目录（Apache Click默认的位置为classpath或者WEB-INF/）

之后就可以在Page中初始化菜单，我尝试在构造函数中将它初始化并添加到model中，但发现这样不起作用。官方的做法是重载onInit方法，并在这里将菜单初始化。

view plaincopy to clipboard?

1. @Override  
2. public void onInit() {  
3. super.onInit();  
4. MenuFactory mf = new MenuFactory();  
5. //testMenu = mf.getRootMenu();   
6. testMenu = mf.getRootMenu("myMenu", "/WEB-INF/menu.xml");  
7. addControl(testMenu);     
8. }  

这样的话，在htm中使用$myMenu可以将菜单显示出来。

但如果不在head标签中加入$headElements,你可能看到下面的样子

PickList组件：

PickList的实现为什么节省了大量的书写javascript代码的时间，也使得开发者摆脱了在html页面中麻烦地初始化选项值的烦恼。

view plaincopy to clipboard?

1. private PickList pickList = new PickList("myPickList", "想去的地方");  

view plaincopy to clipboard?

1. pickList.setHeaderLabel("", "");  
2. pickList.add(new Option("001", "北京故宫"));  
3. pickList.add(new Option("002", "北京长城"));  
4. pickList.add(new Option("003", "北京天安门"));  
5. pickList.add(new Option("004", "四川九寨沟"));  
6. pickList.add(new Option("005", "西藏布达拉宫"));  
7. pickList.add(new Option("006", "西藏雪域天山"));  
8. pickList.add(new Option("007", "其他"));  
9. pickList.addSelectedValue("001");  
10. form.add(pickList);  

自定义TextArea：
Click中，可以继承TextArea类来自定义文本区域，可以整合著名的fckeditor、yui editor等等，非常之方便，充分体现了Click组件设计的灵活性。

view plaincopy to clipboard?

1. public class FCKTextArea extends TextArea {  
2.   
3.     @Override  
4.     public List<Element> getHeadElements() {  
5.         // TODO Auto-generated method stub   
6.         headElements = super.getHeadElements();  
7.         if(headElements!=null){  
8.             headElements.add(new JsImport("/js/ckeditor/ckeditor.js"));  
9.         }  
10.         return headElements;  
11.     }  
12.       
13. }  

我的ckeditor文件包是位于工程webroot/js下面。有了自定义文本域后，在Page中的使用变得简单

view plaincopy to clipboard?

1. private FCKTextArea remark;  

view plaincopy to clipboard?

1. remark = new FCKTextArea();  
2. remark.setCols(70);  
3. remark.setRows(11);  
4. remark.setAttribute("class", "ckeditor");  
5. remark.setName("remark");  
6. remark.setLabel("留言");  
7. form.add(remark);  

最后，在htm页面中讲表单显示以后漂亮的fckeditor就有了。。这得益于Click中AbstractControl提供的getHeadElements抽象方法，有了它，开发者就可以导入样式表和Javascript脚本文件，从而实现自定义的组件。That's cool