Custom Widget extending textfield

Question

Will it be possible just to simply extend textfield in creating a custom widget that consists of a textbox and label and subsequently inheriting the functionality of the textfield as well as the eventhandling.

From what I understand is that one would normaly extend Composite and then implement initWidget() in the constructor.

initWidget(binder.createAndBindUi(this));

Can I do something similar by just extending textfield.

The reason I want to do this is because of creating an indicator textfield with label already but applying the eventhandling in this custom widget gives me unexpected results when I try to use it somewhere.

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

Answer 1

Look at the default constructor of the TextBox class.

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

It creates the text input element. You can create your custom class LabeledTextBox with a constructor like this:

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

    ...

}

I didn't try this class myself. Most likely, it will require extra adjustments, there might be listener issues etc.

Do you really need to create a widget by subclassing TextBox ? Why don't you use some sort of Panel instead? It's an easier approach as for me.