GWT Custom Events

Hey I have a problem getting my head around how custom GWT event Handlers work. I have read quite a bit about the topic and it still is some what foggy. I have read threads here on Stackoverflow like this one https://stackoverflow.com/questions/998621/gwt-custom-event-handler. Could someone explain it in an applied mannar such as the following.

I have 2 classes a block and a man class. When the man collides with the block the man fires an event ( onCollision() ) and then the block class listens for that event.

Thanks

Events in general:

Events are always sent to inform about something (e.g. a change of state). Let's take your example with a man and a wall. Here we can imagine that there is a game where a user can walk as a man in a labyrinth. Every time a user hits the wall it should be informed about the collision so that it can react to it (e.g. a wall can render itself as a destroyed wall). This can be achieved by sending a collision event every time the collision with a wall is detected. This event is sent by a man and every object in the system interested in the event receives it and can react to it accordingly. Objects which want to receive events must register themselves as interested with event.

This is how events work in general in every system or framework (not only in GWT). In order to send and receive events in such systems you have to define:

1. What is sent (what do events look like)
2. Who receives events (event receivers)
3. Who sends events (event senders)

Then you can:

4. Register event receivers which want to receive events
5. Send events

Events in GWT:

Here I will show an example of using custom events in GWT. I will use an example of a system which is responsible for checking a mailbox and inform a user if there are new mails. Let's assume that in the system there are at least 2 components:

• message checker responsible for checking the mailbox and
• message displayer responsible for displaying new mails

Message checker sends events when a new mail is received and message displayer receives these events.

Step 1: Define events

Information about a new mail will be sent as an instance of MessageReceivedEvent class. The class contains a new mail (for the simplicity let's assume it is just a String).

Full source code of this class is presented below (the comment for it is below the source code).

public class MessageReceivedEvent extends GwtEvent<MessageReceivedEventHandler> {

	public static Type<MessageReceivedEventHandler> TYPE = new Type<MessageReceivedEventHandler>();

	private final String message;

	public MessageReceivedEvent(String message) {
		this.message = message;
	}

	@Override
	public Type<MessageReceivedEventHandler> getAssociatedType() {
		return TYPE;
	}

	@Override
	protected void dispatch(MessageReceivedEventHandler handler) {
		handler.onMessageReceived(this);
	}

	public String getMessage() {
		return message;
	}
}

MessageReceivedEventHandler is an interface that represents event receivers. Don't bother with it at the moment, this will be discussed later.

Every class representing a GWT event has to extend GwtEvent class. This class contains two abstract methods which must be implemented: getAssociatedType and dispatch. However in every event class they are usually implemented in a very similar way.

The class stores information about a received message (see constructor). Every event receiver can get it using getMessage method.

Step 2: Define event receivers

Each event type in GWT is associated to an interface representing receivers of this event type. In GWT receivers are called handlers. In the example an event receiver interface for MessageReceivedEvent will be named MessageReceivedEventHandler. The source code is below:

public interface MessageReceivedEventHandler extends EventHandler {
	void onMessageReceived(MessageReceivedEvent event);
}

Each handler has to extend EventHandler interface. It should also define a method which will be invoked when an event occurs (it should take at least one parameter - an event). Here the method is named onMessageReceived. Each receiver can react on an event by implementing this method.

The only event receiver in the example is MessageDisplayer component:

public class MessageDisplayer implements MessageReceivedEventHandler {

	@Override
	public void onMessageReceived(MessageReceivedEvent event) {
		String newMessage = event.getMessage();
		// display a new message
		// ...
	}

}

Step 3: Define event senders

In the example the only event sender is a component responsible for checking mails - EventChecker:

public class MessageChecker implements HasHandlers {

	private HandlerManager handlerManager;

	public MessageChecker() {
		handlerManager = new HandlerManager(this);
	}

	@Override
	public void fireEvent(GwtEvent<?> event) {
		handlerManager.fireEvent(event);
	}

	public HandlerRegistration addMessageReceivedEventHandler(
			MessageReceivedEventHandler handler) {
		return handlerManager.addHandler(MessageReceivedEvent.TYPE, handler);
	}

}

Every event sender has to implement HasHandlers interface.

The most important element here is a HandlerManager field. In GWT HandlerManager as the name suggest manages event handlers (event receivers). As it was said at the beginning every event receiver that wants to receive events must register itself as interested. This is what handler managers are for. They make it possible to register event handlers an they can send a particular event to every registered event handler.

When a HanlderManager is created it takes one argument in its constructor. Every event has a source of origin and this parameter will be used as a source for all events send by this handler manager. In the example it is this as the source of events is MessageChecker.

The method fireEvent is defined in HasHandlers interface and is responsible for sending events. As you can see it just uses a handler manager to send (fire) and event.

addMessageReceivedEventHandler is used by event receivers to register themselves as interested in receiving events. Again handler manager is used for this.

Step 4: Bind event receivers with event senders

When everything is defined event receivers must register themselves in event senders. This is usually done during creation of objects:

MessageChecker checker = new MessageChecker();
MessageDisplayer displayer = new MessageDisplayer();
checker.addMessageReceivedEventHandler(displayer);

Now all events sent by checker will be received by displayer.

Step 5: Send events

To send an event, MessageChecker must create an event instance and send it using fireEvent method. This cane be done in newMailReceived method:

public class MessageChecker implements HasHandlers {

	// ... not important stuff omitted
	
	public void newMailReceived() {
		String mail = ""; // get a new mail from mailbox
		MessageReceivedEvent event = new MessageReceivedEvent(mail);
		fireEvent(event);
	}

}

I hope it is clear and will help :)

Since this question and the answer from Piotr GWT has added support for a slightly different way to create custom events. This event implementation is specific build to be used with the GWT's EventBus in the package com.google.web.bindery.event.shared. An example on how to build a custom event for GWT 2.4:

import com.google.web.bindery.event.shared.Event;
import com.google.web.bindery.event.shared.EventBus;
import com.google.web.bindery.event.shared.HandlerRegistration;

/**
 * Here is a custom event. For comparison this is also a MessageReceivedEvent.
 * This event extends the Event from the web.bindery package.
 */
public class MessageReceivedEvent extends Event<MessageReceivedEvent.Handler> {

    /**
     * Implemented by methods that handle MessageReceivedEvent events.
     */
    public interface Handler {
        /**
         * Called when an {@link MessageReceivedEvent} event is fired.
         * The name of this method is whatever you want it.
         *
         * @param event an {@link MessageReceivedEvent} instance
         */
        void onMessageReceived(MessageReceivedEvent event);
    }

    private static final Type<MessageReceivedEvent.Handler> TYPE =
        new Type<MessageReceivedEvent.Handler>();

    /**
     * Register a handler for MessageReceivedEvent events on the eventbus.
     * 
     * @param eventBus the {@link EventBus}
     * @param handler an {@link MessageReceivedEvent.Handler} instance
     * @return an {@link HandlerRegistration} instance
     */
    public static HandlerRegistration register(EventBus eventBus,
        MessageReceivedEvent.Handler handler) {
      return eventBus.addHandler(TYPE, handler);
    }    

    private final String message;

    public MessageReceivedEvent(String message) {
        this.message = message;
    }

    @Override
    public Type<MessageReceivedEvent.Handler> getAssociatedType() {
        return TYPE;
    }

    public String getMessage() {
        return message;
    }
    
    @Override
    protected void dispatch(Handler handler) {
        handler.onMessageReceived(this);
    }
}

The event is used as follows:

To register your handler for this event with the eventbus call the static register method on the MessageReceivedEvent class:

MessageReceivedEvent.register(eventbus, new MessageReceivedEvent.Handler() {
   public void onMessageReceived(MessageReceivedEvent event) {
     //...do something usefull with the message: event.getMessage();
   }
});

Now to fire the event on the eventbus call fireEvent with a newly constructed event:

eventBus.fireEvent(new MessageReceivedEvent("my message"));

Another implementation can be found in GWT's own EntityProxyChange event class. That implementation uses a alternative option of the EventBus. It uses the ability to add handlers that are bound to a specific source, via addHandlerToSource and can be triggered via eventBus.fireEventFromSource.

The event implementation given here is also more suitable when working with GWT's Activities.

I created my own widget by extending GWT's Composite class. I wanted to create my own custom event in this class. I wanted the events to be accessible to GWT's WindowBuilder Editor.

I learned a lot of from the answers on this page, but I had to make some changes.

I wanted to start from the Hilbrand Bouwkamp answer, because it was newer. But I ran into a couple of problems. 1) That answer made reference to the event bus. The even bus is a global variable owned by the main program. It's not clear how a widget library could get access to that. 2) I wasn't starting from scratch. I was was extending GWT library code. In order to make that work, I had to start from the GwtEvent class, rather than the Event class.

Piotr's answer is essentially correct, but it was very long. My class (indirectly) extends GWT's Widget class. Widget takes care of many details, such as creating a HandlerManager object. (I looked through the source code, and that's exactly how standard Widgets work, not by using an EventBus.)

I only had to add two things to my widget class to add a custom event handler. Those are shown here:

public class TrackBar extends Composite {
	
	public HandlerRegistration addValueChangedHandler(TrackBarEvent.Handler handler)
	{
		return addHandler(handler, TrackBarEvent.TYPE); 
	}	

	private void fireValueChangedEvent(int value)
	{
		final TrackBarEvent e = new TrackBarEvent(value);
		fireEvent(e);
	}

My new event is almost exactly the same as Piotr's event class, shown above. One thing is worth noting. I started with getValue(), based on that example. Later I added getTrackBar() to give a lot more information. If I was starting from scratch I'd focus on the latter, not the former. The complete event class is shown below.

import com.google.gwt.event.shared.EventHandler;
import com.google.gwt.event.shared.GwtEvent;

public class TrackBarEvent extends GwtEvent< TrackBarEvent.Handler >
{
	public interface Handler extends EventHandler {
		void onTrackBarValueChanged(TrackBarEvent event);
	}

	static final Type<TrackBarEvent.Handler> TYPE =
			new Type<TrackBarEvent.Handler>();

	private final int value;

	public TrackBarEvent(int value) {
		this.value = value;
	}

	@Override
    public Type<TrackBarEvent.Handler> getAssociatedType() {
        return TYPE;
    }

    public int getValue() {
        return value;
    }

    public TrackBar getTrackBar()
    {
    	return (TrackBar)getSource();
    }

    @Override
    protected void dispatch(Handler handler) {
        handler.onTrackBarValueChanged(this);
    }
}

If you happen to be using the GWTP framework on top of GWT, refer to this Stack.

GWTP is "A complete model-view-presenter framework to simplify your next GWT project."