Question

I have a question regarding the event handling on client side in GWT.

In our application we have a quite complex structure of different modules and pages which are communicating via the gwt eventbus on client side. Now the amount of events is growing to fast for my opinion. E.g. I am opening a popup I need:

1. An event for opening the popup
2. An event for asking some data within the client
3. An event for getting back the data and fill in the dialog
4. An event for closing the popup
5. An event for handling the save Button

Am I thinking a little bit to complicated or missing something in the EventBus implementation? I just wanted to have some feedback out of the community as you are facing the same issues.

Answer 1

For what it’s worth, I have lots of events and more growing. And yes, I wonder if I can do with less, but when I skip an event and link elements directly, I regret it.

Here’s an example that I just fixed up yesterday. I have a DataGrid widget. I also support re-ordering of columns, hiding of columns, re-sizing columns, and coloring columns with a popup dialog. You click on a configure button, and a popup with the columns listed shows, and the user can click checkboxes to show or hide columns, click on a Move Up / Move Down button to re-order columns, and so on. Hit Apply on the popup and the popup disappears and the DataGrid re-configures.

Except that it didn’t. You’d click on Apply and the popup would just sit there, the user would wonder what was going on, the DataGrid would re-configure underneath, and then the popup would go away. We’re only talking a short amount of time — maybe a second or a bit more — but it was so so noticeable. Why was it happening? Because I got lazy and tied the popup directly to the configure button, and the Apply button directly to the DataGrid. You’d hit Apply, for example, and the call would be made to the DataGrid with the new configuration information. Only when the call returned would the popup would be torn down.

I knew it was bad when I did it, but I was being lazy. So I took the 20 minutes I needed to write up two messages and associated handlers in my mediator singleton. One message is issued by the DataGrid to start the configuration dialog, and one is issued by the popup to configure the DataGrid. Now the widgets are de-coupled, and the performance is much snappier. There is no sense of “stickiness”.

Now to your example, can you not combine (1) and (2)? And also (3), (4), and (5)? When the user clicks the configure button on my app, the event carries with it the current configuration information (including a reference to the DataGrid that originated the request). You can call this information the “payload”. When the user clicks the Apply button on the popup, the event payload includes all the new configuration information (including a reference to that original target DataGrid) that the event handler feeds to the target DataGrid when the event is handled. Two events — one to kick off the configuration and one to apply the end result.

Yes there are a plethora of events in any app that does something interesting, but events can carry a lot of information, so I would look at whether your event organization is too fractured.

---

As a extra bit, here is the code I use. I shamelessly copied elements of this pattern from one of Google’s examples.

The user can ask for help using a menu item:

@UiField
MenuItem help;

help.setCommand(new Command() {
      @Override
      public void execute() {
        BagOfState.getInstance().getCommonEventBus().fireEvent(new MenuHelpEvent());
      }
    });

For the event (in this case, the event fired when the user clicks on the Help menu item):

public class MenuHelpEvent extends GwtEvent<MenuHelpEvent.Handler> {

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

  public interface Handler extends EventHandler {
    void doMenuHelp();
  }

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

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

  public static HandlerRegistration register(EventBus eventBus, Handler handler) {
    return eventBus.addHandler(TYPE, handler);
  }

}

I have a singleton called Mediator in which ALL events are registered:

MenuHelpEvent.register(BagOfState.getInstance().getCommonEventBus(),
    new MenuHelpEvent.Handler() {
      @Override
      public void doMenuHelp() {
        new MenuHelp().execute();
      }
    });

Every event is mated with a Command object to do the work:

public class MenuHelp implements Command {

      @Override
      public void execute() {
        new InfoMessage(BagOfState.APP_MSG.unimplementedFeatureCaption())
            .setTextAndCenter(BagOfState.APP_MSG.unimplementedFeature());
      }

    }

Everything is decoupled. The menu widget is bound to a command that executes and then completes. The command fires the event on the bus then completes. The event fires off the execution of a Command and the completes. The Command shows the popup help panel (in this case, an “unimplemented” message to the user — yeah, I’ll get to it soon). Every interaction with a user’s input is handled extremely quickly and resolves. It can kick off a series of events to perform a long action, but never tying up the GUI to do so. And of course, since the elements are decoupled, I can call the same elements in other places (for instance, call the help Command through a button push as well as a menu item).