Friday, 22 June 2012

MVVM Modal window–Pass Parameter and Return values

In this post, we will see how we can pass some values to the modal window when calling from the parent window and also vice versa (i.e) return some values from the modal window to parent window

 

Project Name : MVVMModalWindow
Project Structure:

image

Demo.zul

<?page title="new page title" contentType="text/html;charset=UTF-8"?>
<zk>
<window title="MVVM Modal window Passing arguments and retur values"
border="normal" apply="org.zkoss.bind.BindComposer"
viewModel="@id('e') @init('com.demo.UI.demoVM')">
Type any value and Press the Model Window Button
<separator />
Value 1 :
<textbox value="@bind(e.value1)" />
Value 2 :
<textbox value="@bind(e.value2)" />
<button label="Model Window" onClick="@command('showModelWin')" />
</window>
</zk>

 

demoVM.java

 

package com.demo.UI;

import java.util.HashMap;

import org.zkoss.bind.annotation.BindingParam;
import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.GlobalCommand;
import org.zkoss.zk.ui.Executions;
import org.zkoss.bind.annotation.NotifyChange;

public class demoVM {

private String value1;
private String value2;


public String getValue1() {
return value1;
}

public void setValue1(String value1) {
this.value1 = value1;
}

public String getValue2() {
return value2;
}

public void setValue2(String value2) {
this.value2 = value2;
}

@Command
public void showModelWin()
{
final HashMap<String, Object> map = new HashMap<String, Object>();
map.put("value1", this.value1 );
map.put("value2", this.value2);
Executions.createComponents("ModelWindow.zul", null, map);
}

@GlobalCommand
@NotifyChange({"value1","value2"})
public void refreshvalues(@BindingParam("returnvalue1") String str1, @BindingParam("returnvalue2") String str2)
{
this.value1 = str1;
this.value2 = str2;
}
}


ModelWindow.zul

<?page title="new page title" contentType="text/html;charset=UTF-8"?>
<zk>

<window id="modalDialog"
title="MVVM Modal window Passing arguments and retur values"
width="420px" height="auto" border="normal" minimizable="false"
mode="modal" maximizable="false" closable="true"
action="hide: slideUp" apply="org.zkoss.bind.BindComposer"
onCancel="@command('closeThis')"
viewModel="@id('e') @init('com.demo.UI.ModelWindowVM')">

Change the values and Press the Ok Button to return changed
values.
<separator />
Value 1 :
<textbox value="@bind(e.value1)" />
Value 2 :
<textbox value="@bind(e.value2)" />
<button label="Ok" onClick="@command('save')" />
</window>
</zk>


ModelWindowVM.java

 


package com.demo.UI;

import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.ContextParam;
import org.zkoss.bind.annotation.ContextType;
import org.zkoss.bind.annotation.ExecutionArgParam;
import org.zkoss.bind.annotation.Init;
import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.select.Selectors;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zul.Window;
import java.util.HashMap;
import org.zkoss.bind.BindUtils;
import java.util.Map;

public class ModelWindowVM {

@Wire("#modalDialog")
private Window win;
private String value1;
private String value2;


public String getValue1() {
return value1;
}

public void setValue1(String value1) {
this.value1 = value1;
}

public String getValue2() {
return value2;
}

public void setValue2(String value2) {
this.value2 = value2;
}

@Init
public void init(@ContextParam(ContextType.VIEW) Component view,
@ExecutionArgParam("value1") String v1,
@ExecutionArgParam("value2") String v2) {
Selectors.wireComponents(view, this, false);
this.value1 = v1;
this.value2 = v2;

}

@SuppressWarnings({ "unchecked", "rawtypes" })
@Command
public void save() {
Map args = new HashMap();
args.put("returnvalue1", this.value1);
args.put("returnvalue2", this.value2);
BindUtils.postGlobalCommand(null, null, "refreshvalues", args);
win.detach();
}

@Command
public void closeThis() {
win.detach();
}
}


Now you can run the demo.zul file

8 comments:

  1. Hi, since zk 6.0.2, to wire component in a view model, you have to use new @AfterCompose annotation,
    please read upgrade note : http://books.zkoss.org/wiki/Small_Talks/2011/November/ZK_6:_Upgrade_Notes#ZK_Bind_Since_6.0.2

    ReplyDelete
  2. Your blog is great help and thanks for sharing your knowledge with the development community.
    Have a wonderful life and keep sharing.

    ReplyDelete
    Replies
    1. Thank you. More examples http://emrpmsexpert.com:8080/ZKExamples/

      Delete
    2. Thank you Senthil, your work and blog is great!!! Only here i see real useful MVVM examples.

      Delete
  3. Thanks for this example ! Way more usefull that the current documentation of ZK

    ReplyDelete
  4. I’m not that much of a online reader to be honest but your sites really nice,
    keep it up! I'll go ahead and bookmark your website to come back down the
    road. Many thanks

    Visit my weblog; das perfekte Laptop Business - Nebenjob Von Zuhause

    ReplyDelete
  5. very easy to understand than the example code in another blog , thank you for sharing your knowledge , this really helped me

    ReplyDelete
  6. If we are searching some thing in which we are expecting to to get effective of use full knowledge than we will surely go to the on this article and blogs. your blog is effective for the detail search for me. Thank you such a blod post.
    Visit: Webworker24

    ReplyDelete