PC SOFT

DOCUMENTATION EN LIGNE
DE WINDEV, WEBDEV 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 zones répétées : 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
Produits
WINDEVWEBDEV - Code ServeurWEBDEV - Code NavigateurWINDEV MobileEtats et Requêtes
Plateformes
WindowsLinuxWindows MobileUniversal Windows 10 AppAndroidWidget AndroidiPhone/iPadApple Watch
Langages
JavaPHPAjaxCode Utilisateur (MCU)Langage Externe
Bases de données
HFSQLHFSQL Client/ServeurProcédures stockéesOLE DBODBCAccès Natifs
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 "IHM" 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 :
  • Sélectionnez l'option "Page .. Description".
  • Dans l'onglet "Général", sélectionnez l'option "Edition en "zoning", positionnement par blocs et ancrage sur les champs".
  • Validez.
  • Sous le volet "Page", dans le groupe "Page", 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 champ est superposable, il n'est pas possible de l'ancrer. Cependant, lors de la sélection de l'option "Ancrage", WEBDEV propose automatiquement de rendre le champ non superposable pour pouvoir l'ancrer.
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. Dans cette fenêtre, choisissez le type d'ancrage à 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. Aucune option d'ancrage n'est sélectionné.
LargeurLe champ s'étire vers la droite lorsque la taille du navigateur ou de l'élément conteneur (cellule, zone répétée, ...) s'agrandit.
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é horizontalLe champ reste centré en largeur dans le navigateur (ou dans l'élément conteneur) quelle que soit la largeur du navigateur.
HauteurLe champ s'étire vers le bas lorsque la hauteur du navigateur ou de l'élément conteneur (cellule, zone répétée, ...) s'agrandit.
Largeur et HauteurLe champ s'étire vers la droite et vers le bas lorsque le navigateur (ou l'élément conteneur) s'agrandit.
Hauteur et DroiteLe champ s'étire vers le bas et 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.
Hauteur et centré horizontalementLe champ s'étire vers le bas et reste centré horizontalement lorsque la taille du navigateur ou de l'élément conteneur (cellule, zone répétée, ...) s'agrandit.
BasLe champ se déplace vers le bas lorsque le navigateur (ou l'élément conteneur) est agrandi vers le bas.
Largeur et BasLe champ s'étire vers la droite et se déplace vers le bas lorsque la taille du navigateur (ou de l'élément conteneur : cellule, zone répétée, ...) 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.
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.
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).
Largeur et centré verticalementLe champ s'étire vers la droite et reste centré verticalement lorsque la taille du navigateur ou de l'élément conteneur (cellule, zone répétée, ...) s'agrandit.
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.
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).
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 taille, 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. 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, sélectionnez l'option "Affichage .. Options .. Voir les ancrages" (ou touche F6). 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 la zone répétée (flèches rouges). Le bouton présent à côté de la zone répétée a été ancré automatiquement par WEBDEV (flèches bleues).
En cas de conflits d'ancrages, si WEBDEV ne peut corriger le conflit, une erreur d'IHM spécifique est affichée.

Cas particulier des zones répétées : Ancrage par rapport au contenu et nombre de lignes maximum par page

L'option "Nombre de lignes maximum par page" des zones répétées 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 de la 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 de la zone répétée que l'ancrage 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
Cliquez sur [Ajouter] pour publier un commentaire