GWT cracking code to download progressbar - like gmail

I need to use code splitting in my project. but in any case, there are several codes for the initial download for the first time.

Now I want to show the end user the progress in downloading the code (.cache.html - or other code splitting), for example, when starting gmail.

Could you help me.

RESPECT

+4
source share
4 answers

In accordance with the design (approximately), he mentions the separation of modules, where this makes sense, since it technically does not support prefetching; which, as said, I can only assume that GMail shows progress based on module loading progress verified through callbacks (i.e. GWT.runAsync() ). Not all modules are the same size, but you can “evaluate” and assign a weighted percentage for each module (see GWT compile report )

  • If your initial page size loading is large (> = 1 MB), I would recommend looking into refactoring and optimizing your design to be a bit easier (scaffolding). This would mean more trips to the server, but limiting the initial download size. This would provide the basis for more accurate user feedback that the page is “working” (ie, an Undefined progress bar) and avoids unnecessary accuracy.

  • The overall page size is a difficult thing to really measure the route along the route to the client / browser, this would be more trouble than it would be worth displaying to the user. You might be able to accomplish this with a few lightweight modules, but you will have to compensate for all generated resources, such as ClientBundle , because the GWT creates a specific set for each browser swap.

Sidenote : In real time, for example, to achieve file size accuracy (for example, 80 KB 1.29 MB (6% included)) is usually used when downloading a file (for example, images, video, music, etc.) on user hard drive. Data at this point is no longer temporary, and data storage space can be a problem, caches are cleared and cleared, so it usually doesn't matter how big the web page is.

+5
source

Perhaps you can try this and comment if it works or not;

I will only send you an html file. You can be designed according to your code. How does this happen. There is a div element that includes "loading". When the lads page will display the first simple html loaded and loaded text. After the html file has loaded, your nocache.js file will start (still your view of the loaidng text). After starting the js file, the onmoduleload script is loaded (text loading is saved) and after all the created widgets and your panels are ready. Try under the code and remove the “loading” text from the screen;

 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 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> 
+1
source

GWT does not have such a widget as a progress bar . I also wanted to add this feature to my application, but could not

You can use the incubator progress bar.

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

0
source

You can use the same approach as Apache Hupa , which shows an animated gif during application loading. Once the application has loaded, it removes the animated gif through the dom structure of the main page.

0
source

All Articles