[flexcoders] Font loaded by StyleManager.loadStyleDeclarations(fontName, true) resets any new text formatting set via setTextFormat

[Andriy Panas]

Dear all,

I have TextArea component on the Stage with embedded font applied,
then at the runtime I set a bold style to a text inside TextArea to
"bold" via setTextFormat(newTextFormat) API.

Then, I load at the runtime compiled font from CSS - "Vera.swf" and my
bold formatting is lost immediately after external font finishes
loading.


Notice, that the second parameter in
StyleManager.loadStyleDeclarations(fontName, update) call is set in
the code to "true".

When I change this boolean parameter to "false" - then I will not
witness that my bold formatting is lost after compiled font finishes
loading at the runtime.

My question, why when "update" parameter is set to true, I will loose
all my text formatting changes made at the runtime?

Please have a look at the code below or the run the example from

http://jabbypanda.com/labs/runtimeFont/TestRuntimeFont.html

<!---code starts--------------->
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml";
        styleName="plain" viewSourceURL="srcview/index.html"
        paddingLeft="10"
        paddingBottom="10"
        paddingRight="10"
        paddingTop="10">
        <mx:Style>
             @font-face {
                src:url("/assets/trebuc.ttf");
               fontFamily: Trebuchet;
             }
        
             @font-face {
                /* Note the different filename for boldface. */
                src:url("assets/trebucbd.ttf");
                fontFamily: Trebuchet; /* Notice that this is the same alias. */
                fontWeight: bold;
             }
        </mx:Style>
        <mx:Script>
                <![CDATA[
                        import mx.events.StyleEvent;
                        import mx.core.UITextField;
                        import mx.core.mx_internal;
                        use namespace mx_internal;
                        
                        private function onApplyBoldText() : void {
                                var ta1TextField : UITextField = 
UITextField(ta1.getTextField())
                                var ta2TextField : UITextField = 
UITextField(ta2.getTextField());
                                
                                var newTextFormat : TextFormat = new 
TextFormat();
                                newTextFormat.bold = true;
                                ta1TextField.setTextFormat(newTextFormat);
                                ta2TextField.setTextFormat(newTextFormat);
                        }
                                                
                        private function loadFont() : void {
                                var styleManager : IEventDispatcher =
StyleManager.loadStyleDeclarations("Vera.swf", true);
                        styleManager.addEventListener(StyleEvent.COMPLETE,
onStyleManagerComplete);
                        styleManager.addEventListener(StyleEvent.PROGRESS,
onStyleManagerProgress);
                        styleManager.addEventListener(StyleEvent.ERROR, 
onStyleManagerError);
                        }
                        
                        private function onStyleManagerComplete(event : 
StyleEvent) : void {
                                fontLoadStatus.text = "Font is successfully 
loaded";
                        }
                        
                        private function onStyleManagerProgress (event : 
StyleEvent): void {
                                fontLoadStatus.text = "Font is loading, please 
wait";
                        }
                        
                        private function onStyleManagerError(event : 
StyleEvent) : void {
                                fontLoadStatus.text = "Font load error";
                        }
                ]]>
        </mx:Script>
        <mx:TextArea id="ta1" width="400" height="100"
                fontFamily="Trebuchet">
            <mx:text>
                This is a multiline, editable TextArea control. If you need
                a non-editable multiline control, use the Text control.
            </mx:text>
    </mx:TextArea>
    <mx:TextArea id="ta2" width="400" height="100"
        fontFamily="Trebuchet">
          <mx:htmlText><![CDATA[This is <font color="#FF0000">HTML
text</font> in a <b>TextArea control</b>. Use the <u>htmlText
property</u> of the <font color="#008800">TextArea control</font> to
include basic HTML markup in your text.]]></mx:htmlText>
    </mx:TextArea>
    <mx:Button label="Apply bold text"
        click="onApplyBoldText()">      
    </mx:Button>
    <mx:Button label="Load font"
        click="loadFont()">     
    </mx:Button>
    <mx:Label id="fontLoadStatus" text="Font is not yet loaded">
        
    </mx:Label>
</mx:Application>

<!---code ends--------------->



-- 

Best regards
Andriy Panas