ZK reference

ZK is a component-based UI framework that enables you to build Rich Internet Application (RIA) and mobile applications without having to learn JavaScript or AJAX. You can build highly-interactive and responsive AJAX web applications in pure Java. ZK provides hundreds of components^[1] which are designed for various purposes, some for displaying large amount of data and some for user input. We can easily create components in an XML-formatted language, ZUL.
All user actions on a page such as clicking and typing can be easily handled in a Controller. You can manipulate components to respond to users action in a Controller and the changes you made will reflect to browsers automatically. You don't need to care about communication details between browsers and servers, ZK will handle it for you. In addition to manipulating components directly i.e. MVC (Model-View-Controller) pattern ^[2], ZK also supports another design pattern, MVVM (Model-View-ViewModel) ^[3] which gives the Controller and View more separation. These two approaches are mutually interchangeable, and you can choose one of them upon your architectural consideration.

Architecture of ZK

Simple Architecture

Above image is a simplified ZK architecture. When a browser visits a page of a ZK application, ZK creates components written in ZUL and renders them on the browser. You can manipulate components by your application's Controller to implement UI presentation logic. All changes you made on components will automatically reflect on users' browser and ZK handles underlying communication for you.

ZK application developed in server-centric way can easily access Java EE technology stack and integrate many great third party Java frameworks like Spring or Hibernate. Moreover, ZK also supports client-centric development that allows you to customize visual effect, or handle user actions at client side.

When a ZK application runs on the server, it gives access to backend resources, assemble UI with components, listen to users' activity, and then manipulate components to update UI. All are done on the server. The synchronization of the states of the components between the browser and the server is done automatically by ZK and transparently to the application.

When running on the server, the application can access full Java technology stack. Users' activities, including Ajax and Server Push, are abstracted to event objects. UI are composed of POJO-like components. It is the most productive approach to develop a modern Web application.

With ZK's Server+client Fusion architecture, your application will never stop running on the server. You can enhance your application's interactivity by adding optional client-side functionality, such as client-side event handling, visual effect customizing and even UI composing without server-side coding. ZK is the only framework to enable seamless fusion from pure server-centric to pure client-centric. You can have the best of two worlds: productivity and flexibility.

MVC vs MVVM Approach Comparison

Here is the architecture picture to demonstrate the interaction between Model, View, and Controller/ViewModel.

The main differences are that Controller changes to ViewModel and there is a binder in MVVM to synchronize data instead of a Controller.
Briefly speaking, MVC advantage:

• very intuitive, easy to understand
• control components in fine-grained

MVVM advantage:

• suitable for design-by-contract programming
• loose coupling with View
• better reusability
• better testability
• better for responsive design 

Both approaches can achieve many things in common, but there are still some differences between them. Each of two approaches has its strength. Building an application with MVC approach is more intuitive because you directly control what you see. Its strength is that you have total control of components so that you can create child components dynamically, control custom components, or do anything a component can do.

In MVVM, because ViewModel is loosely-coupled with View (it has no reference to components), one ViewModel may associate with multiple Views without modification. UI designers and programmers may work in parallel. If data and behavior do not change, a View's change doesn't cause ViewModel to be modified. In addition, as ViewModel is a POJO, it is easy to perform unit test on it without any special environment. That means ViewModel has better reusability, testability, and better resistance to View change.

To summarize, a comparison table is illustrated below:

	MVC	MVVM
Coupling with View	Loose with layout	Loose
Coupling with Component	Tight	Loose
Coding in View	Component ID	Data binding expression
Controller Implementation	Extends ZK's composer	a POJO
UI Data Access	Direct access	Automatic
Backend Data Access	Direct access	Direct access
UI Updating	Manipulate components	Automatic(@NotifyChange)
Component Controlling Granularity	Fine-grained	Normal
Performance	High	Normal

Source: https://www.zkoss.org/documentation

ZK document

	Learn ZK in 10 Minutes A brief introduction to the basic concepts of ZK
	Get ZK Up and Running with MVC Through an example application from start to finish, learn the gist of ZK programming and how to effectively gain full control of UI components' state and behaviour using ZK MVC Get ZK Up and Running with MVVM Through an example application from start to finish, learn how ZK MVVM's data-binding mechanism works to automate tasks that we'd have otherwise carried out manually under the MVC pattern.

ZK Essentials PDF Epub MOBI ZK 7 PDF A book which walks you through the key concepts and features by building a working application from the ground up Tutorial ZK Developer's Reference Javadoc API ZK Essentials     Chapter 1: Introduction     Chapter 2: Project Structure     Chapter 3: User Interface and Layout     Chapter 4: Controlling Components     Chapter 5: Handling User Input     Chapter 6: Implementing CRUD     Chapter 7: Navigation and Templating     Chapter 8: Authentication     Chapter 9: Spring Integration     Chapter 10: JPA Integration ZK documentation#References ZK Spring Essentials Guide of using ZK Spring Integration Library ZK Calendar Essentials PDF Guide of using ZK Calendar ZK quick start       Source Code: https://github.com/zkoss-demo