-
FEATURED COMPONENTS
First time here? Check out the FAQ!
Hi All,
I have a ListModel which contains a list of beans with a urlPath attribute containing different URL path of some images. I have dao implementation to grep all details from the database and then create the list model as at below:
Code: Skipped some coding for convenience reading
Java:
private int selectedCategory = 0;
public ListModel<ImageBean> getImageListModel() {
List<ImageBean> imageList = new ArrayList<ImageBean>();
ResultSet rs = HANDLER.execute("select * from image where category = " + selectedCategory + ";");
while (rs.next()) {
ImageBean imageBean = new imageBean(rs.getInt("image_id"), rs.getString("url"));
imageList.add(imageBean);
}
return new ListModelList<ImageBean>(imageList);
}
ZUL:
<zk>
<borderlayout apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('com.album.core.ZULControllers.IPhoneIndexController')">
....
<div id="container" width="100%">
<zk forEach="${vm.imageListModel}">
<image src="images/signals/${each.url}" />
</zk>
</div>
....
I have created different buttons and binded them to an action method by using annotation, i.e.
@NotifyChange({ "imageListModel" })
@Command
public void updateCategory(@BindingParam("category_id") int category_id) {
selectedCategory = category_id;
}
The problem is when I click the button, the screen does not refresh to show the corresponding images. Please kindly advise what I missed or used incorrectly.
Not so simple anymore. I Found the right way to use here :
http://books.zkoss.org/wiki/ZKDeveloper'sReference/MVVM/Advanced/BindinginSpecialAttribute#The.22forEach.22VersusChildren_Binding
<div children="@load(vm.imageListModel)">
<template name="children">
<checkbox label="images/signals/${each.url}.jpg" />
</template>
</div>
note : if the ${each.url} doesn't work we need to use EL expresions.
Like this :
<?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c"?>
<div children="@load(vm.imageListModel)">
<template name="children">
<checkbox label="@load(c:cat3('images/signals/',each.url,'.jpg'))" />
</template>
</div>
greetz chill
Hi Greetz,
May I ask if you meant:
<zk forEach="@load(vm.imageListModel)" var="item">
<image src="images/signals/@load(item.signalname).jpg" />
</zk>
I tested the code using the @load approach and it is generating issue. In summary:
My original approach where data is shown properly, just not being refreshed after firing an action:
<div id="container" width="100%">
<zk forEach="${vm.imageListModel}">
<image src="images/signals/${each.url}" />
</zk>
</div>
The new approach using @load where I have got the compilation error while visiting the page:
<div id="container" width="100%">
<zk forEach="@load(vm.imageListModel)">
<image src="images/signals/${each.url}" />
</zk>
</div>
Error message: Property 'url' not found on type java.lang.String
Please kindly advise ^.^
The imageListModel is a ListModel object containing a list of <imagebean> with an attribute (i.e. url) inside. After removing the .url, error message was gone but no image was showed. Not sure if it is relevant to remove the .url since the image src value is stored in the url field in the <imagebean> bean.
Controller Code:
private List<ImageBean> imageList = new ArrayList<ImageBean>();
public List<ImageBean> getImageList() {
return imageList;
}
public ListModel<ImageBean> getImageListModel() {
getImageList().clear();
String sql = "select * from image where category = #CATEGORY#";
sql = sql.replaceAll("#CATEGORY#", getCategorString());
//getCategorString() will return a textbox value when action is fired
QueryHandler qh = new QueryHandler(this.getClass().getName());
qh.setSql(sql);
ResultSet rs = qh.perform();
try {
while (rs.next()) {
ImageBean imageBean = new ImageBean(rs.getInt("id"), rs.getString("url"));
getImageList().add(imageBean);
}
rs.close();
} catch (SQLException e) {
e.printStackTrace();
}
qh.disconnect();
return new ListModelList<ImageBean>(getImageList());
}
@NotifyChange({ "imageListModel" })
@Command
public void updateImage(@BindingParam("category") String category) {
setCategorString(category);
}
Grid works just perfect. But since I need to display images in sequence instead of rows, I need to utilise the foreach approach. Below please find the code for Grid approach I tested:
<grid id="imageGrid" model="@bind(vm.imageListModel)" autopaging="true" mold="paging" pageSize="10">
<columns sizable="true">
<column label="Images" align="center" />
</columns>
<template name="model">
<row>
<cell >
<image src="images/signals/${each.url}.jpg" />
</cell>
</row>
</template>
</grid>
wat fqn is the ImageBean so I can search the docs for that, its strange that he see's with the iteration over the loop a String in stead of ImageBean (try the List back in stead of a ListModelList. If it is needed zk will do that automaticly for you but the foreach doesn't need a ListModelList)
chillworld ( 2014-04-09 05:57:48 +0800 )editMay I ask if you meant the one below; I uses ListModel since I want to see if the underlying methods, binding and MVVM are working fine.
package com.stockta.core.beans.zul;
public class ImageBean {
private int id = 0;
private String url = "";
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getUrl() {
return url;
}
public void setUrl(String url) {
this.url = url;
}
}
Asked: 2014-04-04 09:27:48 +0800
Seen: 50 times
Last updated: Apr 09 '14
Databinding and auto-complete on combobox
Composite component and bind in ZK 6
How to detach / reattach MVVM windows?
Is there a way to resolve view model properties as input to client side javascripts?
How can I synchronize data in a ListBox in MVVM ? [closed]
MVVM Validator: class not found ? [closed]
How to Call Child ViewModel Method from Parent Window? [closed]