Expanding Layouts....

Vaadin 6 / 7 / 8 Framework UI
1

Hi there,

I’m back in business, and this time I have to build a prototype to convince my enterprise of using ITMill as the default web framework…

Well, my basic idea of the page layout is to get a GridLayout and separate it in two columns, the first column on the left will be a width fixed menu, and my second column on the right would be a floating width column that depends on the screen resolution or browser width. In each column there are Panels, so the panel on the right would always have the width of the remaining space.

How can it be done? I already tried to use the ExpandLayout, but I got nothing.

thanks for your help, this project is getting better each day.

2

Here is one solution using ExpandLayout (if I understood your needs correctly):

public void init() {

        Window main = new Window("ExpandLayout example");
        setMainWindow(main);

        ExpandLayout exp = new ExpandLayout(ExpandLayout.ORIENTATION_HORIZONTAL);
        main.setLayout(exp);

        OrderedLayout menuLayout = new OrderedLayout();
        menuLayout.setMargin(true); // optional
        menuLayout.setWidth("150px"); // optional, will take required width otherwise
        menuLayout.addComponent(new Button("Menu stuff"));
        exp.addComponent(menuLayout);

        OrderedLayout rightLayout = new OrderedLayout();
        rightLayout.setMargin(true); // optional
        exp.addComponent(rightLayout);
        exp.expand(rightLayout); // will expand with the browser

        Panel somePanel = new Panel("A panel");
        rightLayout.addComponent(somePanel);
        somePanel = new Panel("Another panel");
        rightLayout.addComponent(somePanel);

    }
3

Here is another solution, using SplitPanel to achieve the same:


    public void init() {

        Window main = new Window("SplitPanel example");
        setMainWindow(main);

        SplitPanel sp = new SplitPanel(SplitPanel.ORIENTATION_HORIZONTAL);
        sp.setSplitPosition(150, SplitPanel.UNITS_PIXELS);
        // optional, if you want the split position to be locked:
        // sp.setLocked(true);
        main.setLayout(sp);

        OrderedLayout menuLayout = new OrderedLayout();
        menuLayout.setMargin(true); // optional
        menuLayout.addComponent(new Button("Menu stuff"));
        sp.addComponent(menuLayout);

        OrderedLayout rightLayout = new OrderedLayout();
        rightLayout.setMargin(true); // optional
        sp.addComponent(rightLayout);

        Panel somePanel = new Panel("A panel");
        rightLayout.addComponent(somePanel);
        somePanel = new Panel("Another panel");
        rightLayout.addComponent(somePanel);

    }
4

thanks Marc, it really worked with the first option.

I had some complications because the child layout was a GridLayout, and I had to change to an OrderedLayout. But for now it’s ok.

5

Hi,

How to deal with ExpandLayout if I want to get the situation below:


*************************
*          A            *
*************************
*             *         *
*      B      *    C    * 
*             *         *
*************************

Component A has fixed height, Component C has fixed width, and B should expand as much as possible.

Is it possible or should I use CustomLayout and define directly div locations with appropriate css?

Sylvain

6

Sylvain, you’ll need two ExpandLayouts to achieve this.

[code]
Label a = new Label(“A”);
Label b = new Label(“B”);
Label c = new Label(“C”);

ExpandLayout ex1 = new ExpandLayout(); // This will be the vertical one, containing A and following ExpandLayout
ExpandLayout ex2 = new ExpandLayout(ExpandLayout.ORIENTATION_HORIZONTAL); // This is the horizontal one, containing B and C

ex1.addComponent(a);
ex1.addComponent(ex2);
ex1.expand(ex2);

ex2.addComponent(b);
ex2.addComponent(c);
// No need to call ‘expand’, since ExpandLayout will expand the first component by default
[/code]That should work.

7

Thanks Jouni, it looks so easy, but with something else than Label, there is some display problem, eg with Panel. Here is the ticket:

http://dev.itmill.com/ticket/1764

Sylvain.