3. Écrans : les composants conteneurs

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

  • la grille réactive

  • la disposition linéaire

  • le formulaire

  • le cadre

  • le panneau réactif

  • le bouton de panneau réactif

3.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).

_images/Grille_responsive.png

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

3.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).

_images/Disposition_lineaire.png

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

3.3. 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.

_images/Disposition_libre.png

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

3.4. 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).

_images/Formulaire.png

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

3.5. 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.

_images/Frontiere.png

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.

_images/Frontiere_1.png

3.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.

_images/Cadre.png

3.7. Le panneau réactif

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.

_images/Menu_reactif.png

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

_images/Menu_reactif_1.png

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

3.8. Le bouton de panneau réactif

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

_images/Bouton_panneau.png