CODEWITHSUNDEEP
componentsvaadinexpandgrid-layout
Gugan Mohan
Gugan Mohan

Reputation: 1645

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

Upvotes: 9

Views: 9313

Answers (4)

raffael
raffael

Reputation: 2456

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.

Upvotes: 6

Gugan Mohan
Gugan Mohan

Reputation: 1645

Raffel's answer is the best and quickest solution for this question. But, I had some Project structure problem in implementing it.

I did it in my way. Resizing Components in Grid layout seem to be a difficult. So, I moved to Vertical, and horizontal layouts.

I set 'C' and 'B' in Vertical Layout called 'VL'. And I set 'L' and 'VL' and 'R' in a Horizontal Layout called 'HL'. And I added buttons to toggle wherever I needed. Whenever I press any toggle button, It will hide the layout. I achieved it by redefining the 

 setExpandRatio();

When a toggle button is pressed, I redefined the setExpandRation() for that component. And again when the button is pressed again I reset the setExpandRatio() to older value. This idea works well in all size monitors.

Upvotes: 4

Henri Kerola
Henri Kerola

Reputation: 4967

I would try to implement this that way that I use VerticalLayouts and HorizontalLayouts. An untested example:

HorizontalLayout root = new HorizontalLayout();
root.setSizeFull();

Component l = ...
l.setWidth("200px");
l.setHeight("100%");
root.addcomponent(l);

VerticalLayout cb = new VerticalLayout();
cb.setSizeFull();

Component c = ...
c.setSizeFull();
cb.addComponent(c);
cb.setExpandRatio(c, 1);

Component b = ...
b.setWidth("100%");
l.setHeight("200px");
cb.addComponent(b);

root.addcomponent(cb);
root.setExpandRatio(cb, 1);

Component r = ...
r.setWidth("200px");
r.setHeight("100%");
root.addComponent(r);

Then you can implement hiding by removing a component from its layout or setting it invisible.

Upvotes: 2

miq
miq

Reputation: 2766

I guess you'll have more luck using the BorderLayout addon. I'm not saying it can't be done with GridLayout, but I believe it requires more effort. Check out the demo.

Just like in the demo, you could replace a position with a "restore" button when the minimize button is clicked (you didn't mention about restoring the layout part, but I guess that was in your plans along with minimize?). So when you click minimize in the full-size layout (say, R, or east), you replace the eastern position with a restore button, which replaces itself with the layout R.

Upvotes: 2

Related Questions