Friday, 10 January 2014

ZK MVVM Simple List Box Example

ZK Version : ZK 7


Introduction of MVVM

List Box Template

Project Structure



<window title="Example for ZK MVVM List Box" width="500px"
viewModel="@id('vm') @init('zkexamples.mvvm.ListBox1')">
<label value="You are using: ${desktop.webApp.version}" />
<listbox model="@load(vm.allPersons)">
<listhead sizable="true">
<listheader label="First Name" sortDirection="ascending"
sort="auto(firstName)" />
<listheader label="Last Name" sort="auto(lastName)" />
<listheader label="Email" sort="auto(email)" />
<template name="model" var="p1">
<listcell label="@load(p1.firstName)" />
<listcell label="@load(p1.lastName)" />
<listcell label="@load(" />

View Model

package zkexamples.mvvm;

import java.util.ArrayList;
import java.util.List;

public class ListBox1 {

private List<person> allPersons = new ArrayList<person>();

public List<person> getAllPersons() {
return allPersons;

public void setAllPersons(List<person> allPersons) {
this.allPersons = allPersons;

public ListBox1() {

allPersons.add(new person("John", "James", ""));
allPersons.add(new person("Taylor", "Harris", ""));
allPersons.add(new person("Allen", "Scott", ""));


// inner class
public class person {
private String firstName;
private String lastName;
private String email;

public person(String firstName, String lastName, String email) {
this.firstName = firstName;
this.lastName = lastName; = email;

public String getFirstName() {
return firstName;

public void setFirstName(String firstName) {
this.firstName = firstName;

public String getLastName() {
return lastName;

public void setLastName(String lastName) {
this.lastName = lastName;

public String getEmail() {
return email;

public void setEmail(String email) { = email;




No comments:

Post a Comment

Passing Parameter between two files using MVVM

This examples shows how to pass parameter between two zul screens. In this example, we are passing some parameters from the parent vm to...