About Lance Lu

ZK in Action: MVVM – Update View Programmatically

In the previous 2 posts we’ve used ZK’s MVVM functionalities to:

We’ve seen when a method is decorated with the annotation @NotifyChange( ) , upon its execution completes, the Binder would be informed of the VM property’s changes so that Binder can update the corresponding UI accordingly.
In this post, whilst we implement the functionality of item deletion in our inventory, we’ll see how we can update UI components programmatically at runtime.

Objective

Build a delete function to our simple inventory CRUD feature.

ZK Feature in Action

  • MVVM : BindUtils

Implement Deletion with MVVM BindUtilsWe will:

  • Add markup for the delete button and assign it an onClick event handler
  • Implement command method ‘deleteItem()‘ in VM

The Markup

<window apply='org.zkoss.bind.BindComposer' 
 viewModel='@id('vm') @init('...InventoryVM')'>
 <toolbar  width='100%'>
  <toolbarbutton label='Add' onClick='@command('createNewItem')' />
  <toolbarbutton label='Delete' onClick='@command('deleteItem')' disabled='@load(empty vm.selected)'/>
 </toolbar>
  • line 5, assign a command method ‘deleteItem‘ to the delete button’s onClick handler
  • line 5, ‘disabled=’@(empty vm.selected)’‘ ensures that the delete button is functional only if an entry in the table has been selected

The ViewModel Class

public class InventoryVM {

    private Item selected;
    private List<Item> items;
    ...

    @Command
    public void deleteItem() throws Exception{
        if (selected != null){
            String str = 'The item with name \''
                         +selected.getName()
                         +'\' and model \''
                         +selected.getModel()
                         +'\' will be deleted.';

        Messagebox.show(str,'Confirm Deletion', Messagebox.OK|Messagebox.CANCEL, Messagebox.QUESTION, 
            new EventListener<event>(){
                @Override
                public void onEvent(Event event) throws Exception {
                    if (event.getName().equals('onOK')){
                        DataService.getInstance().deleteItem(selected);
                        items = getItems();
                        BindUtils.postNotifyChange(null, null, InventoryVM.this, 'items');
                    }); 
                } ...
    }
    ...
}
  • line 7, we decorate our deleteItem method with @Command so it can be wired as the onClick event handler in our added markup:
    <toolbarbutton label=’Delete’ onClick=’@command(‘deleteItem’)’ />;
  • line 9, we go ahead with the deletion process only if an item is selected.
  • line 16, we show a Messagebox which prompts the user to confirm the deletion of the selected item.
  • line 20, if user clicks ‘OK’, our program proceeds to delete the selected item.
  • line 23, we call BindUtils.postNotifyChange(String queueName, String queueScope, Object bean, String property) to update our inventory table. By giving the parameter queueScope a null value, the default desktop queue scope is used. The third and forth argument are given as such since we want to notify the Binder that property ‘items’ in our InventoryVM instance has changed. The Binder would then update the UI (remove the item entry in the inventory table).

Wrap Up

The @NotifyChange annotation lets us update the UI through ZK MVVM’s Binder to reflect changes made to the ViewModel properties. The notification is fired when the annotated method finishes executing. In our implementation, we attached an anonymous event listener class to a Messagebox. In this case, after deleteItem is executed, the annotation @NotifyChange(‘items’) would falsely alert the Binder before the event handling is completed. A programmatic way to reflect state changes in ViewModel to the UI resolves this particular problem conveniently.

Next up, editing the entries with MVVM.

Reference: ZK in Action [2] : MVVM – Update View Programmatically 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


4 + seven =



Java Code Geeks and all content copyright © 2010-2014, Exelixis Media Ltd | Terms of Use
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.

Sign up for our Newsletter

15,153 insiders are already enjoying weekly updates and complimentary whitepapers! Join them now to gain exclusive access to the latest news in the Java world, as well as insights about Android, Scala, Groovy and other related technologies.

As an extra bonus, by joining you will get our brand new e-books, published by Java Code Geeks and their JCG partners for your reading pleasure! Enter your info and stay on top of things,

  • Fresh trends
  • Cases and examples
  • Research and insights
  • Two complimentary e-books