How to add click events to multiple images in a cell/celltable

[Thomas Trebbien Pedersen]

Hi,

I have a celltable where I would like to sort the rows by clicking
either a up or a down arrow. The two sort-direction arrows are placed
in a single cell on each row.

Now how do I add a click event to each image? I know a cell has a
onBrowserEvent(...) put thats for the entire cell right? What about
multiple images in a cell?

Does anyone have some good suggestions.

Thanks.

[Adam]

I use CompositeCell for this type of thing. Create a composite of 2
cells, each with an image in them, and each cell handling "click"
events. Each cell can detect clicks in their respective FieldUpdaters
and still be rendered in the same cell.

Hope this helps,
Adam

On Oct 14, 9:41 am, Thomas Trebbien Pedersen

[Thomas Trebbien Pedersen]

Hi Adam,

Yes thank you, this helps a lot - I havn't thought about that.

But am now having trouble constructing an CompositeCell with the 2
images. Can you help me a bit here with a little code example.

I have to do something like this right:

List<HasCell<T, C>> hasCells = new ArrayList<HasCell<T, C>>();
hasCells.add(new HasCell<T, C>() {
// Setup the image here?
});
hasCells.add(new HasCell<T, C>() {
// Setup the image here?
});

CompositeCell myCell = new CompositeCell<C>(hasCells) {

// Then add the myCell to the CellTable here

Maybe you can help me in the right direction.

Thanks,
\Thomas

[Adam]

ImageCells by themselves don't care about click events. What I did was
made a decorator that wraps any cell to handle click events and
delegates them to the FieldUpdater:


public class ClickableCellDecorator<C> implements Cell<C> {

private static final String CLICK_EVENT = "click";

private final Cell<C> cell;

private final Set<String> events;

/**
* Constructor accepts the cell to be wrapped.
*
* @param cell
* The wrapped cell.
*/
public ClickableCellDecorator(final Cell<C> cell) {
super();

this.cell = cell;

// Add the click event to the wrapped cell's list of consumed
events
Set<String> wrappedEvents = this.cell.getConsumedEvents();
if (wrappedEvents == null || wrappedEvents.isEmpty()) {
this.events = Collections.singleton(CLICK_EVENT);
} else {
this.events = new HashSet<String>(wrappedEvents);
this.events.add(CLICK_EVENT);
}
}

@Override
public boolean dependsOnSelection() {
return cell.dependsOnSelection();
}

@Override
public Set<String> getConsumedEvents() {
return events;
}

@Override
public boolean handlesSelection() {
return cell.handlesSelection();
}

@Override
public boolean isEditing(
final com.google.gwt.cell.client.Cell.Context context,
final Element parent, final C value) {
return cell.isEditing(context, parent, value);
}

@Override
public void onBrowserEvent(
final com.google.gwt.cell.client.Cell.Context context,
final Element parent, final C value, final NativeEvent event,
final ValueUpdater<C> valueUpdater) {
if (CLICK_EVENT.equals(event.getType()) && valueUpdater != null)
{
valueUpdater.update(value);
}

cell.onBrowserEvent(context, parent, value, event,
valueUpdater);
}

@Override
public void render(final com.google.gwt.cell.client.Cell.Context
context,
final C value, final SafeHtmlBuilder sb) {
cell.render(context, value, sb);
}

@Override
public boolean resetFocus(
final com.google.gwt.cell.client.Cell.Context context,
final Element parent, final C value) {
return cell.resetFocus(context, parent, value);
}

@Override
public void setValue(final com.google.gwt.cell.client.Cell.Context
context,
final Element parent, final C value) {
cell.setValue(context, parent, value);
}
}

It was much easier and more flexible than extending every cell type i
wanted to be clickable.

Now you can just use new ClickableCellDecorator(new ImageCell())) and
you should see events.

Hope this helps,

Adam

On Oct 17, 4:36 am, Thomas Trebbien Pedersen

[Thomas Trebbien Pedersen]

Hi,

With help from Adam I got it working. See code below:

List<HasCell<Step, ?>> hasCells = new ArrayList<HasCell<Step, ?>>();

Column<Step, String> imageUpCell = new Column<Step, String>(new
ClickableCellDecorator<String>(new CustomImageCell(16, 16,
"imageLink"))) {
@Override
public String getValue(Step s) {
if (ct.getVisibleItems().indexOf(s) == 0) {
return "images/transppixel_1x1.gif";
}
return "images/up_16x16.png";
}
};
imageUpCell.setFieldUpdater(new FieldUpdater<Step, String>() {
public void update(int index, Step step, String value) {
if (value.endsWith("up_16x16.png")) {
// Swap implementation
}
}
});
hasCells.add(imageUpCell);

Column<Step, String> imageDownCell = new Column<Step, String>(new
ClickableCellDecorator<String>(new CustomImageCell(16, 16,
"imageLink"))) {
@Override
public String getValue(Step s) {
if (ct.getVisibleItems().indexOf(s) == ct.getRowCount() - 1) {
return "images/transppixel_1x1.gif";
}
return "images/down_16x16.png";
}
};
imageDownCell.setFieldUpdater(new FieldUpdater<Step, String>() {
public void update(int index, Step step, String value) {
if (value.endsWith("down_16x16.png")) {
// Swap implementation
}
}
});
hasCells.add(imageDownCell);

Column<Step, Step> sortColumn = new Column<Step, Step>(new
CompositeCell<Step>(hasCells)) {
@Override
public Step getValue(Step object) {
return object;
}
};
ct.addColumn(sortColumn);
ct.setColumnWidth(sortColumn, 50, Unit.PX);

\Thomas