无法使gridlayout适应屏幕尺寸(Vaadin 6.7.4)

时间:2012-06-05 09:51:19

标签: java-ee vaadin

我有一个gridLayout的问题,以适应用户的屏幕大小,我想创建一个3列和2行的gridLayout,第一行将包含一个菜单,第二行将是使用面板的正文,以及第一列X第二行将包含一个树,但我无法得到我想要的结果,此代码显示面板但不是完整大小 这是我的代码,我找不到为什么它不起作用!!

@Override
public void init() {

    Window main = new Window("My App");
    main.setSizeFull();
    setMainWindow(main);

    VerticalLayout root = new VerticalLayout();
    main.setContent(root);
    main.getContent().setSizeFull();

    GridLayout grid = new GridLayout(3, 2);

    main.addComponent(grid);

    grid.setColumnExpandRatio(0, 0.13f);
    grid.setColumnExpandRatio(1, 0.86f);
    grid.setColumnExpandRatio(2, 0.0f);


    grid.setHeight(100, Sizeable.UNITS_PERCENTAGE);
    grid.setWidth(100,Sizeable.UNITS_PERCENTAGE);


    grid.addComponent(new Label("menu"), 0, 0, 0, 1);
    grid.addComponent(new Label("tree"), 1, 0, 1, 0);

    Panel pan = new Panel();
    pan.setWidth(100, Sizeable.UNITS_PERCENTAGE);
    pan.setHeight(100, Sizeable.UNITS_PERCENTAGE);

    VerticalLayout body = new VerticalLayout();
    body.setSizeFull();

    body.addComponent(pan);

    grid.addComponent(body, 1, 1, 1, 1);

}

1 个答案:

答案 0 :(得分:7)

在详细讨论您的问题之前,我想给您留下一个工具,可以帮助您了解组件在Vaadin中的扩展方式:

  • 将“?debug”添加到用于运行应用程序的地址的末尾(例如localhost / app /?debug“)
  • 会出现一个带有按钮的小窗口。
  • 按C清除,然后按AL分析布局
  • 组件树将显示为结果。您可以按加号
  • 浏览该树
  • 每次按下组件(标签,面板等)时,组件都会在屏幕上突出显示。

通过这个你可以看到我的代码下面有一个扩展整个屏幕的布局,一个面板扩展了网格的最后2个单元格和扩展宽度的标签

调试模式记录在Vaadin的书中

我相信组件正在正确扩展,但是在错误的地方。检查GridLayout在vaadin书中的工作原理。 以下代码更改您的坐标并添加一个标签,以显示面板确实正在采用网格的正确单元格。另外,将VerticalLayout添加到面板以进行对齐似乎更合乎逻辑:

@Override
public void init() {


    Window main = new Window("My App");
    main.setSizeFull();
            setMainWindow(main);

            VerticalLayout root = new VerticalLayout();
    main.setContent(root);
    main.getContent().setSizeFull();

    GridLayout grid = new GridLayout(3, 2);

    main.addComponent(grid);

    grid.setColumnExpandRatio(0, 0.13f);
    grid.setColumnExpandRatio(1, 0.86f);
    grid.setColumnExpandRatio(2, 0.0f);


    grid.setHeight(100, Sizeable.UNITS_PERCENTAGE);
    grid.setWidth(100,Sizeable.UNITS_PERCENTAGE);


            grid.addComponent(new Label("menu"), 0, 0, 2, 0);

            grid.addComponent(new Label("tree"), 0, 1);

            Panel pan = new Panel();
    pan.setWidth(100, Sizeable.UNITS_PERCENTAGE);
    pan.setHeight(100, Sizeable.UNITS_PERCENTAGE);




    VerticalLayout body = new VerticalLayout();
    body.setSizeFull();
    pan.addComponent(body);

    Label bodyLabel= new Label("body panel taking the 2 columns of the last row");
    bodyLabel.setSizeUndefined();


    body.addComponent(bodyLabel);
    body.setComponentAlignment(bodyLabel, Alignment.MIDDLE_CENTER);

    grid.addComponent(pan, 1,1 , 2, 1);

         }