使用 Vaadin 组件的加载图像

Question

我正在尝试在 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() 和 addStyleName() 被调用，但不会改变 UI 和textChange() 的结尾，它们被连续执行，因此加载图像显示并立即隐藏。

有谁知道发生了什么？如有任何帮助，我将不胜感激！

谢谢，

Answer 1

你误解了客户端服务器交互的行为。

在您的代码中：

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 修改都发送回客户端（Web 浏览器）。

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

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

Answer 2

你试过了吗：

myImage.setImmediate(true);