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

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

2 голосов
/ 09 января 2010

Я новичок в GWT, и я уверен, что где-то на него ответили, но я пока не нашел

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

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

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

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

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

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

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

Так что я не могу программно добавить спиннер загрузки до загрузки GWT, для меня это немного зацепка 22 * ​​1031 *

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

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

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

Дайте мне знать, если это повторяющийся вопрос

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

Ответы [ 4 ]

2 голосов
/ 20 января 2010

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

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

EDIT

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

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

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

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

2 голосов
/ 19 января 2010

Вот что мы делаем для реализации блесны.

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

    <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());
}
2 голосов
/ 10 января 2010

Раньше я решал эту проблему, не используя модуль 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 не загрузится сам.

1 голос
/ 14 января 2010

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

...