ZK/Examples

ZK: Examples

This article is a collection of small examples and code snippets that illustrates the use of the ZK framework. ZK is an open source project that enables rich user interfaces for Web applications. '''This wiki page was started in year 2006, some of the contents may no longer apply. For latest updates and examples, please visit the following links'''
 * ZK Home / Documentation / ZK Live Demo

Thanks for your contributions.

Snippets from the demo
A good starting point for seeing zk-code in action is the ZK Live Demo. The examples are visualized and editable in the demo, so you should try the demo first.

Snippets within zul-pages
Grid: multi column sort

Listbox: multi-column sort and rendering of 'live' data Clear combobox value Treeitem with onRightClick-event Multi-language labels (internationalization)

'Important:' the following described files have to be in UTF-8-format or special characters like German umlauts will not be displayed correctly!

In the /WEB-INF-directory create the files according to your needs, f.i. one with the standard labels (this one is selected if no matching language files could be found), i3-labels.properties: app.title=Standard entry for the label if no other language-file matches app.title.setByJavaCode=Standard entry for the label set by java code if no other language-file matches app.question.delete={ Do you really want to delete this item? (Standard) If enclosed in curly brackets, you can also include multiline-messages... } app.question.confirm=Please confirm..., one for user with German locale, i3-labels_de.properties: app.title=Test für deutschen Label (German label) app.title.setByJavaCode=Set by java code: Test für deutschen Label (German label) app.question.delete={ Wirklich dieses Item löschen (Deutsch/German)? Durch die Eingabe innerhalb von geschwungenen Klammern sind auch mehrzeilige Meldungen möglich. } app.question.confirm=Bitte bestätigen (de)..., and finally one for users with German locale in Germany, i3-labels_de_DE.properties: app.title=Test für deutschen Label in Deutschland (German label in Germany) app.title.setByJavaCode=Set by java code: Test für deutschen Label in Deutschland (German label in Germany) app.question.delete={ Wirklich dieses Item löschen (Deutsch in Deutschland/German in Germany)? Durch die Eingabe innerhalb von geschwungenen Klammern sind auch mehrzeilige Meldungen möglich. } app.question.confirm=Bitte bestätigen (de_DE)... If you want to change also the messages in the messageboxes you have to create special files in the directory /WEB-INF/classes/metainfo/mesg/ (at least on Tomcat; else in the / /metainfo/mesg/). The name of the files depend on the message you want to overwrite/create a language dependent value. For a list of all available messages you can unzip the jar-files of zk with your favourite unpacker and look at the included metainfo/mesg/*.properties-files. F.i. to change the Messagebox.YES or <tt>Messagebox.NO</tt> values you have to create a file <tt>/WEB-INF/classes/metainfo/mesg/msgzul_de.properties</tt> (as the values are defined in the <tt>zul.jar</tt>) with the following content: 2220=Ja bitte 2221=Nein danke The values before the <tt>=</tt>, f.i. 2220 for <tt>Messagebox.YES</tt> can be seen in the <tt>metainfo/mesg/msgzul.properties</tt>-file if you unzip the <tt>zul.jar</tt>-file. Some examples for the messageboxes: 2200=OK 2201=Cancel 2220=Yes 2221=No 2230=Retry 2231=Abort 2232=Ignore
 * 1) -=OK
 * 1) -=CANCEL
 * 1) -=YES
 * 1) -=NO
 * 1) -=RETRY
 * 1) -=ABORT
 * 1) -=IGNORE

Next is the zul-file, where the first label is hardcoded, the second one set with an el-expression and the third is set with java-code. If you click on the button, a messagebox is shown depending on your locale. The <tt>taglib</tt>-tag is only needed if you want to use the el-expression. If you have many labels, you can also do the following within zscript (for shortening the getLabel-command):

Snippets within java-code
Refresh (redraw) a component Every component has a redraw-method, so to refresh its appearance try the following. Selecting in a listbox via label Set language-dependent label value

Other sources of examples

 * The Developer's guide of course ;-) and other resources on the documentation-page, including the zk-forums.
 * In the Small Talks on zkoss you can find many examples regarding zul, hibernate, spring framework and many others with source code included.
 * An article on developer.com shows an example of a student enrollment. Source code is available. It includes a tree, a listbox, tabs and shows f.i. the drag and drop functionality.
 * An article on IBM shows the usage of the included jgraph with zk.
 * Another article on IBM shows how to upload images to a database.