使用Vaadin组件的加载图像

A loading image using Vaadin components

本文关键字：加载 图像 组件 Vaadin 使用      更新时间：2023-09-26

当搜索在vaadin TextField组件中运行时，我正在尝试设置加载图像。

因此，我在TextField组件中添加了一个TextChangeListener，并创建了一个Image组件来包含我的加载图像（它是.gif）。加载图像的默认CSS为"display:none"。我所做的是：当在TextField中键入内容时，我在我的Image组件上使用.removeStyleName（）方法删除CSS中的"display:none"并在搜索过程中显示加载的图像，当搜索完成时，我使用Image组件上的.addStyleName（）方法在CSS中设置"display:none"。前面解释的代码看起来像：

searchField = new TextField();
searchField.setImmediate(true);
searchField.addTextChangeListener(new TextChangeListener() {        
     public void textChange(TextChangeEvent event) {
          myImage.removeStyleName(CSS_STYLE_IMAGE_TO_HIDE)
          // some code
          myImage.addStyleName(CSS_STYLE_IMAGE_TO_HIDE)
     }
});

但问题是在搜索过程中没有显示加载图像。我在代码中放了一些日志，发现图像被显示，然后被隐藏，但只是在搜索结束时。因此，在textChange（）方法期间，调用removeStyleName（。

有人知道发生了什么吗？我将感谢任何帮助！

谢谢，

您误解了客户端的行为<->服务器交互。

在您的代码中：

searchField = new TextField();
searchField.setImmediate(true);
searchField.addTextChangeListener(new TextChangeListener() {        
     public void textChange(TextChangeEvent event) {
          myImage.removeStyleName(CSS_STYLE_IMAGE_TO_HIDE)
          // some code
          myImage.addStyleName(CSS_STYLE_IMAGE_TO_HIDE)
     }
});

textChange（…）事件代码是从客户端触发的。然后在服务器端执行，直到事件代码结束。在服务器端处理完textChange（…）代码后，所有的答案/UI修改都被发送回客户端（Webbrowser）。

因此，在textChange（）方法中完成的所有UI更改都会在事件完成时作为一个修改累积发送回来。

问题的解决方案是扩展TextField客户端实现以在客户端进行样式修改触发服务器端代码。收到服务器的答案后，您将恢复样式。

你试过这个吗：

myImage.setImmediate(true);
相关文章：