gwt:adding clickhandler to ImageResource cell

Question

I want to add an image to my celltable , for that i use imageResouce as below

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

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

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

Its working perfectly fine , i am getting image in my celltable but Now i want to add clickhandler to that image ,For that i am using field Updater like below

         display.getListJobsWidget().getDeleteJobColumn().setFieldUpdater(

            new FieldUpdater<EmployerJobs, ImageResource>() {

                public void update(int index, EmployerJobs employerJobs,
                        ImageResource value) {

                                       Window.alert("Hello");

                }
            });

so now when i click on that above image cell it should say "Hello", but its not doing any thing .. Any solution ..

Thanks

Answer 1

ImageResourceCell doesn't have any wiring to call the ValueUpdater, it is just designed to draw the image and be done with it.

You have a few ways you can change this:

• Subclass ImageResourceCell and override onBrowserEvent - take a look at ButtonCell to see how this can work
• Use a different cell class instead, like ActionCell - this doesn't take any data from the client, but will let you pass in a delegate isntead, which will be run when the thing is clicked. Use the ActionCell(SafeHtml,Delegate<C>) constructor to pass in your image, in the form of html
• Build a new cell, subclassing AbstractCell, borrowing the render code from ImageResourceCell and the event code from ButtonCell or ActionCell to keep your code as generic and reusable as possible.

Answer 2

An example for the first solution provided by Colin. I found it a bit tricky to override getConsumedEvents but seems to work well.

public class ClickableImageResourceCell extends ImageResourceCell{
        public ClickableImageResourceCell(){
            super();
        }
        @Override
        public Set<String> getConsumedEvents() {
            Set<String> set = new HashSet<String>();
            set.add("click");
            return set;
        }
        @Override
        public void onBrowserEvent(com.google.gwt.cell.client.Cell.Context context, Element parent, ImageResource value, NativeEvent event, ValueUpdater<ImageResource> valueUpdater) {
            super.onBrowserEvent(context, parent, value, event, valueUpdater);
             if ("click".equals(event.getType())) {
                EventTarget eventTarget = event.getEventTarget();
                if (!Element.is(eventTarget)) {
                    return;
                }
                if (parent.getFirstChildElement().isOrHasChild(Element.as(eventTarget))) {
                    // Ignore clicks that occur outside of the main element.
                    keyDown(context, parent, value, event, valueUpdater);
                }
            }

        }

          protected void keyDown(Context context, Element parent, ImageResource value,
              NativeEvent event, ValueUpdater<ImageResource> valueUpdater) {
            if (valueUpdater != null) {
              valueUpdater.update(value);
            }
          }
}