Sunday, August 26, 2012

GWT Celltable - Add multiple anchors to a cell



I am trying to insert multiple anchors in a single celltable cell. This is how it would look like-
The cars column has multiple cars, each car link can be clicked to perform different actions.
I have extended a MultipleAnchorCell class from AbstractSafeHtmlCell like this-

import java.util.List;
import com.google.gwt.cell.client.AbstractSafeHtmlCell;
import com.google.gwt.core.client.GWT;
import com.google.gwt.dom.client.NativeEvent;
import com.google.gwt.safehtml.client.SafeHtmlTemplates;
import com.google.gwt.safehtml.shared.SafeHtml;
import com.google.gwt.text.shared.SafeHtmlRenderer;
import com.google.gwt.text.shared.SimpleSafeHtmlRenderer;
import com.google.gwt.cell.client.ValueUpdater;
import com.google.gwt.dom.client.Element;
import com.google.gwt.dom.client.EventTarget;
import com.google.gwt.safehtml.shared.SafeHtmlBuilder;
public class MultipleAnchorCell extends AbstractSafeHtmlCell {
interface Templates extends SafeHtmlTemplates {
@Template(" {0} ")
SafeHtml alink(String text);
}
private final List items;
public void clear() {
this.items.clear();
}
public void addLink(String newOp) {
String item = new String(newOp);
items.add(item);
}
public MultipleAnchorCell(List items) {
super(SimpleSafeHtmlRenderer.getInstance(), "click", "keydown");
this.items = items;
}
public MultipleAnchorCell(SafeHtmlRenderer renderer,
List items) {
super(renderer, "click", "keydown");
this.items = items;
}
private static Templates templates = GWT.create(Templates.class);
@Override
public void onBrowserEvent(Context context, Element parent, String value,
NativeEvent event,
com.google.gwt.cell.client.ValueUpdater valueUpdater) {
super.onBrowserEvent(context, parent, value, event, valueUpdater);
// Handle the click event.
if ("click".equals(event.getType())) {
EventTarget eventTarget = event.getEventTarget();
if (parent.isOrHasChild(Element.as(eventTarget))) {
Element el = Element.as(eventTarget);
if (el.getNodeName().equalsIgnoreCase("a")) {
doAction(el.getAttribute("aid"), valueUpdater);
}
}
}
};
@Override
protected void onEnterKeyDown(Context context, Element parent,
String value, NativeEvent event, ValueUpdater valueUpdater) {
doAction(value, valueUpdater);
}
private void doAction(String value, ValueUpdater valueUpdater) {
if (valueUpdater != null)
valueUpdater.update(value);
}
@Override
protected void render(com.google.gwt.cell.client.Cell.Context context,
SafeHtml data, SafeHtmlBuilder sb) {
if (data == null) {
return;
}
for (String item : items) {
sb.append(templates.alink(item));
}
}
}


And then I use this cell in a celltable to create a column. My User class contains comma separated values of cars in a class variable.

List linkNames = new ArrayList();
final MultipleAnchorCell linksCell = new MultipleAnchorCell(linkNames);
Column carColumn = new Column(
linksCell) {
@Override
public String getValue(User object) {
String currentVal = "";
linksCell.clear();
if (object.getLinksToShow() != null
&& object.getLinksToShow().length() > 0) {
for (String hg : object.getLinksToShow().split(",")) {
if (hg.trim().length() > 0) {
linksCell.addLink(hg);
currentVal = hg;
}
}
}
return currentVal;
}
};
carColumn.setFieldUpdater(new FieldUpdater() {
@Override
public void update(int index, User object, String value) {
if (value != null && value.length() > 0) {
Window.alert(value);
}
}
});
      

       

I am still learning GWT and it took me a while to figure this out.

Comments/feedback is welcome.
===============================================================

No comments: