GWTP-based Navigation Menu

One of the recent GWTP-based project's requirements was to implement navigation menu with support for currently selected navigation place. The project used nested presenter layout, where each of the nested presenters was a separate navigation item in the menu. Something like this

The SimpleNestedExample from GWTP describes very basic history/place navigation without support for currently revealed place. For more info about GWTP history/place management refer to GWTP wiki.

The first thing to implement is the container for navigation item links, which will know about currently revealed place. GWTP's place management is implemented on top of the GWT history management, hence the navigation container widget has to support item selection by history token (navigation token in the code sample) to be able to highlight current place.

 /**
  * Selects the navigation item by name token
  * 
  * @param navigationToken
  *            String parameter identifying the name token
  */
 public void selectNavigationItemByToken(String navigationToken) {
  if (navigationToken == null || navigationToken == "") {
   return;
  }

  NavigationItem navigationItem = this.navigationItems
    .get(navigationToken);

  if (navigationItem == null) {
   return;
  }

  deselectNavigationItem(this.selectedNavigationItem);
  this.selectedNavigationItem = navigationItem;
  selectNavigationItem(this.selectedNavigationItem);
 }

The requirements for the project added some constraints to navigation items, so we had to implement a separate NavigationItem class. For simple navigation it's sufficient to use plain InlineHyperlink with styling.

The interesting part in all this is how to handle navigation events and I must say, GWTP makes it very easy to implement. The only thing to do is to implement com.gwtplatform.mvp.client.proxy.NavigationHandler and simply call previously implemented selectNavigationItemByToken() method

 @Override
 public void onNavigation(NavigationEvent navigationEvent) {
  selectNavigationItemByToken(navigationEvent.getRequest().getNameToken());
 }

The last step is to initialize the navigation widget in the presenter, which contains this widget (in our project it was HeaderPresenter):

1. Bind navigation widget to EventBus (usually inside onBind() method)

this.addRegisteredHandler(NavigationEvent.getType(), this.getView()
    .getNavigationBar());

2. Populate with all navigation items you want to be displayed in navigation menu (which are your custom name tokens for nested presenters). I'd suggest to do this in onReset() method as the header presenter is revealed only once and always stays visible.
3. Select the navigation item based on the current place - onReset() will fit better for this task as well. The reason to have this line of code is that the navigation widget has not been created yet at the time of the first reveal so it didn't receive the initial NavigationEvent.

final NavigationBar navigationBar = this.getView().getNavigationBar();
navigationBar.selectNavigationItemByToken(this.placeManager
    .getCurrentPlaceRequest().getNameToken());

That's all it takes to implement Navigation menu with selected item support in GWTP.