作为ZK初步总结的最后一篇,就弄一些ZK里面比较杂的东西吧。ZK做的灵活了,很多东西的用法不是很清晰。文档似乎没有跟的上。
【一】关于databinding数据绑定
ZK的数据绑定是个不错的特色之处,可在页面显示的时候将数据负载在组件上面,其效果形式和用EL表达式差不了很大,不过使用数据绑定,传闻在组件上面的crud可以更新到后台数据,不过我没有测试。有测试listbox的选择,当选择listbox任意一个数据列就也可以在其他组件上显示数据,而不用做任何逻辑处理的操作。
数据绑定的实现:
1,在页面对应的composer 有一个对应的AnnotateDataBinder 实例。且需要传递组件参数。
2,在composer里面需要有数据对应的get方法。
3,页面上使用@{***}来得到数据。
展示代码块:
//composer类中申明
private AnnotateDataBinder binder;
private String aaa;
//doAfterComposer里面实例化
public void doAfterComposer(Component comp){
....
binder = new AnnotateDataBinder(comp);
binder.loadAll();
....
}
//get方法:
public String getAaa(){
return aaa;
}
//页面上的调用
<textbox id="aa" value="@{[id].aaa}"/>
对数据绑定最喜欢的是它的converter,使用数据绑定,且拥有converter的,可以在类里面根据你的数据,改变组件的形式
<listcell label="@{mail.status,converter='ins.ZKMail.common.ImageConvert'}" />
而converter指定的类,有一个专门的实现接口。org.zkoss.zkplus.databind.TypeConverter。
//这个根据邮件读与未读来设置其图片。
public class ImageConvert implements TypeConverter {
public Object coerceToBean(java.lang.Object val,
org.zkoss.zk.ui.Component comp) {
return null;
}
public Object coerceToUi(java.lang.Object val,
org.zkoss.zk.ui.Component comp) {
String status = (String) val;
if (status.equals("1"))
((Listcell) comp)
.setImage("/img/Centigrade-Widget-Icons/EnvelopeOpen-16x16.png");
else if (status.equals("0")) {
((Listcell) comp)
.setImage("/img/Centigrade-Widget-Icons/Envelope-16x16.png");
Listitem item = (Listitem) ((Listcell) comp).getParent();
Iterator<Listcell> it = item.getChildren().iterator();
while (it.hasNext()) {
it.next().setStyle("font-weight:bolder");
}
}
return "";
}
}
【二】关于组件里面大量数据的分页查询
比如listbox的大量数据,虽然listbox里面有一个mode是“paging”的形态,可以为listbox 分页。可是这个也有一个前提,是必须所有的数据完全加载,才有此分页的效果。可是这样又有何意义了?也许ZK的新版本解决了这个问题。这里使用的是ZK带了page组件来达到分页的效果。
分页的实际操作在数据库层。
达到此效果的几个步骤:
1,页面自带paging组件
<paging id="listboxPaging" pageSize="2" visible="false"/>
2,监听paging的翻页事件,然后更新listbox的model类
public void onPaging$listboxPaging(Event event) {
FileQueryCondition fileQueryCondition = getFileCondition();
sfmSelectResultLBox.setModel(new ListModelList(fileQuery
.findFileByCondition(fileQueryCondition)));
binder.loadAll();
}