Ich muss Code-Splitting in meinem Projekt verwenden. aber auf jeden Fall gibt es einige Codes für das erste Herunterladen.GWT Code-Splitting Download Fortschrittsbalken - wie Gmail
Jetzt möchte ich dem Endbenutzer den Fortschritt für Code-Download (.cache.html - oder andere Code-Aufteilung) wie Gmail Startup-Fortschritt zeigen.
Würdest du mir bitte helfen.
RGDS
GWT hat keine Widget wie Fortschrittsbalken. Ich wollte auch diese Funktion zu meiner Anwendung hinzufügen, aber ich konnte nicht
Sie können Inkubator Fortschrittsbalken verwenden.
http://google-web-toolkit-incubator.googlecode.com/svn/trunk/demo/ProgressBar/index.html
Vielleicht können Sie dies versuchen und bitte kommentieren, ob es funktioniert oder nicht;
Ich werde nur HTML-Datei an Sie senden. Sie könnten entsprechend Ihrem Code entwerfen. Wie das ist woking. Es gibt ein div-Element einschließlich "Laden". Wenn die erste Seite der Seite geladen wird, wird der einfache HTML-geladene und geladene Text angezeigt. Nachdem die html-Datei geladen wurde, wird Ihre nocache.js-Datei gestartet (immer noch Ihr loading-Text). Nach js Datei geladen onModuleload Skript wird gestartet (immer noch Text geladen gesehen) und nachdem alle Widgets erstellt und Ihre Panels usw. bereit. Probieren Sie den folgenden Code aus und entfernen Sie den "Lade" -Text vom Bildschirm;
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>
Das "Problem" damit ist, dass der Benutzer nicht weiß, wie viel geladen wurde. Hast du eine Idee, wie ich etwas wie "100kb von 500kb geladen" bekommen könnte? –
@Chris_Boesing Ja, Sie haben Recht, ich versuche nur eine Probe zum Startpunkt Ihrer Frage zu geben. –
Ja Leute, es funktioniert, aber wie Chris sagte, ich will wissen, wie Prozent abgeschlossen ist – Nav
Nach dem design (grob), erwähnt sie Abspalten Module, wo es sinnvoll ist, da es technisch nicht Prefetching nicht unterstützt; Davon abgesehen, kann ich nur annehmen, dass GMail den Fortschritt basierend auf dem Ladeprozess des Moduls anzeigt, der über Rückrufe überprüft wird (d. h. GWT.runAsync()). Nicht alle Module die gleiche Größe, aber man konnte „guesstimate“ und einen gewichteten Prozentsatz für jedes Modul zugeordnet werden (siehe GWT compile report)
Wenn Ihre erste Seitengröße Download groß ist (> = 1 MB), I Ich würde empfehlen, das Refactoring zu überdenken und Ihr Design etwas leichter zu gestalten (Gerüstbau). Das würde mehr Reisen zum Server bedeuten, aber die anfängliche Download-Größe begrenzen. Dies würde die Grundlage liefern, um dem Benutzer eine genauere Rückmeldung zu geben, dass die Seite "arbeitet" (d. H. unbestimmter Fortschrittsbalken) und unnötige Genauigkeit vermeidet.
Die gesamte Seitengröße ist eine schwierige Sache auf dem Weg zum Client/Browser zu messen, es wäre mehr Mühe, als es sich lohnt, dies dem Benutzer anzuzeigen. Sie könnte wahrscheinlich dies mit mehreren leichtgewichtigen Modulen erreichen, aber Sie müssen alle generierten Ressourcen wie ClientBundle kompensieren, weil GWT einen bestimmten Satz für jede Browserpermutation erstellt.
Nebenbei bemerkt: Echtzeit-Feedback wie für Präzisions Fortschritt Dateigröße (zB 80 KB von 1.29MB (6% Complete)) wird typischerweise verwendet, wenn eine Datei (zB Bilder, Videos, Musik herunterladen, et al) auf die Festplatte des Benutzers.Die Daten an diesem Punkt sind nicht mehr flüchtig und Speicherplatz ist ein Problem, Caches löschen und Flush, so dass es im Allgemeinen keine große Sache ist, wie groß eine Webseite ist.
Sie könnten den gleichen Ansatz wie Apache Hupa nehmen, die nur ein animiertes gif zeigt, während die Anwendung geladen wird. Sobald die Anwendung geladen ist, wird das animierte GIF durch die Dom-Struktur der Hostseite entfernt.
Danke für Ihre Antwort. Bei dieser Frage geht es nicht um eine Fortschrittsleiste in Ihrer App, sondern um eine Fortschrittsleiste, die angezeigt wird, bevor die App vollständig geladen ist. Der Benutzer weiß also, wie lange er warten muss. –
@Chris Danke für Ihren Kommentar. Ich möchte nur die Fortschrittsbalken und ihre Verwendung zeigen –