Search code examples
componentsvaadinexpandgrid-layout

Vaadin - Expand components in Grid Layout in Vaadin


I am doing my project in Vaadin 6. In that, I have integrated the components in a Grid layout. I have attached a image with this. It resembles my Project layout. It is similar to eclipse. So, The layout will have two side panels on left and right. and a center and bottom panel. And the red color in the image are buttons. When I press them the panel will be minimized. I want the center panel to expand and occupy the minimized panel's area. I have integrated the panels in grid layout. Can anyone tell me how to expand a component in the grid layout.

When I minimize 'R'; 'C' & 'B' have to occupy it's area.

When I minimize 'B'; 'C' have to occupy it's area.

When I minimize 'L'; 'C' & 'B' have to occupy it's area. layout


Solution

  • Here a working example without additional add-on. You can use horizontal and vertical layout.

    public class TestUI extends UI {
    
        Panel L = new Panel();
        Panel C = new Panel();
        Panel B = new Panel();
        Panel R = new Panel();
    
        Button bL = new Button("Toggle L", new CloseButtonHandler(L));
        Button bC = new Button("Toggle C", new CloseButtonHandler(C));
        Button bB = new Button("Toggle B", new CloseButtonHandler(B));
        Button bR = new Button("Toggle R", new CloseButtonHandler(R));
    
        @Override
        protected void init(VaadinRequest request) {
            L.setWidth("80px");
            L.setHeight("100%");
            L.setContent(new Label("L"));
            R.setWidth("80px");
            R.setHeight("100%");
            R.setContent(new Label("R"));
            B.setHeight("80px");
            B.setWidth("100%");
            B.setContent(new Label("B"));
            C.setHeight("100%");
            C.setHeight("100%");
            C.setContent(new Label("C"));
    
            VerticalLayout vl = new VerticalLayout();
            vl.addComponent(C);
            vl.addComponent(B);
            vl.setExpandRatio(C, 1);
            vl.setSizeFull();
    
            HorizontalLayout hl = new HorizontalLayout();
            hl.addComponent(L);
            hl.addComponent(vl);
            hl.addComponent(R);
            hl.setExpandRatio(vl, 1);
            hl.setSizeFull();
    
            CssLayout root = new CssLayout();
            root.addComponent(bL);
            root.addComponent(bC);
            root.addComponent(bB);
            root.addComponent(bR);
            root.addComponent(hl);
            root.setSizeFull();
    
            setContent(root);
        }
    
        private class CloseButtonHandler implements ClickListener {
            private Panel layout;
    
            public CloseButtonHandler(Panel layout) {
                this.layout = layout;
            }
    
            @Override
            public void buttonClick(ClickEvent event) {
                layout.setVisible(!layout.isVisible());
            }
        }
    }
    

    The example is for Vaadin 7 but the concept should work with Vaadin 6 too.