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 (http://www.eclipse.org/, 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 (http://tomcat.apache.org/, 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 (http://www.zkoss.org/, 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 eclipse-jee-indigo-SR2-win32.zip

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 apache-tomcat-7.0.27-windows-x86.zip

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 zk-bin-6.0.1.zip

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


Finish

22 comments:

  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.

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

      Delete
    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

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

      http://www.zkoss.org/javadoc/latest/zk/org/zkoss/zkmax/zul/Chosenbox.html#getSelectedObjects()

      Delete
    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(value);
      this.label = label;
      }
      //get/set methods

      Delete
    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?

      Delete
    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 ChooseBoxContainer.java now how can i show only lable to user i have to use Rendered for that?

      Delete
    7. Thanks Ben i have done it with itemrendered attribute

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

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

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

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

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

      vm:
      public ListModel getModel () {
      ...
      }
      public void setSelectedObjects (Set selectedObjects) {
      ...
      }
      public Set getSelectedObjects () {
      ...
      }

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

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

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

      http://zkfiddle.org/sample/280tfnd/1-Chosenbox-bind-select-objects

      Delete
    15. Here sample with Exception..
      http://zkfiddle.org/sample/280tfnd/2-Chosenbox-bind-select-objects-with-Rendered

      Delete

    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:

      http://zkfiddle.org/sample/280tfnd/3-Chosenbox-bind-select-objects-with-Rendered

      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.

      Delete
    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

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

      http://screencast.com/t/4NVFkiiQ4Vl

      Delete
    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.

      Delete
  2. Hi Benbai

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

    ReplyDelete
    Replies
    1. Yes, please refer to sample at gist:

      https://gist.github.com/benbai123/7332482

      Delete