Pages

Tuesday, April 28, 2009

Gwt Composite Widget with Event Listeners

Share it Please
In this article we will discuss of creating our own widgets and adding event listeners to them. So lets start creating a sampleWidget.

We will write a sample widget which extends Composite class and implements SouceClickEvents.

By implementing this interface we will allow the widget to source the events defined by the ClickListener interfaces. Similarly we have SouceMouseEvents,SourceFocusEvents and even SouceKeyBoardEvents and other.we can implement any SouceEvent interface according to our requirement.
In addition to the above classes , we need to know about the ClickListenerCollection class [for click events]which is a helper class for the implementers of the SourceClickEvents classes. This subclass of ArrayList assumes that all objects added to it will be of type ClickListener.

We will use the ClickListenerCollection class in our widget. The below is the code for creating a widget with click listeners

public class SampleWidget extends Composite implements SourcesClickEvents {

private HorizontalPanel panel;
private ClickListenerCollection listenerCollection;

public SampleWidget() {
panel=new HorizontalPanel();
panel.add(new Label("This is Sample Widget"));
panel.setBorderWidth(1);
initWidget(panel);
sinkEvents(Event.ONCLICK);
}


public void addClickListener(ClickListener listener) {
if(listenerCollection==null) {
listenerCollection=new ClickListenerCollection();
}
listenerCollection.add(listener);
}


public void removeClickListener(ClickListener listener) {
if(listenerCollection!=null) {
listenerCollection.remove(listener);
}
}

public void onBrowserEvent(Event event) {
int eventType=DOM.eventGetType(event);
switch(eventType) {
case Event.ONCLICK:listenerCollection.fireClick(this);
}
}
}

Let us move through the code .

As u can see in the constructor , I have created a HorizontalPanel and added a label to it.
I initialized the horizontalPanel.i have written a method called sinkEvents();.This method allows us to add a set of events to be sunk by our widget. That is we are adding a set of events to our widget.

When we implement the SourceClickEvents , we will be needed to override 2 methods
addClickListener() and removeClickListener().

In the addClickListener() method I checked whether ClickListenerCollection is initialized or not . if not initialize it and add the listener to the collection.in removeClickListener() , I removed the listener.

Meanwhile when we sinkevents() ,we need to override the onBrowserEvent() method so that we can check the event type and call appropriate event .this method allows us to fire an event whenever the browser receives an event.

In our example I checked for the onClick event .when the browser receives the OnClick event I allowed to made our widget to generate fireClick() event.

Now we can use the above code as below,

SampleWidget widget=new SampleWidget();
widget.addClickListener(new ClickListener() {
public void onClick(Widget sender) {
Window.alert("You Clicked On The Sample Widget");
}
});

1 comment :