Bouton de navigation

L’acteur bouton de navigation permet, en plus de toutes les possibilités de l’acteur bouton, de naviguer entre les scènes ainsi que de modifier la scène affichée dans un acteur écran.

Ses propriétés sont similaires aux propriétés de l’acteur bouton et la documentation de ces propriétés peut être retrouvée à cette adresse.

Ses propriétés, dont celles héritées du bouton, sont listées ci-dessous.

Sommaire

• Bouton de navigation
• Propriétés
  • Actif?
  • Clé de l’acteur écran
  • Contenu
  • Dépassement de texte
  • Mode
  • Outline?
  • Scène
  • Taille
• Informations
  • Contenu complété
  • Est Pressé ?
• Méthodes
  • navigate()
• Événements
  • onDidButtonPush
  • onDidButtonRelease
• Hérite de
• Presets
  • Icône

🔧 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.

Clé de l’acteur écran

this.properties.screenActorKey · clé d'acteur · défaut null · modifie : Rendu

Clé de l’acteur écran à afficher.

La propriété spécifique Clé de l'acteur écran permet de sélectionner un acteur écran afin de changer la scène qu’il affiche.

Dans l’inspecteur, une aide est disponible pour la saisie de la clé de l’acteur écran. Cette aide liste tous les acteurs écrans de la scène courante.

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é :

Scène

this.properties.displaySceneKey · clé de scène · défaut null · modifie : Rendu

Clé de la scène à afficher.

La propriété spécifique Scène permet de définir la scène vers laquelle le bouton va rediriger l’utilisateur.

Dans l’inspecteur, une aide référence toutes les scènes du projet vers lesquelles il est possible d’être redirigé.

Il y a deux cas de figure lors de la selection d’une scène.

• Le champ clé de l'acteur écran est laissé vide :
  Le bouton va entraîner une navigation vers la scène sélectionnée.

• Le champ clé de l'acteur écran est renseigné avec la clé d’un acteur écran :
  Le bouton va entraîner un changement d’affichage de l’acteur écran qui affichera la scène renseignée dans la propriété scène.

Modification des paramètres d’une scène grâce au bouton de navigation

Lors de la sélection de la propriété Scène, si la scène sélectionnée possède un ou des paramètre(s) de scène, une aide va apparaître en dessous de la selection.

Cette aide va permettre de renseigner une valeur différente à un paramètre de la scène afin de changer cette valeur.

Il suffit que la valeur de ce paramètre de scène soit lié à un autre élément d’un acteur pour que celui-ci change également.

Il est à noter que ceci peut être effectué sur la scène sur laquelle se trouve le bouton de navigation, ainsi, à l’aide du bouton, il est donc possible de changer des paramètres de la scène courante.

Exemple

Ci dessous, l’exemple d’une scène qui possède deux boutons qui font changer un paramètre de scène dont la valeur est liée à celle d’un acteur texte.

SYNAPPS-STUDIO-SCENE|{"config":{"key":"scene1","name":"Scène 1","additionalDefs":{"prop1":{"type":"text"}},"additionals":{"prop1":"TEST"}},"leadActor":{"type":"layout/stack","key":"stack1","children":[{"type":"input/nav-button","key":"nav-button1","properties":{"content":"Bouton de navigation","displaySceneKey":"scene1"},"additionals":{"prop1":"Hello world !"},"additionalDefs":{"prop1":{"type":"text"}}},{"type":"input/nav-button","key":"nav-button2","properties":{"content":"Bouton de navigation","displaySceneKey":"scene1"},"additionals":{"prop1":"Lorem Ipsum"},"additionalDefs":{"prop1":{"type":"text"}}},{"type":"display/text","key":"text1","properties":{"content":"Voici du texte !"},"bindings":{"properties.content":"stage@additionals.prop1"}}]}}

Si vous désirez commander les paramètres d’une scène à travers un acteur écran, n’oublier pas de créer les additionnelles correspondantes sur celui-ci également, sinon, aucune action ne sera transmise

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.

Méthodes

navigate()

this.navigate()

Navigue vers la destination définie comme si le bouton avait été utilisé.

Voir aussi : le concept de navigation, l’acteur écran et la navigation par script dans les scripts utiles.

É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 :

• Button : Acteur Bouton. Type : input/button
• 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.

---

✔️ FR IT

❔ Posez une Question 💡 Proposez une Suggestion 💬 Venez discuter

made by