Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
I'm attempting to write my first custom ZK component - a non visual 'block' tag - as described at the tail end of this forum thread (see http://www.zkoss.org/forum/listComment/20257-Templates-for-grid-s-with-variable-number-of-columns )
My custom non visual ZK component derives from 'AbstractComponent', like:
Java Class...
public class Block extends AbstractComponent {
private static final long serialVersionUID = -6756928372758156349L;
public Block() {
super();
}
@Override
protected void renderProperties(ContentRenderer arg0) throws IOException {
super.renderProperties(arg0);
}
}
JS class:
zk.$package('com.eis.zk.component');
com.eis.zk.component.Blank = zk.$extends(zk.Object, {
});
When the try to use it in the following 'index.zul' page...
<?page title="Auto Generated index.zul"?>
<window title="Dynamic Grid demo #01" border="normal" width="100%"
apply="org.zkoss.bind.BindComposer"
viewModel="@id('vm') @init('com.eis.grid.dynamic.DynamicGridDemoVM')">
<grid width="95%" model="@load(vm.customerModel)">
<columns children="@init(vm.columnModel)">
<template name="children" var="c">
<column label="@load(c.title)" align="@load(c.align)"
hflex="@load(c.hflex)" visible="true" />
</template>
</columns>
<template name="model" var="r">
<row>
<cell>
<a label="@load(r.surname)" ></a>
</cell>
<cell>
<a label="@load(r.firstName)" ></a>
</cell>
<block children="@load(r.purchaseValues)">
<template name="children" var="p">
<cell>
<label value="@load(p)" ></label>
</cell>
</template>
</block>
</row>
</template>
</grid>
</window>
.. the web app just hangs showing the 'processing' popup message
I can't find another non visual component to copy from. Any suggestions?
If the app does nothing once "processing" pops up, you probably have an error in your Javascript.
If you intend to do custom component development, I strongly suggest you to learn how to use Firebug or Chrome developer tools. You can easily see the Javascript error with the console feature of those tools.
Umm...
I simply followed the reference docs at http://books.zkoss.org/wiki/ZK_Component_Development_Essentials.
It would help if ZK could provide either better docs or some pointers on where to start debugging.
You should start with finding out the Javascript error. Even though you are following a ready-made guide, it's very easy to make a small mistake in the code, such as adding an extra brace or a comma somewhere. Since Javascript is not compiled, you will never see these errors unless you validate the JS file or debug it yourself in the browser with Firebug/Chrome. An classic example is an extra comma in a Javascript object, which breaks at least IE6. So, {a: 1, b: 2, } breaks IE6, while {a: 1, b: 2} does not. Trailing commas are allowed by the spec, and Firefox and Chrome work fine with both examples.
If you are using Firefox, download Firebug.
You can then open your app so that the Firebug window is open. In order to open the window, either click the Firebug button in the toolbar, or right-click somewhere on the page and select "Inspect element with Firebug". Make sure Firebug was enabled when you loaded the page in your app (refresh with F5 if necessary). You can then see any Javascript errors you might have in the "Console"-tab in Firebug.
Hello davout,
Based on what you are trying to achieve, you can simply use forEach to generate the variable number of cells for each row.
<?page title="Auto Generated index.zul"?>
<window title="Dynamic Grid demo #01" border="normal" width="100%"
apply="org.zkoss.bind.BindComposer"
viewModel="@id('vm') @init('com.eis.grid.dynamic.DynamicGridDemoVM')">
<grid width="95%" model="@load(vm.customerModel)">
<columns children="@init(vm.columnModel)">
<template name="children" var="c">
<column label="@load(c.title)" align="@load(c.align)"
hflex="@load(c.hflex)" visible="true" />
</template>
</columns>
<template name="model" var="r">
<row>
<cell>
<a label="@load(r.surname)" ></a>
</cell>
<cell>
<a label="@load(r.firstName)" ></a>
</cell>
<zk forEach="${r.purchaseValues}">
<cell>
<label value="${each}" ></label>
</cell>
</zk>
</row>
</template>
</grid>
</window>
Neil Lee, Engineer
Potix Corporation
Thanks for the 'ZK ForEach' suggestion... that works.
Unfortunately it means that those cells are outside of the MVVM binding. For instance if I want use an inplace edit Textbox in one of these variable column.
Any more suggestions?
It's a pity that the 'ZK' tag doesn't support MVVM, like
<zk children="@load(r.purchaseValues)" >
<template name="children" var="t">
<cell>
<label value="@load(t)" ></label>
</cell>
</template>
</zk>
Is it possible to derive a new class/tag from 'ZK' to support this?
I think it would work i am using listHead it is working fine for me
<listhead children="@load(vm.headerList)" sizable="true">
<template name="children" var="headerName">
<listheader label="@load(headerName)"></listheader>
</template>
</listhead>
This is a grid! I've tried both listheader and listhead and the app crashes with 'wrong parent' errors. Thus...
<grid width="95%" model="@load(vm.customerModel)"> <columns children="@init(vm.columnModel)"> <template name="children" var="c"> <column label="@load(c.title)" align="@load(c.align)" hflex="@load(c.hflex)" visible="true" /> </template> </columns> <template name="model" var="r"> <row> <cell> <a label="@load(r.surname)" /> </cell> <cell> <a label="@load(r.firstName)" /> </cell> <listheader children="@load(r.purchaseValues)"> <template name="children" var="p"> <cell> <label value="@load(p)" /> </cell> </template> </listheader> </row> </template> </grid>
<grid width="95%" model="@load(vm.customerModel)"> <columns children="@init(vm.columnModel)"> <template name="children" var="c"> <column label="@load(c.title)" align="@load(c.align)" hflex="@load(c.hflex)" visible="true" /> </template> </columns> <template name="model" var="r"> <row-ext extra="@load(r.purchaseValues)"> <cell> <a label="@load(r.surname)" /> </cell> <cell> <a label="@load(r.firstName)" /> </cell> <template name="extra" var="p"> <cell> <label value="@load(p)" /> </cell> </template> </row-ext> </template> </grid>
Asked: 2012-09-04 09:32:29 +0800
Seen: 170 times
Last updated: Sep 05 '12
