GWT Event Bus

This tutorial is inspired by the screen-cast HERE and is a more basic version than shown there.

Basics: GWT event-bus, as the name suggests is used for passing events between panels and other widgets so that they can communicate with each other. For this, a widget specifies what event it is going to fire and any widget or class that is interested in receiving that event registers themselves with that particular event.  The event bus is the entity that facilitates this. It can be thought of as a common stream that broadcasts events as they are fired and anyone who is attached to it receiving the events which they specified they were interested in at the time of registering themselves with the bus.

With this short introduction,I will proceed to give an example.

  1. Create a project in Eclipse: File -> New -> Project -> Google -> Web Development Project. It is assumed that the user has GWT plugins installed for eclipse. This example was made using Gwt 2.2. Give the Project Name as ‘GwtEventBus’ and package name as ‘com.dev’. Leave the rest of the settings as they are and create the project.

  2. Test this example: The project creates a Hello World example that works out of box. All you have to do is run and see if it works. In the Package Explorer window in eclipse, right click on the ‘GwtEventBu’s project, go to ‘Run As…’ and click ‘Run as Web Application’. This runs the project and you can play around with it before proceeding.

  3. Remove redundant code: Since we do not need most of the code of this example, we remove everything inside the ‘onModuleLoad()’ method of the GWT entry point class ‘GwtEventBus’.

  4. Add a button to the root panel: Now create a button in the ‘onModuleLoad()’ method. Add this button to the Root panel and attach a handler to it.

  1. Create Packages: Create two packages within the ‘com.dev.client’ package with the names ‘com.dev.client.events’ and ‘com.dev.client.events.handlers’. These will house the Event objects and their handlers respectively.

The aim here is to create two events Ping and Pong. Ping event will be fired through the event bus when we click the button on the screen and start the ‘simulation’. Ping event handler will be registered with the event bus and will be called when the Ping event is fired. This will, in turn, fire Pong event and Pong event’s handler, after receiving Pong event, will fire Ping event. We will introduce a delay between event receiving and event firing and output appropriate message on the console to make the working more clear.

  1. In the handler’s package, create an Interface for declaring the methods in Ping event. Name this interface as ‘PingEventHandler’. This will extend the GWT EventHandler class. In the ‘PingEventHandler’ we have to declare methods that will be called when a Ping handler receives a Ping event. We will create the class PingEvent after this to describe the actual event object.

 

  1. In the events package, create a class PingEvent that extends GwtEvent. This class describes what information will be passed in the event. There are two methods that we have to override.
  1. After making the similar interface(PongEventHandler) and similar class(PongEvent) for handling Pong events, we proceed to edit the ‘onModuleLoad()’ method in the GwtEventBus class to wire up the events with the event bus and assign respective handlers. First we will make an object of EventBus.

The ‘mainBus’ will be the bus through which all the events will be fired and to which all the event handlers will be attached.

  1. Attach a handler to ‘mainBus’ to handle PingEvent

Now whenever an event of type ‘PingEvent’ is fired, the ‘onEvent(PingEvent event)’ method inside this handler will be called. In this case, we print that the handler was called and then fire a new PongEvent after a 1 second delay. A similar handler is attached for handling events of type ‘PongEvent’

This completes the wiring up of Ping and Pong event handlers and they will call each other once any  of these events is fired.

  1. To start the simulation, edit the ‘onClick(ClickEvent event)’ method in the handler of the button described in [4] to the following.
  1. That’s it. We are ready to test the simulation. Run the example again. A button will be visible on the main screen of the browser apart from the leftover UI elements of the original example. Click the ‘Start’ button and watch the console. If everything has been done properly, you will see alternating outputs of ping and pong events.

You can choose to activate some UI elements, like a text box, when one event is called so that the output is available on the browser itself instead of console. This has been done in the screencast link at the beginning of this tutorial. I intended to show a totally basic usage and hence have minimized the use of UI. This also shows that the EventBus is not restricted to be used with UI elements and can be extended for a broader use.

Other Useful Links:

http://code.google.com/webtoolkit/articles/mvp-architecture.html#events

http://stackoverflow.com/questions/998621/gwt-custom-event-handler

[DOWNLOAD SOURCE]

Share Comments
comments powered by Disqus