3.2 Les composants conteneurs

Les conteneurs sont des contrôles permettant un agencement spécifique des contrôles situés à l’intérieur.

5.2.1 La grille réactive

La grille réactive (ou Responsive) est le conteneur par défaut utilisé lors de la création d’un écran. Elle offre une ergonomie de type Responsive Design qui permet de placer les composants d’écran sans avoir à s’occuper de leur taille, place, position, etc. (ces options restant personnalisables).

Placer deux contrôles côte à côte dans la grille Responsive a pour effet d’ajuster leur taille automatiquement

5.2.2 La disposition linéaire

La disposition linéaire aligne les contrôles placés à l’intérieur. Les contrôles sont disposés les uns à la suite des autres, sans possibilité d’ajuster leur taille selon le format ou la résolution d’écran, et ils ne bénéficient d’aucune marge (cette option reste paramétrable).

Les contrôles sont alignés l’un après l’autre sans marge

5.2.3 La disposition en frontière

Ce conteneur permet de définir la position des contrôles selon une disposition géographique. Il est divisé en cinq zones :

• nord

• sud

• centre

• est

• ouest

Les contrôles peuvent se placer sur chacune de ces cinq zones, en les déplaçant à l’endroit voulu.

Ici, une image est placée dans la zone nord, des champs de saisie sont au centre, une liste à l’est et un champ de recherche au sud

Toutes les zones sont optionnelles, à l’exception du centre, et n’apparaissent que si un contrôle y est placé. Les zones sont affichées avec leurs contrôles dans la liste des contrôles à gauche de l’écran.

5.2.4 La disposition libre

La disposition libre permet de placer les contrôles à la main, c’est-à-dire en saisissant leurs coordonnées X et Y. Leur placement n’est pas géré automatiquement.

Les contrôles se placent là où le pointeur de souris les dépose, ou en modifiant leurs coordonnées X et Y depuis leur panneau de propriétés

5.2.5 Le formulaire

Les formulaires disposent d’un conteneur dédié. Il dispose de propriétés particulières : les labels placés à côté d’un champ de saisie sont associés automatiquement à celui-ci. De plus, tous les composants placés dans un conteneur formulaire ont une marge inférieure de 15 pixels (modifiable dans les propriétés du contrôle).

Placer un label à côté d’un champ de saisie dans un formulaire associe les deux contrôles

5.2.6 Le cadre

Le cadre est un conteneur permettant de placer un contrôle unique à l’intérieur. Il dispose d’une option Expansible qui permet de le plier ou de le déplier, et de choisir l’état par défaut.

5.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 apparaît à 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 nos é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’onglet 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.

Filtrer les données

Il est possible de filtrer les données du composant Répéter. En mode Création, faire un clic droit sur le composant et cocher la case Activer le filtre de recherche, puis cliquer sur Sauvegarder. La vue bascule automatiquement sur les propriétés Données. Sélectionnez les colonnes du jeux de données à filtrer en cliquant sur Ajouter au filtre globale.

5.2.8 Le panneau dépliable

Ce conteneur affiche un panneau sur le bord de l’écran qui s’enroule et disparaît si la fenêtre d’affichage est trop petite (ex : sur smartphone, ou en diminuant simplement la taille de la fenêtre du navigateur sur PC). Une fois enroulé, le panneau est disponible en cliquant sur le bouton de type Hamburger situé sur le bord de la fenêtre.

Si la zone d’affichage est suffisamment grande, le panneau réactif s’affiche

Si l’écran ou la fenêtre est trop petit, le panneau disparaît et laisse la place à un bouton pour l’afficher

5.2.9 Le bouton de panneau dépliable

Ce contrôle est un simple bouton permettant d’afficher ou de masquer un panneau dépliable.