Question

我过去曾涉足过GWT，并且知道自己已经足够燃烧。我目前的伤害可以描述如下：

我有一个CellTable。它包含许多Columns和TextColumns。 TextColumns包含报表对象，列渲染单选按钮，复选框等的变量。
我想插入另一个列，该列将为每个表行提供一个TextArea，用户可以在其中输入一些文本。
我的问题是我无法弄清楚如何创建TextArea。

有人可能会给我一个代码片段让我入手吗？

Answer 1

看看这个展示：http://gwt.google.com/samples/Showcase/Showcase.html#!CwCellSampler。您可以使用TextInputCell来达到目的。

Answer 2

没有带有textarea作为输入的内置单元格，但是很容易自己创建一个单元格。见http://code.google.com/webtoolkit/doc/latest/DevGuideUiCustomCells.html （并查看TextInputCell或EditTextCell源代码作为指南）

Answer 3

我在GWT附带的TextInputCell之后模拟了我的TextAreaInputCell。它基本上是相同的代码，除了模板信息特定于textarea（您可以复制/粘贴此类，它完全正常）：

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();
    }
}

以下是你如何使用细胞：

    Column<ScorecardEntryDTO, String> commentColumn = new Column<ScorecardEntryDTO, String>(new TextAreaInputCell()) {
        @Override
        public String getValue(ScorecardEntryDTO object) {
            return object.getComment();
        }
    };

Answer 4

尝试这样的事情：

TextArea outputArea = new TextArea();
outputArea.getElement().setAttribute("cols", "100");
outputArea.getElement().setAttribute("rows", "20");
locPanel.add(outputArea);

GWT：列中的TextArea

4 个答案: