ZK Getting Started/Get ZK Up and Running with MVC

This page is under construction, so we cannot guarantee the accuracy of the content!

Introduction

In this tutorial, we will teach you how to build a web application with ZK. The target application we are going to build is a bookstore catalog application.

You can take look at this application's live demo.

Installation

In this section, we'll tell you how to setup up ZK in a web application project.

Prerequisite

We use eclipse IDE 3.7 (indigo) for Java EE developer (Download it) to demonstrate the whole instructions.

Add a Server Runtime Environment

A web application project needs an application server environment to run. In eclipse menu, select Window \ Preferences, in Preferences window, select Server\Runtime Environments. Click Add button to add a server runtime environment.

Select Apache Tomcat v6.0 as our environment, click Next.

If you have installed Tomcat before, just provide your path. If you don't, just click Download and Install button and choose a folder, wait for a while, eclipse will download and install Tomcat for you. After installation is complete, the Finish button will become enabled. Click it to finish adding server runtime.

You shall see a entry like the following in your Server Runtime Environment.

Create a Web Project

In eclipse, select File \ New \ Dynamic Web Project, enter zktutorial in Project name and keep every thing else default.

Download

To use ZK in your project, you have to download the ZK CE first.

If your project use maven, please add following dependencies:

The Domain in this tutorial

Our target application is a bookstore catalog that allows users to search and view book's detail such as name, price, description, and cover preview.

Sketch User Interface

In ZK, you can use a XML-formatted language, XUL, to describe user interface.

	<window id="searchWin" title="Search Product" width="800px" border="normal"
	 style="padding-top:10px;padding-left:10px;" apply="tutorial.SearchProductComposer">
		<vlayout>
			<vlayout >
				<hlayout>
					<textbox />
					<button label="search" image="img/search.png"/>
				</hlayout>
				<listbox id="productListbox" mold="paging" pageSize="5">
					<template name="model" >
						<listitem>
							<listcell label="${each.name}"></listcell>
						</listitem>
					</template>
				</listbox>
			</vlayout>
			<separator bar="true" height="10px" />
				<hlayout id="detailArea" visible="false">
					<image id="thumbImage" />
					<vlayout>
						<label id="nameLabel" style="font-size:1.5em"/>
						<hlayout>Price: <label id="priceLabel" style="font-size:1.3em;color:red"/> </hlayout>
						<div ><label id="descriptionLabel"/></div>
					</vlayout>
				</hlayout>
		</vlayout>
	</window>

Manipulate UI

The next step after sketching the UI is to make UI interact with user. We change the UI dynamically by controlling UI component Java object directly.

UI Controller

In order to control UI, you have to create a controller class.

Stuff a bunch of data

We hope users can see a list of books when the page shows up.

Handling User Action

When users select a listitem, we should show them the detail.

Unit Test ZK Application

ZK provides a unit test library, Mimic, which is one module of ZK Application Test Suite (ZATS).