javascript - 使用Vaadin组件的加载图像

我正在尝试在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（）末尾它们被连续执行，因此将显示加载图像并立即将其隐藏。

有人知道发生了什么吗？感谢您的帮助！

谢谢，

最佳答案

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

在您的代码中：

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）。

因此，所有UI更改都是在textChange（）方法中完成的，并在事件结束时作为一种修改形式累计发送回去。

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