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

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.