9

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

Gugan
  • 1,625
  • 2
  • 27
  • 65

4 Answers4

6

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.

Roman Nikitchenko
  • 12,800
  • 7
  • 74
  • 110
raffael
  • 2,427
  • 4
  • 26
  • 42
  • Yes it is working in Vaadin 6. But, I still can't implement it in my project. Anyway, I accept this answer because you answered my question. – Gugan Mar 14 '13 at 04:41
4

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.

Gugan
  • 1,625
  • 2
  • 27
  • 65
2

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.

miq
  • 2,746
  • 2
  • 24
  • 35
  • Seems like the add-on will help me. I will accept this answer once it fulfil my project needs. Thankyu miq. – Gugan Mar 11 '13 at 12:09
  • Hey Miq. I tried what you suggested. But, I cant able to Change the size of components. Only i can able to change the Size of border layout. – Gugan Mar 13 '13 at 10:11
  • You mean, you call setWidth and setHeight on the components but they won't obey? Does the size of the components have to do something with the original problem? I'm asking because in my solution there won't be a need to resize any components. Instead, you replace the component container in borderlayout with a restore button and vice versa when restore button is clicked – miq Mar 13 '13 at 14:01
  • Whoever downvoted my answer, PLEASE let us all know why do you think my answer was not helpful. – miq Mar 13 '13 at 15:28
  • You are right Miq. I tried to resize the components. But, they didn't. The components get resized only when we change the size of the border layout. – Gugan Mar 14 '13 at 04:17
  • I guess this is slightly out of the scope of the original question.. but have you tried to analyze your layouts in debug mode (add ?debug in the end of your url)? Stuff like this happens usually when you have a layout with undefined size and relatively sized components inside of it. – miq Mar 14 '13 at 09:22
  • May be. But, these things are basics. We have to make control of components size by our own right. – Gugan Mar 14 '13 at 09:41
  • So your layouts' sizes are undefined? You will have to set a size for them if you want to be able to use relative size with the child components. This is not a bug in Vaadin or in the BorderLayout component. You can resize your components. – miq Mar 14 '13 at 11:08
2

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.

Henri Kerola
  • 4,947
  • 1
  • 17
  • 19