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 search product application.

Installation

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

Download

Download the ZK CE first,

If you use maven, please add following dependencies:

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>