自定义小部件扩展文本字段答案

【问题标题】：Custom Widget extending textfield自定义小部件扩展文本字段
【发布时间】：2012-06-15 09:38:00
【问题描述】：

是否可以简单地扩展文本字段以创建由文本框和标签组成的自定义小部件，然后继承文本字段的功能以及事件处理。

据我了解，通常会扩展 Composite，然后在构造函数中实现 initWidget()。

initWidget(binder.createAndBindUi(this));

我可以通过扩展文本字段来做类似的事情吗？

我想这样做的原因是因为已经创建了一个带有标签的指示器文本字段，但是当我尝试在某个地方使用它时，在这个自定义小部件中应用事件处理会给我带来意想不到的结果。

import com.google.gwt.core.client.GWT;

public class IndicatorTextField extends Composite implements HasText, HasKeyUpHandlers{

public interface Binder extends UiBinder<Widget, IndicatorTextField> {
}

private static final Binder binder = GWT.create(Binder.class);

public interface Style extends CssResource{
    String textStyling();
    String requiredInputLabel();
    String colorNotValidated(); 
}

@UiField Style style;
@UiField Label label;
@UiField TextBox textBox;


public IndicatorTextField()
{
    initWidget(binder.createAndBindUi(this));
}

public void setBackgroundValidateTextbox(boolean validated)
{
    if(validated)
    {
        textBox.getElement().addClassName(style.colorNotValidated());
    }
    else
    {
        textBox.getElement().removeClassName(style.colorNotValidated());
    }
}

@Override
public String getText() {
    return label.getText();
}

@Override
public void setText(String text) {
    label.setText(text);
}

@UiHandler("textBox")
public void onKeyUp(KeyUpEvent event)
{
    DomEvent.fireNativeEvent(event.getNativeEvent(), this);
}

@Override
public HandlerRegistration addKeyUpHandler(KeyUpHandler handler) {      
    //return textBox.addKeyUpHandler(handler);
    return addDomHandler(handler, KeyUpEvent.getType());
}
}

【问题讨论】：

标签： java gwt uibinder

【解决方案1】：

查看TextBox类的默认构造函数。

/**
 * Creates an empty text box.
 */
public TextBox() {
  this(Document.get().createTextInputElement(), "gwt-TextBox");
}

它创建文本输入元素。您可以使用如下构造函数创建自定义类LabeledTextBox：

public class LabeledTextBox extends TextBox {

    public MyTextBox() {
        super(Document.get().createDivElement());
        final DivElement labelElement = Document.get().createDivElement();
        final InputElement textBoxElement = Document.get().createTextInputElement();
        getElement().appendChild(labelElement);
        getElement().appendChild(textBoxElement);
    }

    ...

}

我自己没有尝试过这门课。很可能，它需要额外的调整，可能存在监听器问题等。

你真的需要通过继承TextBox 来创建一个小部件吗？你为什么不改用某种Panel 呢？对我来说，这是一种更简单的方法。

【讨论】：