GWT代碼拆分下載進度條 - 像gmail

0

GWT沒有像進度條任何部件。我也想添加這個功能到我的應用程序，但我不能

您可以使用孵化器進度條。

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

來源

2010-12-14 07:22:23

+0

感謝您的回答。這個問題不是關於應用程序中的進度條，而是關於在應用程序完全加載之前顯示的進度條，所以用戶知道他必須等待多久。 – 2010-12-14 10:21:29

+0

@Chris感謝您的評論。我只想顯示進度條及其用法 – 2010-12-14 10:27:13

1

也許你可以試試這個，請評論是否有用，或者沒有;

我只會發送HTML文件給你。你可以根據你的代碼進行設計。這是如何woking。有一個div元素，包括「加載」。當頁面第一個簡單的HTML加載和加載文本將被顯示。加載html文件後，你的nocache.js文件將會啓動（仍然可以看到loaidng文本）。在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>

來源

2010-12-14 10:13:49

+0

與此相關的「問題」是用戶不知道已加載多少。你有一個想法，我怎麼能得到像「從500kb加載100KB」的東西？ – 2010-12-14 10:19:13

+0

@Chris_Boesing是的你是對的，我只是試着給你一個問題的出發點。 – 2010-12-14 10:25:07

+0

是的，它的作品，但克里斯說，我想知道如何完成百分比 – Nav 2011-04-17 14:00:00

5

按照design（粗略地），它提到分裂輸出模塊在有意義，因爲它不技術上支持預取;就是說，我只能假設GMail正在根據通過回調檢查的模塊加載進度顯示進度（即GWT.runAsync()）。不是所有的模塊的大小相同，但你可以「推測將會」並分配一個加權比例爲每個模塊（見GWT的compile report）

如果您的初始頁面大小下載大型（> = 1 MB），我會建議研究重構並優化您的設計，使其更輕量化（腳手架）。這意味着更多的訪問服務器，但限制了最初的下載大小。這將爲向用戶提供一些更加精確的反饋提供基礎，即該頁面「正在工作」（即不確定進度條），並避免不必要的精確度。
總頁面大小對於真正測量到客戶端/瀏覽器的途中是一件困難的事情，將它展示給用戶是比較值得的。你可能可能可能用幾個輕量級模塊實現這一點，但你必須補償所有生成的資源，如ClientBundle，因爲GWT會爲每個瀏覽器排列創建一個特定的集合。

旁註：實時反饋，例如用於文件尺寸精度的進展（例如80 KB 1.29MB（6％完成））在下載文件時（例如圖像，視頻，音樂，通常使用，等）到用戶的硬盤驅動器。當時的數據不再是短暫的，存儲空間可能會成爲問題，高速緩存清除並刷新，因此網頁的大小通常不是什麼大問題。

來源

2010-12-14 11:07:15

0

您可以採用與Apache Hupa相同的方法，該應用程序在加載應用程序時只顯示動畫gif。一旦應用程序加載完成，它將通過主頁的dom結構刪除動畫gif。

來源

2010-12-17 11:50:47 crowne

GWT代碼拆分下載進度條 - 像gmail

回答

相關問題