TextFormat working in raw AS3 but not working in Flex

Question

This problem is driving me bananas because it seems to be so simple. I'm trying to apply a text format to a text field created with code and have the formatting remain applied to the textfield if the text changes. The following code works as expected in raw AS3. I've broken down these examples to be as simplistic as possible.

package
{
    import flash.display.Sprite;
    import flash.text.TextField;
    import flash.text.TextFormat;

    public class Testing extends Sprite
    {
        public function Testing()
        {
            var tf:TextField = new TextField();
            addChild(tf);
            tf.border = true;

            var tfor:TextFormat = new TextFormat();
            tfor.align = 'right';
            tfor.size = 30;

            tf.defaultTextFormat = tfor;

            tf.text = 'Testing';

        }
    }
}

However, similar code in Flex does not behave the same way. The following code results in the text not being formatted correctly.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark" 
           xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
           creationComplete="_create(event)">
    <fx:Script>
        <![CDATA[
            import mx.core.UITextField;
            import mx.events.FlexEvent;

            protected function _create(event:FlexEvent):void
            {
                var tf:UITextField = new UITextField();
                ui.addChild(tf);
                tf.border = true;

                var tfor:TextFormat = new TextFormat();
                tfor.align = 'right';
                tfor.size = 30;

                tf.defaultTextFormat = tfor;

                tf.text = 'Testing';            
            }

        ]]>
    </fx:Script>

    <mx:UIComponent id="ui" width="100%" height="100%" />

</s:Application>

I realize that I could just use a Flex component as the text field and stick formatting on it that way, but this code needs to play nicely with previously written code. Thanks for your help in advance.

Answer 1

Below code may help you: - instead of adding it to UIComponent add it to SpriteVisualElement it will work.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
               creationComplete="_create(event)">
    <fx:Script>
        <![CDATA[
            import mx.core.UITextField;
            import mx.events.FlexEvent;

            protected function _create(event:FlexEvent):void
            {
                var tf:UITextField = new UITextField();
                ui.addChild(tf);
                tf.border = true;

                var tfor:TextFormat = new TextFormat();
                tfor.align = 'right';
                tfor.size = 30;

                tf.defaultTextFormat = tfor;

                tf.text = 'Testing';            
            }

        ]]>
    </fx:Script>
    <s:SpriteVisualElement id="ui" width="100%" height="100%" />

</s:Application>