PC SOFT

DOCUMENTATION EN LIGNE
DE WINDEV, WEBDEV ET WINDEV MOBILE

  • Présentation
  • Quand faut-il créer une nouvelle tranche ?
  • Comment gérer la réduction ou l'agrandissement des tranches ?
  • Comment optimiser l'espace visible dans une tranche ?
  • Pourquoi une surcharge de position et de taille des champs provoque une superposition dans le navigateur ?
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaEtats et RequêtesCode Utilisateur (MCU)
WEBDEV
WindowsLinuxPHPWEBDEV - Code Navigateur
WINDEV Mobile
AndroidWidget AndroidiPhone/iPadApple WatchUniversal Windows 10 AppWindows Mobile
Autres
Procédures stockées
Présentation
Vous avez utilisé le Responsive Web Design dans vos pages mais quelques points de blocages subsistent.
Cette page présente des astuces de mise en page.
Dans tous les cas :
  • Vérifiez toutes les erreurs d'IHM : elles précisent le champ et la tranche incriminés.
  • Repartez de la tranche par défaut :
    • Repartez de la tranche "Bureau" en mode "Desktop First" et réduisez le navigateur sous l'éditeur (via la poignée) pour vérifier la cohérence des modifications.
    • Versions 22 et supérieures
      Repartez de la tranche "Mobile" en mode "Mobile First" et agrandissez le navigateur sous l'éditeur (via la poignée) pour vérifier la cohérence des modifications.
      Nouveauté 22
      Repartez de la tranche "Mobile" en mode "Mobile First" et agrandissez le navigateur sous l'éditeur (via la poignée) pour vérifier la cohérence des modifications.
      Repartez de la tranche "Mobile" en mode "Mobile First" et agrandissez le navigateur sous l'éditeur (via la poignée) pour vérifier la cohérence des modifications.
Quand faut-il créer une nouvelle tranche ?
Il est possible de créer une tranche :
  • Pour gérer un matériel spécifique.
  • Pour gérer un affichage spécifique. Dans l'exemple suivant (page en mode "Desktop First"), un affichage intermédiaire est souhaité :
    Création d'une tranche
Comment gérer la réduction ou l'agrandissement des tranches ?
Par défaut, les champs utilisent l'ancrage en largeur "Adapté à la grille". Les champs sont donc réduits ou agrandis selon le mode (Desktop First ou Mobile First) proportionnellement. Par exemple en "Desktop First" :
Champs utilisables
Pour limiter la réduction des champs, il suffit de fixer la taille minimale :
  • option "Largeur min" dans l'onglet "IHM" de la fenêtre de description du champ.
  • Versions 22 et supérieures
    option "Largeur min" dans la fenêtre de gestion des ancrages du champ.
    Nouveauté 22
    option "Largeur min" dans la fenêtre de gestion des ancrages du champ.
    option "Largeur min" dans la fenêtre de gestion des ancrages du champ.
Pour ne pas réduire les champs, il faut appliquer aux champs l'ancrage en largeur "Utiliser la taille d'édition".
Remarque : Si une erreur d'IHM apparaît ou si le contenu du champ n'est pas exploitable visuellement, vous devez déplacer le champ et le redimensionner.
Champs inutilisables
Comment optimiser l'espace visible dans une tranche ?
Par défaut, la mise en page est conservée. Le contenu de la page s'adapte à la tranche.
Pour optimiser l'espace visible, il est possible de réduire les marges de la page (marges internes) dans une tranche et appliquer aux champs l'ancrage en largeur "Utiliser la taille d'édition".
Par exemple en mode Desktop First :
Adaptation de la mise en page et du contenu
Pourquoi une surcharge de position et de taille des champs provoque une superposition dans le navigateur ?
La position d'un champ est surchargée dans la tranche "Mobile" et/ou "Tablette" : dans le navigateur, cette surcharge de position et de taille provoque la superposition de champs.
Quel est le problème ? La surcharge de position dans la tranche "Mobile" et/ou "Tablette" ne conserve pas l'ordre des champs défini dans la tranche "Bureau" (qui sert de tranche de référence en mode "Desktop First").
En mode "Responsive Web Design", les champs sont ordonnés les uns par rapport aux autres. Cet ordre dépend de la position (de haut en bas puis de gauche à droite) et de l'ancrage. Il doit être respecté à l'identique dans toutes les tranches.
En effet, la technologie "Responsive Web Design" utilise un seul flux HTML pour toutes les tranches, en repositionnant les champs par CSS. L'ordre des champs dans la tranche de référence détermine l'ordre des champs dans le flux HTML.
Exemple : Dans l'exemple suivant, la page contient une cellule regroupant une autre cellule et une image :
L'ordre des champs dans la tranche "Bureau" (la tranche de référence) est :
  1. la cellule CELL_1 qui regroupe la seconde cellule CELL_2 et l'image,
  2. la cellule CELL_2,
  3. l'image.
Dans la tranche "Mobile", une surcharge de la taille et de la position des champs est effectuée : l'image est placée avant la cellule CELL_2. L'ordre des champs dans la tranche "Mobile" diffère donc de l'ordre des champs de la tranche "Bureau" :
En exécution, l'ordre des champs de la tranche "Bureau" n'étant pas respecté dans la tranche "Mobile", il y a une superposition : l'image va déborder sur la cellule CELL_2 et elle ne pourra pas la "pousser" :
Pour éviter toute superposition inattendue dans le navigateur, il faut donc s'assurer que l'ordre des champs dans la tranche "Mobile" et dans la tranche "Tablette" est le même que celui de la tranche "Bureau" (tranche de référence).
Dans notre exemple, pour obtenir ici le résultat attendu, il est possible d'utiliser deux champs Image :
  • Le premier champ Image sera placé avant le champ CELL_2 dans la tranche Bureau (donc il sera en premier dans l'ordre des champs dans la tranche de référence). Il sera visible uniquement dans la tranche "Mobile".
  • Le second champ Image sera visible uniquement dans la tranche "Bureau".
Afin de faciliter le positionnement des champs dans la tranche "Mobile" et/ou "Tablette", à partir de la version 21 Update 3, une erreur de compilation d'IHM est systématiquement générée par l'éditeur de pages en cas de non respect de l'ordre des champs entre les différentes tranches.
Version minimum requise
  • Version 21
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire