Vaadin 7: Usage of UI vs. Navigator+Views

cporte picture cporte · Nov 26, 2013 · Viewed 20.5k times · Source

In Vaadin 7, a web application can have multiple entry points; the UIs. Each UI can only have a single Navigator containing Views.

We are working on an application which requires multi-level navigation, and for some screens we don't know if we should have a single UI with a navigator or multiple UIs with a shared menu component.

What are the advantages and inconveniences of UI and Navigator? Are there any guidelines about this choice?

Answer

dzezzz picture dzezzz · Jan 3, 2014

I recommend using one UI with Navigator as in my opinion it's enough to do the job. Main inconvinience of many UIs is reload when switching between them. Also you would need to remember about desired consistency, eg. to have same header in each UI. And from my experience you would for sure encounter more problems ;-)

To make it clean you should use MVP patter. I use similar to this one with com.google.common.eventbus.EventBus to handle events. I add eventBus to my views, post events there and handle them in appropriate presenter, without implementing listeners in view which in my opinion is more problematic. As MVP already reserves 'presenter' and 'view' I call Vaadin view 'page'.

You can create header, footer main menu and then content container (eg. some Layout) to wire navigator with:

Navigator n = new Navigator(UI.getCurrent(), layout);

To manage navigation I created PagesEnum and when changing view I post ChangePageEvent which gets PageEnum.SOME_PAGE as parameter. Optionally there is also an id of item to display. So in MainPresenter I have:

@Subscribe
public void changePage(ChangePageEvent event) {
    String url = event.getPageName();
    if (event.hasId()) {
        url += "/" + event.getEntityId();
    }
    navigator.navigateTo(url);
}

Then there are different possibilities:

  • in enter method of the page (Vaadin view) make sure that appropriate submenu is displayed.

  • add it as parameter to ChangePageEvent and handle it in changePage method.

  • hardcode it in PageEnum as new field, eg. subMenu and create other enum for submenus, chandle it in changePage method.

Submenu will be probably outside of the container that you wire Navigator with, so there you can create SubMenuPresenter and SubMenuView to handle submenu change.