Concept de la grille pour le positionnement des widgets

Présentation

Pour organiser les widgets, la météo des services se repose sur un système de grille où sont disposés de manière ordonnée les différents widgets.

La grille est conçue pour faciliter le placement des éléments sur la vue ( appelés des widgets ).

Il faut dissocier plusieurs concepts :

• Le nombre de case dans la grille.
• La largeur
• la hauteur de la grille.
• la séparation entre les widgets.

Le nombre de case dans la grille

La grille permet de disposer les widgets dans des cases de forme carré ( largeur = hauteur ) :

• Le nombre de cases est défini en fixant le nombre de case en largeur et en hauteur ( dans la description de météo ).
• Chaque widget aura :
  • son coin haut gauche posé sur une case défini par des coordonnées ( X , Y ), 
  • et sa largeur et sa hauteur seront comptées en nombre de cases.

La largeur de la grille en pixel

La largeur de la grille :

• va correspondre à 100% de la largeur de la vue.
• servira donc à déterminer la largeur des cases => taille de la vue /  nombre de cases => X pixels.

La hauteur de la grille en pixel

La hauteur de la grille est définie en nombre de cases.

• le nombre n'est pas limitée.
• La hauteur en pixel sera donc égale au nombre de cases fois la taille d'une case en pixels.
• Si la hauteur dépasse la hauteur visible de la vue ( c.a.d taille du navigateur , ou  taille d'affichage dans un autre site web ), un scroll permettra de naviguer en hauteur dans la grille.

Séparation entre les widgets

Pour éviter que les widgets se collent, le mécanisme de séparation les éloigne.

• L'espacement entre les widgets est calculé automatiquement en fonction de la largeur de la vue.
  • Il est égal à un pourcentage de la largeur totale ( Exemple 2% ), 
  • avec un maximum,
  • et un minimum.
• Cela permet de ne pas se soucier de son calcul, tout en ayant la possibilité d'agir dessus.