Загрузка изображения с использованием компонентов Vaadin

Question

Я пытаюсь установить загрузочное изображение, когда поиск выполняется в компоненте TextField vaadin.

Поэтому я добавил TextChangeListener в свой компонент TextField, и я создал компонент Image, чтобы содержать мое загрузочное изображение (которое является .gif). По умолчанию CSS загрузочного изображения имеет «display: none». Что я делаю: когда что-то набирается в TextField, я использую метод .removeStyleName() на моем компоненте Image для удаления «display: none» в CSS и отображения загружаемого изображения во время поиска, а когда поиск Я использовал метод .addStyleName() на моем компоненте Image, чтобы установить «display: none» в 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() называется, но не изменить что-либо на пользовательском интерфейсе и в конце 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 (...) завершил обработку на стороне сервера, все ответы/изменения пользовательского интерфейса отправляются обратно клиенту (Webbrowser).

Таким образом, все изменения пользовательского интерфейса выполняются в методе textChange(), которые кумуляются, отправляются обратно как одна модификация, когда событие завершено.

Решение вашей проблемы заключается в расширении TextField реализации на стороне клиента сделать модификацию стиля на стороне клиента, как раз перед запуская код на стороне сервера. Получив ответ сервера, вы снова вернете стили.

Answer 2

Вы пробовали это:

myImage.setImmediate(true);