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

AIR Mobile – Application Pokémon (9) – Affichage des informations de base dans la vue détail

Dans le dernier tutorial, on a vu comment passer de la première vue (liste) à la deuxième vue (détail). Cette deuxième vue nommée PokemonDetailsView.mxml est pour l'instant vide mais cette vue va être informé du pokémon sélectionné dans la vue liste, on peut déjà afficher certaines informations relatives à ce Pokemon.

Par la suite, on affichera plus d'informations sur le Pokémon (évolutions, stats, …) basées sur des requêtes SQL supplémentaires que l'on va faire sur la base SQLite.

Récupération de l'objet Pokémon passé depuis la liste

La première étape consiste à récupérer l'objet Pokemon que l'on a passé à la méthode pushView dans la partie précédente du tutorial. Dans le processus classique de pushView, la vue est instanciée puis on lui passe la donnée passée dans pushView dans sa propriété nommée "data". Dans la vue PokemonDetailsView, lorsque l'on ira chercher la propriété "data", on va récupérer notre objet Pokemon.

On pourrait le faire sur l'évènement "creationComplete" ou "viewActivate" de la vue mais on va le faire dès que la propriété "data" est remplie par Flex. Pour cela, on va surcharger le setter de la propriété "data" comme ceci (ajoutez un tag Script avant):

<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark" title="PokemonDetailsView">
  <fx:Script>
    <![CDATA[
      override public function set data(value:Object):void{

      }
    ]]>
  </fx:Script>
</s:View>

Avec ce code, on a "saboté" le setter de data. En effet, si on laisse le code comme cela, on a coupé le comportement de base et on ne fait rien. Il est important de conserver le comportement de base de cette propriété de manière non intrusive, on va donc appeler le "super" de cette propriété pour indiquer que l'on veut réaliser le comportement de base:

  override public function set data(value:Object):void{
	super.data = value;
  }

Voilà, pour l'instant, on a absolument rien changé, c'était pour vous montrer comment surcharger une méthode. Maintenant, on va récupérer la valeur qui est passée à "data" (notre objet Pokemon) et la stocker dans une variable privée de type Pokemon:

  import model.Pokemon;
  private var _p:Pokemon = null;
  override public function set data(value:Object):void{
	super.data = value;
	_p = Pokemon(value);
  }

Modification du titre de la vue

Le titre de la vue de base est donné par la propriété "title" de la vue PokemonDetailsView.mxml. Supprimez cette valeur par défaut, à la place, on va afficher le nom de notre pokémon et son identifiant:

_p = Pokemon(value);
title = _p.nom + " #" + _p.id;

Lancez l'application, sélectionnez un pokémon et vous aurez le rendu suivant:

Affichage de l'image du Pokémon

Dans la 2ème partie du tutorial, vous avez du télécharger une archive contenant toutes les images de pokémons. Décompressez cette archive et placez la dans les sources de votre projet. Les images devraient se situer dans un dossier nommé "images" directement dans src:

Visualisation de la base de données SQLite

Pour l'instant, vous avez travaillé avec la base de données SQLite sans savoir sa structure ni la donnée qu'elle contient. Seulement, pour la suite, vous devrez allez voir quelles sont les données à récupérer et leur format.

Pour cela, il vous faut un outil permettant d'ouvrir la base et de l'administrer. Il en existe plusieurs, le plus simple d'utilisation étant peut-être SQLite Sorcerer que vous pouvez télécharger ici (cliquer sur Installer en dessous du chaudron):

http://afoucal.free.fr/index.php/applications/sqlite-sorcerer/#Getit

Cet outil est une application AIR. Une fois installée et lancée, prenez votre base de données (pokemon.sqlite) et glissez là dans le chaudron pour l'ouvrir. Cliquez ensuite sur la table "Pokemon" pour en afficher les champs:

Ce qui va vous intéresser, c'est la donnée, cliquez donc sur "Data" en haut à droite pour afficher le données de la table. Vous remarquerez le formattage du champ "id":

Les identifiants en BDD sont sous la forme 1, 2, 3, … alors que nos images ont des noms type 001.png, 002.png, 003.png. Il va falloir y penser quand on va assigner la source de notre image.

Ajout du composant Image

Dans votre vue, ajoutez donc un composant s:Image et affectez lui :

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

Ajout d'une propriété "imagePath" sur Pokemon

Comme on l'a vu dans la base de donnée, le nom de l'image est différent par rapport à l'id conservé en base. On va devoir donner comme source à l'image, une valeur du type "/images/001.png" alors que l'on a "1" en BDD.

Il y a donc un petit traitement à effectuer et de nombreuses manières de le faire. Ma méthode préférée est d'ajouter un getter sur l'objet Pokemon qui va simuler une propriété et renvoyer une valeur de notre choix. Voici la manipulation à effectuer dans l'objet Pokemon.as:

package model{
  public class Pokemon{
    public var id:String = null;
    public var nom:String = null;
    public var type:String = null;
    public var evolue:int = -1;

    public function Pokemon(){
    }

    public function get imagePath():String {
      return "/images/" + longId + ".png";
    }

    public function get longId():String {
      if (!id) {
        return "";
      }
      if (id.length == 1) {
        return "00" + id;
      } else if (id.length == 2) {
        return "0" + id;
      }
      return id;
    }
  }
}

Après, chacun sa technique, il y a moyen de faire bien plus court mais j'aime l'élégance de cette solution. Ainsi, sur un objet de type Pokemon, si vous accéder à la propriété "imagePath", on va vous renvoyer le chemin complet vers l'image, par exemple "/images/001.png".

Assigner la source de l'image

Maintenant que l'on a la source de l'image, il suffit de l'assigner au composant Image. On ne va pas le faire dans la méthode "set data" car à ce moment, le composant Image n'est pas encore initialisé. On va plutôt s'inscrire à l'évènement "creationComplete" de la vue et le faire à ce moment-là.

Voici le code complet de la vue à la fin de cette partie du tutorial:

<?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)">
  <fx:Script>
    <![CDATA[
      import model.Pokemon;

      import mx.events.FlexEvent;
      private var _p:Pokemon = null;
      override public function set data(value:Object):void{
        super.data = value;
        _p = Pokemon(value);
        title = _p.nom + " #" + _p.id;
      }

      protected function onCComplete(event:FlexEvent):void{
        img.source = _p.imagePath;
      }

    ]]>
  </fx:Script>
  <s:Image id="img" />
</s:View>

Tester votre application et voilà le résultat obtenu:

Mission accomplie, notre image est bien là. Pour l'instant, pas de mise en page ni d'alignement, on va voir cela par 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