使用 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() 被调用但不t 在 UI 和 textChange() 的末尾更改任何内容，它们被连续执行，因此显示加载图像并立即隐藏。

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

谢谢，

Answer 1

你试过这个吗：

myImage.setImmediate(true);

Answer 2

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

在您的代码中：

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(...) 代码在服务器端完成处理后，所有 answers/UI 修改都发送回客户端 (Webbrowser)。

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

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

使用 Vaadin 组件加载图像

A loading image using Vaadin components

javascript

css

textfield

vaadin