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:

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