关于apply属性使用的一些例子(转载来自用户：tan_dan)

 

前些天根据在ZK官网上找了些关于apply的使用例子，例子很简单。但是还是受益
匪浅。为避免忘记，做下详细的代码记录：

ZUL 文件：

[xhtml] view plain copy print ?

1. <zk>
2. <!--方式一 <window title="composer1 example" width="300px" apply="com.ui.MyComposer" border="normal"> -->
3. <!--方式二 <window title="composer1 example" width="300px" apply="com.ui.MyComposer1" border="normal"> -->
4. <!--方式二 <window title="composer1 example" width="300px" apply="com.ui.MyComposer2" border="normal"> -->
5. <windowtitle="composer1 example"width="300px"apply="com.ui.MyComposer3"border="normal">
6. <grid>
7. <rows>
8. <row>First name :<textboxid="fname"forward="onChange=onFirstName"/></row>
9. <row>Second name :<textboxid="sname"forward="onChange=onSecondName"/></row>
10. <row>Full name :<labelid="fullname"/></row>
11. </rows>
12. </grid>
13. </window>
14. </zk>

<zk> <!--方式一 <window title="composer1 example" width="300px" apply="com.ui.MyComposer" border="normal"> --> <!--方式二 <window title="composer1 example" width="300px" apply="com.ui.MyComposer1" border="normal"> --> <!--方式二 <window title="composer1 example" width="300px" apply="com.ui.MyComposer2" border="normal"> --> <window title="composer1 example" width="300px" apply="com.ui.MyComposer3" border="normal"> <grid> <rows> <row>First name : <textbox id="fname" forward="onChange=onFirstName"/></row> <row>Second name : <textbox id="sname" forward="onChange=onSecondName"/></row> <row>Full name : <label id="fullname"/></row> </rows> </grid> </window> </zk>

通过指定apply的内容调用UI层的不同方法。

例1：com.ui.MyComposer 文件代码：

[java] view plain copy print ?

1. public class MyComposer implements Composer{ //实现Composer接口
3. private Textbox firstname;
4. private Textbox secondname;
5. private Label fullname;
7. public void doAfterCompose(Component win) throws Exception {
9. firstname = (Textbox) win.getFellow("fname"); //页面的数据通过getFellow获得
10. secondname = (Textbox) win.getFellow("sname");
11. fullname = (Label) win.getFellow("fullname");
13. //定义并注册事件监听器
14. win.addEventListener("onFirstName",
15. new EventListener() {
16. public void onEvent(Event even) throws Exception {
17. fullname.setValue(firstname.getValue()+" "+secondname.getValue());
18. }
19. });
20. win.addEventListener("onSecondName",
21. new EventListener() {
22. public void onEvent(Event arg0) throws Exception {
23. fullname.setValue(firstname.getValue()+" "+secondname.getValue());
24. }
26. });
28. }
31. }

public class MyComposer implements Composer{ //实现Composer接口 private Textbox firstname; private Textbox secondname; private Label fullname; public void doAfterCompose(Component win) throws Exception { firstname = (Textbox) win.getFellow("fname"); //页面的数据通过getFellow获得 secondname = (Textbox) win.getFellow("sname"); fullname = (Label) win.getFellow("fullname"); //定义并注册事件监听器 win.addEventListener("onFirstName", new EventListener() { public void onEvent(Event even) throws Exception { fullname.setValue(firstname.getValue()+" "+secondname.getValue()); } }); win.addEventListener("onSecondName", new EventListener() { public void onEvent(Event arg0) throws Exception { fullname.setValue(firstname.getValue()+" "+secondname.getValue()); } }); } }

例2：com.ui.MyComposer1 文件代码：

[java] view plain copy print ?

1. public class MyComposer1 extends GenericComposer { 继承GenericComposer 类
3. private Textbox firstname;
4. private Textbox secondname;
5. private Label fullname;
7. public void doAfterCompose(Component win) throws Exception {
9. super.doAfterCompose(win);
11. firstname = (Textbox) win.getFellow("fname");
12. secondname = (Textbox) win.getFellow("sname");
13. fullname = (Label) win.getFellow("fullname");
14. //添加 addEventListener(remove 到该方法外)
15. }
17. public void onFirstName(Event event){
18. fullname.setValue(firstname.getValue()+" "+ secondname.getValue());
19. }
21. public void onSecondName(Event event){
22. fullname.setValue(firstname.getValue()+" "+ secondname.getValue());
23. }
24. }

public class MyComposer1 extends GenericComposer { 继承GenericComposer 类 private Textbox firstname; private Textbox secondname; private Label fullname; public void doAfterCompose(Component win) throws Exception { super.doAfterCompose(win); firstname = (Textbox) win.getFellow("fname"); secondname = (Textbox) win.getFellow("sname"); fullname = (Label) win.getFellow("fullname"); //添加 addEventListener(remove 到该方法外) } public void onFirstName(Event event){ fullname.setValue(firstname.getValue()+" "+ secondname.getValue()); } public void onSecondName(Event event){ fullname.setValue(firstname.getValue()+" "+ secondname.getValue()); } }

相对于MyComposer 来说， MyComposer1 的代码更具有可读性，它将监听器作为独立的方法从doAfterCompose方法
中分离出来，但其执行的效果是相同的。这是因为MyCompser1 继承了 GenericComposer 类

例3：MyComposer2.java 文件代码：

[java] view plain copy print ?

1. public class MyComposer2 extends GenericAutowireComposer {
3. private Textbox fname; //auto-wired (属性名要与id标志匹配)
4. private Textbox sname;
5. private Label fullname;
7. //所有的getFellow 都可以省了
10. public void onFirstName(Event event){
11. fullname.setValue(fname.getValue()+" "+sname.getValue());
12. }
14. public void onSecondName(Event event){
15. fullname.setValue(fname.getValue()+" "+sname.getValue());
16. }
17. }

public class MyComposer2 extends GenericAutowireComposer { private Textbox fname; //auto-wired (属性名要与id标志匹配) private Textbox sname; private Label fullname; //所有的getFellow 都可以省了 public void onFirstName(Event event){ fullname.setValue(fname.getValue()+" "+sname.getValue()); } public void onSecondName(Event event){ fullname.setValue(fname.getValue()+" "+sname.getValue()); } }

例3相比于例2来说，代码更为简洁。它通过继承GenericAutowireComposer ，只要属性名与Id值相同
就可以自动绑定数据而不需要调用getFellow方法。

GenericAutowireComposer类中的doAfterCompose 方法会自动帮你注入匹配的值。包括Spring的bean类
如例4：

spring-config.xml 文件代码：

[xhtml] view plain copy print ?

1. ...
2. <bean id="taskDao" class="org.springframework.transaction.interceptor.TransactionProxyFactoryBean">
3. ...

... <bean id="taskDao" class="org.springframework.transaction.interceptor.TransactionProxyFactoryBean"> ...

taskEditor.zul 文件代码：

[xhtml] view plain copy print ?

1. <window id="taskWnd" title="Task Editor" border="normal" width="500px" apply="TaskEditorComposer">
2. <grid>
3. <rows>
4. <row>Title: <textbox id="title"/></row>
5. <row>Description: <textbox id="description"/></row>
6. </rows>
7. </grid>
8. <button id="saveBtn" label="Save" forward="onClick=onSaveTask"/>
9. </window>

<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 文件代码

[java] view plain copy print ?

1. public class TaskEditorComposer extends GenericAutowireComposer {
2. private TransactionProxyFactoryBean taskDao; //Spring bean auto wired
3. private Textbox title; //auto wired
4. private Textbox description; //auto wired
5. private Button saveBtn; //auto wired
7. public void onSaveTask(Event event) {
8. Task currentTask = componentScope.get("task");
9. currentTask.setTitle(title.getValue());
10. currentTask.setDescription(description.getValue());
11. taskDao.update(currentTask);
12. }
13. ...
14. }

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); } ... }

例5：MyComposer3.java 文件代码：

该例子是为了说明GenericAutowireComposer 类支持隐式对象，例子用"self"举例

[java] view plain copy print ?

1. public class MyComposer3 extends GenericAutowireComposer{
3. private Textbox fname;
4. private Textbox sname;
5. private Label fullname;
7. public void onFirstName(Event event){
8. fullname.setValue(fname.getValue()+" "+sname.getValue());
9. ((Window)self).setTitle("First Name Changed ");
10. alert("First Name Changed to " + fname.getValue());
11. }
13. public void onSecondName(Event event){
14. fullname.setValue(fname.getValue()+" "+sname.getValue());
15. ((Window)self).setTitle("Second Name Changed ");
16. alert("Second Name Changed to " + sname.getValue());
17. }
18. }

public class MyComposer3 extends GenericAutowireComposer{ private Textbox fname; private Textbox sname; private Label fullname; public void onFirstName(Event event){ fullname.setValue(fname.getValue()+" "+sname.getValue()); ((Window)self).setTitle("First Name Changed "); alert("First Name Changed to " + fname.getValue()); } public void onSecondName(Event event){ fullname.setValue(fname.getValue()+" "+sname.getValue()); ((Window)self).setTitle("Second Name Changed "); alert("Second Name Changed to " + sname.getValue()); } }

例6 是例5的另一种实现。将java代码嵌套在zul文件中

例6：comp1_3.zul 文件代码：

[java] view plain copy print ?

1. <zk>
2. <window title="composer 1_3 example " border="normal" width="300px">
3. <attribute name="onFirstName">
4. <!--[CDATA[
5. fullname.setValue(fname.getValue()+" "+sname.getValue());
6. ((Window)self).setTitle("First name changed");
7. alert("First name change to " + fname.getValue());
8. ]]>
9. </attribute>
10. <attribute name="onSecondName">
11. <![CDATA[
12. fullname.setValue(fname.getValue()+" "+sname.getValue());
13. ((Window)self).setTitle("Second name changed");
14. alert("Second name change to " + sname.getValue());
15. ]]-->
16. </attribute>
17. <grid>
18. <rows>
19. <row>First Name : <textbox id="fname" forward="onChange=onFirstName"/></row>
20. <row>Second Name : <textbox id="sname" forward="onChange=onSecondName"/></row>
21. <row>Full Name : <label id="fullname"/></row>
22. </rows>
23. </grid>
24. </window>
25. </zk>

<zk> <window title="composer 1_3 example " border="normal" width="300px"> <attribute name="onFirstName"> <!--[CDATA[ fullname.setValue(fname.getValue()+" "+sname.getValue()); ((Window)self).setTitle("First name changed"); alert("First name change to " + fname.getValue()); ]]> </attribute> <attribute name="onSecondName"> <![CDATA[ fullname.setValue(fname.getValue()+" "+sname.getValue()); ((Window)self).setTitle("Second name changed"); alert("Second name change to " + sname.getValue()); ]]--> </attribute> <grid> <rows> <row>First Name : <textbox id="fname" forward="onChange=onFirstName"/></row> <row>Second Name : <textbox id="sname" forward="onChange=onSecondName"/></row> <row>Full Name : <label id="fullname"/></row> </rows> </grid> </window> </zk>

例7 ： comp2.zul 文件代码

[xhtml] view plain copy print ?

1. <zk>
2. <!-- <window title="comp2 example " border="normal" apply="com.ui.MyComposer4" width="500"> -->
3. <window title="comp2 example " border="normal" apply="com.ui.MyComposer5" width="500">
4. <grid>
5. <rows>
6. <row>First Name:<textbox id="fname"/></row>
7. <row>Second Name:<textbox id="sname"/></row>
8. <row>full Name:<label id="fullname"/></row>
9. </rows>
10. </grid>
11. </window>
12. </zk>

<zk> <!-- <window title="comp2 example " border="normal" apply="com.ui.MyComposer4" width="500"> --> <window title="comp2 example " border="normal" apply="com.ui.MyComposer5" width="500"> <grid> <rows> <row>First Name:<textbox id="fname"/></row> <row>Second Name:<textbox id="sname"/></row> <row>full Name:<label id="fullname"/></row> </rows> </grid> </window> </zk>

MyComposer4.java 文件代码：

[java] view plain copy print ?

1. public class MyComposer4 extends GenericForwardComposer{
3. private Label fullname;
4. private Textbox fname;
5. private Textbox sname;
7. public void onChange$fname(){
8. fullname.setValue(fname.getValue()+" "+sname.getValue() );
9. }
11. public void onChange$sname(){
12. fullname.setValue(fname.getValue()+" "+sname.getValue());
13. }
15. public void onClick$fullname(){
16. ((Window)self).setTitle(" full name OnClick ");
17. alert("the full name is " + fullname.getValue());
18. }
19. }

public class MyComposer4 extends GenericForwardComposer{ private Label fullname; private Textbox fname; private Textbox sname; public void onChange$fname(){ fullname.setValue(fname.getValue()+" "+sname.getValue() ); } public void onChange$sname(){ fullname.setValue(fname.getValue()+" "+sname.getValue()); } public void onClick$fullname(){ ((Window)self).setTitle(" full name OnClick "); alert("the full name is " + fullname.getValue()); } }

MyComposer4 类继承了 GenericForwardComposer.可以通过监听器的方法名指定监听的
组件（以xx$xx的方式），不需要在zul文件中指定 “forward” 属性

例8 ：实际应用中，当你不得不实现其他接口，继承其他的类时，你可以使用以下方式以达到例6的效果

MyComposer5.java 文件代码：

[java] view plain copy print ?

1. public class MyComposer5 implements Composer{
3. private Textbox fname;
4. private Textbox sname;
5. private Label fullname;
7. public void doAfterCompose(Component win) throws Exception {
9. //绑定变量值
10. Components.wireVariables(win, this);
12. //注册onXXX事件监听器
13. Events.addEventListeners(win, this);
15. //自动跳转
16. Components.addForwards(win, this);
17. }
19. public void onChange$fname(Event event){
20. fullname.setValue(fname.getValue()+" "+sname.getValue());
21. }
23. public void onChange$sname(Event event){
24. fullname.setValue(fname.getValue()+" "+sname.getValue());
25. }
28. }

public class MyComposer5 implements Composer{ private Textbox fname; private Textbox sname; private Label fullname; public void doAfterCompose(Component win) throws Exception { //绑定变量值 Components.wireVariables(win, this); //注册onXXX事件监听器 Events.addEventListeners(win, this); //自动跳转 Components.addForwards(win, this); } public void onChange$fname(Event event){ fullname.setValue(fname.getValue()+" "+sname.getValue()); } public void onChange$sname(Event event){ fullname.setValue(fname.getValue()+" "+sname.getValue()); } }

例9 ： 当需要使用use 属性时

comp4.zul 文件代码：

[xhtml] view plain copy print ?

1. <window title="mywindow example" border="normal" width="300px" use="MyWindow">
2. <grid>
3. <rows>
4. <row>First Name: <textbox id="firstName"/></row>
5. <row>Last Name: <textbox id="lastName"/></row>
6. <row>Full Name: <label id="fullName"/></row>
7. </rows>
8. </grid>
9. </window>

<window title="mywindow example" border="normal" width="300px" use="MyWindow"> <grid> <rows> <row>First Name: <textbox id="firstName"/></row> <row>Last Name: <textbox id="lastName"/></row> <row>Full Name: <label id="fullName"/></row> </rows> </grid> </window>

MyComposer.java 文件代码：

[java] view plain copy print ?

1. public class MyComposer6 extends Window implements AfterCompose{
3. private Textbox fname;
4. private Textbox sname;
5. private Label fullname;
8. public void afterCompose() {
9. //绑定属性值
10. Components.wireVariables(this, this);
12. //此时 不需要注册事件监听器
14. //指定自动跳转
15. Components.addForwards(this, this);
17. }
18. public void onChange$fname(Event event){
19. fullname.setValue(fname.getValue()+" "+ sname.getValue());
20. }
22. public void onChange$sname(Event event){
23. fullname.setValue(fullname.getValue()+" "+ sname.getValue());
24. }
27. }

public class MyComposer6 extends Window implements AfterCompose{ private Textbox fname; private Textbox sname; private Label fullname; public void afterCompose() { //绑定属性值 Components.wireVariables(this, this); //此时 不需要注册事件监听器 //指定自动跳转 Components.addForwards(this, this); } public void onChange$fname(Event event){ fullname.setValue(fname.getValue()+" "+ sname.getValue()); } public void onChange$sname(Event event){ fullname.setValue(fullname.getValue()+" "+ sname.getValue()); } }