Ajax without JavaScript

Tutorial - Introducing ZK - Part 4

   Displaying The Data

To display the data within a listbox a template is needed. By creating a template, such as the one outlined in Figure 13, the listbox can effectively represent the data. The data is bounded to and rendered within the listbox. This is achieved by utilizing the self attribute of the listitem to assign variables which would each represent an Employee. The data binder will then loop through each employee and output the template code shown in Figure 13 below. Each listcell will therefore be bounded to the respective bean and its mutators. A similar methodology is applied to the components in the group box which represent the selected item. Each one of them is bounded to specific data of the currentEmployee bean using techniques discussed throughout this chapter. Therefore, as the currentEmployee changes when selecting on a different employee in the listbox, the relevant textboxes are also updated. These techniques apply throughout ZK. The relevant extract is shown in Figure 14. Having loaded and displayed the data, it is time to start manipulating it.

Figure 13: Listbox display template


    <listheader label="ID" hflex="2" />
    <listheader label="First Name" hflex="3" />
    <listheader label="Last Name" hflex="3" />
    <listheader label="Age" hflex="1" />
  <listitem self="@{each='employee'}" value="@{employee}">
  <listcell label="@{employee.id}" />
  <listcell label="@{employee.firstName}" />
  <listcell label="@{employee.lastName}" />
  <listcell label="@{employee.age}" />
Figure 14: Extract showing currentEmployeeInformation


First Name:
    <textbox id="txtFirstName" cols="25"
      value="@{employeediv$composer.currentEmployee.firstName}" />
    Last Name:
    <textbox id="txtLastName" cols="25"
      value="@{employeediv$composer.currentEmployee.lastName}" />
    <intbox id="intAge" cols="1"
      value="@{employeediv$composer.currentEmployee.age}" />

CRUD operations on the UI

So far the data has been loaded and displayed, but the whole point of web applications is to manipulate data. Hence add, create, update and delete methods need to be created. This is achieved via 3 buttons displayed in Figure 15. These buttons are tied to functions in the controller which capture the events. The functions are outlined in Figure 16. Figure 16 highlights the business logic behind the crud operations, most of these are self explanatory and are of basic Java calls. One item readers may notice is that each component is referenced directly from the code. To enable this function, a developer only needs to specify the component type and its id in the controller and ZK will do the rest through automatic wiring. For example, Figure 17 shows that declarations are enough to make access to components possible in Figure 16.

The last talking point is how ZK would know to update the listbox model after updating, adding or deleting an item. This is simply a matter of assigning load-after in the model attribute on the listbox to the relevant button events which update the model. When one of these events are fired the model will be reloaded. Figure 18 demonstrates the code necessary for this. Breaking it down, it is as simple as specifying the component id followed by a . and the event name.

Figure 15: CRUD buttons


<button id="btnAddEmployee" label="Add" width="36px"
      height="24px" />
    <button id="btnUpdateEmployee" label="Update" width="46px"
      height="24px" />
    <button id="btnDeleteEmployee" label="Delete" width="46px"
      height="24px" />
Figure 16: Controller Click Events


// click events
  public void onClick$btnAddEmployee(ForwardEvent fe) {

    String firstName = txtFirstName.getText();
    String lastName = txtLastName.getText();
    int iAge = Integer.parseInt(intAge.getText());

    Employee employee = new Employee(firstName, lastName, iAge);

    if (!_model.add(employee)) {
      reportError(Messages.getString("EmployeeController.0"), employee);


  public void onClick$btnUpdateEmployee(ForwardEvent fe) {
    if (lstEmployee.getSelectedItem() != null) {

      Employee employee = (Employee) (lstEmployee.getSelectedItem()
    } else {

  public void onClick$btnDeleteEmployee(ForwardEvent fe) {

    if (lstEmployee.getSelectedItem() != null) {
      Employee employee = (Employee) (lstEmployee.getSelectedItem()

      if (!_model.remove(employee)) {
        reportError(Messages.getString("EmployeeController.3"), employee);

    } else {

Figure 17: Component declarations


 //text boxes
  Textbox txtFirstName;
  Textbox txtLastName;
  //int boxes
  Intbox intAge;
Figure 18: Load-after
model="@{employeediv$composer.getEmployeeModel, load-after='btnAddEmployee.onClick, btnDeleteEmployee.onClick'}"


As demonstrated, implementing a representation of Java data which is editable is very easy in ZK. Using 2 ZK specific files (index.zul and EmployeeController.java) it is possible to leverage the power of ZK to create a general CRUD application which can operate on a Java based datastore. ZK's advantage is due to it's server-centric nature which provides easy access to all the server's resources, thus eliminating the need for any glue code.

Going further

The source code for this application is available on Github. If you would like to read more about ZK and other features, such as its transparent server push mechanism, then the documentation is a great place to start.


This article originally appeared in JTJ - Java Web Framework - check out that issue here

Timothy Clare
Timothy Clare

What do you think?

JAX Magazine - 2014 - 06 Exclucively for iPad users JAX Magazine on Android


Latest opinions