ZK示例

1、分页同时控制2个grid

使用paginal属性

[html]  view plain  copy

1. <paging id="pg" pageSize="4"/>   
2. <hbox>   
3.     <grid width="300px" mold="paging" paginal="${pg}">  
4. </grid>   
5.     <grid width="300px" mold="paging" paginal="${pg}">  
6. </grid>   
7. </hbox>  

2、辅助表头

使用auxhead、auxheader指定，支持colspan、rowspan属性（列表头column并不支持）。

辅助表头必须和column一起使用，可以被用于grid,listbox,tree（而column/columns仅可以被grid使用）

[html]  view plain  copy

1. <grid width="500px">   
2.     <auxhead>   
3.         <auxheader label="H1'07" colspan="6"/>   
4.         <auxheader label="H2'07" colspan="6"/>   
5.     </auxhead>   
6.     <auxhead>   
7.         <auxheader label="Q1" colspan="3"/>   
8.         <auxheader label="Q2" colspan="3"/>   
9.         <auxheader label="Q3" colspan="3"/>   
10.         <auxheader label="Q4" colspan="3"/>   
11.     </auxhead>   
12.     <columns>   
13.         <column label="Jan"/><column label="Feb"/><column label="Mar"/>   
14.         <column label="Apr"/><column label="May"/><column label="Jun"/>   
15. <column label="Jul"/><column label="Aug"/><column label="Sep"/>   
16.         <column label="Oct"/><column label="Nov"/><column label="Dec"/>   
17.     </columns>  

3、特殊属性spans

用于控制将一个元素跨越几列。spans是一个整数列表，以逗号分隔，第一个数表示第一个元素跨越的列数，依次类推。若省略数字，则表示跨越1列

[html]  view plain  copy

1. <grid width="500px">   
2.     <columns>   
3.         <column label="Left" align="left"/><column label="Center" align="center"/>   
4.         <column label="Right" align="right"/><column label="Column 4"/>   
5.         <column label="Column 5"/><column label="Column 6"/>   
6.     </columns>   
7.     <rows>   
8.         <row>   
9.             <label value="Item A.1"/><label value="Item A.2"/>   
10.             <label value="Item A.3"/><label value="Item A.4"/>   
11.             <label value="Item A.5"/><label value="Item A.6"/>   
12.         </row>   
13.         <row spans="1,2,2">   
14.             <label value="Item B.1"/><label value="Item B.2"/>   
15.             <label value="Item B.4"/><label value="Item B.6"/>   
16.         </row>   
17.         <row spans="3">   
18.             <label value="Item C.1"/><label value="Item C.4"/>   
19.             <label value="Item C.5"/><label value="Item C.6"/>   
20.         </row>   
21.         <row spans=",,2,2">   
22.             <label value="Item D.1"/><label value="Item D.2"/>   
23.             <label value="Item D.3"/><label value="Item D.5"/>   
24.         </row>   
25.     </rows>   
26. </grid>  

4、菜单

• menubar：一个菜单栏，是菜单项或菜单集合的最顶层容器。
• menu：一个菜单，是弹出式菜单的容器。
• menupopup：一个弹出式菜单，是菜单项或菜单集合的容器。是menu的子组件，且当menu被点击时才出现。
• menuseparator：一个菜单内的分割栏，需要放置在menupopup内
  
• menuitem：一个菜单项，menu的私有命令。可以被放置在menubar或menupopup内。

[html]  view plain  copy

1. <menubar id=”menubar” width="300px">   
2.     <menu label="File">   
3.         <menupopup>   
4.             <menuitem label="New"/>   
5.             <menuitem label="Open"/>   
6.             <menuseparator/>   
7.             <menuitem label="Exit"/>   
8.         </menupopup>   
9.     </menu>   
10.     <menu label="Help">   
11.         <menupopup>   
12.             <menuitem label="Index"/>   
13.             <menu label="About">   
14.                 <menupopup>   
15.                     <menuitem label="About ZK"/>   
16.                     <menuitem label="About Potix"/>   
17.                 </menupopup>   
18.             </menu>   
19.         </menupopup>   
20.     </menu>   
21. </menubar>  
22. <checkbox label=”Vertical orient”>  
23.     <attribute name=”onCheck”>  
24.         menubar.orient=self.checked?”vertical”:”horizontal”;  
25.         menubar.width=self.checked?”100px”:”200px”;  
26.     </attribute>  
27. </checkbox>  

（1）<menuitem href=”http://xxxx”/>通过href属性指定一个超链接

（2）默认情况，弹出菜单要在menu被点击时打开，可以设置autodrop为true，改变为当鼠标移动到菜单上方时自动打开。

（3）可以设置orient属性为vertical控制菜单的方向为竖直，默认horizontal

5、context、tooltip、popup属性

（1）context：当用户右键点击一个带有context属性的组件时，会显示id与context值相同的popup或menupopup组件。

（2）tooltip：当用户鼠标经过一个带有tootip属性的组件时，会显示。。。。

（3）popup：当用户点击一个带有popup属性的组件时，会显示。。。

[html]  view plain  copy

1. <label value="Move Mouse Over Me!" tooltip="editPopup"/>   
2. <separator bar="true"/>   
3. <label value="Click Me!" popup="any"/>  
4. <menupopup id="editPopup">   
5. <menuitem label="Undo"/>   
6.     <menuitem label="Redo"/>   
7.     <menu label="Sort">  
8.         <menupopup>   
9.              <menuitem label="Sort by Name" autocheck="true"/>   
10.              <menuitem label="Sort by Date" autocheck="true"/>   
11.         </menupopup>   
12.      </menu>   
13. </menupopup>  
14. <popup id="any" width="300px">   
15.     <vbox>   
16.          ZK simply rich.   
17.          <toolbarbutton  label="ZK  your  killer  Web  application  now!" href="http://zk1.sourceforge.net"/>   
18.     </vbox>   
19. </popup>   

6、下拉列表

通过指定listbox的mold属性为select，可以创建一个下拉列表

【不能为下拉列表指定多列，同时也不要为其指定listhead子组件（否则在二级联动时，改变第一个下拉列表，执行A方法，方法中更新第二个列表并通知更新，此时页面点击第二个下拉列表时会重复执行一次更新，出现闪动，要点击2次才能选择）】

7、列表数据左移右移

[html]  view plain  copy

1. <hbox>   
2.    <listbox id="src" rows="0" multiple="true" width="200px">   
3.       <listhead>   
4.          <listheader label="Population"/>   
5.          <listheader label="Percentage"/>   
6.       </listhead>   
7.       <listitem id="a" value="A">   
8.          <listcell label="A. Graduate"/>   
9.          <listcell label="20%"/>   
10.       </listitem>   
11.       。。。  
12.       <listitem id="d" value="D">   
13.          <listcell label="D. Others"/>   
14.          <listcell label="17%"/>   
15.       </listitem>   
16.    </listbox>   
17.    <vbox>   
18.       <button label="=>" onClick="move(src, dst)"/>   
19.       <button label="<=" onClick="move(dst, src)"/>   
20.    </vbox>  
21.    <listbox id="dst" checkmark="true" rows="0" multiple="true" width="200px">   
22.       <listhead>   
23.          <listheader label="Population"/>   
24.          <listheader label="Percentage"/>   
25.       </listhead>   
26.       。。。   
27.    </listbox>   
28.    <zscript>   
29. void move(Listbox src, Listbox dst)   
30. {   
31.             Listitem s = src.getSelectedItem();   
32.             if (s == null)   
33.                 Messagebox.show("Select an item first");   
34.             else   
35.                 s.setParent(dst);   
36. }   
37.    </zscript>   
38. </hbox>  

8、tree

• tree：定义一棵树。
• treecols：定义树的列，一个treecol代表一列。
• treechildren：定义当前节点的子节点，可以是tree或treeitem的子节点。
• treeitem：定义一个树节点，如果其中包含treechildren则为父节点，否则为叶子节点。
• treerow：定义叶子节点的一行数据，一个叶子节点的treeitem只能定义一个treerow。
• treecell：定义一行中的数据元素，如果treerow中包含多个treecell则显示多列。
  

（1）带复选框的静态树

[html]  view plain  copy

1. <window width="500px">  
2.     <zscript><![CDATA[//@DECLARATION 
3.     public void showSelection(){ 
4.         info.setValue("selected item " + tree.getSelectedItem().getLabel()); 
5.     } 
6.     ]]>  
7.     </zscript>  
8. <tree id="tree" rows="8"  onSelect="showSelection()"  multiple="true" checkmark="true">  
9.         <treecols sizable="true">  
10.             <treecol label="Name" />  
11.             <treecol label="Description" />  
12.         </treecols>  
13.         <treechildren>  
14.             <treeitem>  
15.                 <treerow>  
16.                     <treecell label="Item 1" />  
17.                     <treecell label="Item 1 description" />  
18.                 </treerow>  
19.             </treeitem>  
20.             <treeitem>  
21.                 <treerow>  
22.                     <treecell label="Item 2" />  
23.                     <treecell label="Item 2 description" />  
24.                 </treerow>  
25.                 <treechildren>  
26.                     <treeitem open="false">  
27.                         <treerow>  
28.                             <treecell label="Item 2.1" />  
29.                         </treerow>  
30.                         <treechildren>  
31.                             <treeitem>  
32.                                 <treerow>  
33.                                     <treecell label="Item 2.1.1" />  
34.                                 </treerow>                                                        </treeitem>  
35.                             <treeitem >  
36.                                 <treerow>  
37.                                     <treecell label="Item 2.1.2" />  
38.                                 </treerow>  
39.                             </treeitem>  
40.                         </treechildren>  
41.                     </treeitem>                     
42.                 </treechildren>  
43.             </treeitem>  
44.             <treeitem label="Item 3" />             
45.         </treechildren>  
46.     </tree>  
47.     <label id="info"/>  
48. </window>  

（2）动态生成树

每次仅加载当前看到的节点，当点击节点时再显示下级节点

页面：

[html]  view plain  copy

1. <zk>                                             
2.     <zscript>                   
3.     import org.zkoss.zksandbox.tree.BinaryTreeModel;  
4.     BinaryTreeModel btm = new BinaryTreeModel(new ArrayList(new org.zkoss.zksandbox.BigList(1000)));  
5.     </zscript>  
6.     <tree id="tree" model="${btm}" vflex="1"/>  
7. </zk>  

BinaryTreeModel：

[java]  view plain  copy

1. public class BinaryTreeModel extends AbstractTreeModel{   
2.     private ArrayList _tree =null;   
3.     public BinaryTreeModel(List tree){  
4.         super(tree.get(0));  
5.         _tree = (ArrayList)tree;  
6.     }   
7.     public Object getChild(Object parent, int index) {  
8.         int i = _tree.indexOf(parent) *2 +1 + index;  
9.         if( i>= _tree.size())  
10.             return null;  
11.         else  
12.             return _tree.get(i);  
13.     }      
14.     public int getChildCount(Object parent) {  
15.         int count = 0;  
16.         if(getChild(parent,0) != null)  
17.             count++;  
18.         if(getChild(parent,1) != null)  
19.             count++;  
20.         return count;  
21.     }  
22.     public boolean isLeaf(Object node) {  
23.         return (getChildCount(node) == 0);  
24.     }  
25. }  

BigList：

[java]  view plain  copy

1. public class BigList extends java.util.AbstractList {  
2.     private int _sz;  
3.     public BigList(int sz) {  
4.         if (sz < 0)  
5.             throw new IllegalArgumentException(  
6.                 "Negative not allowed: "+sz);  
7.         _sz = sz;  
8.     }  
9.     public int size() {  
10.         return _sz;  
11.     }  
12.     public Object get(int j) {  
13.         return new Integer(j);  
14.     }  
15. }  

9、Label属性

（1）pre为true时，所有空格，换行符，制表符等都会被保留。

（2）hyphen控制单词在超过长度限制时的行为，为true会截断到下一行继续显示；为false时直接切去，不显示。

（3）maxlength定义单词最大长度。

（4）multiline与pre类似，只是在每行的开始保留了空格和换行。

10、Button属性

      label属性为按钮指定标签； 

      image属性为按钮指定图像； 

      dir属性控制那个组件显示在前方； 

      orient 控制布局是横向或纵向。orient=”vertical”

[html]  view plain  copy

1. <button  label="left" image="/img/1.gif"  onClick="view.value=self.label" width="100px" height="70px"/>  

【上例，先显示图像，再显示标签；如果加上dir="reverse"则相反。】

11、Calendar日历组件

[html]  view plain  copy

1. <window title="日历" border="normal" width="50%">  
2. <vbox>  
3. <calendar id="a" onChange="b.value = a.value"/>  
4. <datebox id="b" onChange="a.value = b.value"/>  
5. </vbox>  
6. </window>  

compact属性控制日历的布局，默认为true；

若为false：

12、image图片上传

（1）方法一：

[javascript]  view plain  copy

1. <window>  
2. <image id="img"/>  
3. Upload your hot shot:  
4. <fileupload onUpload="img.setContent(event.media)"/>  
5. </window>  

（2）方法二：

[javascript]  view plain  copy

1. <textbox width="80px" id="proPhotoTb" value="psb.gif"/>  
2. <button id="loadPhotoBtn" label="浏览" upload="true">  
3.     <attribute name="onUpload"><![CDATA[  
4.        org.zkoss.util.media.Media media = event.getMedia();  
5.        if (media instanceof org.zkoss.image.Image) {  
6.           proPhotoTb.setValue(media.getName());  
7.           img.setContent(event.media);  
8.        } else {  
9.           Messagebox.show("Not an image: "+media, "Error", Messagebox.OK, Messagebox.ERROR);  
10.             break;  
11.         }  
12.     ]]></attribute>  
13. </button>  
14. <image id="img" src="" width="100px" height="100px"/>  

【保存图片到 项目指定文件 】

[javascript]  view plain  copy

1. String ss="newProImgs/"+proNoTb.getValue().trim()+".jpg";  
2. String path = this.session.getWebApp().getRealPath(ss);  
3. picDAO.saveToFile(img.getContent().getByteData(),path);  
4. //  
5. public void saveToFile(byte[] byteData, String path) {  
6.         File file = new File(path);  
7.         ByteArrayInputStream bais = new ByteArrayInputStream(byteData);  
8.         try {  
9.             FileOutputStream fos = new FileOutputStream(file);  
10.             while(bais.available()!=0){  
11.                 int b = bais.read();  
12.                 fos.write(b);  
13.             }  
14.         } catch (FileNotFoundException e) {  
15.             // TODO Auto-generated catch block  
16.             e.printStackTrace();  
17.         } catch (IOException e) {  
18.             // TODO Auto-generated catch block  
19.             e.printStackTrace();  
20.         }  
21.     }  

13、hflex="1"

设置之后则会适应布局

14、button在点击之后，执行结束之前，处于不可用状态。

[html]  view plain  copy

1. <button label="查詢" onClick="@command('Query')" autodisable="self"/>  

15、nonselectableTags

 （1）当Listbox中某一行的textbox或button等取得焦点时，该行并未处于选中状态

     

     可以设置<listbox nonselectableTags=”button”>，则只会忽略button，而其他的组件（如textbox）得到焦点，则该行处于选中状态。

     若为”button,input”则textbox也会忽略。

     若要选择行上的任意组件，该行均处于选中状态，则要设置为“”。

（2）一般情况，如果点击某行的任何一列（而非点击复选框），该行复选框就自动处于选中状态

如果希望只在checkmark复选框点击时该行才处于选中状态，其余不算，则设置：

<listbox checkmark=”true”  nonselectableTags=”*”>

16、滚动条

若设置listbox的rows或height属性，则当空间不足时，会出现滚动条

17、指定列宽度

默认情况下，不管每列内容大小，都会平均分配列宽；

        《1》所以要在listheader（不是在listcell）中设置width；

        《2》也可以设置hflex=”min”来指定适应内容的最小长度。

        《3》使用sizedByContent=”true”则会适应内容，但是最后一列尾部会有空白

【如果加上span=”true” 则会占用整个listbox，不会出现空白】