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.

On va justement utiliser notre composant dans "PokemonDetailsView.mxml". A l'endroit où vous aviez votre VGroup, remplacez simplement tout le code du VGroup par :

  <s:Image id="img" />
  <views:PokemonStat />
</s:View>

Encore une fois, laissez vous guider par l'auto-complétion de Flash Builder. Celui-ci peut vous rendre bien des services, notamment dans ce cas, il va importer le namespace qui va bien dans la balise principale de PokemonDetailsView.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        creationComplete="onCComplete(event)" xmlns:views="views.*">

Sauvegardez et vous obtiendrez l'erreur que vous attendiez presque dans la vue Problems:

Au moins, vous savez maintenant que votre composant est utilisé .

Passage de données au composant

Notre composant a donc besoin d'une donnée. Peu importe quelle donnée en fait, ce composant va "être victime" et afficher simplement la donnée qu'on lui donne.

On va commencer par créer une variable dans notre composant, contenant la valeur à afficher. Pour cela, ajouter un tag Script et ajoutez le code suivant:

   ....
   xmlns:s="library://ns.adobe.com/flex/spark" width="100%">
  <fx:Script>
    <![CDATA[
      [Bindable]
      public var statValue:int = 0;
    ]]>
  </fx:Script>
  <s:Label text="Attaque" color="white" />
  ...

Remplacez ensuite le Binding sur le label (text="{_p.atk}") par un Binding (liaison dynamique) sur la propriété statValue du composant:

    <s:Label fontSize="60" fontWeight="bold" color="0xEEEEEE" text="{statValue}" left="5"
             verticalCenter="0">

Votre code compile à nouveau. Si vous lancez le projet, vous remarquerez que la statistique reste à 0. Cela est normal puisque la propriété statValue n'est pas encore liée à une compétence de Pokémon. Dans la vue PokemonDetailsView, rajoutez donc une liaison sur la propriété "atk" de "_p" comme vous le faisiez auparavant:

<views:PokemonStat statValue="{_p.atk}" />

Lancez votre application et vous obtiendrez le résultat escompté:

Vous pouvez maintenant remarquer que dans notre composant, subsiste encore une donnée en dur, le label "Attaque". De la même manière, le composant va subir la donnée que vous allez lui passer et l'afficher de manière "bête".

Ajoutez donc une propriété "title" de type String dans votre composant:

...
	<![CDATA[
      [Bindable]
      public var title:String = null;
      [Bindable]
      public var statValue:int = 0;
...

De la même manière que précédemment, effectuez un Binding sur cette variable pour remplacer "Attaque":

<s:Label text="{title}" color="white" />

Et donnez un title à votre composant dans la vue Details:

<views:PokemonStat statValue="{_p.atk}" title="Attaque"/>

Testez votre application, vous devriez obtenir exactement le même résultat.

Tout cela pour le même résultat?

Pour l'instant, vous obtenez exactement le même résultat qu'au début du tutorial. Ne pensez pas que vous stagnez, la création de composant est un processus puissant dans Flex qui va vous permettre de gagner beaucoup de temps.

Dans la prochaine partie du tutorial, on va utiliser ce composant à 6 reprises. Vous allez voir que ces petits efforts vont faciliter la suite

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