ZK in Action: MVVM – Load and Render Data

A previous post had briefly introduced the RIA framework ZK and how its CSS Selector inspired controller mechanism alleviates some of the burdens that comes with UI changes by making the task of referencing UI components in the controller class a relatively flexible affair.

We then explored how the MVVM patterns in ZK allows a single ViewModel to serve different views in the last post.

This post marks the beginning of a series of posts that will go through steps in building a simple application from the ground up using ZK.

Objective

For now, we’ll build a simple inventory management feature which is limited only to the loading and rendering of a data collection from a database into a table.

ZK Features in Action

• MVVM : Load
• Template Tag

Load and Render Data into a Table with MVVM

Assume there’s a collection of objects named “Item” and there’s a DataService class which takes care of caching and communication with the database (MongoDB and Morphia).

@Entity("items")
public class Item {
 @Id
 private ObjectId id;
 
 private String name;
 private String model;
 private int qty;
 private float price;
 private Date datemod;
 
        // getters & setters

To render data into a table as shown below in ZK, we’ll need to implement these parts:

• A POJO that will serve as our ViewModel
• A ZK markup file as our presentation

The ViewModel Class

public class InventoryVM {

    private List<item> items;
 
    public List<item> getItems() throws Exception{
        items = DataService.getInstance().getAllItems();
        return items;
        }
    }

• Line 3, the list of items needs to be declared as a property of the VM class
• Line 5, we need to provide a getter method so the Binder can retrieve the list of items. To recap, the Binder holds reference to the UI components and the ViewModel so it can keep data on both sides in sync as well as call command methods in ViewModel as events are triggered in View.

The Markup

<window apply="org.zkoss.bind.BindComposer" 
 viewModel="@id('vm') @init('lab.sphota.zk.ctrl.InventoryVM')">
 <listbox model="@load(vm.items) ">
  <listhead>
   <listheader label="Name" />
   <listheader label="Model" />
   <listheader label="Quantity" />
   <listheader label="Unit Price"/>
   <listheader label="Last Modified" />
  </listhead>
  <template name="model" var="item" >
   <listitem>
    <listcell>
     <textbox value="@load(item.name)" inplace="true" />
    </listcell>
    <listcell>
     <textbox value="@load(item.model)" inplace="true" />
    </listcell>
    <listcell>
     <spinner value="@load(item.qty)"  inplace="true" />
    </listcell>
    <listcell>
     <decimalbox value="@load(item.price)" inplace="true" 
     format="#,###.00"/>
    </listcell>
    <listcell label="@load(item.datemod)" />
   </listitem>
  </template>
 </listbox>
</window>

• Line 1, we apply ZK’s default implementation of its BindComposer. It is responsible for instantiating our VM instance as well as the Binder instance.
• Line 2, we supply the full class name of the ViewModel we wish to instantiate and give it an ID (in this case, ‘vm’) for future reference
• Line 3, we assign a data model, which we made as a property of our ViewModel instance, to the Listbox.
• Line 11, we instruct the Template component to iterate through the given collection. We also declare a variable called “item” which will iteratively take on each Item object inside our collection. Alternatively, we can omit the variable declaration and use the keyword “each” to reference the data object (Item).
• Line 14, 17, 20, 23, 26, we retrieve the Item properties which we’d like to be displayed in the Listbox.
• Here we use input elements (Textbox, Spinner, Decimalbox) inside the Listcells in anticipation of our future implementation of an editable table. The attribute “inplace=true” will render these input elements as regular labels while they’re not selected.

Wrap Up

ZK Binder is central to the workings of ZK MVVM. It holds references to both the UI components and the ViewModel. The ViewModel class is just a POJO where we declare and assign our data models. It exposes getter methods so Binder can retrieve and bind data to their respective annotated UI components. The template tag then allows us to iteratively render UI components with respect to the data model. In our case, a row of 5 Listcells with each cell holding a bean property is rendered iteratively through the bean collection using the template tag.

In the next post, we’ll implement an “Add” feature so we can save new entries to our existing inventory using MVVM’s form binding.

Reference ZK Developer Reference

Reference: ZK in Action [0] : MVVM – Load and Render Data from our JCG partner Lance Lu at the Tech Dojo blog.