[Flex2] créer/afficher un cercle par programmation ?

[frenchy404]

Hello,

Je viens de me mettre au SDK Flex (j'arrive à faire des choses basiques avec des Button, des TextInput, relier à des fonctions ou méthodes AS3, etc).

Par contre j'aimerais dessiner des formes simples par programmation (cercles, rectangles) mais sans passer par flexBuilder ou un IDE Flash.

Est-ce possible ?

J'ai essayé quelque chose du genre:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp()">
 
<mx:Script>
 
import flash.display.Graphics;
 
public function initApp():void {
			trace("un cercle, please ...");
			graphics.lineStyle(10, 0xFF0FF0, 0.9);
			graphics.beginFill(0x66AA66);
			graphics.drawCircle(100,200,300);}
 
</mx:Script>
 
</mx:Application>

Aucun cercle ne s'affiche
Help, please

[nicolb]

Salut !

Tu es sur la bonne voie, mais c'est normal que rien ne s'affiche...

Il faut que tu dessines dans un objet et qu'ensuite tu ajoutes cet objet à ton application par un "addChild()"...

Je ne crois pas que tu puisse directement dessiner dans un objet Flex (mais je me trompe peut-être...). Il faut que tu dessines dans un DisplayObject Flash genre Sprite, et qu'ensuite tu ajoutes cet objet à ton Application en passant par un objet intermédiaire UIComponent (on ne peut pas ajouter directement un DisplayObject à un objet Flex)...

Voilà...

[frenchy404]

Merci pour ta réponse. Je m'y remets mais toujours impossible de trouver un exemple de code qui fonctionne.
Pourtant ça devrait être un "hello world".
Je me demande si Flex aura vraiment un avenir dans un mois lorsque Silverlight 2 beta va sortir
(ça fais la 3ème liste/forum où je pose la question et personne de la "communauté" Flex n'est capable de montrer le bout de code magique pour un "hello world", ça craint).

Bref, en tout cas voici ma dernière tentative avec Flex Builder 3:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>import DrawApp;</mx:Script>
<mx:Script>
	<![CDATA[
		function drawNow():void{
			var myRectangle:DrawApp = new DrawApp();
			myCanvas.addChild(myRectangle.returnRectangle());
		}		
	]]>
</mx:Script>
<mx:Canvas width="100%" height="100%" id="myCanvas"></mx:Canvas>
<mx:Button label="draw" click="drawNow()"></mx:Button>	
</mx:Application>

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
package {
 
import flash.display.*;
 
class DrawApp extends Sprite
{
	public function DrawApp()
	{
 		//don't use the constructor anymore since it won't return the rectangle
	}	
	public function returnRectangle():Shape
	{
	var rectAndCircle:Shape=new Shape();
	rectAndCircle.graphics.lineStyle(1);
	rectAndCircle.graphics.beginFill(0x0000FF,1);
	rectAndCircle.graphics.drawRect(125,0,550,575);
	rectAndCircle.graphics.endFill();
	return rectAndCircle;
	}
}//class
 
}//package

en cliquant sur le bouton j'ai l'erreur suivante:

TypeError: Error #1034: Echec de la contrainte de type : conversion de flash.display::Shape@50e26a9 en mx.core.IUIComponent impossible.
at mx.core::Container/http://www.adobe.com/2006/flex/mx/internal::addingChild()[E:\dev\flex_3_beta3\sdk\frameworks\projects\framework\src\mx\core\Container.as:3244]
at mx.core::Container/addChildAt()[E:\dev\flex_3_beta3\sdk\frameworks\projects\framework\src\mx\core\Container.as:2198]
at mx.core::Container/addChild()[E:\dev\flex_3_beta3\sdk\frameworks\projects\framework\src\mx\core\Container.as:2138]
at draw/drawNow()[C:\Users\franz\Documents\Flex Builder 3\draw\src\draw.mxml:8]
at draw/___draw_Button1_click()[C:\Users\franz\Documents\Flex Builder 3\draw\src\draw.mxml:13]

Quelqu'un saura t'il proposer une solution (code) qui marche pour ce GRAND CHALLENGE?

[frenchy404]

Bon finalement pour info. le code marche si on remplace "Shape" par "UIcomponent" dans ce code ci-dessus

[Lorenzo77]

frenchy ton 1er test est bon, tu as juste oublié de mettre un alpha sur le fond pour faire apparaitre le graphic qui ce trouve en dessous

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp()" backgroundAlpha="0">
 
<mx:Script>
 
import flash.display.Graphics;
 
public function initApp():void {
      trace("un cercle, please ...");
      graphics.lineStyle(10, 0xFF0FF0, 0.9);
      graphics.beginFill(0x66AA66);
      graphics.drawCircle(100,200,300);
}
 
</mx:Script>
 
</mx:Application>