如何在Vaadin中扩展组件？

Question

SpringBoot 2 Vaadin 12.0.3

我花了一些时间观看视频教程和研究Vaadin的在线示例。不幸的是，已经发生了很大的变化，以至于我希望尝试的选项不再存在。

• CssLayout不再存在-由Div取代，后者不会公开expand(Component)。
• component.setWidth("300")无效。
• component.setWidth("300", UNIT.*)不起作用，因为UNIT不在类路径中。
• component.setWidth("300px")可以工作，但是还远远不够优雅，并且在显示文本的组件上设置显式宽度远非理想。

我有三个 pseudo horizo​​ntal 菜单项。在大屏幕上，它们将是真正的水平。在较小的屏幕上，我希望它们进入垂直模式。

• 组合框应扩展到最长标签的宽度。
• 文本框应扩展到可用空间。 （可用宽度-组合框宽度-搜索按钮宽度）
• “搜索按钮”应扩展到“图标”和“标签”的宽度，而无需任何包裹。

使用Vaadin 12布局/组件合同可以实现此目的吗？还是我必须花时间在CSS文件中定义此类控件？

Answer 1

您的问题意味着，使用Vaadin 7或Vaadin 8中的内置布局而不使用CSS可以轻松实现用例。您要描述的有关根据屏幕大小自动在水平和垂直模式之间切换的描述听起来像需要某种程度的响应式布局，通常意味着直接使用CSS。

您可以在较早版本中完成的工作是使Java逻辑根据情况使用VerticalLayout或HorizontalLayout。这两类仍可用于相同类型的用例。这些API进行了更改，以更好地与基础flexbox功能保持一致，但是总体功能仍然相同。

您还可以查看FormLayout（核心框架的一部分）或Board布局（单独的加载项），它们都提供了一些响应功能。但是，它们最初是针对稍有不同的用例（分别是表单和仪表板）而设计的，因此要使其符合您的确切要求可能会有些挑战。