如何在 Vaadin 中扩展组件？

Question

SpringBoot 2Vaadin 12.0.3

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

• CssLayout 不再存在 - 被 Div 取代，它不会暴露 expand(Component)。
• component.setWidth("300") 无效。
• component.setWidth("300", UNIT.*) 不起作用，因为 UNIT 不在类路径中。
• component.setWidth("300px") 有效，但远非优雅，在显示文本的组件上设置显式宽度也远非理想。

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

• 组合框应扩展到最长标签的宽度。
• 文本框应扩展到可用的房地产。 （可用宽度 - 组合框宽度 - 搜索按钮宽度）
• 搜索按钮应扩展到图标和标签的宽度，且不进行任何换行。

这是否可以使用 Vaadin 12 布局/组件合约来实现，还是我必须花时间在 CSS 文件中定义此类控件？

Answer 1

您的问题暗示，在不使用 CSS 的情况下，使用 Vaadin 7 或 Vaadin 8 中的内置布局实现您的用例是一种简单的方法。您所描述的关于根据屏幕大小在水平和垂直模式之间自动切换的内容听起来像是需要某种程度的响应式布局，这通常意味着直接使用 CSS。

您可以在旧版本中执行的操作是让 Java 逻辑根据具体情况使用 VerticalLayout 或 HorizontalLayout。这两个类仍然可用于相同类型的用例。 API 已更改以更好地与底层 flexbox 功能保持一致，但整体功能仍然相同。

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