Add IDs to your Vaadin Menu items

Post to Twitter

It's a shame :) but Vaadin doesn't have built-in support for setting an ID on menu items. There are several tickets about this problem: http://dev.vaadin.com/ticket/3873, http://dev.vaadin.com/ticket/11307, http://dev.vaadin.com/ticket/14294

BTW, the whole menu solution is a little bit tricky and wrapped.

There are no excuses - a web technology should fully support web concepts. We tried to touch menu items, by ID, during our UI test automation efforts. It wasn't a problem to find an xpath for accessing menu items, but... it's a principle thing.

It was a nice task to implement ID support for menu items. We found a "general" solution - it's still a workaround, but as long as vaadin doesn't support it, it might help you.

Summarized

Extend server-side MenuBar and add a map for menuitem ids. Send the map to the client and add the id to the matching menu item. The client-side needs an extended VMenuBar and an extended MenuBarConnector.

We've used MenuBar for caching ids because it wasn't possible to extend menu item handling and MenuBar already has a connector.

An example

Menuitem IDs

Menuitem IDs

Details

The implementation is available in our Vaadin UI implementation. Simply use following classes:

MenuBar
VMenuBar
MenuBarConnector

And don't forget the replacement mappings for your widgetset before you start the compiler:

Widgetset replacements

The solution was built with vaadin 7.1 but we checked the implementation in 7.3.0 and it didn't change. So our workaround should work without problems.

We didn't need a lot LoC to solve the problem and it should be easy for you to understand what we did. If you want to know more details - simply ask.

Usage

A short code snippet:

MenuBar bar = new MenuBar();

MenuItem miInsert = bar.addItem("Insert");
MenuItem miUpdate = bar.addItem("Update");

bar.setId(miInsert, "mi_insert");
bar.setId(miUpdate, "mi_update");

As written before, it's not possible to set the ID on the item because of original implementation in vaadin. Don't use getId of menu item because this will return the "internal" id.

Keep coding :)