问题标签 [vaadin12]

今天我已经从 Vaadin 11.0.2 升级到 12.0.0 - 一切都很顺利，除了一件事：

在我的网格中，我有一个渲染列来显示ComboBox. 有一个奇怪的问题ItemLabelGenerator。我将其定义如下：

这在 Vaadin 11.0.2 中运行良好，但现在项目标签显示为package.path.to.myobject.MyObject@41d8d522而不是实际名称gridItem.getMyObject();
当我单击ComboBox以显示所有选项时，标签是正确的！但是一旦我选择了一个，它就会变成上述错误的字符串。

重要细节：出于测试原因，我现在将具有相同设置的类似 ComboBox 添加到一个简单的VerticalLayout（AKA 不在网格中）中，并且一切正常。这就是为什么我认为问题出在ComponentRenderer不知何故而不是ComboBox单独。

这是一个错误，还是升级到 12.0.0 时我错过了什么？

在有关 Vaadin 12 新版本的 vaadin 博客文章中，我看到有一个已知的重大更改，它与 ComboBox 有关：

如果您来自 Vaadin 10 或 11，则应在项目构建文件中更新平台依赖项。我们引入的唯一重大更改是因为 ComboBox 现在支持服务器端延迟加载。如果您使用 ComboBox 进行过滤，请参阅有关修复可能的编译问题的说明。

但是，在我的案例中不涉及任何过滤。

没有互联网连接就不能在我的笔记本电脑上本地开发 Vaadin Flow 吗？

今天，在尝试使用 Vaadin 项目中捆绑的 Jetty Web 容器运行我的新 Vaadin Flow 12 应用程序时，我遇到了一个带有此消息的网页：

Vaadin Flow 项目基地

您离线

Vaadin Flow 的 Project Base 需要互联网连接才能工作。您现在似乎无权访问服务器。检查您的互联网连接并尝试重新加载页面以使用该应用程序。

这是预期的行为吗？

在“set to 'foo'”按钮上单击 2x 将导致 innerHTML 变为空。

我正在使用网格来显示玩家的排名。该列表按后端的各种比较器排序，但可能仍然存在 2 行具有相同排名的情况。在下面的示例中，前两行应该有编号#1，最后两行应该都是#2。

我将排名数字实现为一列，如下所示：

使用这种方法：

这是一个基本的计数器。我能想到的唯一方法基本上是获取每个条目并找到它在列表中的位置，但我认为这可能太重并且不会很好地升级。

有什么建议么？

更新 这是当前的比较器：

我正在使用 Vaadin 12.0.3，我正在尝试使用AppLayout. 因此，我在AppLayout主视图中添加了包含菜单的DashboardView（扩展RouterLayout）。这个视图应该是MonitoringView显示一些数据的父视图。因此，我将@Route注释设置为MonitoringView：@Route(Monitoring.route, layout = DashboardView::class).

问题是如果我添加layout = DashboardView::class到注释中，所有样式MonitoringView都消失了。这意味着不显示文本，（背景）颜色和阴影消失等等。当我从注释中删除布局部分时，一切看起来都很好，但是我看不到顶部的菜单栏。

这是上述类的代码：

，DashboardView它应该是另一个视图的父视图并包含菜单 ( AppLayout)：

显示监控数据的MonitoringView，当用户点击“第 1 页”时应显示在菜单栏下方：

I want to add an upload button to my web application. In the HTML template, I added:

I now want to receive the stream in my backend Vaadin process. This stream can be then inserted in the database.

The documentation on https://vaadin.com/components/vaadin-upload/html-examples/upload-basic-demos doesn't provide this information.

I believe I should somehow link a StreamReceiver to the <vaadin-upload> in question, but I am not sure how to do that.

I am using Vaadin Flow (version 12).

Additional information

I tried the following:

In HTML:

In Java:

When I upload a file, I get the following exception:

我的理解是 Vaadin 10+ 的主题之一是响应式布局。所以当“水平布局”和“垂直布局”似乎不支持响应式设计时，我感到很惊讶。（我改用 App Layout，这似乎可行。）但是，在我的应用布局中，我倾向于使用 Vertical Layouts 和 Horizo​​ntal Layouts 来放置聚合物组件——不过，我认为它们不会响应，因为我没有不要认为 Vaadin 水平/垂直布局遵循响应式主题。是否有我们应该使用的替代布局组件或多或少地实现“响应式水平布局”等？

与此相关的是，假设所有预构建的 Vaadin 10/12+ 聚合物组件（水平和垂直布局除外）都是自动响应的，例如网格、表单和选项卡，是否合理，例如，如果用户正在他的手机上，并且正在寻找一个选项卡，其中包含这些 Vaadin 组件将在手机上“很好地”呈现的表单（即遵循其他框架的响应式布局，例如 react.js）？

我知道在同样多的网站上有很多关于如何做到这一点的教程，但这是我第一次尝试将数据库表连接到 UI，所以例如，当 Spring Boot/MyBatis/Vaadin 的版本是与我正在使用的不同，或者他们使用 JPA 或 JDBC 而不是 MyBatis，我不知道如何更改它以适应我的具体情况。

当人们说“这与任何其他方法没有什么不同”时，这根本没有帮助，因为正如我之前所说，我以前从未这样做过。教程代码示例中的注释和类在每个新版本中都被删除和弃用，没有明确说明如何更改它以与新版本一起使用。我一直在研究各种 API（Spring Boot、Vaadin、MyBatis）大约一个月，对每个 API 的作用有一个模糊的了解，但不知道它们如何协同工作以实现为数据库制作 UI 的预期结果。我只是对教程中一个不推荐使用的注释或类如何导致整个事情崩溃感到非常沮丧。我知道那是冗长的，但我只是想让你们都明白我来自哪里。我'

我当前的依赖项是：

- Maven : 4.0.0 - Spring Boot: 2.1.2.RELEASE - Vaadin: 12.0.4 - MyBatis Spring Boot Starter: 2.0.0

我从 Spring Initializr 获得了启动包，后来添加了 MyBatis 依赖项。

我有一个 PostgreSQL 10.5 数据库，其中包含 17 个表，最终将成为商店经理的 UI，用于查看收到的库存发货、员工工作时间和其他任务。

我的数据库名为“商店”，用户：“商店”，密码：“商店”（如果重要）。

例如，这些是我的一些表：

CREATE TABLE IF NOT EXISTS supplier ( id SERIAL, brand VARCHAR(30) NOT NULL, phone VARCHAR(15) NOT NULL, address VARCHAR(100) NOT NULL, CONSTRAINT pk_supplier PRIMARY KEY (id) );

CREATE TABLE IF NOT EXISTS shipment ( id SERIAL, shipdate DATE NOT NULL, shiptime TIME NOT NULL, status VARCHAR(10) DEFAULT 'arrived' NOT NULL, sid INT NOT NULL, CONSTRAINT pk_shipment PRIMARY KEY (id), CONSTRAINT fk_shipment_supplier FOREIGN KEY (sid) REFERENCES supplier(id) );

CREATE TABLE IF NOT EXISTS shipmentcontains ( shipid INT NOT NULL, iid INT NOT NULL, quantity INT NOT NULL, price DEC(6,2) NOT NULL, CONSTRAINT pk_shipmentcontains PRIMARY KEY (shipid, iid), CONSTRAINT fk_shipmentcontains_shipment FOREIGN KEY (shipid) REFERENCES shipment(id), CONSTRAINT fk_shipmentcontains_item FOREIGN KEY (iid) REFERENCES item(id) );

CREATE TABLE IF NOT EXISTS item ( id SERIAL, itemtype VARCHAR(25) NOT NULL, itemsize VARCHAR(10) NOT NULL, price DEC(5,2) NOT NULL, sid INT NOT NULL, CONSTRAINT pk_item PRIMARY KEY (id), CONSTRAINT fk_item_supplier FOREIGN KEY (sid) REFERENCES supplier(id) );

CREATE TABLE IF NOT EXISTS employee ( id SERIAL, lastname VARCHAR(40) NOT NULL, firstname VARCHAR(40) NOT NULL, hourlywage DEC(4,2), manager BOOLEAN DEFAULT false NOT NULL, CONSTRAINT pk_employee PRIMARY KEY (id) );

如果有人可以给我一个代码示例，说明如何让其中一个显示在网格中，我相信我可以弄清楚如何完成其​​余的工作。我的application.properties文件中有连接详细信息，但我发现对于较新版本的 MyBatis，这不是必需的，并且@Update可以在 SQL 语句上使用注释来替换它。另外，用简单的英语来说，Spring Bean 到底是什么？我希望那不是太长……或者不够长。

编辑：Vaadin 12 的当前版本是 12.0.4

[编辑] 问题结束时的解决方案 [/编辑]

语境

我目前很难实现一个Component基于如下所示的SplitLayout：

这个想法是带有class="outer"（突出显示的行）的布局将成为内容的占位符，当用户在Grid.

被"outer"-Layout添加到SplitLayout网格旁边，因此标有slot='secondary'。

另一个类引用'outer'-Layoutwith@Route(value = "details", layout = OuterLayout.class)

通过单击Grid页面的条目导航到"grid/details"。

问题：

我希望 Vaadin 将带注释的类的内容放在其中，'outer'-Layout但它会在其旁边添加一个新条目： 如果我删除第一个'outer'-LayoutVaadin 标记，则第二个标记为slot='secondary'它的内容： 它甚至根据当前选择的 Gridentry 进行更新。 .

资料来源：

拆分布局

外

内

我误解了生命周期的概念吗？

先感谢您

解决方案

正如 Tatu Lund 所建议的，我修改了RouterLayout这样的默认实现：

我目前正在将 Vaadin 8 应用程序迁移到 Vaadin 12。外观应该由用户使用，并在登录时或通过按下按钮进行更改。

在我们的 Vaadin 8 应用程序中，我们有 2 个主题（一个深色和一个浅色），每个主题都有自己的 SASS/CSS 和一些共享属性。用户可以使用 setTheme() 方法进行切换。当点击切换按钮时，外观就发生了变化。在 Vaadin 12 中，Theming 采用了不同的方法，我正在努力寻找一种在 Vaadin 12 中实现此功能的好方法。

假设我们不想创建一个全新的主题，只想使用自定义的 LUMO。我可以通过@Theme Annotation 设置主题/变体。缺点：主题将在运行时固定。

我也可以编写一些代码来将变体应用于我的应用程序和组件。（如动态样式章节：https : //vaadin.com/docs/flow/element-api/tutorial-dynamic-styling.html ）缺点：遍历每个元素并应用变体。

我现在的问题：

在运行时实现主题之间切换的最佳方法是什么？（定制的 Lumo 或任何其他主题的明暗变体）。

我是否只需创建 2 个包含 CSS 的 HTML 文件（为了兼容性），然后通过动态导入以某种方式覆盖当前使用的文件？

我希望我的问题很清楚，有人可以指出我正确的方向。