Dynamically display text in Flex, ActionScript 3 - actionscript-3

Question

I've been having problems displaying text in ActionScript 3 using Flex SDK 4.6. Any method I try results in no change or a black screen; here is my project code and attempts.
MyProject.mxml is simply and mx:Application tag with the relevant parts being
<mx:Script>
<![CDATA[
include "MyProject.as"; //simply running my project file
]]>
</mx:Script>
and
<mx:Canvas id="gamePanel" x="0" y="0" width="100%" height="100%"/> //defining the canvas
In MyProject.as I have
import flash.display.*;
import flash.events.*;
import mx.events.*;
import mx.controls.*;
import Game;
public static const SCREEN_WIDTH:int = 960;
public static const SCREEN_HEIGHT:int = 720;
private var initializationCompleted:Boolean = false;
public var screenBuffer:BitmapData;
public var game:Game;
public function setup():void {
screenBuffer = new BitmapData(SCREEN_WIDTH, SCREEN_HEIGHT, false, 0x00000000);
game = new Game(SCREEN_WIDTH, SCREEN_HEIGHT, screenBuffer);
initializationCompleted = true;
}
private function updateFrame():void {
if (!initializationCompleted) {
return;
}
draw();
gamePanel.graphics.clear();
gamePanel.graphics.beginBitmapFill(screenBuffer, null, false, false);
gamePanel.graphics.drawRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
gamePanel.graphics.endFill();
}
private function draw():void {
game.update();
}
And in Game.as, I simply draw everything using the BitmapData class, and then copy everything to the screenBuffer:
screenBuffer.copyPixels(myBitmap, new Rectangle(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT), new Point(0,0));
(This is only the relevant code - I trimmed as much as possible to leave a "Minimal, Complete, and Verifiable example")
Now I have been having problems displaying text in my project. I know that TextField is a subclass of flash.display.Sprite which can be added to the canvas. Whenever I try using something like
var txtHello:TextField = new TextField();
txtHello.text = "Hello World";
gamePanel.addChild(txtHello)
this either changes nothing (if used in setup(), I'm assuming I'm drawing over it or else it is never displayed) or causes a black screen (if used anywhere in updateFrame(), I'm assuming I'm creating infinite sprites).
I have tried instead, creating a new file named "TextWithImage.as" with the contents
//this is ripped off the adobe help page
package {
import flash.display.Sprite;
import flash.text.*;
public class TextWithImage extends Sprite {
private var myTextBox:TextField = new TextField();
private var myText:String = "Hello World";
public function TextWithImage() {
addChild(myTextBox);
myTextBox.text = myText;
}
}
}
importing it in MyProject.as, and then using it as
gamePanel.addChild(new TextWithImage());
to the same effect as my previous attempt.
What is the simplest way to display text in Flex/AS3? Any help is appreciated, and thank you in advance!

Answer 1

There's a trick. Flex components, albeit having the same addChild method derived from DisplayObjectContainer class, cannot actually add regular Flash content - Shape, Sprite, MovieClip, TextField, Bitmap - directly. More to that, they don't produce any runtime error, which I personally think they totally could to not confuse new people.
Flex component can only addChild classes that extend the basic UIComponent class. At the same time, UIComponent can addChild regular Flash content. Thus you do it as following:
var proxyContainer:UIComponent = new UIComponent;
var txtHello:TextField = new TextField;
txtHello.text = "Hello World";
proxyContainer.addChild(txtHello);
gamePanel.addChild(proxyContainer);