Question

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

所以我在TextField组件中添加了一个TextChangeListener，并创建了一个Image组件来包含我的加载图像（这是一个.gif文件）。加载图像的默认CSS有＆＃34; display：none＆＃34;。我所做的是：当在TextField中输入内容时，我在我的Image组件上使用 .removeStyleName（）方法来删除＆＃34; display：none＆＃34;在CSS中并在搜索过程中显示加载图像，当搜索完成后，我在我的Image组件上使用 .addStyleName（）方法来设置＆＃34; display：none＆＃34;在CSS中。之前解释的代码如下：

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

您误解了客户端＆lt; - ＆gt;服务器交互的行为。

在您的代码中：

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 客户端实现以在客户端执行样式修改，就在之前触发服务器端代码。收到服务器答案后，您可以恢复样式。

Answer 2

你试过这个：

myImage.setImmediate(true);

使用Vaadin组件加载图片

2 个答案: