Vaadin - 在Vaadin的网格布局中展开组件

Question

我正在使用Vaadin 6进行项目开发。我在其中将组件集成到网格布局中，如附带的图片所示。它类似于eclipse界面，左右两侧各有一个侧边栏，中心和底部各有一个面板。 图片中红色的是按钮。当我按下它们时，面板会被最小化。 我想让中心面板扩展并占用最小化面板的区域。我已经在网格布局中集成了面板。请问有人知道如何扩展网格布局中的组件吗？

当我最小化“R”时，“C”和“B”必须占用其区域。

当我最小化“B”时，“C”必须占用其区域。

当我最小化“L”时，“C”和“B”必须占用其区域。

- Gugan

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

这个示例适用于 Vaadin7，但这个概念也适用于 Vaadin6。

- raffael

---

是的，它在Vaadin 6中可以工作。但是，我仍然无法在我的项目中实现它。不管怎样，我接受这个答案，因为你回答了我的问题。 - Gugan

Answer 2

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

我用自己的方式解决了问题。在网格布局中调整组件大小似乎很困难。因此，我转向了垂直和水平布局。

我将'C'和'B'设置为名为'VL'的垂直布局。然后我将'L'、'VL'和'R'设置为名为'HL'的水平布局。我添加了按钮来切换需要的位置。每当我按下任何切换按钮时，它都会隐藏布局。我通过重新定义实现了这一点。

 setExpandRatio();

当切换按钮被按下时，我会重新定义该组件的setExpandRatio()。再次按下按钮时，我会将setExpandRatio()重置为旧值。这个想法在所有尺寸的显示器上都很有效。

- Gugan

Answer 3

我想您使用BorderLayout 插件可能会更加顺利。我不是说使用GridLayout不行，但我相信需要更多的努力。请查看演示。

就像演示中一样，当单击最小化按钮时，您可以用“恢复”按钮替换位置（您没有提到还原布局部分，但我猜这也在您计划之内）。因此，当您在全尺寸布局（例如R或东）中单击最小化时，您将把东侧位置替换为一个恢复按钮，该恢复按钮再被布局R替换。

- miq

---

似乎这个插件会对我有所帮助。一旦它满足了我的项目需求，我就会接受这个答案。谢谢你，miq。 - Gugan

嗨Miq。我尝试了你建议的方法。但是，我无法改变组件的大小。我只能改变边框布局的大小。 - Gugan

你的意思是，在组件上调用setWidth和setHeight，但它们不受限制？组件的大小是否与原始问题有关？我之所以问是因为在我的解决方案中，不需要调整任何组件的大小。相反，当单击"还原"按钮时，你将使用边框布局中的组件容器替换该按钮，反之亦然。 - miq

谁给我的回答点了踩，请告诉我们为什么你觉得我的回答没用。 - miq

可能吧，但这些是基础。我们必须自己掌控组件的大小。 - Gugan

Answer 4

我会尝试使用垂直布局和水平布局来实现这个功能。以下是一个未经测试的示例代码：

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

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

- Henri Kerola