PC SOFT

DOCUMENTATION EN LIGNE
DE WINDEV, WEBDEV ET WINDEV MOBILE

Nouveauté WEBDEV 24 !
  • Ce que vous allez apprendre dans cette leçon
  • Champs spécifiques au Responsive Web Design
  • Les ancrages
  • Ancrages de position
  • Ancrages de taille, en hauteur et en largeur
  • Ordre des champs en mode Responsive Web Design
Leçon 8.3. Concepts avancés
Ce que vous allez apprendre dans cette leçon
  • Champ spécifique : Champ Barre de navigation avec son menu "Hamburger".
  • Les ancrages.
  • La gestion de l'ordre des champs.

Durée estimée : 30 mn
Leçon précédenteSommaireLeçon suivante
Champs spécifiques au Responsive Web Design
WEBDEV met à votre disposition un champ spécifique pour le Responsive Web Design : le champ Barre de navigation.
Le champ Barre de navigation permet de créer notamment une zone de menu s'adaptant facilement à la taille du navigateur. Cette zone peut contenir tous les types de champs.
  • Examinons le fonctionnement du champ Barre de Navigation.
    1. Ouvrez si nécessaire le projet "WW_Responsive". Pour cela, dans la page d'accueil de WEBDEV, cliquez sur "Cours d'auto-formation" et sélectionnez le projet "Responsive Web Design (Exercice)".
    2. Ouvrez la page PAGE_BarreNavigation.
  • Le champ Barre de navigation est le champ situé en haut qui contient le menu.
    Ce champ Barre de navigation est divisé en 3 zones :
    • A gauche, le logo du site.
    • Au centre, le menu du site
    • A droite, un champ de recherche avec le bouton permettant de lancer la recherche.
  • Passons en mode Tablette :
    1. Cliquez sur l'en-tête de la tranche Tablette.
    2. Cliquez sur le champ Barre de navigation pour le sélectionner : la zone centrale est hachurée.
  • A partir de la tranche de résolution Tablette, le champ Barre de navigation rend invisible la zone centrale et ajoute un menu Hamburger dans la zone de gauche.
    Le menu "hamburger" déroule une popup qui contient les champs de la zone centrale. Bien entendu cette popup est personnalisable, il suffit de cliquer dans le volet central. Ensuite, vous pouvez modifier cette popup comme bon vous semble.
  • Examinons le contenu de la zone centrale :
    1. Cliquez dans la zone centrale hachurée. La popup s'affiche :
    2. Nous retrouvons le menu du site. Le menu est maintenant vertical. En effet, le champ Barre de navigation surcharge automatiquement le champ Menu pour qu'il s'affiche en vertical.
    3. Pour sortir du mode édition de la popup, appuyez sur la touche Echap.
Les ancrages
Dans les chapitres précédents, nous avons déjà abordé la gestion des ancrages. Mais dans une page de type Responsive Web Design, les ancrages ne fonctionnent pas tout à fait de la même façon.
  • Examinons le fonctionnement des ancrages en mode Responsive Web Design.
    1. Ouvrez si nécessaire le projet "WW_Responsive". Pour cela, dans la page d'accueil de WEBDEV, cliquez sur "Cours d'auto-formation" et sélectionnez le projet "Responsive Web Design (Exercice)".
    2. Ouvrez la page PAGE_Ancrage.
    3. Sélectionnez le bouton de recherche en haut à droite :
    4. Affichez le menu contextuel (clic droit) et sélectionnez l'option "Ancrage".
    5. La fenêtre de gestion des ancrages s'affiche :
WEBDEV propose plusieurs types d'ancrage :
  • les ancrages de position,
  • les ancrages en largeur.
  • les ancrages en hauteur.

Ancrages de position

L'ancrage de position propose les choix suivants :
  • Un ancrage à gauche.
  • Un ancrage centré.
  • Un ancrage à droite.
  • Examinons ces différentes possibilités :
    • L'ancrage centré est à sélectionner pour que le champ reste centré lors du redimensionnement du navigateur.
    • L'ancrage à gauche permet de spécifier que la taille entre le champ et le bord gauche de la page sera toujours la même proportionnellement à la taille de la page. La partie à droite du champ pourra être tronquée si la réduction du navigateur est trop importante.
    • L'ancrage à droite fait la même chose que l'ancrage à gauche, mais à droite.
  • Dans notre exemple, le bouton de recherche en haut à droite de la page est ancré à droite. Cela signifie que l'espacement entre le bord droit du champ et le bord droit de la page sera toujours le même proportionnellement à la largeur de la page.
  • Testez la page ( parmi les boutons d'accès rapide).
    • La page apparaît en test telle qu'elle était sous l'éditeur en mode Bureau.
    • Réduisez la taille de votre navigateur.
    • La partie à gauche du bouton de recherche se réduit et la partie à droite reste toujours la même.
  • Fermez le navigateur.

Ancrages de taille, en hauteur et en largeur

  • Passons aux ancrages de taille.
    1. Dans la page PAGE_Ancrage, sélectionnez le champ de saisie "Rechercher" à côté du bouton de recherche.
    2. Affichez le menu contextuel (clic droit) et sélectionnez l'option "Ancrage".
    3. La fenêtre de gestion des ancrages s'affiche. Les ancrages de taille sont regroupés dans les parties "Gestion de la largeur" et "Gestion de la hauteur".
  • Observons les différentes possibilités :
    • Au niveau de l'ancrage en largeur, les options sont les suivantes :
      • Largeur fixe : le champ garde ses dimensions définies sous l'éditeur.
      • Réduire au contenu et tirer : la largeur du champ s'adapte au contenu. Dans ce cas, il est possible de spécifier la largeur minimale et la largeur maximale.
      • Agrandir ou réduire comme le navigateur : la largeur du champ est modifiée proportionnellement à la largeur du navigateur. Dans ce cas, il est possible de spécifier la largeur minimale et la largeur maximale.
    • Au niveau de l'ancrage en hauteur, les options sont les suivantes :
      • Hauteur fixe : le champ garde ses dimensions.
      • Réduire au contenu et tirer : la hauteur du champ est adaptée au contenu. Dans ce cas, il est possible de spécifier la hauteur minimale.
    • Il est également possible de définir le comportement du champ lorsque le contenu est plus grand que le champ. Il est possible de :
      • Agrandir le champ et pousser les autres champs.
      • Tronquer le contenu.
      • Activer un ascenseur qui sera toujours visible.
      • Afficher un ascenseur.
  • Dans notre exemple, le champ de saisie et le bouton de recherche sont définis comme devant garder leur taille d'édition.
  • Testez la page ( parmi les boutons d'accès rapide).
    • La page apparaît en test telle qu'elle était sous l'éditeur en mode Bureau.
    • Réduisez la taille de votre navigateur.
    • La taille du champ de saisie et du bouton de recherche ne change pas.
  • Fermez le navigateur et revenez sous l'éditeur.
Ordre des champs en mode Responsive Web Design
Nous avons vu que les pages en mode Responsive Web Design s'adaptaient en fonction de la taille du navigateur. Le mécanisme de surcharge par tranche permet de modifier l'interface selon la tranche voulue, notamment en modifiant la position des champs.
Cette modification de position doit retenir toute votre attention. En effet, dans une page responsive, il n'est pas possible de changer l'ordre des champs dans la page.
  • Pour comprendre la gestion de l'ordre des champs :
    1. Ouvrez si nécessaire le projet "WW_Responsive". Pour cela, dans la page d'accueil de WEBDEV, cliquez sur "Cours d'auto-formation" et sélectionnez le projet "Responsive Web Design (Exercice)".
    2. Ouvrez la page PAGE_OrdreChamp.
  • Observons cette page :
    1. Dans la tranche Bureau, il y a 3 produits présentés horizontalement.
    2. Cliquez dans l'entête de la tranche Mobile.
    3. Dans la tranche Mobile, les images des produits sont vraiment très réduites.
  • Sur Mobile, il faudrait afficher les champs avec la même taille que dans la tranche Bureau et mettre une image à la ligne.
  • Revenez sur la tranche Bureau pour modifier l'ancrage des champs.
    1. Sélectionnez les champs Image et les champs Libellé associés.
    2. Affichez le menu contextuel et sélectionnez "Ancrage".
    3. Dans la fenêtre qui s'affiche, sélectionnez "Largeur fixe".
    4. Validez la fenêtre d'ancrage.
    5. Sauvegardez la page (Ctrl + S). Deux erreurs de compilation apparaissent.
      Ces erreurs indiquent que le champ IMG_Produit_3 et le champ ZTR_Les_plats_Traditionnels_français sortent de la page à la fin de la tranche tablette.
    6. Cliquez sur la tranche Tablette. Déplacez le curseur “Largeur du navigateur” vers la gauche. A partir d'une certaine dimension du navigateur, l'image et le libellé du 3ème produit ne rentrent plus dans la page.
    7. Sélectionnez ces deux champs dans la tranche Tablette, puis déplacez-les en dessous des deux premiers.
    8. Sauvegardez la page (Ctrl + S).
    9. De nouvelles erreurs d'IHM apparaissent dans le volet des erreurs de compilation.
    10. Ces erreurs sont notamment des erreurs d'ordre d'affichage.
Pourquoi ces erreurs apparaissent-elles ?
Ce cas d'utilisation est relativement courant et il est nécessaire de bien comprendre le principe utilisé.
Chaque champ est positionné par rapport à son champ précédent.
Dans notre exemple, chaque image est positionnée par rapport à l'image précédente. Il en va de même pour les champs Libellé.
Le premier libellé à gauche (numéro 4 dans l'exemple) est positionné par rapport à la dernière image (numéro 3 dans notre exemple).
Lorsque nous avons déplacé l'image et son libellé associé dans la tranche Tablette (image 3 et libellé 6 dans notre exemple), le libellé 4 a été positionné "au-dessus" de son champ “référence” (l'image 3 après laquelle il devrait être).
Ce positionnement n'est pas possible en Responsive Web Design. Des nouvelles erreurs d'IHM ont donc été affichées.
Pour vous guider, la zone où le changement de l'ordre d'affichage est effectué est entourée de pointillés rouges.
  • Pour corriger c'est très facile, il suffit d'indiquer à WEBDEV la mise en forme logique. Dans notre cas, chaque champ Image doit être lié à son libellé : il suffit de créer des cellules autour de chaque “produit” (image + libellé). La cellule doit avoir un ancrage de type "Largeur fixe".

    Note

    En règle générale, en mode Responsive Web Design, pour grouper des champs et obtenir un même comportement pour chaque champ du groupe, il est conseillé de les mettre dans une cellule.
  • Pour réaliser ces corrections dans notre page, nous allons tout d'abord supprimer toutes les surcharges réalisées dans la tranche Tablette :
    1. Affichez le menu contextuel de la tranche Tablette (clic droit sur l'entête de la zone).
    2. Sélectionnez l'option "Liste des surcharges".
    3. Dans la fenêtre qui s'affiche, sélectionnez toutes les surcharges et cliquez sur le bouton "Supprimer".
    4. Validez la fenêtre.
  • Pour créer une cellule contenant un ou plusieurs champs existants :
    1. Affichez si nécessaire la tranche Bureau.
    2. Sélectionnez les champs (par exemple, la première image à gauche et son libellé).
    3. Dans le volet "Modification", dans le groupe "Transformations", déroulez "Refactoring et permutations" et sélectionnez l'option "Créer une cellule avec la sélection".
    4. Sélectionnez la cellule. Dans son menu contextuel, sélectionnez l'option "Ancrage".
    5. Dans la fenêtre d'ancrage, sélectionnez "Largeur fixe" pour l'ancrage en largeur.
    6. Validez.
    7. Effectuez à nouveau ces opérations pour les deux autres groupes de champs.
  • Nous allons maintenant refaire le positionnement des champs en tranche Tablette :
    1. Passez en tranche Tablette.
    2. Sélectionnez la cellule contenant les deux derniers champs, puis déplacez cette cellule en dessous des deux premiers champs.
    3. Enregistrez la page (Ctrl + S). Aucune erreur de compilation n'est affichée.
Leçon précédenteSommaireLeçon suivante
Version minimum requise
  • Version 24
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire