ZK Dynamic Menu Part 4

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


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_Lv1 = new MenuItem("ZK SpreadSheet",1);
		MenuItem m1_Lv2 = new MenuItem("3D Cell",2);
		m1_Lv1.addChild(m1_Lv2);
		m1_Lv2 = new MenuItem("Freeze rows",2);
		m1_Lv1.addChild(m1_Lv2);
		m1_Lv2 = new MenuItem("Ranged Cells",2);
		m1_Lv1.addChild(m1_Lv2);
		menus.add(m1_Lv1);

		m1_Lv1 = new MenuItem("ZK Pivottable",1);
		m1_Lv2 = new MenuItem("Drill Down",2);
		m1_Lv1.addChild(m1_Lv2);
		m1_Lv2 = new MenuItem("Render",2);
		m1_Lv1.addChild(m1_Lv2);
		m1_Lv2 = new MenuItem("Paging",2);
		m1_Lv1.addChild(m1_Lv2);
		menus.add(m1_Lv1);

		m1_Lv1 = new MenuItem("ZK Calender",1);
		m1_Lv2 = new MenuItem("Views",2);
		m1_Lv1.addChild(m1_Lv2);
		m1_Lv2 = new MenuItem("Drag and Drop",2);
		m1_Lv1.addChild(m1_Lv2);
		m1_Lv2 = new MenuItem("Time Zones",2);
		m1_Lv1.addChild(m1_Lv2);
		menus.add(m1_Lv1);

		m1_Lv1 = new MenuItem("ZK Spring",1);
		m1_Lv2 = new MenuItem("HTTP Request",2);
		m1_Lv1.addChild(m1_Lv2);
		m1_Lv2 = new MenuItem("HTTP Basic",2);
		m1_Lv1.addChild(m1_Lv2);
		m1_Lv2 = new MenuItem("MD4 Password",2);
		m1_Lv1.addChild(m1_Lv2);
		menus.add(m1_Lv1);
		
	}

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

}

index.zul

<div apply="org.zkoss.bind.BindComposer" width="600px"
	viewModel="@id('vm') @init('com.example.menu.TabBoxVM')">
	<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">
					<toolbarbutton label="${each.name}"
						forEach="${item.children}" />
				</tabpanel>
			</template>
		</tabpanels>
	</tabbox>

</div>

VM

package com.example.menu;

import java.util.List;

public class TabBoxVM {
	 
	private List<MenuItem> menuItems;

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

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

	public TabBoxVM() {
		menuItems = MenuItemData.getAllMenus();
		
	}
}

 

Output

You can see online Demo here