ZK6 SelectorComposer Vs MVVM Vs ViewModel with Ui Binding

In ZK5 there was only one clear approach to implement MVC by making a zul file as a View, apply a controller extending GenericForwardComposer (or may be a Spring Composer) to it. Where as in ZK6 version is equipped with new binding mechanism, i.e MVVM pattern. Programmers find it difficult to migrate from ZK5 to ZK6, this document will help you to understand different approaches available in ZK6 and where to use what approach.

Lets start with how how we used to code in ZK5:

e.g

View:

<window id=”win” apply=”com.test.SampleController”>
¬† …….. UI stuff …….
</window>

Controller:

public class SampleController extends GenericForwardComposer {

…… do some stuff ……..

}

But when you migrate to ZK6, you have more choices, actually ZK6 emphasize on MVVM pattern more. Along with this they do have older approach that is MVC using SelectorComposer (SelectorComposer extends GenericForwardComposer). Third aapproach is hybrid, combination of MVVM with UI component binding.

Here is how and where to use which approach from three of above:

1) MVVM – view gets all its data from a ViewModel and it is assumed that ViewModel will not directly change UI components of its View, infact ViewModel is unaware of its View. This approach is great when you have to populate the forms, grids, basically in CURD operation. And you don’t need access over UI components of View directly.

e.g of MVVM

View:

<window title=”Order Management” border=”normal” width=”600px”
apply=”org.zkoss.bind.BindComposer” viewModel=”@id(‘vm’) @init(orderVm)” >

…… form or grids……….
</window>

ViewModel:

public class OrderVM {
……….getters and setters………..
}

2) SelectorComposer (MVC) – is best used where you don’t have to populate any model data in view. Sometimes you only need to trigger some events and want the Controller to have access of UI components present in View. For example you may want to open a popup from server or you want to update the progress of a backend process through meter or may be you want to add/remove UI components.

e.g

View:

<window id=”win” apply=”MyComposer">
………
</window>

Controller:

public class MyComposer extends SelectorComposer {
@Wire("#win") private Window myWin;
}

3) MVVM with UI Component wiring capabilities РA mix approach. It would be used where you want to use MVVM, and also want to control the UI components in your ViewModel. It is rare but sometime you may need it, like changing states of UI components  (e.g visible true/false) from server when ever a commend is fired.

e.g of MVVM + UI binding

<window title=”Order Management” border=”normal” width=”600px”
apply=”org.zkoss.bind.BindComposer” viewModel=”@id(‘vm’) ¬†@init(orderVm)” >

…… form or grids……….
<window mode=”embedded” visible=”false” id=”embeddedWin”>
</window>

</window>

ViewModel:

public class OrderVM {
@Wire(#embeddedWin)

private Window embeddedWin;
@Init

public void init(@ContextParam(ContextType.VIEW) org.zkoss.zk.ui.Component view){

Selectors.wireComponents(view, this, false);
}

……….getters and setters………..

}

Hope it set the clear boundaries between these three approaches.

Suggestions and correction are always welcome.

References:

http://books.zkoss.org/wiki/Small%20Talks/2012/February/MVVM%20in%20ZK6:%20Form%20Binding

http://www.zkoss.org/forum/listComment/19085-ZK6-SelectorComposer-Data-binding?lang=en

Thanks for reading

One thought on “ZK6 SelectorComposer Vs MVVM Vs ViewModel with Ui Binding

Leave a Reply to william Cancel reply

Your email address will not be published. Required fields are marked *


three × = 9

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>