FR 2. Les bannières
Les bannières sont différenciées en deux formats ou types dénommés ruban d'angle « cornerRibbon » ou fenêtre « window ».
Une bannière est forcément associée à une variable formulaire de type image (voir chapitre prise en main). Celle-ci, va permettre d’accueillir la bannière. Le placement de la variable image sera également gérée par le composant en fonction du type choisit.
L’affichage de la variable image est à la charge du développeur.
La bannière ruban d'angle « cornerRibbon » est une image qui va être placée à l’un des quatre coins d’un formulaire.
L’image représente un bandeau qui va être disposé en diagonal en fonction de sa position. Son but principal est de fournir une information claire et distincte à l’utilisateur.
Comment l'utiliser
L’utilisation du ruban d'angle « cornerRibbon » est utile lorsqu’on veut donner une information importante à l’utilisateur sur un jeu de données. Par exemple, si l'enregistrement chargé dans le formulaire est actuellement verouillé, vous pourrez informer via la bannière de l'état de celui-ci.
Sur le même principe, on peut imaginer de signaler lorsqu’on charge une facture, le fait qu’elle soit réglée ou qu’un client est considéré comme mauvais payeur ou encore afficher un niveau de priorité. D'une façon générale, l’idée est que la bannière attirera l’attention de l’utilisateur pour lui indiquer une information importante.
Depuis la version 1.6 d’AJUI Banner, il est possible d’associer la bannière ruban directement à un objet de formulaire ou à une zone spécifique. Pour cela, deux nouvelles formules sont mises à disposition :
- RibbonTargetName
- RibbonTargetCoordinates
La première formule attend le nom d’un objet de formulaire. Le composant se chargera de récupérer les coordonnées de celui-ci, afin de positionner le ruban à l’un de ses quatre angles (top-left, top-right, bottom-left et bottom-right). Attention, l’objet de formulaire doit provenir du formulaire principal.
La seconde formule permet de passer directement les coordonnées (gauche, haut, droite, bas) afin de créer une zone qui recevra le ruban à l’un de ses quatre coins. Cette méthode permet de passer outre la limite de la première méthode en spécifiant par exemple des coordonnées qui correspondent à la position d’un objet de sous-formulaire (voir la méthode de 4D CONVERT COORDINATES pour convertir les coordonnées entre sous-formulaire et formulaire).
La bannière « window » est une image recouvrant l’ensemble du formulaire associé, elle doit donc être placée au premier plan de la page du formulaire. Elle peut contenir soit du texte ou une image.
Dans le cas du texte, AJUI_Banner dessine une première forme rectangulaire, servant à couvrir l’ensemble du formulaire, à laquelle est associé une couleur de fond avec un taux d'opacité. Puis, il centre une deuxième forme, la bannière (rectangle central) et son contenu textuel.
Dans le cas de l'utilisation d'une image, AJUI_Banner applique également un premier rectangle de recouvrement global et ensuite il centre l’image associée.
Le but de la bannière fenêtre « window » est principalement de signaler un traitement en cours à l’utilisateur.
Comment l'utiliser
L’utilisation de la bannière fenêtre « window » est intéressante principalement pour deux situations. Si un traitement est lancé et qu'il peut prendre un certain temps, il est bon de le signaler à l'utilisateur et de bloquer toutes actions possible sur l'interface de sa part sur le formulaire courant. Il est aussi possible d'utiliser ce mode pour permettre l'affichage en gros plan d'une information utile momentanément. Par exemple afficher et de façon distinctive un numéro de téléphone, un numéro de série, etc.
Le deuxième usage possible, consiste à afficher une image. On peut ainsi imaginer afficher une image en overlay (fond noir semi-transparent) permettant à l’utilisateur de s’informer sur l’utilisation des champs, boutons, etc. dans un formulaire complexe à appréhender (figure de gauche). Ou afficher la photo d'un visage ou d'un objet, etc. (figure de droite).
Précision : Le type « window » va permettre de bloquer principalement les événements liés aux interactions avec la souris comme le clique, le focus, etc. étant donné qu’il se repercute sur l’image à l’avant-plan. Cependant des interactions avec le clavier comme la tabulation ne peuvent pas être stoppées par la bannière. Faites donc attention à bien gérer les comportements que la bannière ne peut contrecarrer.
Les bannières « spinners » sont des extensions de la bannière « window ». Le « spinner » est image représentant une sorte de roue qui est animé afin de suggérer à l’utilisateur un temps de chargement. Nous utilisons un Worker afin de réaliser l’effet d’animation.
Le premier type permet d’afficher le « spinner » seul au centre de l’écran et en y ajoutant un arrière-plan comme pour le type « window ».
Le second type « windowSpinner » va faire comme le précédent sauf qu’une zone de texte y est inclus est que le « spinner » sera situé à droite ou à gauche du texte.
Du fait que le langage SVG n'offre pas la possibilité d’un alignement vertical dans le cadre des zones de texte (TextArea) et par souci de cohérence de notre part, nous avons pris le parti de centrer verticalement le texte en fixant une contrainte :
- Le texte doit tenir sur une seule et unique ligne !
Les différents types de bannières ne peuvent pas être affichés dans un sous-formulaire. Cependant, vous pouvez définir et appeler le drawBanner dans un sous-formulaire et il sera affiché dans le formulaire principal. N'oubliez pas de mettre la variable image au niveau du formulaire principal. (voir le chapitre Prise en main)