Saturday, 11 January 2014

ZK MVVM List box with check box – Simple Example


ZK Version : ZK 7


Reference

Introduction of MVVM

List Box Template
ZK List box Documentation


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.ListBox2')">
<label value="You are using: ${desktop.webApp.version}" />
<separator></separator>
<listbox model="@load(vm.allPersons)" checkmark="true"
multiple="true" selectedItem="@bind(vm.selectedPerson)"
selectedItems="@bind(vm.selectedPersons)">
<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>
<button label="Show Selected Items email id"
onClick="@command('onShowEmailID')">
</button>
</window>



Listbox2.java


package zkexamples.mvvm;

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

import org.zkoss.bind.annotation.Command;
import org.zkoss.zul.Messagebox;

public class ListBox2 {

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

public person getSelectedPerson() {
return selectedPerson;
}

public void setSelectedPerson(person selectedPerson) {
this.selectedPerson = selectedPerson;
}

public List<person> getSelectedPersons() {
return selectedPersons;
}

public void setSelectedPersons(List<person> selectedPersons) {
this.selectedPersons = selectedPersons;
}

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

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

public ListBox2() {

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"));

}

@Command
public void onShowEmailID()
{
String emailIDs="";

if (this.selectedPersons==null)
{
Messagebox.show(" No Items selected");
return;
}

if (this.selectedPersons.size()==0)
{
Messagebox.show(" No Items selected");
return;
}

for (Iterator<person> i = selectedPersons.iterator(); i
.hasNext();) {
person tmp = i.next();
emailIDs = emailIDs.concat(tmp.getEmail()).concat(";");
}

Messagebox.show("Selected Emails are " + emailIDs);
}

// 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

6 comments:

  1. I can't find selectedItems in listbox..

    ReplyDelete
  2. What a great Tutorial! For those who want to use multiple selection with ListModelList, you will need to enable multi-selection it using setMultiple(true) just after initialization to get thing work.

    ReplyDelete

  3. how to get a single selecteditem, even using checkmark ="true" in listbox

    ReplyDelete

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...