Flex – charger des données au format JSON

Introduction

Nous allons voir à travers cet article comment une application RIA va pouvoir charger et afficher des données au format JSON.

Présentation du format JSON

Extrait du site http://www.json.org/jsonfr.html :

JSON (JavaScript Object Notation – Notation Objet issue de JavaScript) est un format léger d’échange de données. Il est facile à lire ou à écrire pour des humains. Il est aisément analysable ou générable par des machines. Il est basé sur un sous-ensemble du langage de programmation JavaScript (JavaScript Programming Language, Standard ECMA-262 3rd Edition – December 1999). JSON est un format texte complètement indépendant de tout langage, mais les conventions qu’il utilise seront familières à tout programmeur habitué aux langages descendant du C, comme par exemple : C lui-même, C++, C#, Java, JavaScript, Perl, Python et bien d’autres. Ces propriétés font de JSON un langage d’échange de données idéal.

Les données au format JSON

Pour notre exemple, nous allons charger les tweets français sur Flex.

Ces données se présenteront sous cette forme :

Les données au format JSON

Flex et le format JSON

Par défaut, le framework Flex ne propose pas de classes permettant de gérer le format JSON. Nous allons donc utiliser une librairie externe : corelib.

Cette librairie a été créé par trois évangélistes Adobe : Mike Chambers, Daniel Dura et Christian Cantrell.

Installer la librairie corelib

• La première étape consiste à récupérer la librairie à l’adresse http://code.google.com/p/as3corelib/downloads/list
• Dézipper le fichier téléchargé
• Copier le fichier as3corelib.swc qui se trouve dans le dossier lib vers le dossier libs de votre projet Flex

Charger les données JSON

Pour effectuer notre requête vers Twitter, nous allons utiliser un objet HTTPService. La requête aura lieu une fois notre application créée.

Cette requête étant asynchrone, nous définirons une fonction de retour pour l’événement ResultEvent.RESULT dans laquelle nous exécuterons le traitement des données.

Le format JSON étant un format texte, nous allons définir la propriété resultFormat de l’objet HTTPService sur la valeur "text ".

Nous utiliserons l’api de recherche de twitter en précisant l’url :  http://search.twitter.com/search.json?lang=fr&q=flex

<fx:declarations>
	<s:httpservice id="httpService"
					   url="http://search.twitter.com/search.json?lang=fr&amp;q=flex"
					   resultFormat="text"
					   result="httpService_resultHandler(event)"/>

</fx:declarations>

La requête sera exécutée en utilisant la méthode send() de l’objet HTTPService.

protected function creationCompleteHandler(event:Event):void
{
	//Affichage du curseur de chargement
	CursorManager.setBusyCursor();
	//Envoi de la requête
	httpService.send();
}

Traitement des données JSON

Le traitement des données se fera dans la fonction httpService_resultHandler.

Nous allons dans un premier temps récupérer la chaîne représentant les données au format JSON puis nous utiliserons la méthode statique decode() de la classe JSON de la librairie corelib.

Cette méthode retourne un objet contenant des paires nom/valeur.

protected function httpService_resultHandler(event:ResultEvent):void
{
	//Objet de données
	var object:Object = JSON.decode(String(event.result));
}

Comme nous pouvons le constater dans l’exemple JSON fournit au format zip, l’objet racine de nos données contient une propriété results.

Nous allons transformer cet objet en un tableau grâce à la méthode statique toArray() de la classe ArrayUtil. Ce tableau servira ensuite de fournisseur de données pour l’affichage dans une liste.

protected function httpService_resultHandler(event:ResultEvent):void
{
	//Objet de données
	var object:Object = JSON.decode(String(event.result));
	//Affichage dans la liste
	list.dataProvider = new ArrayCollection(ArrayUtil.toArray(object.results));
	//Suppression du curseur de chargement
	CursorManager.removeBusyCursor();
}

Affichage des données

Les données seront ensuite affichées dans une liste.

Cette liste utilisera un item renderer pour personnaliser l’affichage dans la liste.

Nous afficherons l’image de l’utilisateur ayant réalisé le tweet en utilisant le champ profile_image_url des données JSON. Nous afficherons aussi le pseudo de l’utilisateur, la date de création et le contenu du tweet.

Nous utiliserons les champs from_user, created_at et text.

Cet article est aussi valable pour Flex Builder 3 où il faudra seulement modifier les contrôles d’affichage utilisés.

Code source

Projet Flex et Json