Applying styles for custom TextArea in ActionScript 3

Question

I have the following code to create and apply a few styles for a custom TextArea in ActionScript 3.

public class MyCustomTextArea extends TextArea
{
  override protected function createChildren():void
  {
    super.createChildren();
    this.styleSheet.setStyle("sup", { display: "inline", fontFamily: "ArialSup", fontSize:"12"});
    this.styleSheet.setStyle("sub", { display: "inline", fontFamily: "ArialSub", fontSize:"12"});
    this.setStyle("fontFamily", "Arial");  
  }
}

I have two problems with this code.

this.styleSheet is always null when I create an instance of the class. If this.styleSheet is initialized to new StyleSheet() to avoid this issue, then the TextArea instance does not seem to recognize any of the HTML tags that can be used with the htmlText property.

Can anyone help in fixing these two issues? Thanks.

Answer 1

First off - the styleSheet property of a TextArea component is null by default - what you're seeing is an expected behavior.

You're also creating your css stylesheet in an unusual way - perhaps this is where your problems are coming from? I'd try either loading, or defining inline, a stylesheet to apply to your text area. There's an example of loading and applying a stylesheet here: http://blog.flexexamples.com/2008/03/22/applying-a-cascading-style-sheet-to-a-textarea-control-in-flex/

Also, what are ArialSub and ArialSup? If these aren't valid font names flex won't recognize them and use them.