ZK6+入门 ZK-MVVM.docVIP

ZK MVVM模式简介 ZK6.0之前的版本都是采用MVP(Model-View-Presenter)设计模式。从ZK6.0开始就有了很大的不同，采用MVVM(Model-View-ViewModel)设计模式。 下面通过一个例子来看一下它们之前的不同： 用例：实现页面上点击一个按钮，然后呈现Model层返回的消息”Hello World” MVP实现： 作用过程： ①用户在屏幕上点击按钮(一个动作action)，一个通信事件就被触发。 ②后台的事件监听器(event listener)处理这个事件(event)。 ③访问数据库(access data)并返回 ④用户界面元素(UI element)被改变，相应的把视觉反馈(visual feedback)呈现给用户 MVVM实现： 作用过程： ①用户在屏幕上点击按钮(action)触发一个事件(event) ②绑定器(Binder)感知到相应的事件(corresponding event)被触发 ③绑定器(Binder)在ViewModel中找到相应的动作逻辑(action logic)并调用它 ④动作逻辑(action logic)从Model层访问数据库(access data)，并更新ViewModel中相应的属性 ⑤ViewModel通知(notify chnage)绑定器(Binder) 一些属性被改变 ⑥每当有属性被改变，绑定器(Binder)就会从ViewModel中加载数据(load data) ⑦绑定器(Binder)改变相应的UI组件来给用户呈现视觉反馈(visual feedback) 很明显，UI设计者必须至少告诉绑定器(Binder)以下几点： 用到了哪些UI事件(UI event)来触发哪些动作逻辑(action logic)。（这样Binder才知道调用什么方法） 用到了哪些UI属性(UI attribute)来显示哪些数据。（这样Binder才知道加载什么数据，更新什么数据） 用到的哪些UI属性(UI attribute)是用来输入到数据库的。（这样Binder才知道要保存哪些属性） 在ZK绑定(ZK Bind)中用到了ZK注解(annotation)来做这些工作： 通过程序流程运行的过程： ①当用户按下了”Show”按钮，onClick event就被触发到了Binder ②ZK Binder通过指定的ZK 注解 @command(showHello)在ViewModel中找到命令的名字(command name)为showHello的方法。 ③Binder在HelloViewModel.java中调用showHello()方法，并且改变message的属性值为”Hello World”。 注意：@command(showHello)是告诉Binder showHello这个方法是一个command方法，而@NotifyChange(message)则是告诉Binder 如果@command(showHello)中的showHello()方法被调用，那么HelloViewModel中的属性message将会被改变。也就是说当这个方法被调用后，页面上（客户端）可以感知到属性message的改变。 ④Binder找到HelloViewModel.java中与组件标签(component label)相关联的属性message的属性值（这是由于页面上message被指定了ZK注解@load(vm.message)的缘故）。因此它通过调用HelloWorldModel.java的message属性的getMessage()方法从vm.message中加载数据，并改变标签label的属性值。最后”Hello World!”就呈现到了客户端用户。 有时用户看了上面的页面之后，说想通过弹出窗(pop window)来显示信息message。这样的改变其实很容易，将信息放到一个模态窗口中： MVP实现： 对于MVP设计模式而言，view层的zul页面修改了之后，Presenter层的java文件必须完全被重写，这时需要注入弹出窗口popwin、弹出窗口中的标签popwin$lbl MVVM实现： 当客户改变View层的需求的时候，MVVM设计模式的优势就体现出来了。UI设计者可以独立的处理这些改变，而不用去改变HelloViewModel.java文件，因为客户需要的是改变message的呈现方式而不是message本身。 注意：模态窗口的显示或隐藏是通过判断message的值是否为空来控制的。(visible=@load(not empty vm.message)) ZK Binding Features（ZK