Vaadin Designer：网格布局无法使用？答案

【问题标题】：Vaadin Designer: Grid Layout unusable?Vaadin Designer：网格布局无法使用？
【发布时间】：2017-09-25 04:46:21
【问题描述】：

我发现 Vaadin Designer 中的网格布局非常有问题。

问题：有人在用吗？你有什么建议给我吗？

背景：我正在将一个应用程序从 ASP.NET 移植到 Vaadin。在 Visual Studio 中通过 HTML 表格布局了大量的表单（参见屏幕截图）。

我面临的一些问题：

在网格布局中移动标签和字段后，我突然在设计源中得到 colspan/rowspan，例如 <column rowspan="7"></column>，当这种情况发生时，游戏结束
我无法插入或删除行或列
rowspan/colspan 属性在 Designer 属性中不可见
我无法选择多个组件（因此无法批量更改属性，例如样式、宽度、高度等）
我无法定义列宽和行高

【问题讨论】：

在发行说明页面中，rowspan 和 colspan 列在 Limitations 部分。您也可以在此处查看其他限制link
我尝试使用 Vaadin 7 / RHEL 6 进行设计，但并不太愉快。设计 html 的工作，vaadin 可以毫无问题地使用它们，然后我尝试手动编写它们。由于我决定使用 Grid 组件，但并没有真正弄清楚应该如何定义所有东西，所以我放弃了设计器并返回用 Java 定义视图。我的观点是：当时的文档不容易找到、有用和整合，但是一旦他们编写了 html 设计文档，技术就会起作用。

标签： vaadin vaadin8

【解决方案1】：

这更多是关于 Vaadin 框架和布局的问题。您可以从文档站点https://vaadin.com/docs/-/part/framework/layout/layout-overview.html 找到有关可用布局的一般信息。我认为 GridLayout 不是创建图像中呈现的那种布局的最佳选择。相反，我会使用 FormLayout、VerticalLayout 和 HorizontalLayout 的组合。这是实现灵活布局的最简单方法。如果你想要更多的控制，你可以开始将 VL 和 HL 切换到 CssLayouts 中。

很遗憾，Vaadin Designer 中的 GridLayout 编辑支持并不支持 GridLayout 的所有可能功能。我建议要么在声明中进行详细的调整，要么使用 Java。

我很快就创建了一个与所描述的布局类似的示例：https://gist.github.com/ripla/d06d35249ffc4859e7b280425c1e92eb。我建议您还检查 ResponsiveForm 模板以了解另一种方法。

最后，如果您有任何错误报告或功能请求，请提交问题至https://github.com/vaadin/designer-issues/issues

【讨论】：

谢谢。我看了你的例子。问题是描述字段的左边缘没有与FormLayout的字段对齐。

【解决方案2】：

最终我决定使用 JFormDesigner 作为我的主要视觉设计师，因为它非常快速和稳定，可以轻松处理大型/复杂的布局。 JGoodies FormLayout 很好地映射到 Vaadin GridLayout。

JFormDesigner 从设计中生成一个 Java 类。我编写了一个生成器，它使用该类来生成 Vaadin Designer html。例如，JLabel 映射到 Vaadin 标签等。所有面板都使用 FormLayout，如果它们只包含一行或一列，我将它们映射到水平/垂直布局。多列/行布局转换为网格布局，实际上到目前为止效果很好。

Vaadin Designer 无法再打开大文件，但应用程序会愉快地解析并显示它们。

【讨论】：