Revision history [back]

Okay, so if I'm right, what you really want to have is having annotate data binding mechanism in template and making it be possible to cooperate with it's template-user.

here is an example that I build in a very quick manner, first, please read this article: http://docs.zkoss.org/wiki/Data_binding

I'll use the Person bean in this article to present how the whole stuff works. then, imagine that I have a zul like this one:

index.zul

<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" ?>
<?component name="my-form" extends="window" class="demo.MyForm"?>
<window>
    <zscript><![CDATA[
        import demo.databinding.*;
        List people = PersonDAO.getAll();//implement this yourself
    ]]></zscript>

    <listbox rows="4" model="@{people}" selectedItem="@{selected}">
        <listhead>
            <listheader label="Full Name" />
        </listhead>
        <!-- define variable person here-->

        <listitem self="@{each='person'}">
            <listcell label="@{person.fullName}" />
        </listitem>
    </listbox>

    <my-form id="myForm" person="@{selected}" />
</window>

This is a Master-Detail concept demonstration, and I want to make my detail presentation be swappable. which means I'll have a "detail" zul template like this:

_MyForm.zul

<zk>
    <grid width="400px">
        <rows>
            <row> First Name: 
                <textbox id="firstName" value="@{person.firstName, save-when='myBtn.onClick'}"/>
            </row>
            <row> Last Name: 
                <textbox id="lastName" value="@{person.lastName, save-when='myBtn.onClick'}"/>
            </row>
            <row> Full Name: 
                <label id="fullName" value="@{person.fullName}"/>
            </row>
        </rows>
    </grid>
    <button id="myBtn" label="save"/>
</zk>

About how to glue index.zul and _MyForm.zul together, here is MyForm.java, which is a composite component that plays like a MVC controller(but still a valid ZK Component):

MyForm.java

package demo;
import org.zkoss.zk.ui.Executions;
import org.zkoss.zkplus.databind.AnnotateDataBinder;
import org.zkoss.zul.Window;

public class MyForm extends Window {
    protected AnnotateDataBinder binder; 
    public MyForm(){
        Executions.createComponents("/databinding/_MyForm.zul", this, null);
        binder = new AnnotateDataBinder(this);
        binder.loadAll();
    }
}

now, if you don't like the _MyForm.zul, you want to use other one, just make it your own by change the implementation of MyForm.java or change the class Attribute in index.zul's page component definition.

In ZK, how to integrate technology together is Application developer's work, ZK tried to make every part's concept stand alone and independent, which means Developer can get the most great power by freely combining them together.

And that's it, hope this is what you want.

PS: about how to bind outer Binder and inner binder, it's another topic so I won't discuss it here.