Wednesday, 26 November 2014

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

image


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

5 comments:

  1. please how to resolve this error :"Component definition not found: navbar in [LanguageDefinition: xul/html]"

    ReplyDelete
    Replies
    1. you have created a simple zk project, it's why. try with maven project. by creating the project choose zk web app archetype, search for the dependencies if needed on the web and, put it in your pom.xml file. if you don't have the archetype i'm taliking about, search in google, getting started zk with maven. you will have to download and add zk maven archetype as it's explained in this blog http://books.zkoss.org/wiki/ZK_Installation_Guide/Quick_Start/Create_and_Run_Your_First_ZK_Application_with_Eclipse_and_Maven
      i hope that after doing it you will resolve that error...sorry for my bad english

      Delete
    2. This comment has been removed by the author.

      Delete
    3. This comment has been removed by the author.

      Delete
    4. if you are using ZK CE you are not able to use, Only ZK EE & ZK PE support NAVBAR component. money talks my friend

      Delete