7 Replies Latest reply on Nov 18, 2009 9:43 PM by Flex harUI

    Nuts and bolts of styling?

    msakrejda Level 4

      I'm trying to build a run-time style system for some of our components by extending the built-in system. I've found a lot of info on how to style your components, but not really a good overview of the styling subsystem (including in the dev guide).

       

      Specifically, I need to be able to parse some custom style definitions, build CSSStyleDeclarations at runtime, merge them with the existing styling for that component (i.e., what StyleManager thinks the styling should be), and apply this style to a particular instance of the component. That is, each instance can have its own runtime style definitions, but they will typically share StyleManager styles. E.g.,here's what I'd like to do in magical pseudo-code:

       

      var foo:MyComponent;

      var customFooStyles:Object = { backgroundColor : 'red', color : 'black' }

      var existingApplicableStyleDeclarations:Array = StyleManager.getApplicableStyleDeclarations(foo);

      var runtimeCSS:CSSStyleDeclaration = new CSSStyleDeclaration();

      runtimeCSS.overrides = customFooStyles;

      existingApplicableStyleDeclarations.shift(runtimeCSS);

      StyleManager.setStyleDeclarations(foo);

       

      The problem is that those magical StyleManager methods do not exist (and I'm not sure how to build the additional CSS), but I hope it gets across what I'm trying to do.

       

      Is there a sane way to achieve this? An insane way? Should I be building a new CSSStyleDeclaration, or adding overrides to one from StyleManager? If adding overrides, there can be more than one CSSStyleDeclaration that applies to the component, right? Based on className and styleName? Should I set factory, defaultFactory, or just overrides? I can't really set a CSSStyleDeclaration on a component--should I set a unique className and register that with StyleManager, or should I go through each style manually and apply it to the component with setStyle()? If I do that, can I somehow chain this onto other applicable declarations so I don't lose them?

        • 1. Re: Nuts and bolts of styling?
          Flex harUI Adobe Employee

          Setting styleName on each component will tell it to look for a particular set of styles.  You can load the actual set of styles via CSS modules.  Any styles not found there will then be searched for on the Type selectors and global selector.  I would think/hope that is sufficient for your needs.

           

          Alex Harui

          Flex SDK Developer

          Adobe Systems Inc.

          Blog: http://blogs.adobe.com/aharui

          1 person found this helpful
          • 2. Re: Nuts and bolts of styling?
            msakrejda Level 4

            That helps, but unfortunately, one of the requirements is to be able to apply styles that do not need to be compiled with mxmlc, so I do need to be able to build my own CSSStyleDeclarations and somehow shimmy them into the chain. We already *are* using style modules for some "base" styles which we are fine with compiling (and this works quite well). However, we need to support some plain-text runtime style configuration as well.

             

            It occurs to me that these components should never use styleName, so I should be able to hijack that for my purposes. As I understand what you've said, if I build a custom CSSStyleDeclaration with my styles and register it with the StyleManager under some randomly generated styleName and assign the same styleName to the component, things should just work automagically when the component is first added to the display list, no?

            • 3. Re: Nuts and bolts of styling?
              Flex harUI Adobe Employee

              In the "HTML and Flex" post on my blog, the sample code parses a CSS plain-text file on the fly.

               

              Alex Harui

              Flex SDK Developer

              Adobe Systems Inc.

              Blog: http://blogs.adobe.com/aharui

              1 person found this helpful
              • 4. Re: Nuts and bolts of styling?
                msakrejda Level 4

                I wasn't that worried about the CSS-parsing part, but thank you anyway--I'll take a look.

                • 5. Re: Nuts and bolts of styling?
                  Flex harUI Adobe Employee

                  IIRC, after parsing it registers the styles with the StyleManager.

                   

                  Alex Harui

                  Flex SDK Developer

                  Adobe Systems Inc.

                  Blog: http://blogs.adobe.com/aharui

                  • 6. Re: Nuts and bolts of styling?
                    msakrejda Level 4

                    It does not really look like it:


                        private function parseCSS(data:String):void
                        {
                            var ss:StyleSheet = new StyleSheet();
                            ss.parseCSS(data);
                            var n:int = ss.styleNames.length;
                            for (var i:int = 0; i < n; i++)
                            {
                                var styleName:String = ss.styleNames[i];
                                var styles:Object = ss.getStyle(styleName);
                                //trace(styleName);
                                var declaration:CSSStyleDeclaration = new CSSStyleDeclaration(styleName.toLowerCase());
                                for (var p:String in styles)
                                {
                                    var value:Object = styles[p];
                                    switch (p)
                                    {
                                    case "fontSize":
                                    case "marginLeft":
                                    case "marginRight":
                                    case "marginBottom":
                                    case "marginTop":
                                        value = parseInt(value as String);
                                        break;
                                    case "fontFamily":
                                        value = getFontFamily(value as String);
                                    }
                                    //trace(p, value);
                                    declaration.mx_internal::setStyle(p, value);
                                }
                            }
                        }

                     

                    Although I'll abide by your no-bug-reports disclaimer and won't ask for more here. Your answers give me plenty to get started (especially the StyleSheet class--I did not know about that and it looks like it could be awful handy); I'll ask a more specific question if I run into more problems. Thanks again.

                    • 7. Re: Nuts and bolts of styling?
                      Flex harUI Adobe Employee

                      Yeah, that's basically it.  The CSSStyleDeclaration holds the styles and is registered with the StyleManager. The styleName will now be available so that if you set the matching styleName on the component it will now be able to use those styles and any not there will be searched for in type selectors and global selectors.

                       

                      Alex Harui

                      Flex SDK Developer

                      Adobe Systems Inc.

                      Blog: http://blogs.adobe.com/aharui