How to draw rectangle in flex 4.5.1? - apache-flex

Question

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="640" minHeight="480">
<s:layout>
<s:BasicLayout/>
</s:layout>
<fx:Script>
<![CDATA[
import flash.display.Shape;
import flash.display.Sprite;
import mx.core.UIComponent;
import spark.core.SpriteVisualElement;
private var rectangle:Sprite = new Sprite();
private var insterter:UIComponent = new UIComponent();
private var theme:SpriteVisualElement = new SpriteVisualElement();
private function main():void
{
rectangle.graphics.lineStyle(1,0x0000FF,1.0);
rectangle.graphics.drawRect(0,0,200,50);
theme.addChild(rectangle);
this.addElement(theme); //tried canvas.addElement
const WIDTH:int = 20;
const HEIGHT:int = 20;
/*var grid:Array = new Array();
for(var y:int = 0; y < HEIGHT; y++) {
var row:Array = new Array();
for (var x:int = 0; x < WIDTH; x++) {
row.push(/*random object*//*);
}
/ grid.push(row);
}*/
}
]]>
</fx:Script>
<!--<spark:Canvas id="canvas" x="34" y="10" width="90%" height="90%" textAlign="center">
</mx:Canvas>-->
</s:Application>
Basically this is not working. I used this question to improve - still nothing.
Why doesnt this Flex App draw a simple rectangle?

Answer 1

Why don't you just use UIComponent.graphics drawing abilities, instead of creating three different objects ?
var uic:UIComponent = new UIComponent();
this.addElement(uic);
uic.width = uic.height = 50;
uic.graphics.lineStyle(1,0x000000);
uic.graphics.drawRect(0,0,50,50);