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