PC SOFT

DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

  • Présentation
  • Comment mettre en place la gestion des ancrages ?
  • Visualisation des ancrages : flèches rouges ou flèches bleues
  • Cas particulier des champs Zone répétée : Ancrage par rapport au contenu et nombre de lignes maximum par page
  • Cas particulier : Ancrage par rapport au contenu
  • Cas particulier : Ancrage des champs d'un conteneur
  • Quelques exemples
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaEtats et RequêtesCode Utilisateur (MCU)
WEBDEV
WindowsLinuxPHPWEBDEV - Code Navigateur
WINDEV Mobile
AndroidWidget AndroidiPhone/iPadWidget iOSApple WatchCatalystUniversal Windows 10 AppWindows Mobile
Autres
Procédures stockées
Présentation
Dans une page, les ancrages définissent la manière dont le contenu d'une page va se comporter lorsque la page est agrandie par l'internaute.
Par exemple, un champ peut être ancré :
  • en position, et donc se déplacer lors du redimensionnement du navigateur.
  • en taille, et donc s'agrandir en largeur ou hauteur lors du redimensionnement du navigateur.
Jusque en version 16, la gestion des ancrages en WEBDEV était réalisée grâce aux tables de positionnement.
A partir de la version 17, grâce à l'utilisation de la génération en mode zoning, la gestion des ancrages se simplifie.
Comment mettre en place la gestion des ancrages ?
Pour définir l'ancrage d'un élément :
  1. Sélectionnez l'élément voulu (champ, zone de mise en page, cellule, ...).
  2. Définissez l'ancrage de l'élément :
    • soit dans l'onglet "UI" de la fenêtre de description de l'élément.
    • soit grâce à l'option "Ancrage" du menu contextuel de l'élément voulu.
Si l'option "Ancrage" est grisée, cela signifie que le mode de génération de la page ne permet pas la gestion des ancrages. Pour modifier le mode de génération de la page :
  • Sous le volet "Page", dans le groupe "Description", cliquez sur "Description".
  • Dans l'onglet "Général", sélectionnez l'option "Edition en "zoning", positionnement par blocs et ancrage sur les champs".
  • Validez.
Si le débordement du champ est invisible, l'ancrage peut ne pas être visible dans le navigateur. Dans ce cas :
  • Affichez l'onglet "Style" de la description du champ.
  • Sélectionnez l'élément "Débordement".
  • Sélectionnez l'option "Visible" pour le débordement vertical et le débordement horizontal.
  • Validez.
3. La fenêtre de définition des ancrages apparaît :
Versions 18 et supérieures
Remarque : Si le champ est superposable, une fenêtre spécifique de définition des ancrages apparaît. Pour plus de détails, consultez Ancrage des champs superposés.
Nouveauté 18
Remarque : Si le champ est superposable, une fenêtre spécifique de définition des ancrages apparaît. Pour plus de détails, consultez Ancrage des champs superposés.
Remarque : Si le champ est superposable, une fenêtre spécifique de définition des ancrages apparaît. Pour plus de détails, consultez Ancrage des champs superposés.
4. Cette fenêtre permet de définir :
  • l'ancrage en position, qui gère le déplacement du champ en fonction du changement de taille du navigateur ou du conteneur.
  • l'ancrage en largeur et en hauteur, qui gère l'agrandissement du champ en fonction du changement de taille du navigateur ou du conteneur. Dans ce cas, il est nécessaire de préciser si l'agrandissement du champ doit être réalisé par rapport au navigateur (ou conteneur) ou par rapport au contenu.
5. Choisissez le positionnement à utiliser. Les options disponibles sont les suivantes :
Aucun ancrageLe champ n'est pas modifié lorsque la taille du navigateur ou de l'élément conteneur (cellule, zone répétée, ...) est modifiée.
Centré horizontalLe champ reste centré en largeur dans le navigateur (ou dans l'élément conteneur) quelle que soit la largeur du navigateur.
DroiteLe champ se déplace vers la droite lorsque la taille du navigateur ou de l'élément conteneur (cellule, zone répétée, ...) s'agrandit.
Centré verticalLe champ reste centré verticalement dans le navigateur (ou l'élément conteneur) quelle que soit la hauteur du navigateur (ou de l'élément conteneur).
CentréLe champ reste centré en hauteur et en largeur dans le navigateur (ou l'élément conteneur) quelle que soit la taille du navigateur (ou de l'élément conteneur).
Centré vertical à droiteLe champ reste centré verticalement dans le navigateur (ou l'élément conteneur) quelle que soit la hauteur du navigateur (ou de l'élément conteneur). Cependant, le champ est ancré à droite, et se déplace vers la droite lorsque la taille du navigateur ou de l'élément conteneur (cellule, zone répétée, ...) est élargie.
BasLe champ se déplace vers le bas lorsque le navigateur (ou l'élément conteneur) est agrandi vers le bas.
Centré horizontal en basLe champ reste centré horizontalement dans le navigateur quelle que soit la largeur du navigateur. Cependant, le champ est ancré en bas, et se déplace vers le bas lorsque le navigateur s'agrandit.
Droite et BasLe champ se déplace vers la droite et vers le bas lorsque la taille du navigateur (ou de l'élément conteneur : cellule, zone répétée, ...) s'agrandit.
6. Sélectionnez l'ancrage en largeur et en hauteur :
  • Ancrage en largeur : permet de définir le comportement du champ en largeur lors du redimensionnement du champ de référence. Le champ superposé peut :
    • conserver sa largeur,
    • s’adapter au contenu,
    • suivre le comportement du navigateur.
  • Ancrage en hauteur : permet de définir le comportement du champ en hauteur lors du redimensionnement du champ de référence. Le champ superposé peut :
    • conserver sa hauteur,
    • s’adapter au contenu,
    • suivre le comportement du navigateur.
7. Il est également possible de définir le comportement du champ superposé lorsque le contenu est plus grand que le champ. Il est possible :
  • d’agrandir le champ et pousser les autres champs de la page,
  • tronquer le contenu,
  • toujours activer un ascenseur,
  • afficher un ascenseur uniquement en cas de dépassement.
8. Validez. Les champs sont automatiquement ancrés selon les indications fournies. Les ancrages sont visualisés sous l'éditeur par des flèches rouges ou bleues.

Visualisation des ancrages : flèches rouges ou flèches bleues

Pour activer la visualisation des ancrages, sous le volet "Affichage", dans le groupe "Voir (tous les champs)", cochez "Ancrages" (ou touche F6).
Deux types de flèches peuvent apparaître :
  • Les flèches rouges représentent les ancrages mis en place par le développeur.
  • Les flèches bleues représentent les ancrages déduits par WEBDEV pour respecter les contraintes HTML.
Exemple :
Dans cet exemple, l'ancrage a été mis sur le champ Zone répétée (flèches rouges). Le champ Bouton présent à côté du champ Zone répétée a été ancré automatiquement par WEBDEV (flèches bleues).
En cas de conflits d'ancrages, si WEBDEV ne peut pas corriger le conflit, une erreur d'UI spécifique est affichée.

Cas particulier des champs Zone répétée : Ancrage par rapport au contenu et nombre de lignes maximum par page

L'option "Nombre de répétitions maximum par page" des champs Zone répétée permet de définir le nombre de répétitions affichées sur la page.
  • Si le nombre de répétitions est supérieur au nombre de répétitions spécifiées : une réglette peut être affichée par exemple sous le champ.
  • Si le nombre de répétitions est inférieur au nombre de répétitions spécifiées : par défaut, l'espace pour le nombre maximum de répétitions est réservé. Si des champs sont présents en dessous du champ Zone répétée, un espace vide apparaîtra.
Pour ne pas avoir cet espace, il suffit de spécifier lors de l'ancrage du champ Zone répétée que l'ancrage en hauteur est réalisé par rapport au contenu.

Cas particulier : Ancrage par rapport au contenu

Quand un conteneur est ancré (zone répétée, zone de mise en page, cellule, ...), les champs présents dans ce conteneur héritent automatiquement de l'ancrage en position.
Il est donc conseillé de ne pas définir d'ancrage en position pour les champs dans ce cas, car :
  • le chargement des pages sera plus lent.
  • des effets de bord peuvent apparaître.

Cas particulier : Ancrage des champs d'un conteneur

Lorsque tous les champs présents dans un conteneur sont ancrés en position (par exemple par multisélection), si le conteneur n'est pas ancré, le conteneur sera ancré automatiquement en position comme tous les champs qu'il contient.
Quelques exemples
Nous allons prendre un exemple simple : un champ Libellé contenant un texte plus ou moins grand. Pour le troisième champ Libellé, le débordement a été défini dans l'onglet "Style" de la fenêtre de description du champ.
  • Champ Libellé non ancré :
  • Champ Libellé ancré en largeur :
  • Champ Libellé ancré en largeur et adapté au contenu : quelle que soit la taille du navigateur et si aucune autre contrainte HTML n'existe, le libellé est adapté au contenu.
Version minimum requise
  • Version 17
Commentaires
A modifier
La page d'aide ne correspond plus à l'interface en WebDev 25, du coup on en comprend pas comment bien gérer les ancrages
Julien ROUSSEL
28 juin 2020