3.2.7. Le composant Répéter

Le conteneur de type Répéter est un élément permettant notamment d’afficher les données dans un formatage adapté à l’écran (affichage réactif ou Responsive).

Nous prenons ici l’exemple de l’affichage de données issues d’une table ; plutôt que de les afficher dans un tableau, nous utiliserons le conteneur Répéter pour les afficher dans cadres réactifs (appelés Cards).

Sélectionner un écran d’affichage de données d’une table (par exemple, un écran issu de l’assistant de création de formulaire) depuis le module Conception, puis passer en mode Création. Dans la boite à outils, sélectionner le composant Répéter et le faire glisser sur l’écran à l’endroit souhaité. Le composant apparait à l’écran et également dans la liste des contrôles à gauche.

Le composant comporte un type d’élément par défaut, c’est celui que nous utiliserons ici. Il est possible d’utiliser différents types d’éléments pour différencier par exemple des éléments de type texte, images, etc. Ajouter un composant Cadre à l’intérieur du conteneur Répéter qui contiendra les éléments voulus ; utiliser l’icône située à l’intérieur du conteneur Répéter et sélectionner le composant Cadre, ou glisser manuellement le composant Cadre depuis la boite à outils. Attention, un cadre ne peut contenir qu’un seul élément ; il est donc judicieux d’insérer un conteneur de type Grille réactive à l’intérieur du composant Cadre pour pouvoir insérer plusieurs données. Utiliser l’icône située à l’intérieur du composant Cadre et sélectionner la grille réactive, ou glisser manuellement le composant Grille réactive depuis la boite à outils. Nous avons donc un conteneur Répéter qui contient un contrôle Cadre qui contient un conteneur Grille réactive dans laquelle nous placerons nous éléments. Il peut être utile d’ajouter des marges à la grille réactive pour des soucis d’esthétisme.

Il faut ensuite placer dans la grille réactive les éléments que nous souhaitons voir apparaître à l’écran. Cliquer sur l’icône située à l’intérieur du composant Grille réactive et sélectionner le contrôle de type Étiquette, ou glisser manuellement le contrôle Étiquette depuis la boite à outils. Répéter l’opération pour chaque type de donnée souhaité ; dans notre exemple, il s’agit du type de contact, du mail et du numéro de téléphone d’un agent.

Il est judicieux de renommer le cadre et les étiquettes ainsi que les valeurs initiales pour une meilleure compréhension des données manipulées.

Il est possible d’ajouter une icône devant chaque étiquette depuis l’onget Apparence des propriétés du contrôle.

La structure du conteneur Répéter est terminée ; il faut à présent sélectionner les données que nous souhaitons y voir apparaître. Depuis la liste des contrôles à gauche, faire un clic droit sur le conteneur Répéter et cliquer sur Modifier pour faire apparaître les propriétés du conteneur. Cliquer sur l’icône Données puis sélectionner le jeu de données dont nous souhaitons voir les données (dans notre exemple, il s’agit du jeu de données Agent). Cliquer sur le bouton Sauvegarder.

Il reste ensuite à lier les étiquettes aux données du jeu de données correspondantes. Cliquer sur chacune des étiquettes et choisir dans les propriétés Données, la valeur du jeu de donnée à associer (dans notre exemple, lier l’étiquette Type de contact à l’attribut Type agent, l’étiquette Mail à Adresse mail et l’étiquette Téléphone à l’attribut Téléphone). Sélectionner Valeur sur la ligne Surcharge.

Faire la même chose pour le cadre. Ici, nous l’associons à l’attribut Nom, en surchargeant le label.

Une fois les changements sauvegardés, le composant Répéter doit donner le résultat souhaité lorsque nous exécutons l’application.

Il peut être utile d’ajouter des marges et de jouer avec l’option Taille selon les résolutions dans les propriétés du conteneur Répéter, afin d’obtenir un résultat visuellement satisfaisant. Par exemple, en ajoutant une marge en bas afin d’espacer les cadres.

Les cadres peuvent être ajustés selon la résolution de l’écran sur lequel l’application est exécutée.