GWT EditableLabel

GWT provide a feature of creating your own widget. Today I will demonstrate you how can you create your own widget. You can create a widget in GWT by extending your class with com.google.gwt.user.client.ui.Composite. You have to set the widget to be wrapped by Composite by calling Composite class's initWidget(Widget w) method. Wrapped object must be set before calling any method on widget or adding to panel.

EditableLabel.java

import com.google.gwt.user.client.ui.ClickListener;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.FocusListener;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.Panel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.Widget;

/**
* @author Yogesh Bhave
*
* Class represent editable label, when user click on label user can
* edit label text.
*/
public class EditableLabel extends Composite {
private Panel editPanel;
private Label label;
private EditableLabel editableLabel;
private TextBox editBox;
private EditableLabelListener listeners;

public EditableLabel(String text) {
super();
editableLabel = this;
editPanel = new HorizontalPanel();
label = new Label(text);
editBox = new TextBox();
editBox.setWidth("100px");
editPanel.add(label);

label.setStyleName("editableStyle");
label.addClickListener(new ClickListener() {
@Override
public void onClick(Widget sender) {
editPanel.remove(label);
editPanel.add(editBox);
editBox.setText(label.getText());
editBox.setFocus(true);
}
});

editBox.addFocusListener(new FocusListener() {
@Override
public void onFocus(Widget arg0) {
}

@Override
public void onLostFocus(Widget arg0) {
label.setText(editBox.getText());
editPanel.remove(editBox);
editPanel.add(label);
if(listeners!=null)
listeners.onLabelModified(label.getText(),
editableLabel);
}
});

initWidget(editPanel);
}

public void addEditableLabelListener(EditableLabelListener listener) {
listeners = listener;
}


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

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

****************************************************************************
EditableLabelListener.java

/**
* @author Yogesh Bhave
*
*/
public interface EditableLabelListener {
public void onLabelModified(String text,EditableLabel sender);
}


Above example illustrate the Listener patteren also. You can directly use 'EditableLabel' class in your code. If you want any notification on label text changed then you can add listener on editable label object by implementing EditableLabelListener and using method addEditableLabelListener(EditableLabelListener listener).