标签: vaadin-flow

我有一个 Vaadin 22 应用程序，其视图有 2 个Select彼此相邻的字段。它们属于在一起（实际上是月份和年份的下拉菜单），并且只需要一个标签，该标签比左侧的组件长。

我尝试将其放在左侧组件上，但随后它被切断：

实现这一目标的最简单方法是什么？

我刚刚意识到我的 Vaadin Web 应用程序在 8Mb 的总体 javascript 网络加载占用空间中加载了至少 3mb 未使用的 JS 主题库。如何防止这种情况发生？

最突出的三个

• 1600kb Vaadin 图表@vaadin_charts_theme_lumo_vaadin-chart__js.js
• >340kb 瓦丁地图@vaadin_map_theme_lumo_vaadin-map__js.js
• >310kb vaadin 富文本编辑器@vaadin_rich-text-editor_theme_lumo_vaadin-rich-text-editor__js.js

Vite 可以排除这个问题吗？Vaadin 版本：（23.3.4非生产模式）

我没有使用任何商业组件，并尝试将它们从 pom.xml 中显式排除，并从 package.json 中删除它们，然后npm i再次开始

        <dependency>
        <groupId>com.vaadin</groupId>
        <artifactId>vaadin</artifactId>
        <exclusions>
            
            <exclusion>
                <groupId>com.vaadin.addon</groupId>
                <artifactId>vaadin-charts</artifactId>
            </exclusion>
            <exclusion>
                <groupId>com.vaadin</groupId>
                <artifactId>vaadin-rich-text-editor-flow</artifactId>
            </exclusion>
            <exclusion>
                <groupId>com.vaadin</groupId>
                <artifactId>vaadin-map-flow</artifactId>
            </exclusion> 
            <!-- [..] -->

对于 Vaadin 14，有文档明确说明应将哪些 Vaadin 资源添加到配置中以绕过 Spring Security： https: //vaadin.com/docs/v14/flow/tutorial/login-and-authentication

  /**
   * Allows access to static resources, bypassing Spring Security.
   */
  @Override
  public void configure(WebSecurity web) {
    web.ignoring().antMatchers(
        // Client-side JS
        "/VAADIN/**",

        // the standard favicon URI
        "/favicon.ico",

        // the robots exclusion standard
        "/robots.txt",

        // web application manifest
        "/manifest.webmanifest",
        "/sw.js",
        "/offline.html",

        // icons and images
        "/icons/**",
        "/images/**",
        "/styles/**",

        // (development mode) H2 debugging console
        "/h2-console/**");
  }

我无法找到 Vaadin 24 的相同信息。

这是我当前的配置：

    @Override
    public void configure(WebSecurity web) throws Exception {
        super.configure(web);

        web.ignoring().requestMatchers( …

我想根据条件为网格线着色。我试试这个：

爪哇：

gridEtudiant.setClassNameGenerator(t -> {
    if (t.getEtud_numero().startsWith("2")) {
        return "error_row";
    }
    return "";
});

css：

td.error_row {
  background-color: red;
}

HTML

<td id="vaadin-grid-cell-1" tabindex="0" role="gridcell" part="cell body-cell" first-column="" reorder-status="undefined" aria-selected="false" class="error_row" style="width: 100px; flex-grow: 1; order: 10000000;"><slot name="vaadin-grid-cell-content-1"></slot></td>

我们可以看到 'class="error_row"' 但它不是红色的。

Vaadin 版本是 13.0.1

我已经下载了vaadin面包店应用程序的源代码。它使用商业组件。但是，如果我从代码中删除了这些组件（如果可能的话），我可以使用代码并在不违反任何许可的情况下分发它吗？

谢谢

我是 Java 后端工程师，想开始这个全新的项目。不幸的是，对我来说使用 UI 是某种噩梦 :) 这就是为什么我正在寻找一些框架，它可以将我从低级 JavaScript 细节中抽象出来，现在看起来最好的选择是 Vaadin Flow（纯 Java）。

现在，我正在尝试选择 - Vaadin 的正确版本是什么来启动项目 - Vaadin 14 还是最近发布的 Vaadin 20？请指教。现在是开始使用 Vaadin 20 的合适时机吗？

ProgressBar下面是在 Vaadin Flow（版本 23）中显示不确定的代码：

ProgressBar spinner = new ProgressBar();
spinner.setIndeterminate(true);
spinner.setVisible(true);

唯一的事情是，这现在似乎创建了一个ProgressBar来回的东西，我想知道是否可以将其显示为圆形。我可以通过加载图标、动画 GIF 等来做到这一点，但是可以通过类来实现吗ProgressBar？

尝试在 hilla(vaadin) 中创建一个应用程序，它将列出产品及其详细信息。为了对产品进行分类，需要存储与类别相关的信息，但在尝试在 hilla/vaadin 网格中列出类别时面临的问题。从端点返回类别列表，并在商店中消耗该列表并尝试在网格中显示。尝试运行应用程序时出现错误“

Type 'Promise<void>' is missing the following properties from type

”

@Nonnull 是在列表的响应中指定的，并且在方法中仍然出现错误

下面是端点类

@Endpoint
@AnonymousAllowed
public class ProductEndpoint {

    private InterProductService productService;

    @Autowired
    public ProductEndpoint(InterProductService productService) {
        this.productService = productService;
    }

    public List<ProductDataList> fetchAllProducts() {
        return this.productService.fetchProducts("");
    }

    public @Nonnull List<@Nonnull ProductCategoryDataList> fetchAllProdCategory() {
        return this.productService.fetchProductCategory("");
    }

    @Nonnull
    public EndpointResponse saveCatgeory(@Nonnull CategoryDetails categoryDetails) {
        return this.productService.saveCategory(categoryDetails);
    }

}

下面是商店

export class ProductStore {
    constructor() {
        makeAutoObservable(
            this);
        this.fetchProductCatgeory();
    }

    async saveProductCategory(prodCategory: CategoryDetails) {
        const responseData …

我已经下载了 Vaadin Flow 启动器并尝试使用它，但由于某种原因，bean 没有被注入：

@PageTitle("About")
@Route(value = "about", layout = MainLayout.class)
public class AboutView extends VerticalLayout {
    
    @Autowired
    private UserService userService;
    
    public AboutView() {
        ...
    }
}

userService 仍然为空。

我仍然可以通过构造函数传递 bean：

@PageTitle("About")
@Route(value = "about", layout = MainLayout.class)
public class AboutView extends VerticalLayout {
    public AboutView(UserService userService) {
        ...
    } 
}

但这并不总是很方便。

我在同一个项目中创建了一个 REST 服务，即使没有注释，注入也能正常工作：

@RestController
@AllArgsConstructor
@RequestMapping("user")
public class UserController {

    private UserService userService;    
    ...
}

Vaadin Flow 有什么问题？我正在使用 Vaadin Flow 24.0.0.alpha8、SpringBoot 3.0.1 和 Java 19。

PS顺便说一下，我也尝试过 Vaadin …

换行符和 Vaadin Flow 工具提示已公开讨论，但仍然缺少推荐的解决方案（例如https://vaadin.com/forum/thread/17952864/tooltip-with-line-break-in-vaadin；结论是“这确实不行”）

关于工具提示组件的官方文档不包含任何提示。

有什么建议或已知的解决方法吗？

丹尼尔，为该要求提供任何帮助干杯

我还在工具提示上尝试了一些 vaadin 23。 在此输入图像描述

所有有希望的方法都没有奏效。 在此输入图像描述

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

与此相关的是，假设所有预先构建的Vaadin 10/12 +聚合物组件（水平和垂直布局除外）都是自动响应的，例如网格，表格和标签，是否合理，例如，如果用户在他的电话上，正在寻找一个标签，该标签具有这些Vaadin组件可以在电话上“很好地”呈现（即遵循其他框架（如react.js等）的响应式布局）的形式？