ZK Essentials/Chapter 1: Introduction

Overview

This tutorial presents you key concepts and suggested usage of ZK from the perspective of building a web application. Each chapter has a main topic, and we give one or more example applications to demonstrate each chapter's topic. Each chapter's applications are built upon previous chapter's application to add more features. In the last chapter, the example application becomes close to a real application. The source code of the example applications can be downloaded through github, please refer to Tutorial/Chapter2:Project Structure.

Chapter 1, we introduce the ZK itself including its strength, value, and architecture.

Chapter 2, we reveal the information of example application's source code and project structure.

Chapter 3, we introduce how to build a common layout which contains header, footer, and sidebar.

Chapter 4, we tell you how to control components programmatically.

Chapter 5, it describes how to collect, validate user input and response.

Chapter 6, we demonstrate how to implement common CRUD operations with a To-Do list application.

Chapter 7, we introduce 2 navigation ways in ZK, page-based and singe-desktop.

Chapter 8, it demonstrates a simple implementation to authenticate users.

Chapter 9, we describe how to integrate Spring framework into a ZK application.

Chapter 10, we demonstrate how to use JPA in a ZK application.

Value and Strength

ZK is a component-based and event-driven UI framework that enables you to build Rich Internet Application (RIA) and mobile applications without having to learn JavaScript or AJAX. You can build a highly-interactive and quick-responsive web application with AJAX ability in pure Java. ZK provides hundreds of components 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 and easy-to read language, ZUL.

All user actions on a page such as clicking and typing are treated as events and can be easily handled in an event listener method. You can just control a component to response events by calling a component's method 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, ZK also supports another design pattern, MVVM which makes Controller more decoupling with View.

Architecture

500px

Simple Architecture

Above image is a simplified ZK architecture, you can see widgets running on a browser, and components running on a server. In normal cases, their structure are both corresponding to each other, which means for each widget at the browser, there is a corresponding component at the server. When a browser visits a page of a ZK application, ZK creates components specified in the page and responses corresponding widgets to the browser. Widgets, written in Javascript, abstract user interaction as various events and send events to the server with AJAX requests. Then you can handle those events at the server side. Components created at server side can be manipulated by your application to implement UI presentation logic. All changes you made on components will automatically synchronize to corresponding widgets. ZK handles underlying communication between widgets and components 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 event at client side. These two kinds of development ways give you productivity and flexibility.