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

AIR Mobile – Application Pokémon (8) – Navigation vers une autre vue par la méthode pushView

Le fonctionnel de notre première vue est maintenant terminé, on peut passer à la 2ème vue. Dans cette partie du tutorial, on va voir comment à la sélection d'un élément de la liste, on va pouvoir passer à la vue suivante en lui transmettant la donnée sélectionnée.

Pour une introduction à ces techniques, je vous conseille de lire ce tutorial:

AIR Mobile – Navigation entre les View : pushView, popView, …

Récupération de l'élément de liste cliqué

Première étape, on va capter l'interaction utilisateur et on va récupéré le pokémon cliqué. Pour cela, on va s'abonner à un évènement propagé par la liste qui indique un changement de sélection. Celui-ci est nommé "change":

protected function onChange(event:IndexChangeEvent):void{

  }
]]>
</fx:Script>
...
<s:List width="100%" height="100%" dataProvider="{_dp}" labelField="nom" change="onChange(event)">

Pour récupéré l'élément sélectionné, on va récupérer la propriété "selectedItem" de notre liste. Pour l'instant, elle ne dispose pas de propriété "id", notre liste ne peut donc pas être référencée dans notre code ActionScript. Ajoutez-lui donc un id="list".

Notre élément sélectionné est de type Pokemon, nous en sommes sûr. On va donc récupérer la propriété et lui faire une conversion de type avec l'opérateur "as". Si la conversion de type échoue ou si aucun élément n'est sélectionné, on quitte la fonction.

Notez que dans notre cas, il est impossible que la propriété selectedItem soit "null" ou que l'objet ne soit pas de type Pokemon, c'est simplement pour vous montrer le genre de vérification qu'il faut en principe faire sur des applications plus complexes.

Voici le code à rajouter dans la méthode onChange:

protected function onListChange(event:IndexChangeEvent):void {
	var selectedItem:Pokemon = list.selectedItem as Pokemon;
	if (!selectedItem) {
	  return;
	}
  }

Création de la seconde vue

Avant de pouvoir naviguer vers la seconde vue, il faut la créer. Rendez-vous dans la partie "Package Explorer" de Flash Builder puis clic droit > New > MXML Component:

Donnez lui comme nom "PokemonDetailsView". Dans le cadre d'un projet mobile, Flash Builder a automatiquement sélectionné que vous vouliez hériter de la classe View. Gardez donc ce paramètre par défaut et cliquez sur Finish pour arriver sur le composant PokemonDetailsView.mxml.

Navigation vers la vue PokemonDetailsView

Retournez donc dans PokemonInfosHomeView.mxml et dans la méthode onChange, ajoutez l'instruction suivante:

navigator.pushView(PokemonDetailsView, selectedItem);

Ici, on indique que l'on veut naviguer vers la vue PokemonDetailsView, en lui passant comme donnée, notre variable selectedItem qui contient le pokémon sélectionné. Voilà, il n'en faut pas plus pour effectuer la navigation. Si vous testez votre projet, vous verrez que l'on passe bien sur une nouvelle vue qui a comme titre "PokemonDetailsView".

Pour l'instant, cette vue est vide, on va voir comment afficher les détails de notre pokémon dans la partie suivante.

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