How to refresh user interface after the data model was updated here

asked 2011-05-24 04:55:04 +0800

lanyong240 gravatar image lanyong240

I have a case to show four database records information in a row with paging,and i found the grid can only show one database record in a row.so i used the following code:


<?page title="new page title" contentType="text/html;charset=UTF-8"?>
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" ?>
<window id="gwin" title="new page title" border="normal" use="test.zk.GridWindow">
<vbox forEach="${gwin.dataModel.rows}">
<hbox id="${each}">
<hbox forEach="${gwin.dataModel.data[forEachStatus.index]}">
<label value="${each.userName}"></label>
<paging id="mypg" totalSize="100" pageSize="20"/>


package test.zk;

import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.event.EventListener;
import org.zkoss.zk.ui.ext.AfterCompose;
import org.zkoss.zul.Paging;

import test.service.*;
import org.zkoss.zul.Window;
import org.zkoss.zul.event.*;
import org.zkoss.zkplus.databind.AnnotateDataBinder;
import org.zkoss.zk.ui.Components;
public class GridWindow extends Window implements AfterCompose
//4 records in a row.
PagingModel dataModel = new PagingModel(UserService.getAllUser(0),4);
protected AnnotateDataBinder binder;
public PagingModel getDataModel() {
return dataModel;

public void setDataModel(PagingModel dataModel) {
this.dataModel = dataModel;

public void onCreate() {
binder = (AnnotateDataBinder) this.getAttribute("binder", true);
System.out.println("the binder is initial");


public void afterCompose() {
// TODO Auto-generated method stub

Components.wireVariables(this, this);
Components.addForwards(this, this);

Paging pg = (Paging) this.getFellow("mypg");
pg.addEventListener("onPaging", new EventListener(){
public void onEvent(Event event) throws Exception{
PagingEvent pagingEvt =(PagingEvent)event;
System.out.println("active page is " + pagingEvt.getActivePage());
dataModel = new PagingModel(UserService.getAllUser(pagingEvt.getActivePage()),4);

The result is as following(there is a picture alias:
User0 User1 User2 User3
User16 User17 User18 User19

a user is a record in user table in database.

There are five pages in total,when i go to other page,the data wasn't refresh.
Are there good way(like Grid etc) to implement my case(show many database record in a row with paging) in ZK?
What's wrong with my case?

delete flag offensive retag edit

6 Replies

Sort by ยป oldest newest

answered 2011-05-24 04:59:18 +0800

lanyong240 gravatar image lanyong240

You can find the picture of this example here ExamplePicture

Thank you very much!

link publish delete flag offensive edit

answered 2011-05-24 07:37:29 +0800

caclark gravatar image caclark
1753 2 5

It doesn't work because you're mixing the use of of 1-time techniques with dynamic. When you use forEach and EL (${...expr...}), you're telling ZK to evaluate those expressions during the Component Creation phase of the life cycle. This is done exactly ONE time. So, there's no updating the UI elements that were created by that. To do the dynamic updating that you want, you will need to use databinding notation via the @ symbol. There are a lot of small talks linked covering databinding as well as a section in the Developer's Reference. Databinding is not as powerful as EL, so I'm not sure you'll be able to do exactly what you want.

link publish delete flag offensive edit

answered 2011-05-24 08:43:07 +0800

lanyong240 gravatar image lanyong240

Thanks,actually,i also tried @,but got some errors.
If you have a list of objects,and want to show four objects in each row,and you may have many pages in total(just like shopping website,show many items in each row with paging function).are there good way to do it?
I tried to bind data model to Grid or List,but each row only can show one objects. anyone can give me some clue?

Again thanks.

link publish delete flag offensive edit

answered 2011-05-24 10:27:34 +0800

caclark gravatar image caclark
1753 2 5

I don't think you're going to be able to use any of the builtin layouts + databinding to do this. I think you'll need to hook the onCreate event of a vlayout and then loop through your data making hlayout's and adding your 4 children to it. In the onPaging event of your pager, you'll need to remove the children of the vlayout and add the next page of hlayout's + children.

link publish delete flag offensive edit

answered 2011-05-24 10:35:19 +0800

lanyong240 gravatar image lanyong240

Ok,thank you so much for the suggestion.

Do you think is it possible to bind data model of grid,then use the row render to show many objects in one row?

Thanks and regards.

link publish delete flag offensive edit

answered 2011-05-24 13:36:09 +0800

caclark gravatar image caclark
1753 2 5

If you were guaranteed the order of iteration, you could probably create the elements of a row by keeping your own index, using a modulus 4 to generate the items for that row, and skipping creation when modulus 4 != 0. Use the internal collection to pull your objects from. You'll want to double check that the nth item handed to the RowRenderer is === the nth item in your collection.

link publish delete flag offensive edit
Your reply
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools




Asked: 2011-05-24 04:55:04 +0800

Seen: 457 times

Last updated: May 24 '11

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More