DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

Aide / Développer une application ou un site / Champs, fenêtres et pages / Champs : Types disponibles / Champ Disposition
  • Présentation du champ Disposition (Layout)
  • Créer un champ Disposition
  • Création du champ
  • Création du champ Disposition par refactoring
  • Champ Disposition dans un champ Zone répétée
  • Caractéristiques du champ Disposition
  • Onglet Général
  • Onglet Détail
  • Exemple des différents types de débordement
  • Champ Disposition et mode Responsive (zoning et agencements)
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaEtats et RequêtesCode Utilisateur (MCU)
WEBDEV
WindowsLinuxPHPWEBDEV - Code Navigateur
WINDEV Mobile
AndroidWidget AndroidiPhone/iPadWidget IOSApple WatchMac CatalystUniversal Windows 10 App
Autres
Procédures stockées
Présentation du champ Disposition (Layout)
Le champ Disposition (Layout) facilite la mise en place d'UI dynamiques où des champs sont affichés et/ou masqués par programmation. Lorsqu'un champ devient invisible (par exemple via la propriété Visible), le champ Disposition permet de repositionner automatiquement tous les autres champs pour conserver une interface harmonieuse et éviter les "trous".
Le champ Disposition est disponible en mode vertical et horizontal.
Le champ Disposition est composé de cellules. Ces cellules contiennent les champs présents dans le champ Disposition. Chaque cellule peut contenir n'importe quel type de champ, y compris un autre champ Disposition. Ces champs peuvent être visibles ou non.
La création de ces cellules peut être réalisée via l'onglet "Général" de la fenêtre de description du champ Disposition ou via le menu contextuel du champ.
Créer un champ Disposition

Création du champ

Pour créer un champ de type Disposition :
  1. Sous le volet "Création", dans le groupe "Conteneurs", déroulez "Disposition" et choisissez l'orientation : horizontale ou verticale.
  2. Cliquez dans la fenêtre ou la page à la position où le champ doit être créé. Le champ apparaît en création.
    Remarque : Les dimensions du champ créé sont optimisées pour occuper l'espace disponible à la position indiquée. Si la taille du champ ne vous convient pas, redimensionnez le champ grâce à ses poignées.
  3. Ajoutez les cellules dans le champ Disposition. Ces cellules peuvent être ajoutées :
    • soit via le menu contextuel du champ (option "Insérer une cellule").
    • soit via l'onglet "Général" de la description du champ (bouton "Ajouter").
  4. Ajoutez les champs dans les différentes cellules du champ Disposition.
  5. Paramétrez l'ancrage des champs présents dans le champ Disposition, notamment l'adaptation au contenu. Pour plus de détails, consultez :
Pour afficher les caractéristiques du champ, sélectionnez l'option "Description" dans le menu contextuel du champ.
Pour manipuler le champ Disposition, consultez Manipuler un champ Disposition par programmation.

Création du champ Disposition par refactoring

Le champ Disposition peut être également créé à partir de champs existants :
  1. Sélectionnez les différents champs à intégrer dans le champ Disposition.
  2. Sous l'onglet "Modification", dans le groupe "Transformations", déroulez "Refactoring et permutations" et sélectionnez "Créer une disposition avec la sélection".
  3. Le champ Disposition est automatiquement créé et une cellule est créé pour chaque champ situé sur une ligne différente.

Champ Disposition dans un champ Zone répétée

WINDEVAndroidiPhone/iPad Dans une fenêtre, un champ Disposition peut être utilisé dans un champ Zone répétée :
  • Créez un champ Zone répétée.
  • Dans la fenêtre de description du champ, sélectionnez l'onglet "Contenu" et cochez l'option "Utiliser une Fenêtre interne par ligne (fonction ZoneRépétéeAjouteFI)".
  • Créez une fenêtre interne. Cette fenêtre interne contiendra le champ Disposition avec les champs nécessaires.
Pour plus de détails, consultez Afficher un contenu différent à chaque répétition.
WEBDEV - Code ServeurWEBDEV - Code Navigateur Dans une page, le champ Disposition peut être utilisé dans un champ d'un champ Zone répété. Si vous voulez par exemple, créer un champ Zone répétée permettant d'obtenir une interface optimisée  :
  • Créez un champ Zone répétée (par exemple, de type Ajax et rempli par programmation).
  • Dans l'onglet "Général" de la fenêtre de description du champ Zone répétée, indiquez le nombre maximum de répétitions visibles. Dans cet exemple, il est conseillé d'utiliser l'option "Pas de limite - Pas d'ascenseur".
  • Créez un champ Disposition avec les champs nécessaires et positionnez-le dans une ligne du champ Zone répétée.
Caractéristiques du champ Disposition
Les caractéristiques du champ Disposition sont regroupées dans l'onglet "Général" et l'onglet "Détail" de la fenêtre de description du champ.

Onglet Général

L'onglet "Général" permet de gérer les différentes cellules du champ Disposition. Il est possible de :
  • ajouter, dupliquer ou supprimer une cellule grâce à différents boutons.
  • modifier l'ordre des cellules grâce aux boutons fléchés.
  • modifier les paramètres de la cellule en cours. Il est possible de :
    • Rendre la cellule visible ou non (état initial).
    • Définir la hauteur et la hauteur maximale de la cellule :
      • La hauteur correspond à la taille minimale de la cellule.
      • La hauteur maximale de la cellule si elle est précisée ne pourra pas être dépassée.
    • Occuper tout l'espace disponible. Cette option est disponible si l'option "En cas de débordement : Agrandir le champ, pousse les champs autour" n'a pas été sélectionnée (onglet "Détail" de la fenêtre de description du champ).
WEBDEV - Code ServeurPHP L'onglet "Général" permet également de définir le style CSS de la cellule en cours.

Onglet Détail

L'onglet "Détail" permet de définir les paramètres de présentation du champ Disposition. Les options disponibles sont les suivantes :
  • Disposition : Permet de spécifier si le champ Disposition gère la disposition des champs verticalement ou horizontalement.
    • Horizontal : Les cellules s'affichent sur une seule ligne et occupent toute la hauteur du champ. Seule leur largeur est modifiable.
    • Vertical : Les cellules s'affichent sur une seule colonne et occupent toute la largeur du champ. Seule leur hauteur est modifiable.
  • Caler les cellules : Permet de spécifier l'alignement des cellules dans le champ en fonction de la disposition choisie.
    • Si la disposition est verticale, les cellules peuvent être calées en haut ou en bas.
    • Si la disposition est horizontale, les cellules peuvent être calées à gauche ou à droite.
  • Gestion du débordement :
    • Agrandir le champ, pousse les champs autour : le champ est agrandi pour permettre l'affichage de toutes les cellules.
      • Si des champs sont situés en dessous ou à droite du champ, ils sont "poussés".
      • Si la taille d'une ou plusieurs cellules est réduite, la taille du champ Disposition s'adapte sans descendre en dessous de sa taille initiale.
      • Les champs situés en dessous ou à droite sont déplacés en fonction du changement de taille appliqué.
      • La taille de la fenêtre n'est jamais réduite.
    • Afficher un ascenseur automatiquement : la zone cliente du champ est agrandie et des ascenseurs sont affichés pour pouvoir scroller dans le champ.
    • Tronquer le contenu : Aucune adaptation n'est effectuée, l'affichage des cellules est tronqué.
    • WINDEVAndroidiPhone/iPad L'option "Réduire le parent" permet de réduire si nécessaire le parent. Si le parent est la fenêtre, la réduction sera appliquée uniquement lors de l'ouverture de la fenêtre.
      Remarque : Lorsque cette option est activée, il faut masquer les cellules ou les champs des cellules soit dans l'événement "Déclarations globales" de la fenêtre, soit dans l'événement "Initialisation" des champs.
  • Marge entre les cellules : Espacement entre les cellules du champ Disposition. Cet espacement est exprimé en pixels. Il peut être modifié par programmation via la propriété MargeInterCellules.
WINDEVAndroidiPhone/iPad Remarques :
  • Attention : un champ Disposition ne peut pas s'agrandir si la fenêtre est maximisée sans ascenseur (car la fenêtre ne peut pas s'agrandir également).
  • Pour réduire une fenêtre après son ouverture (par exemple après le masquage de champs), utilisez la fonction DispositionAdapteTaille.
  • Cas particulier : Champ Libellé RTF : Sous Windows 7 (et antérieur), la largeur d'un libellé RTF ne peut pas être calculée. L'adaptation du champ en largeur n'est donc pas possible.

Exemple des différents types de débordement

Exemple : Un champ Disposition est créé sous l'éditeur de fenêtres.
Champ Disposition : Exemple des différents types de débordement
Ce champ Disposition contient :
  • Plusieurs cellules permettant d'afficher les différents champs d'un formulaire.
  • Un champ Disposition Horizontal contenant 2 boutons, affichés ou non suivant la présence du numéro de téléphone et/ou de l'adresse email.
Exemple 1 : Option Agrandir le champ pousse les champs autour
  • Au Go, la fenêtre affiche tous les champs.
    Agrandir le champ pousse les champs autour
  • En supprimant le numéro de téléphone et l'adresse email, le champ Disposition se réduit mais la fenêtre garde la même taille.
  • En ajoutant le numéro de téléphone, l'adresse email et un commentaire, le champ Disposition s'agrandit ainsi que la fenêtre.
    Agrandir le champ pousse les champs autour
Exemple 2 : Option Afficher un ascenseur automatiquement
  • Au Go, la fenêtre affiche tous les champs.
  • En ajoutant un commentaire, un ascenseur apparaît automatiquement dans le champ Disposition pour faire défiler les différents éléments affichés.
    Afficher un ascenseur automatiquement
Exemple 3 : Option Tronquer le contenu
  • Au Go, la fenêtre affiche tous les champs.
  • En ajoutant un commentaire, le contenu qui dépasse du champ Disposition n'est pas affiché.
WINDEVAndroidiPhone/iPad Exemple 4 : Option Agrandir le champ pousse les champs autour avec gestion de la réduction de la fenêtre par programmation
  • Au Go, la fenêtre affiche tous les champs.
  • En supprimant le numéro de téléphone et l'adresse email, le champ Disposition se réduit, ainsi que la fenêtre.
    En effet, lors de la suppression des champs (Téléphone et Email), la fonction DispositionAdapteTaille modifie la taille du champ Disposition pour ne pas avoir de zone vide et modifie également la taille de la fenêtre, lui permettant de revenir à sa taille initiale.
  • En ajoutant le numéro de téléphone, l'adresse email et un commentaire, le champ Disposition s'agrandit, ainsi que la fenêtre.
Attention : Cette fonctionnalité est à utiliser avec attention : en effet, selon le contenu de la fenêtre (hors champ Disposition) des effets inattendus peuvent apparaître (diminution de la fenêtre alors que des champs doivent être affichés sur un autre plan, ...).
WEBDEV - Code Serveur
Champ Disposition et mode Responsive (zoning et agencements)
Le champ Disposition est disponible en mode Responsive (zoning et agencements). Il est possible de paramétrer par tranche :
  • la hauteur, la hauteur minimale et la hauteur maximale des cellules,
  • la disposition du champ Disposition (horizontale ou verticale).
Il est possible de masquer des cellules lors du changement de tranche en utilisant l'événement "A chaque changement d'agencement" associé à la page.
Liste des exemples associés :
Le champ Disposition Exemples unitaires (WINDEV) : Le champ Disposition
[ + ] Utilisation d'un champ Disposition
Le champ Disposition Exemples unitaires (WEBDEV) : Le champ Disposition
[ + ] Utilisation du champ Disposition
Le champ Disposition Exemples unitaires (WINDEV Mobile) : Le champ Disposition
[ + ] Utilisation d'un champ Disposition
Version minimum requise
  • Version 23
Documentation également disponible pour…
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire

Dernière modification : 27/06/2023

Signaler une erreur ou faire une suggestion | Aide en ligne locale