1 Reply Latest reply on Oct 3, 2009 1:33 AM by vinod.adobe.com

    Applying Styles to custom flex component from external style sheet

    rajdeeprath Level 1
      <?xml version="1.0" encoding="utf-8"?>
      <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"  verticalGap="0">
      
           <mx:HBox width="100%" height="50" styleName="header" id="header" verticalAlign="middle" horizontalAlign="center">
                <mx:TextInput backgroundAlpha="0.0" color="#000000" textAlign="center" fontWeight="bold" fontSize="18" text="CD No." borderStyle="none"/>
           </mx:HBox>
           <mx:VBox width="100%" height="100%" id="content"  styleName="body">
           </mx:VBox>
           <mx:HBox width="100%" height="50" styleName="footer" id="footer" backgroundAlpha="1.0">
           </mx:HBox>
           
      </mx:VBox>
      
       
      

       

      This is my custom flex component:

       

       

      /* CSS file */
      
      .body
      {
           paddingBottom: 5;
           paddingLeft: 5;
           paddingRight: 5;
           paddingTop: 5;
           verticalGap: 0;
           backgroundColor: #a3ddf1;
      }
      
      .header
      {
           paddingBottom: 5;
           paddingLeft: 5;
           paddingRight: 5;
           paddingTop: 5;
           verticalGap: 0;
           backgroundImage: Embed(source="images/default_header.png");
           backgroundSize: "100%";
      }
      
      .footer
      {
           paddingBottom: 5;
           paddingLeft: 5;
           paddingRight: 5;
           paddingTop: 5;
           verticalGap: 0;
           backgroundImage: Embed(source="images/default_footer.png");
           backgroundSize: "100%";
      }
      
       
      

       

      And this is my css style sheet. I have compiled it into swf. I have a total of 3 css like this.

      What i need is that i should be able to load a different css with help of a combobox or list and change the style of th component at runtime.

       

      using StyleManager.loadStyleDeclarations makes my application flicker for a moment before applying the new style. how can i prevent this ?

      is there a better way of applying styles to custom component from css at runtime ?

       

      Please help