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
You can see online Demo here
0 comments:
Post a Comment