We will see how we can also show the images for the combo items bases on some conditions.
ZK Version 6
Project Name : ComboItemIcons
Project Structure:
Demo.zul
<?page title="new page title" contentType="text/html;charset=UTF-8"?>
<zk>
<window id="myWin" title="new page title" border="normal"
apply="org.zkoss.bind.BindComposer"
viewModel="@id('myvm') @init('mydomainUI.DemoVM')">
Users:
<combobox model="@load(myvm.allUsers)">
<template name="model" var="p1">
<comboitem label="@load(p1.userName)"
image="@load(p1.active eq 'Y' ? './img/active.png' : './img/inactive.png')"
value="@load(p1.userCode)" />
</template>
</combobox>
</window>
</zk>
users.java
package mydomain;
public class users {
private String userCode;
private String userName;
private String userPassword;
private String active;
private String firstName;
private String lastName;
private String homePhone;
private String mobilePhone;
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 getHomePhone() {
return homePhone;
}
public void setHomePhone(String homePhone) {
this.homePhone = homePhone;
}
public String getMobilePhone() {
return mobilePhone;
}
public void setMobilePhone(String mobilePhone) {
this.mobilePhone = mobilePhone;
}
public String getUserCode() {
return userCode;
}
public void setUserCode(String userCode) {
this.userCode = userCode;
}
public String getUserName() {
return userName;
}
public void setUserName(String userName) {
this.userName = userName;
}
public String getUserPassword() {
return userPassword;
}
public void setUserPassword(String userPassword) {
this.userPassword = userPassword;
}
public String getActive() {
return active;
}
public void setActive(String active) {
this.active = active;
}
}
usersDAO.java
package domainDAO;
import java.util.ArrayList;
import java.util.List;
import mydomain.users;
public class usersDAO {
public List<users> getUsers() {
List<users> allUsers = new ArrayList<users>();
users u1 = new users();
u1.setUserName("John");
u1.setUserCode("User101");
u1.setUserPassword("xxxxx");
u1.setFirstName("JohnFirstName");
u1.setLastName("JohnLastName");
u1.setHomePhone("1111111111");
u1.setMobilePhone("222222");
u1.setActive("Y");
allUsers.add(u1);
u1 = new users();
u1.setUserName("Robert");
u1.setUserCode("User102");
u1.setUserPassword("xxxxx");
u1.setActive("Y");
u1.setFirstName("RobertFirstName");
u1.setLastName("RobertLastName");
u1.setHomePhone("53534343");
u1.setMobilePhone("4534343");
allUsers.add(u1);
u1 = new users();
u1.setUserName("Sean");
u1.setUserCode("User105");
u1.setUserPassword("xxxxx");
u1.setFirstName("SeanFirstName");
u1.setLastName("SeanLastName");
u1.setHomePhone("1111111111");
u1.setMobilePhone("222222");
u1.setActive("Y");
allUsers.add(u1);
u1 = new users();
u1.setUserName("Marry");
u1.setUserCode("User112");
u1.setUserPassword("xxxxx");
u1.setActive("N");
u1.setFirstName("MarryFirstName");
u1.setLastName("MarryLastName");
u1.setHomePhone("53534343");
u1.setMobilePhone("4534343");
allUsers.add(u1);
return allUsers;
}
}
DemoVM.java
package mydomainUI;
import java.util.ArrayList;
import java.util.List;
import org.zkoss.bind.annotation.Init;
import domainDAO.usersDAO;
import mydomain.users;
public class DemoVM {
private List<users> allUsers = new ArrayList<users>();
public List<users> getAllUsers() {
return allUsers;
}
public void setAllUsers(List<users> allUsers) {
this.allUsers = allUsers;
}
@Init
public void initSetup() {
// Load the department first
allUsers = new usersDAO().getUsers();
}
}
Now you can run demo.zul. The output as follows
You can download source here
Many thanks Stephan who helped me to complete this task. Here is the forum thread
