ZK - ZK Getting Started_Get ZK Up and Running With MVC - Documentation

8/10/2019 ZK - ZK Getting Started_Get ZK Up and Running With MVC - Documentation

1/13

/09/2012 ZK - ZK Getting Started/Get ZK Up and Running with MVC - Documentation

1oks.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVC

Products

ZK

ZKStudio

ZK Spring

ZKSpreadsheet

ZK Pivottable

ZK Calendar

ZK JSP

ZATS

Demos

ZK

ZK Studio

ZK SpreadSheet

ZK Pivottable

ZK Calendar

ZKWeb Mail

ZK Sandbox

Real World Apps

Downloads

ZK

ZK Studio

ZK Spring

ZK Spreadsheet

ZK Pivottable

ZKCalendar

ZK JSP

ZATS

Why ZK

Features

Top Reasons

Who's Using

Case Studies

Testimonials

Community

Forum

Blog

Contributors

Blogosphere

Small Talks

Request Features

Report Bugs

Documentation

ZK

ZK Studio

ZK Spring

ZK Spreadsheet

ZK Pivottable

ZK Calendar

ZK JSP

ZATS

Support
http://www.zkoss.org/documentation/zkpivottablehttp://www.zkoss.org/documentation/zkspringhttp://www.zkoss.org/documentationhttp://tracker.zkoss.org/secure/IssueNavigator.jspa?mode=hide&requestId=10002http://books.zkoss.org/wiki/Blogospherehttp://www.zkoss.org/whyzk/Testimonialshttp://www.zkoss.org/whyzk/featureshttp://www.zkoss.org/download/zkjsphttp://www.zkoss.org/download/zkpivottablehttp://www.zkoss.org/download/zkspringhttp://zcal.zkoss.org/http://www.zkoss.org/product/zkjsphttp://www.zkoss.org/product/zkpivottablehttp://www.zkoss.org/product/zkspringhttp://www.zkoss.org/support/http://www.zkoss.org/documentation/zatshttp://www.zkoss.org/documentation/zkjsphttp://www.zkoss.org/documentation/zkcalendarhttp://www.zkoss.org/documentation/zkpivottablehttp://www.zkoss.org/documentation/zkspreadsheethttp://www.zkoss.org/documentation/zkspringhttp://www.zkoss.org/documentation/zkstudiohttp://www.zkoss.org/documentationhttp://www.zkoss.org/documentationhttp://tracker.zkoss.org/secure/IssueNavigator.jspa?mode=hide&requestId=10001http://tracker.zkoss.org/secure/IssueNavigator.jspa?mode=hide&requestId=10002http://www.zkoss.org/documentation#Small_Talkshttp://books.zkoss.org/wiki/Blogospherehttp://books.zkoss.org/wiki/Hall_of_Famehttp://blog.zkoss.org/http://www.zkoss.org/forum/http://www.zkoss.org/community/http://www.zkoss.org/whyzk/Testimonialshttp://www.zkoss.org/whyzk/casestudieshttp://www.zkoss.org/whyzk/WhosUsinghttp://www.zkoss.org/whyzk/TopReasonshttp://www.zkoss.org/whyzk/featureshttp://www.zkoss.org/whyzk/http://www.zkoss.org/download/zatshttp://www.zkoss.org/download/zkjsphttp://www.zkoss.org/download/zkcalendarhttp://www.zkoss.org/download/zkpivottablehttp://www.zkoss.org/download/zkspreadsheethttp://www.zkoss.org/download/zkspringhttp://www.zkoss.org/download/zkstudiohttp://www.zkoss.org/download/zkhttp://www.zkoss.org/download/http://www.zkoss.org/demo/externalhttp://www.zkoss.org/zksandboxhttp://www.zkoss.org/zkmail/http://zcal.zkoss.org/http://www.zkoss.org/zkdemo/application/pivottablehttp://zssdemo.zkoss.org/http://www.zkoss.org/product/zkstudio/demohttp://www.zkoss.org/zkdemo/http://www.zkoss.org/demo/http://www.zkoss.org/product/zatshttp://www.zkoss.org/product/zkjsphttp://www.zkoss.org/product/zkcalendarhttp://www.zkoss.org/product/zkpivottablehttp://www.zkoss.org/product/zkspreadsheethttp://www.zkoss.org/product/zkspringhttp://www.zkoss.org/product/zkstudiohttp://www.zkoss.org/product/zkhttp://www.zkoss.org/product/


2/13



Support Options

Partners

About Us

Search..

Custom Search Wiki Search

ZK Getting Started/Get ZK Up and Running with MVC

From Documentation

Contents

1 Introduction

2 Tutorial Objective

3 Warm Up

3.1 Setup Eclipse

3.2 Install ZK in a Web Project

3.3 Run an Application

3.4 Import and Run Example Application

4 Declaring Domain Class

5 Building the User Interface

6 Handling UI Logic6.1 Declaring UI Controllers

6.2 Listening to User Action

6.3 Controlling UI Components

6.4 Displaying a Data Collection

6.5 Implementing the View Details Functionality

7 References

Introduction

This tutorial is intended for software developers who have experience in writing Java programs. You will learn basic concepts through building a modern web application with ZK. Th

a simple car catalog application. We will use the MVCapproach to build the application here. This approach is very intuitive and flexible and gives you full control of components. In

the MVVMapproach that is covered in another tutorial.[1]

You can download the complete source code with an Eclipse project zip file under Import and Run Example Application section.

Tutorial Objective

Our target application is a simple car catalog application. This application has two functions:

1. Search cars.

Enter a keyword in the input field, click Searchand search results will be displayed in the car list below.

2. View details.

Click an item from the car list, the area below the car list will show the selected car's details including name, price, description, and preview.
http://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVC#Import_and_Run_Example_Applicationhttp://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVC#cite_note-0http://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVC#Referenceshttp://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVC#Implementing_the_View_Details_Functionalityhttp://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVC#Displaying_a_Data_Collectionhttp://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVC#Controlling_UI_Componentshttp://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVC#Listening_to_User_Actionhttp://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVC#Declaring_UI_Controllershttp://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVC#Handling_UI_Logichttp://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVC#Building_the_User_Interfacehttp://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVC#Declaring_Domain_Classhttp://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVC#Import_and_Run_Example_Applicationhttp://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVC#Run_an_Applicationhttp://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVC#Install_ZK_in_a_Web_Projecthttp://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVC#Setup_Eclipsehttp://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVC#Warm_Uphttp://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVC#Tutorial_Objectivehttp://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVC#Introductionhttp://www.zkoss.org/support/abouthttp://www.zkoss.org/partner/http://www.zkoss.org/support/options


3/13



Warm Up

This section guides you through how to setup a project and use ZK in Eclipse. If you want to know how to build the application with ZK first, please skip it and start from Declaring D

how to prepare an environment to build a ZK web application in including setting the IDE, installing ZK, and running an application in a server.

Setup Eclipse

In this tutorial, Eclipse IDE 3.7 (indigo) for Java EE developer is used to demonstrate the building of the car catalog application. (Download Eclipse (http://www.eclipse.org/dow

extract the downloaded zip file to a folder and execute eclipse.exe to run Eclipse.)

In order to edit ZK UI pages in Eclipse, add "zul" (ZK UI page's file extension name) as a content type of XML format following these steps below:

1. Select Window \ Preferencesto open Preferences window

2. On the left, select General --> Content Types. On right, expand Textnode in "Content types" box and select XML

3. Click Addand type in the content type you wish to add which is *.zulin this case, then click OK

After this has been done, Eclipse will use XML editor to open your zul file.

Install ZK in a Web Project

Download ZK

Download the ZK CE first (http://www.zkoss.org/download/zk) (file name would look likezk-bin-[version].zip) and extract it to a folder.

Create a Project

To build a web application, first, create a "Dynamic Web Project" in Eclipse:

1. Select File \ New \ Dynamic Web Project

2. Enter warmupin Project name and keep every thing else default.
http://www.zkoss.org/download/zkhttp://books.zkoss.org/wiki/File:Tutorial-add-contenttype.pnghttp://www.eclipse.org/downloads/packages/release/indigo/sr2http://books.zkoss.org/wiki/File:Eclipse-javaee.pnghttp://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVC#Declaring_Domain_Classhttp://books.zkoss.org/wiki/File:Tutorial-searchexample.png


4/13



You can leave "Target runtime" as "none".

Notice that we set Dynamic web module versionto 3.0 because we want to use Servlet 3.0 to eliminate application configuration.

Install ZK JAR

To use ZK in your project, you have to copy ZK JAR files into your project's library folder.

Copy the JAR files from the following directory to WebContent\WEB-INF\lib:

{YOUR_ZK_UNZIP_FOLDER}\dist\lib

{YOUR_ZK_UNZIP_FOLDER}\dist\lib\ext

If you prefer to use an application server that supports older (< 3.0)Servlet specification or JDK 1.5, you need to add more configuration on web.xml. Please refer to ZK

Create a Simple Page

After installation, you can create a simple zul to verify if the installation has been successful or not.

In Eclipse,

1. Select File \ New \ File(or File \ New \ Other \ File ) to add a new file, hello.zul, under WebContent.

2. Click Source tab to modify source.

3. Copy and paste the following sample code into hello.zul and save.

hello.zul

Now, in Project Explorerview your project would look something like:

123

Hello World!
http://books.zkoss.org/wiki/File:Tutorial-xmleditor.pnghttp://books.zkoss.org/wiki/File:Icon_info.pnghttp://books.zkoss.org/wiki/File:Tutorial-newproject.png


5/13



If you cannot find Project Explorerview, select menu Window \ Show View \ Project Explorerto open it.

Run an Application

Before running a web application, we must create a server in Eclipse. Select Window \ Preferences to open Preferences window and select Server \ Runtime Environmentsfrom

environment.

Select Apache \ Tomcat v7.0 Serveras it supports Servlet 3.0 and tick Create a new local server, then click Next.

If you use JDK 1.5, you could choose Tomcat v6.0 but you will need more configuration on web.xml. Please refer to ZK Installation Guide in References .
http://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVC#Referenceshttp://books.zkoss.org/wiki/File:Icon_info.pnghttp://books.zkoss.org/wiki/File:Tutorial-preference-server.pnghttp://books.zkoss.org/wiki/File:Tutorial-project-structure.png


6/13



If you have installed Tomcat 7 previously, simply provide the directory path. If you haven't, proceed with the following steps:

1. Click Download and Installand choose a folder.

Notice that the installation path must not contain non-ASCII characters.

2. Accept the license agreement and wait.

Eclipse will show an error message before installation completes, please ignore this message.

Please wait and do not interrupt the installation before it completes to ensure that the installation has been done properly.

Eclipse will download and install Tomcat into the folder you have specified.

3. After the installation has been completed, click Finish

Now you should be able to see a new entry in Server rumtime e nvironments.
http://books.zkoss.org/wiki/File:Tutorial-installing-progress.pnghttp://books.zkoss.org/wiki/File:Tutorial-installing-unknown.pnghttp://books.zkoss.org/wiki/File:Tutorial-downloadinstall.pnghttp://books.zkoss.org/wiki/File:Tutorial-newserver.png


7/13



PA1SIDHHU.K Search
http://zkbooks.googlecode.com/files/tutorial-20120906.ziphttp://books.zkoss.org/wiki/File:Tutorial-hello.pnghttp://localhost:8080/hello.zulhttp://books.zkoss.org/wiki/File:Tutorial-choose-server.pnghttp://books.zkoss.org/wiki/File:Tutorial-runonserver.pnghttp://books.zkoss.org/wiki/File:Tutorial-server-complete.png


8/13



2. In Eclipse, select File \ Import \ General \ Existing Projects into Workspace , choose Select archive fileto import example application zip file as a project into your Eclip

3. Then follow the instructions from Run an Application to run it.

Declaring Domain Class

The following is the domain object that represents a car.

Please refer to References section to see the complete code. [3]

We then define a service class to perform the business logic (search cars) shown below:

In this example, we have defined a class - CarServeImplthat implements the above interface. For simplicity, it uses a static list object as the data model. You can rewrite it so that it

application. Implementation details are not in the scope of this article, please refer to References section. [4]

Building the User Interface

UI Design is a good start to building an application as it helps you define the scope of your application. ZK provides hundreds of readily-made UI components so developers can rap

combining and mix matching these components without having to create them from scratch.

In ZK, you can use ZK User Interface Markup Language (ZUML) [5], an XML-formatted language, to describe UI. By ZK's convention, the files to describe user interface with ZUM

one component can be represented as an XML element (tag) and you can configure each component's style, behavior, and function by setting XML element's attributes. [6]

In the case of this example application, first of all, we want to design a windowwith specified title and normal border as our application's frame.

Extracted from se arch.zul

As windowis the outermost component, it is called the root component. Windowis a commonly used container because it is a basic display element of a desktop-like application wh

All other components inside windoware called child componentsand should be put in window tag's body. We set window's title bar text with "title" attribute and make windowdis

attribute. For "width" attribute, use CSS like syntax such as "800px" or "60%".

Basically, our example application's user interface is divided into 3 areas within the window, they are (from top to bottom) search function, car list, and car details.

123

456789

publicclassCar { privateInteger id; privateString name;

privateString company; privateString preview; privateString description; privateInteger price; //omit getter and setter for brevity}

123456

789

101112131415

publicinterfaceCarService {

/** * Retrieve all cars in the catalog. * @return all cars */

publicList findAll();/**

* search cars according to keyword in name and company. * @param keyword for search * @return list of car that match the keyword */ publicList search(String keyword);}

123
http://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVC#cite_note-5http://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVC#cite_note-4http://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVC#cite_note-3http://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVC#cite_note-2http://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVC#Run_an_Application


9/13



Search Area:ZK components are like building blocks, you can combine and mix match existing components to construct your desired UI. To allow users to search, we need a text

keywords, and a button for triggering the search. We can use the following ZK components to fulfill this requirement:


hboxis a layout component that arranges its child components horizontally and you can probably guess by now that the hrepresents horizontal. As these child components have diff

"center" so they are aligned neatly along their center line. Here we also specify an "id" attribute for some components which allows you to control them by referencing their id. You caspecifying the path for the "image" attribute.

Car List Area.ZK provides several components to display a collection of data such as listbox,grid, and tree. In this example, we have chosen to use a listboxto display a list of c

Price. We set the "height" attribute so the number of rows visible is limited with respect to the height specified; you can drag scroll-bar to see the rest of rows. The "emptyMessage" a

listboxcontains no items. The listboxis a container component, and you can add listheadto define a column. The listitemis used to display data, and the number of listcellin one l

listheader. Here we use listcellwith static label to demonstrate structure of a listitem, and we'll talk about how to create listitemdynamically with respect to each data object in the


Car Details Area.Like the hbox, vboxis also a layout component which arranges its child component in vertical order. By combing these 2 layout components, we can present mo

attribute allows you to customize component's style with CSS syntax.


You can see the complete zul file through the link in the References section. [7]

Handling UI Logic

The next step after building the UI is to make it respond to users. The approach we introduce here is to control UI component directly by yourself. This approach can be classifie

design pattern. [8]This pattern divides an application into three parts.

The Modelconsists of application data and business rules. CarServiceand other classes used by it represent this part in our example application.

12345

Keyword:

123456789

101112

$

12345

6789
http://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVC#cite_note-7http://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVC#cite_note-6http://books.zkoss.org/wiki/File:Tutorial-ui-3areas.png


10/13


10/1oks.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVC

The Viewmeans user interface. The zul page which contains ZK components represents this part. A user's interaction with components triggers events to be sent to controllers.

The Controllerplays the role of a coordinator between View and Model. It receives events from View to update Model and retrieve data from Model to change View's presentation.

1. When a user interacts with a component (e.g. click a button) on a ZUL, the user's action triggers an event.

2. This event is sent to the controller and invokes corresponding event listener method.

3. The event listener method usually executes business logic or accesses data, then manipulate ZK components.

4. A component's state change in an event listener is reflected in its corresponding UI.

Declaring UI Controllers

In ZK, the controller is responsible for controlling ZK components and listening to events triggered by user interaction. We can create a such controller class by simply extending org.

After a controller is created, we associate it with its corresponding UI component. Associating a controller with a component is just specifying full-qualified class name for the target c

code shows how to associate a controller with a window.

Extracted from searchMvc.zul

See the complete zul in References.[9]

After associating the controller with the windowcomponent, the controller can listen to events sent from UI and retrieve components which allows us to implement application's functi

user enters a keyword, clicks the "Search" button to trigger the search.

Steps to implement a function:

1. Declare a method which listens to a component's event

2. Control UI components to implement presentation and business logic in the listener method

Listening to User Action

When we associate a controller with a component, every event triggered by this component (and its child components) is sent to the controller. If there is a method which we assigned

invoked. As a user clicks "Search" button to trigger the search function, we have to listen to "Search" button's "onClick" event. We declare a method, search(), and specify it to be

clicked with the following annotation:

@Listen("[EVENT_NAME] = #[COMPONENT_ID]").

Such method serves as an event listener method.

The final code looks like:

1234567

packagetutorial;// omit import for brevitypublicclassSearchController extendsSelectorComposer {}

1234

1234

publicclassSearchController extendsSelectorComposer {

@Listen("onClick = #searchButton") publicvoidsearch(){
http://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVC#cite_note-8http://books.zkoss.org/wiki/File:Tutorial-mvc.png


11/13



Line 3: "searchButton"is the button component's id, and you can find it in previous zul. There are other syntax which can be specified in @Listen's parameter [10]to describ

Line 4: It must be a public method.

Controlling UI Components

After establishing the relationship between an event and an event listener method, we can start to implement method's logic with components. But firstly we should retrieve the UI com

controller's member variables.

Steps to retrieve components:

1. Declare a variable with target component type (e.g. Listbox, Label...)

2. Name the variable as component's ID.

Matching ID is the default rule to match a component for @Wire, and please refer to ZK Developer's Reference [11]to know other ways.

3. Annotate the variable with @Wire.

Then ZK will "wire" a corresponding ZK component object to the variable we declared. After this has been done, we can then control and manipulate UI by accessing those annotate

Line 5-6: In searchMvc.zul, there is a listboxwhose id is carListbox. ZK will make the variable carListbox reference to the listboxobject after components are created.

The search method performs a simple logic: call car service class to search with keyword and set result list to listbox. For a variable which references to a component, we can get co

getter (getValue()) or change a component's status like making a labelinvisible with setter (setVisible(false)) to achieve some dynamic UI effect. Hence, we can easily get w

keywordBox.getValue() and change data item of listboxby carListbox.setModel() . The model of a component is the data the component holds and we can change the m

screen.

Line 8: Notice that setModel() only accepts a ListModelobject, so we can use org.zkoss.zul.ListModelList to wrap search result list. There are other ListModelobje

refer to References section. [12]

Displaying a Data Collection

We have successfully made clicking "Search" button to invoke its corresponding event listener, but we would still find that content of listboxdoesn't show the search result correctly.

to render data model on the listbox. Now, we will use a special tag, [13], to control the rendering of each item. ZK will render template tag's content iteratively for each

Steps to use :

1. Use to enclose components that we want to create iteratively.

2. Set template's "name" attribute to "model". [14]

3. Use implicit variable, each, to assign domain object's properties to component's attributes.

Extracted from searchMvc.zul

567

}

}

12345

6789


@Wire privateTextbox keywordBox; @Wire

privateListbox carListbox;//other codes...

}

1234

56789

10

publicclassSearchController extendsSelectorComposer { //omit codes to get components

@Listen("onClick = #searchButton")

publicvoidsearch(){ String keyword = keywordBox.getValue(); List result = carService.search(keyword); carListbox.setModel(newListModelList(result)); }}

123456789

10
http://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVC#cite_note-13http://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVC#cite_note-12http://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVC#cite_note-11http://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVC#cite_note-10http://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVC#cite_note-9


12/13



Line 7: The template tag should be put inside the listbox.

Line 8: The in previous chapter's zul is for static data, we should replace it with current code.

Line 9: The "each" is a variable that references to a domain object in the model list which is Carin our example application. We can use it to access domain object's property w

Implementing the View Details Functionality

Previous sections describe the basic steps to implement a function with ZK. Let's recap them by implementing "view details" function. We declare a method to listen to "onSelect" eve

@Wireto get components including previewImage, nameLabel, priceLabel, and descriptionLabel and assign value to them with setter.

For complete source code, please refer to References section [15]

References

1. ZK Getting Started/Get ZK Up and Running with MVVM2. ZK Installation Guide \ Create and Run Your First ZK Application Manually

3. Car.java (http://code.google.com/p/zkbooks/source/browse/trunk/tutorial/src/tutorial/Car.java)

4. CarService.java (http://code.google.com/p/zkbooks/source/browse/trunk/tutorial/src/tutorial/CarService.java) CarServiceImpl.java

(http://code.google.com/p/zkbooks/source/browse/trunk/tutorial/src/tutorial/CarServiceImpl.java)

5. ZUML Reference

6. ZK Component Reference

7. search.zul (http://code.google.com/p/zkbooks/source/browse/trunk/tutorial/WebContent/search.zul)

8. MVC in Developer's Reference

9. searchMvc.zul (http://code.google.com/p/zkbooks/source/browse/trunk/tutorial/WebContent/searchMvc.zul)

10. selector syntax (http://www.zkoss.org/javadoc/latest/zk/org/zkoss/zk/ui/select/SelectorComposer.html)

11. Wire Components in Developer's Reference

12. List Model in Developer's Reference

13. ZK Developer's Reference/MVC/View/Template

14. ZK Developer's Reference/MVC/View/Template/Listbox Template

15. SearchController.java (http://code.google.com/p/zkbooks/source/browse/trunk/tutorial/src/tutorial/SearchController.java)

Retrieved from "http://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVC"

Page |

Discussion |

View source |

History

TweetTweet 258

Follow us via :

ZK RSS

StumbleUpon

ZK LinkedIn Group

11121314

$

123456789

10111213141516

17181920212223242526


@Wire privateListbox carListbox; @Wire privateLabel nameLabel; @Wire privateLabel companyLabel; @Wire privateLabel priceLabel; @Wire privateLabel descriptionLabel; @Wire privateImage previewImage;

@Listen("onSelect = #carListbox")

publicvoidshowDetail(){ Car selected = carListbox.getSelectedItem().getValue(); previewImage.setSrc(selected.getPreview()); nameLabel.setValue(selected.getName()); companyLabel.setValue(selected.getCompany()); priceLabel.setValue(selected.getPrice().toString()); descriptionLabel.setValue(selected.getDescription()); } //omit other codes for brevity}

Like Send 1,838 people like this.
http://www.linkedin.com/groups?home=&gid=995137http://www.stumbleupon.com/submit?url=http%3A%2F%2Fwww.zkoss.org&title=ZKhttp://feeds.feedburner.com/zkosshttp://books.zkoss.org/index.php?title=ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVC&action=historyhttp://books.zkoss.org/index.php?title=ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVC&action=edithttp://books.zkoss.org/index.php?title=Talk:ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVC&action=edit&redlink=1http://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVChttp://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVChttp://code.google.com/p/zkbooks/source/browse/trunk/tutorial/src/tutorial/SearchController.javahttp://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVC#cite_ref-14http://books.zkoss.org/wiki/ZK_Developer%27s_Reference/MVC/View/Template/Listbox_Templatehttp://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVC#cite_ref-13http://books.zkoss.org/wiki/ZK_Developer%27s_Reference/MVC/View/Templatehttp://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVC#cite_ref-12http://books.zkoss.org/wiki/ZK_Developer%27s_Reference/MVC/Model/List_Modelhttp://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVC#cite_ref-11http://books.zkoss.org/wiki/ZK_Developer%27s_Reference/MVC/Controller/Wire_Componentshttp://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVC#cite_ref-10http://www.zkoss.org/javadoc/latest/zk/org/zkoss/zk/ui/select/SelectorComposer.htmlhttp://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVC#cite_ref-9http://code.google.com/p/zkbooks/source/browse/trunk/tutorial/WebContent/searchMvc.zulhttp://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVC#cite_ref-8http://books.zkoss.org/wiki/ZK_Developer%27s_Reference/MVChttp://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVC#cite_ref-7http://code.google.com/p/zkbooks/source/browse/trunk/tutorial/WebContent/search.zulhttp://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVC#cite_ref-6http://books.zkoss.org/wiki/ZK_Component_Referencehttp://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVC#cite_ref-5http://books.zkoss.org/wiki/ZUML_Referencehttp://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVC#cite_ref-4http://code.google.com/p/zkbooks/source/browse/trunk/tutorial/src/tutorial/CarServiceImpl.javahttp://code.google.com/p/zkbooks/source/browse/trunk/tutorial/src/tutorial/CarService.javahttp://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVC#cite_ref-3http://code.google.com/p/zkbooks/source/browse/trunk/tutorial/src/tutorial/Car.javahttp://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVC#cite_ref-2http://books.zkoss.org/wiki/ZK_Installation_Guide/Quick_Start/Create_and_Run_Your_First_ZK_Application_Manuallyhttp://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVC#cite_ref-1http://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVVMhttp://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVC#cite_ref-0http://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVC#cite_note-14http://twitter.com/search?q=www.zkoss.orghttps://twitter.com/intent/tweet?original_referer=http%3A%2F%2Fbooks.zkoss.org%2Fwiki%2FZK_Getting_Started%2FGet_ZK_Up_and_Running_with_MVC&source=tweetbutton&text=ZK%20-%20ZK%20Getting%20Started%2FGet%20ZK%20Up%20and%20Running%20with%20MVC%20-%20Documentation&url=www.zkoss.org&via=zkoss


13/13


twitter @zkoss

facebook fan page

Log in / create account

What links here |

Related changes |

Special pages

| Recent changes

| Help

This page was last modified on 21 August 2012, at 03:59.

This page has been accessed 3,256 times.

Disclaimers | Modified by ZK

Partners :

Partners
http://www.zkoss.org/partner/http://www.zkoss.org/http://books.zkoss.org/wiki/Documentation:General_disclaimerhttp://books.zkoss.org/wiki/Help:Contentshttp://books.zkoss.org/wiki/Special:RecentChangeshttp://books.zkoss.org/wiki/Special:SpecialPageshttp://books.zkoss.org/wiki/Special:RecentChangesLinked/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVChttp://books.zkoss.org/wiki/Special:WhatLinksHere/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVChttp://books.zkoss.org/index.php?title=Special:UserLogin&returnto=ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVChttp://www.facebook.com/zk.frameworkhttp://twitter.com/zkoss

Documents

ZK - ZK Getting Started_Get ZK Up and Running With MVC - Documentation