ZK Dynamic Menu Part 1

In most of the application, Menu are build up from the database and maintain user level screen access to control access. Now let us see how we can create dynamic menu using different ZK Components. In this part, we will see how we can use ZK Menu component to build up.

Assume that, our application menu has the following structure(Just for an example)
1.Administration
    Secuirty
             Accounts
                      User
                      Role
                      User Rights
                      Role Rights
            Regional
                     Clock
                     Language
                     Keyboard
            Devices
                    Printer
                    Projector
                    Mouse
    Network
             Wireless
                  Connection 1
                  Connection 2
        Adapter
                 Local Area Connection
                 Virtual Box Network
        Internet Optons
               General
               Programs
               Content
               Privacy
    My Computer
        Drives
               C Drive
                D Drive
                E Drive
        Favorites
            Desktop
            Downloads
            Recent Places
            Google Drive
           
2. ZK
     Products
    ZK SpreadSheet
        3D Cell
        Freeze rows
        Ranged Cells
    ZK Pivottable
        Drill Down
        Render
        Paging
    ZK Calender
        Views
        Drag and Drop
        Time Zones
    ZK Spring
        HTTP Request
        HTTP Basic
        MD4 Password
        Web Flow
     ZK Demo
    Grid
        Master Detail
        Data Binding
        Dynamic Data
        Data Filter
    ListBox
        Dual ListBox
        Paging
        Auto Sort
        List Group
    Effects
        jQuery Effects
        Upload Effect
        Login Effect
        Display Action
    Layout
        Portal Layout
        Complex Border Layout
        Group Box
        Boxes
      ZK Support
    Documentation
        Spread Sheet
        ZK Studio
        ZK Calender
    Downloads
        ZK Spring
        ZK JSP
          
  3.Eclipse
    File
        Project
            New Maven
            New JPA
            New JEE
    Window
        Perspective
           
You can see, we have 4 Level Menu Structure

Let us start our coding part.

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



 


<?page title="" contentType="text/html;charset=UTF-8"?>
<zk>
	<window id="mainmenubar" apply="org.zkoss.bind.BindComposer"
		border="none"
		viewModel="@id('vm') @init('com.example.menu.MenuBarVM')">
		<menubar id="mbar" top="0px" left="0px" sclass="mymenubar"
			autodrop="true"
			children="@bind(vm.nodes) @template(empty each.children?'menuitem':'menu')">
			<template name="menu" var="menu">
				<menu label="@bind(menu.name)">
					<menupopup sclass="mymenupopup"
						children="@bind(menu.children) @template(empty each.children?'menuitem':'menu')" />
				</menu>
			</template>
			<template name="menuitem" var="item">
				<menuitem label="@bind(item.name)"
					onClick="@command('menuClicked',menuitem=item)" />
			</template>
		</menubar>
	</window>
</zk>



VM



 


package com.example.menu;

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

public class MenuBarVM {

	private List<MenuItem> nodes;

	public List<MenuItem> getNodes() {
		return nodes;
	}

	public void setNodes(List<MenuItem> nodes) {
		this.nodes = nodes;
	}

	public MenuBarVM() {
		nodes = new ArrayList<MenuItem>();
		nodes = MenuItemData.getAllMenus();
	}
}



      




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

Labels: