EDIT: depuis la version 4 du SDK, l’intégration de composants de type Sprite a été simplifié grâce à l’utilisation des SpriteVisualElement. Plus d’informations ici.

Pour ceux qui ont un jour voulu utiliser l’API de dessin dans leur application Flex, l’expérience a dû être déconcertante:
en effet si vous faite un copié/collé des codes donnés en exemple dans le manuel officiel de Flex, vous réaliserez très vite qu’il y a un problème puisque aucune des formes que vous avez codé ne s’affichera.

// red triangle, starting at point 0, 0
triangle.graphics.beginFill(0xFF0000);
triangle.graphics.moveTo(triangleHeight/2, 0);
triangle.graphics.lineTo(triangleHeight, triangleHeight);
triangle.graphics.lineTo(0, triangleHeight);
triangle.graphics.lineTo(triangleHeight/2, 0);
 
// green triangle, starting at point 200, 0
triangle.graphics.beginFill(0x00FF00);
triangle.graphics.moveTo(200 + triangleHeight/2, 0);
triangle.graphics.lineTo(200 + triangleHeight, triangleHeight);
triangle.graphics.lineTo(200, triangleHeight);
triangle.graphics.lineTo(200 + triangleHeight/2, 0);
 
this.addChild(triangle); //l'erreur est ici

La raison est un peu technique: les classes qui permettent de dessiner (Shape et Sprite pour ne pas les nommer) n’implémentent pas IUIComponent, or vous pouvez uniquement insérer dans votre application des composants implémentant cette interface. Si la documentation de Flex n’en parle pas, c’est sans doute parce que les rédacteurs sont partis du principe lorsqu’ils l’ont écrite que vous voulez insérer ces éléments dans un objet de type Stage qui, si j’ai bien tout suivi, est le composant racine d’une application Flash.

Différentes techniques permettent de contourner ce problème. La plus simple consiste à créer un composant UIComponent qui contiendra tous les objets Shape et Sprite que vous désirez, et à l’ajouter comme enfant à votre application ou à un de ses sous-composants.

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%" creationComplete="init()">
	<mx:Script>
        <![CDATA[
		import flash.display.Sprite;
 
		public function init():void {
			var triangleHeight:uint = 100;
			var triangle:Sprite = new Sprite();
 
			triangle.graphics.beginFill(0xFF0000);
			triangle.graphics.moveTo(triangleHeight/2, 0);
			triangle.graphics.lineTo(triangleHeight, triangleHeight);
			triangle.graphics.lineTo(0, triangleHeight);
			triangle.graphics.lineTo(triangleHeight/2, 0);
 
 
			triangle.graphics.beginFill(0x00FF00);
			triangle.graphics.moveTo(200 + triangleHeight/2, 0);
			triangle.graphics.lineTo(200 + triangleHeight, triangleHeight);
			triangle.graphics.lineTo(200, triangleHeight);
			triangle.graphics.lineTo(200 + triangleHeight/2, 0);
 
			ui.addChild(triangle);
 
		}
	]]>
	</mx:Script>
 
	<mx:Canvas width="100%" height="100%" backgroundColor="#FF00FF">
		<mx:UIComponent id="ui" width="50%" height="50%" />
	</mx:Canvas>
</mx:Application>