5 Replies Latest reply on Feb 21, 2009 4:58 PM by Gregory Lafrance

    Loading CSS at runtime

    Mainmanian Level 1
      I have a very simple css file that has three styles declared. I have an application that loads the swf file by StyleManager.loadStyleDeclarations("mycss.swf",true).

      The styles do not get applied to my myTextArea.htmlText for some reason. Has anyone else encountered this and if so, can you please provide some pointers? Thanks
        • 1. Re: Loading CSS at runtime
          Gregory Lafrance Level 6
          What is your CSS? Flex does not support all CSS. Maybe share simplified code.
          • 2. Re: Loading CSS at runtime
            Mainmanian Level 1
            The following is the application that loads the CSS and the CSS itself. Thanks for the help. Cheers

            <?xml version="1.0" encoding="utf-8"?>
            <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
            <mx:Script>
            <![CDATA[
            import mx.events.StyleEvent;
            import flash.display.Sprite;
            import flash.events.Event;
            import flash.net.URLLoader;
            import flash.net.URLRequest;
            import flash.text.StyleSheet;
            import mx.controls.Alert;
            private var loader:URLLoader;
            private var exampleText:String = "<span class='style2'>Adaptive Movement is a</span> <span class='style1'>Supply Chain</span> <span class='style2'>company that allows you to</span> " +
            "<span class='style1'>connect</span><br> <span class='style2'>with the whole world as if it is in</span> your<span class='style1'> backyard</span><br>" +
            "<span class='style2'>Here you can</span> <span class='style1'>Buy</span>, <span class='style1'>Sell</span> <span class='style2'>and</span> <span class='style1'>Store</span>";

            public function init():void{
            try {
            StyleManager.loadStyleDeclarations( "css/globalStyles.swf",true);
            }catch(err:Error){
            Alert.show(err.message);
            }
            field.htmlText = exampleText;
            }
            ]]>
            </mx:Script>
            <mx:TextArea x="145" y="121" width="600" height="300" id="field" condenseWhite="true"/>
            </mx:Application>

            The css code is

            .style1 {
            font-family: Verdana, Arial, Helvetica, sans-serif;
            font-size: 21px;
            font-weight: bold;
            font-variant: small-caps;
            color: #000000;
            }
            .style2 {
            font-family: "Times New Roman", Times, serif;
            font-size: 19px;
            color: #000000;
            }

            .style3 {
            font-family: Georgia, "Times New Roman", Times, serif;
            font-size: 44px;
            font-weight: bold;
            color: #993399;
            }
            • 3. Re: Loading CSS at runtime
              Gregory Lafrance Level 6
              I think the problem is that Flex does not support all HTML constructs in the htmlText property.

              This (using styleName property) shows the styles can be accessed:

              <mx:TextArea styleName="style1" x="145" y="121" width="600" height="300" id="field" condenseWhite="true"/>
              • 4. Re: Loading CSS at runtime
                Mainmanian Level 1
                Does this mean, "span" tag is not supported and do you have a suggestion on how I could display my text the way I want? Thanks
                • 5. Re: Loading CSS at runtime
                  Gregory Lafrance Level 6
                  Flex is not great at rendering text in this way. You could use different Text controls, each with a styleName property, or you could put your style info in the HTML, such as in <font> tags.