Une interface utilisateur améliorée avec AJUI_Progressbar

Vous est-il déjà arrivé d’exécuter une action, que rien ne semble se produire et que vous ne sachiez pas si vous deviez cliquer à nouveau ou continuer à attendre ? Aucun retour d’information n’est fourni, même si l’application effectue une action en arrière-plan ? Peut-être l’action nécessite-t-elle un certain temps pour renvoyer un résultat ? Comme vous le savez peut-être, 4D fournit déjà un composant de barre de progression intégré qui rend le temps d’exécution plus tolérable, mais si vous voulez quelque chose avec un design plus web, alors continuez à lire, car c’est ce que l’AJUI_Progressbar vous donne !

Qu’est-ce que AJUI_Progressbar ?

AJUI ProgressBar est un composant développé avec 4D 17 R3, basé sur la technologie SVG et 4D Worker. Il vous permet de générer des barres de progression très facilement. Le composant crée un ensemble de propriétés pour définir les caractéristiques et le rendu visuel des barres de progression. Il y a aussi des formules pour accéder aux évaluateurs et aux méthodes pour générer des barres de progression.

Le composant contient deux types d’instances, représentant deux variantes spécifiques des barres de progression disponibles. Le premier modèle est un style linéaire et le second est circulaire. Chaque variante possède des propriétés spécifiques à son design.

Les barres peuvent se voir attribuer des valeurs numériques allant de 0 à 100, mais comme le texte affiché peut être personnalisé, il est possible de représenter visuellement d’autres valeurs. Le composant utilise Worker pour rafraîchir la page lors de la génération des barres de progression. Le Worker a également une autre utilité : offrir la possibilité de gérer des animations.

Le composant propose plusieurs méthodes pour personnaliser et manipuler la barre de progression en utilisant un objet et des fonctions. Il fournit également deux méthodes pour récupérer des instances pour chaque type de barre de progression :

• New AJUI_ProgressBar : Barre de progression linéaire.
• New AJUI CircularProgressBar : Barre de progression circulaire.

Les deux méthodes retournent des obejcts contenant les propriétés de la barre, leurs valeurs par défaut, ainsi que des formules pour les manipuler.

Les autres méthodes disponibles sont préfixées par « HDI » (How do I). Ces méthodes vous permettent d’appeler des formulaires contenant des exemples d’utilisation des fonctionnalités du composant.

Configuration d’une barre de progression linéaire

• Tout d’abord, ajoutez un objet image à un formulaire. Cet objet sera utilisé pour héberger la barre de progression. Vous pouvez ajouter plusieurs objets image si vous souhaitez générer plusieurs barres de progression simultanément.
• La deuxième étape consiste à créer une instance de la barre de progression. Vous pouvez choisir de lancer l’une des deux méthodes décrites ci-dessus. Idéalement, l’objet renvoyé par la méthode de votre choix devrait être stocké dans la variable « Form ». Il est également recommandé d’ajouter un niveau à l’objet « Form ».

Une fois que c’est fait, ajoutez le nom de votre objet image à l’instance. Puis pour les tests, nous vous suggérons de modifier la valeur de la progression (par défaut : 0) et d’activer les animations. Pour générer votre barre de progression, il suffit de lancer la formule « launch » correspondante.

Si vous avez ajouté plusieurs objets images, répétez la deuxième étape pour chacun d’eux (une instance par objet image).

Voici à quoi ressemble le code d’une barre de progression linéaire :

AJUI_Progressbar en profondeur

Plus de détails, ainsi qu’un tutoriel étape par étape sur l’utilisation et la configuration du composant, sont disponibles ici. Que vous choisissiez d’utiliser le composant AJUI_Progressbar ou la barre de progression intégrée de 4D, vous rassurerez les utilisateurs en leur montrant que quelque chose est en train de se passer. Amusez-vous bien !