how to add an image to a cell in cellTable in GWT

Question

I want to add an image in a cell in the CellTable. After reading the documentation, this is what I did,

Column<Contact, String> imageColumn = new Column<Contact, String>(new ImageCell()) {
    @Override
    public String getValue(Contact object) {
        return "contact.jpg";
    }
  };
table.addColumn(imageColumn, "");

Well, there's an empty column in the table now and no image in it. Am I doing something wrong here? Any suggestion is appreciated. Thank you.

I cannot see a problem with this. Do you get a completely blank cell of a missing image icon? — Daniel Vaughan, May 25 '11 at 15:22
where do you have the file "contact.jpg"? It should be directly placed under /war. It will not work otherwise. — Ashok, Aug 04 '11 at 03:15

score 16 · Accepted Answer · edited Feb 18 '14 at 12:55

16

Use an ImageResourceCell:

interface Resources extends ClientBundle {
  @Source("image-path.png")
  ImageResource getImageResource();
}

Resources resources = GWT.create(Resources.class);

Column<Contact, ImageResource> imageColumn =
  new Column<Contact, ImageResource>(new ImageResourceCell()) {
    @Override
    public ImageResource getValue(Contact object) {
      return resources.getImageResource();
    }
  };

edited Feb 18 '14 at 12:55

Yuriy Nakonechnyy

3,742
4
29
41

answered Jul 19 '11 at 13:39

Ionuț G. Stan

176,118
18
189
202

2

agreed! ImageResourceCell would help to implement the Image inside a celltable. However, this looks more of a static rather a dynamic implementation. This forces the user to associate each image with a method in the interface (Resources). However, in most cases the location of the image is obtained dynamically. For instance, I have a project with 1000images and want to populate them in a celltable. I can't create 1000 methods each corresponding to an image. Is there a generic solution for this? – Ashok Aug 04 '11 at 02:39
2

@Ashok, you can always create your own class that implements `ImageResource` and then use instances of that class to populate the cells. Something like this: https://gist.github.com/1124648 – Ionuț G. Stan Aug 04 '11 at 07:14
1

Hey guys, there is a problem with this type: "we can't scale the image". There are different solutions to this: 1. pre-image loader 2. FITImage etc., However one simple solution (http://markmail.org/message/qe7j6tgrl34nrqib#query:+page:1+mid:yfv4paerhvix2qek+state:results) provided works better. Its simple: using a htmlcell instead of imagecell and assigning an image link to that htmlcell. It scales perfectly fine as given width and height. thought of sharing with you all. – Ashok Aug 10 '11 at 00:08

score 9 · Answer 2 · edited Jan 17 '13 at 10:38

Column<Contact, String> imageColumn = 
    new Column<Contact, String>(
        new ClickableTextCell() 
        {
            public void render(Context context, 
                               SafeHtml value, 
                               SafeHtmlBuilder sb)
            {
                sb.appendHtmlConstant("<img width=\"20\" src=\"images/" 
                                       + value.asString() + "\">");
            }
        })
        {
            @Override
            public String getValue(Contact object) {
                return "contact.jpg";
            }
        };
        table.addColumn(imageColumn, "");

score 5 · Answer 3 · answered Dec 28 '11 at 11:19

5

I suppose there's a error in the Ionuț G. Stan post

i suppose is

Column<Contact, ImageResource> imageColumn =
  new Column<Contact, ImageResource>(new ImageResourceCell()) {
    @Override
    public ImageResource getValue(Contact object) {
      resources.getImageResource();
    }
  };

so with public ImageResource getValue and not public String getValue

answered Dec 28 '11 at 11:19

gzorzi

51
1
1

1

don't forget also the "return" keyword in the getValue method – OutOfBound Dec 11 '13 at 16:07

how to add an image to a cell in cellTable in GWT

3 Answers3