0

Help on ZK_MVC_Made_Easy

asked 2012-04-24 09:45:30 +0800

Senthilchettyin gravatar image Senthilchettyin flag of India
2623 3 8
http://emrpms.blogspot.in...

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 ?????????????

delete flag offensive retag edit

11 Replies

Sort by ยป oldest newest

answered 2012-04-24 11:25:03 +0800

terrytornado gravatar image terrytornado flag of Germany
9393 3 7 16
http://www.oxitec.de/

updated 2012-04-24 11:35:27 +0800

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]

link publish delete flag offensive edit

answered 2012-04-24 11:46:55 +0800

Senthilchettyin gravatar image Senthilchettyin flag of India
2623 3 8
http://emrpms.blogspot.in...

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 ?

link publish delete flag offensive edit

answered 2012-04-24 18:29:10 +0800

Matze2 gravatar image Matze2
773 7

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.

link publish delete flag offensive edit

answered 2012-04-24 19:01:11 +0800

Senthilchettyin gravatar image Senthilchettyin flag of India
2623 3 8
http://emrpms.blogspot.in...

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 ?

link publish delete flag offensive edit

answered 2012-04-24 20:00:24 +0800

Matze2 gravatar image Matze2
773 7

updated 2012-04-24 20:01:56 +0800

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.

link publish delete flag offensive edit

answered 2012-04-25 02:05:09 +0800

matthewgo gravatar image matthewgo
375

Hi Senthilchettyin,

You can download zk5 pdf file from here:
http://www.zkoss.org/documentation#References

link publish delete flag offensive edit

answered 2012-04-25 08:08:09 +0800

terrytornado gravatar image terrytornado flag of Germany
9393 3 7 16
http://www.oxitec.de/

Only a hint. The link to the ZK6 Client.side pdf Reference seems to be broken?

link publish delete flag offensive edit

answered 2012-04-26 10:48:24 +0800

Senthilchettyin gravatar image Senthilchettyin flag of India
2623 3 8
http://emrpms.blogspot.in...

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

}

link publish delete flag offensive edit

answered 2012-04-26 11:05:04 +0800

Matze2 gravatar image Matze2
773 7

updated 2012-04-26 11:05:19 +0800

I always had the init directive at the beginning of the file, not in the middle.
You cannot just access

"@{ex1.FirstName}"

directly.
Either you create a getter method for "ex1" in your composer. Then you can use the built-in shortcut "win$composer.ex1.<etc>", but you have to give your window the id "win" before.
Or - what I usually prefer - you publish your top-level bind variables as attributes of your composer component.
In your example this is an
comp.setAttribute("ex1", ex1);

in doAfterCompose.
Hope this helps.

link publish delete flag offensive edit

answered 2012-04-26 11:06:39 +0800

Matze2 gravatar image Matze2
773 7

Anf of course it should be "ex1.firstName" according to bean standard.

link publish delete flag offensive edit
Your reply
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow

RSS

Stats

Asked: 2012-04-24 09:45:30 +0800

Seen: 429 times

Last updated: Apr 26 '12

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More