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

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

Dans le dernier tutorial, on a vu comment afficher une barre de statistiques dans notre application:

AIR Mobile – Application Pokémon (10) – Affichage des statistiques / Création de primitives

On a fait cela directement dans la vue pour le moment, pour s'entraîner. Sauf que par la suite, on va afficher plusieurs statistiques (attaque, défense, …). Comme on a pas envie de recopier ce code N fois, cela nous donne une bonne occasion pour créer un composant.

Vous avez déjà utilisé certains des composants disponibles dans le framework Flex (Image, View, Label, …). Ici, vous allez créer votre propre composant que vous allez ré-utiliser dans votre application. Cette pratique vous permet de factoriser le code afin de faciliter sa maintenance. Un peu comme lorsque l'on place un code répété plusieurs fois dans une fonction.

Création du composant

Rendez-vous dans la vue Package Explorer et sur le package "views", faites un click droit > New > MXML Component:

Donnez lui le nom "PokemonStat". De base, pour un projet mobile, Flex remplit par défaut la valeur de "Based on" avec la classe View, ce qui vous permet de créer rapidement de nouvelles vues. Dans notre cas, on ne veut pas réaliser une nouvelle vue mais un composant que l'on va incorporer à notre View. Cliquez sur "Browse…". Une nouvelle fenêtre va s'ouvrir vous permettant de choisir la classe de base de ce composant. Dans notre cas, on va se baser sur VGroup. En effet, rappelez-vous de l'étape précédente, tous nos composants étaient encapsulés dans un conteneur de type VGroup.

Tapez "vg" pour que Flex vous suggère VGroup dans la liste et choisissez-là. Supprimez les valeurs de width / height par défaut:

Un nouveau fichier avec un squelette de code vient d'être créé pour vous:

<?xml version="1.0" encoding="utf-8"?>
<s:VGroup xmlns:fx="http://ns.adobe.com/mxml/2009"
          xmlns:s="library://ns.adobe.com/flex/spark">
  <fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
  </fx:Declarations>
</s:VGroup>

On va maintenant utiliser notre "esquisse" de composant que l'on a créé à l'étape 10 pour créer notre composant. N'oubliez pas le width="100%" à rajouter dans le tag racine:

<?xml version="1.0" encoding="utf-8"?>
<s:VGroup xmlns:fx="http://ns.adobe.com/mxml/2009"
          xmlns:s="library://ns.adobe.com/flex/spark" width="100%">
  <s:Label text="Attaque" color="white" />
  <s:Group width="100%" height="70">
    <s:Rect width="100%" height="100%">
      <s:fill>
        <s:SolidColor color="0xFF0000" />
      </s:fill>
      <s:stroke>
        <s:SolidColorStroke color="0x3E3E3E" weight="2" />
      </s:stroke>
    </s:Rect>
    <s:Rect width="100%" height="100%">
      <s:fill>
        <s:LinearGradient rotation="90">
          <s:GradientEntry color="0x000000" alpha="0" />
          <s:GradientEntry color="0x000000" alpha="0.4" ratio=".66" />
        </s:LinearGradient>
      </s:fill>
    </s:Rect>
    <s:Label fontSize="60" fontWeight="bold" color="0xEEEEEE" text="{_p.atk}" left="5"
             verticalCenter="0">
      <s:filters>
        <s:DropShadowFilter distance="1" angle="-90" color="0" blurX="0" blurY="0" />
      </s:filters>
    </s:Label>
  </s:Group>
</s:VGroup>

Si vous sauvegardez, vous n'obtiendrez aucune erreur. Pourtant, dans ce composant, nous référençons {_p.atk} qui ne correspond à rien dans ce contexte (dans le scope du composant). En fait, aucune erreur n'est générée car le composant n'est pas utilisé dans votre application. Il n'est donc pas compilé et le compilateur ne vous dira rien.