Get ZK Up and Running with MVC"
From Documentation
| Line 69: | Line 69: | ||
= Manipulate UI = | = Manipulate UI = | ||
| + | == UI Controller== | ||
== Stuff a bunch of data == | == Stuff a bunch of data == | ||
== Handling User Action == | == Handling User Action == | ||
| − | |||
| − | |||
= Bind UI Automatically = | = Bind UI Automatically = | ||
Revision as of 10:13, 28 June 2012
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 the live demo of this application.
Installation
In this section, we'll tell you how to setup up ZK in a web application project.
Download
If you use maven, please add following dependencies:
Setup Class Path
Configure web.xml
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>