Aller au contenu
PandaSuite Docs

Data binding (liaison de données)

Le data binding (liaison de données) permet d’associer n’importe quel élément de votre application à une source de données. Vous pouvez lier une propriété, un contenu, une action, etc. Lorsque la donnée change de valeur, l’élément associé reflète automatiquement ce changement.

Voici quelques exemples d’utilisations du data binding :

Le data binding est présent à tous les niveaux de votre interface PandaSuite Studio. Il ouvre toujours la même fenêtre, mais les sources qu’elle propose s’adaptent à l’endroit où vous démarrez la liaison.

Lier un élément à une donnée

Dans le panneau Propriétés, cliquez sur le nom de la propriété à lier. La fenêtre de data binding s’ouvre avec les sources toujours disponibles :

  • Depuis un composant : sélectionnez n’importe quel composant de votre application (il peut être sur un autre écran ou même au niveau du projet)
  • Depuis une source de données : choisissez une variable du Datastore, une source externe via le composant HTTP ou une donnée associée à un utilisateur via Firebase
  • Depuis le projet : accédez aux propriétés définies au niveau du Projet, dont la date et heure actuelles
  • Identifiant PandaSuite : identifiant unique de l’installation de l’application sur l’appareil
  • Nombre aléatoire : retourne un nombre aléatoire entre 0 et 1

Vous pouvez transformer la donnée liée à l’aide d’une fonction : compter des éléments, extraire un item par index, formater une date, etc.

Ci-dessous le bloc de texte est “bindé” avec la valeur du composant Saisie de texte situé dans l’écran précédent. Dès que l’utilisateur saisit son prénom, celui-ci apparaît à la place du lorem :

Les sources s’adaptent au contexte

Selon l’endroit où vous ouvrez la fenêtre, des sources contextuelles peuvent apparaître. Une Collection / Liste répète le même gabarit pour chaque ligne de vos données ; lorsque vous liez un élément placé à l’intérieur, la fenêtre ajoute une source pour la ligne courante, et laquelle dépend du type connecté.

Élément courant

Quand la source est une Collection ou une Multi-référence, la fenêtre ajoute Élément courant : la ligne en cours d’affichage, sous forme de Référence, un lien vers cette ligne plutôt qu’une copie. Deux choses possibles :

  • Ouvrez l’un de ses champs (Name, Price, Photo…) pour afficher la valeur de ce champ pour cette ligne. La fenêtre le lit pour vous By Id. C’est ce que vous faites la plupart du temps.
  • Arrêtez-vous sur l’élément lui-même pour lier la référence : une poignée stable vers cette ligne, pour mémoriser quel élément a été sélectionné, le transmettre à une action ou le stocker (page de détail, favoris).

Comme c’est un lien et non une copie, un champ affiche toujours la valeur à jour, et un champ qui pointe vers une autre collection est suivi pour vous (voir Suivre une référence).

Index courant

Quand la source est un Tableau, la fenêtre ajoute Index courant à la place, même si chaque élément est un objet Clé / Valeur. C’est la position de la ligne courante, un nombre à partir de 0. Les deux gestes sont les mêmes que pour Élément courant, mais ce que vous obtenez est plus limité :

  • Ouvrez l’un de ses champs de la même façon. La fenêtre le lit pour vous By Index au lieu de By Id.
  • Arrêtez-vous sur l’index lui-même pour lier le nombre. Vous pouvez le stocker, mais c’est une position, pas une référence : il désigne ce qui se trouve à cet emplacement, donc il casse si la liste est réordonnée et vous ne pouvez pas le suivre. Pour une poignée stable (page de détail, favoris, By Id, une Référence sauvegardée), utilisez une source Collection.

Depuis l’événement

Lorsque vous liez une valeur à l’intérieur d’une action déclenchée par un événement, et que cet événement transporte une donnée, la fenêtre ajoute Depuis l’événement. Elle vous donne la donnée portée par l’événement, par exemple les valeurs qu’un composant custom envoie lorsqu’il se déclenche. Utilisez-la pour que l’action réagisse précisément à l’élément ou à la valeur concernés par l’événement.

Suivre une référence

Une Référence ne stocke pas la donnée elle-même : elle pointe vers un élément d’une collection, la même ou une autre. Un Élément courant issu d’une source Collection est une référence vers la ligne affichée, et un champ peut à son tour pointer vers un élément d’une autre collection. Dans les deux cas, ouvrir un champ suit le lien pour vous : PandaSuite va chercher l’élément pointé et y lit le champ, sans que vous ayez à reconstruire la liaison à la main.

C’est ce qui fait fonctionner une sélection mémorisée. Dans Créer une page dynamique, vous stockez l’élément choisi sous forme de Référence, pour que la vue de détail puisse lier directement ses champs.

Pour remplacer une référence par l’élément complet qu’elle désigne, utilisez la fonction Expand.

Pour aller plus loin