A loading image using Vaadin components

Question

I'am trying to set a loading image when a search is running in a vaadin TextField component.

So I added a TextChangeListener to my TextField component and I created an Image component to contain my loading image (which is a .gif). The default CSS of the loading image has "display:none". What I do is : when something is typed in the TextField, I use .removeStyleName() method on my Image component to remove "display:none" in the CSS and display the loading image during the search, and when the search is done, I use .addStyleName() method on my Image component to set "display:none" in the CSS. The code previously explained looks like :

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)
     }
});

But the problem is that the loading image isn't displayed during the search. I put some logs in the code and I discovered that the image is displayed and then hidden but only at the end of the search. So during the textChange() method, removeStyleName() and addStyleName() are called but don't change anything on the UI and at the end of textChange() they are successively executed, therefore the loading image is displayed and immediately hidden.

Does anyone know what is happening ? I would be thankful for any help !

Thanks,

Answer 1

You misunderstand the behavior of client<->server interaction.

In your code:

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)
     }
});

The textChange(...) event code is triggered from client-side. It is then executed on server-side, until the end of the event code. After the textChange(...) code is finished processing on server side, all the answers/UI modifications are sent back to the client (Webbrowser).

So all UI changes are done in the textChange() method are cumulated sent back as one modification when the event is finished.

The solution for your Problem is to expand the TextField client-side implementation to do the style modification on client side, just before triggering the server side code. On receiving the server answer, you then revert the styles back.

Answer 2

Have you tried this:

myImage.setImmediate(true);