Toolbar add-on

Just published a new toolbar add-on that hopefully will make it easier to add toolbars with both buttons and menus. I found creating a decent looking toolbar frustratingly hard, in large part because of the CSS work involved, which, at least for me (and I know I’m not the only one), requires insane amounts of trial and error.

For example, I needed a toolbar that grouped a menu and a button. Getting a menu in the toolbar was the relatively easier part. I simulated this with a button that drops down a ContextMenu when it is clicked on. The hard part that I got working for class NativeToolbar in the add-on, but not for the others, was just removing the right border from the left button, and removing the left border from the right button, so they look grouped.

Another item that consumed a lot of time was figuring out how to get NativeButtons to behave properly in the toolbar. For some reason they didn’t visually depress like they were supposed to. I had this one block of CSS code that seemed to work well:

.v-nativebutton-transparent-background {
display: block;
background: transparent;
border-width: medium;
border-style: outset;
}

It made the buttons transparent and the border looked good. However, turns out, for some reason, that setting the border-style kills the clicking behavior. Works fine without the border-style line. Don’t know why. Doesn’t really make intuitive sense.

Anyway, here’s the text published with the add-on:


There are hints in various Vaadin projects and documentation for putting together a toolbar (a fundamental UI component), but I found all required huge amounts of additional work for them to be usable, mostly because of CSS complexities. Also, all of them allowed only buttons and not menus. This project enables menus by using the ContextMenu add-on which is required by this project.

There is some information on building a toolbar in the Vaadin tutorial. There is some information on building a toolbar in Reindeermods. There is some information on building a toolbar in Chameleon Theme.

This project takes from these and puts together a toolbar UI component that is intended to be easily usable. The project has 3 toolbars:

NativeToolbar - This is the one that works best. It is based on the descriptions in the tutorial and uses NativeButtons, which it says work best for this. It has rounded corners, centers both vertically and horizontally, wraps long text, properly groups buttons, and it generally looks pretty good even if widths are not specified. The demo shows that when widths are not specified, the only button that doesn’t look quite right is the grouped menu button and regular button (Menu Two). Also, in Firefox the top and left borders may not show up properly. In IE, the use of small text doesn’t work so the specified widths don’t work as well. This is easily remedied by specifying better widths and applies to all the toolbars.

SegmentToolbar - This is based on Segment in Chameleon Theme. It uses regular Buttons. It also looks attractive, has rounded corners, wraps long text, centers horizontally, and it generally looks pretty good even if widths are not specified. Grouping doesn’t work. Couldn’t figure out how to remove the right border of one button and the left border of another. Vertical centering also doesn’t work. Also in IE the bottom border may not appear.

CssToolbar - This doesn’t work particularly well. It is based on the toolbar example in Chameleon Theme. I am including it because it may have potential and also highlights an issue either in CssLayout or in ContextMenu. When you open the ContextMenu on top of a CssLayout, part of the CssLayout disappears.

Hi I just downloaded your toolbar addon. I put the jar file into my project, but when I try to use it I get this:

ThemeResource tr = new ThemeResource(“img/help_icon.png”);
Button tbHelp = toolBar.createAndAddButton(“Help”, tr);

The second line gives the following error:

The type org.vaadin.peter.contextmenu.ContextMenu$ClickListener cannot be resolved. It is indirectly referenced from required .class files

Can you tell me what I’m missing here? Do I need to include some other jar file to get the Toolbar to work? I have Toolbar-1.0.0.jar installed…

Thanks,

nbc

Neil - Toolbar requires the ContextMenu addon: http://vaadin.com/addon/contextmenu

Thanks!

nbc

Hi all!
I have a problem with this one addon:
I recieve such error when using this addon:

Caused by: java.lang.ClassNotFoundException: com.vaadin.addon.toolbar.NativeToolbar 

I have this two importes:

import com.vaadin.addon.toolbar.NativeToolbar;
import com.vaadin.addon.toolbar.Toolbar;

and such jars in my project:

  • vaadin-6.7.1.jar
  • toolbar-1.0.0.jar
  • contextmenu-3.1.0.jar

Does anybody have any ideas about this issue?