Vaadin - развернуть компоненты в сетке в Vaadin

Вот рабочий пример без дополнительных надстроек. Вы можете использовать горизонтальную и вертикальную компоновку.

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());
        }
    }
}

Пример для Vaadin 7, но концепция должна работать и с Vaadin 6.

Ответ Раффеля - лучшее и самое быстрое решение этого вопроса. Но при его реализации у меня возникла проблема со структурой проекта.

Я сделал это по-своему. Изменение размера компонентов в сетке кажется сложной задачей. Итак, я перешел к вертикальной и горизонтальной компоновке.

Я установил «C» и «B» в вертикальной компоновке под названием «VL». И я установил «L», «VL» и «R» в горизонтальной компоновке под названием «HL». И я добавил кнопки для переключения, где мне было нужно. Всякий раз, когда я нажимаю любую кнопку-переключатель, он скроет макет. Я добился этого, переопределив

 setExpandRatio();

Когда нажимается кнопка переключения, я переопределяю setExpandRation () для этого компонента. И снова, когда кнопка нажимается снова, я сбрасываю setExpandRatio () на более старое значение. Эта идея хорошо работает с мониторами любого размера.

Думаю, вам повезет больше, если вы воспользуетесь надстройкой BorderLayout. Я не говорю, что это невозможно сделать с помощью GridLayout, но я считаю, что это требует дополнительных усилий. Посмотрите демонстрацию.

Как и в демонстрации, вы можете заменить позицию кнопкой «восстановить» при нажатии кнопки сворачивания (вы не упомянули о восстановлении части макета, но я предполагаю, что это было в ваших планах вместе с минимизацией?). Поэтому, когда вы щелкаете по минимуму в полноразмерном макете (скажем, R или восток), вы заменяете восточное положение кнопкой восстановления, которая заменяет себя макетом R.

Я бы попытался реализовать это таким образом, чтобы использовать VerticalLayouts и HorizontalLayouts. Непроверенный пример:

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);

Затем вы можете реализовать скрытие, удалив компонент из его макета или сделав его невидимым.