Saturday, 20 September 2014

ZK List Box : How to show particular row in different color in MVVM

In this example, we will see how to change the color based on some conditions.

ZK Version : ZK 7.0.3
Project Name : zk7example5

Step 1:
Follow
this post, to create ZK 7 Maven Project.

Step 2:
Create the Person Bean in the ZKExample5 Package
package ZKExample5;

public class Person {
private String firstName;
private String lastName;
private String email;
private Integer active;

public Person(String firstName, String lastName, String email,Integer active) {
this.firstName = firstName;
this.lastName = lastName;
this.email = email;
this.active = active;
}

public Integer getActive() {
return active;
}

public void setActive(Integer active) {
this.active = active;
}

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;
}

}


Step 3:
Create the Person ZUL Under the webapp folder as

<window title="Example for ZK MVVM List Box" width="500px"
apply="org.zkoss.bind.BindComposer"
viewModel="@id('vm') @init('ZKExample5.ViewModel.PersonVM')">
<label value="You are using: ${desktop.webApp.version}" />
<separator></separator>
<listbox model="@load(vm.allPersons)" checkmark="true" mold="paging"
pageSize="10" multiple="true"
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>

</window>

 


Step 4:
Now let us create the View Model for the above zul file as follows


package ZKExample5.ViewModel;

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

import ZKExample5.Person;

public class PersonVM {
private List<Person> allPersons = new ArrayList<Person>();
private List<Person> selectedPersons;


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 PersonVM()
{
allPersons.add(new Person("John", "James", "JohnJames@yahoo.com",1));
allPersons.add(new Person("Taylor", "Harris", "Harris@yahoo.com",0));
allPersons.add(new Person("Allen", "Scott", "Scott@yahoo.com",1));
allPersons.add(new Person("Minna", "Kristeen", "Kristeen@yahoo.com",0));
allPersons.add(new Person("Abel", "Olive", "Olive@yahoo.com",1));
allPersons.add(new Person("Kiley", "Renea", "Renea@yahoo.com",0));
allPersons.add(new Person("Graciela", "Samira", "Samira@yahoo.com",0));
allPersons.add(new Person("Cammy", "Jenelle", "Jenelle@yahoo.com",1));
allPersons.add(new Person("Mattie", "Jerry", "Jerry@yahoo.com",1));
allPersons.add(new Person("Meaghan", "Ozell", "Ozell@yahoo.com",0));
}


}

Step 5:
Now let us create our css file. Create a folder called “css” in the webapp folder and create a css file namely style.css as shown
image


Here is the content of the CSS File



@CHARSET "ISO-8859-1";

.inactive .z-listcell-content {
color: #FF9900;
text-decoration: underline;
text-decoration: line-through;
}




Step 6:
Now refer the above css file in the person.zul and As you can see, we have a property called active which basically contains 1 or 0. Now we will show persons which is inactive (1) in different color. So change the zul file as follows
 


<window title="Example for ZK MVVM List Box" width="500px"
apply="org.zkoss.bind.BindComposer"
viewModel="@id('vm') @init('ZKExample5.ViewModel.PersonVM')">
<style src="/css/style.css" />
<label value="You are using: ${desktop.webApp.version}" />
<separator></separator>
<listbox model="@load(vm.allPersons)" checkmark="true" mold="paging"
pageSize="10" multiple="true"
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)" />
<listheader label="Active" sort="auto(active)" />
</listhead>
<template name="model" var="p1">
<listitem sclass="@load(p1.active eq 1 ?'inactive':'')">
<listcell label="@load(p1.firstName)" />
<listcell label="@load(p1.lastName)" />
<listcell label="@load(p1.email)" />
<listcell label="@load(p1.active)" />
</listitem>
</template>
</listbox>

</window>


Now you can run the person.zul . Here is the output.


image

2 comments: