Tuesday, 11 November 2014

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

image

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

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

image




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.

image 

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

image

1 comment:

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