Wednesday, June 6, 2012

ZK Quick Start

This post is the Quick Start guide of ZK, talking about how to getting it started quickly, NO ZK Studio, NO Maven, just the simple clear traditional way.

1. Download Eclipse:
1.1: Go to Eclipse official site (, for 2012-06-06)
1.2: Click Downloads

1.3: Click Eclipse IDE for Java EE Developers (I choose 32 Bit version)

1.4: Click download button to download it.

2. Download Tomcat:
2.1: Go to Tomcat official site (, for 2012-06-06)
2.2: Click 'Tomcat 7.0'

2.3: Find the 'Binary Distributions' and download it

3. Download ZK
3.1: Go to ZK official site (, for 2012-06-06)
3.2: Click Downloads -> ZK

3.3: Click 'Download ZK CE' to download it

4. Start Eclipse:
4.1: Extract the downloaded file

4.2: Create a workspace folder for Eclipse

4.3: Double-click on eclipse/eclipse.exe to open it, choose the workspace then click 'OK'

4.4: Click 'Workbench' to enter workbench

5. Add Tomcat Server in Eclipse
5.1: Extract the downloaded file

5.2: Right-click in Eclipse's Servers view -> New -> Server

5.3: Select Apache/Tomcat v7.0 Server, click next

5.4: Choose server folder, click finish

6. Create Test Project
6.1: Click File -> New -> Dynamic Web Project

6.2: Enter Project name then click Finish

6.3: Extract the downloaded file

6.4: Copy all jar files under zk-bin-6.0.1\dist\lib to WebContent/WEB-INF/lib
6.5: Copy zk-bin-6.0.1\dist\WEB-INF\web.xml to WebContent/WEB-INF/

6.6: Right-click on WebContent -> New -> File, create a file 'index.zul' under WebContent

6.7: Edit index.zul as below:

7. Run Test Project
7.1: Right-click on server, click Add and Remove

7.2: Select test project, click Add then click Finish

7.3: Click 'Run' button

7.4: Open browser then go to the test project

7.6: Click the test button, a label will appear



  1. On Question regarding ZK Chosenbox .Can we use SelectOption class with Chosenbox?Like we can do for ZK combobox where we can show some label to user but if user select some label in backend Java code we can get vale which can be use for DB.

    1. Currently Chosenbox only guess everything are String, but I believe it allows any java bean in ZK 6.5.2.

    2. Do you know how can we can do it i am using ZK6.5.2 Still did not get any Single Document where someone explain how we can use SelectOption kind of thing with Chosenbox

    3. I'm not sure what does SelectOption mean, is it something like getSelectedObjects?

    4. As a previously told you i want to show a label to user but in java code i want to use id for selected item thats why i want to use SelectOption type class..
      public class SelectOption implements Serializable,
      Comparable> {

      private static final long serialVersionUID = 1L;

      private T value;

      private String label;

      private String description;

      public SelectOption() {

      public SelectOption(T value) {
      this.value = value;

      public SelectOption(T value, String label) {
      this.label = label;
      //get/set methods

    5. In Chosenbox, you can pass any object into model and then it will use Object.toString() as the label to display, after you select some labels, you can get the selected objects via Chosenbox.getSelectedObjects(), is this fits your need? If not, what is your expected action?

    6. I have created a list
      List mytype;/get,Set Method
      and ChooseBoxContainer class have two variables label,value now in ZUl page
      Now model have a List of classes of type now how can i show only lable to user i have to use Rendered for that?

    7. Thanks Ben i have done it with itemrendered attribute

    8. Only One issue How can i bind these selecteditem with Java class as i did not get any attribute like selecteditem or selecteditems?

    9. You can get selected items by
      public LinkedHashSet<Object> getSelectedObjects ()
      in Chosenbox

    10. But i am using MVVM Architecture i did not Wire the Component in this case how can i get selected items?

    11. You can bind it in vm since Chosenbox has proper getter/setter

      <chosenbox model="@load(vm.model)"
      selectedObjects="@bind(vm.selectedObjects)" />

      public ListModel getModel () {
      public void setSelectedObjects (Set selectedObjects) {
      public Set getSelectedObjects () {

    12. Thanks Ben but in Documentation these thing not added If possible please add these thing in Zk Official Documentation.

    13. i am getting this exception
      org.zkoss.zel.ELException: Error writing 'selectedObjects' on type org.zkoss.zkmax.zul.Chosenbox
      >> at org.zkoss.zkmax.zul.Chosenbox.setSelectedObjects(

    14. Maybe you can try the working sample at zkfiddle:

    15. Here sample with Exception..


    16. Since you put Container in ListModel, you need to put Container in selectedObjects, too. Below is a working sample works with ZK 6.5.2 or later:

      By the way, currently chosenbox not works with itemRenderer well, what we can do now is overriding toString and equals (and even hashCode) properly in custom data class.

    17. FYI ...Sorry ben your fiddle example is throwing same exception
      Error writing 'selectedObjects' on type org.zkoss.zkmax.zul.Chosenbox on Page rendered and click on the button

    18. Hmm...but it works well for me with ZK EE eval 6.5.2, please refer to the online demo.

    19. I was doing three mistakes..
      1-I was testing code in fiddle while you mentioed it should work only in zk6.5.2
      2-I am not checking for Null inside getSelectdObjet.
      3-Using Item rendered i removed item rendered.

  2. Hi Benbai

    After selecting some items in the choosen box, i want to give onClick event of each item. is that possible.

    1. Yes, please refer to sample at gist: