ZK

An Introduction

Table of contents

ZK Primer ZK Components overview ZK Programming: ZK MVC ZK Programming: ZK MVVM

What is ZK?

An AJAX UI framework based on JAVA XML UI Programming Pure Java Programming support
Allows Fast Prototyping Strong MVC and MVVM Support Eclipse, Netbeans IDE Support XHTML Compatible CSS UI Design

Write Ajax with proven technologies

Based on Java

Can be deployed to any JVM compatible platform Can be deployed to wide variety of application servers

Based on Servlet specification 2 and 3

Based on jQuery

Easy to extend and customize

Intuitive and allows faster development

Based on XUL

Server + Client Fusion Architecture

Client (Browser)
ZK Client Engine (Optional) Client Feature Optimization ZK Ajax widget

Server
ZK Server Engine Application ZK Java Components

Easily Integrated with 3Rd Party Lib

Total UI Control In Presentation Layer

Safer Business Layer & Data Layer

Build enterprise grade UI with modular components in markup or in Java

Program to an Event-driven Model

Enable UI Components to Respond to User Events
register event listener

button clicked
Ajax request to the server event handling instructions sent to client presentation updated

How ZK renders UI
Browser
1. Browser sends an URL

Server

DOM

4. ZK events (optional) ex: onCreate()

ZK Layout Engine
Internet
3. Create components 8. Return

Event Queue 5. ZK events (optional)

[Link] & Load page

Java script action

Application
.zhtml, .zul pages Codes (yours)
6. Access persistent layer or other utilities (optional)

Client Engine
9. Response commands + JSON Data ZK components 7. Manipulate components (optional)

ZK

EJB, JDO, MQ, Mail

How ZK handles component events

Click

Event Queue

Internet

Handle cross platform requirements with ZKs Responsive Design

One codebase, multiple platforms

Flexible components CSS3 media query Programmatic media query Touch event support

Leverage client-side control and 3rd party libraries

JQuery based client engine Comprehensive client side programming documentation - JS OO Programming style Integrate 3rd party widgets/JS Frameworks

Keep external or Wrap as ZK Components

Infovis Visualization Toolkit

CKEditor

Openlayers Map Library HighCharts Library

Google Maps Library

ZK Components Overview

Layout components

How to layout? For example:

header header Logo header

menu

middle

middle

menu

menu

middle

Link

footer

footer

Full size web with menu & content

Align Center web with right side menu

Your Logo & 3 column content

Layout components

Borderlayout

Allows creating layout with 5 regions and can be nested to create really complex layouts Similar to html table element, allows rowspan & colspan

Tablelayout

Columnlayout

Allows columnbased layout

Columnbased but individual portals can be maximized to the whole container and drag & dropped within different columns More suitable for Dashboard like layout Simple & lightweight horizontal/Vertical containers

Portallayout

Hlayout/Vlayout

Layout components
You need your layout to be elastic, Both your

application and user can control it. You need a 2.5 Dimensions UI to present more UI parts . Layout can be changed in a very dynamic way.
(next page)

Layout components

Container Components

Window

Closable, Maximize/Minimize, Modal dialog, overlapped used to display a set of tabbed groups of components

Tabbox

Panel

Like window but relative to parent container

Like html legend element, used to group similar components with a caption and a border surrounding it, collapsible Similar to html DIV

Groupbox

Div

Data Components

Listbox

Tabular view for large number of items, render on demand, allows single/multiple selection, built-in paging support, autosort, column menu, frozen columns support Tabular view for large number of items, render on demand capable, built-in paging & sorting, master-detail view Tree with columns support, load on demand capable, paging Lightweight and highly optimized to display huge amount of data

Grid

Tree

Biglistbox

Utility components

Fileupload / Filedownload/ Dropupload Captcha Chosenbox Iframe Fisheye menu Audio Flash Timer Menu/Menubar/manupopup Toolbar/Toolbarbutton

Graphical Components

Flashchart Fusionchart Timeline

Visualize time-based events by horizontal panning Plot time series and overlay time-based events on them

Timeplot

Add-on Components

ZK Spreadsheet

Just like excel but online and that you can embed in your application, allows collaboration, charts & images display, PDF/Html export, can be integrated into JSF applications

ZK Pivottable

An Ajax data summarization component

ZK MVC/MVVM Example Application

User enters
keyword to search for a car If matches are found, they're displayed in the table, else an error is displayed A car's detail is shown below when an entry is selected

ZK MVC: View
Window
Label Textbox Button

Listbox

Label Label Image Label

ZK MVC: View Source (ZUL)

<window width="600px" border="normal"> <hbox align="center"> Keyword:<textbox /><button label="Search" image="/img/[Link]"/> </hbox> <listbox> ...list items... </listbox> <hbox style="margin-top:20px">

<image width="250px" />

<vbox> ...labels... </vbox> </hbox> </window>

ZK MVC: Model
public interface CarService {

public List<Car> findAll(); public List<Car> search(String keyword); }

public class Car {

private String name,company,private,preview,description;

private Integer id, price; //Constructors //Getters and Setters }

ZK MVC Basics

MVC in ZK's Context Wire Components Listen to Events

Assign Model to Components

Render Data in View

ZK MVC Basics: MVC in ZK

Controller
@Wire Listbox x;

View
<listbox HTML Page: > ... <table> </listbox> ... </table>

@Listen(event) EventListener( ) {..} [Link](data)

Model

ZK MVC Basics : Wire Components

public class SearchController extends SelectorComposer<Window> { @Wire private Textbox keywordBox; @Wire private Listbox carListbox; @Wire private Label errorMsg,...;

<window apply="[Link] er">

<textbox id="keywordBox"/>

<label id="errorMsg"/> <listbox id="carListbox";> ...list items... </listbox> <hlayout> <image/> ... </hlayout> </window>

@Wire("hlayout")
private Hlayout carDetailArea; @Wire("window > hlayout > image") private Image previewImage;

ZK MVC Basics : Listen to Events

<window> <textbox id="keywordBox"/><button id="searchButton"/> <listbox id="carListbox;> ..items </listbox> </window> @Listen("onOK = #keywordBox ; onClick = #searchButton") public void search(){ String keyword = [Link](); List<Car> result = [Link](keyword); ... }

ZK MVC Basics :Assign Model to View

<window> <textbox id="keywordBox"/><button id="searchButton"/> <listbox id="carListbox";> ..items </listbox> </window>

@Listen("onOK = #keywordBox ; onClick = #searchButton") public void search(){ String keyword = [Link](); List<Car> result = [Link](keyword);

[Link](new
ListModelList<Car>(result));

ZK MVC Basics : Render Data in View

<listbox visible="false" id="carListbox"> <listhead> <listheader label="Name" /> <listheader label="Company" /> <listheader label="Price" width="20%"/> </listhead> <template name="model"> <listitem> <listcell label="${[Link]}"></listcell> <listcell label="${[Link]}"></listcell> <listcell>$<label value="${[Link]}" /></listcell>

Renders each Car item iteratively

</listitem>

Recap : ZK MVC in a Nutshell

In Controller:

Gain Reference of View Components (with Selectors) o Wire Components

o Listen to Events
Assign Data From Model to View

In View (OPTIONAL):

Declare Attributes such as ID, Class, etc.. for a Selector

Recap : Benefits of ZK MVC

Benefits:

Full Control of (and Coupled with) View Components View Can Be Made Completely Independent of Controller
(replace template with a Renderer class)

How ZK MVC Adapts to UI Change:

A Change of Selector Patterns in Controller

ZK MVVM Basics

MVVM in ZK's Context Property Binding Command Binding

Automatic View Update

ZK MVVM Basics > MVVM under ZK

View
<listbox HTMLL Page: viewModel="vm"> <table> ...

ViewModel
view states methods

</listbox>
... </table>

Binder
vm event : command

Model

ZK MVVM Basics > Property Binding

public class SearchViewModel {

private String keyword;

private List<Car> carList; private Car selectedCar; <window apply="[Link]"

viewModel="@id('vm') @init('[Link]')"> Keyword: <textbox value="@bind([Link])"/>

...
<label value="No Match Found" visible="@load(empty [Link])"/> <listbox model="@bind([Link])" selectedItem="@bind([Link])" visible="@load(not empty

ZK MVVM Basics > Command Binding

Keyword: public class SearchViewModel { <textbox value="@bind([Link])" onOK="@command('search')"/> <button label="Search" private String keyword; onClick="@command('search')"/>

private List<Car> carList;

private Car selectedCar @Command public void search(){

carList = [Link](keyword);
selectedCar = null; }

ZK MVVM Basics > Automatically Updates View (2-way Binding)

public class SearchViewModel {

...
private List<Car> carList; @Command @NotifyChange("carList") public void search(){
<listbox model="@bind([Link])" visible="@load(not empty [Link])"> <template name="model"> <listitem> <listcell label="@load([Link])/> <listcell label="@load([Link]/> <listcell>$<label value="@load([Link])" /></listcell>

carList = [Link](keyword); }

Recap > ZK MVVM in a Nutshell

In ViewModel:

Declare View Components' States as Properties

Expose Command Methods

In View:

Bind ViewModel Properties Using Expressions

Trigger Command Methods in ViewModel

Recap > Benefits of ZK MVVM

Benefits:

Change in ViewModel Properties is Updated Automatically in View via Binder ViewModel is Made Completely Independent of View

How ZK MVVM Adapts to UI Change:

Declare Bindings in Modified View

Resources

ZK Getting started with MVC

A step-by-step buide to implement MVC in ZK A step-by-step guide to implement MVVM in ZK Learn how to do essential tasks in ZK Complete reference to ZK components Learn various ZK programming concepts and techniques

ZK Getting stated with MVVM

ZK Essentials ZK Component Reference ZK Developers Reference ZK ZUML Reference

Complete reference to ZUML

Stuck? Have a question? Search ZK forum as it might be already answered. Get ZK community to solve your problems.

ZK Forum

Q &A