Putting Content into the Panel Titlebar

Vaadin 6 / 7 / 8 Framework UI
1

Hi,
I hope someone can help with this problem. I know there is an addon to put components on the Window, but how about a Panel?

I have a situation where to save screen space, look more elegant, etc. I’d like to add a few components (in this case buttons) to the right hand side of the Panel title area.

Here’s how the (slightly edited to shorten the title area) Panel currently looks:

This is what I would like to achieve (clearly highly edited image!):

At the moment I am using Runo as the basis for my theme, for this appliation, but a clear goal would be to make this theme independent.

Any ideas, suggestions, etc. welcome.
Thanks in advance,
Anthony

2

Hi,

as far as I know, there’s no way to do this, short of either writing your own Panel implementation or modifying the Vaadin panel to handle components in the header area. But there does exist a hack to achieve a similar effect with AbsoluteLayout, see the following example code:


package com.example.absolutelayoutpaneltest;

import com.vaadin.Application;
import com.vaadin.ui.AbsoluteLayout;
import com.vaadin.ui.Button;
import com.vaadin.ui.Panel;
import com.vaadin.ui.Window;
import com.vaadin.ui.themes.Runo;

public class AbsolutelayoutpaneltestApplication extends Application {
    @Override
    public void init() {
        Window mainWindow = new Window("AbsoluteLayout hack");
        mainWindow.getContent().setSizeFull();
        setMainWindow(mainWindow);

        setTheme(Runo.THEME_NAME);

        AbsoluteLayout al = new AbsoluteLayout();
        al.setSizeFull();
        mainWindow.addComponent(al);

        Panel p = new Panel("Test panel");
        p.setSizeFull();
        al.addComponent(p);

        Button b = new Button("Button");
        al.addComponent(b, "top: 12px; right: 12px;");
    }
}

This will produce more or less what you want. The downside is of course that you have to handle the placement manually. If you need more than one button in the header just add them to e.g. a HorizontalLayout and then add that to the AbsoluteLayout.

-tepi

3

Thanks Teppo,
It’s not a pretty answer, but as you say at least it works. Would this be worth suggesting as an enhancement for Panel / Window classes do you think?
Regards,
Anthony

4

I think it’s definitely worth an enhancement ticket. I did a quick search and could not find any for Panel. For custom controls in Window header, there’s at least
this
 and
this
 ticket. I guess the issue is more general - we should allow adding these custom controls to the headers of Window, Panel, TabSheet and Accordion. Maybe also to the column headers of Table/TreeTable.

Please do create an enhancement ticket so then it’s at least documented as a wanted feature.

5

Thanks again Teppo,
I’ve added the
tickets
 and another one on improvements to the
Table
 as well. See what you think.
Regards,
Anthony

6

I did it slightly different, I created horizontal layout with label componenet(which is panel caption) and button component and applied panel style to horizontal layout.

Panel p = new Panel();
HorizontalLayout panelCaption = new HorizontalLayout{
addStyleName(“panelstyle”)
setMargin(true)
setSpacing(true)
addComponent(new Label(“Test Panel Caption”))
addComponent(new Button(“Button1”))
}
p.setContent(new VerticalLayout{
addComponent(panelCaption);
addComponent("…add other component " )
});

Given below are the styles for label and button

.v-horizontallayout.v-layout.v-horizontal.v-widget.panelstyle.v-horizontallayout-panelstyle{
background: none repeat scroll 0 0 #B9DCFF;
width:100%;
}

.v-horizontallayout.v-layout.v-horizontal.v-widget.panelstyle.v-horizontallayout-panelstyle .v-label{
font-size: 15.6px;
font-weight: bold;
white-space: nowrap;
}