Modale

Acteur qui permet d’afficher une boite de dialogue ou un menu.

Sommaire

• Modale
• Propriétés
  • Ancrage horizontal de la modale
  • Ancrage horizontal sur l’acteur attaché
  • Ancrage vertical de la modale
  • Ancrage vertical sur l’acteur attaché
  • Clé de l’acteur attaché
  • Dépassement Horizontal
  • Dépassement Vertical
  • Ferme si clique ailleurs
  • Montrer?
  • Overlay transparent
• Informations
  • canAddActor
  • canClearActors
  • canRemoveActor
  • childActors
• Méthodes
  • addActor(actorSetup, atIndex)
  • addActors(actorSetups)
  • clearActors()
  • getActor(key)
  • moveDownActor(key)
  • moveUpActor(key)
  • removeActor(actorKey)
  • removeActors(…actorKeys)
• Événements
  • onCloseModal
  • onDidActorAdd
  • onDidActorRemove
  • onDidActorsAdd
  • onDidActorsClear
  • onDidActorsRemove
  • onOpenModal
• Hérite de
• Ancrage de la modale
• Usage
  • Montrer/Cacher la modale
• Réinitialisation des héritages de propriété
• Presets
  • Modale au clic

🔧 propriété · ℹ️ information · ⚙️ méthode · ⚡ évènement · 🔒 lecture seule

Propriétés

Ancrage horizontal de la modale

this.properties.positionModalHorizontal · 'left' | 'right' | 'middle' · défaut 'middle' · modifie : Rendu

Ancrage horizontal sur l’acteur attaché

this.properties.positionAttachedHorizontal · 'left' | 'right' | 'middle' · défaut 'middle' · modifie : Rendu

Ancrage vertical de la modale

this.properties.positionModalVertical · 'top' | 'bottom' | 'middle' · défaut 'middle' · modifie : Rendu

Ancrage vertical sur l’acteur attaché

this.properties.positionAttachedVertical · 'top' | 'bottom' | 'middle' · défaut 'middle' · modifie : Rendu

Clé de l’acteur attaché

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

Dépassement Horizontal

this.properties.overflowX · 'hidden' | 'visible' | 'scroll' | 'auto' · défaut 'hidden' · modifie : Taille

Comportement au dépassement horizontal.

Les propriétés Dépassement vertical et Dépassement horizontal permettent de gérer le comportement de l’acteur vis à vis d’un dépassement éventuel de son contenu.

Si l’acteur dispose d’une taille figée OU est contraint par un autre élément (acteur parent par exemple), alors, les propriétés Dépassement horizontal et Dépassement vertical peuvent s’appliquer.

Il existe quatre options pour chacune de ces propriétés :

• Caché

Le contenu qui ne dispose pas de suffisamment de place pour s’afficher ne sera pas visible et ses éléments ne seront pas accessibles.

• Visible

Le contenu qui ne dispose pas de suffisamment de place est affiché en dehors de l’emplacement prévu pour l’acteur.

Attention, si un autre acteur chevauche ce dépassement, la partie qui dépasse sera cachée par cet acteur.

Il faut noter que les deux propriétés doivent être Visible afin d’obtenir le comportement souhaité.

• Défilement

Permet d’ajouter une scrollbar à l’acteur qui donne le moyen d’acceder au contenu qui dépassent.

• Automatique

Affiche une scrollbar uniquement s’il existe un dépassement.

Les options Visible et Caché ne sont pas compatibles entres elles.

Si votre contenu n’est pas visible, il y a de bonne chance que ce soit à cause de la taille réduite de l’acteur parent.

Dépassement Vertical

this.properties.overflowY · 'hidden' | 'visible' | 'scroll' | 'auto' · défaut 'hidden' · modifie : Taille

Comportement au dépassement vertical.

Ferme si clique ailleurs

this.properties.clickOutsideToClose · boolean · défaut true

Cette propriété autorise/interdit la modale de se fermer si l’utilisateur clique en dehors de la modale.

Si vous n’autorisez pas ce comportement, vous avez obligatoirement besoin de définir un bouton pour fermer la modale.

Montrer?

this.properties.isShown · boolean · défaut false · modifie : Taille

Commande l’affichage de la modale.

La propriété Montrer? permet d’afficher/cacher la modale.²

Vous pouvez activer cette propriété dans le designer pour apercevoir le contenu de la modale ou pour régler son ancrage. Vous avez également la possibilité d’avoir un apperçu de la modale en cliquant sur le bouton “oeil” juste à coté :

Overlay transparent

this.properties.translucentOverlay · boolean · défaut true

Active/désactive la présence d’un fond transparent opalescent derrière la modale.

Informations

Accessibles par script, via this dans un script de l’acteur ou context.getActor('clé') depuis un autre acteur.

canAddActor

this.canAddActor · 🔒 lecture seule · boolean

Pour savoir s’il est possible d’ajouter un acteur.

canClearActors

this.canClearActors · 🔒 lecture seule · boolean

Pour savoir s’il est possible de retirer tous les acteurs.

canRemoveActor

this.canRemoveActor · 🔒 lecture seule · boolean

Pour savoir s’il est possible de retirer un acteur.

childActors

this.childActors · 🔒 lecture seule · Array<BaseActor

Obtiens la liste de tous les acteurs enfants.

Méthodes

addActor(actorSetup, atIndex)

this.addActor(actorSetup, atIndex) · renvoie Promise<Actor.BaseActor>

Ajoute un acteur enfant. L’acteur est ajouté à la fin de la liste si atIndex n’est pas renseigné. Note: C’est le seul moyen de créer un acteur.

• actorSetup : Setup JSON de l’acteur à ajouter.
• atIndex : Position à laquelle l’acteur doit être ajouté.

addActors(actorSetups)

this.addActors(actorSetups)

Ajoute un acteur enfant : seul le premier setup de la collection est retenu, la modale n’accueillant qu’un enfant.

clearActors()

this.clearActors()

Retire tous les acteurs enfants.

getActor(key)

this.getActor(key) · renvoie Actor.BaseActor

Obtient un acteur enfant par sa clé.

• key : Clé de l’acteur à trouver.

moveDownActor(key)

this.moveDownActor(key)

Déplace vers le bas un acteur enfant obtenu par sa clé.

• key : Clé de l’acteur enfant à déplacer.

moveUpActor(key)

this.moveUpActor(key)

Déplace vers le haut un acteur enfant obtenu par sa clé.

• key : Clé de l’acteur enfant à déplacer.

removeActor(actorKey)

this.removeActor(actorKey)

Retire un acteur enfant.

• actorKey : Clé de l’acteur enfant à retirer.

removeActors(…actorKeys)

this.removeActors(...actorKeys)

Retire les acteurs enfants.

• actorKeys : Clés de l’acteur enfant à retirer.

Événements

Les évènements communs à tous les acteurs sont décrits avec l’acteur de base.

onCloseModal

Se produit lorsque la modale s’est fermée.

context : contexte d’évènement

onDidActorAdd

Se produit lorsque un acteur est ajouté.

context : contexte d’évènement, avec en plus :

Membre de context	Type	Description
addedActor	Actor.BaseActor	Acteur ajouté.

onDidActorRemove

Se produit lorsque un acteur est retiré.

context : contexte d’évènement, avec en plus :

Membre de context	Type	Description
removedActor	Actor.BaseActor	Acteur retiré.

onDidActorsAdd

Se produit lorsque une collection d’acteurs est ajoutée.

context : contexte d’évènement, avec en plus :

Membre de context	Type	Description
addedActors	Array.<Actor.BaseActor>	Acteurs ajoutés.

onDidActorsClear

Se produit lorsque la collection d’acteurs est vidée.

context : contexte d’évènement, avec en plus :

Membre de context	Type	Description
removedActors	Array.<Actor.BaseActor>	Acteurs retirés.

onDidActorsRemove

Se produit lorsque des acteurs sont retirés.

context : contexte d’évènement, avec en plus :

Membre de context	Type	Description
removedActors	Array.<Actor.BaseActor>	Acteurs retirés.

onOpenModal

Se produit lorsque la modale s’est ouverte.

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 :

• LayoutBase : Base pour les acteurs de disposition.
• Parenthood (comportement) : Étend la classe pour permettre d’avoir des acteurs enfants.

Ancrage de la modale

Par défaut, la modale va s’afficher au centre de l’écran. Vous pouvez définir un ancrage complètement différent.

Pour ancrer la modale, il y à trois points à observer :

• L’acteur attaché : par défaut, aucun acteur n’est attaché à la modale. Mais si vous en définissez un, la modale se positionnera par rapport à lui.
• L’ancrage Horizontal/Vertical de la modale : ces deux propriétés définissent un point sur la modale qui sera son ancre. C’est ce point qui sera ancré à celui de l’acteur attaché.
• L’ancrage Horizontal/Vertical de l’acteur attaché : ces deux propriétés définissent un point sur l’acteur attaché qui sera son ancre. C’est ce point qui sera ancré à celui de la modale.

Dans l’exemple ci dessous, la modale est attachée à un acteur bouton et son ancre est matérialisé par un cercle rouge, l’ancrage sur le bouton est vert :

Usage

La modale est un acteur de disposition qui n’accepte qu’un seul enfant. En général, vous y placerez un empilement qui contiendra l’interface de dialogue.

Placez le plus souvent possible vos modales tout en bas de vos arborescence d’acteurs. Cela évitera que leur contenu gène l’affichage des autres acteurs dans le designer.

N’oubliez pas de définir une taille pour votre modale. Sinon, elle ne s’affichera pas correctement.

Montrer/Cacher la modale

C’est la propriété Montrer ? qui permet d’afficher ou de cacher la modale. Vous pouvez modifier cette propriété par liaison.

Vous pouvez également utiliser un script dans un évènement. Par exemple, dans un acteur bouton, dans l’évènement onClick, vous pouvez écrire le script suivant pour afficher une modale nommée myModal :

context.getActor('myModal').properties.isShown = true;

Si vous n’êtes pas à l’aise avec les scripts, vous pouvez utiliser le preset Modale au clic qui est préconfiguré pour afficher/cacher la modale au clic sur un autre acteur.

Réinitialisation des héritages de propriété

L’héritage des propriétés est brisé dans une modale. Il faudra redéfinir ces propriétés à l’intérieure.

Par exemple, si vous définissez une taille de texte de 10px sur l’acteur principal d’une scène, cela ne sera pas appliqué à la modale.

Presets

Modale au clic

Ce preset de modale est préconfiguré pour indiquer l’acteur qui lorsqu’on cliquera dessus déclenchera son affichage et l’acteur qui déclenchera sa fermeture.

Voici un exemple de scène qui emploie ce preset :

SYNAPPS-STUDIO-SCENE|{"config":{"key":"scene145","name":"Exemple de modale au clic"},"leadActor":{"type":"layout/stack","key":"stack1","children":[{"type":"input/button","key":"button-open","properties":{"content":"Montrer","horizontalAlignment":"middle","verticalAlignment":"middle"}},{"type":"layout/modal","key":"modal-on-click1","properties":{"height":"200px","width":"200px","borderColor":"rgba(46, 193, 38, 1)","borderWidth":"8px","borderStyle":"solid"},"additionalDefs":{"showTrigger":{"type":"actor","label":"Affichage","helperTxt":"Acteur qui déclenche l'affichage."},"hideTrigger":{"type":"actor","label":"Fermeture","helperTxt":"Acteur qui déclenche la fermeture."}},"additionals":{"showTrigger":"button-open","hideTrigger":"button-close"},"children":[{"type":"layout/stack","key":"stack2","properties":{"verticalAlignment":"expand","paddingTop":"2px","paddingBottom":"2px","paddingRight":"2px","paddingLeft":"2px"},"children":[{"type":"display/text","key":"text1","properties":{"content":"la modale","horizontalAlignment":"middle","verticalAlignment":"middle"}},{"type":"input/button","key":"button-close","properties":{"content":"Fermer","mode":"danger","outline":true,"textAlign":"center"}}]}],"events":{"onPostInit":["const showTrigger = context.getActor(this.additionals.showTrigger);","","if (showTrigger) {","  const originalOnClickFx = showTrigger.events.onClick ? showTrigger.events.onClick.fx.bind(showTrigger) : null;","  if (originalOnClickFx) {","    showTrigger.removeEvent('onClick');","  }","","  showTrigger.createEvent('onClick', (...args) => {","    this.properties.isShown = true;","    if (originalOnClickFx) {","      originalOnClickFx(...args);","    }","  });","}","","const hideTrigger = context.getActor(this.additionals.hideTrigger);","","if (hideTrigger) {","  const originalOnClickFx = hideTrigger.events.onClick ? hideTrigger.events.onClick.fx.bind(showTrigger) : null;","  if (originalOnClickFx) {","    hideTrigger.removeEvent('onClick');","  }","","  hideTrigger.createEvent('onClick', (...args) => {","    this.properties.isShown = false;","    if (originalOnClickFx) {","       originalOnClickFx( ...args);","    }","  });","}"]}}]}}

---

✔️ FR IT

❔ Posez une Question 💡 Proposez une Suggestion 💬 Venez discuter

made by