Vaadin布局扩展
Vaadin layout expansion
使用 Vaadin 7,我正在尝试完成与此处提出的其他问题类似的布局,但有一个主要区别:
我希望我的内容布局填充剩余的 space 仅当 中没有足够的内容时。这将导致如下布局:
我还希望布局能够执行以下操作:
当我添加更多内容,足以填满内容布局区域,继续添加更多时,页脚会留在原处,出现滚动条,之后添加的内容会添加到页脚下方。
除了第一张图片之外,添加足够的内容应该会导致以下布局:
我不知道我是否正确理解了你的问题,但让我们试试我的代码,看看它是否有帮助:
final VerticalLayout layout = new VerticalLayout();
layout.setMargin(true);
layout.setSpacing(true);
layout.setStyleName("flow_visible");
final HorizontalLayout navBarLayout = new HorizontalLayout();
final VerticalLayout contentLayout = new VerticalLayout();
final VerticalLayout spacingLayout = new VerticalLayout();
final HorizontalLayout footerLayout = new HorizontalLayout();
String dummyText = "TDummy text";
navBarLayout.addComponent(new Label("Navigation bar"));
navBarLayout.setStyleName("navbar");
navBarLayout.setWidth("100%");
contentLayout.setSizeFull();
contentLayout.setSpacing(true);
Button addButton = new Button("Add more content",
(Button.ClickListener) clickEvent -> {
contentLayout.addComponent(new Label(dummyText),
contentLayout.getComponentCount() - 2);
});
contentLayout.addComponent(addButton);
for (int i = 0; i < 6; i++) {
contentLayout.addComponent(new Label(dummyText));
}
spacingLayout.setSizeFull();
contentLayout.addComponent(spacingLayout);
contentLayout.setExpandRatio(spacingLayout, 1f);
footerLayout.addComponent(new Label("Footer"));
footerLayout.setStyleName("footer");
footerLayout.setWidth("100%");
contentLayout.addComponent(footerLayout);
layout.addComponent(navBarLayout);
layout.addComponent(contentLayout);
layout.setSizeFull();
layout.setExpandRatio(contentLayout, 1f);
此代码的工作原理:http://i.imgur.com/1HH1wm7.gif
使用 Vaadin 7,我正在尝试完成与此处提出的其他问题类似的布局,但有一个主要区别:
我希望我的内容布局填充剩余的 space 仅当 中没有足够的内容时。这将导致如下布局:
我还希望布局能够执行以下操作:
当我添加更多内容,足以填满内容布局区域,继续添加更多时,页脚会留在原处,出现滚动条,之后添加的内容会添加到页脚下方。
除了第一张图片之外,添加足够的内容应该会导致以下布局:
我不知道我是否正确理解了你的问题,但让我们试试我的代码,看看它是否有帮助:
final VerticalLayout layout = new VerticalLayout();
layout.setMargin(true);
layout.setSpacing(true);
layout.setStyleName("flow_visible");
final HorizontalLayout navBarLayout = new HorizontalLayout();
final VerticalLayout contentLayout = new VerticalLayout();
final VerticalLayout spacingLayout = new VerticalLayout();
final HorizontalLayout footerLayout = new HorizontalLayout();
String dummyText = "TDummy text";
navBarLayout.addComponent(new Label("Navigation bar"));
navBarLayout.setStyleName("navbar");
navBarLayout.setWidth("100%");
contentLayout.setSizeFull();
contentLayout.setSpacing(true);
Button addButton = new Button("Add more content",
(Button.ClickListener) clickEvent -> {
contentLayout.addComponent(new Label(dummyText),
contentLayout.getComponentCount() - 2);
});
contentLayout.addComponent(addButton);
for (int i = 0; i < 6; i++) {
contentLayout.addComponent(new Label(dummyText));
}
spacingLayout.setSizeFull();
contentLayout.addComponent(spacingLayout);
contentLayout.setExpandRatio(spacingLayout, 1f);
footerLayout.addComponent(new Label("Footer"));
footerLayout.setStyleName("footer");
footerLayout.setWidth("100%");
contentLayout.addComponent(footerLayout);
layout.addComponent(navBarLayout);
layout.addComponent(contentLayout);
layout.setSizeFull();
layout.setExpandRatio(contentLayout, 1f);
此代码的工作原理:http://i.imgur.com/1HH1wm7.gif