Monday, July 1, 2013

ZK: How to close Bandbox using MVVM pattern

Zk is a great framework, but its documentation doesn't always provide good examples when it comes to MVVM; Bandbox examples in particular only refer to MVC.
Since I am using MVVM I had to find my own solution.

Binder to the rescue

The idea is to have the bandbox open state in the VM and to provide command handlers to change the property. Here's a groovy example:

class MyViewModel {
...
boolean bandBoxOpen = false
....
@NotifyChange('bandBoxOpen')
@Command
def onOpenBandBox() {
bandBoxOpen = true
}
@NotifyChange('bandBoxOpen')
@Command
def onCloseBandBox() {
bandBoxOpen = false
}
}

Then it's just a matter of wiring up the right event and value (in the .zul file):

<bandbox onOpen="@command('onOpenBandBox')"  open="@bind(vm.bandBoxOpen)">
...
</bandbox>

The onClose command could be fired, for example, on the double click of a list item:

<listitem onDoubleClick="@command('onCloseBandBox')">... 

P.S.: I would be more than happy to donate this solution to improve ZK documentation

1 comment: