zk an introduction free training

8/14/2019 ZK an Introduction Free Training

1/42

ZK

An Introduction


2/42

Table of contents

ZK PrimerZK Components overviewZK Programming: ZK MVCZK Programming: ZK MVVM


3/42

What is ZK?

An AJAX UI framework based on JAVAXML UI ProgrammingPure Java Programming supportAllows Fast PrototypingStrong MVC and MVVM SupportEclipse, Netbeans IDE SupportXHTML Compatible

CSS UI Design


4/42

Write Ajax with proven technologies

Based on JavaCan be deployed to any JVM compatible platformBased on Servlet specification 2 and 3

Can be deployed to wide variety of application servers

Based on jQueryEasy to extend and customize

Based on XULIntuitive and allows faster development


5/42

Server + Client Fusion Architecture

Total UI ControlIn Presentation Layer

Safer Business Layer& Data Layer

Application

Server

ZK JavaComponents

ZKServerEngine

Client (Browser)

ZK Ajaxwidget

ZKClient

Engine

(Optional)

Client FeatureOptimization

Easily Integrated

with 3Rd

Party Lib


6/42

Build enterprise grade UI with modularcomponents in markup or in Java


7/42

Program to an Event-driven Model

Enable UI Components to Respond to User Eventsregisterevent listener

buttonclicked

Ajax requestto the server

eventhandling

instructionssent to client

presentationupdated


8/42

How ZK renders UI

Internet

9. Responsecommands + JSON Data

1. Browsersends an URL

ZKLayoutEngine

BrowserServer

EventQueue

EJB, JDO,MQ, Mail

3. Createcomponents

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

5. ZK events(optional)2.Query &Load page

6. Access persistent layeror other utilities

(optional)

Application

.zhtml,.zul pages

Codes(yours)

7. Manipulatecomponents(optional)

ZKcomponents

ZKClient

Engine

DOM

8. Return

Java scriptaction


9/42

How ZK handles component events

Click

Internet

EventQueue


10/42

Handle cross platform requirements withZKs Responsive Design

FlexiblecomponentsCSS3 media queryProgrammatic

media queryTouch eventsupport

One codebase, multiple platforms


11/42

Leverage client-side control and 3rd partylibraries

JQuery based client engine

Comprehensive client side programming documentation - JS OO Programming styleIntegrate 3 rd party widgets/JS Frameworks

Keep external orWrap as ZK Components

Infovis Visualization

Toolkit CKEditor

Google Maps Library

HighCharts Library

Openlayers Map Library


12/42

ZK Components Overview


13/42

Layout components

How to layout? For example:

header

menu middle

footer

header

menumiddle

footer

header

menu middle Link

Logo

Full size web with menu & content

Align Center web with right side menu

Your Logo &3 column content


14/42

Layout componentsBorderlayout

Allows creating layout with 5 regions and can be nested to createreally complex layouts

TablelayoutSimilar to html table element, allows rowspan & colspan

ColumnlayoutAllows columnbased layout

PortallayoutColumnbased but individual portals can be maximized to the wholecontainer and drag & dropped within different columnsMore suitable for Dashboard like layout

Hlayout/VlayoutSimple & lightweight horizontal/Vertical containers


15/42


16/42

Layout components


17/42

Container Components

WindowClosable, Maximize/Minimize, Modal dialog, overlappedTabbox

used to display a set of tabbed groups of components

PanelLike window but relative to parent container

GroupboxLike html legend element, used to group similar componentswith a caption and a border surrounding it, collapsible

DivSimilar to html DIV


18/42


19/42

Utility components

Fileupload / Filedownload/ DropuploadCaptchaChosenboxIframeFisheye menuAudioFlash

TimerMenu/Menubar/manupopupToolbar/Toolbarbutton


20/42


21/42

Add-on Components

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

ZK Pivottable An Ajax data summarization component
http://zssdemo.zkoss.org/zssdemo/index.zulhttp://www.zkoss.org/zkdemo/application/pivottablehttp://www.zkoss.org/zkdemo/application/pivottablehttp://www.zkoss.org/zkdemo/application/pivottablehttp://zssdemo.zkoss.org/zssdemo/index.zul


22/42


23/42

ZK MVC: View

WindowLabel Textbox Button

Listbox

Image

Label

Label

Label


24/42

ZK MVC: View Source (ZUL)

Keyword:

...list items...

...labels...


25/42

ZK MVC: Model

public class Car {

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

private Integer id, price;

//Constructors

//Getters and Setters

}

public interface CarService {

public List findAll();

public List search(String keyword);

}


26/42

ZK MVC Basics

MVC in ZK's Context

Wire Components Listen to Events Assign Model to Components Render Data in View


27/42

ZK MVC Basics: MVC in ZK

Model

Controller

@WireListbox x;

@Listen(event)EventListener( ) {..}

x.setModel(data)HTML Page:

...

View

...


28/42

ZK MVC Basics : Wire Components

public class SearchController

extends SelectorComposer {

@Wire

private Textbox keywordBox;

@Wireprivate Listbox carListbox ;

@Wire

private Label errorMsg ,...;

@Wire(" hlayout ")

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

private Image previewImage ;

}

< window

apply="tutorial.SearchControll

er" >

< textbox id=" keywordBox "/>

< label id=" errorMsg "/>

< listbox id=" carListbox ";>

...list items...

< image />

...


29/42


30/42

ZK MVC Basics :Assign Model to View

@Listen("onOK = #keywordBox ; onClick = #searchButton ")public void search(){

String keyword = keywordBox.getValue();

List result = carService.search(keyword);

carListbox.setMode l(new

ListModelList(result));

..items


31/42

ZK MVC Basics : Render Data in View

< template name=" model ">

$

Renders each Caritem iteratively


32/42

Recap : ZK MVC in a Nutshell

Gain Reference of View Components (with Selectors)

o Wire Components

o Listen to Events Assign Data From Model to View

In Controller:

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

In View (OPTIONAL):


33/42

Recap : Benefits of ZK MVC

Full Control of (and Coupled with) View Components View Can Be Made Completely Independent of Controller

(replace template with a Renderer class)

Benefits:

A Change of Selector Patterns in Controller

How ZK MVC Adapts to UI Change:


34/42

ZK MVVM Basics

MVVM in ZK's Context

Property Binding Command Binding Automatic View Update


35/42

ZK MVVM Basics > MVVM under ZK

HTMLL Page:

...

View

...

Model

Binder

vmevent : command

ViewModel

view states

methods


36/42

ZK MVVM Basics > Property Binding

Keyword:

...


37/42

ZK MVVM Basics > Command Binding

Keyword:

public class SearchViewModel {

private String keyword;

private List carList;

private Car selectedCar@Command

public void search (){

carList = carService.search(keyword);

selectedCar = null;

}


38/42

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

$

public class SearchViewModel {

...

private List carList;

@Command

@NotifyChange("carList")

public void search(){

carList =

carService.search(keyword); }


39/42

Recap > ZK MVVM in a Nutshell

Declare View Components' States as Properties

Expose Command Methods

In ViewModel:

Bind ViewModel Properties Using Expressions Trigger Command Methods in ViewModel

In View:


40/42

Recap > Benefits of ZK MVVM

Change in ViewModel Properties is Updated Automatically

in View via Binder ViewModel is Made Completely Independent of View

Benefits:

Declare Bindings in Modified View

How ZK MVVM Adapts to UI Change:


41/42

ResourcesZK Getting started with MVC

A step-by-step buide to implement MVC in ZKZK Getting stated with MVVM

A step-by-step guide to implement MVVM in ZKZK Essentials

Learn how to do essential tasks in ZK

ZK Component Reference Complete reference to ZK components

ZK Developers Reference Learn various ZK programming concepts and techniques

ZK ZUML Reference Complete reference to ZUML

ZK Forum Stuck? Have a question? Search ZK forum as it might be alreadyanswered. Get ZK community to solve your problems.
http://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVChttp://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVVMhttp://books.zkoss.org/wiki/ZK_Essentialshttp://books.zkoss.org/wiki/ZK_Component_Referencehttp://books.zkoss.org/wiki/ZK_Developer's_Referencehttp://books.zkoss.org/wiki/ZUML_Referencehttp://forum.zkoss.org/questions/http://forum.zkoss.org/questions/http://books.zkoss.org/wiki/ZUML_Referencehttp://books.zkoss.org/wiki/ZK_Developer's_Referencehttp://books.zkoss.org/wiki/ZK_Component_Referencehttp://books.zkoss.org/wiki/ZK_Essentialshttp://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVVMhttp://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVC


42/42

Q & A

zk an introduction free training

Documents