Third-Road.net » Flex http://journal.third-road.net Le journal Sun, 22 May 2011 15:12:12 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 [Flex] Récupérer et afficher des données XML http://journal.third-road.net/2007/06/08/flex-recuperer-et-afficher-des-donnees-xml/ http://journal.third-road.net/2007/06/08/flex-recuperer-et-afficher-des-donnees-xml/#comments Fri, 08 Jun 2007 21:19:49 +0000 Mathieu Cabaret http://journal.third-road.net/2007/06/07/flex-recuperer-et-afficher-des-donnees-xml/ Un petit exemple de comment récupérer des données au format XML et les afficher dans un DataGrid en utilisant simplement l’objet HTTPService.

Pour commencer, on va utiliser le fichier XML suivant, accessible arbitrairement via l’adresse http://www.mondomaine.tld/monfichier.xml :

<?xml version="1.0" encoding="utf-8"?>
<donnees>
	<clients>
		<client>
			<nom><![CDATA[Babble]]></nom>
			<prenom><![CDATA[Michael]]></prenom>
			<ville><![CDATA[Nantes]]></ville>
		</client>
		<client>
			<nom><![CDATA[Smith]]></nom>
			<prenom><![CDATA[John]]></prenom>
			<ville><![CDATA[New York]]></ville>
		</client>
	</clients>
</donnees>

Ensuite, on va créer le fichier MXML monApplication.mxml dans lequel on aura créé un objet HTTPService et un DataGrid :

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" >
	<mx:HTTPService id="maRequete" url="http://www.mondomaine.tld/monfichier.xml" showBusyCursor="true" /> 
	<mx:Panel layout="absolute" left="25" right="25" bottom="25" top="25">
		<mx:Button label="Rafraichir" right="10" top="10"/>
		<mx:DataGrid id="productGrid" width="100%" height="100%"> 
			<mx:columns>
				<mx:DataGridColumn headerText="Nom" dataField="col1" />
				<mx:DataGridColumn headerText="Prénom" dataField="col2" /> 
				<mx:DataGridColumn headerText="Ville" dataField="col3" /> 
			</mx:columns>
		</mx:DataGrid>
	</mx:Panel>
</mx:Application>

On va maintenant associer les données qui seront recueillies par notre service maRequete. Pour cela, on va ajouter l’attribut dataProvider à cet élément et mettre comme valeur {maRequete.lastResult.clients.client} :

  • maRequete : nom de l’objet HTTPService
  • lastResult : le résultat de la dernière requête
  • clients : le noeud XML qui contient les différents enregistrements que nous voulons afficher
  • client : le noeud XML qui correspond à chaque enregistrement

Puis nous associons chaque élément des noeuds clients du fichier XML à chaque colonne du DataGrid (nom, prenom et ville), orthographiés identiquement aux éléments du fichier XML.

Enfin, nous demandons la requête du service, par exemple au lancement de l’application et lorsque l’on clique sur le bouton rafraichir en associant aux évènements correspondants la valeur maRequete.send();.

Le fichier monApplication.mxml ressemblera donc à :

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="maRequete.send()" >
	<mx:HTTPService id="maRequete" url="http://www.mondomaine.tld/monfichier.xml" showBusyCursor="true" /> 
	<mx:Panel layout="absolute" left="25" right="25" bottom="25" top="25">
		<mx:Button label="Rafraichir" click="maRequete.send();"  right="10" top="10"/>
		<mx:DataGrid id="productGrid" dataProvider="{maRequete.lastResult.clients.client}" width="100%" height="100%"> 
			<mx:columns>
				<mx:DataGridColumn headerText="Nom" dataField="nom" />
				<mx:DataGridColumn headerText="Prénom" dataField="prenom" /> 
				<mx:DataGridColumn headerText="Ville" dataField="ville" /> 
			</mx:columns>
		</mx:DataGrid>
	</mx:Panel>
</mx:Application>
]]> http://journal.third-road.net/2007/06/08/flex-recuperer-et-afficher-des-donnees-xml/feed/ 3