Dans les tutoriaux Flex précédents, on a vu comment ouvrir la base de données SQLite et comment lancer notre projet dans l’émulateur:

AIR Mobile – Application Pokémon (3) – Ouverture de la BDD SQLite

AIR Mobile – Application Pokémon (4) – Lancer l’application dans l’émulateur + debugger

On va maintenant travailler sur notre première vue et afficher la liste des pokémons. Pour cela, on va effectuer une requête SQL (SELECT) et afficher le résultat dans un composant List.

Effectuer le traitement au bon moment

Avant d’effectuer notre requête SELECT, il faut savoir à quel moment on va la faire. En effet, si vous avez suivi l’article sur le cycle de vie des View en Flex, vous savez que celle-ci propage des évènements lors de sa création et de sa destruction.

Les évènements qui vont nous intéresser sont:

• creationComplete : Propagé quand tous les composants de la vue (comme notre List) sont instanciés et accessible. La vue n’est pas encore affichée à l’écran mais vous pouvez la manipuler
• viewActivate : Propagé après « creationComplete », une fois que la transition entre les vues est terminée.

Alors lequel utiliser? Et bien cela dépend. En effet, si vous effectuez trop de traitement lors du « creationComplete », la transition de la vue va peut-être saccader. Mais en même temps, si vous faîtes votre traitement sur « viewActivate », il sera presque « trop tard » et si votre traitement est d’afficher / masquer des composants, votre vue va légèrement clignoter. A vous donc de voir et de choisir la meilleure solution, c’est à dire la plus adaptée à votre utilisation.

Pour cette première vue, ce n’est pas très important car en fait, la première vue n’arrive pas avec une transition. Que vous soyez sur « creationComplete » ou sur « viewActivate » ne fera donc que très peu de différence. Mais si on était sur une autre vue, sur laquelle on arrive par une transition, on aurait sûrement mis notre SELECT sur l’évènement « viewActivate » car nous effectuons nos requêtes en mode synchrone. Si nous l’avions ouverte en mode asynchrone, on aurait utilisé « creationComplete » plutôt. Voilà le genre de question qu’il faut se poser, souvent résolues par de rapides tests.

Récupérer la connexion SQL (SQLConnection)

Ouvrez donc le fichier « PokemonInfosHomeView.mxml » qui est notre première vue. Comme vous l’avez fait dans la 3eme partie du tutorial, ajouter un écouteur d’évènement sur « creationComplete » que vous allez appeler « onCComplete ». De la même manière, laissez-vous guider par Flash Builder:

<?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" title="HomeView"
        creationComplete="onCComplete(event)">
  <fx:Script>
    <![CDATA[
      import mx.events.FlexEvent;

      protected function onCComplete(event:FlexEvent):void
      {

      }

    ]]>
  </fx:Script>
  <fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
  </fx:Declarations>
</s:View>

Première chose que l’on va faire dans onCComplete, on va récupérer la connexion SQL que l’on avait ouvert dans la partie 3 du tutorial. Notre connexion est conservée au niveau de l’application. Celle ci peut être accédée depuis n’importe quel endroit grâce à la variable static:

FlexGlobals.topLevelApplication

Pour éviter de récupérer à chaque fois la référence vers notre SQLConnection depuis notre application, on va conserver une référence directement dans notre vue:

import mx.core.FlexGlobals;
  import mx.events.FlexEvent;

  private var _sqlConnection:SQLConnection = null;

  protected function onCComplete(event:FlexEvent):void{
	_sqlConnection = FlexGlobals.topLevelApplication.sqlConnection;
  }

Ajouter le composant List

Pour avoir un affichage visuel de notre liste de pokémons, on va ajouter un composant List. Pour une liste des composants (non exhaustive) des composants du SDK 4.5, je vous conseille de lire cet article:

AIR Mobile – Les composants et le thème Mobile Flex 4.5

Rendez-vous donc entre la fin du tag fx:Declaration et la fin du tag View puis tapez le caractère « < ». Appuyez sur Ctrl+Espace et la liste des composants disponibles va s’afficher. Tapez « List » puis appuyez sur Entrée:

Appuyez sur Espace et la liste des propriétés du composant va s’afficher. Vous pouvez commencer à taper le nom des propriétés comme « width » ou « height » et valider par Entrée. Comme exercice, on va fixer les propriétés « width » et « height » à la valeur « 100% ». Cela signifie que notre liste va prendre toute la place offerte par son conteneur, la vue.

Une fois que vous avez terminé, fermez le tag avec un chevron fermant « > ». Le tag XML </s:List> fermant la balise sera automatiquement ajouté:

<s:List width="100%" height="100%">

  </s:List>

Le composant List et la propriété « dataProvider »

Notre composant List est un composant graphique permettant d’afficher de la donnée. Pour définir quelle donnée doit être affichée dans ce composant, on renseigne la propriété « dataProvider ». Ce « dataProvider » est de type IList. Comme vous pouvez le voir dans la documentation, dans la partie « Implementors », les classes qui implémentent IList sont ArrayList, AsyncListView, ListCollectionView et les classes qui en héritent.

Lire la suite →