Combo Box– Show images for Items based on some condition

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