ZK示例

1、分页同时控制2个grid

使用paginal属性

<paging id="pg" pageSize="4"/> <hbox>   <grid width="300px" mold="paging" paginal="${pg}"></grid>    <grid width="300px" mold="paging" paginal="${pg}"></grid> </hbox>

2、辅助表头

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

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

<grid width="500px">     <auxhead>         <auxheader label="H1'07" colspan="6"/>         <auxheader label="H2'07" colspan="6"/>     </auxhead>     <auxhead>         <auxheader label="Q1" colspan="3"/>         <auxheader label="Q2" colspan="3"/>         <auxheader label="Q3" colspan="3"/>         <auxheader label="Q4" colspan="3"/>     </auxhead>     <columns>         <column label="Jan"/><column label="Feb"/><column label="Mar"/>         <column label="Apr"/><column label="May"/><column label="Jun"/> <column label="Jul"/><column label="Aug"/><column label="Sep"/>         <column label="Oct"/><column label="Nov"/><column label="Dec"/>     </columns>

3、特殊属性spans

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

<grid width="500px">     <columns>     <column label="Left" align="left"/><column label="Center" align="center"/>       <column label="Right" align="right"/><column label="Column 4"/>       <column label="Column 5"/><column label="Column 6"/>     </columns>     <rows>         <row>             <label value="Item A.1"/><label value="Item A.2"/>             <label value="Item A.3"/><label value="Item A.4"/>             <label value="Item A.5"/><label value="Item A.6"/>         </row>         <row spans="1,2,2">             <label value="Item B.1"/><label value="Item B.2"/>             <label value="Item B.4"/><label value="Item B.6"/>         </row>         <row spans="3">             <label value="Item C.1"/><label value="Item C.4"/>             <label value="Item C.5"/><label value="Item C.6"/>         </row>         <row spans=",,2,2">             <label value="Item D.1"/><label value="Item D.2"/>             <label value="Item D.3"/><label value="Item D.5"/>         </row>     </rows> </grid>

4、菜单

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

<menubar id=”menubar” width="300px">     <menu label="File">         <menupopup>             <menuitem label="New"/>             <menuitem label="Open"/>          <menuseparator/>          <menuitem label="Exit"/>       </menupopup>    </menu>    <menu label="Help">       <menupopup>          <menuitem label="Index"/>          <menu label="About">             <menupopup>                 <menuitem label="About ZK"/>                 <menuitem label="About Potix"/>             </menupopup>          </menu>         </menupopup>     </menu> </menubar><checkbox label=”Vertical orient”><attribute name=”onCheck”>menubar.orient=self.checked?”vertical”:”horizontal”;menubar.width=self.checked?”100px”:”200px”;</attribute></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属性的组件时，会显示。。。

<label value="Move Mouse Over Me!" tooltip="editPopup"/> <separator bar="true"/> <label value="Click Me!" popup="any"/><menupopup id="editPopup"> <menuitem label="Undo"/>     <menuitem label="Redo"/>     <menu label="Sort">        <menupopup>              <menuitem label="Sort by Name" autocheck="true"/>              <menuitem label="Sort by Date" autocheck="true"/>         </menupopup>      </menu> </menupopup><popup id="any" width="300px">     <vbox>          ZK simply rich.          <toolbarbutton  label="ZK  your  killer  Web  application  now!" href="http://zk1.sourceforge.net"/>     </vbox> </popup> 

6、下拉列表

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

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

7、列表数据左移右移

<hbox>    <listbox id="src" rows="0" multiple="true" width="200px">       <listhead>          <listheader label="Population"/>          <listheader label="Percentage"/>       </listhead>       <listitem id="a" value="A">          <listcell label="A. Graduate"/>          <listcell label="20%"/>       </listitem>       。。。      <listitem id="d" value="D">          <listcell label="D. Others"/>          <listcell label="17%"/>       </listitem>    </listbox>    <vbox>       <button label="=>" onClick="move(src, dst)"/>       <button label="<=" onClick="move(dst, src)"/>    </vbox>   <listbox id="dst" checkmark="true" rows="0" multiple="true" width="200px">       <listhead>          <listheader label="Population"/>          <listheader label="Percentage"/>       </listhead>       。。。    </listbox>    <zscript> void move(Listbox src, Listbox dst) {        Listitem s = src.getSelectedItem();    if (s == null)           Messagebox.show("Select an item first");    else           s.setParent(dst); }    </zscript> </hbox>

8、tree

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

（1）带复选框的静态树

<window width="500px"><zscript><![CDATA[//@DECLARATIONpublic void showSelection(){info.setValue("selected item " + tree.getSelectedItem().getLabel());}]]></zscript><tree id="tree" rows="8"  onSelect="showSelection()"  multiple="true" checkmark="true"><treecols sizable="true"><treecol label="Name" /><treecol label="Description" /></treecols><treechildren><treeitem><treerow><treecell label="Item 1" /><treecell label="Item 1 description" /></treerow></treeitem><treeitem><treerow><treecell label="Item 2" /><treecell label="Item 2 description" /></treerow><treechildren><treeitem open="false"><treerow><treecell label="Item 2.1" /></treerow><treechildren><treeitem><treerow><treecell label="Item 2.1.1" /></treerow></treeitem><treeitem ><treerow><treecell label="Item 2.1.2" /></treerow></treeitem></treechildren></treeitem></treechildren></treeitem><treeitem label="Item 3" /></treechildren></tree><label id="info"/></window>

（2）动态生成树

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

页面：

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

BinaryTreeModel：

public class BinaryTreeModel extends AbstractTreeModel{     private ArrayList _tree =null;     public BinaryTreeModel(List tree){        super(tree.get(0));        _tree = (ArrayList)tree;    }     public Object getChild(Object parent, int index) {        int i = _tree.indexOf(parent) *2 +1 + index;        if( i>= _tree.size())            return null;        else            return _tree.get(i);    }        public int getChildCount(Object parent) {        int count = 0;        if(getChild(parent,0) != null)            count++;        if(getChild(parent,1) != null)            count++;        return count;    }    public boolean isLeaf(Object node) {        return (getChildCount(node) == 0);    }}

BigList：

public class BigList extends java.util.AbstractList {    private int _sz;    public BigList(int sz) {        if (sz < 0)            throw new IllegalArgumentException(                "Negative not allowed: "+sz);        _sz = sz;    }    public int size() {        return _sz;    }    public Object get(int j) {        return new Integer(j);    }}

9、Label属性

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

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

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

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

10、Button属性

      label属性为按钮指定标签；

      image属性为按钮指定图像；

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

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

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

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

11、Calendar日历组件

<window title="日历" border="normal" width="50%"><vbox><calendar id="a" onChange="b.value = a.value"/><datebox id="b" onChange="a.value = b.value"/></vbox></window>

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

若为false：

12、image图片上传

（1）方法一：

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

（2）方法二：

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

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

String ss="newProImgs/"+proNoTb.getValue().trim()+".jpg";String path = this.session.getWebApp().getRealPath(ss);picDAO.saveToFile(img.getContent().getByteData(),path);//////////////////////////////////////////////////////////////////public void saveToFile(byte[] byteData, String path) {File file = new File(path);ByteArrayInputStream bais = new ByteArrayInputStream(byteData);try {FileOutputStream fos = new FileOutputStream(file);while(bais.available()!=0){int b = bais.read();fos.write(b);}} catch (FileNotFoundException e) {// TODO Auto-generated catch blocke.printStackTrace();} catch (IOException e) {// TODO Auto-generated catch blocke.printStackTrace();}}

13、hflex="1"

设置之后则会适应布局

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

<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，不会出现空白】