Style vaadin menubar popups
Our new application frame has two different vaadin menubars. One for the application menu and one as "hidden" menubar for the user options.
Here's a merged screenshot of both menubars:
Menubar popup
As you can see, the left popup is dark and the right popup is bright. Usually, vaadin doesn't allow custom "additional" style definitions for menubar popups. The default style name is:
v-menubar-popup
The name is defined in the class com.vaadin.shared.ui.menubar.MenuBarState as
If you want to add an additional style class, it's simply not possible because the client implementation (com.vaadin.client.ui.VMenuBar) sets the primary style name, from the menubar, as style name for the popup overlay. The only thing you can do is, to change the primary stylename of your menubar. The problem is that you have to define all styles for the menubar-popup and menuitems, submenus, ... again in your style file. We tried it but it was horrible because you can't easily change the theme.
We tried to find a solution without changing vaadin client. We tried to set a primary style name as e.g. customstylepopup v-window-popup. But the client menu implementation has following code in getPrimaryStyleName:
String fullClassName = getStyleName(elem);
// The primary style name is always the first token of the full CSS class
// name. There can be no leading whitespace in the class name, so it's not
// necessary to trim() it.
int spaceIdx = fullClassName.indexOf(' ');
if (spaceIdx >= 0) {
return fullClassName.substring(0, spaceIdx);
}
return fullClassName;
}
(it makes sense to do this!)
So, it wasn't possible with simple tricks. The only solution - we found - was an extension of VMenuBar to override getPrimaryStyleName and return a custom style class concatenated with the default style class, something like this:
public String getStylePrimaryName()
{
if (popupStyle != null)
{
return popupStyle + " " + super.getStylePrimaryName();
}
return super.getStylePrimaryName();
}
It wasn't our preferred solution, but we had another hack for setting ids of menu items. So it wasn't hard to add another hack for the style name 
With our modification, it'll be possible to add custom style classes to menubar popups:
Custom style names
The source code is available on sourceforge.
Development | rjahn | 07/04/2015
RSS-Feed