Loading...
Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Any support for Split Buttons?

Jared Graber
1 decade ago May 04, 2010 8:36pm
Marko Grönroos
1 decade ago May 04, 2010 8:51pm
Jared Graber
1 decade ago May 04, 2010 10:58pm
Marko Grönroos
1 decade ago May 05, 2010 12:30am

Ok, I see, I thought it would also act as a Button as it actually inherits it. Perhaps Henri adds that feature in future.

Meanwhile, you could try compositing the split button, perhaps from a Button and the PopupButton. You'll need to crop the components a bit.

I thought that this would make a nice example of CustomComponent capabilities, so here:

/** A Button + Select compoment. */
class SplitButton extends CustomComponent {
    Button button;
    Select select;

    public SplitButton(String caption, Container dataSource) {
        addStyleName("splitbutton");
        
        HorizontalLayout layout = new HorizontalLayout();

        // Create the Button part on the left
        button = new Button(caption);
        layout.addComponent(button);
        
        // Create the Select part on the right
        select = new Select();
        select.setNullSelectionAllowed(false);
        select.setWidth("26px"); // Truncate to get only the button
        select.setContainerDataSource(dataSource);
        select.setImmediate(true); // Immediate by default
        layout.addComponent(select);
        
        setCompositionRoot(layout);
    }
    
    /* Forward various methods to the proper subcomponent. */
    public void addListener(Button.ClickListener listener) {
        button.addListener(listener);
    }
    
    public void addListener(Property.ValueChangeListener listener) {
        select.addListener(listener);
    }
    
    public void setIcon(Resource icon) {
        button.setIcon(icon);
    }

    public void setCaption(String caption) {
        button.setCaption(caption);
    }
    
    public void setContainerDataSource(Container newDataSource) {
        select.setContainerDataSource(newDataSource);
    }
}

void joining() {
    VerticalLayout layout = new VerticalLayout();
    
    // Items for the drop-down menu
    IndexedContainer container = new IndexedContainer();
    String items[] = new String[] {"Hard", "Harder", "Even harder"};
    for (String item: items)
        container.addItem(item);
    
    SplitButton splitbutton = new SplitButton("Kick me", container);
    
    // Handle clicks in the Button part
    splitbutton.addListener(new Button.ClickListener() {
        public void buttonClick(ClickEvent event) {
            getWindow().showNotification("Aaaaagh!");
        }
    });

    // Handle selections in the drop-down list
    splitbutton.addListener(new Property.ValueChangeListener() {
        public void valueChange(ValueChangeEvent event) {
            getWindow().showNotification((String) event.getProperty().getValue());
        }
    });
    
    layout.addComponent(splitbutton);

You'll also need to tweak the CSS a little:

.splitbutton .v-filterselect-input {
    display: none;
}

.splitbutton .v-filterselect-button {
    border-left: thin solid gray;
}

.splitbutton .v-button-wrap {
    margin-right: -10px; /* Crop the right side of the Button. */
}

Check out the live example. I tested it on Firefox; hopefully the CSS trick works in other browsers as well.

The v-filterselect-button (Select button) may need a bit further tweaking, the image doesn't fit exactly with the Button part.

Jouni Koivuviita
1 decade ago May 05, 2010 11:54am
Dmitri Livotov
1 decade ago May 05, 2010 12:31pm