Flex - toggle bold text in TextArea

Question

I am making a RTE in Flex and am trying to make text formatting buttons.

<s:ToggleButton id="boldBtn" width="50" height="50" label="B" click="boldBtn_clickHandler(event)" color="#000000" fontWeight="bold"/>

and my code

protected function boldBtn_clickHandler(event:MouseEvent):void
        {
            var txtLayFmt:TextLayoutFormat = mainTextField.getFormatOfRange(null,
                mainTextField.selectionAnchorPosition,
                mainTextField.selectionActivePosition);
            txtLayFmt.fontWeight = (txtLayFmt.fontWeight == FontWeight.BOLD) ? FontWeight.NORMAL : FontWeight.BOLD; **// Causing the NULL Pointer exception**
            mainTextField.setFormatOfRange(txtLayFmt,
                mainTextField.selectionAnchorPosition,
                mainTextField.selectionActivePosition);
            mainTextField.setFocus();
        }

When I type some text into the TextArea, and select it then click the boldBtn I get a Cannot access a property or methof of a null object reference. If I comment out txtLayFmt.fontWeight = (txtLayFmt.fontWeight == FontWeight.BOLD) ? FontWeight.NORMAL : FontWeight.BOLD; the program doesn't crash so this seems to be the offending line but I don't see why.

EDIT I'm now trying this code. It works when I ut it in a Desktop application, but when I put it in a mobile project it doesn't work. Any ideas?

......

private function btnBold_click(evt:MouseEvent):void {
trace("Clicked"); // Traces to output ok
var styleObj:TextLayoutFormat = new TextLayoutFormat();
styleObj.fontWeight = FontWeight.BOLD;
mainTextField.setFormatOfRange(styleObj);
}

What's wrong with this code?

Answer 1

add this to your css and it will use TLF and support all the normal functionality.

s|TextArea
{
    skinClass: ClassReference("spark.skins.spark.TextAreaSkin");
}