DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

Nouveauté WEBDEV 28 !
  • Ce que vous allez apprendre dans cette leçon
  • Présentation
  • Création d'une page en mode zoning
  • Mettre en place de l'ancrage
  • Mettre en place les agencements
Leçon 7.4. Ancrages, zoning et agencements
Ce que vous allez apprendre dans cette leçon
  • Qu'est-ce qu'un ancrage ?
  • Créer une page en mode Zoning.
  • Mettre en place les ancrages.
Durée de la leçon

Durée estimée : 30 mn
Leçon précédenteSommaireLeçon suivante
Présentation
WEBDEV permet de gérer deux types d'ancrages :
  • L'ancrage au contenu : Un ancrage au contenu permet de définir le comportement du champ ou d'une zone lors de la modification de son contenu. Le champ doit-il rester à la même taille ? Doit-il s'adapter à son contenu ?
  • L'ancrage navigateur : Un ancrage navigateur permet de définir le comportement d'un champ ou d'une zone lors du redimensionnement du navigateur. Le champ doit-il s'agrandir ? Doit-il se déplacer ?
    L'ancrage navigateur permet de définir le comportement des pages lors de l'affichage sur des résolutions spécifiques (tablettes, téléphones, etc.).
La mise en place des ancrages se fait très facilement, grâce à une option du menu contextuel des champs.
Nous allons tout de suite manipuler les ancrages grâce à un exemple. Dans cette leçon, nous manipulerons uniquement les ancrages navigateur.
Nous allons créer un projet dans lequel nous allons créer une page permettant de mettre en place les ancrages navigateur et de visualiser leur intérêt.
Par la suite, nous modifierons ce projet afin de le rendre "Mobile-friendly" grâce aux agencements.

  • Pour créer un projet sous WEBDEV :
    1. Lancez WEBDEV si ce n'est pas déjà fait.
    2. Affichez si nécessaire la page d'accueil de WEBDEV (Ctrl + <).
    3. Dans la page d'accueil, cliquez sur "Créer un projet", puis sur l'option "Site". L'assistant de création du projet se lance.
    4. Conservez les options par défaut des différentes étapes de l'assistant de création de projet, jusqu'à l'étape "Description - Informations générales".
    5. Saisissez le nom du projet "Ancrages" puis cliquez sur "Terminer".

      Corrigé

      Un exemple corrigé est disponible à tout moment pour vérifier la validité des opérations effectuées.
      Pour ouvrir le projet corrigé, dans la page d'accueil, cliquez sur "Tutoriel" puis dans la zone "Partie 7 - Leçon 7.4 - Ancrage, zoning et agencement", double-cliquez sur "Ancrages (Corrigé)".
Création d'une page en mode zoning
  • Pour créer une page permettant de mettre en pratique la gestion des ancrages :
    1. Créez une nouvelle page vierge.
      • Dans la fenêtre de création d'un nouvel élément, cliquez sur "Page" puis sur "Page".
        Remarque : Pour afficher la fenêtre de création d'un nouvel élément, cliquez sur Créer un élément parmi les boutons d'accès rapide.
      • L'assistant de création d'une page se lance.
      • Cliquez sur "Vierge" et validez l'assistant.
    2. La fenêtre de sauvegarde de la page est affichée.
    3. Saisissez le titre "Ancrages". Le nom "PAGE_Ancrages" est automatiquement proposé.
    4. Validez.
Nous allons maintenant diviser notre page en 3 zones :
  • Un entête (en haut sur toute la largeur).
  • Un menu à gauche (sur toute la hauteur).
  • Une zone de contenu au centre.
Chaque zone aura un comportement spécifique lors du redimensionnement de la page.
Pour créer les zones, nous allons utiliser la fonctionnalité de zoning.
  • Pour créer une première zone de titre en haut de la page :
    1. Sous le volet "Page", dans la zone "Edition", déroulez "Zoning" et sélectionnez "Découper horizontalement".
    2. Le curseur de la souris se transforme en crayon.
    3. Cliquez en haut de la page et dessinez un trait horizontal. Lorsque le bouton de la souris est relâché, la zone est créée.
  • Pour visualiser cette zone, nous allons lui associer une couleur de fond :
    1. Affichez la fenêtre de description de la zone : dans le menu contextuel, sélectionnez l'option "Description de la zone".
    2. Dans l'onglet "Style", sélectionnez si nécessaire l'élément "Cadre / Fond" et sélectionnez une couleur de fond (par exemple Jaune bulle).
    3. Validez la fenêtre de description de la zone.
  • Nous allons faire les mêmes opérations pour séparer en deux la zone basse de notre page :
    1. Sous le volet "Page", dans la zone "Edition", déroulez "Zoning" et sélectionnez "Découper verticalement".
    2. Le curseur de la souris se transforme en crayon.
    3. Cliquez au milieu de la zone basse et dessinez un trait vertical.
  • Pour visualiser ces zones, associez la couleur verte à la zone basse de gauche et la couleur orange à la zone basse de droite.
  • Nous allons maintenant créer des champs Libellé dans chaque zone :
    1. Sous le volet "Création", dans le groupe "Champs usuels", déroulez "Texte" et sélectionnez "Libellé simple".
    2. Cliquez dans la zone jaune. Le champ Libellé est automatiquement créé.
    3. Modifiez le libellé affiché (touche Espace du clavier) : le libellé de ce champ est "Entête".
    4. Répétez les opérations 2 et 3 pour créer :
      • un libellé dans la zone verte affichant "Menu".
      • un libellé dans la zone orange affichant "Contenu".
  • Enregistrez la page (Ctrl + S) et lancez le test de la page (Tester une page parmi les boutons d'accès rapide).
    1. La page s'affiche sous le navigateur.
    2. Redimensionnez le navigateur : la page reste centrée, mais les zones ne se redimensionnent pas.
      Nous allons changer ce fonctionnement pour que la page et les zones s'adaptent à la taille du navigateur. Pour cela, nous allons utiliser les ancrages.
  • Fermez le navigateur.
Mettre en place de l'ancrage
Tout d'abord, nous allons mettre en place l'ancrage de la page, l'ancrage des zones, puis l'ancrage des champs dans les zones.
Nous voulons obtenir le fonctionnement suivant lors de l'agrandissement du navigateur :
  • La page doit s'agrandir en hauteur et largeur.
  • La zone d'entête (jaune) doit s'agrandir en largeur.
  • La zone de menu (verte) doit s'agrandir en hauteur.
  • La zone de contenu (orange) doit s'agrandir en largeur et en hauteur.
  • Pour les champs, nous souhaitons qu'ils restent centrés par rapport à leur zone.
Nous allons maintenant faire toutes les manipulations nécessaires.

  • Pour mettre en place l'ancrage de la page :
    1. Cliquez dans l'éditeur en dehors de la page.
    2. Affichez le menu contextuel et sélectionnez l'option "Ancrage". La fenêtre de gestion des ancrages de la page s'affiche.
    3. La page doit s'agrandir en largeur et en hauteur. Sélectionnez :
      • Position : Conservez la position proposée ().
      • Ancrage en largeur : Agrandir ou réduire comme le navigateur (ou son conteneur).
      • Ancrage en hauteur : Agrandir ou réduire comme le navigateur (ou son conteneur).
    4. Validez.
  • Pour mettre en place l'ancrage des zones :
    1. Sélectionnez la zone jaune.
    2. Affichez le menu contextuel et sélectionnez l'option "Ancrage". La fenêtre de gestion des ancrages s'affiche.
    3. La zone doit s'agrandir en largeur. Sélectionnez :
      • Position : Le champ conserve sa position.
      • Ancrage en largeur : Agrandir ou réduire comme le navigateur (ou son conteneur).
      • Ancrage en hauteur : Hauteur fixe.
    4. Validez.
    5. Sélectionnez la zone verte, affichez le menu contextuel et sélectionnez l'option "Ancrage".
    6. La zone doit s'agrandir en hauteur. Sélectionnez :
      • Position : Le champ conserve sa position ().
      • Ancrage en largeur : Largeur fixe.
      • Ancrage en hauteur : Agrandir ou réduire comme le navigateur (ou son conteneur).
    7. Validez.
    8. Sélectionnez la zone orange et affichez la fenêtre de gestion des ancrages. La zone doit s'agrandir en largeur et hauteur. Sélectionnez :
      • Position : Le champ conserve sa position ().
      • Ancrage en largeur : Agrandir ou réduire comme le navigateur (ou son conteneur).
      • Ancrage en hauteur : Agrandir ou réduire comme le navigateur (ou son conteneur).
    9. Validez.
  • Pour mettre en place l'ancrage des champs :
    1. Sélectionnez le libellé "Entête".
    2. Affichez le menu contextuel et sélectionnez l'option "Ancrage".
    3. Le champ doit être centré en largeur :
      • Position : Centré horizontal.
      • Ancrage en largeur : Largeur fixe.
      • Ancrage en hauteur : Hauteur fixe.
    4. Validez.
    5. Répétez les mêmes opérations pour le champ "Menu" et le champ "Contenu" :
      • Le libellé "Menu" doit être centré en hauteur (option "Centré vertical").
      • Le libellé "Contenu" doit être centré (option "Centré").
  • Enregistrez la page (Ctrl + S) et lancez le test de la page (Tester une page parmi les boutons d'accès rapide).
    1. La page s'affiche sous le navigateur.
    2. Redimensionnez le navigateur : les zones s'adaptent à la place disponible dans le navigateur.
  • Fermez le navigateur.
Mettre en place les agencements
Les zones et les ancrages permettent de gérer facilement les "petits" redimensionnements. Comme nous l'avons vu précédemment, un site doit être "Mobile-friendly" dès sa conception.
L'affichage en mode "Mobile" demande bien souvent plus qu'un simple ancrage. En effet, dans certains cas, des champs ou des zones entières doivent disparaître afin de garder une interface lisible sur le mobile.
Ces opérations sont effectuées à l'aide des agencements.

Note

L'agencement permet de définir plusieurs vues d'une page dans un même projet sans dupliquer cette page. Il est ainsi par exemple possible de définir :
  • une vue spécifique pour l'affichage sur un mobile,
  • une vue spécifique pour l'impression,
  • une vue spécifique pour une utilisation de la page dans une application WINDEV.
  • une vue spécifique pour une utilisation de la page dans une application WINDEV Mobile.
  • ...
Nous allons modifier notre page afin de mettre en place un agencement spécifique pour mobile. Cet agencement permettra de supprimer l'affichage de la zone verte. Nous testerons ensuite directement le site sur un mobile.

Note

Cette leçon propose une approche rapide des agencements dans un site WEBDEV. La mise en place et la gestion des agencements dans un site WEBDEV est détaillée dans les différentes leçons de la partie 8 de ce cours.

  • Pour créer un nouvel agencement :
    1. Sous le volet "Page", dans le groupe "Agencements", déroulez "Agencements" et sélectionnez "Ajouter un agencement à partir de la vue active".
    2. Dans la fenêtre qui s'affiche, un agencement adapté aux téléphones et aux tablettes est automatiquement proposé.
      Validez la fenêtre.
    3. Dans notre exemple, deux agencements sont créés. Ces agencements sont affichés sous forme de vignettes, à droite de la page "PAGE_Ancrages".
  • Affichez l'agencement "Mobile" :
    1. Double-cliquez sur la vignette de l'agencement Mobile : la page correspondant à cet agencement s'affiche au centre de l'éditeur.
    2. L'option "Dissociation automatique" (en haut à droite de la fenêtre principale, dans la barre de titre) permet de savoir si le mode "Dissociation automatique" est activé. Si ce mode est activé, toute modification effectuée sur une des pages spécifiques de l'agencement ne sera pas reportée sur les autres. Conservez le mode "Dissociation automatique" activé.
  • Nous allons modifier la visibilité des champs dans l'agencement Mobile. En effet, la zone de menu à gauche (et le libellé correspondant) peut être supprimée en mobile, au profit par exemple d'un menu déroulant (nous verrons dans une prochaine leçon comment le mettre en place). Pour plus de facilité, nous allons faire ces modifications dans l'agencement "Bureau".
    1. Double-cliquez sur la vignette "Bureau".
    2. Sélectionnez la zone verte.
    3. Dans le menu contextuel du champ, sélectionnez l'option "Agencements .. Visibilité par agencement" et désélectionnez l'option "Mobile".
    4. La vignette de l'agencement mobile est automatiquement mise à jour.
      Si vous affichez l'agencement mobile, la zone verte et son libellé ne sont plus visibles.
  • Enregistrez la page (Ctrl + S) et lancez le test de la page (Tester une page parmi les boutons d'accès rapide).
    1. La page s'affiche sous le navigateur.
    2. Redimensionnez le navigateur : l'agencement mobile est affiché.
  • Fermez le navigateur.
  • Maintenant, nous pouvons tester immédiatement le site sur un téléphone ou une tablette :
    1. Déroulez l'option depuis les boutons d'accès rapide et sélectionnez "Tester depuis un téléphone (accès via un QR Code)".
    2. Une fenêtre proposant un QR code à flasher avec votre mobile.
    3. Une fois le code flashé, le site s'affiche sur le mobile.
    4. L'agencement "Mobile" est automatiquement affiché sur le mobile.
Leçon précédenteSommaireLeçon suivante
Version minimum requise
  • Version 28
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire