I wrote already similar article here, which describes very well how to use images into custom created cell. Also there is a very nice tutorial describing how to create custom cells you can read from the official GWT documentation here. I’ve been asked from a visitor the my blog about use case where we do have more then one images into the custom cell and then he wants to know which image was clicked. It is actually very good question, so I was playing around and my example looks now like this:
If I click on one of those icons I want to know which icon was clicked.
To start you can create custom cell like described into the GWT tutorial from the official page, nothing really special here. The difference, I am extending the AbstractSafeHtmlCell as I did in my previously article. So my class look like this:
What is special to this class? I am using elements which already used before in my previously example, but with the latest GWT version the creation is little bit easier. First I have a template where I define my DIV which will contain the images. Then I define the images which I wanted to show. Here I am using custom creation function makeImage(ImageResource resource), which now looks very simple, since the AbstractImagePrototype has now getSafeHtml() function, so I do NOT need to convert the html code from the element to SafeHtml any more.
Another important think here is, every DIV element has a name, so that I know which image was clicked. The name can be the same for every row, because into the event I still know which row was clicked, I just want to know also which image was selected.
Now using this we can render the cell to show our images, here only the snippet from the code above:
As you can see you can call the template.cell more then once and then put everything to the SafeHtmlBuilder to render. Also I used here SafeStylesUtils to generate my CSS style for the DIV’s so that the images will be shown in one line. You can of course go for CSS style directly if you wish.
How to handle the events? This is the interesting part now. Take a look at the onBrowserEvent function.
What I am doing here, I am trying to make sure that the image was clicked not the DIV. Also I remove the code checking for first child since my IMG does not have any child. So if IMG into the cell was clicked then I pass the event to the doAction function. Also I am checking the parent element of the IMG since there is the DIV with the name predefined so I know now which image was clicked. Inside the doAction method I just call the ValueUpdater and pass the name of the DIV which was containing the clicked picture, that’s it.
To be able to use this cell into CellTable you have to subclass it to column like this:
Now this column is something you can use into any CellTable, for example like this:
Ok so one think left, as you remember we implement some custom code into the onBrowserEvent so we know which image is clicked into the cell, so how to use this here?
The solution: ValueUpdater calls the FieldUpdater, if you subclass cell to column you will have the value passed to the ValueUpdater inside the FieldUpdater, if you go for this:
the value passed to the update() function is the value you passed into the onBrowserEvent to the ValueUpdater.
If you click now on one of the images you will get this:
As you can see you still have the index value and the object, but you also know which image was clicked.
You can find the examples HERE.