ZK Build View in ZUL file or Java Code

Introduction

In ZK, you can build the view (UI) in two ways, use xml in zul file, or use java code in java file. This is important in some scenario such like you use a complex object as the data in a grid and use custom renderer to render components in a row.

This post will practice the basic part of building view in zul file/java file by xml/java-code.

Pre-request

(Must)
The Basic MVC by GenericForwardComposer
http://ben-bai.blogspot.tw/2012/10/zk-basic-mvc-pattern-with.html

The Program

build_view_by_xml_in_zul_file.zul

Simply create components, assign properties and handle events in zul file by xml.

<zk>
    <!-- Tested with ZK 6.0.2 -->
    <div>
        <!-- create window component and set properties -->
        <window title="test window" border="normal">
            <!-- add event listener for onClick event of window -->
            <attribute name="onClick"><![CDATA[
                alert("test window is clicked !");
            ]]></attribute>
            <!-- create label component and set properties -->
            <label value="test label" style="color: green;">
                <!-- add event listener for onClick event of label -->
                <attribute name="onClick"><![CDATA[
                    alert("test label is clicked !");
                ]]></attribute>
            </label>
        </window>
    </div>
</zk>

build_view_by_javacode_in_java_file.zul

Only apply the TestBuildViewByJavacode.java as composer in zul file, and than create components, assign properties and handle events in java code in the doAfterCompose method of TestBuildViewByJavacode.java (the composer).

<zk>
    <!-- Tested with ZK 6.0.2 -->
    <div apply="test.buildview.TestBuildViewByJavacode">

    </div>
</zk>

TestBuildViewByJavacode.java

Create components, assign properties and handle events in java code in the doAfterCompose method.

package test.buildview;

import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.event.EventListener;
import org.zkoss.zk.ui.event.Events;
import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.util.GenericForwardComposer;
import org.zkoss.zul.Label;
import org.zkoss.zul.Window;

/**
 * Tested with ZK 6.0.2
 * @author benbai
 *
 */
public class TestBuildViewByJavacode extends GenericForwardComposer {
    /** While doAfterCompose, all components in zul page under
     * the div that apply this composer (including the div itself)
     * is ready and can be accessed in java code
     *
     */
    public void doAfterCompose (Component comp) throws Exception {
        super.doAfterCompose(comp);
        // the comp here is the div which apply this
        // composer in build_view_by_javacode_in_java_file.zul
        System.out.println(comp);

        // below is the equivalent code of
        // <window title="test window" border="normal">
        //     <attribute name="onClick"><![CDATA[
        //         alert("test window is clicked !");
        //     ]]></attribute>
        //     <label value="test label" style="color: green;">
        //         <attribute name="onClick"><![CDATA[
        //             alert("test label is clicked !");
        //         ]]></attribute>
        //     </label>
        // </window>
        Window win = new Window(); // create window component
        win.setTitle("test window"); // set properties
        win.setBorder("normal");
        // add event listener for onClick event of window
        win.addEventListener(Events.ON_CLICK, new EventListener () {
            public void onEvent (Event event) {
                alert("test window is clicked !");
            }
        });
        win.setParent(comp); // append it to parent div

        Label lb = new Label(); // create label component
        lb.setValue("test label"); // set properties
        lb.setStyle("color: green;");
        // add event listener for onClick event of label
        lb.addEventListener(Events.ON_CLICK, new EventListener () {
            public void onEvent (Event event) {
                alert("test label is clicked !");
            }
        });
        lb.setParent(win); // append it to parent window
    }
}

The Result

View demo on line
http://screencast.com/t/NxnhxhUqC

Reference

http://books.zkoss.org/wiki/ZK_Developer%27s_Reference/UI_Composing/Component-based_UI

Download

Files at github

build_view_by_xml_in_zul_file.zul
https://github.com/benbai123/ZK_Practice/blob/master/Components/projects/Components_Practice/WebContent/folders/build_view_test/build_view_by_xml_in_zul_file.zul

build_view_by_javacode_in_java_file.zul
https://github.com/benbai123/ZK_Practice/blob/master/Components/projects/Components_Practice/WebContent/folders/build_view_test/build_view_by_javacode_in_java_file.zul

test.buildview.TestBuildViewByJavacode.java
https://github.com/benbai123/ZK_Practice/blob/master/Components/projects/Components_Practice/src/test/buildview/TestBuildViewByJavacode.java

Demo flash at github
https://github.com/benbai123/ZK_Practice/blob/master/Components/demos/build_view_test.swf