-
FEATURED COMPONENTS
First time here? Check out the FAQ!
Hi
I am just going thru ZK_MVC_Made_Easy
Here is my zul content
<?page title="Example1" contentType="text/html;charset=UTF-8"?>
<zk>
<label
value=" Two input textboxes for the user to input First Name and Last Name. The Full Name will be automatically updated when either input textbox changed
http://books.zkoss.org/wiki/Small_Talks/2008/August/ZK_MVC_Made_Easy
Implements composer interface where we need add event listeners"
style="font-size : 18px;font-family: verdana,arial,sans-serif;" />
<separator />
<window title="MVC Pattern" border="normal" width="300px" apply="com.me.Example1">
<grid>
<columns>
<column label="" />
<column label="" />
</columns>
<rows>
<row>
First Name :
<textbox id="firstName" forward="onChange=firstname_change"/>
</row>
<row>
Last Name :
<textbox id="lastName" forward="onChange=lastname_change"/>
</row>
<row>
Full Name :
<textbox id="fullName" />
</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;
public class Example1 implements Composer {
private Textbox firstName;
private Textbox lastName;
private Textbox fullName;
@SuppressWarnings("unchecked")
public void doAfterCompose(Component win) throws Exception {
firstName = (Textbox) win.getFellow("firstName");
lastName = (Textbox) win.getFellow("lastName");
fullName = (Textbox) win.getFellow("fullName");
// define and register event listeners
win.addEventListener("firstname_change", new EventListener() {
public void onEvent(Event event) throws Exception {
fullName.setValue(firstName.getValue() + " "
+ lastName.getValue());
}
});
win.addEventListener("lastname_change", new EventListener() {
public void onEvent(Event event) throws Exception {
fullName.setValue(firstName.getValue() + " "
+ lastName.getValue());
}
});
}
}
When i run it, it gives me the following error
org.zkoss.zk.ui.UiException: Not an event name: firstname_change
org.zkoss.zk.ui.sys.ComponentsCtrl.parseEventExpression(ComponentsCtrl.java:245)
org.zkoss.zk.ui.sys.ComponentsCtrl.applyForward0(ComponentsCtrl.java:312)
org.zkoss.zk.ui.sys.ComponentsCtrl.applyForward(ComponentsCtrl.java:273)
org.zkoss.zk.ui.impl.UiEngineImpl.execCreateChild0(UiEngineImpl.java:824)
org.zkoss.zk.ui.impl.UiEngineImpl.execCreateChild(UiEngineImpl.java:767)
org.zkoss.zk.ui.impl.UiEngineImpl.execCreate0(UiEngineImpl.java:676)
org.zkoss.zk.ui.impl.UiEngineImpl.execCreate(UiEngineImpl.java:640)
org.zkoss.zk.ui.impl.UiEngineImpl.execCreateChild0(UiEngineImpl.java:813)
org.zkoss.zk.ui.impl.UiEngineImpl.execCreateChild(UiEngineImpl.java:767)
org.zkoss.zk.ui.impl.UiEngineImpl.execCreate0(UiEngineImpl.java:67
Actually i changed only the event name as per the example from forward="onChange=onFirstName" to onChange=firstname_change
is there any naming pattern we need to follow for the event naming ?????????????
Hi,
why not using the GenericForwardComposer? With it you have easier and less code. ZK makes the most for you.
Forwarding is common used for dynamic created components i.e. ListItems in a Listbox, where you cannot give easy a unique id to the ListIitem component. For preDeclared components as in your sample zul you can use the 'forwarding' by naming convention which is offered by the GenericForwardComposer.
--> public void onTheComponentEventName$TheComponentID(Event event).{}
<?page title="Example1" contentType="text/html;charset=UTF-8"?> <zk> <label value=" Two input textboxes for the user to input First Name and Last Name. The Full Name will be automatically updated when either input textbox changed http://books.zkoss.org/wiki/Small_Talks/2008/August/ZK_MVC_Made_Easy Implements composer interface where we need add event listeners" style="font-size : 18px;font-family: verdana,arial,sans-serif;"> </label> <separator></separator> <window title="MVC Pattern" border="normal" width="300px" apply="com.me.Example1"> <grid> <columns> <column label="" /> <column label="" /> </columns> <rows> <row> First Name : <textbox id="firstName"></textbox> </row> <row> Last Name : <textbox id="lastName"></textbox> </row> <row> Full Name : <textbox id="fullName"></textbox> </row> </rows> </grid> </window> </zk>
.
public class Example1 implements GenericForwardComposer { private Textbox firstName; private Textbox lastName; private Textbox fullName; public void doAfterCompose(Component win) throws Exception { super.doAfterCompose(window); // If needed, do your stuff here } public void onChange$firstName(Event event) { // Do your stuff here System.out.println("I'm in the event"); } public void onChange$lastName(Event event) { // Do your stuff here System.out.println("I'm in the event"); } }
best
Stephan
PS: Please use the [ c o d e ] your code between here [ / c o d e]
Thank you stephan
I am just learning by going thru the article http://books.zkoss.org/wiki/Small_Talks/2008/August/ZK_MVC_Made_Easy
They have started first with implements composer and end with GenericForwardComposer
Actually even better in zk 6 , we should use Annotation Based Composer For MVC as per the following
http://books.zkoss.org/wiki/Small_Talks/2011/January/Envisage_ZK_6:_An_Annotation_Based_Composer_For_MVC
am i right ?
Golden Rule: First look at the date of the articles. Everything older than 2010 should be treated with care.
There is probably a superior solution meanwhile.
State of the art (in my opinion) is GenericForwardComposer plus Databinding (ZK5) and/or the new MVVM approach of ZK6 with implementing a ViewModel class.
Personally, I do not see any gain of the annotation variant which ZK6 provides.
Just my two cents.
Hi Matze
Thank you very much.
Yes I totally agree with you. But for beginners like me, no idea or direction to find the superior solution.
Anyway i have learned this today and created samples as follows
Method 1 : Implements Composer
http://emrpms.blogspot.in/2012/04/mvc-using-composer-interface.html
Method 2 : extends GenericComposer
http://emrpms.blogspot.in/2012/04/zk-mvc-using-genericcomposer-utility.html
Method 3: extends GenericAutowireComposer
http://emrpms.blogspot.in/2012/04/zk-mvc-using-genericautowirecomposer.html
Method 4: extends GenericForwardComposer
http://emrpms.blogspot.in/2012/04/zk-mvc-using-genericforwardcomposer.html
Method 5: An Annotation Based Composer For MVC
http://emrpms.blogspot.in/2012/04/zk-mvc-annotation-based-composer-for.html
Can you give me some reference for the GenericForwardComposer plus Databinding (ZK5) to learn that stuff ?
Lots of documents are already updated for ZK6. But there is still the ZK Essentials for ZK5 available in the Documentation page. Same applies for Developer Reference.
Hi Senthilchettyin,
You can download zk5 pdf file from here:
http://www.zkoss.org/documentation#References
Only a hint. The link to the ZK6 Client.side pdf Reference seems to be broken?
Hi Matze2
I followed the ZK 5 Developer reference and essentially document . Since i am new zk, simple things are not working for me :)
Actually, in the document , they have used zscript to show the example. But i do not want to zscript at all, because all the zk document saying it is only for prototype and
price on the performance.
So i used MVC to achieve the same concept. But that is not working.
What i am trying to see the output is, when the page is loaded, it should display the text box values.
As per the document, if i use
apply="mypack.Ex1Controller, org.zkoss.zkplus.databind.AnnotateDataBinderInit"
eclipse showing different error and while running it showing the following error
org.zkoss.zk.ui.UiException: class org.zkoss.zkplus.databind.AnnotateDataBinderInit must implement interface org.zkoss.zk.ui.util.Composer
org.zkoss.zk.ui.impl.AbstractUiFactory.newComposer(AbstractUiFactory.java:121)
org.zkoss.zk.ui.impl.AbstractUiFactory.newComposer(AbstractUiFactory.java:135)
org.zkoss.zk.ui.impl.Utils.newComposer(Utils.java:81)
org.zkoss.zk.ui.metainfo.ComponentInfo.toComposer(ComponentInfo.java:355)
org.zkoss.zk.ui.metainfo.ComponentInfo.toComposers(ComponentInfo.java:323)
org.zkoss.zk.ui.metainfo.ComponentInfo.resolveComposer(ComponentInfo.java:310)
So i changed back to the old way : <?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" ?>
after this there was no error , but no information displayed in the begining.
Can you please help me in this ?
Here is the Code
Example1.zul
<?page title="MVC Data binding" contentType="text/html;charset=UTF-8"?> <zk> <separator /> <?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" ?> <window title="MVC Data binding" border="normal" width="700px" apply="mypack.Ex1Controller"> <grid> <columns> <column label="" /> <column label="" /> </columns> <rows> <row> First Name : <textbox id="firstName" value="@{ex1.FirstName}"/> </row> <row> Last Name : <textbox id="lastName" value="@{ex1.LastName}"/> </row> <row> Address : <textbox id="address" value="@{ex1.Address}"/> </row> </rows> </grid> </window> </zk>
Here is my controller
package mypack; import org.zkoss.zk.ui.Component; import org.zkoss.zk.ui.util.GenericForwardComposer; import org.zkoss.zul.Textbox; @SuppressWarnings("rawtypes") public class Ex1Controller extends GenericForwardComposer { private static final long serialVersionUID = 1L; Ex1Modal ex1 = new Ex1Modal(); @SuppressWarnings("unchecked") public void doAfterCompose(Component comp) { try { super.doAfterCompose(comp); } catch (Exception e) { // TODO Auto-generated catch block e.printStackTrace(); } // wire variables and event listners ex1.setFirstName("John"); ex1.setLastName("Smith"); ex1.setAddress("1st Street"); } }
Here is my modal class
package mypack; public class Ex1Modal { private String firstName = ""; private String lastName = ""; private String address = ""; public String getFirstName() { return firstName; } public void setFirstName(String firstName) { this.firstName = firstName; } public String getLastName() { return lastName; } public void setLastName(String lastName) { this.lastName = lastName; } public String getAddress() { return address; } public void setAddress(String address) { this.address = address; } }
I always had the init directive at the beginning of the file, not in the middle.
You cannot just access
"@{ex1.FirstName}"
comp.setAttribute("ex1", ex1);
Asked: 2012-04-24 09:45:30 +0800
Seen: 429 times
Last updated: Apr 26 '12