ZK Grid / Listbox Using List of JSONObject - json

Question

anybody can help me using zk (zkoss) framework? I am new in this framework. I want to make a grid / listbox using list of jsonobject. I found no examples that can help me using list of jsonobject to create grid / listbox. I want to create simple listbox like this:
<?page title="Table of Users" contentType="text/html;charset=UTF-8"?>
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" ?>
<?variable-resolver class="org.zkoss.zkplus.spring.DelegatingVariableResolver"?>
<zk>
<window id="windowUsers" width="500px" apply="${userController}" viewModel="#id('vm')">
<groupbox mold="3d">
<caption label="Table of Users" />
<listbox model="#load(vm.listUser)" width="400px">
<listhead>
<listheader label="User Id"/>
<listheader label="Name"/>
<listheader label="Address"/>
<listheader label="Phone"/>
</listhead>
<template name="model" var="list">
<listitem>
<listcell label="#load(list.id)" />
<listcell label="#load(list.name)" />
<listcell label="#load(list.address)" />
<listcell label="#load(list.phone)" />
</listitem>
</template>
</listbox>
</groupbox>
</window>
thank's in advance.

Answer 1

ZK is typically used as serverside pages which are evaluated by java on the server. So the example above typically renders a list of java objects on the server which is output as interactive dhtml to the browser. The diagram to explain is here.
With that in mind one would not have a list of json objects on the server; you would parse them as java objects on the server and render the java objects into the page. ZK does have "client side fusion" to be able to interact with their browser side rendering engine. That however is more of an advanced feature; you should be able to write an entire system using ZK without doing any browserside programming. Here is a demo of that but I have never used myself
(warning: shameless plug) Checkout my demo app which has a simple page which renders and edits a list of objects just like your example.

Answer 2

thank you for the answer, it taught me enough about ZK. I've got the way to get list of JSON object shown in listbox like this:
<listitem forEach="${userController.list}">
<listcell label="${each.id}" />
<listcell label="${each.name}" />
<listcell label="${each.address}" />
<listcell label="${each.phone}" />
</listitem>