Boite à vue

Acteur qui permet de disposer un acteur enfant en l’adaptant à sa taille.

Sommaire

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

Propriétés

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.

Type de vue

this.properties.viewType · 'fill' | 'visible' · défaut 'visible' · modifie : Gabarit

Type de vue.

La boite à vue va disposer son acteur enfant suivant la règle donnée par la propriété Type de vue :

  • Visible (par défaut) : la boite à vue va adapter la taille de son acteur enfant pour qu’il soit entièrement visible dans la boite à vue.
  • Rempli : la boite à vue va adapter la taille de son acteur enfant pour qu’il la remplisse entièrement.

Dans l’exemple ci-dessous, la boite à vue présente un acteur image bien plus grand qu’elle.

SynApps

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 boîte de vue 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.

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.

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.

Disposition

Voir les règles de disposition avec les propriétés d’alignement vertical et horizontal

Usage

La boite à vue est un acteur très pratique pour afficher un contenu de taille fixe tout en s’assurant qu’il sera visible quelque soit la taille de l’écran.

Par exemple, vous pouvez construire tout une superposition d’un plan avec des éléments positionnés précisément par rapport à lui au pixel prés. Ensuite, vous le placerez dans une boite à vue pour qu’il soit visible quelque soit la taille de l’écran.

Ne définissez pas des tailles avec des unites relatives dans les acteurs qui sont à l’intérieure d’une boite à vue. En effet, le résultat sera difficilement prévisible.

Utiliser toujours des unités fixes : px, cm et in.