閣樓貓的五四三 (About Cat)

How to write ZK Forge Component

There are three simple ZK Forge Components in this document.

1.       HelloWorld

A Simple Hello World Example which tutor how to write a ZK Forge Component

2.       MyButton

A Simple Button Example which tutor how to send simple event to Server

3.       MyPanel

This Panel have 2 built-in buttons, ok&cancel button, In this sample,

l           I show 3 different mold in panel, default(bottom), right and left to place these 2 buttons.

l           I also show how to send 2 private event(onPanelOK & onPanelCancel) to server.

onPaneOk is always asap event and onPanelCancel can be defined asap or not by user's Listener

/archive/ : This Folder store files that will be copied into atticZKForge.jar file.

/metainfo/zk/lang-addon.xml : An ZK spec file, this file defined forge components

/web/: An ZK spec folder, file referenced in lang-addon.xml are relative to this folder.

/build/ : class folder for ant build, in build.xml also copy files in /archive , and after that, this folder is jared in to atticZKForge.jar

/lib/ : ZK library folder

/src/ : source folder

build.xml : an ant build file, this file compile java, copy resource and build aticZKForge.jar

atticZKForge Archive structure looks like below:

Lang-addon.xml

<language-addon>

        <addon-name>AtticZKForge</addon-name>

        <version>

                <version-class>atticcomp.Version</version-class>

                <version-uid>1.0</version-uid>

                <zk-version>2.3.0</zk-version><!-- or later -->

        </version>

        <language-name>xul/html</language-name>

        <javascript-module name="atticz.attic" version="1.070426.008"/>

        <zscript>

        import atticcomp.*;

        </zscript>

        <component>

                <component-name>HelloWorld</component-name>

                <component-class>atticcomp.HelloWorld</component-class>

                <mold>

                        <mold-name>default</mold-name>

                        <mold-uri>~./atticcomp/helloworld.dsp</mold-uri>

                </mold>

        </component>          

</language-addon>

/addon-name : forge name

/version/version-class : version class for your forge , I don't know actual detail.

/language-name : you language, I always use xul/html

/javascript-module : ZK client engine will load this module in to browser if page use any component that defined in this xml. The string 「atticz.attic」 means load file at 「/web/atticz/attic.js」 in jar file (form class path root actually).

/component/component-name : the component you defined , this is tag name also.

/component/component-class : the component implement class.

/component/mold/mold-name : the component mold name

/component/mold/mold-uri : the component mold template file, component will be displayed use this .dsp file. the String 「~./atticcomp/helloworld.dsp」 means load file at 「/web/atticcomp/helloworld.dsp」 in jar file (form class path root actually).

HelloWorld Forge Component

HellowWorld.java : Just one attribute – yourName

package atticcomp;

import org.zkoss.zk.ui.HtmlBasedComponent;

public class HelloWorld extends HtmlBasedComponent {

    private static final long serialVersionUID = 1L;

    String yourName;

    public String getYourName() {

        return yourName;

    }

    public void setYourName(String yourName) {

        this.yourName = yourName;

    }

}

helloworld.dsp : simple output yourName

<%@ taglib uri="/WEB-INF/tld/web/core.dsp.tld" prefix="c" %>

<c:set var="self" value="${requestScope.arg.self}"/>

<div id="${self.uuid}"${self.outerAttrs} z.type="atticz.attic.HelloWorld">

    <span>[Hello : ${self.yourName}]</span>

</div>

atticz.attic.HelloWorld  in z.type means bind this component by script in atticz.attic module's zhHelloWorld object.

I don't know much detail about this, HaHa~.

attic.js / HellowWorld : Do not thing in this component.

zkHelloWorld = {};

zkHelloWorld.init = function (cmp) {

};

zkHelloWorld.cleanup = function (cmp) {

};

zkHelloWorld.setAttr = function (elm, name, value) {

    return false;

};

Sample file :

<?xml version="1.0" encoding="utf-8"?>

<window id="w" title="Woo" style="width:200px" border="normal">

    <HelloWorld yourName="dennis" />

</window>

Runtime result :