Question

我正在Vaadin 6中完成我的项目。在那里，我已经在Grid布局中集成了组件。我附上了一张图片。它类似于我的项目布局。它类似于日食。因此，布局将在左侧和右侧有两个侧面板。以及中间和底部面板。而图像中的红色是按钮。当我按下它们时，面板将被最小化。我希望中心面板扩展并占据最小化面板的区域。我已经将面板集成在网格布局中。谁能告诉我如何在网格布局中扩展组件。

当我最小化'R'时; 'C'＆amp; 'B'必须占据它的区域。

当我最小化'B'时; 'C'必须占据它的区域。

当我最小化'L'时; 'C'＆amp; 'B'必须占据它的区域。 layout

Answer 1

这是一个没有附加插件的工作示例。您可以使用水平和垂直布局。

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。

Answer 2

Raffel的答案是这个问题的最佳和最快的解决方案。但是，我在实现它时遇到了一些Project结构问题。

我按照自己的方式做到了。调整网格布局中的组件大小似乎很难。所以，我转移到垂直和水平布局。

我在垂直布局中设置'C'和'B'，称为'VL'。我在一个名为'HL'的水平布局中设置'L'和'VL'和'R'。我添加了按钮以切换到我需要的任何地方。每当我按下任何切换按钮时，它都会隐藏布局。我通过重新定义

来实现它

 setExpandRatio();

按下切换按钮后，我重新定义了该组件的setExpandRation（）。再次按下该按钮时，我将setExpandRatio（）重置为旧值。这个想法适用于所有尺寸的显示器。

Answer 3

我猜你使用BorderLayout addon会有更多的运气。我不是说GridLayout无法做到，但我相信它需要更多的努力。查看demo。

就像在演示中一样，当点击最小化按钮时你可以用“恢复”按钮替换一个位置（你没有提到恢复布局部分，但我想这是在你的计划中以及最小化？）。因此，当您在全尺寸布局（例如，R或东）中单击最小化时，可以使用恢复按钮替换东部位置，该按钮将替换为布局R.

Answer 4

我会尝试以我使用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);

然后，您可以通过从布局中删除组件或将其设置为不可见来实现隐藏。

Vaadin - 在Vaadin中展开Grid Layout中的组件

4 个答案: