ZK Dynamic Menu Part 6 Using ZK 7 Navigation Bar

In Part 5, we have seen how to create the dynamic menu Using Tab, Tool Bar and Group Box. In this post, we will see how to create Dynamic Menu using ZK 7 New component called Navigation Bar.

MenuItem.java

package ZKDynamicMenu;

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

public class MenuItem {
	private String name;
	private List<MenuItem> children;
	private int level;

	public MenuItem(String name, int level) {
		this.name = name;
		this.level = level;
		children = new ArrayList<MenuItem>();
	}

	public void addChild(MenuItem node) {
		children.add(node);
	}

	public void appendChild(MenuItem child) {
		if (children == null)
			children = new ArrayList<MenuItem>();
		children.add(child);
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public List<MenuItem> getChildren() {
		return children;
	}

	public void setChildren(List<MenuItem> children) {
		this.children = children;
	}

	public int getLevel() {
		return level;
	}

	public void setLevel(int level) {
		this.level = level;
	}

}

MenuItemData.java

package ZKDynamicMenu;

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

public class MenuItemData {

	private static List<MenuItem> menus = new ArrayList<MenuItem>();
	static {

		MenuItem m1 = new MenuItem("Administration", 1);
		MenuItem m1_lv1 = new MenuItem("Security", 2);
		MenuItem m1_Lv2 = new MenuItem("Accounts", 3);

		MenuItem m1_Lv3 = new MenuItem("User", 4);
		m1_Lv2.addChild(m1_Lv3);
		m1_Lv3 = new MenuItem("Role", 4);
		m1_Lv2.addChild(m1_Lv3);
		m1_Lv3 = new MenuItem("User Rights", 4);
		m1_Lv2.addChild(m1_Lv3);
		m1_Lv3 = new MenuItem("Role Rights", 4);
		m1_Lv2.addChild(m1_Lv3);
		m1_lv1.addChild(m1_Lv2);

		m1_Lv2 = new MenuItem("Regional", 3);
		m1_Lv3 = new MenuItem("Clock", 4);
		m1_Lv2.addChild(m1_Lv3);
		m1_Lv3 = new MenuItem("Language", 4);
		m1_Lv2.addChild(m1_Lv3);
		m1_Lv3 = new MenuItem("Keyboard", 4);
		m1_Lv2.addChild(m1_Lv3);
		m1_lv1.addChild(m1_Lv2);

		m1_Lv2 = new MenuItem("Devices", 3);
		m1_Lv3 = new MenuItem("Printer", 4);
		m1_Lv2.addChild(m1_Lv3);
		m1_Lv3 = new MenuItem("Projector", 4);
		m1_Lv2.addChild(m1_Lv3);
		m1_Lv3 = new MenuItem("Mouse", 4);
		m1_Lv2.addChild(m1_Lv3);
		m1_lv1.addChild(m1_Lv2);

		m1.addChild(m1_lv1);

		/***************************************************/
		m1_lv1 = new MenuItem("Network", 2);
		m1_Lv2 = new MenuItem("Wireless", 3);
		m1_Lv3 = new MenuItem("Connection 1", 4);
		m1_Lv2.addChild(m1_Lv3);
		m1_Lv3 = new MenuItem("Connection 2", 4);
		m1_Lv2.addChild(m1_Lv3);
		m1_lv1.addChild(m1_Lv2);

		m1_Lv2 = new MenuItem("Adapter", 3);
		m1_Lv3 = new MenuItem("Local Area Connection", 4);
		m1_Lv2.addChild(m1_Lv3);
		m1_Lv3 = new MenuItem("Virtual Box Network", 4);
		m1_Lv2.addChild(m1_Lv3);

		m1_lv1.addChild(m1_Lv2);

		m1.addChild(m1_lv1);

		/***************************************************/
		m1_lv1 = new MenuItem("My Computer", 2);
		m1_Lv2 = new MenuItem("Drives", 3);
		m1_Lv3 = new MenuItem("C Drive", 4);
		m1_Lv2.addChild(m1_Lv3);
		m1_Lv3 = new MenuItem("D Drive", 4);
		m1_Lv2.addChild(m1_Lv3);
		m1_Lv3 = new MenuItem("E Drive", 4);
		m1_Lv2.addChild(m1_Lv3);
		m1_lv1.addChild(m1_Lv2);

		m1_Lv2 = new MenuItem("Favorites", 3);
		m1_Lv3 = new MenuItem("Desktop", 4);
		m1_Lv2.addChild(m1_Lv3);
		m1_Lv3 = new MenuItem("Downloads", 4);
		m1_Lv2.addChild(m1_Lv3);
		m1_Lv3 = new MenuItem("Recent Places", 4);
		m1_Lv2.addChild(m1_Lv3);
		m1_Lv3 = new MenuItem("Google Drive", 4);
		m1_Lv2.addChild(m1_Lv3);
		m1_lv1.addChild(m1_Lv2);
		m1.addChild(m1_lv1);
		menus.add(m1);

		/************************************************************************/
		m1 = new MenuItem("ZK", 1);
		m1_lv1 = new MenuItem("Products", 2);
		m1_Lv2 = new MenuItem("ZK SpreadSheet", 3);

		m1_Lv3 = new MenuItem("3D Cell", 4);
		m1_Lv2.addChild(m1_Lv3);
		m1_Lv3 = new MenuItem("Freeze rows", 4);
		m1_Lv2.addChild(m1_Lv3);
		m1_Lv3 = new MenuItem("Ranged Cells", 4);
		m1_Lv2.addChild(m1_Lv3);
		m1_lv1.addChild(m1_Lv2);

		m1_Lv2 = new MenuItem("ZK Pivottable", 3);
		m1_Lv3 = new MenuItem("Drill Down", 4);
		m1_Lv2.addChild(m1_Lv3);
		m1_Lv3 = new MenuItem("Render", 4);
		m1_Lv2.addChild(m1_Lv3);
		m1_Lv3 = new MenuItem("Paging", 4);
		m1_Lv2.addChild(m1_Lv3);
		m1_lv1.addChild(m1_Lv2);

		m1_Lv2 = new MenuItem("ZK Calender", 3);
		m1_Lv3 = new MenuItem("Views", 4);
		m1_Lv2.addChild(m1_Lv3);
		m1_Lv3 = new MenuItem("Drag and Drop", 4);
		m1_Lv2.addChild(m1_Lv3);
		m1_Lv3 = new MenuItem("Time Zones", 4);
		m1_Lv2.addChild(m1_Lv3);
		m1_lv1.addChild(m1_Lv2);

		m1_Lv2 = new MenuItem("ZK Spring", 3);
		m1_Lv3 = new MenuItem("HTTP Request", 4);
		m1_Lv2.addChild(m1_Lv3);
		m1_Lv3 = new MenuItem("HTTP Basic", 4);
		m1_Lv2.addChild(m1_Lv3);
		m1_Lv3 = new MenuItem("MD4 Password", 4);
		m1_Lv2.addChild(m1_Lv3);
		m1_lv1.addChild(m1_Lv2);

		m1.addChild(m1_lv1);

		/***************************************************/
		m1_lv1 = new MenuItem("ZK Demo", 2);
		m1_Lv2 = new MenuItem("Grid", 3);
		m1_Lv3 = new MenuItem("Master Detail", 4);
		m1_Lv2.addChild(m1_Lv3);
		m1_Lv3 = new MenuItem("Data Binding", 4);
		m1_Lv2.addChild(m1_Lv3);
		m1_Lv3 = new MenuItem("Dynamic Data", 4);
		m1_Lv2.addChild(m1_Lv3);
		m1_Lv3 = new MenuItem("Data Filter", 4);
		m1_Lv2.addChild(m1_Lv3);
		m1_lv1.addChild(m1_Lv2);

		m1_Lv2 = new MenuItem("ListBox", 3);
		m1_Lv3 = new MenuItem("Dual ListBox", 4);
		m1_Lv2.addChild(m1_Lv3);
		m1_Lv3 = new MenuItem("Paging", 4);
		m1_Lv2.addChild(m1_Lv3);
		m1_Lv3 = new MenuItem("Auto Sort", 4);
		m1_Lv2.addChild(m1_Lv3);
		m1_Lv3 = new MenuItem("List Group", 4);
		m1_Lv2.addChild(m1_Lv3);

		m1_Lv2 = new MenuItem("Effects", 3);
		m1_Lv3 = new MenuItem("jQuery Effects", 4);
		m1_Lv2.addChild(m1_Lv3);
		m1_Lv3 = new MenuItem("Upload Effect", 4);
		m1_Lv2.addChild(m1_Lv3);
		m1_Lv3 = new MenuItem("Login Effect", 4);
		m1_Lv2.addChild(m1_Lv3);
		m1_Lv3 = new MenuItem("Display Action", 4);
		m1_Lv2.addChild(m1_Lv3);

		m1_Lv2 = new MenuItem("Layout", 3);
		m1_Lv3 = new MenuItem("Portal Layout", 4);
		m1_Lv2.addChild(m1_Lv3);
		m1_Lv3 = new MenuItem("Complex Border Layout", 4);
		m1_Lv2.addChild(m1_Lv3);
		m1_Lv3 = new MenuItem("Group Box", 4);
		m1_Lv2.addChild(m1_Lv3);
		m1_Lv3 = new MenuItem("Boxes", 4);
		m1_Lv2.addChild(m1_Lv3);

		m1_lv1.addChild(m1_Lv2);

		m1.addChild(m1_lv1);

		/***************************************************/
		m1_lv1 = new MenuItem("ZK Support", 2);
		m1_Lv2 = new MenuItem("Documentation", 3);
		m1_Lv3 = new MenuItem("Spread Sheet", 4);
		m1_Lv2.addChild(m1_Lv3);
		m1_Lv3 = new MenuItem("ZK Calender", 4);
		m1_Lv2.addChild(m1_Lv3);
		m1_Lv3 = new MenuItem("ZK Studio", 4);
		m1_Lv2.addChild(m1_Lv3);
		m1_lv1.addChild(m1_Lv2);

		m1_Lv2 = new MenuItem("Downloads", 3);
		m1_Lv3 = new MenuItem("ZK Spring", 4);
		m1_Lv2.addChild(m1_Lv3);
		m1_Lv3 = new MenuItem("ZK JSP", 4);
		m1_Lv2.addChild(m1_Lv3);
		m1_lv1.addChild(m1_Lv2);
		m1.addChild(m1_lv1);

		menus.add(m1);
		m1 = new MenuItem("Eclipse", 1);
		menus.add(m1);
		m1_lv1 = new MenuItem("File", 2);
		m1_Lv2 = new MenuItem("Project", 3);

		m1_Lv3 = new MenuItem("New Maven", 4);
		m1_Lv2.addChild(m1_Lv3);
		m1_Lv3 = new MenuItem("New JPA", 4);
		m1_Lv2.addChild(m1_Lv3);
		m1_Lv3 = new MenuItem("New JEE", 4);
		m1_Lv2.addChild(m1_Lv3);
		m1_lv1.addChild(m1_Lv2);
		m1.addChild(m1_lv1);
	}

	public static List<MenuItem> getAllMenus() {
		return new ArrayList<MenuItem>(menus);
	}

}

index.zul

<window title="Dynamic Menu Example !!" border="normal" height="98%"
	apply="org.zkoss.bind.BindComposer"
	viewModel="@id('vm') @init('ZKDynamicMenu.MainMenuVM')">
	<borderlayout>
	 
		<west size="20%" flex="true" maxsize="250" splittable="true"
			collapsible="true">
			<div>
				<navbar orient="vertical"
					children="@load(vm.menuItems)">
					<template name="children" var="item">
						<nav label="@load(item.name)"  
							iconSclass="z-icon-th-list">
							<navitem label="${each.name}"
								forEach="${item.children}" />
						</nav>
					</template>
				</navbar>
			</div>
		</west>
		<center border="none" flex="true">
			<div style="background:#E6D92C">
				<label value="" style="color:white;font-size:50px" />
			</div>
		</center>
	</borderlayout>
</window>

MainMenuVM

package ZKDynamicMenu;

import java.util.List;

import org.zkoss.bind.annotation.BindingParam;
import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.NotifyChange;

public class MainMenuVM {

	private List<MenuItem> menuItems;
	private MenuItem selectedMenuItem;

	public MenuItem getSelectedMenuItem() {
		return selectedMenuItem;
	}

	public void setSelectedMenuItem(MenuItem selectedMenuItem) {
		this.selectedMenuItem = selectedMenuItem;
	}

	public List<MenuItem> getMenuItems() {
		return menuItems;
	}

	public void setMenuItems(List<MenuItem> menuItems) {
		this.menuItems = menuItems;
	}

	public MainMenuVM() {
		menuItems = MenuItemData.getAllMenus();
		setSelectedMenuItem(menuItems.get(0).getChildren().get(0));
	}

	@Command
	@NotifyChange("selectedMenuItem")
	public void onMenuClick(@BindingParam("item") MenuItem item) {
		setSelectedMenuItem(item);
	}
}

Output

Please check ZK 7 Project Start-up Kit – Dynamic Menu

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.

ZK and Lookup(Selection) Components using MVVM

In this post, i will explain how to achieve the lookup methods using different components in ZK. So what is a lookup Method. ?

The LOOKUP method or function is used to search one column of data and find data in the corresponding row. For example, if you are searching a column of employee IDs the LOOKUP function can find, say, employee number 12345 in the ID column. Once it has found the ID 12345 it then can return data from that same row.

The above logic can be achieved using ZK Components as follows

1. Combo Box
2. Chosen Box
3. Customizable Combo Box
4. List Box


Let us start and see one by one examples:
All these examples are based in MVVM Pattern.

Before looking each example, follow and get trained on creating ZK Maven Project using the following link.
Create and Run Your First ZK 7 Application with Eclipse and Maven

All the examples will illustrate how to select the key data and retrieve the corresponding data on the same row. For example, Search and select by employee code and show the other information such as LastName, firstName, Gender, DOB, address, etc..

Here is the links which describes different methods.

1. ZK Selection or Lookup Using Combo Box.

MYSQL Query for Aging Report

Assume the following table scheme

Table Name : billing

billNo varchar(20);

insuranceCode varchar(20);

balanceAmount decimal(12,2);

billedDate date;

Here is the query for Aging Report

SELECT insuranceCode,
    SUM(IF(DATEDIFF(CURDATE(), billedDate ) BETWEEN 1 AND 30, balanceAmount, 0)) AS age130,
    SUM(IF(DATEDIFF(CURDATE(), billedDate ) BETWEEN 31 AND 60, balanceAmount, 0)) AS age3160,
    SUM(IF(DATEDIFF(CURDATE(), billedDate ) BETWEEN 61 AND 90, balanceAmount, 0)) AS age6190,
    SUM(IF(DATEDIFF(CURDATE(), billedDate ) > 90, balanceAmount, 0)) AS agegt90,
    SUM(balanceAmount) AS totalBalance
FROM billing  bill
WHERE
	bill.balanceAmount  > 0

GROUP BY insuranceCode  
ORDER BY totalBalance DESC