About Lance Lu

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.

Related Whitepaper:

Functional Programming in Java: Harnessing the Power of Java 8 Lambda Expressions

Get ready to program in a whole new way!

Functional Programming in Java will help you quickly get on top of the new, essential Java 8 language features and the functional style that will change and improve your code. This short, targeted book will help you make the paradigm shift from the old imperative way to a less error-prone, more elegant, and concise coding style that’s also a breeze to parallelize. You’ll explore the syntax and semantics of lambda expressions, method and constructor references, and functional interfaces. You’ll design and write applications better using the new standards in Java 8 and the JDK.

Get it Now!  

Leave a Reply


9 × three =



Java Code Geeks and all content copyright © 2010-2014, Exelixis Media Ltd | Terms of Use | Privacy Policy
All trademarks and registered trademarks appearing on Java Code Geeks are the property of their respective owners.
Java is a trademark or registered trademark of Oracle Corporation in the United States and other countries.
Java Code Geeks is not connected to Oracle Corporation and is not sponsored by Oracle Corporation.
Do you want to know how to develop your skillset and become a ...
Java Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you two of our best selling eBooks for FREE!

Get ready to Rock!
You can download the complementary eBooks using the links below:
Close