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

7juil/111

AIR Mobile – Application Pokémon (25) – Conserver la position du scroll vertical d'une List

Dans le tutorial précédent, on a vu comment, grâce à la persistance, on a pu conserver notre liste de Pokémon et éviter de faire une requête SQL. Cela permettait notamment d'éviter que la transition "rame" quand on revient sur la vue liste. D'autant plus agréable pour l'utilisateur:

AIR Mobile – Application Pokémon (24) – Utiliser la persistance pour conserver des données

Si vous essayez l'application, vous allez rapidement voir un comportement un peu lourd. Sur la première vue, vous avez une grande liste (500+ items). Vous faîtes défiler la liste, cliquez sur un pokémon puis vous faîtes back pour revenir sur la liste. Celle-ci va se ré-initialiser et mais vous aurez perdu le défilement. Vu la taille actuelle de la liste, cela peut-être assez lourd à utiliser.

Sauvegarde de la position du défilement

Comme pour le dataProvider, on va conserver la valeur du défilement dans notre objet "PokemonListPersist". Ajoutons donc une propriété à cet objet:

package model {
  import mx.collections.ArrayCollection;

  [RemoteClass]
  public class PokemonListPersist {

    public var dataProvider:ArrayCollection = null;

    public var verticalScrollPosition:Number = 0;

    public function PokemonListPersist() {
    }
  }
}

Cette fois, on ne va pas sauvegarde la valeur à la création de la liste (ça serait un peu bête, non ? ;) ). L'idéal serait de le faire lorsque l'utilisateur quitte la vue.

Si vous avez suivi les tutoriaux Flex de flex-tutorial, vous savez qu'il y a un évènement qui nous prévient ce moment. Celui-ci est propagé par la vue et se nomme "viewDeactivate". Ajoutons un handler que l'on va nommer "onViewDeactivate":
han

Et on récupère notre PokemonListPersist puis on lui affecte notre valeur de scroll vertical:

...
  protected function onViewDeactivate(event:ViewNavigatorEvent):void {
	if (data) {
	  var plp:PokemonListPersist = PokemonListPersist(data);
	  plp.verticalScrollPosition = list.dataGroup.verticalScrollPosition
	}
  }
  ...

Chargement de la position

Maintenant que l'on a notre position sauvegardée, on va la charger, comme on a rechargé notre dataProvider:

...
_dp.filterFunction = filterByName;
list.dataGroup.verticalScrollPosition = plp.verticalScrollPosition;
return;
...

On teste notre application en debug, la valeur conservée dans notre "plp.verticalScrollPosition" est la bonne. Pourtant, notre scroll est toujours en haut.

5juil/110

AIR Mobile – Application Pokémon (23) – Le mécanisme de persistance intégré au SDK Flex (PersistenceManager)

Dans les applications de type ViewNavigatorApplication et TabbedViewNavigatorApplication, un mécanisme de persistance est automatiquement géré . Celui-ci est désactivé par défaut. Ce mécanisme permet à votre application de revenir à son dernier état, lorsqu'elle a été fermée.

Cela peut-être intéressant car sur un smartphone Android par exemple, si votre application est mise en fond, le système peut décider à tout moment de "killer" votre application pour récupérer de la RAM. Vous ne maîtrisez pas ce système, ni son timing.

Comment ça marche?

Cette persistance enregistre en fait la navigation que l'utilisateur a fait dans les vues (son chemin vers la vue courante à vrai dire). Il va aussi conserver la donnée associée à la vue qu'il va relancer, c'est-à-dire ce qu'il y avait dans la propriété "data" de la View.

Pour conserver ces données, Flex utilise en interne la classe "PesistenceManager" qui est une implémentation de IPesistenceManager. De base, la classe "PersistenceManager" conserve ces données de persistance dans un Shared Object. Si vous avez envie (mais il n'y a pas de vraie raison de le faire), vous pouvez remplacer ce PersistanceManager par votre implémentation de IPersistenceManager, qui pourrait écrire dans un File ou dans une BDD SQLite par exemple. Enfin bref.

Vous pouvez si vous le voulez conserver n'importe quelle donnée grâce au PersistenceManager, c'est juste un système de clé / valeur qui sera conservé sur le téléphone. Petit exemple:

var p:PersistanceManager = new PersistenceManager(); /* this is a singleton */
p.setProperty("key", 1232131.123);
...
var p:PersistanceManager = new PersistenceManager(); /* this is a singleton */
var key:Number = p.getProperty("key") as Number;

Flex conserve toutes mes instances de View ?

De base, on pourrait penser que le système conserve toutes vos instances de View (toutes vos vues) dans un Shared Object et les ressort quand elle en a besoin. En fait, non, pour 2 raisons principalement:

  • Conserver une instance serait bien trop lourd pour un smartphone
  • Il faudrait sérialiser toute la vue, ce qui est difficile, surtout quand on a des classes perso qu'il faut "déclarer" comme serializable

Les devs du SDK ont été plus malins que cela et au lieu de conserver les instances, ils conservent les représentations "String" des classes. Ce que Flex conserve automatiquement, est la serialization de la classe NavigationStack.

La classe NavigationStack contient le "parcours" de l"utilisateur entre les vues. Celui-ci est représenté sous la forme d'une pile d'objets ViewDescriptor qui contiennent:

  • viewClass:Class
  • data:Object
  • context:Object
  • instance:View

Cette NavigationStack est aussi utilisée lorsque vous réalisez un popView par exemple. Mais je vous ai dit que l'on ne conservait pas la View et pourtant je viens de lister "instance:View"?

En fait, cette variable ne va pas être sérialisée mais c'est un peu plus technique, sautez cette partie si vous n'avez pas besoin de savoir comment cela fonctionne :) .

4juin/110

Airgile, une belle application de gestion de projet réalisée en Flex 4.5

Une application de gestion de projet est souvent le bon exemple quand on présente un framework applicatif. Ce n'est certes pas très funky car cela consiste en beaucoup de tableaux, formulaires et récapitulatifs mais parfois on tombe sur de bonne surprises.

La surprise du jour vient du site airgile.com qui est un système de gestion de projets "Agile" en ligne:

airgile.com

Un petit screenshot de la home pour commencer:

scr

Une fois que vous avez passé l'étape de l'inscription, vous vous retrouverez dans une application Flex qui est à mon goût très réussi d'un point de vue esthétique. Tout est propre, de légers dégradés, des backgrounds texturés/inversés, des transitions agréables, le tout est très réussi.

Voici quelques screenshots pour vous donner une idée (cliquez pour agrandir):

1-dashboardEN2-listEN3-newEN4-detailEN5-commentsEN6-accountEN

Comme vous pouvez le voir de manière statique, l'interface est soignée, vraiment très clean. Si vous avez le temps de vous inscrire et de tester en live, vous verrez que c'est agréable et intuitif, on a pas l'impression d'être noyé sous les formulaires.

L'interface a été créée avec les composants Spark de Flex 4.5 et notamment la DataGrid qui fait son grand retour.

Allez donc faire un tour sur airgile.com, cela peut vous donner des idées :)

3juin/110

AIR Mobile – Reproduire l'effet "Pull down to refresh" sur une liste Flex

J'aime bien les "challenges". Ça me fait parfois passer une demi-journée sur un commentaire farfelu posté sur flex-tutorial mais quand j'y arrive, je suis fier comme un gardon. Cette fois, ce n'était pas un commentaire mais un article de notre ami Michaël Chaize paru sur son blog riagora:

Pull Down To Refresh sur riagora.com

Le pull down to refresh, c'est le système que l'on a sur les applications type Twitter ou Facebook sur lesquelles vous avez un flux d'informations continues. Si vous "tirez" la liste vers le bas, on va vous indiquer que si vous "tirez" encore, cela va déclencher un refresh du flux. Cela permet de remplacer le classique bouton "refresh" de manière élégante.

Voici le rendu sur une musique de Nine Inch Nails:

Vous pouvez trouver les sources de cette application sur le blog de Michaël au format FXP à importer dans Flash Builder.

Il est pas bien cet exemple?

L'exemple est cool mais quand on le teste et que l'on regarde le code de plus près, il y a quelques détails qui me chagrinent:

  • Lorsque l'on fait plusieurs pull successifs (y compris quand on est en état chargement), le rendu devient assez anarchique
  • Le comportement est basé sur des évènements souris écoutés en permanence, pas terrible pour les perfs
  • Il y a une "feinte du loup blanc" dans l'itemRenderer des tweets, dans lequel on rajoute du contenu à la volée pour indiquer le chargement
  • Un élément de donnée est ajouté en tête de liste qui sera ensuite rendu de manière spécifique par l'itemRenderer
  • A cause de cette feinte, Michaël a été obligé de supprimer la virtualisation des renderers, ceux-ci n'étaient donc pas réutilisés (pas terrible pour les performances encore une fois).

Voilà, cela ne parait pas être grand chose mais cela peut vous mettre dedans au moment de l'intégration dans votre application, surtout l'ajout dans la data et dans l'itemRenderer. Donc j'ai pris mon Flash Builder et en 2 heures, j'ai remanié cet exemple pour résoudre ces problèmes.

Je vais pas faire comme si je l'avais fait en claquant des doigts, l'étape la plus longue ayant été d'aller chercher quels composants propageaient quels évènements et de chercher ceux qui étaient les plus adéquats à mon utilisation. Une petite chasse dans les classes de Flex toujours appréciable :) .

Ma version du pull down to refresh

Ici, on ne va pas ajouter d'élément dans la donnée, ni utiliser un itemRenderer spécial. On laisse la liste tranquille et on va tricoter autour. Pour être plus cohérent avec Flex 4 et pour améliorer la lisibilité du code, j'ai utilisé les States.

29mai/110

TTFX – Toutes les sessions des "Lightning Talks" du 24 Mars 2011 en ligne

Il y a déjà 2 mois, se tenait la dernière rencontre des TTFX, le Flex User Group parisien. Ce fut pour eux l'occasion de tester les "Lightning Talks" (concept venant de Python / Java apparemment), ces sessions de 10 minutes sur un thème au choix.

Dans le tas, il y aura forcement une présentation qui peut vous intéresser, n'hésitez pas à jeter un oeil sur le site ;) .

ttfx

On retrouve donc un large panel de sujets abordés:

  • Mise en place d'un site full flex multi-langues
  • Génération de questionnaires dynamiques en Flex
  • Mate is your mate
  • Présentation d'un portail Flex sur SAP
  • Construire une application de diagramming en 10 minutes avec Kalileo

Vous pouvez retrouver toutes ces sessions en ligne et en vidéo à l'adresse suivante:

http://www.baao.com/light/