FR 8. FAB (Floating Action Button)
Les FAB sont des boutons circulaires flottant au-dessus de l'interface utilisateur d'un formulaire. Ils agissent comme des boutons d'appel à l'action, censés représenter l'action unique que les utilisateurs exécutent le plus sur cet écran particulier.
La fonction FAB que nous vous proposons, vous permettra de créer et gérer ce type de boutons flottants.
Cette fonction permet de désigner une instance comme bouton principale qui va contenir une collection d'autres boutons secondaires.
Une fois les rôles définis, le bouton principal va être assigné à un callback interne au composant lui permettant d’afficher ou de masquer les autres boutons secondaires associés à la collection. Lors de l’affichage, les boutons secondaires vont être répartis autour du bouton principal reproduisant une forme de cercle. La taille, le sens et la répartition des boutons secondaires sur ce cercle peuvent être définis via les propriétés liées à la fonctionnalité FAB.
Il est possible d’appliquer une animation lorsque les boutons secondaires sont affichés ou masquées.
| Nom | Type | Par défault | Description |
|---|---|---|---|
| mainBtn | boolean | False | Si vrai, le bouton est désigné comme bouton principal d’un système FAB. Il a comme unique fonction d'afficher et alternativement de masquer les boutons secondaires. Les éventuels callback définis (OnClick et OnDoubleClick) à ce bouton seront ignorés. |
| btnCol | collection | collection vide | Collection des noms des boutons secondaires (nom de l’objet de formulaire image) qui vont composer le système FAB. Leurs positions dans la collection peuvent être définies via une fonction d’ajout (FABAdd). |
| clockwise | boolean | True | Si vrai, la répartition des boutons se fait dans le sens des aiguilles d’une montre sinon c’est le contraire. |
| startAngle | longint | 270 | Angle à partir duquel le premier bouton secondaire sera positionné. Les valeurs 0 à 359 sont admises. La valeur est en degré. Le point de départ des valeurs d'angle (valeur 0) est localisé à 3h. |
| angleToTravel | longint | 180 | Définit la taille relative de l’angle ou les boutons secondaires vont devoir être répartit en partant de l’angle de départ (startAngle) et en se basant sur le sens (clockwise). Les valeurs 0 à 360 sont admises. La valeur relative est en degré. |
| radius | longint | 100 | Espace entre les boutons secondaires et le bouton principal. La valeur est exprimée en pixels relatifs au centre du bouton primaire et des boutons secondaires. |
| mainPosition | string | chaîne vide | Permets d’utiliser un positionnement de bouton prédéfini par le composant (voir le sous-chapitre « positions prédéfinies"). L’utilisation d’une position prédéfinie va automatiquement mettre à jour les propriétés startAngle et angleToTravel. |
| animation | boolean | False | Permet d’activer l’animation du FAB. |
Voici les 9 positions prédéfinies et leurs identifiants que vous pouvez entrer dans la fonction membre "FABMainPosition".
Famille des fonctions membres liées à la fonction FAB.
- FABIsMainButton ( { $active } ) : Getter/Setter pour la propriété « mainBtn ».
- FABIsClockwise( { $clockwise } ) : Getter/Setter pour la propriété « clockwise ».
- FABStartAngle ( { $angle } ) : Getter/Setter pour la propriété « startAngle ».
- FABAngleToTravel ( { $angle } ) : Getter/Setter pour la propriété « angleToTravel ».
- FABRadius ( { $radius } ) : Getter/Setter pour la propriété « radius ».
- FABMainPosition ( { $namePosition } ) : Getter/Setter pour la propriété « mainPosition ».
- FABAdd ( $nameBtn { ; $position } ) : Ajoute le nom d’un bouton à la collection. Vous pouvez définir sa position dans liste en deuxième paramètre optionnel sinon il sera ajouté à la fin. Si le nom d’un bouton existe déjà dans la liste, la méthode agira comme une méthode de mise à jour de la position, et ne créera pas de doublon.
- FABRemove ( $nameBtn ) : Retire de la collection le nom du bouton en paramètre.
- FABClearCollection ( ) : Supprime tous les éléments présents dans la collection.
- FABIsAnimated ( { $isActivated } ) : Active/inactive l’animation
La première chose à faire pour mettre en place la fonction FAB consiste à créer chacun des boutons qui vont la composer.
Une fois réalisé, vous allez définir une instance comme bouton principal grâce à la fonction membre "FABIsMainButton". Ce bouton aura désormais comme unique fonction d'afficher et de masquer les boutons secondaires sur les événements « On Mouse Up » et/ou « On Double Click ». Les éventuels callback définis (OnClick et OnDoubleClick) pour ce bouton seront ignorés.
Ensuite, il faut ajouter à cette instance les noms des autres boutons avec la fonction "FABAdd", vous pouvez définir leur position dans la collection. Vous pouvez également activer l’animation du FAB.
Lors du chargement de votre formulaire, le bouton principal va automatiquement cacher les boutons secondaires. Pour un exemple concret d’implémentation, nous vous conseillons de regarder le code du formulaire HDI_FAB dans le lab du composant.