ZK MVVM Simple List Box Example


ZK Version : ZK 7


Reference

Introduction of MVVM

List Box Template


Project Structure

image

Index.zul

<window title="Example for ZK MVVM List Box" width="500px"
apply="org.zkoss.bind.BindComposer"
viewModel="@id('vm') @init('zkexamples.mvvm.ListBox1')">
<label value="You are using: ${desktop.webApp.version}" />
<separator></separator>
<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)" />
</listhead>
<template name="model" var="p1">
<listitem>
<listcell label="@load(p1.firstName)" />
<listcell label="@load(p1.lastName)" />
<listcell label="@load(p1.email)" />
</listitem>
</template>
</listbox>
</window>


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", "JohnJames@yahoo.com"));
allPersons.add(new person("Taylor", "Harris", "Harris@yahoo.com"));
allPersons.add(new person("Allen", "Scott", "Scott@yahoo.com"));

}

// 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;
this.email = 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) {
this.email = email;
}

}
}




Output

image