UI 大小和滚动条的 Vaadin 问题

Question

我真的是 vaadin 的新手，我已经为这个问题苦苦挣扎了 2 天，我很绝望。我修改了原始的 addressbook 示例，在我不得不用另一个控件扩展 ContactForm 之前，它是完美的。更容易展示我想要实现的目标。如果我可以向右滚动就好了，但我不能。我展示了我已经拥有的东西，也许你们中的一些人会注意到我的错。我不会 post 所有代码，只需要必要的部分。

这是我创建主布局的地方。

public class VaadinKoliUI extends UI {
@Override
protected void init(VaadinRequest request) {
    TabSheet tabsheet = new TabSheet();
    HorizontalLayout residentalsTab = new ResidentalsUI();
    residentalsTab.setSizeFull();
    tabsheet.addTab(residentalsTab,"Lakók");
    tabsheet.setSizeFull();
    setContent(tabsheet);
}

}

public class ResidentalsUI extends HorizontalLayout implements View{

private Grid residentalsList = new Grid();
ResidentalFormTest residentalForm = new ResidentalFormTest(this);

public ResidentalsUI(){
    buildLayout();
}
private void buildLayout(){
    HorizontalLayout actions = new HorizontalLayout(filter,excelDownload, newResidental);
    actions.setWidth("100%");
    filter.setWidth("100%");
    actions.setExpandRatio(filter, 1);

    VerticalLayout left = new VerticalLayout(actions, getResidentalsList());
    left.setSizeFull();
    getResidentalsList().setSizeFull();
    left.setExpandRatio(getResidentalsList(), 1);

    HorizontalLayout mainLayout = new HorizontalLayout(left, residentalForm);

    mainLayout.setSizeFull();
    mainLayout.setExpandRatio(left, 1);

    this.setSizeFull();
    this.addComponent(mainLayout);

}

}

public class ResidentalFormTest extends Panel{
FormLayout content = new FormLayout();
Button save = new Button("Save", this::save);
//more buttons and controlls
public ResidentalFormTest(ResidentalsUI rUI) {
    this.rUI = rUI;
    buildLayout();
}
private void buildLayout() {
    this.setSizeUndefined();

    content.setMargin(true);
    HorizontalLayout actions = new HorizontalLayout(save, cancel);
    actions.setSpacing(true);

    content.addComponents(actions, name, sex, address, email, phoneNumber, major,classYear,neptunCode,
            roomNumber, rfidCode,comment,equipment,equipment1,equipment2);
    actions.setSizeUndefined();

    this.setContent(content);
}

}

据我所知，我必须使用面板，因为 FormLayout 无法显示滚动条。我应该使用 .setSizeFull() 将我的根设置为完整，并使用 .setSizeUndefined() 将子项设置为未定义，这样它将是浏览器的大小 window，如果更大，它将显示一个滚动条。如果我修改 VaadinKoliUI class 如下所示，我有滚动条，但 ui 缩小了。

public class VaadinKoliUI extends UI {
@Override
protected void init(VaadinRequest request) {
    TabSheet tabsheet = new TabSheet();
    HorizontalLayout residentalsTab = new ResidentalsUI();
    residentalsTab.setSizeUndefined();
    tabsheet.addTab(residentalsTab,"Lakók");
    tabsheet.setSizeFull();
    setContent(tabsheet);
}

}

像这样：

现在我不知道该怎么办了。

但是如果有人有更简单和更好的想法ui让 ContactForm 可以滚动请告诉我。

提前致谢巴拉斯

Answer 1

我觉得你应该

VaadinKoliUI.setSizeFull
ResidentalsUI.setSizeFull
ResidentalsUI.residentalsList.setSizeFull
ResidentalFormTest.setSizeFull
ResidentalFormTest.content.setSizeUndefined
ResidentalsUI.left.setSizeFull

我还建议删除 ResidentalsUI 中的 HorizontalLayout mainLayout，因为它本身就是水平布局（如果可能的话，重命名它，因为它不是 UI 并删除implements View 因为它似乎不是视图）。

您的展开比率看起来不错，这是类我要写的：

public class VaadinKoliUI extends UI {
@Override
protected void init(VaadinRequest request) {
    TabSheet tabsheet = new TabSheet();
    ResidentalsLayout residentalsTab = new ResidentalsLayout();
    residentalsTab.setSizeFull();
    tabsheet.addTab(residentalsTab,"Lakók");
    tabsheet.setSizeFull();
    setContent(tabsheet);
}

public class ResidentalsLayout extends HorizontalLayout {

    private Grid residentalsList = new Grid();
    ResidentalFormTest residentalForm = new ResidentalFormTest(this);

    public ResidentalsLayout(){
        buildLayout();
    }

    private void buildLayout(){
        HorizontalLayout actions = new HorizontalLayout(filter,excelDownload, newResidental);
        actions.setWidth("100%");
        filter.setWidth("100%");
        actions.setExpandRatio(filter, 1);

        VerticalLayout left = new VerticalLayout(actions, getResidentalsList());
        left.setSizeFull();
        residentalsList.setSizeFull();
        left.setExpandRatio(residentalsList , 1);

        addComponents(left, residentalForm);
        setExpandRatio(left, 1);

        setSizeFull();
    }
}

public class ResidentalFormTest extends Panel {
    FormLayout content = new FormLayout();
    Button save = new Button("Save", this::save);
    //more buttons and controlls
    public ResidentalFormTest(ResidentalsLayout rUI) {
        this.rUI = rUI;
        buildLayout();
    }

    private void buildLayout() {
        setSizeFull();

        content.setMargin(true);
        HorizontalLayout actions = new HorizontalLayout(save, cancel);
        actions.setSpacing(true);

        content.addComponents(actions, name, sex, address, email, phoneNumber, major,classYear,neptunCode, roomNumber, rfidCode, comment, equipment, equipment1, equipment2);
        content.setSizeUndefined();

        setContent(content);
    }
}

让我知道它是否按预期工作。

Answer 2

I should set my root to full with .setSizeFull() and the childs to undefined...

在您的情况下，您应该将 root 视为您的 Panel，将 FormLayout 视为 child。根据 Vaadin book:

Normally, if a panel has undefined size in a direction, as it has by default vertically, it will fit the size of the content and grow as the content grows. However, if it has a fixed or percentual size and its content becomes too big to fit in the content area, a scroll bar will appear for the particular direction

下图是 天真的 视觉表示尝试：

这就是说，从您修改 ResidentalFormTest 以扩展 Panel 并将 FormLayout 设置为内容的那一刻起，为了使您的面板具有滚动条：

在 ResidentalFormTest.buildLayout() 中将面板大小设置为 100%： this.setSizeFull()
将内容大小设置为未定义，这样它就可以 "expand" 超出面板大小：在 ResidentalFormTest.buildLayout() 中：content.setSizeUndefined()

为了修复网格和面板之间的 space 分配，我认为 3:1 比例应该足够了。在 ResidentalsUI.buildLayout():

mainLayout.setExpandRatio(左, 3);
mainLayout.setExpandRatio(residentalForm, 1);

注意： 有时检查（或尝试更改）渲染元素的属性、样式等可能会派上用场。某些浏览器（chrome, firefox ) built-in 支持此类开发人员工具，可通过菜单或键盘组合访问，例如 CTRL+SHIFT+我

UI 大小和滚动条的 Vaadin 问题

Vaadin problems with UI size and scrollbar

java

layout

vaadin

vaadin7