1

Display image using URLs in MVVM ListModel dynamically using foreach

asked 2014-04-04 09:27:48 +0800

zeroho gravatar image zeroho
16 2

updated 2014-04-09 04:53:53 +0800

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.

delete flag offensive retag edit

8 Answers

Sort by ยป oldest newest most voted
1

answered 2014-04-04 11:24:14 +0800

chillworld gravatar image chillworld flag of Belgium
5322 4 9
https://github.com/chillw...

updated 2014-04-09 10:47:34 +0800

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

link publish delete flag offensive edit
0

answered 2014-04-04 13:18:21 +0800

zeroho gravatar image zeroho
16 2

updated 2014-04-09 04:43:50 +0800

Hi Greetz,

May I ask if you meant:

<zk forEach="@load(vm.imageListModel)" var="item">
<image src="images/signals/@load(item.signalname).jpg" />
</zk>
link publish delete flag offensive edit
0

answered 2014-04-09 02:34:24 +0800

zeroho gravatar image zeroho
16 2

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 ^.^

link publish delete flag offensive edit

Comments

Remove the .url

chillworld ( 2014-04-09 02:48:33 +0800 )edit
0

answered 2014-04-09 03:04:13 +0800

zeroho gravatar image zeroho
16 2

updated 2014-04-09 03:04:51 +0800

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.

link publish delete flag offensive edit

Comments

Show controller code plz

chillworld ( 2014-04-09 04:20:02 +0800 )edit
0

answered 2014-04-09 04:28:53 +0800

zeroho gravatar image zeroho
16 2

I have just tested the ListModel with Grid; everything work just fine, data was refreshed in the grid when an action is fired. Any though? Will provide controller code ASAP.

link publish delete flag offensive edit
0

answered 2014-04-09 04:40:52 +0800

zeroho gravatar image zeroho
16 2

updated 2014-04-09 04:49:19 +0800

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);
    }
link publish delete flag offensive edit
0

answered 2014-04-09 04:47:56 +0800

zeroho gravatar image zeroho
16 2

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>
link publish delete flag offensive edit

Comments

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 )edit
0

answered 2014-04-09 07:37:17 +0800

zeroho gravatar image zeroho
16 2

updated 2014-04-09 07:51:02 +0800

May 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;
        }
    }
link publish delete flag offensive edit

Comments

yep this one I wanted to see, it all looks nice.

chillworld ( 2014-04-09 08:08:50 +0800 )edit

when it's resolved we clean this topic a little bit ;)

chillworld ( 2014-04-09 08:38:02 +0800 )edit
Your answer
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

Follow
1 follower

RSS

Stats

Asked: 2014-04-04 09:27:48 +0800

Seen: 47 times

Last updated: Apr 09 '14

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