MVVM and MVC mix (Communication, createComponents)

asked 2012-05-09 08:45:53 +0800

juergenmw gravatar image juergenmw
79 1

Hi guys

I started using ZK (6) two weeks ago with a simple MVC implementation and after a while I came across MVVM which I also started to use in my demo application. In some situations both make sense (from my point of view) but sometimes it is really hard to mix them.

One situation is when using Executions.createComponents in a Composer and the new component uses MVVM. I read those links:

Communicating between MVC and MVVM patterns and between View Models
Forum: ZK6 SelectorComposer + Data binding

But I can not figure out how this works, maybe somebody has an working example of @init in MVVM - how to pass a parameter (hasmap) to the new zul File (or/and) it's ViewModel.

In general - is there a howto for mixing MVVM and MVC ... what are the standard solutions for standard situations?
I assume there are many ways but I am sure there are quite a few "best practice" examples.


delete flag offensive retag edit

9 Replies

Sort by ยป oldest newest

answered 2012-05-09 09:14:47 +0800

Matze2 gravatar image Matze2
773 7

Here is an example where a primary id (Long) is passed through createComponents.
In your arg Map you pass the id like the following:

arg.put("id", id);

The according ViewModel init method then looks like that:
public void init(@ExecutionArgParam("id") Long id) {

Hope this answers your question.

link publish delete flag offensive edit

answered 2012-05-09 10:01:30 +0800

juergenmw gravatar image juergenmw
79 1

updated 2012-05-09 10:03:00 +0800

Hi Matze

Thanks - that's quite easy ;)

I played around with GlobalCommands:


private void doCustomerDialog(Customer customer) {

   	winCustomerCrud = (Window) Executions.createComponents("/WEB-INF/pages/customer.zul", null, null);
	HashMap map = null;
    	if ( customer != null ) {
    		map = new HashMap();
        	map.put("kunde", kunde);
        	BindUtils.postGlobalCommand(null, null, "setCustomer", map);

Then in MVVM

	@NotifyChange ("selectedCustomer")
	public void setCustomer(@BindingParam("customer") Customer customer)
		System.out.println("set customer id:" + customer.getId());

I guess this is not the best solution since it does not set the data on initialization (which would be better) but at least I got a working GlobalCommand between MVVM and MVC.


link publish delete flag offensive edit

answered 2012-05-12 19:33:41 +0800

juergenmw gravatar image juergenmw
79 1


I thought it is a good idea to put a question concerning a related question in here again.

If I want to create a new component (eg window) from within an MVC application I simply use Executions.CreateComponents inside the Composer - for example when a button was clicked.

If I want to do the same in an MVVM environment I DONT wanna do that in the VM because I would have to create ZK components there which weakens the MVVM approach. What is best practice to include a zul file (or create a component) when a button is clicked without using @Command and createComponent server-side (VM)?


link publish delete flag offensive edit

answered 2012-05-16 10:00:32 +0800

juergenmw gravatar image juergenmw
79 1

Ok, I weakened MVVM and used a window object in VM:

	public void doDialog(){
   	 	Window winInputlagerCrud = (Window) Executions.createComponents("/WEB-INF/pages/crud.zul", null, null);

Using this method has another disadvantage - it is not possible to use the existing VM (and it's referenced/selected data) for the new window.

So my goal is to:

1.) Use MVVM in Data Overview AND Detail (CRUD)
2.) CRUD should be implemented as overlay - most MVVM-only-examples show how to do it with an integrated form below/above the list
3.) I wan to use the same VM for the overlay - VM knows my selected data
4.) I don't think it is a good idea to use this in VM to create the overlay (see above)

Window winInputlagerCrud = (Window) Executions.createComponents

Is there any possibility to realize this? What is the "standard way" for this implementation?
Thanks for your help


link publish delete flag offensive edit

answered 2012-05-16 12:18:42 +0800

Matze2 gravatar image Matze2
773 7

Maybe I didn't fully understand, but...
I would just pass the View Model or parts of it via the arg Map and use it in crud.zul.

link publish delete flag offensive edit

answered 2012-05-16 12:45:47 +0800

juergenmw gravatar image juergenmw
79 1

Hi Matze

Thanks for trying to help - I will explain it more detailed:

If you have a look at this ZK MVVM example and pics you can see that the data list and also the detail/form (CRUD) is in one "window" - it also uses one VM (sure, whatelse).

I want to do the same BUT my CRUD should be a (new) window/overlay.

So my knowledge to do this is:

1.) Create a new component (not a good idea because usually this is done in the controller and weakens MVVM)
2.) The new Component gets the selected element via ARG
3.) The new Component (window) has a new/separate Composer (MVC) or VM (MVVM)

So my questions are:

1.) Is there a "best practice" to create a new window without using CreateComponent on the backend - so just from the client?
2.) Can the new window also use the already existing VM binder because it knows my selected data row already - I only want to display (and edit) it inside an (newly created or hidden) overlay - I want to avoid writing a new VM for the overlay.


link publish delete flag offensive edit

answered 2012-05-16 13:57:02 +0800

Matze2 gravatar image Matze2
773 7

updated 2012-05-16 13:57:53 +0800

Ad 1. I don't know of any. And I think createComponents is also the correct answer here. I would compare it with a call to some business layer. What you can do is to add a callback interface implementation to the arg Map.
Inside you can do

binder.notify(this, "selectedItem");

In this way you don't pass the binder over. Passing the binder itself in ARG I would not consider elegant.
Look in ZK's MessageBox class, they have EventListeners as callbacks since version 6.

Ad 2. Why would you want to reuse the same ViewModel? In the first VM you manage a list of objects. In the second VM you manage exactly one certain object. And this you pass over via ARG (selectedItem from first UI).

link publish delete flag offensive edit

answered 2012-05-16 14:13:42 +0800

juergenmw gravatar image juergenmw
79 1

updated 2012-05-16 14:14:57 +0800

Hi Matze2

Thank you very much for your comment - I'll have a look at Ad1.

Regarding Ad2 - I think this came to my mind after going thru the given examples. They use just one ViewModel for list and detail view. The next logical step for me was to use this setup but using a new, dynamicaly created component (window) for the details instead of editing them inside the same view.

Everything else remains the same, so I thought there might be an easy way, Instead this little change (inline vs. window CRUD) changes a lot more in the background (window CRUD needs a new VM).


link publish delete flag offensive edit

answered 2012-06-08 00:50:44 +0800

Senthilchettyin gravatar image Senthilchettyin flag of India
2623 3 8

Hi juergenmw

It is very interesting, i also want to do the same way instead of showing the CRUD operation in the same window, i would like to do it Separate modal window for add/update.

I have started putting that example in step by step. You can see here

Did you completed in your exercise, if so can you please share the code, it would be great

Senthil M

link publish delete flag offensive edit
Your reply
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools




Asked: 2012-05-09 08:45:53 +0800

Seen: 837 times

Last updated: Jun 10 '12

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More