Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

AIR Mobile – Application Pokémon (12) – Affichage des statistiques / Utilisation du composant PokemonStat

Dans le dernier tutorial, on a encapsulé notre barre de statistique dans un composant autonome:

AIR Mobile – Application Pokémon (11) – Affichage des statistiques / Création d'un composant

Au final, vous vous êtes retrouvé avec exactement le même rendu, sauf que vous aviez un composant. On va voir dans cette partie comment utiliser ce composant pour afficher les 6 statistiques de notre Pokémon.

Ajout des 6 composants PokemonStat

Dans la vue PokemonDetailsView, ajoutez 6 fois le composant PokemonStat en liant chaque composant à une propriété de votre objet Pokemon:

...
  <s:Image id="img" />
  <views:PokemonStat title="Vie" statValue="{_p.pv}" />
  <views:PokemonStat title="Vitesse" statValue="{_p.vit}" />
  <views:PokemonStat title="Attaque" statValue="{_p.atk}" />
  <views:PokemonStat title="Défense" statValue="{_p.def}" />
  <views:PokemonStat title="Attaque Spé." statValue="{_p.atkspe}" />
  <views:PokemonStat title="Défense Spé." statValue="{_p.defspe}" />
</s:View>
...

Lancez votre application et vous obtenez:

…Hum, ce n'est pas vraiment le résultat que l'on espérait obtenir. Les composants sont en fait empilés les un au dessus des autres. Pourquoi? Car le composant qui les contient (View) est basé sur Group, qui est un composant qui ne donne aucune contrainte de base à ses enfants.

Modification du layout de la View

Pour y voir plus clair, on va mettre une mise en page verticale. Pour cela, on va préciser la propriété "layout" de notre vue. Cela peut être fait directement dans le MXML. On va assigner à cette propriété, un objet de type VerticalLayout:

...
  </fx:Script>
  <s:layout>
    <s:VerticalLayout />
  </s:layout>
  <s:Image id="img" />
...

Relancez votre application, voilà le résultat:

C'est déjà mieux. Mais vous pouvez constater que l'on réserve beaucoup de place pour chaque statistique. On pourrait en rentrer 2 par lignes sans problème. C'est ce que nous allons faire.

Pour cela, on va encapsuler nos statistiques dans un conteneur de type Group. A ce conteneur, on va aussi assigner un "layout". Cette fois-ci, il ne sera pas de type VerticalLayout mais de type TileLayout. Un TileLayout réalise une mise en page en "grille":

...
  <s:Group width="100%" height="100%">
    <s:layout>
      <s:TileLayout requestedColumnCount="2" columnAlign="justifyUsingWidth" verticalGap="8" />
    </s:layout>
    <views:PokemonStat title="Vie" statValue="{_p.pv}" />
    <views:PokemonStat title="Vitesse" statValue="{_p.vit}" />
    <views:PokemonStat title="Attaque" statValue="{_p.atk}" />
    <views:PokemonStat title="Défense" statValue="{_p.def}" />
    <views:PokemonStat title="Attaque Spé." statValue="{_p.atkspe}" />
    <views:PokemonStat title="Défense Spé." statValue="{_p.defspe}" />
  </s:Group>
...

Vous remarquerez que l'on a spécifié certains arguments sur l'objet TileLayout comme columnAlign ou requestedColumnCount. Voici le détail:

• requestedColumnCount : indique que l'on veut une mise en page sur 2 colonnes exactement. On ne spécifie pas le nombre de ligne, il y en aura autant que besoin
• columnAlign : Permet de réaliser un "100%" sur la largeur. On indique à la mise en page qu'elle doit prendre toute la largeur. D'autres valeurs de paramètres sont disponibles, n'hésitez pas à les essayer
• verticalGap : Permet de spécifier quel espace (en pixels) sera laissé entre les enfants du Group

Voici le résultat:

Vous avez vu dans ce tutorial que grâce à la création d'un composant PokemonStat, vous avez pu factoriser les développements de manière rapide. Le code de la vue en est aussi soulagé. Pour l'instant, on affiche seulement la valeur sur une barre rouge.

Dans la partie suivante, on va modifier l'apparence (couleur) et la taille de la barre, en fonction de la valeur passée au composant.