ClickListener on Panel's caption bar

Vaadin 6 / 7 / 8
1

Is there a way to add a
ClickListener
 to the caption bar portion of a
Panel
?

It looks like the portion of the panel that is interesting is enclosed in a

with class of ‘v-panel-captionwrap’.

class="v-panel-captionwrap" Here is the full stanza.

[code]

This is where panel caption would be
[/code]This
is enclosed in the Panel's v-panel
. If you set the id on the panel to 'MyPanelId' [Panel]

Panel myPanel = new Panel(...); myPanel.setId("MyPanelId"); the resulting stanza is like what is shown below:

[code]

[/code]Is there a way to make use of this information to attach a click listener to the 'v-panel-captionwrap' section of this specific panel?

I prefer not to attach the
ClickListener
 to the entire panel unless necessary.

Thanks in advance,

John

2

In lieu of a better solution…

Use case:

  • toggle the contents of a panel when the caption bar is clicked.

The solution (kludge?) is to encapsulate the

ClickListener

 and toggleable behavior in a supporting class called
PanelCaptionBarToggler
.

Usage:

Panel myPanel = new Panel(...); new PanelCaptionBarToggler<Panel>( myPanel ); Implementation:

public class PanelCaptionBarToggler<T extends Panel> {
    private T panel;
    private Resource cacheIcon;
    private float COLLAPSED_WIDTH_PIXELS = 400f;
    private static final int CAPTION_BAR_HEIGHT = 30; 
    public PanelCaptionBarToggler(T panel) {
        this.panel = panel;
        panel.addClickListener((clickEvent->{
            if(clickEvent.getRelativeY()<CAPTION_BAR_HEIGHT) {
                toggleContent();
            }
        }));
    }

  
    private void toggleContent() {
      panel.getContent().setVisible(!panel.getContent().isVisible());
        if (!panel.getContent().isVisible()) {
            cacheIcon = panel.getIcon();
            panel.setIcon(FontAwesome.ARROW_CIRCLE_DOWN);
            panel.setWidth(COLLAPSED_WIDTH_PIXELS, Unit.PIXELS);
        } else {
            panel.setIcon(cacheIcon);
            panel.setWidth(-1, Unit.PIXELS);
        }
    }
 
}
3

Q: How to add a cursor to the caption bar of a panel?

A: For anyone interested, to add a cursor of ‘pointer’ to the caption bar:

.v-panel-caption-[b] showpointer [/b] { cursor: pointer; } Then with your panel:

Panel myPanel = new Panel(...);
myPanel.addStyleName("[b]
showpointer
[/b]");