GWT：文本區域列

Question

我在過去曾經涉足過GWT，並且知道自己已經足夠了。我目前的傷害可以描述如下：

1. 我有一個CellTable。這包含許多列和TextColumns。 TextColumns包含來自報表對象，列顯示單選按鈕，複選框等的變量。
2. 我想插入另一列，它將爲每個錶行提供一個TextArea，用戶可以在其中輸入一些文本。
3. 我的問題是我無法弄清楚如何創建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

我模仿我的TextAreaInputCell的TextInputCell後GWT附帶。它基本上是相同的代碼，除了模板信息是具體到一個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);