Introduction

This documentation is for an older version of ZK. For the latest one, please click here.

MVC(Model-View-Controller) is a famous and good practice for web application development. Thus, we are always looking for the best practice for ZK to realize MVC approach perfectly. Finally, we come up with the idea of composer which allows you to separate view and controller clearly.

View

The 'View' is the set of Components in the desktop defined in ZUML (zul, zhtml) files containing no event processing logic.
index.zul

<window title="composer5 example" border="normal" width="300px" apply="example.MyComposer">
    <grid>
        <rows>
            <row>First Name: <textbox id="firstName"/></row><!-- forward is removed -->
            <row>Last Name: <textbox id="lastName"/></row><!-- forward is removed -->
            <row>Full Name: <label id="fullName"/></row>
        </rows>
    </grid>
</window>

The window in the page has apply="MyController" that references the following Java class:

Controller

The 'Controller' is a pure Java class that is registered on an EventListener one or more Components in the desktop. Here is the example take the MVC approach:
MyComposer.java

package example;

public class MyComposer extends GenericForwardComposer {
    private Textbox firstName;
    private Textbox lastName;
    private Label fullName;
    
    //onChange event from firstName component
    public void onChange$firstName(Event event) { 
        fullName.setValue(firstName.getValue()+" "+lastName.getValue());
    }
    
    //onChange event from lastName component
    public void onChange$lastName(Event event) {
        fullName.setValue(firstName.getValue()+" "+lastName.getValue());
    }
}