GWT: TextArea in Column - gwt

Question

I've dabbled in GWT in the past and know just enough to burn myself. My current hurt can be described as follows:
I have a CellTable. This contains a number of Columns and TextColumns. The TextColumns contain variables from a report object, the Columns render radio buttons, check boxes etc.
I would like to insert another column which will provide a TextArea per table row, into which the user can enter some text.
My problem is I cannot figure out how to create the TextArea.
Could anyone possibly give me a code snippet to get me started?

Answer 1

Have a look at this showcase: http://gwt.google.com/samples/Showcase/Showcase.html#!CwCellSampler. You can use a TextInputCell for your purpose.

Answer 2

There's no built-in cell with a textarea as input, but it's easy to create one yourself. See http://code.google.com/webtoolkit/doc/latest/DevGuideUiCustomCells.html
(and have a look at either the TextInputCell or EditTextCell source code as a guide)

Answer 3

I've modeled my TextAreaInputCell after the TextInputCell that GWT ships with. It's basically the same code, except that the Template info is specific to a textarea (you can copy/paste this class, it's fully functional):
package com.xxx.scorecard.client.view.cell;
import com.google.gwt.cell.client.AbstractCell;
import com.google.gwt.cell.client.AbstractInputCell;
import com.google.gwt.cell.client.ValueUpdater;
import com.google.gwt.core.client.GWT;
import com.google.gwt.dom.client.Element;
import com.google.gwt.dom.client.InputElement;
import com.google.gwt.dom.client.NativeEvent;
import com.google.gwt.safehtml.client.SafeHtmlTemplates;
import com.google.gwt.safehtml.client.SafeHtmlTemplates.Template;
import com.google.gwt.safehtml.shared.SafeHtml;
import com.google.gwt.safehtml.shared.SafeHtmlBuilder;
/**
* An {#link AbstractCell} used to render a text input.
*/
public class TextAreaInputCell extends AbstractInputCell<String, TextAreaInputCell.ViewData> {
interface Template extends SafeHtmlTemplates {
#Template("<textarea type=\"text\" cols=\"30\" rows=\"5\" tabindex=\"-1\">{0}</textarea>")
SafeHtml input(String value);
}
/**
* The {#code ViewData} for this cell.
*/
public static class ViewData {
/**
* The last value that was updated.
*/
private String lastValue;
/**
* The current value.
*/
private String curValue;
/**
* Construct a ViewData instance containing a given value.
*
* #param value
* a String value
*/
public ViewData(String value) {
this.lastValue = value;
this.curValue = value;
}
/**
* Return true if the last and current values of this ViewData object
* are equal to those of the other object.
*/
#Override
public boolean equals(Object other) {
if (!(other instanceof ViewData)) {
return false;
}
ViewData vd = (ViewData) other;
return equalsOrNull(lastValue, vd.lastValue) && equalsOrNull(curValue, vd.curValue);
}
/**
* Return the current value of the input element.
*
* #return the current value String
* #see #setCurrentValue(String)
*/
public String getCurrentValue() {
return curValue;
}
/**
* Return the last value sent to the {#link ValueUpdater}.
*
* #return the last value String
* #see #setLastValue(String)
*/
public String getLastValue() {
return lastValue;
}
/**
* Return a hash code based on the last and current values.
*/
#Override
public int hashCode() {
return (lastValue + "_*!#HASH_SEPARATOR#!*_" + curValue).hashCode();
}
/**
* Set the current value.
*
* #param curValue
* the current value
* #see #getCurrentValue()
*/
protected void setCurrentValue(String curValue) {
this.curValue = curValue;
}
/**
* Set the last value.
*
* #param lastValue
* the last value
* #see #getLastValue()
*/
protected void setLastValue(String lastValue) {
this.lastValue = lastValue;
}
private boolean equalsOrNull(Object a, Object b) {
return (a != null) ? a.equals(b) : ((b == null) ? true : false);
}
}
private static Template template;
/**
* Constructs a TextInputCell that renders its text without HTML markup.
*/
public TextAreaInputCell() {
super("change", "keyup");
if (template == null) {
template = GWT.create(Template.class);
}
}
#Override
public void onBrowserEvent(Context context, Element parent, String value, NativeEvent event,
ValueUpdater<String> valueUpdater) {
super.onBrowserEvent(context, parent, value, event, valueUpdater);
// Ignore events that don't target the input.
InputElement input = getInputElement(parent);
Element target = event.getEventTarget().cast();
if (!input.isOrHasChild(target)) {
return;
}
String eventType = event.getType();
Object key = context.getKey();
if ("change".equals(eventType)) {
finishEditing(parent, value, key, valueUpdater);
} else if ("keyup".equals(eventType)) {
// Record keys as they are typed.
ViewData vd = getViewData(key);
if (vd == null) {
vd = new ViewData(value);
setViewData(key, vd);
}
vd.setCurrentValue(input.getValue());
}
}
#Override
public void render(Context context, String value, SafeHtmlBuilder sb) {
// Get the view data.
Object key = context.getKey();
ViewData viewData = getViewData(key);
if (viewData != null && viewData.getCurrentValue().equals(value)) {
clearViewData(key);
viewData = null;
}
String s = (viewData != null) ? viewData.getCurrentValue() : value;
if (s != null) {
sb.append(template.input(s));
} else {
sb.appendHtmlConstant("<input type=\"text\" tabindex=\"-1\"></input>");
}
}
#Override
protected void finishEditing(Element parent, String value, Object key, ValueUpdater<String> valueUpdater) {
String newValue = getInputElement(parent).getValue();
// Get the view data.
ViewData vd = getViewData(key);
if (vd == null) {
vd = new ViewData(value);
setViewData(key, vd);
}
vd.setCurrentValue(newValue);
// Fire the value updater if the value has changed.
if (valueUpdater != null && !vd.getCurrentValue().equals(vd.getLastValue())) {
vd.setLastValue(newValue);
valueUpdater.update(newValue);
}
// Blur the element.
super.finishEditing(parent, newValue, key, valueUpdater);
}
#Override
protected InputElement getInputElement(Element parent) {
return super.getInputElement(parent).<InputElement> cast();
}
}
And here's how you use the cell:
Column<ScorecardEntryDTO, String> commentColumn = new Column<ScorecardEntryDTO, String>(new TextAreaInputCell()) {
#Override
public String getValue(ScorecardEntryDTO object) {
return object.getComment();
}
};

Answer 4

Try some like this:
TextArea outputArea = new TextArea();
outputArea.getElement().setAttribute("cols", "100");
outputArea.getElement().setAttribute("rows", "20");
locPanel.add(outputArea);