javascript - 使用 Vaadin 组件加载图像

Question

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

因此，我向我的 TextField 组件添加了一个 TextChangeListener，并创建了一个 Image 组件来包含我的加载图像(.gif)。加载图像的默认 CSS 具有“display:none”。我所做的是:当在 TextField 中输入内容时，我在图像组件上使用 .removeStyleName() 方法删除 CSS 中的“display:none”并在搜索期间显示加载图像，搜索完成后，我在图像组件上使用 .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 浏览器)。

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

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