TextField not showing as htmlText when using addChild

[djsting]

I have an odd predicament that I'm trying to wrap my head around. I have a textField, that is populated by data from an xml file. It contains simple line html line break tags, and when I use the htmlText option, it doesn't seem to recognize those tags, even though they don't show up when I view it online. Here is my code:

//FLASHVARS CODE
var varName:String;
var paramObj:Object = LoaderInfo(this.root.loaderInfo).parameters;
for (varName in paramObj) {
	myFlashVar = String(paramObj[varName]);
}

//INIT VARIABLES
var myFlashVar:String;
var showX:XML;
var showList:XMLList;
var output:String = "";
var outputTxt:TextField;
var showTxt:TextField;

//TEXTFIELD PROPERTIES
showTxt = new TextField();
outputTxt = new TextField();
showTxt.x = 9;
showTxt.y = 52;
showTxt.width = 344;
showTxt.height = 242;
showTxt.wordWrap = true;
showTxt.autoSize = TextFieldAutoSize.LEFT;
showTxt.textColor = 0xFFFFFF;

var style:StyleSheet = new StyleSheet();

var loader:URLLoader = new URLLoader();
loader.addEventListener(Event.COMPLETE, onComplete);
loader.load(new URLRequest(myFlashVar));

function onComplete(e:Event):void
{
	showX = new XML(loader.data);
	showList = showX.song;
	
	for(var i:uint = 0; i<showList.length(); i++)
	{
	var track:Number = (i + 1);
	if(i<9) {
		output += "0" + track + ". " + showList[i].number + " " + showList[i].artist + " - " + showList[i].title + "<br>"; }
	else {
	output += track + ". " + showList[i].number + " " + showList[i].artist + " - " + showList[i].title + "<br>"; }
	}
	showTxt.htmlText = output;
	addChild(showTxt);
}

I can't figure out how to make it render properly. If I choose a dynamic text field already on the stage it works fine, but then the scrollbar doesn't work. I read that a TextField automatically uses a scrollbar when it gets too long. Can anyone suggest a possible work around for this? I feel the answer is staring me in the face and I just can't see it. Thanks

[jweeks123]

Okay, first thing to try would be adding the showTxt textfield to the stage before populating the text with it.

Next would be to use the textarea component. That one will auto update a scroll bar. Otherwise you have to add one in the code yourself and update everytime the text changes.

[djsting]

Okay, first thing to try would be adding the showTxt textfield to the stage before populating the text with it.

Next would be to use the textarea component. That one will auto update a scroll bar. Otherwise you have to add one in the code yourself and update everytime the text changes.

the TextArea component seemed to work great! However, I can't style it to save my life. How do I set things like the font color and background color? I am attempting to use the setStyle property but nothing I do seems to work. Help?

Here is my updated code:

import fl.controls.ScrollPolicy;
import fl.controls.TextArea;

//FLASHVARS CODE
var varName:String;
var paramObj:Object = LoaderInfo(this.root.loaderInfo).parameters;
for (varName in paramObj) {
	myFlashVar = String(paramObj[varName]);
}

//INIT VARIABLES
var myFlashVar:String;
var showX:XML;
var showList:XMLList;
var output:String = "";
var showTxt:TextArea = new TextArea();

//TEXTFIELD PROPERTIES
showTxt.x = 9;
showTxt.y = 52;
showTxt.width = 344;
showTxt.height = 242;
showTxt.wordWrap = true;
showTxt.setStyle("color", "red");

var style:StyleSheet = new StyleSheet();

var loader:URLLoader = new URLLoader();
loader.addEventListener(Event.COMPLETE, onComplete);
loader.load(new URLRequest("The_Fixx_DJ_Little_Fever_Show8.xml"));

function onComplete(e:Event):void
{
	addChild(showTxt);
	showX = new XML(loader.data);
	showList = showX.song;
	
	for(var i:uint = 0; i<showList.length(); i++)
	{
	var track:Number = (i + 1);
	if(i<9) {
		output += "0" + track + ". " + showList[i].number + " " + showList[i].artist + " - " + showList[i].title + "<br>"; }
	else {
	output += track + ". " + showList[i].number + " " + showList[i].artist + " - " + showList[i].title + "<br>"; }
	}
	showTxt.htmlText = output;
}

[jweeks123]

I'd use HTML formatting myself. "<font color="#0000ff">blah</font>"

background color, I'd just skin it. That's your easiest solutions.

[djsting]

I'd use HTML formatting myself. "<font color="#0000ff">blah</font>"

background color, I'd just skin it. That's your easiest solutions.

That could work theoretically, however since it's being pulled from an XML file, where would I input that html code? Would I just add the html coding to the output string before and after the for loop?

It seems everything I do to fix one problem, presents another problem... haha

[jweeks123]

Hmmm...well use this:

Now the BG color can't be done with the as3 textarea, you'd have to extend the class or skin it in the library to change the bg color.

import fl.controls.TextArea;
var ta:TextArea = new TextArea();
var textAreaFormat:TextFormat = new TextFormat();
textAreaFormat.font = "Arial";
textAreaFormat.size = 12;
textAreaFormat.color = 0x0000FF
textAreaFormat.bold = true;
ta.setStyle("textFormat", textAreaFormat);
ta.htmlText = "The quick red fox jumped over the lazy brown dog.";
addChild(ta);

[djsting]

Hmmm...well use this:

Now the BG color can't be done with the as3 textarea, you'd have to extend the class or skin it in the library to change the bg color.

import fl.controls.TextArea;
var ta:TextArea = new TextArea();
var textAreaFormat:TextFormat = new TextFormat();
textAreaFormat.font = "Arial";
textAreaFormat.size = 12;
textAreaFormat.color = 0x0000FF
textAreaFormat.bold = true;
ta.setStyle("textFormat", textAreaFormat);
ta.htmlText = "The quick red fox jumped over the lazy brown dog.";
addChild(ta);

That worked perfectly thanks so much!!!

[jweeks123]

No Problem, happy to help.