Sommaire

Tutoriel 8: les tailles - Débutant

Un des éléments fondateur de SynApps est sa capacité à construire des applications adaptatives: on parle également de responsive design ou site web adaptatif

Wikipédia

Il est important de bien comprendre comment définir les tailles des acteurs pour construire des SynApps qui s’adaptent au mieux aux différentes dimensions d’écrans

Remarque: cela ne veut pas dire qu’une application réalisée pour un mode desktop sera parfaitement adaptée à un smartphone. Il est même recommendé de réaliser des applications différentes pour les devices de type desktop/tablette et smartphone

En respectant les indications de ce tutoriel, votre application s’adaptera parfaitement aux différentes tailles d’écrans pour ces deux types de restitution

Prérequis

  • Créer une nouvelle SynApp tuto08

Construction de la scène de test

Nous allons construire une scène simple afin de mettre en évidence le comportement des différents types de taille sur le rendu d’un acteur

  1. Modifier le label de la première scène en sceneSizes et le nom avec Test des tailles puis déployer

  2. Définir l’acteur principal avec un acteur Empilement

    • renommer le Label avec stackRoot
    • modifier la propriété Aspect > Police > Taille en 3em
    • définir la propriété Aspect > Police > Alignement texte en Centre

  3. Ajouter un acteur enfant de type Empilement qui permettra de saisir la taille de la hauteur

    • renommer le Label avec stackInputHeight
    • modifier la propriété Spécifiques > Orientation en Horizontale
    • réinitialiser la propriété Gabarit > Hauteur avec la valeur par défaut [vide]

  4. Ajouter un acteur enfant de type Texte qui contiendra le libellé hauteur

    • renommer le Label avec textHeight
    • modifier la propriété Spécifiques > Contenu en Hauteur

  5. Sélectionner l’acteur stackInputHeight et ajouter un acteur enfant de type Boite de texte qui permettra de saisir la taille

    • renommer le Label avec textboxHeight
    • modifier la propriété Spécifiques > Valeur en 200px
    • modifier la propriété Spécifiques > Texte d’aide en Hauteur du texte
    • modifier la propriété Spécifiques > Taille en 15
    • modifier la propriété Aspect > Police > Taille en 1em

  6. Sélectionner puis dupliquer l’acteur stackInputHeight

    • renommer le Label avec stackInputWidth

  7. Sélectionner l’acteur enfant de type Texte sous (=enfant de) l’acteur stackInputHeight

    • renommer le Label avec textWidth
    • modifier la propriété Spécifiques > Contenu en Largeur

  8. Sélectionner l’acteur enfant de type Boite de texte sous l’acteur stackInputHeight

    • renommer le Label avec textboxWidth
    • modifier la propriété Spécifiques > Valeur en 100%
    • modifier la propriété Spécifiques > Texte d’aide en Largeur du texte

  9. Sélectionner l’acteur stackRoot et ajouter un acteur enfant de type Empilement

    • renommer le Label avec stackInner
    • modifier la propriété Aspect > Couleur de fond en #e0e0e0
    • modifier la propriété Position > Align. vertical en Etendre

  10. Sélectionner l’acteur stackInner et ajouter un acteur enfant de type Texte auquel seront appliquées les tailles définies par l’utilisateur

    • renommer le Label avec textSize
    • modifier la propriété Spécifiques > Contenu avec le code HTML
    <span class="badge" style="font-size:1em;">{{width}}</span> x <span class="badge" style="font-size:1em;">{{height}}</span>
    • compléter le contenu en créant les propriétés additionnelle width et height de type texte
    • lier la propriété Spécifiques > width créée à la propriété Largeur du même acteur
    • lier la propriété Spécifiques > height créée à la propriété Hauteur du même acteur
    • modifier la propriété Position > Align. vertical en Centré
    • modifier la propriété Position > Align. horizontal en Centré
    • lier la propriété Gabarit > Hauteur à la propriété Valeur de l’acteur textboxHeight
    • lier la propriété Gabarit > Largeur à la propriété Valeur de l’acteur textboxWidth
    • modifier la propriété Aspect > Couleur en #ffffff
    • modifier la propriété Aspect > Couleur de fond en #4b0082
    • définir la propriété Aspect > Bordure > Style bordure en Pointillé
    • définir la propriété Aspect > Bordure > Epaisseur bordure en 10px
    • définir la propriété Aspect > Bordure > Couleur bordure en #ff0000

  11. Vérifier la zone de prévisualisation

    props_invalid

  12. Déployer et éxécuter

La SynApp est terminée ! nous allons tester l’effet des différentes tailles sur l’acteur texte du centre

Simulation device de type smartphone

Nous allons simuler le rendu sur un petit écran pour mieux comprendre l’influence des tailles sur le rendu de l’acteur central

  1. En mode éxécution, appuyer sur F12 pour ouvrir les DevTools (outils développeurs) de Chrome

  2. Cliquer sur l’icone permettant de choisir un type de device de rendu

    devtools

  3. Sélectionner le device que vous souhaitez dans la fenêtre principale du navigateur. Par exemple iPhone 6/7/8

    execute

    Remarque: si vous souhaitez faire apparaitre le contour du téléphone, cliquer sur les 3 points verticaux en haut à droite puis sélectionnez Show device frame

Test des tailles

L’environnement de test est opérationnel et la SynApp est en mode éxécution !

Tailles en pixel

  1. Tourner la SynApp en mode portrait

    execute2

  2. Définir la hauteur à 300px et laisser la largeur à 100%

    execute2

  3. Tourner la SynApp en mode paysage et constater que le bord rouge du bas de la zone disparait

    execute3

La zone centrale est tronquée, la SynApp n’est pas adaptative !

Bien que la taille en pixel soit la plus simple à appréhender, nous recommandons d’éviter ce type de taille pour construire des applications responsives excepté dans quelques cas:

  • Scène de type synoptique avec fond de plan dans une disposition toile, pour rappel tutoriel 3 sur l’acteur de disposition toile. Tous les acteurs de la scène doivent être défnis en valeur absolu en pixels. L’adaptabilité du synoptique pourra alors être apporté par l’acteur boite à vue, pour rappel tutoriel 3 sur l’acteur de disposition boite à vue

  • Acteur enfant dont la taille doit absolument rester fixe. Par exemple: un logo qui doit avoir un aspect fixe

  • SynApp réalisée pour un écran d’accueil à la résolution précise

De façon générale, lorsque vous définissez une taille en pixels, cela doit être pour une raison justifiée !

Tailles pourcentage %

Permet de définir des tailles en pourcent par rapport à l’acteur parent

  1. Définir la hauteur à 50% et laisser la largeur à 100%

  2. Passer du mode paysage au mode portrait et constater que la hauteur de la zone est de 50% relativement à la hauteur de la zone grise

    execute4

    Remarque: lorsque vous définissez des tailles en %, elles sont relatives par rapport à l’acteur parent immédiat. Ici, il s’agit de l’acteur stackInner en gris

Tailles viewport height vh et viewport width vw

Permet de définir des tailles en pourcent par rapport à la taille de la fenêtre

  1. Définir la hauteur à 50vh et laisser la largeur à 100%

  2. Passer du mode paysage au mode portrait et constater que la hauteur de la zone est de 50% relativement à la hauteur de la fenêtre

    execute5

    Remarque: lorsque vous définissez des tailles avec vh, elles sont relatives par rapport à la taille de la fenêtre à la différence du %

  3. Définir la largeur à 80vw et laisser la Hauteur à 30vw

  4. constater que la largeur de la zone est de 80% relativement à la largeur de la fenêtre

    execute6

    Remarque: vh correspond à la hauteur de la fenêtre et vw correspond à la largeur de la fenêtre

vh et vw sont trés utiles pour définir des tailles en % par rapport aux tailles de fenêtres sur des écrans desktop non orientables

Tailles vmin et vmax

Permet de définir des tailles en pourcentage par rapport à, respectivement, la plus petite et la plus grande taille de la fenêtre. L’interêt étant de conserver la même taille quelque soit l’orientation, portrait ou paysage, sur un écran orientable

  1. Définir la hauteur à 50vmin et la largeur à 100%

  2. Passer du mode paysage au mode portrait et constater que la hauteur de la zone est de 50% relativement à la plus petite des tailles: la largeur de la fenêtre

    execute7

    Remarque: vh correspond à la hauteur de la fenêtre et vw correspond à la largeur de la fenêtre

  3. Définir la hauteur à 30vmax et laisser la largeur à 100%

  4. constater que la hauteur de la zone est de 30% relativement à la plus grande des tailles: la hauteur de la fenêtre

    execute8

vmin et vmax sont trés utiles pour définir des tailles en % par rapport aux tailles de fenêtres sur des écrans smartphone et tablette orientables. La taille est conservée quelquesoit l’orientation

Tailles em

Permet de définir une taille en fonction de celle de la police. em est adapté pour les acteurs qui contiennent du texte afin d’adapter au mieux la dimension à la taille de la police

  1. Définir la hauteur à 3em et laisser la largeur à 100%

  2. constater que la hauteur de la zone est 3x plus grande que la taille de la police. Le nombre, qui peut être décimal, devant em est donc un coefficient multiplicateur par rapport à la taille de la police

    execute9

  3. Passer en mode portrait et constater que la hauteur est conservée

    Remarque: tout comme vmin et vmax, em permet de conserver la taille entre l’orientation portrait et paysage mais est plus adapté pour représenter parfaitement les contenus texte

Que retenir

Nous avons passé en revu les différents types de tailles:

  • px: L’unité de longueur px est absolue. Elle dépend de la résolution du périphérique d’affichage

  • %: L’unité de longueur % est relative à la taille de l’acteur parent

  • em: L’unité de longueur code est relative à la taille de la police de l’acteur

  • vh: L’unité de longueur vh est relative à la hauteur de la fenêtre. 1vh est égale à 1% de la hauteur de la fenètre

  • vw: L’unité de longueur vw est relative à la largeur de la fenêtre. 1vw est égale à 1% de la largeur de la fenètre

  • vmin: L’unité de longueur vmin est relative à la plus petite des dimensions de la fenêtre. 1vmin est égale à 1% de la plus petite des dimensions de la fenêtre

  • vmax: L’unité de longueur vmax est relative à la plus grande des dimensions de la fenêtre. 1vmax est égale à 1% de la plus grande des dimensions de la fenêtre

Selon le type de device de restitution, certain types sont plus adaptés que d’autre:

  1. vh et vw pour le desktop
  2. vmin et vmax pour les smartphones et tablettes
  3. px est a éviter sauf dans certains cas trés limités

Dans ce tutoriel, les tailles ont été mis en oeuvre dans les propriétés Gabarit > Hauteur et Gabarit > Largeur mais le principe reste le même pour les autres propriétés des acteurs avec des tailles:

  • Gabarit > Marge > Extérieurs
  • Gabarit > Marge > Intérieurs
  • Aspect > Police > Taille
  • Aspect > Police > Hauteur ligne
  • Aspect > Bordure > Epaisseur bordure
  • Aspect > Bordure > Rayon bordure

Enfin nous avons utilisé les Dev Tools de Chrome pour simuler un device de type smartphone

Conclusion

Le tutoriel 8 portant sur les tailles est terminé

Vous ne devez pas hésiter à tester votre SynApp avec les outils de développement des navigateurs qui permmettent de vérifier rapidement le rendu dans différentes tailles et orientations d’écrans: n’hésitez pas à changer le device de restitution iPad, Nexus, etc

Vous pouvez même utiliser le device Responsive qui permet de modifier manuellement la largeur et la hauteur !

execute9

La bonne utilisation des tailles est un facteur clé pour construire des applications adaptatives, une des promesses majeures de SynApps !

Source Blog Stéphanie Walter Source Blog Stéphanie Walter

Vous pouvez remonter les bugs & remarques concernant ce tutoriel, SynApps RUNTIME & MAKER sur GitHub

Revenir sur la liste des tutoriels