Как предотвратить мерцание загрузки GWT в стартовом проекте веб-приложения?

Я новичок в GWT, и я уверен, что на это есть ответ где-то в SO, но я еще не нашел

Я загрузил подключаемый модуль Eclipse GWT 2.0 и был рад увидеть, что он поставляется с стартовым проектом.

Однако меня удивило, что при его запуске возникает неприятное мерцание ...

  1. Текст сначала загружается без CSS
  2. Требуется некоторое время, пока не появится поле выбора.

(Если вы не видите мерцания, попробуйте нажать F5 для обновления)

Кажется, что все зрелые приложения GWT имели загрузчик и раньше, но я не нашел простого стандартного способа его добавить.

Кажется, это приложение загружается в следующем порядке: (поправьте меня, пожалуйста, если я перепутал, это только мое предположение)

  • Базовый макет HTML,
  • Весь JavaScript и CSS
  • Запускает логику события "onload" (в ближайшее время ваш скомпилированный javaScript сможет запуститься?)

Поэтому я не могу программно добавить счетчик загрузки до того, как был загружен GWT, для меня это небольшая уловка 22

Я упустил что-то базовое? есть ли лучший способ добавить этот начальный счетчик?

Я думал просто добавить div с анимированным gif, а в событии onload - скрыть его.

Но я уверен, что есть что-то получше.

Сообщите мне, если это повторяющийся вопрос

Обновление: нашел этот связанный вопрос, а не отвечая на мой, хотя ...


spinner onload gwt
person Eran Medan    schedule 09.01.2010    source источник

Ответы (4)


arrow_upward
2
arrow_downward

Я уже справлялся с этой проблемой, не используя модуль GWT для загрузки CSS, а загружая его непосредственно в самом теге. Если вы сделаете это, браузер всегда будет загружать CSS первым, даже до загрузки GWT JS.

Это означает, что вы потеряете немного гибкости и скорости, но это единственный обходной путь, который я использовал до сих пор.

РЕДАКТИРОВАТЬ: Дополнительная информация, потому что я хочу награду: D

Если вы не удалите <inherits name='com.google.gwt.user.theme.standard.Standard'/> из файла module.gwt.xml, то стандартная тема GWT будет загружена в файл JS, создаваемый GWT. Этот JS-файл загружается после рендеринга HTML-страницы и внедряет CSS после загрузки. Отсюда мерцание.

Чтобы избежать мерцания, вы можете закомментировать эту строку и вставить свою собственную таблицу стилей в <head> вашего HTML-файла. Это гарантирует, что ваш CSS загружается до рендеринга HTML, избегая любого мерцания. Если вам действительно нужна тема GWT, вы получите ее из исходный код.

Использовать спиннер с GWT довольно просто. Один простой способ - сохранить его в div с идентификатором в самом HTML-файле. Затем в onModuleLoad() просто скройте этот div, вызвав RootPanel.get("spinner").setVisible(false);

Это должно показывать счетчик, пока GWT не загрузится.

person Sudhir Jonathan    schedule 10.01.2010
comment
Спасибо, но это официальный подход GWT? Я не могу допустить, чтобы Google предоставил стандартную тему CSS только для того, чтобы вы прокомментировали ее в реальных проектах. Предложенный вами подход скрытия прядильщика при загрузке уже есть в теле моего вопроса. - person Eran Medan; 19.01.2010
comment
Темы GWT великолепны и отлично работают в ситуациях, когда страница строится динамически ... Там вы не увидите мерцания. Это происходит только тогда, когда используется комбинация статического HTML и динамических виджетов, что случается не так уж и часто. - person Sudhir Jonathan; 20.01.2010
comment
Извините, если вы уже полностью закодировали счетчик, когда вы упомянули onLoad, я подумал, что вы используете javascript onLoad для тела или что-то в этом роде. - person Sudhir Jonathan; 20.01.2010

arrow_upward
2
arrow_downward

Вот что мы делаем, чтобы реализовать спиннер.

Вы помещаете что-то вроде следующего HTML-кода сразу под строкой скрипта, загружающей ваше приложение (то есть с nocache.js). например.:

    <div id="loading">
        <div id="loading-msg">
            <img src="icons/loading-page.gif" lt="loading">
            <span>Loading the application, please wait...</span>
        </div>    
    </div>

Затем в приложении EntryPoint вы попадаете на страницу с помощью DOM и удаляете этот div. например

final RootPanel loading = RootPanel.get("loading");
if (loading != null) {
    DOM.removeChild(RootPanel.getBodyElement(),
                    loading.getElement());
}
person Dean Povey    schedule 19.01.2010

arrow_upward
2
arrow_downward

Эранн: Боюсь, что практика, упомянутая в приведенных выше ответах, пока что единственный выход. GWT не предоставляет аналогичные функции для отображения / скрытия «загрузочного» фрейма «на лету». Я предполагаю, что одна из причин заключается в том, что это требование не является таким «общим» для всех пользователей GWT, один человек может захотеть совсем другой стиль «загрузки», чем другие. Так что вам придется делать это самому.

Вы можете взглянуть на страницу демонстрации GXT (также основанную на GWT): http://www.extjs.com/explorer/ о том, как они это делают. В качестве источника загрузите SDK Ext GWT 2.1.0 здесь: http://www.extjs.com/products/gxt/download.php и проверьте папку samples / explorer после ее распаковки. Подробнее см. Правку ниже:

РЕДАКТИРОВАТЬ

Проверьте исходный код для http://www.extjs.com/examples/explorer.html и вы можете увидеть div с id "loading". Для каждого образца (расширение области просмотра) GXT.hideLoadingPanel (loadingPanelId) вызывается в onAttach () (инициализация), которая скрывает загрузочный фрейм.

Проверьте исходный код Viewport здесь

Проверьте исходный код GXT.hideLoadingPanel здесь

Вы можете сделать это аналогичным образом.

person xhh    schedule 20.01.2010

arrow_upward
1
arrow_downward

Вы можете поместить сообщение о загрузке HTML на главную страницу (используйте атрибуты стиля или вставьте тег стиля в заголовок, чтобы убедиться, что он стилизован) и удалить сообщение после загрузки ваших модулей, например. г. Document.get (). GetBody () с помощью .setInnerHTML ("") или .removeChild (), а затем представить ваше приложение программно, как вы хотите.

person Gipsy King    schedule 14.01.2010
comment
да. Я использую шаблон, чтобы поместить div «загрузка, пожалуйста, подождите ...» на главной странице, а затем удалить этот элемент в методе onModuleLoad (). Работает отлично. - person AlexJReid; 14.01.2010
comment
Я уже знаю эту альтернативу, и это даже вопрос: я думал просто добавить div с анимированным gif, а в событии onload - скрыть его, но я ищу что-то более официальное и менее хакерское. Если вы считаете, что от команды GWT не существует официального передового решения, покажите мне источник, подтверждающий его. - person Eran Medan; 14.01.2010
comment
Я не встречал стандартной практики и считаю, что она не обязательна. Будь креативным! - person Gipsy King; 14.01.2010