ZK Basic MVC Pattern with SelectorComposer

Introduction

From official site:
A composer analogous to GenericForwardComposer. Instead of wiring variables and adding event listeners by naming convention, this composer do the work by annotation and selectors.
...
SelectorComposer, as one of the most popular skeletons, wires components, variables and event listeners automatically based on Java annotations you specify.

This post practice the MVC pattern with SelectorComposer in ZK.

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

Pre-request

Please refer to http://ben-bai.blogspot.tw/2012/10/zk-basic-mvc-pattern-with.html
for the basic concept of Composer.

The ZUL Page

basic_SelectorComposer.zul

The selector composer can wire components/listen events by jquery-selector like way, it is not required to assign id to components

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

    <!-- A window, apply a custom SelectorComposer
        the selector composer can wire components/listen events
        by jquery-selector like way, it is not required to assign
        id to components -->
    <window apply="test.basic.mvc.BasicSelectorComposer">
        Input your name then click button:
        <textbox id="tb" />
        <button label="Say Hello" />
        <div height="50px" width="100px"
            style="margin: 10px; background-color: #A6C3EA;">
            <label />
        </div>
    </window>
</zk>

The Composer

BasicSelectorComposer.java

package test.basic.mvc;

import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.event.InputEvent;
import org.zkoss.zk.ui.event.MouseEvent;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.Listen;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zul.Label;

/**
 * Tested with ZK 6.0.2 EE Eval
 *
 */
public class BasicSelectorComposer  extends SelectorComposer<Component> {

    private static final long serialVersionUID = -4527376919822049779L;

    private String _name;
    /**
     * Wire the Label with component type path "div > label"
     * this will wire the first label component under the first div component
     */
    @Wire("div > label")
    private Label lb;

    /**
     * Do some initiation task here
     */
    public void doAfterCompose (Component comp) throws Exception {
        super.doAfterCompose(comp);
        _name = "Default Name";
        lb.setValue("The message label");
    }

    /**
     * Listen to the onChange event of a component with id 'tb'
     * since wire/listen based on jquery-selector like way,
     * the function name can be changed
     */
    @Listen("onChange = #tb")
    public void doWhenTextboxChanged (InputEvent event) {
        _name = event.getValue();
        if (_name == null || _name.isEmpty()) {
            _name = "Default Name";
        }
    }

    /**
     * Listen to the onClick event of a button with label 'Say Hello'
     */
    @Listen("onClick = button[label='Say Hello']")
    public void afterButtonClicked (MouseEvent event) {
        // update label lb's value
        lb.setValue("Hello " + _name);
    }
}

The Result

initial page

after input name then click button

Reference

Envisage ZK 6: An Annotation Based Composer For MVC
http://books.zkoss.org/wiki/Small_Talks/2011/January/Envisage_ZK_6:_An_Annotation_Based_Composer_For_MVC

Download

Files at github:
basic_SelectorComposer.zul
https://github.com/benbai123/ZK_Practice/blob/master/Pattern/MVC/BasicMVC/WebContent/basic_SelectorComposer.zul

BasicSelectorComposer.java
https://github.com/benbai123/ZK_Practice/blob/master/Pattern/MVC/BasicMVC/src/test/basic/mvc/BasicSelectorComposer.java