9

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

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

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

当我最小化'L'时；'C' & 'B' 必须占据它的区域。 布局

4

4 回答 4

6

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

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。

于 2013-03-11T15:49:18.650 回答
4

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

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

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

 setExpandRatio();

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

于 2013-03-14T04:53:06.093 回答
2

我猜您使用BorderLayout 插件会更幸运。我并不是说不能用 GridLayout 来完成，但我相信它需要更多的努力。查看演示。

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

于 2013-03-11T11:47:41.023 回答
2

我会尝试以使用 VerticalLayouts 和 Horizo​​ntalLayouts 的方式实现这一点。一个未经测试的例子：

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

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

于 2013-03-11T15:14:55.213 回答