Revision history [back]

I have prepared a small MVVM solution. You may find the whole code here.

As you can see in the zul below i am using a template inside a template. It is really simple and fast:

<?page contentType="text/html;charset=UTF-8"?>
<zk>
<window title="Workers" border="normal" width="100%" height="100%"
        apply="org.zkoss.bind.BindComposer" 
        viewModel="@id('vm') @init('snippets.workers.WorkersVM')"
        xmlns:n="native">

    <hlayout>
        <separator width="200px"></separator>
        <hlayout children="@load(vm.monthDays)">
            <template name="children" var="day">
                <textbox value="@load(day)" readonly="true" 
                    inplace="true" width="20px" />
                <separator width="2px" />
            </template>
        </hlayout>
    </hlayout>

    <grid model="@load(vm.workers)">

        <template name="model" var="worker" status="record">
            <row>       
                <cell width="50px">
                    <label value="@load(record.index)" />
                </cell>
                <cell width="150px">
                    <label value="@load(worker.name)" />
                </cell>
                <cell>
                    <hlayout children="@load(worker.workdays)">
                        <template name="children" var="workday">
                            <textbox value="@load(workday.type)" readonly="true" 
                                inplace="true" width="20px" />
                            <separator width="2px" />
                        </template>
                    </hlayout>
                </cell>
            </row>
        </template>
    </grid>

</window>
</zk>

Hope that helps

Costas

I have prepared a small MVVM solution. You may find the whole code here.

As you can see in the zul below i am using a template inside a template. It is really simple and fast:

<?page contentType="text/html;charset=UTF-8"?>
<zk>
<window title="Workers" border="normal" width="100%" height="100%"
        apply="org.zkoss.bind.BindComposer" 
        viewModel="@id('vm') @init('snippets.workers.WorkersVM')"
        xmlns:n="native">

    <hlayout>
        <separator width="200px"></separator>
        <hlayout children="@load(vm.monthDays)">
            <template name="children" var="day">
                <textbox value="@load(day)" readonly="true" 
                    inplace="true" width="20px" />
                <separator width="2px" />
            </template>
        </hlayout>
    </hlayout>

    <grid model="@load(vm.workers)">

        <template name="model" var="worker" status="record">
            <row>       
                <cell width="50px">
                    <label value="@load(record.index)" />
                </cell>
                <cell width="150px">
                    <label value="@load(worker.name)" />
                </cell>
                <cell>
                    <hlayout children="@load(worker.workdays)">
                        <template name="children" var="workday">
                            <textbox value="@load(workday.type)" readonly="true" 
                                inplace="true" width="20px" />
                            <separator width="2px" />
                        </template>
                    </hlayout>
                </cell>
            </row>
        </template>
    </grid>

</window>
</zk>

If you run this you should see somthing like this:

Hope that helps

Costas

I have prepared a small MVVM solution. You may find the whole code here.

As you can see in the zul below i am using a template inside a template. It is really simple and fast:

<?page contentType="text/html;charset=UTF-8"?>
<zk>
<window title="Workers" border="normal" width="100%" height="100%"
        apply="org.zkoss.bind.BindComposer" 
        viewModel="@id('vm') @init('snippets.workers.WorkersVM')"
        xmlns:n="native">

    <hlayout>
        <separator width="200px"></separator>
        <hlayout children="@load(vm.monthDays)">
            <template name="children" var="day">
                <textbox value="@load(day)" readonly="true" 
                    inplace="true" width="20px" />
                <separator width="2px" />
            </template>
        </hlayout>
    </hlayout>

    <grid model="@load(vm.workers)">

        <template name="model" var="worker" status="record">
            <row>       
                <cell width="50px">
                    <label value="@load(record.index)" />
                </cell>
                <cell width="150px">
                    <label value="@load(worker.name)" />
                </cell>
                <cell>
                    <hlayout children="@load(worker.workdays)">
                        <template name="children" var="workday">
                            <textbox value="@load(workday.type)" readonly="true" 
                                inplace="true" width="20px" />
                            <separator width="2px" />
                        </template>
                    </hlayout>
                </cell>
            </row>
        </template>
    </grid>

</window>
</zk>

If you run this you should see somthing something like this:

Hope that helps

Costas