Togglable panel?

Vaadin 6 / 7 / 8 Framework UI
1

Hi,

I have somekind of searchform with some “advanced” fields, which should only be shown by users request. So user should be able to toggle a panel or something else to make those fileds visible or to hide. Any idea how to do that?

Thanks,
Rudolf

2

Use a button to toggle the visibility a layout that contains the advanced fields. Theme the button to look like you want to, using a style name and a custom theme.

3

This code produces a collapsible box. Its notthing special but may you can reuse it.


public class CollapseableBox extends CustomComponent {

    private static final long serialVersionUID = 632703177884323377L;
    final private CssLayout root;
    private CssLayout bodyContainer;
    
    void toggleBodyVisible(){
        bodyContainer.setVisible(!bodyContainer.isVisible());
    }
    
    public CollapseableBox(String title, Component body) {
        super();
        root = new CssLayout();
        root.addStyleName("collapseblebox-container");
        setCompositionRoot(root);
        draw(title, body);
    }

    void draw(String title, Component body) {
        CssLayout titleLayout = new CssLayout();
        titleLayout.addStyleName("collapsablebox-title");
        titleLayout.addComponent(new Label(title));
        titleLayout.addListener(new LayoutClickListener() {
            private static final long serialVersionUID = -4750845792730551399L;
            @Override
            public void layoutClick(LayoutClickEvent event) {
                toggleBodyVisible();
            }
        });
        
        bodyContainer = new CssLayout();
        bodyContainer.addStyleName("collapsablebox-body");
        bodyContainer.addComponent(body);
        
        root.addComponent(titleLayout);
        root.addComponent(bodyContainer);
    }
}


.collapsablebox-title {
	font-size: 17px;
	background-color: white;
	border-color: #999999;
	border-width: 1px 1px 0px 1px;
	border-style: solid;
	-moz-border-radius: 8px 8px 0px 0px;
	-webkit-border-radius: 8px 8px 0px 0px;
	padding: 5px;
	background: #FFFFFF url(images/chevron_down.png) no-repeat 96% center;
}
.collapsablebox-body {
	background-color: white;
	border-color: #999999;
	border-width: 0px 1px 1px 1px;
	border-style: solid;
	-moz-border-radius: 0px 0px 8px 8px;
	-webkit-border-radius: 0px 0px 8px 8px;
	padding: 5px;
}

Usage:
    new CollapseableBox(title, form)
4

Thanks, CollapseableBox works great!

5

Thanks so much!! It was really helpful

6

works cool, thanks :slight_smile:

7

Thanks so much!! It was really helpful