Chapter 1: Introduction

Overview

This tutorial presents you key concepts and suggested usage of ZK from the perspective of building a web application. We give a example application for each chapter's topic, and each application is built upon previous chapter's application to add some features. Then finally the example application is becoming closer to real application. The source code of the example application can be download through [github].

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

Chapter 2, we describe the example application's project structure.

Chapter 3, we introduce how to build commonly-seen 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 way in ZK, page-based and singe-desktop.

Chapter 8, it demonstrate 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 such as clicking and typing are treated as events and can be easily handled in a event listener method. You can just control components by calling components' method and changes will reflect to browsers. You don't need to care about those detail communications between browsers and servers, ZK will handle it for you. Instead of manipulate 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 widgets at the browser, there is a 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 are basically written in Javascript and runs on the browser. They abstract user interaction as various events and sent to the server with AJAX request. 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 change you made on components will automatically synchronize to corresponding widgets. ZK handles underlying communication between widgets and components for you.

• widgets at client
• components at server
• widgets and components synchronize themselves automatically
• Server-centric
  • access full Java technology stack
  • control component to implement UI presentation logic
  • User interaction with widgets are abstracted as events sent to server with AJAX request, can be handled at the server side.
• Client-centric
  • customize visual effect
  • handle event