ZK----集锦

<listbox id="carListbox" emptyMessage="No car found in the result" height="160px" style="margin-top:10px">
        <listhead>                                                 ---表头
            <listheader label="Model" />                 ---表头列名
            <listheader label="Make" />
            <listheader label="Price" width="20%"/>
        </listhead>
        <template name="model">                      ---数据源
            <listitem>                                             ---数据项(行)
                <listcell label="${each.model}"></listcell>   
                <listcell label="${each.make}"></listcell>
                <listcell>$<label value="${each.price}" /></listcell>
            </listitem>
        </template>
</listbox>
    <hbox style="margin-top:20px" id="detailBox" visible="false">
        <image id="previewImage" style="padding:10px" />
        <vbox>
            <hlayout>
                Model : <label id="modelLabel" style="font-weight:bold"/>
            </hlayout>
            <hlayout>
                Make : <label id="makeLabel" style="font-weight:bold"/>
            </hlayout>
            <hlayout>
                Price :
                <span>$<label id="priceLabel" style="font-weight:bold"/></span>
            </hlayout>
            <label id="descriptionLabel" />
        </vbox>
    </hbox>
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

页面与java代码的关联：

方法一：

监听所关心的事件，然后调用合适的方法进行处理。例如：可调用onCreate初始化、onOk处理、onCancel取消事件

 <window  id="main"  onCreate="MyManager.init(main)"  onOk="MyManager.process(main)"  onCancel="MyManager.cancel(main)"/>
必须有一个名为MyManager的java类，内容如下：
public class MyManager{
   public  static  void  init(Window main){ }
   public  static  void  save(Window main){ }
   public  static  void  cancel(Window main){   }
}

方法二：

不在ZUML页面嵌入java代码，可以继承一个组件的实现来处理事件

public class MyManager  extends  Window{
   public  static  void  init(Window main){ }
   public  static  void  save(Window main){ }
   public  static  void  cancel(Window main){   }
}
然后使用use属性指定类，如下：
<window  use="MyManager"></window>

方法三：

若使用MVC模式，不想再window(视图)内嵌入处理代码，可以实现一个类来初始化window,此类必须实现org.zkoss.zk.ui.util.Composer接口
public  class  MyManager  implements  Composer{
   public  void  doAfterCompose(Component comp){
 ((Windos)comp).setTitle("my Title");
 ...你要初始化的东西
 comp是一个窗口
   }
}
然后使用apply属性指定类，如下：
<window  apply="MyManager"></window>

 

window仍然作为org.zkoss.zul.Window的一个实例被创建，且作为comp参数被传递给doAfterCompose方法，然后，你可以处理你所希望的初始化

若想apply多个composer使用逗号隔开，可以使用EL表达式来返回类，它的名称，Composer实例，或Composer实例集合

<window  apply="MyManager，MyManager2">"/>

         <textbox  apply="${c:mycomposer()}"/>

</window>

 

组件的获取、添加：

组件添加到一个页面的方法：

1、调用setPage--将组件指定为一个页面的根组件

2、调用setParent、insertBefore、appendChild----将组件定义为另外一个的子组件，那么属于同一页面的子组件将会属于父组件所属的页面

页面组建获取：

每个组件都有一个标识，可利用getId方法获得

任何组件可形成一个ID空间,必须实现了org.zkoss.zk.ui.IdSpace接口

相同ID空间内的组件称为fellows，getFellow方法可被同一ID空间内的任何组件调用，同一空间内的任何组件调用getSpaceOwner方法返回的是同样的对象

 

数据源和页面组件间的数据关联：

数据源 <=====数据绑定管理器=====>组件

（只要告诉数据绑定管理器和数据源的联系，数据绑定管理器会自动完成加载）

第一步：页面声明数据源(或后台java类中声明数据源)

<zscript> 

   Person  p= new Person();

   p.setName("king");

</zscript>

第二步：页面顶部初始化数据绑定管理器

<? init  class="org.zkoss.zkplus.databind.AnnotateDataBinderInit"  ?>

第三步：将UI组件关联至数据源

只需要定义UI对象，并关联数据源：使用ZUML注释表达式来告诉数据绑定管理器数据源和UI组件的关系

<component-name   attribute-name="@{bean-name.attribute-name}"/>

component-name：组件名

bean-name：数据源

attribute-name：描述UI组件或数据源的一个属性

<textbox  value="@{p.name}"/>

 

 控制组件加载数据源的时机：

<component-name   attribute-name="@{bean-name.attribute-name , load-when='component-id.event-name'}"/>

component-id：UI组件的ID

bean-name：事件名称

例如：一个人的姓或名字改变后，全名也跟着改变

<textbox  id="firstName" value="@{person.firstName}"/>

<textbox  id="lastName" value="@{person.lastName}"/>

<textbox  id="fullName" value="@{person.fullName , load-when='firstName.onChange , lastName.onChange'}"/>

  控制组件保存数据到数据源的时机：

<component-name   attribute-name="@{bean-name.attribute-name , save-when='component-id.event-name'}"/>

例如：一个人的姓或名字改变后，

<textbox  id="firstName" value="@{person.firstName , save-when='self.onChange'}"/>

<textbox  id="lastName" value="@{person.lastName , save-when='self.onChange'}"/>

<textbox  id="fullName" value="@{person.fullName}"/>

 一个数据源关联多个组件：

 

集合数据源和组件的关联：

支持集合的UI组件有：Listbox、Grid、Tree

第一步：定义集合数据源 

第二步：将集合和UI组件的model属性相关联

第三步：定义一个UI组件模版

    1、使用self属性定义一个想要的变量，用来呈现集合内的每个实例

        <component-name  self="@{each='variable-name'}"/>

    2、将UI组件和变量关联

        <component-name  attribute-name="@{variable-name.attribute-name}"/>

例如：

List  persons;

 

<listbox  id=""  model="@{persons}">

   <listhead>

       <listheader  label=""  />

   </listhead>

   <listitem  self="@{each='person'}">

        <listcell>  <textbox  value="@{person.name}"/>   </listcell>

   </listitem>

数据源和UI组件的定制转换：

如果数据源是一个bolean值，为true时，我让页面的组件显示为一幅图，为false时显示为另一个(即不让显示true或false)

<component-name  attribute-name="@{bean-name.attribute-name , converter='class-name'}"/> 

   step1、定义实现了TypeConverter的转换类，并实现下面的方法：

               1）、coerceToUI，将一个值对象转换成UI组件属性类型

               2）、coerceToBean，将一个值对象转换成bean属性类型

   step2、在converter标签表达式内指定转换器的类名

定义数据绑定管理的访问权限：

<component-name  attribute-name="@{bean-name.attribute-name , access='type-name'}"/> 

attribute-name 的模式为both(加载/保存)，load(仅加载)，save(仅保存)，none(都不可)

 

 

 

MVC模式的类形式：

public class SearchController extends SelectorComposer<Component> {   }

 

组建添加监听器方法：

第一种： 通过在标记语言中指定onXxx属性，属性值为任何java代码

              <listitem  onSelected="showDetail()">

                public void showDetail(){}

         

              <button  label=”ok”  onClick=” MyManager .save()”/>

              public class MyManager  extends  Window{
                       public  void  save(){ } 
              }

 

第二种： 为监听的组件或页面调用addEventListener方法

             <listitem>

               @Listen("onSelect = #carListbox") //carListbox：<listbox id="carListbox">

       public void showDetail(){ }

             Comp.addEventListener(“onClick” , new MyListener());
             Class  MyListener  implements  org.zkoss.zk.ui.event.EventListener{
                      Public  void  onEvent(Event event)  throws UiException {   }
             }

布局方式：
<hbox > </hbox>   -----横向排列
<vbox > </vbox>   -----纵向排列