ZK 学习

ttp://www.docin.com/p-193551031.html

 

 

安装 Eclipse  的 ZK 插件 ：

 

在官网下载 ZK Studio 

 

需要注册  用户名 ：  jxwuao

 

http://www.zkoss.org/download/zkstudio.dsp

 

 

得到压缩文件  zkstudio_1.0.1_galileo.zip

 

打开  Eclipse ，

 

help-》install new software 填写name:zk location: 附件zk studio 0.9.6即zk5.0 配置成功

全部将要用时:10-20分钟

zk使用需要注册

 

 

安装成功后 ， 会有 示例 工程  ZKS  。

 

 

zk的数据绑定

 

数据绑定是一种机制，在UI组件和数据源之间自动完成数据复制的底层基础实现。(Da

ta binding is a mechanism that automates the data-copy plumbing codes between UI components and the data source)。应用程序开发人员只需要告诉数据绑定管理器(data -binding manager)关于UI组件和数据源的联系即可。然后，数据绑定管理器会自动完成加载(将数据从数据源加载至UI组件)并保存(将数据从UI组件保存至数据源)工作。

 

通过在页面顶部定义页面初始化来建立数据绑定管理器。

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

 

此时， 就自动建立了数据到页面组件 的绑定 。

 

页面 ：

 

 

	<listbox rows="10" model="@{mainCtrl.model}"
		selectedItem="@{mainCtrl.selected}">
		<listhead>
			<listheader label="Name"/>
			<listheader label="Title"/>
		</listhead>
		<listitem self="@{each=person}">
			<listcell label="@{person.name}" />
			<listcell label="@{person.title}" />
		</listitem>
	</listbox>

 

 

后台 ：

 

	public void doAfterCompose(Component comp) throws Exception {
		super.doAfterCompose(comp);
		comp.setVariable(comp.getId() + "Ctrl", this, true);

		model.add(new Person("Brian", "Engineer"));
		model.add(new Person("John", "Tester"));
		model.add(new Person("Sala", "Manager"));
		model.add(new Person("Peter", "Architect"));

		titleModel.add("Engineer");
		titleModel.add("Tester");
		titleModel.add("Manager");
		titleModel.add("Architect");
	}

 

 

如果不在页面顶部声明， 也可以通过程序中建立数据绑定对象来进行数据的绑定 。

 

 

	AnnotateDataBinder binder;

	public void doAfterCompose(Component comp) throws Exception {
		super.doAfterCompose(comp);
		comp.setVariable(comp.getId() + "Ctrl", this, true);

		model.add(new Person("Brian", "Engineer"));
		model.add(new Person("John", "Tester"));
		model.add(new Person("Sala", "Manager"));
		model.add(new Person("Peter", "Architect"));

		titleModel.add("");
		titleModel.add("Engineer");
		titleModel.add("Tester");
		titleModel.add("Manager");
		titleModel.add("Architect");

		binder = new AnnotateDataBinder(comp);
		binder.loadAll();
	}
 

 

 

 

最后的代码 ：

 

        binder = new AnnotateDataBinder(comp);
        binder.loadAll();

 

绑定　。　

 

 

 

 

ZK  用注解传递排序字段， 实现排序控制

目前系统的框架是在组件标签中定义注解来传递排序的字段名称， 然后在分页框架中获得排序字段， 利用ZK框架触发的排序事件，重新查询数据库实现排序的。

页面中的写法：

 

<listheader label="开始日期" sort="auto" self="@{sort(beginDate)}" align="center" width="12%" />

 

这里我们使用了 self 属性来写注释，详细用法见开发参考手册， 或者：

http://sunflowers.iteye.com/blog/796542

你可以通过为一个名为self 的特定属性指定注释表达来注释一个组件。

 

<listitem self="@{bind(each=person)}"/>

 

self 为一个关键字，表示注释被用于注释组件声明，而不是任何属性。换言之，等价于

 

<a:bind each="person"/>

 

sort="auto" 属性表明这个列头可以触发排序事件。

 

在我们系统的框架中， 通过ZK的得到注释， 也就是排序字段

 

Annotation ann = header.getAnnotation("sort");
                    if (ann != null)
                    {
                        String orderBy = ann.getAttribute("value");
                        orderablePagination.removeAllSorters();
                        String sortDirection = column.getSortDirection()
                        if ("ascending".equals(sortDirection))
                        {
                            orderablePagination.addSorters(Sorter.asc(orderBy));
                        }
                        else if ("descending".equals(sortDirection) || "natural".equals(sortDirection) || StringUtils.isBlank(sortDirection))
                        {
                            orderablePagination.addSorters(Sorter.desc(orderBy));
                        }
                        executeQueryOnPaging();
                    }

 

用定义的排序类 Sorter 设置好排序规则， 查询数据库重新排序。