Book not found

From Documentation
⧼coll-notfound_msg⧽

Return to Documentation.

DocumentationZK EssentialsChapter 1: Introduction
Chapter 1: Introduction



WarningTriangle-32x32.png This page is under construction, so we cannot guarantee the accuracy of the content!


ZK's Value and Strength

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. The Controller is a Java class that implements a specific interface. 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


Tutorial-ch1-simple-architecture.png
Simple Architecture

Above image is a simplified ZK architecture. When a browser visits a page of a ZK application, ZK creates components at the serverside which are specified in the page. Components are implemented by Java class. When components are created and running at a server, they also generate corresponding widgets client-side (browsers). Widgets, written in Javascript, are responsible for interacting with user and synchronizing data with components. Their structure are both corresponding to each other, which means for each component at a server, it will generate a corresponding widget to the browser.

Components created at server side upon View written in ZUL can be manipulated by your application's Controller 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 user actions at client side.

About This Tutorial

This tutorial presents 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 AJAX-based.

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.


Example Application

The final result of this tutorial is to build a small and rich application that has common features such as authentication, navigation, form input, and personal Todo list management. It manages its infrastructure with Spring and persists data into a database with JPA.

This application has a common layout. The header above has application's icon and its title, and the footer at the bottom contains general information. The central area displays the current main function. You must login before you can access other functions.

Tutorial-ch8-login.png
Example application - login


After login, you can see the main page. The sidebar on the left is a navigation bar that allows you to switch between different functions. The upper three items lead you to external sites. There are 2 main functions, profile and todo list management, which are implemented by both the MVC and MVVM approach.

Tutorial-ch1-profile.png
Example application - profile form


The image below shows the Todo list management function, you can create, delete, and update a todo item.

Tutorial-ch1-todo.png
Example application - todo list



References




Last Update : 2013/03/12

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.