zk数据绑定
简介 :
关于数据绑定:数据绑定是一种机制,在UI组件和数据源之间自动完成数据复制。应用开发人员只需告诉绑定管理器UI组件和数据的联系。然后数据绑定期会自动完成加载(将数据加载到UI)并保存(UI保存到数据源)
关于zk的注解:zk中的注解不同于java中的注解,zk注解有两种形式,
1,基于标签的 如<a:bind value="person.address.city"/>,仅用于页面
2,类似el表达式,只是el表达式里用$而zk注解使用与java中的注解符号@相同
如 <label value="@{indexWin$composer.totalScore}"> 仅用于页面。
zk注解功能比较单一不能执行类似el中的${1+1}功能,仅可以用于对象图浏览解析显示,
当然zk注解提供converter属性可以对显示或保存的数据类型进行转换,这个是el表达是没有的
zk注解与数据绑定紧密联系一起的,但数据绑定不一定使用注解的方式!
开发环境:
1,zk5.0.7.1
2,jdk1.6
3,eclipse3.6
下面我们从一个例子讨论一下基于注解的一般开发流程:
一, 数据绑定的一般流程
二,创建UI页面
UI页面的创建并不一定要放在第一步,因开发团队或个人考虑的是数据还是原型设计而异。
1,让eclipse识别zul结尾的文件:
与jsp、aspx类似,zk也创建自己的标签,这个标签集,
zk给它起了一个名字叫ZUML(zk用户界面标记语言),
zuml语言基于xml,符合xml语法规范。
我们根据zuml的规范书写的文件,通常以*.zul扩展结尾,
但eclipse不识别该文件。识别该文件有什么好处呢?语法着亮、自动提示、标签自动完成、验证文档的正确性
下面介绍如何让eclipse识别zul扩展文件:
eclipse菜单->window -> Preferences ->General ->Content Types -> Text -> xml ->
下部扩展列表右侧 点击Add -> 输入*.zul保存
2,创建zul文件
- <? xml version = "1.0" ?>
- < window id = "indexWin" apply = "com.sun4love.zk4love.web.controller.IndexController"
- xmlns:w = "client" xmlns:n = "native" xmlns = "http://www.zkoss.org/2005/zul"
- xmlns:xsi = "http://www.w3.org/2001/XMLSchema-instance"
- xsi:schemaLocation = "http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul/zul.xsd" >
- < grid model = "@{indexWin$composer.users}" > <!-- 注意$前半部分与apply类当前元素的id相同 -->
- < rows >
- < row self = "@{each=user}" value = "@{user}" > <!-- [email protected]{each=user}表示将each变量名修改为user -->
- < label value = "@{user.name}" > </ label >
- < combobox readonly = "true" selectedItem = "@{user.score}"
- forward = "onChange=onReCalculate" > <!-- 将onChange事件转发给onReCalculate -->
- < comboitem label = "0分" value = "${0}" > </ comboitem >
- <!-- 因为value的值zul页面直接写0的话,zk把他作为String类型,此处用一个小技巧,设置value为数字类型 -->
- < comboitem label = "1分" value = "${1}" > </ comboitem >
- < comboitem label = "2分" value = "${2}" > </ comboitem >
- < comboitem label = "3分" value = "${3}" > </ comboitem >
- </ combobox >
- </ row >
- </ rows >
- < foot >
- < footer >
- </ footer >
- < footer >
- 总得分:
- < label value = "@{indexWin$composer.totalScore}" > </ label > <!-- 与IndexController类的getTotalScore对应 -->
- </ footer >
- </ foot >
- </ grid >
- </ window >
注意要点:
1)声明window组件,设置id为indexWin并apply(use与apply的区别 ) IndexController类,
另外还声明定义了client 与native 命名空间。 有几点非常重要,window的id、use与apply的区别、
以及apply常用的几个composer
2)grid的绑定数据模型,model="@{indexWin$composer.users}">,
这里的model器类似swing中的model,是一个数据容器,model的值会根据@{}
注解解释后的结果自动封装为如下不同的model,
BindingGroupsListModel、
BindingListModelArray、
BindingListModelList、
BindingListModelMap、
BindingListModelSet
GroupsListModel
然后分析注解@{}内的表达式,该表达式与el表达式里的对象图浏览完全一样, 没任何区别!
解析过程:在作用域内查找indexWin$composer对象,①然后在indexWin$composer
查找getUsers方法,
特殊情况:如果indexWin$composer.user.address.name中的name为null
或根本没有getName方法或address为空时会发生什么呢?解释过程会重复步骤①
a)无getName方法时,显示效果如下
看到类似[email protected] 的东西,应该知道这是直接显示对象地址了!
结合[email protected]出现的位置,我们应该会很快找出错误!
b)name为null或address为null时:都会得到正确的结果,这里不再解释
3)indexWin$composer名字很奇怪,从哪里来?
在2,1)中我们知道window的id为indexWin,indexWin$composer中$前半部分为组件的id ,
window是component,如果window替换成<div id="someCompId">,
此时indexWin$composer就变成了someCompId$composer, 那么$composer是什么?
$composer是一个固定格式, 由apply的IndexController设置的,关于IndexController的详细内容
将在下文介绍。indexWin$composer表示IndexController的实例对象,由zk自动创建。
获得更多bean的控制 apply bean与spring的整合 ,在此抛砖引玉
4)注解中重命名each变量
<!-- [email protected]{each=user}表示将each变量名修改为user -->
<row self="@{each=user}" value="@{user}">
5) UI到Object bean的自动保存
传统web开发中,例如注册用户,需要很多繁琐的步骤:提交表单,服务器端request.getParameter()
获取表单属性,并创建bean对象, 将表单值封装为bean对象,但request.getParameter()
获取值的仅为字符串,并且bean通常又是一个由多类型组成的状态对象,因此我们还要写一堆的
类型转换代码。在zk中,UI到bean对象和bean对象到UI的数据类型转换即封转都是自动完成的,
当然zk数据绑定器并不是万能的,zk提供了一个接口,由开发人员实现,但大部分我们无需
自定义转换器!
看看下面这张图,"懒程序员" 们开始头疼了,但zk已经很简单的转换成你需要的对象!
下面我们通过一个测试,看看zk的数据绑定器做了什么
测试:改变下拉别表,看是否调用score的setter方法,如果调用,zk注解自动保存了选择的值到
user的score属性上
- < combobox readonly = "true" selectedItem = "@{user.score}"
- forward = "onChange=onReCalculate" > <!-- 将onChange事件转发给onReCalculate -->
- < comboitem label = "0分" value = "${0}" > </ comboitem >
- <!-- 因为value的值zul页面直接写0的话,zk把他作为String类型,此处用一个小技巧,设置value为数字类型 -->
- < comboitem label = "1分" value = "${1}" > </ comboitem >
- < comboitem label = "2分" value = "${2}" > </ comboitem >
- < comboitem label = "3分" value = "${3}" > </ comboitem >
- </ combobox >
- public void setScore(Long score) {
- System.out.println("得分:" +score);
- this .score = score;
- }
测试过程如图:
6) 事件转发
下面这段的意思是将combobox的onChange事件转发给某个组件的onReCalculate事件
onReCalculate是谁的事件呢?zk开发中关于forward属性的那点事 这篇文章详细讲解了forward
的用法。
<combobox forward="onChange=onReCalculate">