PC SOFT

DOCUMENTATION EN LIGNE
DE WINDEV, WEBDEV ET WINDEV MOBILE

Nouveauté WINDEV, WEBDEV, WINDEV Mobile 23 !
  • 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 Responsive Web Design
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaEtats et RequêtesCode Utilisateur (MCU)
WEBDEV
WindowsLinuxPHPWEBDEV - Code Navigateur
WINDEV Mobile
AndroidWidget AndroidiPhone/iPadApple WatchUniversal Windows 10 AppWindows Mobile
Autres
Procédures stockées
Présentation du champ Disposition (Layout)
Le champ Disposition (Layout) facilite la mise en place d'IHM 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 contenant les champs présents dans le champ Disposition. Chaque cellule peut contenir n'importe quel champ, y compris un autre champ Disposition. Ces champs qui 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 Un champ Disposition peut être utilisé dans un champ Zone répétée : il suffit d'utiliser un champ Zone répétée dont le contenu correspond à l'option "Utiliser une fenêtre interne par ligne". Dans ce cas, la 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 Le champ Disposition ne peut pas être présent dans un 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 ou réduire 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 Agrandir ou réduire le champ pousse les champs autour : le champ est agrandi ou réduit 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.
      • 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 peut être agrandie ou réduite.
      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'initialisation de la fenêtre.
      Remarque : Lorsque cette option est activée, il faut masquer les cellules ou les champs des cellules soit dans le traitement "Déclarations globales" de la fenêtre, soit dans le traitement "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. Cette fonction est disponible uniquement à partir de la version 230050.
  • 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 ou réduire le champ pousse les champs autourExemple 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 du champ, 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, ...).
Champ Disposition et Responsive Web Design
WEBDEV - Code Serveur
Le champ Disposition est disponible en mode Responsive Web Design. Il est possible de paramétrer par tranche :
  • la hauteur 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 le traitement "A chaque changement de tranche" 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