Wednesday, October 31, 2012

ZK Basic MVC Pattern with SelectorComposer


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.


Please refer to
for the basic concept of Composer.

The ZUL Page


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

    <!-- 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 />

The Composer

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.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 {
        _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


Envisage ZK 6: An Annotation Based Composer For MVC


Files at github:


  1. Hi

    I got problem in selectcomposer, here is the details

    Can you please help me

    1. I'm not sure what the problem is, maybe you can try this sample for that kind of scenario?