ZK and Lookup Components using MVVM–Part 1

In this example, we will see how we can retrieve the information using ZK Combo Box.

Step 1:
Create ZK 7 Maven project in the name of ZK7Lookup using the post Create and Run Your First ZK 7 Application with Eclipse and Maven.

After creating the Maven Project, the Structure should look like this



Step 2:
Next we will create Employee class to store the information about the Employee.

package ZK7Lookup;

import java.math.BigDecimal;

public class Employee {
	private String code;
	private String lastName;
	private String firstName;
	private String gender;
	private BigDecimal salary;
	public String getCode() {
		return code;
	}
	public void setCode(String code) {
		this.code = code;
	}
	public String getLastName() {
		return lastName;
	}
	public void setLastName(String lastName) {
		this.lastName = lastName;
	}
	public String getFirstName() {
		return firstName;
	}
	public void setFirstName(String firstName) {
		this.firstName = firstName;
	}
	public String getGender() {
		return gender;
	}
	public void setGender(String gender) {
		this.gender = gender;
	}
	public BigDecimal getSalary() {
		return salary;
	}
	public void setSalary(BigDecimal salary) {
		this.salary = salary;
	}
	
	
}

Step 3:
Next we will create data class to give some sample Employee values. In real world application, this will come from the database.
Class: EmployeeData.java

package ZK7Lookup;

import java.math.BigDecimal;
import java.util.ArrayList;
import java.util.List;

public class EmployeeData {

	private static List<Employee> Employees= new ArrayList<Employee>();
    static {
    	Employees.add(new Employee("EMP1001","GERALDO", "YANES", "Male",new BigDecimal((1000))));
    	Employees.add(new Employee("EMP1002","REYES", "BRIZUELA", "Male",new BigDecimal((2000))));
    	Employees.add(new Employee("EMP1003","CHARBEL", "MERCEDES", "Female",new BigDecimal((3000))));
    	Employees.add(new Employee("EMP1004","ESPINOSA", "MERCEDES", "Male",new BigDecimal((5000))));
    	Employees.add(new Employee("EMP1005","MEDINA", "MERCEDES", "Female",new BigDecimal((5000))));
    	Employees.add(new Employee("EMP1006","JONATHAN", "MERCEDES", "Male",new BigDecimal((7000))));
    	Employees.add(new Employee("EMP1007","MARICHAL", "WALSH", "Female",new BigDecimal((2000))));
    	Employees.add(new Employee("EMP1008","CORREA", "LUNA", "Male",new BigDecimal((5000))));
    	Employees.add(new Employee("EMP1009","JUNITAVE", "MCDERMOTT", "Male",new BigDecimal((2000))));
    	Employees.add(new Employee("EMP1010","JESSICA", "OWENS", "Female",new BigDecimal((12000))));
    	Employees.add(new Employee("EMP1011","GOVIN", "CODY", "Male",new BigDecimal((2020))));
    	Employees.add(new Employee("EMP1012","JOHN", "CALAMIA", "Female",new BigDecimal((8000))));
    	Employees.add(new Employee("EMP1013","BARBARA", "CAMPO", "Male",new BigDecimal((400))));
    	Employees.add(new Employee("EMP1014","JORGE", "DIAZ", "Female",new BigDecimal((12000))));
    	Employees.add(new Employee("EMP1015","RAYDA", "MARICHAL", "Male",new BigDecimal((3000))));
    	Employees.add(new Employee("EMP1016","ALAN", "MEEHAN", "Female",new BigDecimal((300))));
    	Employees.add(new Employee("EMP1017","BLACK", "KRESIEN", "Female",new BigDecimal((300))));
    	Employees.add(new Employee("EMP1018","MARGO", "KASPER", "Male",new BigDecimal((1200))));
    	Employees.add(new Employee("EMP1019","LEANDRO", "PERINI", "Female",new BigDecimal((1200))));
    	Employees.add(new Employee("EMP1020","ABELARDO", "YANES", "Male",new BigDecimal((1000))));
    	Employees.add(new Employee("EMP1021","CANDELARIA", "BRIZUELA", "Male",new BigDecimal((2000))));
    	Employees.add(new Employee("EMP1022","LEBOFSKY", "MERCEDES", "Female",new BigDecimal((3000))));
    	Employees.add(new Employee("EMP1023","RODITTI", "JENNIFER", "Male",new BigDecimal((5000))));
    	Employees.add(new Employee("EMP1024","FULSOM", "CHRIS", "Female",new BigDecimal((5000))));
    	Employees.add(new Employee("EMP1025","BARRERA", "MERCEDES", "Male",new BigDecimal((7000))));
    	Employees.add(new Employee("EMP1026","HAMMAN", "WALSH", "Female",new BigDecimal((2000))));
    	Employees.add(new Employee("EMP1027","BENNSON", "LUNA", "Male",new BigDecimal((5000))));
    	Employees.add(new Employee("EMP1028","MARTINEZ", "MCDERMOTT", "Male",new BigDecimal((2000))));
    	Employees.add(new Employee("EMP1029","JONES", "OWENS", "Female",new BigDecimal((12000))));
    	Employees.add(new Employee("EMP1030","FRIED", "NANCY", "Male",new BigDecimal((2020))));
    	Employees.add(new Employee("EMP1031","JOHN", "JUSTIN", "Female",new BigDecimal((8000))));
    	Employees.add(new Employee("EMP1032","MCCAHH", "WAYNE", "Male",new BigDecimal((400))));
    	Employees.add(new Employee("EMP1033","MOLINA", "SULMA", "Female",new BigDecimal((12000))));
    	Employees.add(new Employee("EMP1034","MATTHEWS", "FRANK", "Male",new BigDecimal((3000))));
    	Employees.add(new Employee("EMP1035","RIVERA", "MEEHAN", "Female",new BigDecimal((300))));
    	Employees.add(new Employee("EMP1036","DAVIK", "JOSEPH", "Female",new BigDecimal((300))));
    	Employees.add(new Employee("EMP1037","MILLER", "JESUSA", "Male",new BigDecimal((1200))));
    	Employees.add(new Employee("EMP1038","POWERS", "PERINI", "Female",new BigDecimal((1200))));
    	
    	
    	
    }
 
    public static List<Employee> getAllEmployee() {
        return new ArrayList<Employee>(Employees);
    }
}

Step 4:
Next we will create zul file combo box.zul.

 

<zk>
	<window title="ZK Look up " border="normal"
		apply="org.zkoss.bind.BindComposer"
		viewModel="@id('vm') @init('ZK7Lookup.ComboBoxVM')">
		<separator></separator>
		<label value="Select Employee"   />
		<separator></separator>
		<combobox model="@load(vm.employeeList)"
			selectedItem="@bind(vm.selectedEmployee)">
			<template name="model" var="p">
				<comboitem value="@bind(p.code)"
					label="@load(p.lastName)" />
			</template>
		</combobox>
		<separator></separator>
		<label value="Last Name"   />
		<separator></separator>
		<textbox value="@bind(vm.selectedEmployee.lastName)"></textbox>
		<separator></separator>
		<label value="First Name"   />
		<separator></separator>
		<textbox value="@bind(vm.selectedEmployee.firstName)"></textbox>
		<separator></separator>
		<label value="Gender"   />
		<separator></separator>
		<textbox value="@bind(vm.selectedEmployee.gender)"></textbox>
		<separator></separator>
		<label value="Salary"   />
		<separator></separator>
		<textbox value="@bind(vm.selectedEmployee.salary)"></textbox>
		<separator></separator>
		<separator></separator>
		<separator></separator>

	</window>
</zk>

Step 5:
Next we will create the view Model to support the ZUL File
Class : ComboBoxVM.java

package ZK7Lookup;

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

import org.zkoss.bind.annotation.AfterCompose;
import org.zkoss.bind.annotation.ContextParam;
import org.zkoss.bind.annotation.ContextType;
import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.select.Selectors;

public class ComboBoxVM {

	private List<Employee> employeeList = new ArrayList<Employee>();
	private Employee selectedEmployee;
	
	public Employee getSelectedEmployee() {
		return selectedEmployee;
	}

	public void setSelectedEmployee(Employee selectedEmployee) {
		this.selectedEmployee = selectedEmployee;
	}

	public List<Employee> getEmployeeList() {
		return employeeList;
	}

	public void setEmployeeList(List<Employee> employeeList) {
		this.employeeList = employeeList;
	}

	@AfterCompose
	public void initSetup(@ContextParam(ContextType.VIEW) Component view) {
		Selectors.wireComponents(view, this, false);
		this.employeeList = EmployeeData.getAllEmployee();
	}

}

Now you can run the zul file and you can check the output.