potatoes and carrots no bones: ZK Basic MVVM Pattern

Wednesday, December 5, 2012

ZK Basic MVVM Pattern

Introduction

From official site:
MVVM is an abbreviation of a design pattern named Model-View-ViewModel which originated from Microsoft. It is a specialization of Presentation Model introduced by Martin Fowler, a variant of the famous MVC pattern. This pattern has 3 roles: View, Model, and ViewModel. The View and Model plays the same roles as they do in MVC.

This post practice the MVVM pattern in ZK.

Note: As mentioned in the title, only very basic part in this article.

The ZUL Page

basic_MVVM.zul

Different with MVC, in MVVM, basically the View-Model will not 'control' the component directly.

<zk>
    <!-- Tested with ZK 6.0.2 -->

    <!-- The basic patterns:
            apply="org.zkoss.bind.BindComposer" the composer that handle MVVM
            @id: the 'Name' for the View-Model under the window
            @init: the java-class that will be instantiate as a View-Model

        The two lines below means use BasicViewModel as a View-Model,
        and give it a name "basicVM"
     -->
    <window apply="org.zkoss.bind.BindComposer"
        viewModel="@id('basicVM') @init('test.basic.mvvm.BasicViewModel')">

        Input your name then click button:

        <!-- @bind(basicVM.name):
                load the 'name' from basicVM
                Which means there should a getName method in basicVM (BasicViewModel)

                save value to basicVM by setName method in basicVM

            This line below means get value from basicVM's getName method and
            save value to basicVM by setName method
         -->
        <textbox value="@bind(basicVM.name)" />

        <!-- @command('sayHello'):
                Trigger the method of View-Model,
                the View-Model will be detected automatically,
                it will call basicVM's sayHello method here

            This line below means when button clicked,
            call basicVM's sayHello method
         -->
        <button label="Say hello" onClick="@command('sayHello')" />

        <div height="50px" width="100px"
            style="margin: 10px; background-color: #A6C3EA;">
            <!-- @load(basicVM.message):
                    load the 'message' from basicVM
                    Which means there should a getMessage method in basicVM (BasicViewModel)
    
                This line below means get value from basicVM's getMessage method
             -->
            <label value="@load(basicVM.message)" />
        </div>
    </window>
</zk>

The Composer

BasicViewModel.java

package test.basic.mvvm;

import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.NotifyChange;

/**
 * Tested with ZK 6.0.2
 * @author ben
 *
 */
public class BasicViewModel {
    String _msg = "The message label";
    String _name = "defaultName";

    public String getMessage () {
        return _msg;
    }

    public String getName () {
        return _name;
    }
    public void setName (String name) {
        _name = name;
    }
    /**
     * Annotations:
     * @Command denotes the function below is a command
     * @NotifyChange denotes the properties should be updated after this command
     * 
     * The annotations below means sayHello method is a command, and
     * the message property should be updated after sayHello command
     * is executed
     */
    @Command
    @NotifyChange("message")
    public void sayHello () {
        _msg = "Hello " + _name;
    }
}

The Result

initial page