обычное колесо прогресса gwt

Question

Я начал изучать GWT сегодня и уже многое сделал, так как у меня есть опыт работы с Java. Мой следующий шаг - загрузка данных JSON с внутреннего сервера, но пока загрузка завершена, я хочу показать колесо прогресса по понятным причинам.

Я ожидал для этого виджета "из коробки", но, похоже, его нет (поправьте меня, если я ошибаюсь). Поскольку я совершенно новичок в GWT, я не хочу добавлять сложность с дополнительными фреймворками, только с простым GWT.

Кажется, мне придется кодировать один, так как я не нашел какой-либо сторонний код для этого. Может ли кто-нибудь указать мне правильное направление? Какие шаги? Должен ли я создать одно изображение, а затем повернуть его в анимации или создать несколько изображений, а затем заменить их по кругу? Или я здесь совсем?

Answer 1

Что касается простого колеса прогресса, которое не показывает фактический прогресс (просто то, что ваше приложение что-то делает), я бы порекомендовал простое анимированное изображение (например, сгенерируйте его на http://www.ajaxload.info/),

Если анимированное изображение / gif недоступно:

Простое решение - создать несколько изображений и заменить их по кругу.Я использовал это недавно, в основном вы создаете таймер, который вызывает сам себя:

Timer updateAnim = new Timer() {
    @Override
    public void run() {
        currentImage = (currentImage + 1) % NO_IMAGES;
        setVisibilities();
        this.schedule(UPDATE_TICK);
    }
};

private void setVisibilities() {
    img1.setVisible(false);
    img2.setVisible(false);
    switch (currentImage) {
    case 0:
        img1.setVisible(true);
        break;
    case 1:
        img2.setVisible(true);
        break;
    }

}

setVisibilities() просто устанавливает текущее изображение как видимое, а все остальные - как невидимое.Я испытал это, чтобы быть быстрее, чем переключение URL изображения (используя только одно изображение, вызывая img.setURL(String url);).

Теперь вы просто позвоните updateAnim.schedule(UPDATE_TICK);, и он запустится.

Я полагаю, что самым быстрым (потому что браузер может оптимизировать это) будет использование CSS-анимации (создание одного изображения и его вращение), но, вероятно, также наиболее сложным (не так уж и много, поэтомуможет быть, это на самом деле проще, чем я думаю;).Посмотрите этот пост об анимации вращения CSS.

Если вы хотите создать реальный индикатор выполнения (который на самом деле показывает прогресс), вам нужен обратный вызов, который вызывается при прогрессе.Просто обновите ваши переходы изображений / CSS в этом обратном вызове прогресса.

Answer 2

На мой взгляд, лучше получить анимированное изображение (например, gif) и показать его во время загрузки данных.

Существует несколько сайтов для генерации изображений «preloader»: http://www.preloaders.net/ http://www.ajaxload.info

Answer 3

Очень простое решение - использовать pace.js .Это сценарий JavaScript, который отображает индикаторы выполнения, собирающие события из DOM.Вы можете настроить прослушивание всех событий GWT-RCP, а также когда клиент загружает фрагменты.Просто добавьте тег script в html-файл, в который загружен ваш модуль GWT.

Это должно работать "из коробки" для активности GWT и обычного ajax.

<script type="text/javascript" language="javascript"
    src="js/pace.min.js"
    data-pace-options='{"elements":{"selectors":["body","script"]},"ajax":{"trackMethods":["GET","POST"]}}'></script>