Welcome Back. When i started learning ZK, one of the challenge thing for me to dynamically generate the Menu from the Database using different components of ZK. We managed using via MVC and created all the stuff using pure java. But now thanks to MVVM and Children binding mechanism of ZK. Using that, with minimal lines of code, we can achieve the result.
This post will talk about creating Dynamic Menu using different ZK Components
Part 1: This article will explain how we can use ZK Menu Component to build N level of menu dynamically
Part 2: This article will explain how to create Tree type Menu dynamically.
Part 3: This article will explain how to create Left Navigation Menu Using group Box and Tool Bar Button
Part 4: This article will explain how to create top level navigation menu with two levels dynamically.
Part 5: This article will explain how to create 4 Level of Menu for an Web app application
You can see the online demo here and download the source code.
Monday, 16 September 2013
ZK Dynamic Menu
ZK Dynamic Menu Part 5
In Part 3, we have seen how to create left navigation menu using ZK Group Box and ZK Tool bar button dynamically and also in part 4, Using the same data set, We created two level menu in the top using Tab box and Tool bar as like this ZK Demo.
Now we will combine Part 3 and Part 4, i.e we will create 4 level menu, 1st level in Tabbox , 2nd Second Tab Panel Tool Bar Button, 3nd Level Left Group Box and 4th Level Tool Bar Button under each group Box.
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
<window title="Dynamic Menu Example !!" border="normal" height="98%"
apply="org.zkoss.bind.BindComposer"
viewModel="@id('vm') @init('com.example.menu.MainMenuVM')">
<borderlayout>
<north id="north" border="0" height="9%" flex="true">
<div id="Menu" sclass="Mainmenudiv">
<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">
<toolbar
children="@load(item.children)">
<template name="children"
var="aa">
<toolbarbutton
onClick="@command('onMenuClick',item=aa)"
label="@load(aa.name)" />
</template>
</toolbar>
</tabpanel>
</template>
</tabpanels>
</tabbox>
</div>
</north>
<west size="20%" flex="true" maxsize="250" splittable="true"
collapsible="true">
<div >
<vlayout children="@load(vm.selectedMenuItem.children)">
<template name="children" var="item">
<groupbox width="250px" mold="3d"
sclass="leftnav">
<caption label="@load(item.name)" />
<vbox>
<toolbarbutton label="${each.name}"
forEach="${item.children}" />
</vbox>
</groupbox>
</template>
</vlayout>
</div>
</west>
<center border="none" flex="true">
<div style="background:#E6D92C">
<label value="" style="color:white;font-size:50px" />
</div>
</center>
</borderlayout>
</window>
MainMenuVM.java
package com.example.menu;
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
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
Please check ZK 7 Project Start-up Kit – Dynamic Menu
Sunday, 15 September 2013
ZK Dynamic Menu Part 3
In Part 2, we have seen how to Fill tree component dynamically. In this post, how we can create left navigation menu using ZK Group Box and ZK Tool bar button dynamically.
MenuItem.java
MenuItemData.java
Output:
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
<zk>
<style>
.leftnav .z-groupbox-3d-hm { background-image: none;
background-color: #0A246A !important; }
.leftnav .z-groupbox-3d-header .z-caption { color: yellow;
font-weight: bold;; } .leftnav .z-groupbox-3d-cnt {
background-image: none; background-color: #EAECF0 !important; }
</style>
<window border="normal" title="Menu" width="200px"
apply="org.zkoss.bind.BindComposer"
viewModel="@id('vm') @init('com.example.menu.GroupBoxVM')">
<vlayout vflex="min" children="@load(vm.menuItems)">
<template name="children" var="item">
<groupbox width="250px" mold="3d" sclass="leftnav">
<caption label="@load(item.name)" />
<vbox>
<toolbarbutton label="${each.name}"
forEach="${item.children}" />
</vbox>
</groupbox>
</template>
</vlayout>
</window>
</zk>
GroupBoxVM
package com.example.menu;
import java.util.List;
public class GroupBoxVM {
private List<MenuItem> menuItems;
public List<MenuItem> getMenuItems() {
return menuItems;
}
public void setMenuItems(List<MenuItem> menuItems) {
this.menuItems = menuItems;
}
public GroupBoxVM() {
menuItems = MenuItemData.getAllMenus();
}
}
Output:
Please check ZK 7 Project Start-up Kit – Dynamic Menu
ZK Dynamic Menu Part 2
In the last article, we have seen how we can dynamically create Menu using Menu component. In this post, we will see how we can create Dynamic tree using the same class.
MenuItem.java
MyTreeModel.java
index.zul
Output:
Please check ZK 7 Project Start-up Kit – Dynamic Menu
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);
}
}
MyTreeModel.java
package com.example.menu;
import org.zkoss.zul.AbstractTreeModel;
import org.zkoss.zul.ext.Selectable;
public class MyTreeModel extends AbstractTreeModel<Object> implements Selectable<Object>{
private static final long serialVersionUID = 1L;
private MenuItem _root;
public MyTreeModel(Object root) {
// set the root
super(root);
_root = (MenuItem) root;
}
@Override
public boolean isLeaf(Object node) {
return ((MenuItem) node).getChildren().size() == 0; // at most 4 levels
}
@Override
public Object getChild(Object parent, int index) {
return ((MenuItem) parent).getChildren().get(index);
}
@Override
public int getChildCount(Object parent) {
return ((MenuItem) parent).getChildren().size();
}
public boolean isMutiple()
{
return true;
}
}
index.zul
<?page title="new page title" contentType="text/html;charset=UTF-8"?>
<zk>
<window id="mainmenubar" apply="org.zkoss.bind.BindComposer"
border="none" onCreate="@command('onFulfill')"
viewModel="@id('vm') @init('com.example.menu.TreeMenuVM')">
<tree model="@bind(vm.model)" id="mytree"
zclass="z-filetree" rows="22"
height="auto" >
<template name="model" var="node" status="s">
<treeitem open="true">
<treerow>
<treecell label="@bind(node.name)" />
</treerow>
</treeitem>
</template>
</tree>
</window>
</zk>
TreeMenuVM.java
package com.example.menu;
import java.util.Collection;
import java.util.Iterator;
import java.util.List;
import org.zkoss.bind.annotation.AfterCompose;
import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.ContextParam;
import org.zkoss.bind.annotation.ContextType;
import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.select.Selectors;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zul.Tree;
import org.zkoss.zul.TreeModel;
import org.zkoss.zul.Treeitem;
public class TreeMenuVM {
@Wire("#mytree")
private Tree mytree;
TreeModel _model;
private List<MenuItem> allMenus;
public TreeModel getModel() {
if (_model == null) {
MyTreeModel a = new MyTreeModel(getRoot());
a.setMultiple(true);
_model = a;
}
return _model;
}
@AfterCompose
public void initSetup(@ContextParam(ContextType.VIEW) Component view) {
Selectors.wireComponents(view, this, false);
mytree.setFocus(true);
}
public MenuItem getRoot() {
MenuItem superRoot = new MenuItem("Menu", 0);
MenuItem root = new MenuItem("Menu", 0);
allMenus = MenuItemData.getAllMenus();
MenuItem m1 = allMenus.get(0);
MenuItem m2 = allMenus.get(1);
MenuItem m3 = allMenus.get(2);
superRoot.addChild(root);
root.addChild(m1);
root.addChild(m2);
root.addChild(m3);
return superRoot;
}
@Command
public void onFulfill() {
doCollapseExpandAll(mytree, true);
}
public static void doCollapseExpandAll(Component component,
boolean aufklappen) {
if (component instanceof Treeitem) {
Treeitem treeitem = (Treeitem) component;
treeitem.setOpen(aufklappen);
}
Collection<?> com = component.getChildren();
if (com != null) {
for (Iterator<?> iterator = com.iterator(); iterator.hasNext();) {
doCollapseExpandAll((Component) iterator.next(), aufklappen);
}
}
}
}
Output:
Please check ZK 7 Project Start-up Kit – Dynamic Menu
Friday, 13 September 2013
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
Please check ZK 7 Project Start-up Kit – Dynamic Menu
Tuesday, 3 September 2013
Create a Report with ZK using iReport 5.1.0 and JasperReports
First let us setup the development environment. Download this document and follow the step by step instruction to install the necessary software’s.
Step 1:
Let us create new ZK Maven Project as shown in the following steps
In the Eclipse IDE, select File –> New-> Other->Maven Project
That’s all. Now you run and click on the ShowReport button to show the report as shown
Step 1:
Let us create new ZK Maven Project as shown in the following steps
In the Eclipse IDE, select File –> New-> Other->Maven Project
Click Next and Select zk-archetype-webapp 6.5.2 as shown below
Click Next and enter ireportExamples for Group ID, Artifact ID and package as shown. Select 6.5.2 version and click Finish
New Maven Project will be created with the following folder structure
Step 2:
Define a Person.java POJO class as defined below. This is the Java bean data source that is going to provide the data to the report.
package ireportExamples;
public class Person {
private String firstName;
private String lastName;
private Integer age;
public Person(String firstName, String lastName, Integer age) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
}
public String getFirstName() {
return firstName;
}
public void setFirstName(String firstName) {
this.firstName = firstName;
}
public String getLastName() {
return lastName;
}
public void setLastName(String lastName) {
this.lastName = lastName;
}
public Integer getAge() {
return age;
}
public void setAge(Integer age) {
this.age = age;
}
}
We need the .class for the above java file. Just compile and run the project by right click on the project name and Select Run as –> Run on Server
Step 3:
Next we will start with iReport. Goto http://sourceforge.net/projects/ireport/files/?source=navbar and download iReport 5.1.0 windows installer exe as shown
After download, install the ireport and Run. After the welcome screen, Select File –> New as shown
Select Blank A4 and Click on Open this Template
Enter the Report Name and Location as shown above.
Now Let us add Report Title.On the Palette window, look for Label Static Text and select that and drag to title band in the designer.
Now double click on the Static text and change the text as My First Report as shown
Now Let us change the font size. Click on Window -> Properties to change the font size as shown
Very Important Note, Select the myFirstReport in the left navigator and Right Click and Select Properties
Select Language option to “Java”
Add the column header for the report by dragging and dropping the "Static Text" for the column headers.
Next, we need to Tell iReport where to find the classes by defining the class path via Tools --> Option, and then select the "Classpath" tab.
Next let us define the Report query. Click Report query icon as shown
Goto JavaBean Datasource and type ireportExamples.Person in the class name and Click Read attributes button as shown
Select firstname, lastname and age as shown
Now Come to detail section and Drag a Text Field from the Palette
Right Click and Select Edit Expression
Remove the default expression and double click on firstname
Click Apply. Repeat the same steps for Lastname and age
Now save the report and Right click on myFirstReport on the Left navigation and select Complie report
And after successful compile, iReport will create jasper file in the path we specified earlier. The file name will be
Step 4:
Now let us come back to java application. First let us add the jasper report dependency in our POM File. Open the POM File and add the following
<dependency>
<groupId>net.sf.jasperreports</groupId>
<artifactId>jasperreports</artifactId>
<version>5.1.0</version>
</dependency>
Next create a folder called reports under webapp folder as shown
Copy the myfirstreport.jasper file in the above folder as shown
Modify the index.zul file as follows
<zk>
<window apply="org.zkoss.bind.BindComposer"
viewModel="@id('vm')@init('ireportExamples.MyViewModel')">
<button label="Show Report" onClick="@command('showReport')" />
</window>
</zk>
Modify the MyViewModel.java as follows
package ireportExamples;
import java.util.ArrayList;
import java.util.List;
import net.sf.jasperreports.engine.JREmptyDataSource;
import net.sf.jasperreports.engine.JRException;
import net.sf.jasperreports.engine.JasperFillManager;
import net.sf.jasperreports.engine.JasperPrint;
import net.sf.jasperreports.engine.data.JRBeanCollectionDataSource;
import net.sf.jasperreports.view.JasperViewer;
import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.Init;
import org.zkoss.zk.ui.Executions;
public class MyViewModel {
private List<Person> personDataSet = new ArrayList<Person>();
@Init
public void init() {
fillpersonData();
}
@Command
public void showReport() throws JRException {
String reportFile = Executions.getCurrent().getDesktop().getWebApp()
.getRealPath("/reports");
reportFile = reportFile + "/myfirstreport.jasper";
JasperPrint jasperPrint = JasperFillManager.fillReport(reportFile,
null, new JRBeanCollectionDataSource(personDataSet));
//view the report using JasperViewer
JasperViewer.viewReport(jasperPrint,false);
}
private void fillpersonData() {
personDataSet.add(new Person("John", "Smith", 25));
personDataSet.add(new Person("David", "Thomas", 15));
personDataSet.add(new Person("Ronald", "Jose", 45));
personDataSet.add(new Person("Larry", "Scott", 46));
personDataSet.add(new Person("Dennis", "Jerry", 45));
personDataSet.add(new Person("Peter", "Carl", 12));
personDataSet.add(new Person("Adam", "Jorge", 17));
personDataSet.add(new Person("Aaron", "Leon", 24));
personDataSet.add(new Person("Billy", "Mario", 49));
personDataSet.add(new Person("Todd", "Ray", 65));
personDataSet.add(new Person("Jimmy", "Norman", 54));
}
}
That’s all. Now you run and click on the ShowReport button to show the report as shown
Subscribe to:
Posts (Atom)