ZK官方MVC原理详解（一）
作者：Henri Chen, Principal Engineer
ZK的团队一直试图在zk中实现MVC方法最佳实践，在这篇文章中我们将会讨论zk中MVC编程，我们还详细的介绍在zk中提供三个工具类和三个帮助方法，将为开发者在程序中编写Model-View-Controller模式更方便、更简单。此外、还将最初将Java写在zscript中，提供了最佳途径来重构原型代码。
我将使用一个简单的例子来说明这些工具类和帮助方法实力。
假设：两个文本框：一个是姓、一个是名，当这两个文本框变化时候而另外一个全名要自动更新。
第一种方式：
composer1.zul
<window title="composer1 example" border="normal" width="300px" apply="MyComposer1"> <grid> <rows> <row>First Name: <textbox id="firstName" forward="onChange=onFirstName"/></row> <row>Last Name: <textbox id="lastName" forward="onChange=onLastName"/></row> <row>Full Name: <label id="fullName"/></row> </rows> </grid> </window>
MyComposer1.java
public class MyComposer1 implements Composer { private Textbox firstName; private Textbox lastName; private Label fullName; public void doAfterCompose(Component win) throws Exception { firstName = (Textbox) win.getFellow("firstName"); lastName = (Textbox) win.getFellow("lastName"); fullName = (Label) win.getFellow("fullName"); //定义和监听事件登记 define and register event listeners win.addEventListener("onFirstName", new EventListener() { public void onEvent(Event event) throws Exception { fullName.setValue(firstName.getValue()+" "+lastName.getValue()); } }); win.addEventListener("onLastName", new EventListener() { public void onEvent(Event event) throws Exception { fullName.setValue(firstName.getValue()+" "+lastName.getValue()); } }); } } 在这里composer1.zul定义了程序的页面视图部分，而MyComposer1.java在程序生命周期上window创建时候介入，主要负责负定义和注册监听事件。然而，不管怎么样！
当我添加更多事件代码时候，我们会不停的添加addEventListener这样重复的代码。但是我们怎么去除这烦人的代码呢？
org.zkoss.zk.ui.util.GenericComposer 辅助类帮助我们解决这个问题
composer2.zul
<window title="composer2 example" border="normal" width="300px" apply="MyComposer2"> <grid> <rows> <row>First Name: <textbox id="firstName" forward="onChange=onFirstName"/></row> <row>Last Name: <textbox id="lastName" forward="onChange=onLastName"/></row> <row>Full Name: <label id="fullName"/></row> </rows> </grid> </window
MyComposer2.java ... public class MyComposer2 extends GenericComposer { private Textbox firstName; private Textbox lastName; private Label fullName; public void doAfterCompose(Component win) throws Exception { super.doAfterCompose(win); //得到zk组件
firstName = (Textbox) win.getFellow("firstName"); lastName = (Textbox) win.getFellow("lastName"); fullName = (Label) win.getFellow("fullName"); //all addEventListener and new EventListener() codes are removed } public void onFirstName(Event event) { fullName.setValue(firstName.getValue()+" "+lastName.getValue()); } public void onLastName(Event event) { fullName.setValue(firstName.getValue()+" "+lastName.getValue()); } } 该MyComposer2类继承GenericComposer，写事件侦听器的代码直接写onXxx，对GenericComposer类doAfterCompose方法会为你做的繁琐的addEventListener
按照惯例，这是一个典型的Design by Convention方法，与onXxx命名模式的所有方法将会自动被视为事件处理，而且自动帮你注册这些事件。
对于一个典型的互动丰富的应用程序，事件处理中通常需要访问数据模型bean和操纵UI组件与最终用户交互。获得这样的组件引用和数据bean是在事件处理常见的做法。所以为什么在MyComposer2中大量使用getFellow()方法，另一方面，这些都是在一个框架可以发挥作用，为什么不把这些组件和这些数据beans绑定呢？
因此，这里来了org.zkoss.zk.ui.util.GenericAutowireComposer 工具类扩展GenericComposer类并添加了auto-wire的特点。
composer3.zul
<window title="composer3 example" border="normal" width="300px" apply="MyComposer3"> <grid> <rows> <row>First Name: <textbox id="firstName" forward="onChange=onFirstName"/></row> <row>Last Name: <textbox id="lastName" forward="onChange=onLastName"/></row> <row>Full Name: <label id="fullName"/></row> </rows> </grid> </window>
MyComposer3.java
public class MyComposer3 extends GenericAutowireComposer { private Textbox firstName; //auto-wired private Textbox lastName; //auto-wired private Label fullName; //auto-wired //all getFellow() codes are removed public void onFirstName(Event event) { fullName.setValue(firstName.getValue()+" "+lastName.getValue()); } public void onLastName(Event event) { fullName.setValue(firstName.getValue()+" "+lastName.getValue()); } } 在来看看MyComposer3中它继承了GenericAutowireComposer ，所有的getFellow方法都去除掉了。
对GenericAutowireComposer类doAfterCompose方法为你自动注入适当的组件，
事实上，如果在你的zul文件中你定义适当的变量解析器（variable resolver），例如Spring变量解析器（variable resolver），则GenericAutowireComposer也会为你的Spring bean注入
以下是这的一些片断代码。讨论的ZK +spring请参考另一篇文章。
spring-config.xml
... <bean id="taskDao" class="org.springframework.transaction.interceptor.TransactionProxyFactoryBean"> ... taskEditor.zul
<?variable-resolver class="org.zkoss.zkplus.spring.DelegatingVariableResolver"?> <window id="taskWnd" title="Task Editor" border="normal" width="500px" apply="TaskEditorComposer"> <grid> <rows> <row>Title: <textbox id="title"/></row> <row>Description: <textbox id="description"/></row> </rows> </grid> <button id="saveBtn" label="Save" forward="onClick=onSaveTask"/> </window> TaskEditorComposer.java
public class TaskEditorComposer extends GenericAutowireComposer { private TransactionProxyFactoryBean taskDao; //Spring bean auto wired private Textbox title; //auto wired private Textbox description; //auto wired private Button saveBtn; //auto wired public void onSaveTask(Event event) { Task currentTask = componentScope.get("task"); currentTask.setTitle(title.getValue()); currentTask.setDescription(description.getValue()); taskDao.update(currentTask); } ... }
由于在zscript中我们可以直接使用隐式对象，同样的GenericAutowrieComposer 也支持隐式对象甚至zscript中的alert() 方法也支持。下面composer4就是个例子，当firstName变化时，它就会请求self（应用composer时候的隐式对象，这里也就window实例）
改变他的标题并且弹出alert消息框,这也带来另外一个好处，为zscript代码重构到java代码上来提供更方便更轻松的途径。你可以复制和粘贴，并做一些轻微的修改，即使你已经用了一些这样用来隐式对象存在只在zscript。查看一下composer4-1.zul使用zul和zscript，在看看MyComposer4.java中的onFirstName() 和onLastName()方法有什么类似吗？
composer4.zul <window title="composer4 example" border="normal" width="300px" apply="MyComposer4"> <grid> <rows> <row>First Name: <textbox id="firstName" forward="onChange=onFirstName"/></row> <row>Last Name: <textbox id="lastName" forward="onChange=onLastName"/></row> <row>Full Name: <label id="fullName"/></row> </rows> </grid> </window>
MyComposer4.java public class MyComposer4 extends GenericAutowireComposer { private Textbox firstName; private Textbox lastName; private Label fullName; public void onFirstName(Event event) { fullName.setValue(firstName.getValue()+" "+lastName.getValue()); ((Window)self).setTitle("First Name changed"); alert("First Name changed to "+firstName.getValue()); } public void onLastName(Event event) { fullName.setValue(firstName.getValue()+" "+lastName.getValue()); ((Window)self).setTitle("Last Name changed"); alert("Last Name changed to "+lastName.getValue()); } }
composer4-1.zul (quick prototyping) <window title="composer4-1 example" border="normal" width="300px"> <attribute name="onFirstName"><![CDATA[ fullName.setValue(firstName.getValue()+" "+lastName.getValue()); ((Window)self).setTitle("First Name changed"); alert("First Name changed to "+firstName.getValue()); ]]></attribute> <attribute name="onLastName"><![CDATA[ fullName.setValue(firstName.getValue()+" "+lastName.getValue()); ((Window)self).setTitle("Last Name changed"); alert("Last Name changed to "+lastName.getValue()); ]]></attribute> <grid> <rows> <row>First Name: <textbox id="firstName" forward="onChange=onFirstName"/></row> <row>Last Name: <textbox id="lastName" forward="onChange=onLastName"/></row> <row>Full Name: <label id="fullName"/></row> </rows> </grid> </window>
知道现在！在前面几个例子中zul文件中总是使用forword来分别触发window中firstName和lastName文本框中OnFirstName和OnLastName事件来转向他们的onChang事件，毫无疑问！这个MVC使得每个组件重复forward，我们还能不能消除forward的属性呢？
org.zkoss.zk.ui.util.GenericForwardComposer 这个工具类满足这一需求，请注意，GenericForwardComposer继承GenericAutowireComposer类，因此它有它的父类（GenericAutowireComposer）和祖父类（GenericComposer）所有功能
composer5.zul
<window title="composer5 example" border="normal" width="300px" apply="MyComposer5"> <grid> <rows> <row>First Name: <textbox id="firstName"/></row><!-- forward is removed --> <row>Last Name: <textbox id="lastName"/></row><!-- forward is removed --> <row>Full Name: <label id="fullName"/></row> </rows> </grid> </window>
MyComposer5.java
public class MyComposer5 extends GenericForwardComposer {
private Textbox firstName;
private Textbox lastName;
private Label fullName;
//onChange event from firstName component
public void onChange$firstName(Event event) {
fullName.setValue(firstName.getValue()+" "+lastName.getValue());
}
//onChange event from lastName component
public void onChange$lastName(Event event) {
fullName.setValue(firstName.getValue()+" "+lastName.getValue());
}
}
当我们写composer继承于GenericForwardComposer的时候，你必须按照一些命名规则来定义你的事件侦听器方法，
这是另一种Design by Convention模式实现。例如MyComposer5.class，被命名onchang$firstName事件监听读成为“onChange event from the firstName component”于firstName组件中的onChang事件
GenericForwardComposer会帮助你forward事件到应用组件,正如你可以看到,forword在compser5.zul毫无疑问地移除掉，这样我们可以完全分离了页面层zul和业务逻辑控制层。
哎呀！写不完！分两页写！翻译的不好！希望大家拍砖！如果那里不对希望大家帮我纠正！我主要是为了自己不再翻英文看！烦死了！
