ZK 7 Project Start-up Kit – Dynamic Menu

Well, You have learned the basics of ZK Framework and now you are ready to go to develop a Complete commercial Application or Sample Application. But how to start ? You might be end with lot of questions such as “Is there any template available ?”, “any support available for the project template”?, etc.

Here it is. I have developed a small Project start up kit with the following features

1. Menus are Dynamic for N Level support. What does it mean ? Well, in the modern Web application, you might want to visible/invisible Menu by each users type (aka Dynamic Menu). This template has that option . All the Menu caption and levels are Stored in MySQL Database and after login , it will retrieve the menus assigned only for the user.

2. Apart from Menu, You might be interested in giving permission to add/delete/edit for CRUD Based screens. Using this template, you can also control by each user.

3. For all the CRUD Based screens, Export to Excel option template is provided.

4. Sample CRUD Screen are Provided to ready to start.

5. Integrated with Spring Security

6. Integrated with Spring Hibernate Security.

7. Base DAO and DAO implementation classes are provided.

8. Utilising ZK's MVVM databinding.

Version 2 also available. For more details, please check here

Apart from the above, the Most important option is “ Support!!!!!!!”. Users who buying this kit, unlimited support will be provided to help them to understand the structure. If you are interested in buying this start up kit, please email to me at vbsenthilinnet@gmail.com

Project Screenshots

Login Screen



Landing Page with Dynamic Menus

Assigning Role Based Rights including CRUD Options



User Creation

Global Error Handler Includes MySQL Errors




Project Structure



Sample Code

<zk>
	<window id="userslist" border="none"
		apply="org.zkoss.bind.BindComposer"
		viewModel="@id('vm') @init('com.product.webapp.admin.UsersListVM')">
		<separator />
		<div width="96%">
			<span width="100%">
				<div sclass="screenheader">
					<separator />
					<label id="lcaption" sclass="screenheaderlabel"
						value="Users List" />
				</div>
			</span>
			<div id="buttonsDiv" sclass="screenheaderbuts">
				<button label="Add New"
					visible="@load(vm.menu.canAdd eq 1)"
					onClick="@command('onAddNew')">
				</button>
			</div>
			<div sclass="clearboth"></div>
			<div sclass="sectionSeperator"></div>
		</div>
		<separator />
		<separator />
		<div width="96%" sclass="sectionpadding">
			<label value="User Name" />
			<space />
			<textbox id="name" cols="30"
				value="@bind(vm.dataFilter.name)" onChange="@command('doFilter')"
				instant="true" maxlength="30" />
			<space spacing="20px" />
			<checkbox id="activechk" label="Show only active"
				value="@bind(vm.dataFilter.showOnlyActive)"
				checked="@bind(vm.dataFilter.showOnlyActive)"
				onCheck="@command('doFilter')" />
			<space spacing="20px" />
			<image sclass="fImageExcel"
				onClick="@command('onExcelExport')" />
			<div sclass="floatright">
				<paging id="pagenavi" pageSize="@load(vm.pageSize)"
					sclass="floatright" pageIncrement="1" detailed="true">
				</paging>
			</div>
			<div sclass="clearboth"></div>
		</div>
		<separator />
		<panel width="95%" sclass="sectionpadding">
			<panelchildren>
				<listbox id="" mold="paging" paginal="${pagenavi}"
					sclass="mylist" selectedItem="@bind(vm.selectedItem)"
					model="@load(vm.dataSet)">
					<listhead sizable="true">
						<listheader label="User Name"
							sortDirection="ascending" sort="auto(userName)" />
						<listheader label="First Name"
							sort="auto(firstName)" />
						<listheader label="Last Name"
							sort="auto(lastName)" />
						<listheader label="Role"
							sort="auto(p1.userRole.roleName)" />
						<listheader label="Action" />
					</listhead>
					<template name="model" var="p1">
						<listitem
							sclass="@load(p1.active eq 0 ?'inactiveRecord':'')">
							<listcell label="@load(p1.userName)"
								onClick="@command('onlinkOpen',record=p1)"
								sclass="highlightcell" />
							<listcell label="@load(p1.firstName)" />
							<listcell label="@load(p1.lastName)" />
							<listcell
								label="@load(p1.userRole.roleName)" />
							<listcell>
								<hbox spacing="20px">
									<image sclass="fimageActive"
										onClick="@command('onDeactivate')"
										visible="@load( (vm.menu.canDelete eq 1) and  (p1.active ==1) and (p1.system == 0 ))" />
									<image sclass="fimageInactive"
										onClick="@command('onActivate')"
										visible="@load((vm.menu.canDelete eq 1) and  (p1.active !=1) and (p1.system == 0 ))" />
									<image sclass="fimageDelete"
										visible="@load( (vm.menu.canDelete eq 1) and  (p1.system eq 0))"
										onClick="@command('onDelete')" />
									<image sclass="fimageedit"
										visible="@load( (vm.menu.canEdit eq 1 ) and p1.system eq 0)"
										onClick="@command('onEdit')" />
								</hbox>
							</listcell>
						</listitem>
					</template>
				</listbox>
			</panelchildren>
		</panel>
	</window>
</zk>

Export to Excel

Menus are Dynamically Loaded from the MYSQL Table

To buy this start-up kit, please email me at vbsenthilinnet@gmail.com

Video Demo

ZK with External style sheet

If you are new ZK, please follow this post to setup development Environment.

Here is the Example how you can use External style sheet in ZK

ZK Version : 7.0.2

zul file

<zk>
	<window id="roleCRUD" title=" " width="460px" height="290px"
		border="normal" minimizable="false" sclass="mymodal" mode="modal"
		maximizable="false" closable="true">
		<style src="/css/mystyle.css" />
		<separator />
		<div width="96%">
			<span width="100%">
				<div sclass="screenheader">
					<label id="lcaption" sclass="screenheaderlabel"
						value="Role Information" />
				</div>
			</span>
			<div id="buttonsDiv" sclass="screenheaderbuts">
				<button label="Save"></button>
				<button label="Cancel"></button>
			</div>
			<div sclass="clearboth"></div>
			<separator />
			<div sclass="sectionSeperator2"></div>
		</div>
		<separator />
		<panel width="95%"  >
			<panelchildren>
				<grid sclass="vgrid">
					<columns>
						<column hflex="1" ></column>
					</columns>
					<rows>
						<row>
							<vlayout>
								<hlayout>
									<label value="Role Name" />
									<label value="*" />
								</hlayout>
								<textbox hflex="1" />
							</vlayout>
						</row>
						<row>
							<vlayout>
								<hlayout>
									<label value="Role Description" />
								</hlayout>
								<textbox hflex="1" />
							</vlayout>
						</row>
					</rows>
				</grid>
			</panelchildren>
		</panel>
		<separator />
		<separator />
	</window>
</zk>

Style CSS

@CHARSET "ISO-8859-1";

/* ----------------------------------------------------------------------------------------------- */
/* FONT Settings																			   */
/* ----------------------------------------------------------------------------------------------- */
.z-label,.z-radio-content,.z-checkbox-content,.z-loading {
	font-family: Verdana;
}

.z-toolbarbutton-content {
	font-family: Verdana;
	font-size: 12px;
}

.z-textbox,.z-decimalbox,.z-intbox,.z-longbox,.z-doublebox {
	-moz-border-radius: 6px;
	border-radius: 6px;
	font-family: verdana;
	border: 1px solid #909090;
}

.z-combobox-input,.z-bandbox-input,.z-datebox-input,.z-timebox-input,.z-spinner-input,.z-doublespinner-input
	{
	font-family: verdana;
	border: 1px solid #909090;
}

.z-textbox[readonly],.z-decimalbox[readonly],.z-intbox[readonly],.z-longbox[readonly],.z-doublebox[readonly]
	{
	-moz-border-radius: 6px;
	border-radius: 6px;
	font-family: verdana;
	border: 1px solid #909090;
	background-color: #EFEFEF;
}

.z-combobox-input[readonly],.z-bandbox-input[readonly],.z-datebox-input[readonly],.z-timebox-input[readonly],.z-spinner-input[readonly],.z-doublespinner-input[readonly],.z-combobox-button,.z-bandbox-button,.z-datebox-button,.z-timebox-button,.z-spinner-button,.z-doublespinner-button
	{
	border-color: #909090;
}

.z-listheader-content,.z-listcell-content,.z-listgroup-content,.z-listgroupfoot-content,.z-listfooter-content
	{
	font-family: Verdana;
}

.grpboxSectionBar.z-groupbox-3d>.z-groupbox-header {
	font-family: Verdana;
}

.grpboxradio .z-groupbox-content {
	padding: 1px;
}

.z-window-header,.z-combobox-input,.z-bandbox-input,.z-datebox-input,.z-timebox-input,.z-spinner-input,.z-doublespinner-input
	{
	font-family: Verdana;
}

.z-messagebox .z-label,.z-panel-header {
	font-family: Verdana;
	font-size: 14px;
}

.z-listitem-checkbox {
	margin-right: 5px;
}

/* ----------------------------------------------------------------------------------------------- */
/* 	Start: Grid			  		   													   	   	   */
/* ----------------------------------------------------------------------------------------------- */
.vgrid.z-grid {
	border: none;
	overflow: hidden;
	zoom: 1;
	background: transparent;
	border-top: none;
	border-left: none;
	border-right: none;
	border-bottom: none;
}

.vgrid.z-row:hover>.z-row-inner,.vgrid.z-row:hover>.z-cell {
	background: none;
}

.vgrid.z-grid-odd>.z-row-inner,.z-grid-odd>.z-cell {
	background: none;
}

/* ----------------------------------------------------------------------------------------------- */
/* Panel																				           */
/* ----------------------------------------------------------------------------------------------- */
.z-panel-header,.z-panel-head {
	background-image: none;
	background: transparent repeat-x 0 0;
	background: #006466; /* Old browsers */
	background-image: -ms-linear-gradient(top, #006466 0%, #006466 100%);
	/* IE10+ */
	background-image: -moz-linear-gradient(top, #006466 0%, #006466 100%);
	/* Firefox 3.6+ */
	background-image: -o-linear-gradient(top, #006466 0%, #006466 100%);
	/* Opera 11.10+ */
	background-image: -webkit-gradient(linear, top, bottom, color-stop(0%, #006466),
		color-stop(100%,, #006466)); /* Chrome,Safari4+ */
	background-image: -webkit-linear-gradient(top, #006466 0%, #006466 100%);
	/* Chrome10+,Safari5.1+ */
	background-image: linear-gradient(to bottom, #006466 0%, #006466 100%);
	/* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( 
		                     startColorstr='#006466', endColorstr='#006466',
		GradientType=0); /* IE6-9 */
}

/* ----------------------------------------------------------------------------------------------------------------------- */
/* Menu
/* ----------------------------------------------------------------------------------------------------------------------- */
.z-menu-content:hover,.z-menuitem-content:hover {
	background: #006466;
}

.z-menupopup:hover {
	background: #006466;
}

.z-menubar ul {
	background: none repeat scroll 0 0 #006466;
}

.z-menu-content,.z-menuitem-content {
	color: #FFFFFF;
}

.z-menupopup {
	background: none repeat scroll 0 0 #006466;
}

/* ----------------------------------------------------------------------------------------------------------------------- */
/* Border Layout CSS Customization */
/* ----------------------------------------------------------------------------------------------------------------------- */
.myborlay .z-west-collapsed {
	background: none repeat scroll 0 0 #DBE6E0;
}

.myborlay .z-south-collapsed {
	background: none repeat scroll 0 0 #DBE6E0;
}

.z-west-header,.z-center-header,.z-east-header,.z-north-header,.z-south-header
	{
	background: none;
	background-color: #CB411A;
}

.mycenter.z-center {
	border: 2px solid #006466;
}

.mywest.z-west {
	border: 2px solid #006466;
}

/* ----------------------------------------------------------------------------------------------- */
/* 	Start: Window			  		   													   	   	   */
/* ----------------------------------------------------------------------------------------------- */
.mymodal.z-window-modal,.z-messagebox-window,.myembedded.z-window-embedded
	{
	background-image: none;
	background: transparent repeat-x 0 0;
	background: #006466; /* Old browsers */
	background-image: -ms-linear-gradient(top, #006466 0%, #006466 100%);
	/* IE10+ */
	background-image: -moz-linear-gradient(top, #006466 0%, #006466 100%);
	/* Firefox 3.6+ */
	background-image: -o-linear-gradient(top, #006466 0%, #006466 100%);
	/* Opera 11.10+ */
	background-image: -webkit-gradient(linear, top, bottom, color-stop(0%, #006466),
		color-stop(100%,, #006466)); /* Chrome,Safari4+ */
	background-image: -webkit-linear-gradient(top, #006466 0%, #006466 100%);
	/* Chrome10+,Safari5.1+ */
	background-image: linear-gradient(to bottom, #006466 0%, #006466 100%);
	/* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( 
		                     startColorstr='#006466', endColorstr='#006466',
		GradientType=0); /* IE6-9 */
} /* IE6-9 */

/* ----------------------------------------------------------------------------------------------- */
/* 	Group Box																				   */
/* ----------------------------------------------------------------------------------------------- */
.grpboxSectionBar.z-groupbox-3d>.z-groupbox-header {
	background-image: none;
	background: transparent repeat-x 0 0;
	background: #006466; /* Old browsers */
	background-image: -ms-linear-gradient(top, #00A9A7 0%, #006466 100%);
	/* IE10+ */
	background-image: -moz-linear-gradient(top, #00A9A7 0%, #006466 100%);
	/* Firefox 3.6+ */
	background-image: -o-linear-gradient(top, #00A9A7 0%, #006466 100%);
	/* Opera 11.10+ */
	background-image: -webkit-gradient(linear, top, bottom, color-stop(0%, #00A9A7),
		color-stop(100%,, #006466)); /* Chrome,Safari4+ */
	background-image: -webkit-linear-gradient(top, #00A9A7 0%, #006466 100%);
	/* Chrome10+,Safari5.1+ */
	background-image: linear-gradient(to bottom, #00A9A7 0%, #006466 100%);
	/* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient(
		                     startColorstr='#00A9A7', endColorstr='#006466',
		GradientType=0); /* IE6-9 */
}

.myjack .z-column-content {
	color: white;
	background: #006466; /* Old browsers */
	background-image: -ms-linear-gradient(top, #00A9A7 0%, #006466 100%);
	/* IE10+ */
	background-image: -moz-linear-gradient(top, #00A9A7 0%, #006466 100%);
	/* Firefox 3.6+ */
	background-image: -o-linear-gradient(top, #00A9A7 0%, #006466 100%);
	/* Opera 11.10+ */
	background-image: -webkit-gradient(linear, top, bottom, color-stop(0%, #00A9A7),
		color-stop(100%,, #006466)); /* Chrome,Safari4+ */
	background-image: -webkit-linear-gradient(top, #00A9A7 0%, #006466 100%);
	/* Chrome10+,Safari5.1+ */
	background-image: linear-gradient(to bottom, #00A9A7 0%, #006466 100%);
	/* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient(
		                     startColorstr='#00A9A7', endColorstr='#006466',
		GradientType=0); /* IE6-9 */
}

/* ----------------------------------------------------------------------------------------------------------------------- */
/* Listbox CSS Customization
/* ----------------------------------------------------------------------------------------------------------------------- */
.z-listheader-content {
	background: #006466; /* Old browsers */
	background-image: -ms-linear-gradient(top, #00A9A7 0%, #006466 100%);
	/* IE10+ */
	background-image: -moz-linear-gradient(top, #00A9A7 0%, #006466 100%);
	/* Firefox 3.6+ */
	background-image: -o-linear-gradient(top, #00A9A7 0%, #006466 100%);
	/* Opera 11.10+ */
	background-image: -webkit-gradient(linear, top, bottom, color-stop(0%, #00A9A7),
		color-stop(100%,, #006466)); /* Chrome,Safari4+ */
	background-image: -webkit-linear-gradient(top, #00A9A7 0%, #006466 100%);
	/* Chrome10+,Safari5.1+ */
	background-image: linear-gradient(to bottom, #00A9A7 0%, #006466 100%);
	/* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient(
		                     startColorstr='#00A9A7', endColorstr='#006466',
		GradientType=0); /* IE6-9 */
}

/* ----------------------------------------------------------------------------------------------- */
/*  Button			  		   													   	   			   */
/* ----------------------------------------------------------------------------------------------- */
.z-button,.z-button:active,.z-button:focus {
	-moz-box-shadow: 0px 10px 14px -7px #cf866c;
	-webkit-box-shadow: 0px 10px 14px -7px #cf866c;
	box-shadow: 0px 10px 14px -7px #cf866c;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #d0451b
		), color-stop(1, #bc3315));
	background: -moz-linear-gradient(top, #d0451b 5%, #bc3315 100%);
	background: -webkit-linear-gradient(top, #d0451b 5%, #bc3315 100%);
	background: -o-linear-gradient(top, #d0451b 5%, #bc3315 100%);
	background: -ms-linear-gradient(top, #d0451b 5%, #bc3315 100%);
	background: linear-gradient(to bottom, #d0451b 5%, #bc3315 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d0451b',
		endColorstr='#bc3315', GradientType=0);
	background-color: #d0451b;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	border-radius: 7px;
	display: inline-block;
	cursor: pointer;
	color: #ffffff;
	font-size: 12px;
	font-weight: bold;
	padding: 6px 5px;
	text-decoration: none;
	text-shadow: 0px 1px 0px #3d768a;
	border: medium none;
}

.z-button:hover {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #bc3315
		), color-stop(1, #d0451b));
	background: -moz-linear-gradient(top, #bc3315 5%, #d0451b 100%);
	background: -webkit-linear-gradient(top, #bc3315 5%, #d0451b 100%);
	background: -o-linear-gradient(top, #bc3315 5%, #d0451b 100%);
	background: -ms-linear-gradient(top, #bc3315 5%, #d0451b 100%);
	background: linear-gradient(to bottom, #bc3315 5%, #d0451b 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bc3315',
		endColorstr='#d0451b', GradientType=0);
	background-color: #bc3315;
}

/* ----------------------------------------------------------------------------------------------- */
/* 	Miscellaneous																				   */
/* ----------------------------------------------------------------------------------------------- */
.clearboth {
	clear: both;
}

.highlightcellText {
	color: blue;
	cursor: pointer;
	text-decoration: underline;
}

.highlightText.z-textbox-readonly {
	color: blue;
	text-decoration: underline;
	cursor: pointer;
}

.neg.z-decimalbox[readonly] {
	background: #FF0000;
	color: #FFFFFF;
	cursor: default;
}

.pos {
	background: none repeat scroll 0 0 #FFFFE0;
	color: #2A002A;
	cursor: default;
}

.sectionpadding {
	padding-left: 20px;
}

.sectionpadding10 {
	padding-left: 10px;
}

.screenheader {
	float: left;
	padding-left: 20px;
}

.screenheaderlabel {
	font-size: 14px;
	font-weight: bolder;
	color: #0C6BA8;
}

.screenheaderlabel .z-radio-content {
	font-family: Verdana;
	font-size: 15px;
	font-weight: normal;
	color: #0C6BA8;
}

.screentitle {
	font-size: 14px;
	font-weight: bolder;
	color: #0C6BA8;
}

.screensubheaderlabel {
	font-size: 12px;
	font-weight: bolder;
	color: #0C6BA8;
	padding-left: 20px;
}

.screenheaderbuts {
	float: right;
	margin-top: 6px;
}

.sectionSeperator {
	margin-bottom: 18px;
	padding-bottom: 0.25em;
	margin-left: 20px;
	border-bottom: 4px solid;
}

.sectionSeperator2 {
	margin-bottom: 18px;
	padding-bottom: 0.25em;
	border-bottom: 2px solid;
}

.screenheader2 {
	float: left;
}

Output

ZK 7 Simple Form Design(s) Part 1

ZK Version : 7.0.3
You can download the zul File here.

---

ZK Version : 7.0.3
You can download the zul File here.

---

ZK Version : 7.0.3
You can download the zul File here.

---

The following example uses inline style CSS attribute for each zul Components

 
ZK Version : 7.0.3
You can download the zul File here.

---

The following example uses Internal style sheet CSS for each zul components.

Please learn about sclass in ZK in this article

ZK Version : 7.0.3
You can download the zul File here.

---

ZK Version : 7.0.3
You can download the zul File here.

How to create ZK Maven Project–Create “Hello World” Application in ZK

        

In Eclipse, Select File -> New -> Other -> Maven Project

Leave everything as default and click next as shown here.

From the Select an Archetype screen, select ZK Maven Archetype from the catalog dropdown list.

And Select zk-archetype-webapp from the list. (At the time of writing this is at version 7.0.3.1).

Next, fill in details for group id, artifact id, version number and package name.

Click Finish and the Eclipse status bar should say ' Creating zk-archetype-webapp ' and ' Updating Maven Dependencies '. If this is the user's first time dealing with ZK libraries, Maven will download the necessary dependencies to compile and run this example, and would be stored in .m2/repository in the user's home directory.

Now goto Windows -> Show View and Select Navigator. You can see the folder structure of our HelloZK Project as follows

Follow the steps to run the application
1. Select the "HelloZK" project in the Navigator
2. Right Click and Select "Run as " and Select the first option "Run On Server"



Click Finish button
The output of the HelloZK Application will be shown in the internal Browser of the Eclipse as shown here

        

How to create ZK Maven Project–Setup Eclipse Kepler IDE

        

IDE For java development

In the c drive , create a folder called Eclipse

Extract the “eclipse-jee-kepler-SR2-win32” into the folder Eclipse. The folder should look as follows.

Go to the Folder c:\Eclipse and double click “Eclipse.exe”

Click ok

Close the welcome window

Configure Tomcat server in Eclipse
In the Eclipse server Window, Click New Server Wizard as shown.

Select Tomcat 7 Server as shown and click next

Select Tomcat 7 Installation director and JRE as shown and click Finish

Add ZK Maven Archetype

Go to Window -> Preference -> Maven -> Archetypes and Click Add Remote catalog as shown here

In the catalog file enter http://mavensync.zkoss.org/maven2/ and description enter as “ZK Maven Archetype” and click verify

After successful verify, it will show “Found xx archetype(s) as shown here

Click ok button to close the window and for the Click ok button for Preferences window also.

Now we are ready and we will create ZK Application.

        

How to create ZK Maven Project - Setup Maven 3, Tomcat 7 and Environment variables

        

Maven Folder
In the c drive , create a folder called Maven

Extract the “apache-maven-3.2.5-bin” into the folder Maven. The folder should look as follows.

Tomcat 7 Folder

In the c drive , create a folder called Tomcat7

Extract the “apache-tomcat-7.0.59-windows-x86” into the folder Tomcat7. The folder should look as follows.

Setting up the Environment Variables

Open My Computer Properties

Click on “Advance system settings”. This would open up a window as shown

Click on “Environment Variables”. This would open up a window as shown

Click on “New” button under “System variables”. This would open up a window as shown

Create following variables in the under the system variables section

JAVA_HOME

Create an environment variable called “JAVA_HOME”.

The Variable name should be “JAVA_HOME”.

Variable value should be the folder path you installed Java JDK. e.g. “C:\Program Files\Java\jdk1.7.0_75"

MAVEN_HOME

Create another environment variable called “MAVEN_HOME”.

The Variable name should be “MAVEN_HOME”.

Variable Value : C:\Maven

Path Variable

Select “Path” variable from “System Variables” and click Edit.

The default path will be as follows

%SystemRoot%\system32;%SystemRoot%;%SystemRoot%\System32\Wbem

Note : It may vary computer to computer.

Now let us append java and Maven folder to the above path as shown here.

%SystemRoot%\system32;%SystemRoot%;%SystemRoot%\System32\Wbem;C:\Program Files\Java\jdk1.6.0_21\bin;c:\maven\bin;

Click Ok to save and close.

Now let us verify Both Java and Maven Path are set correctly.

Open command prompt and Enter “Java –Version” and “mvn –version”