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

问题描述

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

当我最小化 R时； ‘C’&

当我最小化 B时， B必须占据该区域。

当我最小化 L时， C必须占据该区域。 ‘C’& B必须占据该区域。

解决方案

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

 公共类TestUI扩展了UI {
 
 Panel L = new Panel（）; 
面板C =新的Panel（）; 
面板B =新的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 =新的VerticalLayout（）; 
 vl.addComponent（C）; 
 vl.addComponent（B）; 
 vl.setExpandRatio（C，1）; 
 vl.setSizeFull（）; 
 
 Horizo​​ntalLayout hl =新的Horizo​​ntalLayout（）; 
 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）; 
} 
 
私有类CloseButtonHandler实现ClickListener {
私有面板布局； 
 
 public CloseButtonHandler（Panel layout）{
 this.layout = layout; 
} 
 
 @Override 
 public void buttonClick（ClickEvent event）{
 layout.setVisible（！layout.isVisible（））; 
} 
} 
} 
  

该示例适用于Vaadin 7但该概念也应适用于Vaadin 6。

I am doing my project in Vaadin 6. In that, I have integrated the components in a Grid layout. I have attached a image with this. It resembles my Project layout. It is similar to eclipse. So, The layout will have two side panels on left and right. and a center and bottom panel.And the red color in the image are buttons. When I press them the panel will be minimized. I want the center panel to expand and occupy the minimized panel's area. I have integrated the panels in grid layout. Can anyone tell me how to expand a component in the grid layout.

When I minimize 'R'; 'C' & 'B' have to occupy it's area.

When I minimize 'B'; 'C' have to occupy it's area.

When I minimize 'L'; 'C' & 'B' have to occupy it's area.

解决方案

Here a working example without additional add-on. You can use horizontal and vertical layout.

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

The example is for Vaadin 7 but the concept should work with Vaadin 6 too.

这篇关于Vaadin-在Vaadin中扩展网格布局中的组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！