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

回答

相关问题