Adobe^® Flex^™ Tutorial

Bien que la façon la plus simple et la plus rapide d'utiliser l'objet HTTPService est de le créer en MXML, cette technique est préférable pour les applications non-entreprise dans lesquels les scénarios de communication sont assez simples. Cependant, pour des applications ayant des exigences plus importantes, il est préférable d'utiliser les remote proxies. Puisque les composants HTTPService proposent de grands avantage d'un point de vue conversion de données (comme la sérialisation de data), c'est une bonne idée d'utiliser un objet HTTPService à l'intérieur d'un remote proxy. Cependant, il est généralement nécessaire de travailler ensuite avec le composant HTTPService entièrement en ActionScript, y compris la construction de l'objet et la récupération des réponses.

Si vous travaillez avec des objets HTTPService entièrement en ActionScript, vous devrez importer la classe mx.rpc.http.HTTPService. Vous pouvez ensuite en construire une nouvelle instance en utilisant l'instruction "new":

var httpService:HTTPService = new HTTPService();

Vous pouvez ensuite fixer la propriété "url":

httpService.url = "data.txt";

Tout comme vous écouteriez les événements d'un objet, vous avez besoin d'ajouter des listeners aux objets HTTPService en utilisant addEventListener(). Les objets HTTPService lancent des événements de type ResultEvent quand une réponse est retournée, et ils lancent des événements de type FaultEvent quand une erreur est retournée par le serveur. Les classes ResultEvent et FaultEvent sont dans le package mx.rpc.events.package:

httpRequest.addEventListener(ResultEvent.RESULT, resultHandler);

L'exemple suivant utilise l'approche recommandée des remote proxy en conjonction avec HTTPService. Cet exemple accomplit la même chose que le tutorial Flex HTTPService - Envoyer des paramètres avec la propriété request qui est lui fait en MXML. Cependant cet exemple utilise plusieurs classes pour le faire.

La première classe est une simple classe modèle de donnée appelée ApplicationDataModel.as:

package{
	import mx.collections.ListCollectionView;

	public class ApplicationDataModel{

		private static var _instance:ApplicationDataModel;

		private var _countryNames:ListCollectionView;
		private var _statesNames:ListCollectionView;

		[Bindable]
		public function set countryNames(value:ListCollectionView):void{
			_countryNames = value;
		}

		public function get countryNames():ListCollectionView{
			return _countryNames;
		}

		[Bindable]
		public function set statesNames(value:ListCollectionView):void{
			_statesNames = value;
		}

		public function get statesNames():ListCollectionView{
			return _statesNames;
		}	

		public function ApplicationDataModel(){}

		public static function getInstance():ApplicationDataModel{
			if(_instance == null){
				_instance = new ApplicationDataModel();
			}
			return _instance;
		}
	}
}

Dans l'extrait de code suivant, on définit StatesService, qui est le remote proxy qui charge la donnée XML en utilisant HTTPService. Cette classe définit deux méthodes de service: getCountries() et getStates(). Quand les résultats sont retournés par l'appel au service, ils sont assignés au modèle de donnée:

 package{

	import mx.rpc.http.HTTPService;
	import mx.rpc.events.ResultEvent;
	import mx.collections.ListCollectionView;
	import ApplicationDataModel;
	import mx.collections.XMLListCollection;

	public class StatesService{

		private var _service:HTTPService;

		public function StatesService(){
			_service = new HTTPService();
			_service.resultFormat= "e4x";
		}

		public function getCountries():void{
			_service.addEventListener(ResultEvent.RESULT, countriesResultHandler);
			_service.url = "http://www.rightactionscript.com/states/xml/countries.xml";
			_service.send();
		}

		public function getStates(country:String):void{
			_service.addEventListener(ResultEvent.RESULT, statesResultHandler);
			_service.url = "http://www.rightactionscript.com/states/xml/states.php?country="+country;
			_service.send();
		}

		public function countriesResultHandler(event:ResultEvent):void{
			_service.removeEventListener(ResultEvent.RESULT, countriesResultHandler);
			ApplicationDataModel.getInstance().countryNames = new XMLListCollection(_service.lastResult.children() as XMLList);
		}

		public function statesResultHandler(event:ResultEvent):void{
			_service.removeEventListener(ResultEvent.RESULT, statesResultHandler);
			ApplicationDataModel.getInstance().statesNames = new XMLListCollection(_service.lastResult.children() as XMLList);
		}

	}
}

Et enfin, l'application MXML qui utilise ces deux classes:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
	verticalAlign="middle" horizontalAlign="center"
	creationComplete="creationCompleteHandler(event)" viewSourceURL="srcview/index.html">
	<mx:Script>
		<![CDATA[
			import mx.rpc.http.HTTPService;
			import mx.rpc.events.ResultEvent;

			private var _statesService:StatesService;

			private function creationCompleteHandler(event:Event):void{
				_statesService = new StatesService();
				_statesService.getCountries();
			}
		]]>
	</mx:Script>

	<mx:Panel title="Services HTTPServices"
		paddingBottom="30" paddingLeft="30" paddingRight="30" paddingTop="30">
		<mx:Label text="Choisir le pays"/>
		<mx:ComboBox id="countryMenu" dataProvider="{ApplicationDataModel.getInstance().countryNames}"
			 change="_statesService.getStates(countryMenu.selectedLabel)"/>
		<mx:Label text="Choisir l'état"/>
		<mx:ComboBox dataProvider="{ApplicationDataModel.getInstance().statesNames}"/>
	</mx:Panel>
</mx:Application>

Dans cet exemple, une instance de StatesService est créée, et getCountries() est appelée immédiatement. La première ComboBox est data-bindée sur la propriété "countryNames" du data model. Quand l'utilisateur sélectionne une valeur dans la première ComboBox, elle appelle getStates(), en lui passant en paramètre le pays sélectionné. La seconde ComboBox est data-bindée à la propriété "statesNames" du data model.

Flex Source Code Download: Télécharger le code source complet de l'application

• Flex WebService en ActionScript – Envoyer des requêtes et traiter le résultat
• Flex HTTPService – Envoyer des paramètres avec la propriété request
• Flex Curseur – Curseur automatiquement occupé pendant les requêtes de SWFLoader, HttpService, WebService et RemoteObject
• Flex URLLoader – Envoyer des paramètres avec la propriété data
• Flex Best Practices – MVC (Model View Controller) par l'exemple