From Documentation

Stop.png 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.


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

<window title="composer5 example" border="normal" width="300px" apply="example.MyComposer">
            <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>

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


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:

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());

Last Update : 2010/07/16

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.