Panel with Button/Menu in Caption

Hi

In the new Valo-Theme Demo
http://demo.vaadin.com/valo-theme/#!panels
there is a Panel with a Button and a Menu in the caption section (see attached image).

I could not find anthing in the Panel’s API or any other resources on the internet on how to implement something similar. Can anybody help?

Best regards
Sascha

16455.png

This is not a panel. Looking at the HTML code reveals, that its just a CssLayout with a HorizontalLayout as caption and a VerticalLayout as content.

Thanks for your answer, Jan.

That’s what I suspected. Showing this example in a Panel demo is kind of confusing…

I find that styling a CssLayout is easier than a Panel component, plus I believe it’s faster to render on the UI

Here’s how it (basically) works:

public class FakePanel extends CssLayout {

    private final HorizontalLayout    caption        = new HorizontalLayout();
    private final VerticalLayout    content        = new VerticalLayout();
    private final Label                captionText    = new Label("");
    private Image                    iconContainer;

    public FakePanel() {
        setSizeFull();
        addStyleName(ValoTheme.LAYOUT_CARD);

        this.caption.addStyleName("v-panel-caption");
        this.caption.setWidth("100%");
        this.caption.setSpacing(true);
        addComponent(this.caption);

        this.captionText.setWidth("100%");
        this.caption.addComponent(this.captionText);
        this.caption.setExpandRatio(this.captionText, 1);

        this.content.setSizeFull();
        addComponent(this.content);
    }

    @Override
    public void setIcon(final Resource icon) {
        if (this.iconContainer != null) {
            this.caption.removeComponent(this.iconContainer);
        }
        this.iconContainer = new Image(null, icon);
        this.caption.addComponent(this.iconContainer, 0);
        this.caption.setComponentAlignment(this.iconContainer, Alignment.MIDDLE_LEFT);
        this.caption.setExpandRatio(this.iconContainer, 0);
    }

    @Override
    public void setCaption(final String caption) {
        this.captionText.setValue(caption);
    }

}

Now, one can add menus and buttons to the caption section.
Thanks for your input.

Well, if you say so :slight_smile:

I thought it would be clear enought that the caption says “Panel style layout”. The demo wasn’t actually designed to be demo, it was just my test application during development which unfortunately ended up as the official demo as well, since we failed to develop anything else in time.