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

19nov/080

Flex DefaultListEffect et DefaultTileListEffect – Appliquer un effet à une List/TileList à chaque modification de son dataProvider

J'ai découvert hier un nouveau composant du framework Flex qui je ne connaissais pas (comme quoi ^^). Attention, il est uniquement disponible à partir de Flex 3, vous ne le trouverez pas dans le SDK Flex 2.

Ce composant permet d'appliquer un effet de votre choix à un composant mx:List ou mx:TileList à chaque changement de son dataProvider. Par exemple, vous pouvez faire disparaitre progressivement un éléments que vous venez de supprimer du dataProvider. Il serait plutôt complexe de le réaliser et vous allez voir qu'avec le mx:DefaultListEffect, cela se fait très simplement.

Les composants List et TileList prennent en entrée un dataProvider, c'est-à-dire, un objet qui contient la donnée à affichée par le composant. Pour assigner cette data, vous assignez une collection, qui est habituellement un objet ArrayCollection ou XMLListCollection, à la propriété dataProvider du composant. Chaque item est ensuite affiché en utilisant un itemRenderer.

Grâce aux Data Effects, il est possible d'appliquer des effets aux itemRenderer des composants List et TileList, quand le dataProvider est modifié. Par exemple,quand un item est supprimé du dataProvider d'une List, l'itemRenderer de cet item peut disparaître et se rétrécir.

Par défaut, les composants List et TileList n'utilisent pas de Data Effect. Pour spécifier un effet à appliquer au composant, il faut utiliser la propriété style itemsChangeEffect. Pour le composant List, utilisez la classe DefaultListEffect pour configurer cet effet. Pour un composant TileList, utilisez la classe DefaultTileListEffect.

16nov/084

Flex FileReference – IOError lors de l'appel à download() [Résolu]

S'il on veut permettre à un utilisateur de télécharger une image située sur un serveur avec Flex, on peut faire appel à navigateToURL() qui va ouvrir l'image dans un navigateur plus il pourra faire clic droit>enregistrer sous. Ce qui n'est pas très pratique, il est généralement plus simple de faire appel à la méthode download() de FileReference. Pour plus d'informations sur le fonctionnement de cette méthode, consultez cet article:

Flex FileReference – Téléchargement de fichiers avec la méthode download()

Dans une de mes applications Flex, je devais télécharger une image située sur un serveur externe. De façon assez intuitive, j'ai donc essayé de faire:

private function downloadFile():void {
	var urlRequest:URLRequest = new URLRequest("http://www.google.fr/intl/fr_fr/images/logo.gif");
	var fileRef:FileReference = new FileReference();
	fileRef.addEventListener(Event.COMPLETE, onComplete);
	fileRef.download(urlRequest);
}

J'ai donc testé avec ce code (et bien etendu la fonction onComplete qui traite l'évènement COMPLETE) mais j'ai obtenu l'erreur suivante:

Error #2044: Unhandled IOErrorEvent:. text=Error #2038: File I/O Error.
14nov/082

Flex / Yahoo Maps API – Votre première application avec la Yahoo! Maps Flex/AS3 API

Dans ce premier tutorial sur les Yahoo! Maps API Flex, je vais montrer la marche à suivre pour pouvoir afficher des cartes interactives dans votre Application Flex. Toutes les sources sont disponibles à la fin de ce tutorial.

L'API Flex Yahoo! Maps

L'API Yahoo! Maps pour flex est un composant qui permet aux développeurs d'ajouter des cartes Yahoo! Maps à leur applications et de les personnaliser.

Cette API permet, entre autres, de:

  • Afficher des cartes Yahoo! (route/satellite/hybrides)
  • Insérer des marqueurs
  • Dessiner des polygones par dessus une carte
  • Géocoder des éléments
  • Faire des recherches sur la carte
13nov/088

Flex/Air – Google Maps API non compatible avec Adobe Air

Attention, la situation a changé depuis l'écriture de cet article, l'API Google Maps est désormais disponible pour les applications AIR. Pour plus d'informations, lisez la doc sur Google Maps avec Adobe AIR.

Dans le cadre d'une application Adobe Air / Flex, je voulais pouvoir afficher la position d'une personne à partir de sa latitude / longitude ainsi que la précision de ces coordonnées (grâce à un cercle). Puisque j'utilise souvent le service Maps de Google, et que j'ai déjà crée des cartes grâce à l'API JavaScript Google Maps, je pensais pouvoir utiliser cette API pour mon appli Air.

Après quelques recherches, je trouve l'API ActionScript pour Google Maps, qui semble correspondre parfaitement à ma requête. Il y a même des exemples pour son utilisation directe dans Flex Builder qui ont l'air de marcher correctement. Tout ce qu'il me manque à ce niveau là, c'est une API Key pour pouvoir utiliser l'application. J'accepte donc les ToS, et rentre une adresse web, malgré le fait que mon application ne sera pas hébergée quelque part puisque mon application Air est bureautique.

Après téléchargement du SWC et intégration dans Flex Builder,  j'importe les classes contenues dans le SWC, et reproduit le code utilisé dans le tutorial Google Maps API pour Flex Builder. Aucune erreur à la compilation, je build et lance mon appli Air et lors de l'appel à ma Google Map, j'obtiens le message d'erreur suivant:

SecurityError: Error #3207: Application-sandbox content cannot access this feature.
	at flash.system::Security$/allowDomain()
	at com.google.maps::ClientBootstrap/allowLibraryDomain()
	at com.google.maps::ClientBootstrap/loadUrl()
	at com.google.maps::ClientBootstrap/internalLoadBootstrap()
	at com.google.maps::ClientBootstrap/executeNextFrameCalls()
	at flash.utils::Timer/_timerDispatch()
	at flash.utils::Timer/tick()

J'ai donc cherché d'où pouvait venir cette erreur, étant donné que tout semblait pouvoir fonctionner.

11nov/080

Flex et Air – Fermer une Window en ActionScript

Pour une application Adobe Air, j'utilise une fenêtre qui s'ouvre en popUp avec une page HTML dedans. Pour cela j'utilise le composant Air <mx:HTML> qui appelle une page de login. Une fois l'utilisateur enregistré (pour la récupération d'un token), je voulais fermer la popUp pour pouvoir retourner à mon application principale.

J'ai donc essaye d'utiliser la fonction close() de Window:

private function HTMLCompleteHandler(event:Event):void{
	close();
}

Solution un peu naïve qui ne fonctionne pas, j'obtiens dans le debugger flash:

TypeError: Error #1009: Cannot access a property or method of a null object reference.

	at flash.html::HTMLLoader/onFocusOut()

Vraisemblablement, en utilisant la méthode close() directement, certains objets tentaient d'être accédés sans être référencés.

La solution est d'utiliser  stage.nativeWindow.close(); pour fermer la fenêtre:

private function HTMLCompleteHandler(event:Event):void{
	stage.nativeWindow.close();
}