Get ZK Up and Running with MVC"
| Line 69: | Line 69: | ||
= Manipulate UI = | = 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== | == UI Controller== | ||
| Line 74: | Line 77: | ||
== Stuff a bunch of data == | == Stuff a bunch of data == | ||
| + | |||
| + | We hope users can see a list of books when the page shows up. | ||
| + | |||
| + | |||
== Handling User Action == | == Handling User Action == | ||
| + | |||
| + | When users select a listitem, we should show them the detail. | ||
= Bind UI Automatically = | = Bind UI Automatically = | ||
Revision as of 00:38, 29 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>
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.