Rendering text in Flex in Graphics - apache-flex

Question

I'm new to Flex (and Flash) and just playing around at the moment. I was using the drawing methods on a Canvas to color it blue, and wanted to draw text, however, I have an error somewhere in the code.
<?xml version="1.0" ?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" paddingLeft="0" paddingRight="0" paddingTop="0" paddingBottom="0" enterFrame="enterFrame(event)" applicationComplete="addtext(event)">
<mx:VBox width="640" height="480">
<mx:Label id="debug" text="No debug yet." />
<mx:Button id="myButton" label="Hello World" />
<mx:Button id="myOtherButton" label="Foo Bar Baz" />
<mx:Canvas id="myCanvas" width="100%" height="100%" />
</mx:VBox>
<mx:Script>
<![CDATA[
import flash.text.engine.*;
import mx.controls.*;
public function addtext(event:Event):void
{
Alert.show("foo!");
var str:String = "Hello World.";
var format:ElementFormat = new ElementFormat();
var textElement:TextElement = new TextElement(str, format);
var textBlock:TextBlock = new TextBlock();
textBlock.content = textElement;
var textLine:TextLine = textBlock.createTextLine(null, 300);
textLine.x = 30;
textLine.y = 200;
Alert.show("baz!");
this.addChild(textLine); // Execution appears to cease here.
Alert.show("bar!");
}
public function enterFrame(event:Event):void
{
myCanvas.graphics.clear();
myCanvas.graphics.beginFill(0x66666FF);
myCanvas.graphics.drawRect(0, 0, myCanvas.width, myCanvas.height);
myCanvas.graphics.endFill();
}
]]>
</mx:Script>
</mx:Application>
The alerts get to "baz!" but not "bar!", so the error is somewhere there. Also, I've been running this in Firefox and fdb, but fdb isn't outputting anything - it's just launching a Flash player. A starting point on how to debug Flash

Answer 1

IMHO this is a somewhat fuzzy mix up between flash and flex.
First: I would suggest that if you would like your canvas to be blue, you'd use:
<mx:canvas backgroundColor="0x66666FF" width="100%" height="100%" />
Secondly the text layout framework (Commonly TLF) is a topic I would reccomend you skip until you are a bit more familiar with flex and flash.
The error you are having is because TextLine does not implement IUIComponent, and therefore cannot be added to a Flex container.
If you want to use TLF, you will need to add a spark component capable of handling it, to your application, ex. s:RichText or s:TextArea
Happy coding!!