0 Replies Latest reply on Jan 13, 2011 9:48 AM by fosrias

    How to initialize custom component styles so they work properly in sub-applications


      Anyone have any ideas on how to set up a static initializer that  accesses styles in the parent application so that sub-applications can  be included and custom components can be styled using the style  declaration in the compiled sub-application.


      If you create a custom component and want to apply style properties to it, the standard practice per adobe docs (http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf687e7-7ff6.html#WS2d b454920e96a9e51e63e3d11c0bf69084-79da) is to create a static initializer like:


      // Define a static variable.

      private static var classConstructed:Boolean = classConstruct();


      // Define a static method.

      private static function classConstruct():Boolean {

          if (!FlexGlobals.topLevelApplication.styleManager.getStyleDeclaration("myComponents.StyledRe ctangle"))


              // If there is no CSS definition for StyledRectangle,                

              // then create one and set the default value.

              var myRectStyles:CSSStyleDeclaration = new CSSStyleDeclaration();               

              myRectStyles.defaultFactory = function():void  {                   

                   this.fillColors = [0xFF0000, 0x0000FF];                   

                   this.alphas = [0.5, 0.5];                 }               

              FlexGlobals.topLevelApplication.styleManager.setStyleDeclaration("myComponents.StyledRect angle", myRectStyles, true);           


          return true;



      And there in lies the problem for sub-applications. It seems that custom components don't work with the new style inheritance from modules and sub-applications because your static initializer accesses the FlexGlobals.topLevelApplication, not the parentApplication of the class. The parentApplication, which would have the style selectors defined, is only accessible on an instance (unless I am missing something). This seems like a significant gap in the improvements to style management in Flex 4.


      The only other option I see is to write some kind of code in the constructor to check if the topLevelApplication is the parentApplication and if not look up the style selector for the class, but this seems like a hack.


      Anyone have any idea how to do this cleanly so that custom components in sub-applications work correctly when no style selector for the class is defined in the topLevelApplication styleManager, but rather in the parentApplication style manager?