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

30jan/090

Flex Library – Importer des contacts GMail dans une application Flex par HTTPService

Voici une librairie qui peut se révéler très utile. Elle permet de récupérer en ActionScript 3, l'ensemble de ses contacts GMail. On peut penser à de nombreuses utilisations. Par exemple, on veut laisser l'utilisateur inviter des amis sur une application de réseau social. Pour cela, il nous faut leur adresse email. Plutôt que de lui demander de les taper une par une, on récupère ses contacts GMail puis on lui demande simplement de sélectionner lesquels il veut inviter.

Cette librairie développée par Sujit Reddy utilise un HTTPService pour communiquer avec l'API Google. Même si elle n'est pas encore très complète, cette librairie permet au moins de récupérer des contacts GMail et peut être modifiée selon votre besoin puisque les sources sont disponibles.

Notez qu'il y a un bug sur la récupération de certains contacts GMail que j'explique dans ce commentaire sur son blog.

Télécharger la librairie d'import de contacts GMail.

Voir la page du blog de l'auteur.

30jan/098

Flex Library – Charger des icon pour composant Flex à l'exécution avec IconUtility (non Embed)

De nombreux composants Flex ont une propriété "icon" qui permet justement d'assigner un icon à un composant Flex. Par exemple, les composants Button et Accordion ont cette propriété icon qui leur permet d'afficher une image à gauche (format png, jpg, …). La plupart du temps, les icônes sont embedded (embarqués) dans l'application pour que l'interface utilisateur soit complète et que l'utilisateur n'aie pas à attendre pour voir apparaître les icônes. Le poids souvent léger des icônes fait qu'il est souvent possible de mettre ces éléments graphiques icônes dans le SWF sans que sa taille n'augmente trop.

Pour ajouter un icône à un bouton par exemple, on utilise le code suivant:

<mx:Button icon="@Embed('/assets/icons/icon.png')"/>

L'icône qui se trouve dans le répertoire assets/icons/ de notre projet Flex sera compilé avec le SWF, aucun problème donc.

Mais imaginons que vous avez besoin d'un icône en particulier à un moment dans votre application, suivant une action utilisateur par exemple. Vous pouvez ajouter cet icône à la compilation en Embed dans une variable de type Class et l'assigner au bon moment à votre composant en faisant:

myComp.setStyle("icon", iconClass);

Mais si vous voulez charger un icône qui se trouve à une certaine URL à l'exécution, vous ne pourrez pas l'inclure à la compilation avec un Embed. Alors comment faire pour charger dynamiquement un icône dans un composant Flex.

30jan/096

Flex ActionScript – Intercepter l'Erreur #2044 (IOErrorEvent) lancée par Loader [Résolu]

Pour charger des fichiers (XML le plus souvent), j'utilise tout le temps un URLLoader associé à une URLRequest qui fait à ce traitement. J'écoute l'évènement SecurityErrorEvent.SECURITY_ERROR au cas où mon fichier ne pourrait être chargé, si un crossdomain.xml n'est pas présent par exemple. J'écoute aussi l'évènement de type IOErrorEvent.IO_ERROR qui correspond à une erreur IO (Input/Output). Cette erreur se produit le plus souvent quand le fichier n'existe pas ou que l'on a pas les droits d'accès au fichier. Enfin, j'utilise un simple try/catch pour capturer les autres erreurs.

Voici un exemple de code pour le chargement de XML en AS3 (réduit):

Actionscript:
  1. // ActionScript file
  2. import flash.net.URLLoader;
  3. import flash.net.URLRequest;
  4.  
  5. private var request:URLRequest = new URLRequest("tst.xml");
  6.  
  7. private var loader:URLLoader = new URLLoader();
  8.  
  9. public function load():void{
  10.     loader.addEventListener(Event.COMPLETE, xmlLoaded);
  11.     loader.addEventListener(SecurityErrorEvent.SECURITY_ERROR, securityErrorHandler);
  12.     loader.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
  13.     try{
  14.         loader.load(request);
  15.     } catch (error:Error){
  16.         throw new Error("Erreur chargement XML: "+ error.toString());
  17.     }
  18. }
  19. // callback une fois le chargement terminé
  20. private function xmlLoaded(e:Event):void{
  21.     // parser le XML
  22.     var xml:XML = XML(loader.data);
  23.     trace ("xmlLoaded: "+xml);
  24. }
  25. // traiter les erreurs de sécurité
  26. private function securityErrorHandler(e:SecurityErrorEvent):void{
  27.     throw new Error("Erreur chargement XML: "+ e.toString());
  28. }
  29. // traiter les erreurs IO
  30. private function ioErrorHandler(e:IOErrorEvent):void{
  31.     throw new Error("Erreur chargement XML: "+ e.toString());
  32. }

26jan/098

Librairies Flex

Liste des librairies AS3 / Flex mise à jour

Il existe de très nombreuses librairies que vous pouvez utiliser avec Flex ou AIR. Certaines sont des libraires purement AS3, vous permettant par exemple de communiquer avec des API (Amazon, FlickR, Facebook...) alors que d'autres sont des librairies de composants graphiques que vous pouvez utiliser directement en MXML. La plupart de ces librairies sont Open Source et gratuites, libre à vous de les utiliser et même de participer à leur développement!

Certaines sont au format SWC, pour les intégrer dans un projet Flex, suivez ce petit tutorial sur les SWC avec FB3.

Il y a un petit picto devant toutes les librairies que je trouve remarquables (pour les avoir utilisées). Pour proposer une librairie AS3/Flex, n'hésitez pas à m'envoyer un mail à fnicollet@gmail.com. Donnez simplement l'url de la lib flex, et un petit commentaire sur ses fonctionnalités :) .

Accès à des API

  • Cartographie
    • star Yahoo! Maps API: Un des meilleurs services de cartographie en AS3
    • star Modest Maps: Permet d'afficher des cartes type tuile comme celles de Yahoo! ou Microsoft. J'ai beaucoup travaillé avec cette API, elle est vraiment excellente!
    • Google Maps API: Accès aux APIs Google
    • MapQuest API : Permet de récupérer des cartes type Google Maps (mapquest.com)
    • MappR API (as3mapprlib): Encore une API cartographique
  • Yahoo! APIs (astra): Accès aux APIs Yahoo! Answers, Yahoo! Weather, Yahoo! Search et Yahoo! Upcoming
  • eBay API (as3ebaylib): Librairie AS3 permettant de communiquer avec les services Ebay
  • Amazon API (as3awss3lib): Permet de communiquer avec les services Amazon S3
  • Twitter API: Communiquer avec l'API Rest de Twitter (messages instantanés sociaux)
  • FlickR API (as3flickrlib): Communiquer avec l'énorme base de données d'images de Flickr.
  • Digg API (diggflashdevkit): Récupérer les informations sur site digg.com
  • Facebook API: Communiquer avec l'API REST de Facebook en AS3
  • Ribbit API: Permet de lancer des appels téléphoniques, enregistrer les communications etc.
  • FedEx API (as3fedexlib)
  • Last.fm API (lastfm-as3)
  • Youtube API (as3-youtube-data-api): Rechercher des vidéos Youtube, ou accès aux streams
  • Blogger API (as3bloggerlib): Communiquer avec Blogger Data
26jan/090

Adobe Air

adobe air

Adobe Air en quelques mots ...

Adobe Air (Adobe Integrated Runtime) est une machine virtuelle multi-plateforme qui s'exécute sur le système d'exploitation et pas à l'intérieur d'un navigateur comme le fait Flash Player. On parle alors de "Rich Desktop Application" ou RDA. Ces applications riches peuvent être développées en HTML/Ajax (JS), en Flash (ActionScript) ou en Flex pour ensuite être déployées comme une application bureautique. Le plug-in Adobe Air est aujourd'hui disponible pour les systèmes d'exploitation Windows, Mac et Linux.

Télécharger la dernière version du Runtime Air

Pourquoi Adobe Air ?

Durant les dernières années, la mode a été de prendre des applications bureautiques pour les inclure dans des navigateurs internet. Ce choix a été motivé par plusieurs facteurs :

  • Croissance d’Internet
  • Développement relativement aisé d’applications Web
  • Possibilité de viser plusieurs systèmes d’exploitation à travers les navigateurs

Les premières applications ont été construites principalement grâce au couple HTML / JavaScript qui se basait principalement sur les changements et rafraichissements de la page.
Sont ensuite arrivées les applications (« type Ajax ») permettant d’effectuer plusieurs opérations sans recharger la page afin d’améliorer l’expérience utilisateur. Ce type d’application est appelé Application Internet Riche (RIA : Rich Internet Application). La croissance du nombre de ces applications Web autour de services communautaires et d’accès par API a crée ce que certains appellent le Web 2.0.
Malgré cela, les applications Web intégrées au navigateur souffrent des plusieurs problèmes :

  • Les applications déployées sur un navigateur ont leur propre interface utilisateur qui peut rentrer en conflit avec l’interface du navigateur lui-même. Les boutons précédent/suivant peuvent provoquer une confusion par exemple
  • A cause des restrictions d’accès à l’ordinateur du client, les applications ouvertes dans un navigateur n’apportent pas tous les types d’interaction qu’une personne peut attendre d’une application (glisser-déposer de fichiers par exemple)
  • Les différences entre les principaux navigateurs du marché rendent le développement d’applications Web de plus en plus long et laborieux (vous avez déjà vu un site identique sur FF et IE ? ^^)

La mode commence maintenant à s’inverser, et l’on cherche à proposer à l’utilisateur des applications bureautiques nouvelle génération s’appuyant sur les ressources disponibles en ligne. Ces applications sont appelées RDA (RDA : Rich Desktop Application) et nécessitent un programme supplémentaire (« plug-in ») pour fonctionner. Il y a aujourd’hui deux principaux programmes permettant d’utiliser ces applications RDA : Adobe Air et Microsoft SilverLight.

Remplis sous: Adobe Air Lire la suite