Je dois utiliser le découpage de code dans mon projet. mais de toute façon il y a quelques codes pour le téléchargement initial pour la première fois.GWT barre de progression de téléchargement de code - comme Gmail
Maintenant, je veux montrer à l'utilisateur final la progression du téléchargement de code (.cache.html - ou autre découpage de code) comme la progression du démarrage de Gmail.
Pourriez-vous m'aider s'il vous plaît.
MFG
GWT n'a pas un widget comme barre de progression. Je voulais également ajouter cette fonctionnalité à mon application, mais je ne pouvais pas
Vous pouvez utiliser la barre de progression de l'incubateur.
http://google-web-toolkit-incubator.googlecode.com/svn/trunk/demo/ProgressBar/index.html
Peut-être que vous pouvez essayer cela et s'il vous plaît commentaire si cela fonctionne ou non;
Je ne vous enverrai que le fichier html. Vous pouvez concevoir selon votre code. Comment cela se passe-t-il? Il y a un élément div incluant "chargement". Lorsque la page est écrite en premier html simple chargé et le texte de chargement sera affiché. Après le chargement du fichier html, votre fichier nocache.js commencera (toujours votre texte en lecture). Après le chargement du fichier js, le script onmoduleload démarrera (le chargement du texte reste visible) et après que tous les widgets créés et vos panneaux seront prêts. Essayez le code ci-dessous et supprimez le "chargement" du texte de l'écran;
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>
Le "problème" avec cela est que l'utilisateur ne sait pas combien a été chargé. Avez-vous une idée, comment je pourrais obtenir quelque chose comme "100kb de 500kb chargé"? –
@Chris_Boesing Oui vous avez raison, j'essaie seulement de donner un échantillon au point de départ de votre question. –
oui les gars, ça marche mais comme Chris a dit je veux savoir comment le pourcentage est complété – Nav
Selon le design (à peu près), il mentionne modules de séparation hors où il est logique car il ne supporte pas techniquement prélecture; Cela étant dit, je ne peux que supposer que GMail montre des progrès basés sur la progression du chargement du module vérifiée par des rappels (par exemple, GWT.runAsync()). Tous les modules sont de la même taille, mais vous pouvez « devinestimer » et attribuer un pourcentage pondéré pour chaque module (voir de GWT compile report)
Si votre taille de la page initiale téléchargement est grande (> = 1 Mo), I Je recommanderais de refactoriser et d'optimiser votre design pour qu'il soit un peu plus léger (échafaudage). Ce qui signifie plus de déplacements vers le serveur mais limite la taille initiale du téléchargement. Cela fournirait la base pour donner à l'utilisateur des informations plus précises sur le fait que la page "fonctionne" (c'est-à-dire barre de progression indéterminée) et évite toute précision inutile.
La taille totale de la page est une chose difficile à mesurer réellement en route vers le client/navigateur, il serait plus difficile que cela vaut la peine de l'afficher à l'utilisateur. Vous pourrait probablement accomplir cela avec plusieurs modules légers, mais vous devrez compenser toutes les ressources générées comme ClientBundle parce que GWT crée un ensemble spécifique pour chaque permutation du navigateur.
Sidenote: rétroaction en temps réel tels que pour le progrès de la précision de la taille du fichier (par exemple 80 Ko de 1.29MB (6% complet)) est généralement utilisé lors du téléchargement d'un fichier (par exemple, des images, de la vidéo, la musique, et al) sur le disque dur de l'utilisateur.Les données à ce moment-là ne sont plus transitoires et l'espace de stockage peut être une préoccupation, les caches effacent et affleurent, donc ce n'est généralement pas une grosse affaire.
Vous pouvez utiliser la même approche que Apache Hupa, qui affiche simplement un gif animé pendant le chargement de l'application. Une fois l'application chargée, elle supprime le gif animé via la structure dom de la page hôte.
Merci pour votre réponse. Cette question ne concerne pas une barre de progression dans votre application, mais plutôt une barre de progression qui s'affiche avant que l'application ne soit complètement chargée. L'utilisateur sait donc combien de temps il doit attendre. –
@Chris Merci pour votre commentaire. Je veux juste montrer la barre de progression et son utilisation –