Ajax without JavaScript

Tutorial - Introducing ZK - Part 3

      

index.zul and EmployeeController.java functionality step by step

To make it easier to explain how data binding works, Figure 8 contains the complete source of index.zul. This article will now step through each relevant part and include, where necessary the relevant parts of the applied controller.

Figure 8: index.zul complete code

 

<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" root="./employeediv"?>

<?page title="Employee manager" contentType="text/html;charset=UTF-8"?>

<div id="employeediv"
  apply="org.zkoss.jtjexample.controller.EmployeeController"
  hflex="true">

  <vlayout>
    <listbox id="lstEmployee" multiple="true" rows="5"
      model="@{employeediv$composer.getEmployeeModel, load-after='btnAddEmployee.onClick, btnDeleteEmployee.onClick'}"
      selectedItem="@{employeediv$composer.currentEmployee}">
      <auxhead>
        <auxheader label="Employees" colspan="4" />
      </auxhead>
      <listhead>
        <listheader label="ID" hflex="2" />
        <listheader label="First Name" hflex="3" />
        <listheader label="Last Name" hflex="3" />
        <listheader label="Age" hflex="1" />
      </listhead>
      <listitem self="@{each='employee'}" value="@{employee}">
        <listcell label="@{employee.id}" />
        <listcell label="@{employee.firstName}" />
        <listcell label="@{employee.lastName}" />
        <listcell label="@{employee.age}" />
      </listitem>
    </listbox>

    <groupbox hflex="true">
      <caption label="Employee" />
      First Name:
      <textbox id="txtFirstName" cols="20" constraint="no empty"
        value="@{employeediv$composer.currentEmployee.firstName save-when='btnUpdateEmployee.onClick'}" />
      Last Name:
      <textbox id="txtLastName" cols="20"  constraint="no empty"
        value="@{employeediv$composer.currentEmployee.lastName save-when='btnUpdateEmployee.onClick'}" />
      Age:
      <intbox id="intAge" cols="3"  constraint="no empty, no zero"
        value="@{employeediv$composer.currentEmployee.age save-when='btnUpdateEmployee.onClick'}" />
      <button id="btnAddEmployee" label="Add" width="60px"
        height="24px" />
      <button id="btnUpdateEmployee" label="Update" width="60px"
        height="24px" />
      <button id="btnDeleteEmployee" label="Delete" width="60px"
        height="24px" />
    </groupbox>
  </vlayout>
</div>

 

Loading the data from the controller

It is time to start populating data. This is done by binding our controller functions for retrieving the models data with our listbox. The complete listbox zul is outlined in Figure 9. The controller source code in model="@{employeediv$composer.getEmployeeModel}" and selectedItem="@{employeediv$composer.currentEmployee}" have return type of ListModelList (ZK's data representation) and a bean of type Employee respectively. The code snippet for this is shown in Figure 10. The controllers method responsible for retrieving all employee data is named getEmployeeModel().This method can be accessed in the view by setting the listboxs model attribute to employeediv$composer.getEmployeeModel as outlined in Figure 11.

Figure 9: The listbox with databinding
<listbox id="lstEmployee" multiple="true" rows="5"
      model="@{employeediv$composer.getEmployeeModel, load-after='btnAddEmployee.onClick, btnDeleteEmployee.onClick'}"
      selectedItem="@{employeediv$composer.currentEmployee}">
      <auxhead>
        <auxheader label="Employees" colspan="4" />
      </auxhead>
      <listhead>
        <listheader label="ID" hflex="2" />
        <listheader label="First Name" hflex="3" />
        <listheader label="Last Name" hflex="3" />
        <listheader label="Age" hflex="1" />
      </listhead>
      <listitem self="@{each='employee'}" value="@{employee}">
        <listcell label="@{employee.id}" />
        <listcell label="@{employee.firstName}" />
        <listcell label="@{employee.lastName}" />
        <listcell label="@{employee.age}" />
      </listitem>
    </listbox>
Figure 10:  EmployeeController source snippet - getAllEmployees and Current Employee

 

private ListModelList _model = EmployeeService.INSTANCE.getModel();

public ListModel getEmployeeModel() {
    return _model;
  }

public Employee getCurrentEmployee() {
    return _currentEmployee;
  }

public void setCurrentEmployee(Employee e) {
    this._currentEmployee = e;
  }

 

Figure 11: Binding for getEmployeeModel

 

model="@{employeediv$composer.getEmployeeModel

 

The data binding expression can be broken down. Readers should note that the expression beginning with employeediv is the name of the root component, which also contains the apply attribute. It is then followed by a dollar sign and composer. ZK evaluates this as look for the component with id employeediv and retrieve its composer. A ‘.’ is then appended and followed by the function name that is to be accessed. This will assign the model to the result of the getEmployeeModel function in the controller.

Secondly, the line shown in Figure 12 uses the same mechanism to retrieve the reference for employeedivs composer. It is then followed by currentEmployee. Readers should also note that Figure 10 outlines a function and a bean named currentEmployee. This demonstrates that data binding the syntax to access beans and functions differ. This is outlined in Table 1. The attribute selectedItem is set to keep track of which bean is selected from the Listbox. When the selection is changed, ZK will automatically update the bean accordingly.

Figure 12: Databinding Selected Item
selectedItem="@{employeediv$composer.currentEmployee}"

Access identifier

Description

fullFunctionName

To access a function in the controller through data binding, it is necessary to use the full function name

beanName

When accessing a bean from the controller, it is only required to use the bean name, there is no need to include “get” or “set”. However, the bean in question must have both a getter and setter.

   

Pages

Timothy Clare
Timothy Clare

What do you think?

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

Comments

Latest opinions