Avez-vous déjà été submergé par des boîtes de dialogue de confirmation, des boîtes d’alerte et des fenêtres d’aide contextuelle qui rendent presque impossible la localisation de la fenêtre de formulaire sur laquelle vous travailliez ? Ne serait-il pas plus convivial de rester sur la même page et de voir les bulles d’aide pointer directement sur la cible initiale ?
C’est possible grâce au composant 4D AJUI_Tip. Il s’agit d’un puissant moteur d’infobulles basé sur les technologies disponibles dans 4D telles que ORDA, New Formula, SVG, SubForm, CALL FORM, pour n’en citer que quelques-unes. Dans cet article de blog, nous allons mettre en évidence l’utilisation du composant et montrer comment vous pouvez concevoir de belles infobulles pour améliorer l’interface utilisateur de vos applications. Un lien de téléchargement se trouve à la fin de l’article.
Qu’est-ce qu’AJUI_Tip
AJUI_Tip est un composant 4D qui vous permet de générer et d’afficher dynamiquement des infobulles (Tip) dans le contexte d’un formulaire. Le composant offre plusieurs méthodes pour personnaliser et manipuler les tips via un objet et des fonctions.
Le composant est composé de trois éléments :
- Une variable image : Le composant construit l’image à partir d’un certain nombre de propriétés en langage SVG. Le résultat est un ensemble de calculs basés sur différents critères (taille du contenu, padding, rayon, etc.) qui seront utilisés pour dessiner le contour de l’infobulle et sa flèche. Le SVG peut également intégrer une zone de texte et un bouton (pour fermer l’infobulle).
- Un sous-formulaire : Vous pouvez intégrer un formulaire de la base de données principale dans l’infobulle. Le sous-formulaire, s’il est défini, prend la place d’une zone de texte.
- Une variable objet : Permet de maintenir les propriétés du tooltip lors des différentes opérations du composant.
Bonjour le monde
La mise en place de votre première infobulle peut être résumée en quatre étapes :
- Tout d’abord, vous devez appeler la méthode d’initialisation new AJUI_Tip pour récupérer un objet et une instance avec toutes les propriétés et formules d’un tooltip par défaut. Nous vous recommandons d’utiliser directement la variable « Form » pour stocker l’instance courante afin de pouvoir naviguer facilement entre votre méthode et vos objets de formulaire.
Form.Tip:= new AJUI_Tip
- Utilisez les formules de votre objet pour définir les propriétés de l’instance du tooltip, en fonction de vos besoins.
Form.Tip.TipName("test")
Form.Tip.TextLabel("Hello World")
- Définissez un nom qui restera associé à l’instance de tooltip.
- Veillez à définir un texte à afficher. Ce texte peut être stylisé(par exemple, des mots ou des lettres en gras, en italique ou en couleur dans une zone de texte).
- Enfin, utilisez la formule « show » pour lancer la génération de l’instance d’infobulle. Par exemple, vous pouvez la tester sur l’un de vos objets de formulaire avec un événement « On Clicked ».
Case of
: ( ) ( )$evt=On Clicked
Form.Tip.show
End case
En suivant les étapes précédentes, vous devriez voir quelque chose comme l’image ci-dessous. Félicitations, vous avez créé votre première infobulle !
animez vos infobulles
Que diriez-vous de rendre votre infobulle encore plus expressive ? Eh bien, AJUI_Tip vous permet d’animer ces petites bulles avec différents styles d’animation( par exemple, fondu enchaîné, clignotement, saut, etc.).
AJUI_Tip en profondeur
Cet article n’a fait qu’effleurer la surface de ce puissant composant. Plus de détails, ainsi qu’un tutoriel étape par étape sur son utilisation et sa configuration, sont disponibles ici. Vous pouvez également le télécharger. Bonne lecture !