ZK Dynamic Menu

ZK Dynamic Menu Part 5

ZK Dynamic Menu Part 4

ZK Dynamic Menu Part 3

ZK Dynamic Menu Part 2

ZK Dynamic Menu Part 1

ZK Example for inline Editing with Add New and Delete

ZK upload PDF to server and show in the screen using MVVM

ZK Quick InputBox

ZK Examples Index Page

ZK Projects

ZK 7 Project Start-up Kit – Theme with full source code and support Demo Link : User Name : demo, password : demo

     

ZK 8.5 Version Video Tutorials . All New created in July 2018

1. Create and Run your First ZK 8.5 Application with Eclipse and Maven

2. ZK 8.5 Component Reference Window - Part 1

3. ZK 8.5 Component Reference Window - Part 2

4. ZK 8.5 Component Reference Layout - vlayout and hlayout

5. ZK 8.5 Component Reference Textbox Part 1

6. ZK 8.5 Component Reference Textbox Part 2

7. ZK 8.5 Component Reference Grid Part 1

8. Sample UI Design Form in 8.5 Part 1

9. CSS Classes and Styles

10. Sample Screens for Training to Create UI in ZK

ZK Free Examples and Tutorials

 

ZK Maven	Create and Run Your First ZK 7 Application with Eclipse and Maven
ZK 7	ZK 7 Simple Form Design(s) Part 1
ZK 7	ZK with External style sheet
ZK MVVM	MVVM – Introduction
ZK MVVM	MVVM Examples–Example 1
ZK MVVM	MVVM Examples–Example 2
ZK 7	ZK MVVM Simple List Box Example
ZK 7	How to show particular row in ZK Listbox with different color in MVVM
ZK 7	ZK 7 MVVM List Box Select All and Unselect all Records
ZK 7	ZK MVVM List box with check box – Simple Example
ZK List Box	Move List box item up and Down using MVVM Design Pattern
ZK List Box	List Item Double click event on selected Item using MVVM
ZK List Box	ZK List box inline Editing with Add New and Delete action
ZK List Box	ZK MVVM List box with Dynamic Template
ZK 7 Hibernate	ZK 7 + MySQL + Hibernate + Spring + Integration example
ZK 7 Excel	ZK 7 Export to Excel
ZK File Upload	Simple example to upload PDF file in the server and show the content using iframe - MVVM
ZK File Upload	ZK 7 upload PDF to server and show in the screen using MVVM–Part 2
ZK Tab box	Load Tab box Content on Demand Using MVVM  (Onselect Event)
ZK Grid	ZK Grid inline Editing with Add New and Delete action
ZK Upload	ZK Dropupload example
ZK Report	Create a Report with ZK using iReport 5.1.0 and JasperReports
ZK Menu	ZK Dynamic Menu Part 1	Demo
ZK Tree	ZK Dynamic Menu Part 2 Using Tree Component	Demo
ZK Group Box	ZK Dynamic Menu Part 3 Using Group Box and Tool Bar Button	Demo
ZK Tab Box	ZK Dynamic Menu Part 4 Using Tab box and Tool Bar Button	Demo
ZK Menu	ZK Dynamic Menu Part 5 Using Tab Box, Tool Bar and Group Box	Demo
ZK 7 Nav Bar	ZK Dynamic Menu Part 6 Using ZK 7 Navigation Bar
ZK Combo	MVC Two combo Box – Fill second combo based on first combo selection
ZK Combo	ZK MVVM Combo Box value Converter
ZK Validation	Simple Example for ZK Input Form Validation
ZK MVC	Listing Search using MVC Pattern	Demo
ZK MVC Passing arguments	Part 1, This article will focus on the How to pass some arguments from one window(Parent) to modal window(Child) where child window does not have any controller attached.	Demo
ZK MVC Passing arguments	Part 2, This article will focus on the How to pass some arguments from one window(Parent) to modal window(Child) where child window attached to the controller and we will receive the arguments in the controller and display back to UI.	Demo
ZK MVC Passing arguments	Part 3, This article will focus on the How to pass some arguments from one window(Parent) to modal window(Child) where child window attached to the controller and we will receive the arguments in the controller and display back to UI. Same as Part 2, but we will use ZK ‘s annotated data binding manager utility.	Demo
ZK MVC Passing arguments	Part 4, This article will focus on the How to return values from the child window (Modal) to the Calling Parent Window using ZK Event Queues concept.	Demo
ZK MVC Passing arguments	Part 5, This article will focus on the How to return values from the child window (Modal) to the Calling Parent Window using ZK Send Event	Demo
ZK MVC Passing arguments	Example on Passing arguments in MVC	Demo
ZK MVVM Passing arguments	Part 1, This article will focus on the How to pass some arguments from one window(Parent) to modal window(Child) where child window does not have any VM attached.	Demo
ZK MVVM Passing arguments	Part 2, This article will focus on the How to pass some arguments from one window(Parent) to modal window(Child) where child window attached with VM and arguments are received in the VM and update the UI.	Demo
ZK MVVM Passing arguments	Part 3, This article will focus on the How to pass some arguments from one window(Parent) to modal window(Child) where child window attached with VM and arguments are received in the VM and update the UI. After child window is closed, we will return the value to the parent window.	Demo
ZK MVVM Passing arguments	Part 4, In this post, we will see how we can pass parameter between two zul files attached by MVVM using URL Redirect	Demo
ZK Login Form CSS	ZK Login form Design
ZK Login	ZK + Spring Security Login form–Part 1
ZK Login	ZK + Spring Security Login form–Part 2
ZK Login	ZK + Spring Security Login form–Part 3
ZK Login	ZK + Spring Security Login form– Additional Login Parameters - Part 4
ZK Login	ZK + Spring Security Login form–Part 5

ZK 7 CSS

ZK Window	ZK 7 Window CSS Example1
ZK Group Box	ZK 7 Group Box Example 1
ZK 7	ZK 7 Message box CSS
ZK TextBox	Small Search Box

 

ZK 6 CSS

Please Note : All the below Examples will work correctly only on ZK 5 and ZK 6 Version

ZK Button	Stylish Button created using ZK Link component.	Demo
ZK Button	Part 2 Stylish Button created using ZK Link component.	Demo
ZK Button	Part 3 Stylish Button created using ZK Link component.	Demo
ZK Button	ZK Fancy Buttons	Demo
ZK TextBox	Big Search Box.	Demo
ZK TextBox	CSS3 Search Box.	Demo
ZK Login	Sample Login Form Design in ZK
ZK Grid	Customize ZK Grid CSS
ZK Tab Box	Tabbed Dialog Form - 2	Demo
ZK Tab Box	Tabbed Dialog Form - 1	Demo
ZK Tab Box	Navigation Menu
ZK Menu	ZK Vertical Menu
ZK Form	ZK Form Design CRUD Example
ZK Form	Search Screen Example
ZK Form	Multi Column Big Screen Design
ZK Search	ZK Search Box
ZK Button	ZK Button CSS Customization
ZK Window	ZK Modal Window CSS Customization
ZK ListBox	ZK Listbox CSS
ZK Panel	ZK Panel CSS Customization
ZK Messagebox	ZK Message box CSS
ZK ToolBar	ZK Tabbox with Tool Bar Button
CSS File	How to Refer External CSS File in ZUL
ZK Button	Button Collection
ZK Window	ZK Window CSS
ZK Group Box	Group Box with Collapse and Expand Button in the Right

ZK Small Application

ZK MVVM CRUD Example without DB Connection Step by step tutorial on ZK MVVM CRUD Operation without any DB Connection. online Demo here

ZK MVVM With Spring + JPA + Hibernate Entity Manager Step by step Tutorial on how to Integrate ZK With spring and JPA (Hibernate vendor)

ZK MVVM With Spring + Hibernate 4 API Direct Step by step Tutorial on how to Integrate ZK With spring and Hibernate API

 

ZK MVC CRUD With Spring 3 + JPA + Hibernate 4 Entity Manager. A simple CRUD Application based on JPA. Step by step Tutorial on how to create simple CRUD application using ZK as Presentation layer with Spring 3 and JPA (Hibernate vendor).

 

ZK + Spring Security Custom Login form. Step by step Tutorial on how to integrate ZK and Spring security

ZK + Spring + MVVM + Hibernate - Small Application Highlights 1. ZK Maven Project Steps 2. Spring Security integration with custom login form 3. Spring and Hibernate integration 4. Generic DAO and Service Layer 5. Theme customization by each user 6. jQuery integration with ZK Framework 7. Store Image in the Database 8. Validation using Hibernate Validator

 

 

ZK 7 + Spring + MVVM + Hibernate + MySQL + List Box Highlights 1. ZK Maven Project Steps 2. Spring and Hibernate integration 3. Explained the following features in ZK List box a) Format the amount field and show the currency symbol. b) Column sorting. c) Showing date fields in preferred format using ZK Converter. d) Showing phone numbers in preferred format using ZK Converter. e) Use EL expression to call a method in a ViewModel. f) Binding label value according to run time value. g) Dynamic sclass based on value. h) Dynamic Template.

ID Space - Different method to access UI Elements

The following example is based on the following zk doc

http://books.zkoss.org/wiki/ZK_Essentials/Introduction_to_ZK/Component_Based_UI
http://books.zkoss.org/wiki/ZK_Developer's_Guide/Fundamental_ZK/Basic_Concepts/UI_Component_Forest
http://books.zkoss.org/wiki/ZK_Developer's_Reference/UI_Composing/ID_Space


Here is the simple zul file

<?page title="Example5" contentType="text/html;charset=UTF-8"?>
<zk>
<window title="Example" id="outerWin" border="normal" apply="mypack.Example5">
<button id="outerBtn" label="Outer Win Button" />
<window id="innerWin" border="normal">
<button id="innerBtn" label="Inner Win Button" />
</window>
</window>
</zk>


Now we will see how we can access all these components and do some actions. In this example,
i have just changed the caption, so that's action for us now.

In order to manipulate the UI Components, let us follow the MVC Pattern

First we need to create a composer and let us connect the zul and composer by using apply attribute

Here is the composer java class

package mypack;

import org.zkoss.zk.ui.util.GenericForwardComposer;
import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.Path;

import org.zkoss.zul.Button;
import org.zkoss.zul.Window;

@SuppressWarnings("rawtypes")
public class Example5 extends GenericForwardComposer {

private static final long serialVersionUID = 1L;
private Window outerWin;
private Window innerWin;
private Button innerBtn;
private Button outerBtn;

@SuppressWarnings("unchecked")
public void doAfterCompose(Component comp) throws Exception {
/**
* Dont forget to call super doaftercomposer. By calling this, it will
* add the event listner for us
*/
super.doAfterCompose(comp);

outerWin = (Window) comp;
// Set the outer window title
outerWin.setTitle("Title Changed");

// Now let us try to access outerbtn by different methods

// Using getfellow
outerBtn = (Button) outerWin.getFellow("outerBtn");
outerBtn.setLabel("Outer Button accessed 1");

/**
* The Path provides the utility method getComponent which takes the
* relative path of the component as its argument. outerBtn is
* equivalent to outerWin/outerBtn
*/

// Using Path
outerBtn = (Button) Path.getComponent("/outerWin/outerBtn");
outerBtn.setLabel("Outer Button accessed 2");

/**
* The getFirstChild method returns the first child component of the
* caller. The advantage of using this method is that you don't even
* need to know the component ID to fetch the component.
*/

// Using Getfirstchild
outerBtn = (Button) outerWin.getFirstChild();
outerBtn.setLabel("Outer Button accessed 3");

// Now let us try to access innerBtn by different methods

// Using getfellow
innerBtn = (Button) outerWin.getFellow("innerWin")
.getFellow("innerBtn");
innerBtn.setLabel("inner Button accessed 1");

// Using Path
innerBtn = (Button) Path.getComponent("/outerWin/innerWin/innerBtn");
innerBtn.setLabel("inner Button accessed 2");

// Using Getfirstchild
innerBtn = (Button) outerWin.getFirstChild().getNextSibling()
.getFirstChild();
innerBtn.setLabel("inner Button accessed 3");

// Now let us try to access innerWin by different methods
// Using getfellow

// Using getfellow
innerWin = (Window) outerWin.getFellow("innerWin");
innerWin.setTitle("Inner window accessed 1");

// Using Path
// We can also use (Window)Path.getComponent("outerWin/innerWin");

innerWin =  (Window)Path.getComponent("/outerWin/innerWin");
innerWin.setTitle("Inner window accessed 2");


// Using Getfirstchild
innerWin =  (Window)outerWin.getFirstChild().getNextSibling();
innerWin.setTitle("Inner window accessed 3");
}
}


You can see above, we have used different methods to access the UI Components

Hi
Slowly moving as  a techie guys to come up good product for EMR and PMS

Here is the technology mixture which i have started

ZK 6  + Spring + Hibernate + java ee + Maven + ???????  some more !!! No idea, so far this.

You can see some stupid and simple examples in ZK framework going forward

Have fun