0 Replies Latest reply on Jan 19, 2010 6:03 AM by aaronb2

    Unable to update the styles within a component and its children

    aaronb2

      I have this application which I changed to a canvas component.  When I had it as an application, I could change the loaded Style during run-time using the StyleManager class and the compiled CSS.  Since I changed it, I decided to embed the CSS style sheets.  Can you use the embedded style sheets to change the style during run-time?  The reason I am asking this is it's not working for me.

       

      Here's how I embedded the style sheets:

          // embed style sheets
          [Embed(source="assets/css/BlueTan.css",mimeType="application/octet-stream")]
          private var styleBlueTanCSS:Class;
          [Embed(source="assets/css/Minty.css",mimeType="application/octet-stream")]
          private var styleMintyCSS:Class;
          [Embed(source="assets/css/Plain.css",mimeType="application/octet-stream")]
          private var stylePlainCSS:Class;      
          [Bindable] private var styleSheetArray:ArrayCollection = null;
      

       

      Here's the code that does the loading of the initial style sheet:

           private function onPreinitialize(evt:FlexEvent):void
           {
                var blueTanStyleSheet:StyleSheet = new StyleSheet;
                blueTanStyleSheet.parseCSS(new styleBlueTanCSS().toString());
      
                var mintyStyleSheet:StyleSheet = new StyleSheet;
                mintyStyleSheet.parseCSS(new styleMintyCSS().toString());
      
                var plainStyleSheet:StyleSheet = new StyleSheet;
                plainStyleSheet.parseCSS(new stylePlainCSS().toString());
                
                styleSheetArray     = new ArrayCollection(
                    [
                     {label:"BlueTan", data:blueTanStyleSheet},
                         {label:"Minty",data:mintyStyleSheet},
                         {label:"Plain",data:plainStyleSheet}
                     ]);
          
                changeSkin(styleSheetArray.getItemAt(0).data);
           }
      

       

       

      And, here's the code that changes the style sheet during run-time:

           private function changeSkin(styleSheet:StyleSheet):void
           {
               var cssDec:CSSStyleDeclaration;
               var style:Object;
                for each(var styleName:String in styleSheet.styleNames) {
                   cssDec = new CSSStyleDeclaration(styleName);
                   style=styleSheet.getStyle(styleName);
                   for(var styleProp:String in style) {
                       cssDec.setStyle(styleProp,style[styleProp]);
                   }
                   StyleManager.setStyleDeclaration(styleName,cssDec,true);
                  }        
                if (world) world.updateStyle();
                this.commitProperties();
                this.invalidateDisplayList();
                this.invalidateProperties();
                this.invalidateSize();
             }
      

       

      Thanks,

       

      Aaron