Integrating ZK/MVVM and Spring MVC

This blog demonstrates how to use the ZK framework as the view in a Spring MVC web application to leverage ZK’s rich UI and transparent Ajax capabilities. In particular, I will show how to pass data between the 2 frameworks.

Getting data from Spring MVC to ZK View (.zul)

Passing values from Spring MVC to ZK can be done in the same way as for JSP by adding attributes to the response model:

public String passToZK(Model model) {
model.addAttribute(“appname”, “zk”);
return “/demo/hellozk.zul”;

and use in the ZK view file hellozk.zul:

<label>Hello from ${appname}!</label>

Binding data in ZK View to Spring MVC

Getting data from ZK back to Spring MVC involves a bit more work. Suppose we have to implement a web form to get the first and last names of a customer. The Customer class is a normal POJO:

public class Customer {

private String firstname;
private String lastname;

// getters and setters here…


and the .zul file:

<zk xmlns:n=”native”>

<window apply=”org.zkoss.bind.BindComposer” viewModel=”@id(‘vm’) @init(‘myblog.viewmodel.CustomerViewModel’)”>
<n:form action=”save.action” method=”post”>
<div width=”700px” class=”form”>
<vlayout spacing=”7px”>
<hlayout spacing=”20px”>
<label class=”name” value=”Firstname :” />
<textbox id=”firstname” value=”@bind(vm.entity.firstname)” />
<textbox visible=”false” name=”firstname” value=”@bind(vm.entity.firstname)” />
<hlayout spacing=”20px”>
<label class=”name” value=”Lastname :” />
<textbox id=”name” value=”@bind(vm.entity.lastname)” />
<textbox visible=”false” name=”lastname” value=”@bind(vm.entity.lastname)” />
<hlayout spacing=”20px”>
<button label=”Save” onClick=”@command(‘submit’)” />


  1. Native form is used: “<n:form action=”save.action” method=”post”>
  2. The attributes firstname and lastname are bind to a ZK viewmodel (to be discussed later)
  3. In order to pass the form values (firstname and lastnames) back to Spring MVC when the form is submitted, the attributes are also bind to invisible textbox elements, e.g.:

<textbox visible=”false” name=”lastname” value=”@bind(vm.entity.lastname)” />

The zul form is bind to MVVM class myblog.viewmodel.CustomerViewModel

public class CustomerViewModel {

private Customer entity;
public void init(@ExecutionParam(“customer”) Customer             customer) {
this.entity = customer;

public void submit() {

// submit form

Note the annotation @ExecutionParam in the init method. This is required so to pass the model attribute in the Spring MVC controller to the form to populate any initial form values, for updating an existing customer. The submit command method is simple – it just calls the client method to submit the form to Spring MVC. For completeness, below is the controller’s submit method:

public String save(@ModelAttribute Customer customer, Model model) {
// implementation here

That’s it. It involves a bit of work to put the 2 frameworks together but may be useful if you have already had the web app implemented using Spring MVC and/or experienced in Spring MVC and just interested in using the rich UI and Ajax side of the ZK framework.

About Raymond Lee
Professional Java/EE Developer, software development technology enthusiast.

Comments are closed.