GWT код разделения загрузки загрузки - как Gmail - PullRequest
Новая
       3

GWT код разделения загрузки загрузки - как Gmail

4 голосов
/ 11 декабря 2010

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

Теперь я хочу показать конечному пользователю ход загрузки кода (.cache.html или другое разбиение кода), например, прогресс запуска gmail.

Не могли бы вы помочь мне.

УВАЖЕНИЕ

Ответы [ 4 ]

5 голосов
/ 14 декабря 2010

Согласно дизайну (примерно), в нем упоминается разделение модулей там, где это имеет смысл, поскольку технически не поддерживает предварительную выборку;При этом я могу только предположить, что GMail показывает прогресс на основе прогресса загрузки модуля, проверенного с помощью обратных вызовов (то есть GWT.runAsync()).Не все модули имеют одинаковый размер, но вы могли бы «угадать» и назначить взвешенный процент для каждого модуля (см. отчет компиляции GWT )

  1. Если ваша начальная страницаразмер загружаемого файла велик (> = 1 МБ), я бы порекомендовал изучить рефакторинг и оптимизировать ваш дизайн, чтобы он был немного более легким (строительные леса).Что будет означать больше поездок на сервер, но ограничит начальный размер загрузки.Это послужило бы основой для получения более точной обратной связи с пользователем о том, что страница «работает» (т. Е. неопределенный индикатор выполнения ), и избежания ненужной точности.

  2. Общий размер страницы сложно измерить на пути к клиенту / браузеру, это будет больше проблем, чем стоит показывать это пользователю.Вы могли бы , вероятно, выполнить это с помощью нескольких облегченных модулей, но вам придется компенсировать все сгенерированные ресурсы, такие как ClientBundle, поскольку GWT создает определенный набор для каждой перестановки браузера.

Sidenote : при загрузке файла обычно используется обратная связь в реальном времени, например, для определения точности размера файла (например, 80 КБ из 1,29 МБ (заполнено на 6%)) (например, изображения, видео, музыка,и др.) на жесткий диск пользователя.Данные на этом этапе больше не являются временными, и может возникнуть проблема с объемом памяти, кэши очищаются и сбрасываются, поэтому размер веб-страницы не имеет большого значения.

1 голос
/ 14 декабря 2010

Может быть, вы можете попробовать это и, пожалуйста, прокомментируйте, работает или нет;

Я отправлю вам только HTML-файл. Вы можете разработать в соответствии с вашим кодом. Как это просыпается. Есть элемент div, в том числе «loading». Когда страница загрузится в первый раз, будет загружен простой HTML и текст загрузки. После загрузки html-файла ваш файл nocache.js запустится (все равно вы видите текст). После загрузки js-файла запустится скрипт onmoduleload (все еще видна загрузка текста) и после того, как все виджеты будут созданы, а ваши панели и т. Д. Готовы. Попробуйте приведенный ниже код и удалите «загрузочный» текст с экрана; 

com.google.gwt.user.client.Element loading = DOM.getElementById("loading");
DOM.removeChild(RootPanel.getBodyElement(), loading);

proje.html; 

 <!doctype html>
<!-- The DOCTYPE declaration above will set the    -->
<!-- browser's rendering engine into               -->
<!-- "Standards Mode". Replacing this declaration  -->
<!-- with a "Quirks Mode" doctype may lead to some -->
<!-- differences in layout.                        -->

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--                                                               -->
    <!-- Consider inlining CSS to reduce the number of requested files -->
    <!--                                                               -->
    <link type="text/css" rel="stylesheet" href="<proje>.css">
    <link rel="stylesheet" type="text/css" href="resources/css/gxt-all.css" />

    <!--                                           -->
    <!-- Any title is fine                         -->
    <!--                                           -->
    <title><Proje></title>

    <!--                                           -->
    <!-- This script loads your compiled module.   -->
    <!-- If you add any GWT meta tags, they must   -->
    <!-- be added before this line.                -->
    <!--                                           -->
    <script type="text/javascript" language="javascript" src="<proje>/<proje>.nocache.js"></script>
  </head>

  <!--                                           -->
  <!-- The body can have arbitrary html, or      -->
  <!-- you can leave the body empty if you want  -->
  <!-- to create a completely dynamic UI.        -->
  <!--                                           -->
  <body>

    <!-- OPTIONAL: include this if you want history support -->
    <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>

    <!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
    <noscript>
      <div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">

      </div>
    </noscript>

    <div align="center" id="loading"> 
        <table style="height:600px;" border="0">
            <tr height="100%">
                <td align="center">
                    <b>Loading...</b>
                </td>
            </tr>
        </table>
    </div>

    <div id="main" style="display:none">
       <table border="0" width="100%" height="100%" align="center" cellspacing="0">
              <tr>
                <td colspan="2" width="100%" id="ustMenuPanel"></td>
              </tr>
              <tr height="100%" valign="top">
                <td id="menuPanel" width="20%"></td>
                <td id="modulPanel" width="80%"></td>
              </tr>
        </table>
    </div>
  </body>
</html>
0 голосов
/ 17 декабря 2010

Вы можете использовать тот же подход, что и Apache Hupa , который просто показывает анимированный GIF во время загрузки приложения. После загрузки приложения оно удаляет анимированный GIF-файл через структуру dom на странице хоста.

0 голосов
/ 14 декабря 2010

GWT не имеет виджетов, таких как индикатор выполнения .Я также хотел добавить эту функцию в свое приложение, но не смог

Вы можете использовать индикатор выполнения инкубатора.

http://google -web-toolkit-incubator.googlecode.com / svn / trunk / demo / ProgressBar / index.html

...