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.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
ClickListener on Panel's caption bar
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 <div/> with class of 'v-panel-captionwrap'.
class="v-panel-captionwrap"
Here is the full stanza.
<div class="v-panel-captionwrap" style="margin-top: -37px;">
<div class="v-panel-caption v-panel-caption-color1 v-panel-caption-margin10">
<span>This is where panel caption would be</span>
</div>
</div>
This <div/> is enclosed in the Panel's v-panel <div/>. 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:
<div class="v-panel v-widget color1 v-panel-color1 margin10 v-panel-margin10"
id="MyPanelId"
style="overflow: hidden; padding-top: 37px; padding-bottom: 0px;">
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
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);
}
}
}
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]");