DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

Nouveauté WEBDEV 28 !
  • Ce que vous allez apprendre dans cette leçon
  • Présentation
  • Agencements simples
  • Créer un agencement et adapter une page simple
  • Agencements et champs spécifiques
  • Gérer les agencements dans une page contenant différents types de champs
  • Comment adapter la taille du champ et des répétitions du champ Zone répétée ?
Leçon 8.2. Les agencements dans WEBDEV
Ce que vous allez apprendre dans cette leçon
  • Créer un agencement.
  • Dissociation du positionnement des champs.
  • Gestion des champs Zone répétée.
Durée de la leçon

Durée estimée : 30 mn
Leçon précédenteSommaireLeçon suivante
Présentation
Nous avons déjà manipulé les agencements dans la partie précédente.
Dans cette partie, nous allons voir les différentes techniques mises à votre disposition pour créer des agencements facilement dans vos pages. Cette leçon nous permettra de manipuler :
  • la dissociation du positionnement des champs.
  • le positionnement des champs dans les différents agencements.
  • la visibilité des champs selon les agencements.
  • la gestion des champs Zone répétée dans les agencements.
La leçon suivante sera réservée à l'utilisation d'un menu dans les agencements.
Pour connaître les moyens à votre disposition dans WEBDEV pour créer des sites avec agencements, nous allons utiliser un projet exemple. Vous pourrez ainsi réaliser toutes les manipulations et mieux comprendre les outils à votre disposition.

  • Nous vous avons préparé un exemple simple :
    1. Lancez WEBDEV 28 (si ce n'est déjà fait).
    2. Affichez si nécessaire la page d'accueil de WEBDEV (Ctrl + <).
    3. Dans la page d'accueil, cliquez sur "Tutoriel" puis dans la zone "Partie 8 - Agencements", double-cliquez sur "Agencements (Exercice)".

Corrigé

Un projet corrigé est disponible. Ce projet contient la correction des différentes manipulations effectuées dans cette leçon. Pour ouvrir le projet corrigé, dans la page d'accueil, cliquez sur "Tutoriel" puis dans la zone "Partie 8 - Agencements", double-cliquez sur "Agencements (Corrigés)".
Agencements simples

Créer un agencement et adapter une page simple

  • Pour comprendre la gestion de l'ordre des champs, ouvrez la page PAGE_OrdreChamp présente dans le projet WW_Agencement.
    Cette page comporte :
    • un champ Libellé affichant un titre.
    • 3 champs Image et 3 champs Libellé présentés horizontalement.
  • 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 : le site ne s'affiche pas correctement.
    3. Fermez le navigateur.
  • En mode mobile, nous voulons afficher les 3 produits avec leur libellé les uns sous les autres, dans toute la hauteur de la page.
  • Nous allons tout d'abord créer un nouvel agencement mobile :
    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_OrdreChamp". L'agencement mobile est automatiquement sélectionné et affiché dans l'éditeur.
      Les zones en pointillé rouge délimitent les zones posant problème.
  • Nous allons tout d'abord agrandir la page en hauteur :
    1. Cliquez sur le cadre représentant la page. Dans la barre de message la taille de la page est indiquée : 320 x 406.
    2. Modifiez la valeur de la hauteur de la page en remplaçant 406 par 1200.
  • Nous allons repositionner les champs dans la page.
    1. Sélectionnez le libellé "Dissociation du positionnement des champs" et ajustez sa taille à la largeur de la page.

      Note

      L'option "Dissociation automatique" (en haut à droite de la fenêtre principale, dans la barre de titre) permet d'activer ou non le mode "Dissociation automatique". Lorsque ce mode est activé (par défaut), toute modification effectuée sur une des pages spécifiques de l'agencement ne sera pas reportée sur les autres.
    2. Sélectionnez la seconde image et le libellé associé et positionnez ces champs en dessous de la première image et de son libellé.
    3. Répétez la même opération pour la troisième image.
    4. Sélectionnez les trois images et leur libellé et sous le volet "Alignement", dans le groupe "Centrage et répartition", cliquez sur "Centrer dans le parent".
  • Maintenant, occupons-nous du libellé : le texte est trop grand et ne rentre pas complètement dans le champ. Nous allons donc diminuer la taille de la police du texte, mais uniquement dans l'agencement mobile.
    1. Affichez l'agencement mobile si nécessaire (il suffit de double-cliquer sur la vignette correspondante).
    2. Sélectionnez le libellé et affichez la fenêtre de description du champ (Alt + Entrée).
    3. Dans l'onglet "Style", changez la taille de 24 à 20 pixels.
    4. Validez. Le libellé rentre maintenant dans la largeur de la page.
  • L'agencement étant en mode "Dissociation automatique", la taille de la police du libellé a été modifiée uniquement dans l'agencement en cours. Pour le vérifier, c'est très simple :
    1. Affichez l'agencement Bureau : double-cliquez sur la vignette "Bureau" à droite de la page.
    2. Affichez la fenêtre de description du champ Libellé : dans l'onglet "Style", la taille de la police est toujours de 24 pixels.
  • 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.
Agencements et champs spécifiques

Gérer les agencements dans une page contenant différents types de champs

  • Ouvrez la page PAGE_Adaptations.
    Page sous l'éditeur
  • Cette page contient différents champs :
    • un titre en haut,
    • un champ Carte pour indiquer où se trouve le restaurant,
    • un champ Libellé à côté contenant l'adresse du restaurant,
    • un champ Image à droite avec la publicité,
    • un champ Zone répétée en bas affichant les avis.
  • Testez la page (Tester une page parmi les boutons d'accès rapide).
    • La page apparaît en test telle qu'elle était sous l'éditeur en mode Bureau.
      Remarque : Cette page utilise un champ Carte. En test comme en déploiement, il est nécessaire d'utiliser une clé Google. Dans le cas contraire, une erreur s'affiche dans le champ Carte. Pour obtenir cette clé, consultez l'aide en ligne.
      Si vous possédez une clé, indiquez-la dans l'onglet "Projet" de la fenêtre de description du projet.
    • Réduisez la taille de votre navigateur pour visualiser le comportement en mobile.
      Page mobile
  • Ce comportement n'est pas celui attendu. En mobile, il faudrait que :
    • l'image de publicité disparaisse,
    • la carte soit réduite et positionnée sous la description.
    • la zone répétée affiche les informations sur 1 seule colonne.
  • Nous allons tout d'abord créer un nouvel agencement mobile :
    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_Adaptations".
      L'agencement mobile est automatiquement sélectionné et affiché dans la page.
  • Nous allons tout d'abord agrandir la page en hauteur :
    1. Cliquez sur le cadre représentant la page. Dans la barre de message la taille de la page est indiquée : 320 x 616.
    2. Modifiez la valeur de la hauteur de la page en remplaçant 616 par 1024.
  • Pour y voir plus clair, positionnez les différents champs dans la zone à droite de la page. Pour chaque champ (sauf le titre) :
    1. Sélectionnez le champ voulu.
    2. Déplacez le champ vers la zone à droite de la page.
Des zones rouges peuvent apparaître, indiquant des problèmes de positionnement des champs. C'est normal. Nous allons maintenant traiter les champs un par un.
Pour faire des adaptations de positionnement et/ou de taille des champs simples (libellé, champs de saisie, image, carte, ...), rien de plus facile ! Ces modifications sont réalisées directement dans l'éditeur (comme pour n'importe quelle autre modification) et sont automatiquement effectuées uniquement dans l'agencement en cours (grâce à la dissociation automatique que nous avons déjà vu dans cette leçon).
  • Le champ Image est inutile en mobile. Nous allons donc le rendre invisible dans l'agencement mobile :
    1. Sélectionnez le champ Image.
    2. Dans le menu contextuel du champ, sélectionnez l'option "Agencements .. Visibilité par agencement" et désélectionnez l'option "Mobile (Smartphone)".
    3. Le champ disparaît de l'agencement Mobile.
Remarque : La visibilité d'un champ se définit habituellement dans l'onglet "UI" de la fenêtre de description du champ.
  • Nous allons ensuite déplacer les différents champs pour les positionner dans la page :
    1. Positionnez sous le titre, la zone de texte, en la redimensionnant pour qu'elle rentre dans la page.
    2. De la même manière, positionnez le champ Carte sous le texte, en redimensionnant le champ.
    3. A la suite, positionnez le champ "Avis". Vous obtenez l'interface suivante :
    4. Positionnez en dernier le champ Zone répétée.
      La zone de répétition de ce champ est trop grande dans l'agencement Mobile. Nous allons donc voir comment gérer la taille de ce champ en fonction des agencements.

Comment adapter la taille du champ et des répétitions du champ Zone répétée ?

L'affichage du champ Zone répétée doit être différent selon l'agencement utilisé. Dans notre cas, dans l'agencement Bureau, le champ Zone répétée doit être composé de deux colonnes et en mode Mobile, une seule colonne doit être affichée. Pour cela, il est nécessaire de "dissocier" le nombre de colonnes affiché par le champ Zone répétée.
  • Pour dissocier le nombre de colonnes affichées par le champ Zone répétée :
    1. Sélectionnez le champ Zone Répétée dans l'agencement mobile.
    2. Affichez la fenêtre de description du champ.
    3. Dans l'onglet "Détail", cliquez sur . Dans la fenêtre qui s'affiche :
      • Cochez l'option "Dissocier la valeur par agencement".
      • Conservez la valeur 2 pour l'agencement Bureau.
      • Modifiez la valeur 2 par 1 pour l'agencement Mobile.
    4. Validez.
    5. Validez la fenêtre de description du champ.
    6. Le champ Zone répétée présent dans l'agencement mobile apparaît avec une seule colonne. Vous pouvez le redimensionner pour qu'il rentre entièrement dans la page.
  • 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