Sujet : Indicateur de progression

Résumé : Cet article discute de l'implémentation d'un indicateur de progression affichant un graphique sur les pages prenant un temps significatif pour leur traitement.

Introduction

Si une page web prend plus longtemps que quelques secondes à se procéder alors la plupart des visiteurs du site en déduirons qu'il se passe quelque chose d'anormal et rechargerons la page ou quitteront le site. Dans ces cas il est souhaitable de montrer un graphique affichant le temps de traitement restant indiquant que la page est en train d'être générée. Un utilisateur attendra beaucoup plus longtemps s'il sait que le process est en cours.

Cet article montre une implémentation de barre de progression. Cet indicateur est implémenté dans une LassoApp à l'aide d'une balise personnalisée (custom tag) [ProgressIndicator_Create] appelé sur le site.

Note - les fichiers d'exemple sont fournis uniquement à des fins de démonstration. OmniPilot, ni ELIDEE, je fournissent un support sur ces fichiers d'exemple ou toute solution qui serait créée à partir d'eux.

Méthodologie

Le problème de base dans le fait de créer un indicateur de progression est que deux choses doivent se produire en une seule fois. Une page web avec le graphique de progression doit être mise à jour en même temps que la page attendu par l'internaute est procédée. Une méthode de communication entre les deux process doit être établie.

L'exemple d'indicateur de progression utilise une variable globale pour stocker l'état d'une ou plusieurs pages et leur progression. Un appel asynchrone est fait par [Include_URL] de façon à charger la page web qui est attendue et qui prend un long moment à être procédée. Une fois que cette page est retournée, son contenu est stocké dans la variable globale.

Pendant ce temps, l'internaute est redirigé vers une page web comprenant le graphic de progression. Cette page utilise un meta-refresh de manière à rafraichir les informations de progression périodiquement. A chaque fois qu'elle est reachargée cela met à jour le graphique de progression et vérifie si la variable globale afin de s'assurer que la page web demandée a fini d'être procédée. Une fois procédée la page est retournée.

L'utilisateur voit un graphique de progression pendant quelques secondes et enfin la page qui était sensée être appelée initialement. L'utilisateur ne devrait pas voir de délai supplémentaire une fois que la page demandée a été finie de procéder.

Progress Indicator LassoApp

L'exemple ProgressIndicator.LassoApp peut être téléchargé depuis l'URL suivante. Le téléchargement inclut le code source ainsi qu'une version de la LassoApp fonctionnant sous Lasso 8.

http://support.omnipilot.com/article_files/progressindicator.zip

Pour tester la LassoApp vous devez la placer directement à la racine de votre serveur web. Lorsque vous l'appelerez directement elle affichera un exemple de barre de progression.

De façon à appeler la balise [ProgressIndicator_Create] la LassoApp doit être incluse soit en l'appelant par exemple par [Include: '/ProgressIndicator.LassoApp'] ou en la plaçant dans le dossier LassoStartup de l'application Lasso.

[ProgressIndicator_Create]

La balise [ProgressIndicator_Create] requiert une seul paramètre -Response spécifiant l'URL entière (incluant http://nom_serveur/...) vers la page attendue et dont on sait qu'elle prend un certain temps à être procédée. Par défault, la balise affichera un indicateur d'occupation lequel se rafraîchira toutes les 6 secondes.

Par exemple, la balise suivante affichera un indicateur de progression avant la génération d'un rapport complet:

[ProgressIndicator_Create: -Response='http://www.example.com/generatereport.lasso']

Un indicateur de pourcentage peut être affiché en ajoutant quelques paramètres optionnels. -Type='percent' paramètre l'indicateur en mode pourcentage. Par défault 10% seront rajoutés à chaque rechargement de la page à votre barre de progression. Si la page se recharge plus de 10 fois alors l'indicateur d'occcupation sera affiché en lieu et place.

Par exemple, la balise suivante affiche un indicateur de pourcentage progressant de 10% toutes les 6 secondes. Si la page met plus lontemps qu'une minute à être procédée alors un indicateur d'occupation est utilisé pour le temps restant.

[ProgressIndicator_Create: -Response='http://www.example.com/generatereport.lasso', -Type='percent']

Le paramètre -Delay contrôle quant à lui la fréquence de rechargement de la page. Par défaut il est paramétré à 6 secondes.

Le paramètre -Increment contrôle quel pourcentage est ajouté au total à chaque rechargement de la page. Par défaut il est pramétré à 10 (le graphique de pourcentage affiche uniquemnt les incréments de 10%).)

Customisation

La balise [ProgressIndicator_Create] accepte les paramètre suivants de manière à customiser l'indicateur de progression:

-Title contrôle le titre HTML de la page.

-Header contrôle l'en-tête H1 en tête de page.

-TopMsg contrôle le texte affiché au-dessus de l'indicateur de pourcentages.

-BtmMsg contrôle le texte affiché en-dessous de l'indicateur de pourcentages.

Des customisations plus élaborées peuvent être réalisées en modifiant directement le code source de la LassoApp ProgressIndicator et en la recompilant. Ceci peut comprendre l'intégration de différents graphiques, feuille de style, éléments spécifiques au site, etc.

Plus d'informations

L'exemple ProgressIndicator.LassoApp peut être téléchargé depuis l'URL suivante. Le téléchargement inclut le code source ainsi que la version Lasso 8 de la LassoApp.

http://support.omnipilot.com/article_files/progressindicator.zip

Plus d'informations à propos des balises utilisées pour créer l'indicateur de progression peuvent être trouvées dans le manuel Lasso 8 Language Guide ou dans la référence en ligne Lasso 8 Reference à l'adresse http://ldml.omnipilot.com/>.