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