Tuesday, 24 April 2012

ZK MVC Using composer interface


This is the first post in a series of ZK MVC

Just going thru the following link to get some idea about MVC
http://books.zkoss.org/wiki/Small_Talks/2008/August/ZK_MVC_Made_Easy

Everything went fine as long as i copied and paste from the examples
But when i started my own example, got into problem and came to know some concepts or tricks or whatever be


Here is my first example on MVC using composer interface. Later on i will post how we can do this with other ways

This example simply clearly all the values in the form.

Here is my Zul File

<?page title="Example1" contentType="text/html;charset=UTF-8"?>
<zk>
<label
value=" http://books.zkoss.org/wiki/Small_Talks/2008/August/ZK_MVC_Made_Easy.
Using implements Composer"
style="font-size : 18px;font-family: verdana,arial,sans-serif;" />
<separator />
<window title="MVC Pattern" border="normal" width="300px"  apply="com.me.Example6">
<grid>
<columns>
<column label="" />
<column label="" />
</columns>
<rows>
<row>
First Name :
<textbox id="firstName" />
</row>
<row>
Last Name :
<textbox id="lastName" />
</row>
<row>
Address :
<textbox id="address" />
</row>
<row>
<button id="Clear" label="Clear" forward="onClick=onClear_btn"/>
</row>

</rows>
</grid>
</window>
</zk>


Here is my composer


package com.me;

import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.event.EventListener;
import org.zkoss.zk.ui.util.Composer;
import org.zkoss.zul.Textbox;
import org.zkoss.zul.Window;

public class Example6 implements Composer {

private Textbox firstName;
private Textbox lastName;
private Textbox address;

public void doAfterCompose(Component comp) throws Exception {


firstName = (Textbox) comp.getFellow("firstName");
lastName = (Textbox) comp.getFellow("lastName");
address = (Textbox) comp.getFellow("address");

// define and register event listeners
comp.addEventListener("onClear_btn", new EventListener() {
public void onEvent(Event event) throws Exception {
firstName.setValue("");
lastName.setValue("");
address.setValue("");
}
});
}

}




Here is the demo with source code download
Demo



Here the composer1.zul defines the View of the application while the MyComposer1 class intervenes in the life cycle of the window creation and is responsible for the definition and registration of the event listener. However, the more you write these codes, the more you will find the same addEventListener pattern occurs repeatedly. So..., "Can we take away those addEventListener codes?"




1 comment:

  1. hi!! thanks for your post!! it was very usefull for me.

    What about bind the paging event in the composer??

    Thank you!

    ReplyDelete