Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Flex – charger des données au format JSON

Compatible Flex 4. Cliquer pour en savoir plus sur les compatibilités.Compatible ActionScript 3. Cliquer pour en savoir plus sur les compatibilités.Par tannoy (Antony Chauviré), le 17 février 2010

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 :

{
      "results": [
            {
                  "profile_image_url": "http://s.twimg.com/a/1265999168/images/default_profile_4_normal.png", 
                  "created_at": "Wed, 17 Feb 2010 11:42:09 +0000", 
                  "from_user": "bunny_car", 
                  "to_user_id": null, 
                  "text": "http://tinyurl.com/cand9x 
Tour de Flex", 
                  "id": 9230285685, 
                  "from_user_id": 70669710, 
                  "geo": null, 
                  "iso_language_code": "fr", 
                  "source": "<a href="http://apiwiki.twitter.com/" rel="nofollow">API</a>"
            }, 
            {
                  "profile_image_url": "http://s.twimg.com/a/1266345225/images/default_profile_5_normal.png", 
                  "created_at": "Wed, 17 Feb 2010 11:36:50 +0000", 
                  "from_user": "btbwpl", 
                  "to_user_id": null, 
                  "text": "TourDeFlex - >http://www.adobe.com/devnet/flex/tourdeflex/web/#", 
                  "id": 9230153878, 
                  "from_user_id": 94183118, 
                  "geo": null, 
                  "iso_language_code": "fr", 
                  "source": "<a href="http://twitter.com/">web</a>"
            }, 
            {
                  "profile_image_url": "http://a1.twimg.com/profile_images/194281888/Me591_normal.jpg", 
                  "created_at": "Wed, 17 Feb 2010 10:36:55 +0000", 
                  "from_user": "newic500", 
                  "to_user_id": null, 
                  "text": "Implémentation et bonnes pratique de #PureMVC http://tr.im/OzeQ via (@AntonyManigot) pour vos applications #ActionScript (et #Flex)", 
                  "id": 9228714706, 
                  "from_user_id": 15034680, 
                  "geo": null, 
                  "iso_language_code": "fr", 
                  "source": "<a href="http://twitter.com/">web</a>"
            }, 
            {
                  "profile_image_url": "http://a1.twimg.com/profile_images/571425332/Phil-Picture_normal.jpg", 
                  "created_at": "Wed, 17 Feb 2010 10:01:57 +0000", 
                  "from_user": "philippetriem", 
                  "to_user_id": null, 
                  "text": "<b>Adobe</b> Air sur mobile, on commence par Android - <b>Adobe Flex</b> <b>...</b> http://bit.ly/c7zJh5", 
                  "id": 9227934954, 
                  "from_user_id": 69786662, 
                  "geo": null, 
                  "iso_language_code": "fr", 
                  "source": "<a href="http://twitter.com/">web</a>"
            }, 
            {
                  "profile_image_url": "http://a1.twimg.com/profile_images/427236384/Orgtel_normal.gif", 
                  "created_at": "Wed, 17 Feb 2010 09:52:42 +0000", 
                  "from_user": "orgtel", 
                  "to_user_id": null, 
                  "text": "Murex Flex API Developer - FXO - C++ http://bit.ly/c24ox7 #jobs #job", 
                  "id": 9227726595, 
                  "from_user_id": 61557503, 
                  "geo": null, 
                  "iso_language_code": "fr", 
                  "source": "<a href="http://twitterfeed.com" rel="nofollow">twitterfeed</a>"
            }
      ], 
      "max_id": 9230285685, 
      "since_id": 8898570826, 
      "refresh_url": "?since_id=9230285685&q=flex", 
      "next_page": "?page=2&max_id=9230285685〈=fr&q=flex", 
      "results_per_page": 15, 
      "page": 1, 
      "completed_in": 0.238963, 
      "warning": "adjusted since_id to 8898570826 (2010-02-10 12:00:00 UTC), requested since_id was older than allowed -- since_id removed for pagination.", 
      "query": "flex"
}

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

  • 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&amp;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 le code JSON en peu plus haut dans l'article, 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.

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

<s:List id="list" 
	x="133" 
	y="98" 
	width="600" 
	height="100%"
	itemRenderer="renderers.CustomItemRenderer"/>

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

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
				xmlns:s="library://ns.adobe.com/flex/spark" 
				xmlns:mx="library://ns.adobe.com/flex/halo">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
 
	<s:VGroup paddingBottom="10">
		<s:HGroup>
			<mx:Image source="{data.profile_image_url}" />
			<s:VGroup>
				<s:Label text="{data.from_user}" fontSize="17" />
				<s:Label text="{data.created_at}"
					 fontFamily="Verdana" 
					 fontSize="11"/>
			</s:VGroup>
 
		</s:HGroup>
		<mx:Text width="90%" htmlText="{data.text}" />
		<s:Line xFrom="0" xTo="600" yTo="0" yFrom="0">
			<s:stroke>
				<s:SolidColorStroke color="#000000" weight="2" />
			</s:stroke>
		</s:Line>
	</s:VGroup>
</s:ItemRenderer>

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.

En savoir plus