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

AIR Mobile – Application Pokémon (13) – Affichage des statistiques / Styling du composant

Dans notre dernier tutorial, on a vu comment utiliser notre composant PokemonStat dans notre application:

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

Le rendu est assez bon, mais on va faire mieux en modifiant la couleur et la taille de la barre en fonction de la valeur de la statistique affichée.

Modification de la taille de la barre

Première étape, la plus simple, la modification de la taille de la barre. Celle-ci est déterminée par les primitives "Rect" de PokemonStat qui sont pour l'instant définies à 100%. La largeur de la barre doit donc être proportionnelle à la valeur passée à la propriété "statValue". Celle-ci est comprise entre 15 et 130 pour les meilleurs Pokémons. Pour faire simple, on va faire un Binding (liaison dynamique) entre la propriété "width" des Rect et la valeur de "statValue" multipliée par 1.5:

...
  <s:Group width="100%" height="70">
    <s:Rect width="{statValue * 1.5}" height="100%">
      <s:fill>
        <s:SolidColor color="{_colorValue}" />
      </s:fill>
      <s:stroke>
        <s:SolidColorStroke color="0x3E3E3E" weight="2" />
      </s:stroke>
    </s:Rect>
    <s:Rect width="{statValue * 1.5}" height="100%">
...

Le coefficient 1.5 est totalement arbitraire. Ce n'est pas vraiment adapté si vous avez un écran de grande taille (une tablette par exemple) mais on y reviendra plus tard. Voici le rendu à ce niveau:

Modification de la couleur

Pour modifier la couleur, on va utiliser des paliers de couleurs. Si le couleur se situe dans un certain intervalle, une couleur arbitraire lui sera attribuée (du rouge au vert). Ici, on ne va pas faire de Binding mais on va utiliser une autre technique. En effet, on a besoin de déterminer la couleur que lorsque l'on affecte une valeur à la propriété "statValue". Mais on n'appelle jamais une fonction pour affecter cette valeur, tout se fait par Binding.

Pour pouvoir intercepter cette affectation, on va créer un getter et un setter sur statValue. Ces méthodes vont permettre de rendre notre propriété "statValue" private. Toute affectation ou récupération de valeur se fera par le setter et le getter respectivement.

Pour l'instant, on va laisser Flash Builder le soin de générer ces getters / setters. Effectuez un clic droit sur la variable "statValue" > Source > Generate Getter/Setter:

Une fenêtre va s'ouvrir permettant de configurer cette génération. Par choix personnel, je choisis plutôt "After variable declaration" comme "Insert code". Pour le reste, vous pouvez laisser par défaut. Voici ce que FB va vous générer:

...
      private var _statValue:int = 0;

      [Bindable]
      public function get statValue():int
      {
        return _statValue;
      }

      public function set statValue(value:int):void
      {
        _statValue = value;
      }
...

Ainsi, dès que l'on va affecter une valeur à statValue depuis l'extérieur du composant on va passer dans le setter. Vous pouvez vérifier cela en passant en debug avec un point d'arrêt.

Ajoutons donc notre méthode de calcul:

  public function set statValue(value:int):void
  {
	_statValue = value;
	//calcul de la couleur
	_colorValue = getColorFromValueHigh(value);
  }

Au passage, ajoutez une variable de type "int" nommée _colorValue, Bindable dans votre code:

...
  [Bindable]
  public var title:String = null;
  [Bindable]
  private var _colorValue:int = 0;
  private var _statValue:int = 0;
...

Voici le corps de la méthode "getColorFromValueHigh" à ajouter:

  public function getColorFromValueHigh(value:int):int {
	var colorValue:int = 0;
	if (value <= 25) {
	  colorValue = 0xC33C64;
	} else if (value <= 35) {
	  colorValue = 0xC33C64;
	} else if (value <= 45) {
	  colorValue = 0xA75864;
	} else if (value <= 55) {
	  colorValue = 0x9F6064;
	} else if (value <= 65) {
	  colorValue = 0x7D8264;
	} else if (value <= 85) {
	  colorValue = 0x5FA064;
	} else if (value <= 105) {
	  colorValue = 0x32CD64;
	} else {
	  colorValue = 0x33FF33;
	}
	return colorValue;
  }

J'ai nommé cette méthode "fromHighValue" car s'il on veut être pointilleux, toutes les valeurs n'ont pas comme maximum 130. Les paliers pourraient donc être modifiés pour chaque type de plafond.

Au lieu de notre remplissage rouge, modifions donc la propriété "color" de notre SolidColor:

<s:SolidColor color="{_colorValue}" />

Testez votre application:

Notre application commence à avoir une certaine identité graphique. Notre composant est maintenant terminé, on va continuer à améliorer notre PokemonDetailsView pour afficher bien plus que les 6 statistiques.

Télécharger les sources

Vous pouvez télécharger le projet au format FXP tel qu'il est à la fin de cette partie:

Télécharger le projet au format FXP