Bouton
Acteur bouton poussoir.
Sommaire
🔧 propriété · ℹ️ information · ⚙️ méthode · ⚡ évènement · 🔒 lecture seule
Propriétés
Actif?
this.properties.enabled · boolean · défaut true · modifie : Style CSS
La propriété spécifique Actif permet de gérer l’activation du bouton.
Lorsque la propriété est désactivée, le bouton concerné n’est pas cliquable par l’utilisateur. Les événements hormis ceux du cycle de vie de l’acteur sont de ce fait désactivées.
Lorsque la propriété est activée, le bouton fonctionne normalement et tous ses événements sont activés.
Contenu
this.properties.content · string · défaut '' · {{jokerable}}
Contenu HTML du bouton. Peut être complété par des jokers.
Cette propriété permet de définir du contenu HTML de l’acteur.
Exemple :
Ceci est <i>un</i> <b style="background-color: red;">bouton</b>
Jokerable
Il est possible de placer des jokers (ex.: {{jokerKey}}) dans le contenu qui seront remplacés par la valeur d’additionnelles de même clé.
Par exemple :
Ceci est <i>un</i> <b style="background-color: {{theColor}};">bouton</b>.
Une additionnelle de clé theColor de type couleur remplacera le joker par sa valeur.
S’il est possible d’ajouter du style CSS avec une balise HTML
<style>, il n’est par contre pas possible d’ajouter du code Javascript. Pour cela, il faut utiliser les évènements de l’acteur.
Dépassement de texte
this.properties.textOverflow · 'nowrap' | 'break' | 'wrap' | 'truncate' · défaut 'nowrap' · modifie : Rendu
Comportement au dépassement de texte.
La propriété spécifique Dépassement de texte permet de gérer l’affichage du texte dans le cas où la taille du conteneur ne suffit pas à afficher l’entièreté du texte.
Il existe donc quatre options pour cette propriété :
- Sans retour à la ligne.
- Retour à la ligne.
- Retour à la ligne (cassure).
- Tronqué.
Voici des exemples pour chacun des exemples :
Sans retour à la ligne
Retour à la ligne
La taille verticale de l’acteur est automatiquement adaptée à la taille du texte sauf si celle ci est fixée.
Tronqué
Mode
this.properties.mode · 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'default' | 'dark' | 'link' · défaut 'default' · modifie : Rendu
Mode d’affichage du bouton.
La propriété spécifique Mode va permettre de donner un style au bouton via l’ajout d’une classe Bootstrap.
Chaque classe possède son code couleur propre.
Liste des options disponibles avec leurs exemples :
Outline?
this.properties.outline · boolean · défaut false · modifie : Rendu
Indique si le mode d’affichage du bouton doit êre détouré.
La propriété spécifique Outline va permettre de donner un style de couleur inversée au bouton de l’acteur.
La couleur de fond de bouton devient la couleur de la police. Et la couleur de la police devient la couleur du fond.
Exemple :
Un bouton avec le mode succès et outline désactivé :
Un bouton avec le mode succès et outline activé :
Taille
this.properties.size · 'default' | 'large' | 'small' · défaut 'default' · modifie : Rendu
Taille de l’acteur.
La propriété spécifique Taille permet de changer celle de l’acteur.
Cette propriété possède trois options :
- Par défaut.
- Grand.
- Petit.
Seul le choix par défaut vous laisse la possibilité de modifier la taille du texte. Les autres options prennent le pas sur tout autre réglage.
Attention
Il est à noter que la taille du bouton dépend de plusieurs paramètres dont :
- La place disponible par rapport à son acteur parent.
- La place disponible par rapport aux autres acteurs.
- La taille de son contenu.
Informations
Accessibles par script, via this dans un script de l’acteur ou context.getActor('clé') depuis un autre acteur.
Contenu complété
this.completedContent · 🔒 lecture seule · String
Le texte une fois complété.
Le champs d’information contenu complété est le texte résultant une fois les jokers remplacés par les valeurs des additionnelles.
Est Pressé ?
this.pushing
Indique si le bouton est en train d’être enfoncé.
Le champ d’information Est pressé? est un booléen qui est true lorsque le bouton est pressé et repasse à false lorsque le bouton est relâché, après un petit délai de relaxation.
Événements
Les évènements communs à tous les acteurs sont décrits avec l’acteur de base.
onDidButtonPush
Se produit lorsque le bouton est enfoncé.
context : contexte d’évènement
onDidButtonRelease
Se produit lorsque le bouton est relâché.
context : contexte d’évènement
Hérite de
Outre ce qui est décrit ici, l’acteur a tout ce que décrit l’acteur de base : propriétés communes (taille, disposition, aspect, texte, bordures, effets…), évènements communs (cycle de vie, souris, clavier…) et membres accessibles par script.
Il hérite aussi de :
- JokerableContent (comportement) : Étend la classe pour permettre d’ajouter des jokers sur un contenu. Par défaut sur
properties.content. Le valeur d’un joker est obtenue sur l’additionnelle de même clé. - InputBase : Base pour les acteurs de saisie.
Presets
Icône
Le preset de l’acteur bouton offrant la possibilité d’intégrer une icône choisie parmi les icônes intégrées à Synapps.
Le contenu du bouton est complété par une additionnelle icône et une additionnelle texte.
Écriture fournisseur
Ce preset “Bouton d’Écriture Fournisseur” permet de déclencher manuellement le processus d’écriture des données vers un acteur fournisseur spécifique.
Le contenu du bouton est complété par une additionnelle “Acteur fournisseur ciblé”, qui permet de choisir l’acteur fournisseur vers lequel le bouton d’écriture est dirigé.
