ZK Dynamic Menu Part 5

In Part 3, we have seen how to create left navigation menu using ZK Group Box and ZK Tool bar button dynamically and also in part 4, Using the same data set, We created two level menu in the top using Tab box and Tool bar as like this ZK Demo.

Now we will combine Part 3 and Part 4, i.e we will create 4 level menu, 1st level in Tabbox , 2nd Second Tab Panel Tool Bar Button, 3nd Level Left Group Box and 4th Level Tool Bar Button under each group Box.

MenuItem.java

package com.example.menu;

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 com.example.menu;

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('com.example.menu.MainMenuVM')">
	<borderlayout>
		<north id="north" border="0" height="9%" flex="true">
			<div id="Menu" sclass="Mainmenudiv">
				<tabbox>
					<tabs children="@load(vm.menuItems)">
						<template name="children" var="item">
							<tab label="@load(item.name)" />
						</template>
					</tabs>
					<tabpanels children="@load(vm.menuItems)">
						<template name="children" var="item">
							<tabpanel height="200px">
								<toolbar
									children="@load(item.children)">
									<template name="children"
										var="aa">
										<toolbarbutton
											onClick="@command('onMenuClick',item=aa)"
											label="@load(aa.name)" />
									</template>
								</toolbar>
							</tabpanel>
						</template>
					</tabpanels>
				</tabbox>
			</div>
		</north>
		<west size="20%" flex="true" maxsize="250" splittable="true"
			collapsible="true">
			<div  >
				<vlayout  children="@load(vm.selectedMenuItem.children)">
					<template name="children" var="item">
						<groupbox width="250px" mold="3d"
							sclass="leftnav">
							<caption label="@load(item.name)" />
							<vbox>
								<toolbarbutton label="${each.name}"
									forEach="${item.children}" />
							</vbox>
						</groupbox>
					</template>
				</vlayout>
			</div>
		</west>
		<center border="none" flex="true">
			<div style="background:#E6D92C">
				<label value="" style="color:white;font-size:50px" />
			</div>
		</center>
	</borderlayout>
</window>

MainMenuVM.java

package com.example.menu;

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