PC SOFT

DOCUMENTATION EN LIGNE
DE WINDEV, WEBDEV ET WINDEV MOBILE

  • Présentation
  • Erreur d'ordre d'affichage et de positionnement
  • Exemple
  • Explications
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
A partir de WEBDEV 21 Update 3, de nouvelles erreurs d'IHM spécifiques à la gestion de la position des champs dans les différentes tranches font leur apparition : WEBDEV propose des erreurs d'IHM spécifiques à la gestion de la position des champs dans les différentes tranches :
  • Erreur d'ordre d'affichage : La position du champ <Nom du champ> change l'ordre d'affichage des champs défini dans la tranche de référence (Bureau ou Mobile selon le mode de gestion de la page Desktop First ou Mobile First). L'ordre d'affichage des champs doit être le même dans toutes les tranches.
  • Erreur de superposition sur les blocs de positionnement : Le bloc de positionnement responsive contenant le champ <Nom du champ> dans la tranche Tablette est en erreur de superposition.
Si ces erreurs ne sont pas traitées, un comportement inattendu risque d'être observé en exécution. Pour corriger cette erreur, il est possible par exemple :
  • de déplacer le champ dans la direction conseillée.
  • de modifier l'ordre des champs dans la tranche "Bureau".
  • de modifier l'ancrage des champs.
  • d'utiliser une cellule pour regrouper les champs logiquement.
Erreur d'ordre d'affichage et de positionnement

Exemple

Dans une page Responsive Web Design, l'ordre d'affichage des champs doit être conservé entre les différentes tranches. Par exemple, il n'est pas possible de modifier complètement l'ordre des champs entre la tranche de référence (Bureau ou Mobile) et la tranche Tablette.
Dans certains cas, WEBDEV affiche une erreur d'ordre d'affichage alors que l'interface semble cohérente. En effet, l'ordre d'affichage des champs considéré par WEBDEV dépend de nombreux paramètres : positionnement des champs les uns par rapport aux autres, alignement, ancrages, ...
Considérons l'exemple suivant (page créée dans le mode Desktop First) :
  1. En tranche Bureau, trois images et trois libellés sont affichés.
    3 images et 3 libellés
    WEBDEV privilégie le découpage par ligne. Les champs sont donc numérotés de la manière suivante :
    Image 1 Image 2 Image 3
    Libellé 4 Libellé 5 Libellé 6
  2. En tranche Mobile, par défaut, les images des produits sont réduites et tronquées. Pour corriger ce problème, il est nécessaire d'afficher les champs avec la même taille que dans la tranche Bureau et de mettre une image et le libellé associé à la ligne.
  3. En tranche Bureau, l'ancrage des champs (3 images et 3 libellés) est modifié pour utiliser la taille d'édition en largeur.
  4. En tranche Tablette, la dernière image et son libellé sont déplacés pour être "passé à la ligne".
  5. Une erreur d'ordre d'affichage apparaît sur le champ Libellé associé à la première image. Le champ Libellé apparaît en rose (comme pour une erreur de superposition).
    Modification en mode mobile
    Les champs sont numérotés de la manière suivante :
    Image 1 Image 2
    Libellé 4 Libellé 5
    Image 3 Libellé 6
    Cette numérotation est différente de celle de la tranche Bureau.
    Dans cet exemple, on veut regrouper logiquement les champs deux à deux (image + libellé) afin de déplacer le dernier groupe dans la tranche Tablette.
    Une des solutions pour ne pas avoir d'erreur est d'utiliser un champ Cellule pour regrouper chaque champ Image et son libellé. Cette manipulation doit être effectuée dans la tranche Bureau. Il est ensuite possible de déplacer la dernière cellule en dessous des autres dans la tranche Tablette sans avoir d'erreur d'IHM.
    Des erreurs d'IHM apparaissent. En double-cliquant sur l'erreur de superposition, la visualisation des erreurs de superposition est automatiquement activée.
    Modification en mode tablette
    Un bloc rose apparaît ainsi que des cadres bleu et rouge en pointillés. Ils matérialisent une zone de superposition invalide.

Explications

WEBDEV effectue un découpage en ligne par défaut des différents éléments constituant la page. Dans la tranche "Bureau", WEBDEV a donc réalisé :
  • une ligne pour les images,
  • une ligne pour les libellés.
Dans la tranche inférieure (Tablette ou Mobile), WEBDEV découpe de la même façon, une ligne pour les images et une ligne pour les libellés. La ligne comprenant les images et la ligne comprenant les libellés n'ayant plus la même hauteur, les deux lignes se superposent.
Sous l'éditeur, en affichant les superpositions, WEBDEV permet de visualiser cette superposition de lignes :
  • Le cadre bleu correspond à la ligne contenant les images.
  • Le cadre rouge correspond à la ligne contenant les libellés.
Afin de corriger ce type d'erreur de superposition, il faut indiquer à WEBDEV la mise en forme logique.
Dans notre cas, chaque champ Image doit être lié à son libellé :
  • il faut pour cela créer des cellules contenant chaque couple "Image + Libellé". Cette manipulation doit être effectuée dans la tranche Bureau.
  • chaque cellule doit avoir l'ancrage en largeur "Utiliser la taille d'édition".
Il est ensuite possible de déplacer la dernière cellule en dessous des autres dans la tranche Tablette sans avoir d'erreur d'IHM.
Version minimum requise
  • Version 21
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire