Question

I have two ViewModels in my MVVM app. the one is bind to main window and another to popup window which appears after click on the button. in the popup window I need binding to the selected entity from main window. how can I access this entity in MainViewModel from PopupViewModel?

Answer 1

ZK has the concept of the event queue and global commands for communication between multiple ViewModels so we can use that to pass the current selected entity to the ViewModel of a popup window.

Using this zk mvvm demo page:

(see docs)

I added to the listbox a global command which fires out the current selected reminder of the main ViewModel which needs to be shown by a popup window:

    <listbox id="list" multiple="true" rows="6"
        model="@load(vm.reminders)"
        selectedItem="@bind(vm.selectedReminder)" 
        onSelect="@global-command('refresh', reminder=vm.selectedReminder)">

Then I added to the bottom of the page a popup window with a second ViewModel:

    <window id="info" visible="false" width="120px" border="normal" position="parent"
     apply="org.zkoss.bind.BindComposer"
    viewModel="@id('vm') @init('org.zkforge.zktodo2.ui.ViewModelPopup')"
    >
You have selected <label value="@load(vm.currentReminder.name)"/>
</window>
<button label="More info" onClick="info.doPopup()"/>
</zk>

The pop up Viewmodel has a method which accepts the global command which takes the entity as a parameter:

public class ViewModelPopup  {

    protected Reminder currentReminder = new Reminder();

    public Reminder getCurrentReminder() {
        return currentReminder;
    }

    public void setCurrentReminder(Reminder currentReminder) {
        this.currentReminder = currentReminder;
    }

    @GlobalCommand @NotifyChange("currentReminder")
    public void refresh(@BindingParam("reminder") Reminder reminder ){
        this.setCurrentReminder(reminder);
        return;
    }

}

So now whenever you select an item in the listbox the refresh method is fired on the popup ViewModel passing into it data taken from the main ViewModel. Whenever you hit the “More info” button at the bottom of the page to show the popup window it displays the name of the current selected entity.

The documentation which I followed to do this is at:

(docs1)

(docs2)

The instructions to run that sample app are on the readme at (Docs3)