0

How to handle custom client side events with MVVM pattern?

asked 2012-03-30 18:10:17 +0800

madruga0315 gravatar image madruga0315 flag of Brazil
937 2 12

Hey all,

on the MVC paradigm, it's just a matter of adding and event listener to the root component and it should work.

How should I handle this on the MVVM pattern, as my VM shouldn't know anything about the view?

Is Selectors.wireEventListeners(rootWindow, viewModel) on my composer the correct way to go?
(along side with @Listen("myCustomEvent = #window") on my view model method)

Thanks,
Madruga

delete flag offensive retag edit

8 Replies

Sort by ยป oldest newest

answered 2012-04-02 09:22:08 +0800

benbai gravatar image benbai
2228 6
http://www.zkoss.org

updated 2012-04-02 09:22:48 +0800

Hi Madruga,

Please refer to the sample below,
it has 3 buttons: 'test', 'test two' and 'test three',

The 'test' button bind an 'onTest' event to command 'test', it will change the text of the label.
Click the 'test two' button will trigger the onTest event of test button by event forwarding.
Click the 'test three' button will send an au request to trigger onTest event of test button.

ZKFiddle-Link

TestVM.java
package j2kbd391$v2;


import java.util.*;

import org.zkoss.bind.BindContext;
import org.zkoss.bind.Form;
import org.zkoss.bind.ValidationContext;
import org.zkoss.bind.Validator;
import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.NotifyChange;
import org.zkoss.bind.annotation.ContextParam;
import org.zkoss.bind.annotation.ContextType;
import org.zkoss.zul.*;
import org.zkoss.zk.ui.Component;
public class TestVM {
private String _msg = "before test";

public String getMsg() {
return _msg;
}
@Command @NotifyChange("msg")
public void test () {
_msg = "after test";
}
}


index.zul
<zk>
<script type="text/javascript">
function doTest () {
zAu.send(new zk.Event(zk.Widget.$('$btn'), 'onTest', null), 10);
}
</script>
<window apply="org.zkoss.bind.BindComposer"
viewModel="@id('vm') @init('j2kbd391$v2.TestVM')">
<div width="200px">
<label value="@load(vm.msg)" style="width: 300px;" />
</div>
<button id="btn" label="test" onTest="@command('test')" />
<button label="test two" forward="onClick=btn.onTest" />
<button label="test three">
<attribute name="onClick">
Clients.evalJavaScript("doTest();");
</attribute>
</button>
</window>
</zk>

Regards,
Ben

link publish delete flag offensive edit

answered 2012-04-11 01:01:12 +0800

madruga0315 gravatar image madruga0315 flag of Brazil
937 2 12

Hi Ben,

It worked out.

Thank you very much!

link publish delete flag offensive edit

answered 2012-06-11 03:16:46 +0800

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

hI

I am trying to handle double click event for listbox. I have handled easily in MVC. But how we can handle in MVVM.

link publish delete flag offensive edit

answered 2012-06-11 03:18:21 +0800

Senthilchettyin gravatar image Senthilchettyin flag of India
2617 3 8
http://emrpms.blogspot.in...
Here is the code which is NOT WORKING
<?page title="new page title" contentType="text/html;charset=UTF-8"?>
<zk>
	<window apply="org.zkoss.bind.BindComposer"
		viewModel="@id('myvm') @init('ex.myexample.example4VM')">
		<listbox id="test" model="@load(myvm.persons1)">
			<listhead sizable="true">
				<listheader label="First Name" width="400px" />
				<listheader label="Last Name" width="285px" />
			</listhead>
			<template name="model" var="p1">
				<listitem forward="onDoubleClick=onDoubleClicked">
					<listcell label="@load(p1.firstName)" />
					<listcell label="@load(p1.lastName)" />
				</listitem>
			</template>
		</listbox>
	</window>
</zk>

package ex.myexample;

import java.util.ArrayList;
import java.util.List;

import org.zkoss.zul.Messagebox;

public class example4VM {
	
	private List<person> persons = new ArrayList<person>();

	public List<person> getPersons1() {
		person p1 = new person();
		p1.setFirstName("John");
		p1.setLastName("Robert");
		persons.add(p1);

		p1 = new person();
		p1.setFirstName("Rosy");
		p1.setLastName("Sean");
		persons.add(p1);

		p1 = new person();
		p1.setFirstName("Rosy1");
		p1.setLastName("Sean1");
		persons.add(p1);
		return persons;
	}
	
	public void onDoubleClicked() {
		Messagebox.show("inside");
	}
	
}
link publish delete flag offensive edit

answered 2012-06-11 12:13:25 +0800

madruga0315 gravatar image madruga0315 flag of Brazil
937 2 12

When using the MVVM pattern, you don't use forward, or handle onEvent directly, instead, you declare the command on both zul and VM, and then the binder is responsible to make the link between them.

So in your zul:

<listitem onDoubleClick="@command('doubleClicked')">

And in your VM

@Command public void doubleClicked() { }

Regards,
Madruga

link publish delete flag offensive edit

answered 2012-06-11 18:16:18 +0800

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

Hi Madruga

Thank you. Yes it is working as you said. Here is an small example for new comers

link publish delete flag offensive edit

answered 2019-04-27 03:04:53 +0800

hamza0867 gravatar image hamza0867
1

updated 2019-04-30 12:34:31 +0800

cor3000 gravatar image cor3000
4531 2 7
ZK Team

Hello,

Plz can you listen to a custom event that was broadcasted using mvvm approach ? Let's say I have page1.zul where I have

<include src="page2.zul"/>

In page2.zul I have

<button onClick="@command('triggerEvent')"/>

With

public void triggerEvent(){
  Events.postEvent(new Event("myEvent"));
}

How do I catch the event myEvent in page1.zul ??

Thank you in advance

link publish delete flag offensive edit

answered 2019-04-30 13:45:43 +0800

cor3000 gravatar image cor3000
4531 2 7
ZK Team

I assume you forgot to prefix the event with 'on' in order for the zul parser do add an event listener.

So here an example showing how to add the event listener for onMyEvent to the <include> component:

http://zkfiddle.org/sample/3q8rftp/2-post-listen-to-custom-event

If using MVVM also in page1.zul you can use a command binding as well

onMyEvent="@command('someCommandInPage1')"
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-03-30 18:10:17 +0800

Seen: 824 times

Last updated: Apr 30

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