MultiButton Widget

Have you ever had a situation where you have many buttons in the UI making it look messy and cluttered but still can’t get rid of them because they all are sometimes needed? Try grouping those less frequently used buttons with the new MultiButton component I’ve implemented.

MultiButton is just like regular Vaadin button except that it has a small button on it’s right edge that opens up a popup menu containing the sub buttons. This is particularly useful if you have many same kind buttons, for example: print all reports, print income report, print outcome report etc. With the MultiButton you can put the most frequently used function to the button that is always visible and less frequently used functions as sub items.

Give it a try if you feel like it, you can download MultiButton for free from
Vaadin Directory

Check out the online demo from
http://peter.virtuallypreinstalled.com/MultiButton

If you have any suggestions or ideas, post them here so I can further develop the component.

Hello Peter,

nice idea :slight_smile:

How do think about these additions/changes:

  • make click on the popup area toggle display of the overlay so that the second click hides the extra buttons again
  • add a new method
    removeButton(String string)
    to be able to remove a button added by
    addButton(String string)
    again
  • how about having all buttons share the same clickListener
  • calculate the width of the button dynamically

Cheers
Andreas

Like the widget, any way to get the dropdown to appear when the main button is pushed as well?

Thanks!

Mark

Maybe you could try the
PopupButton
add-on?

Thanks for the suggestion!

Not exactly what I was looking for, but its a good alternative…

Can you help me with the problem?
When I try to compile widget i get the following error
I use vaadin-6.2.5, is this important?

Refreshing module from source
Validating newly compiled units
Removing units with errors
[ERROR]
Errors in ‘jar:file:/my_project/WebContent/WEB-INF/lib/MultiButton-1.0.1.jar!/org/vaadin/peter/multibutton/client/ui/VMultiButton.java’
[ERROR]
Line 92: The method getChildByTagName(String) is undefined for the type UIDL
[ERROR]
Line 142: The method addClassName(String) is undefined for the type Element
[ERROR]
Line 147: The method addClassName(String) is undefined for the type Element
[ERROR]
Line 159: The method removeClassName(String) is undefined for the type Element
[ERROR]
Line 163: The method removeClassName(String) is undefined for the type Element
Scanning for additional dependencies: jar:file:/my_project/WebContent/WEB-INF/lib/vaadin-6.2.5.jar!/com/vaadin/terminal/gwt/client/DefaultWidgetSet.java
Computing all possible rebind results for ‘com.vaadin.terminal.gwt.client.WidgetMap’
Rebinding com.vaadin.terminal.gwt.client.WidgetMap
Invoking
[WARN]
Widget class org.vaadin.peter.multibutton.client.ui.VMultiButton was not found. The component org.vaadin.peter.multibutton.MultiButton will not be included in the widgetset.
Widgetset compilation completed

It would be nice to have a mix of the two components :
Multibutton
and
PopupButton
.

Like in Eclipse, when I click on the right part, I can have some menuItem or buttons (like MultiButton), etc. in a general case, simply a Vaadin container.

Check out my
SplitButton
add-on!

New version 2.0 released!

2.0 adds more normal button behavior with completely reworked client side implementation that now uses Vaadin core’s buttons. These changes also include support for keyboard tab-index focus etc. Version 2.0 also adds support for dynamic size calculation, ability to disable popup button and set it’s width through the API.

MultiButton multiButton = new MultiButton("Print all documents");
multiButton.setIcon(new ThemeResource("Printer.png"));

Button printReports = multiButton.addButton("Print reports");

multiButton.setPopupButtonPixelWidth(100);
multiButton.setPopupButtonEnabled(false);

// Any of the following is now supported, default behavior is the undefined size.
// multiButton.setSizeFull(); 
// multiButton.setWidth("400px");
// multiButton.setSizeUndefined();

Hello,

I just upgraded from 1.0.x to the 2.0.1 version.
So far everything works as expected.
But we see one small difference in behaviour:

  • When I click on the drop down, the drop down opens
  • When I now click somewhere else in the application the dropdown remains open

In the 1.x version the open popup did automagically close when we clicked somewhere else in the application
Is there a flag to have this behaviour back ?

When I do debug the layout with ?debug in the url I receive these messages for each multibutton:

org.vaadin.peter.multibutton.client.ui.VMultiButton did not produce allocatedSpace for com.vaadin.terminal.gwt.client.ui.VButton

???

Hmm… seems that there is a problem with the component that needs addressing. According to some tests i made this does not affect the visual behavior of the component but remaing only in the debug log.

Anyway, this issue needs addressing. I’ll fix it for the next version.

Hello Peter,

it is a very nice Widget.

Is there a new version of it? Because this bug doesn’t remain only at the debug log for me.

When I open the popup and do some other action that changes the layout, the sub-button is still drawn. Even when the Multibutton is no longer attached to the window.

It would be very nice to have this bug fixed. I hope you still have time to work on it.

I tested it on Firefox 12.0 and Chrome 18.0.1025.168 m

Thank you.

Jonas

New version 3.0 released for Vaadin 7 RC2/Final. Should have fixed all the mentioned problems, get it here: http://vaadin.com/directory#addon/multibutton

Hello Peter,
I tried this in vaadin-7.0.x and also 7.1.x, but it shows like widget is not compiled ! is this actually support 7.1.x ? I have compiled the widgetset and the entry is there in the “xxxWidgetset.gwt.xml”. Is there any known problem? Can you please help me to solve this issue?

Did you map your widgetset in your web.xml / ServletConfiguration annotation?

I did in the web.xml only !

When I placed the widgetset mapping as annotation, got it working, so hope we have to use any one either annotation or web.xml right?

If you use the annotation for something like Servlet mapping you also have to use it for widgetset mapping. As far as I know you can’t do some mapping in the web.xml and some in the annotation. If you use the Servlet-Mapping Annotation you should generally avoid using the web.xml at all.

I have a problem with this add on. I made all what you said but it dont work properly. I downloaded 3.0 version. Vaadin version 7.1.
You can see on this pictures i dont have the picture (arrow) in the popup button and the buttons are not properly alignet.
My code for this button is below:

MultiButton multiButton = new MultiButton("Eksport excel");
 multiButton.setPopupButtonPixelWidth(40);
 multiButton.setPopupButtonEnabled(true);
 multiButton.setSizeFull(); 
 multiButton.setSizeUndefined();
multiButton.addButton(aButton);

hl.addComponent(multiButton);//hl ​HorizontalLayout

What made i wrong?
Best regards!

13445.png
13446.png