Get ZK Up and Running with MVC"
From Documentation
Line 5: | Line 5: | ||
In this tutorial, we will teach you how to build a web application with ZK. | 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 | + | The target application we are going to build is a bookstore catalog application. |
[[File:tutorial-searchexample.png]] | [[File:tutorial-searchexample.png]] | ||
+ | |||
+ | You can take look at the [http://www.zkoss.org live demo of this application]. | ||
= Installation = | = Installation = | ||
Line 69: | Line 71: | ||
== Stuff a bunch of data == | == Stuff a bunch of data == | ||
== Handling User Action == | == Handling User Action == | ||
+ | |||
+ | |||
+ | |||
+ | = Bind UI Automatically = | ||
+ | == Binding data == | ||
+ | == Handling UI commands == | ||
+ | |||
+ | |||
= UI Control Patterns= | = UI Control Patterns= | ||
== MVC v.s MVVM== | == MVC v.s MVVM== | ||
== When to use & Restriction == | == When to use & Restriction == | ||
− | + | ||
− | + | ||
− | + | ||
+ | |||
= Test ZK Application = | = Test ZK Application = | ||
+ | |||
+ | |||
+ | |||
= Deploy and Run = | = Deploy and Run = |
Revision as of 10:03, 28 June 2012
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>