Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
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
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.
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";
}
}
<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
Hi Ben,
It worked out.
Thank you very much!
hI
I am trying to handle double click event for listbox. I have handled easily in MVC. But how we can handle in MVVM.
<?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");
}
}
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
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
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')"
Asked: 2012-03-30 18:10:17 +0800
Seen: 843 times
Last updated: Apr 30 '19