Google Web Toolkit Tutorials

Custom Widgets

Sometimes you just run out of core GWT widgets, you need something more complex, composition of several widgets. OK, create your own widget. Yes, your own widget.

To create a widget we'll use the Composite class. Composite class is used to "wrap" other widgets. For example, you can wrap a table that contains other widgets in to single Composite widget.

Lets build a simple date entry widget.

public class DateEntryWidget extends Composite {
    private TextBox year;
    private TextBox month;
    private TextBox day;
   
    public DateEntryWidget() {
        DockPanel dockPanel = new DockPanel();
        dockPanel.add(new Label("YYYY/MM/DD"), DockPanel.NORTH);
       
        year = new TextBox();
        year.setWidth("40px");
        month = new TextBox();
        month.setWidth("20px");
        day = new TextBox();
        day.setWidth("20px");
       
        HorizontalPanel hz = new HorizontalPanel();
       
        hz.add(year);
        hz.add(new Label("/"));
        hz.add(month);
        hz.add(new Label("/"));
        hz.add(day);
       
        dockPanel.add(hz, DockPanel.CENTER);
       
        Button button = new Button("Enter");
        button.addClickListener(new ClickListener() {
            public void onClick(Widget sender) {
                notifyDateEneteredListeners(
                        new Date(Integer.parseInt(year.getText()) - 1900,
                                 Integer.parseInt(month.getText()) - 1,
                                 Integer.parseInt(day.getText())));
            }
        });
       
        dockPanel.add(button, DockPanel.SOUTH);
       
        initWidget(dockPanel);
    }
   
    private List dateEnteredListeners = new ArrayList();
   
    public void addDateEnteredListeners(DateEnteredListener listener) {
        dateEnteredListeners.add(listener);
    }
   
    public void removeDateEnteredListeners(DateEnteredListener listener) {
        dateEnteredListeners.remove(listener);
    }
   
    private void notifyDateEneteredListeners(Date date) {
        for (Iterator i = dateEnteredListeners.iterator(); i.hasNext(); ) {
            ((DateEnteredListener) i.next()).onDateEntered(date);
        }
    }
}

The listener interface looks like:

public interface DateEnteredListener {
    public void onDateEntered(Date date);
}

Lets test it:

public class MyApp implements EntryPoint {
    DateEntryWidget dateWidget;
    private Label label;

    public void onModuleLoad() {
        DockPanel dockPanel = new DockPanel();
       
        dateWidget = new DateEntryWidget();
        label = new Label();

        dateWidget.addDateEnteredListeners(new DateEnteredListener() {
            public void onDateEntered(Date date) {
                label.setText("The date you've entered: " + date.toString());
            }
        });
   
        dockPanel.add(dateWidget, DockPanel.NORTH);
        dockPanel.add(label, DockPanel.SOUTH);
       
        RootPanel.get("gwtContainer").add(dockPanel);
    }
}

Till next time,

Pavel