13 Replies Latest reply on Aug 23, 2011 10:04 AM by Flex harUI

    Flex 4 - styles

    Jerry62712 Level 1

      Flex 4 is grousing that "StyleManager.setStyleDeclaration(selector, declaration, true);" is in a script.  It suggests replacing all or some of that (it's not clear) with 'IStyleManager2.getStyleDeclaration', but that ups the warning to an error.  Anyone have an idea of how to correctly use this?

        • 1. Re: Flex 4 - styles
          Flex harUI Adobe Employee

          In all UIComponent-based components, you can use "styleManager" (small 's')

          instead of "StyleManager" (big 'S')


          In other places, you should try to get a moduleFactory to use.  If you want

          to use the top-level SystemManager, just ignore the warning or use

          FlexGlobals.topLevelApplication to get a UIComponent

          • 2. Re: Flex 4 - styles
            Jerry62712 Level 1

            I'll look into that.  Meanwhile, in a related problem I can't get an image to appear using Flex 4 when it did appear in Flex 3.


            Using CSS I originally had this:

                background-image:    "images/BannerBackground.jpg";


            This didn't work in Flex 4 so I changed it to this:

                backgroundImage:    Embed(source="images/DHSLogo.gif");


            (both as 'background-image' and the above)


            The directory structure is:







            I tried background-image: "FSCalc/images/DHSLogo.gif"


            (and without the FSCalc, with FSCalc/src, with  src/...)


            In researching it one person said to use skins, but first I want to get the css to work correctly.  I've never used skins so I don't want two new things at one time.

            • 3. Re: Flex 4 - styles
              Flex harUI Adobe Employee

              Are you getting errors or warnings?

              • 4. Re: Flex 4 - styles
                Jerry62712 Level 1

                Nope, no errors or warning.  Just for the heck of it I did put in wrong stuff just to make sure errors would appear, and they did.


                Here is the (incorrect) mxml:

                    <mx:Canvas id="headerBottomBox"
                        x="0" y="66"
                        width="100%" height="100"
                        verticalScrollPolicy="off" horizontalScrollPolicy="off">

                (The style name is bgImage and the above didn't generate any error.)


                I just changed the back ground color and it did reflect in the component so it must be "seeing" the CSS.


                Here are further tests of the css:


                .bgImage {

                /*    background-image:    "/src/images/BannerBackground.jpg"; */
                /*    background-image:    "src/images/BannerBackground.jpg"; */
                /*    background-image:    "images/BannerBackground.jpg"; */
                /*    background-image:    "/images/BannerBackground.jpg"; */
                /*    background-image:    "../images/BannerBackground.jpg"; */
                /*    background-image:    "../BannerBackground.jpg"; */
                /*    background-image:    "FSCalc/images/BannerBackground.jpg"; */
                /*    background-image:    url(images/BannerBackground.jpg); */
                /*    background-image:    url("images/BannerBackground.jpg"); */
                /*    background-image:    url("/images/BannerBackground.jpg"); */
                /*    background-image:    url("../images/BannerBackground.jpg"); */
                /*    background-image:    Embed("images/BannerBackground.jpg"); */
                    background-image:    Embed("/images/BannerBackground.jpg"); 
                /*    background-image:    Embed("../images/BannerBackground.jpg"); */
                    text-align: right;
                    border-style: solid;


                None of these actually (in Flex 4) add a background image.  I've found many of the stylings that were in the application have disappeared with Flex 4.  Do you think it would be better to stick with Flex 3?

                • 5. Re: Flex 4 - styles
                  Flex harUI Adobe Employee

                  Depending on which theme you are using, the background/border class may not

                  support a backgroundImage.


                  In Flex 4, more visual things are controlled by custom skinning.

                  • 6. Re: Flex 4 - styles
                    Jerry62712 Level 1

                    I'm using whatever default theme is out there.  I've not specified anything.


                    Is there a list of controls that CSS won't work with anymore in the new version of Flex?


                    In Flex 3 it took me two lines of CSS to have a background image.  I can't figure out how to do it in Flex 4 using skins, but the default skin file (panel) is about 300 lines long with three overrides and other methods.  Oddly enough, I don't find that easier than the original two lines.


                    I'm reading the Adobe writeup on skins (http://help.adobe.com/en_US/Flex/4.0/UsingSDK/WSC8DB0C28-F7A6-48ff-9899-7957415A0A49.html) and hope you can suggest something else I can read.  I'm 90% done with it, but don't see how to do much.

                    • 7. Re: Flex 4 - styles
                      Flex harUI Adobe Employee

                      The default changed in Flex 4. You should be getting compile time warning.

                      Your app should look quite different from Flex 3.  You can specify the halo

                      theme to go back to a set of skins that support more styles.

                      • 8. Re: Flex 4 - styles
                        Jerry62712 Level 1

                        How do I use Halo and will that get me back the ability to use css?


                        I guess the substitution for css is skins.  There is no skin for canvas so I guess I'll have to change the object.  I looked at Panel, but while that has a background property, it contains no items in it according to the lang ref.  There is a link to rect, but that only has corner stuff and doesn't list any css or whatever replaces css with Flex 4.


                        I don't find it an advantage to give up css (two lines to get a background image) over a skin with over 300 lines, several override methods, several other methods, and still no way that I can find to use css.  I read the prior link to Adobe's skins write up and it didn't help with specifics.  I'm also reading Adobe Flex 4 by Labriola, Tapper and Boles and hope it includes some specifics.  So far they only mention button skins so that hasn't helped at all.


                        While I understand you are not responsible, it has taken a week with no solution in sight to do something that was so easy before.  I'm trying to make a case at work to stick with Flex and the current version, but I'm getting cut off at the knees on this.

                        • 9. Re: Flex 4 - styles
                          Flex harUI Adobe Employee

                          -theme=Halo.swc (You may have to put it in the lib-path or specify the path

                          to the swc.  It is in the themes folder in the SDK folders).


                          It sounds like you are one of the lucky developers for whom all visual

                          changes that they wanted were represented by styles.  We heard from many

                          more folks that they wanted more styles to control more things.  One of the

                          problems with that is each style represents a question that has to be asked

                          and answered before drawing the skin which is a performance drag, and the

                          other was that not having styles for everything limited the expressiveness

                          desired by many of our customers, and made it difficult for designers to

                          simply draw out what they wanted.


                          Custom skinning is definitely a different workflow if you haven't used it in

                          the past, but it is pretty simple: find an existing skin file, copy it, give

                          it a new name, modify its content, specify it as the skinClass and you're

                          done.  And the advantage of this workflow is that you don't have to know

                          what or how styles will impact the skin visuals, and it works the same way

                          for all components.  I'm sure you've discovered that not all components

                          support all styles.


                          There is a "skin" for Canvas.  It is specified as the borderSkin.  The

                          default SparkSkins theme does support styles, so I don't always copy those

                          files, sometimes I start from the wireframe or other sample themes.



                          • 10. Re: Flex 4 - styles
                            Jerry62712 Level 1

                            Thanks, Alex, I appreciate the feedback.


                            I tried using Border and borderSkin as well as Panel and a panelSkin.  In both cases I could use CSS to change the background color, but not add an image.


                            If I change the theme to halo, will CSS work again as it did in Flex 3?


                            I tried to find a language reference for Flex 4, but coudldn't.  Could you point me to it?



                            • 11. Re: Flex 4 - styles
                              Flex harUI Adobe Employee




                              The Halo theme is the same theme that was the default in Flex 3 and supports

                              backgroundImage style.

                              • 12. Re: Flex 4 - styles
                                Jerry62712 Level 1

                                Thanks for the link.  When I tried to google it that wasn't one of the first three pages.


                                So if I return to Halo I can get a backgroundImage, but I can't otherwise.  I was hoping to talk management into going with Flex 4, but I guess I'd better not bring it up.  We do have it (and LiveCycle) for another project, but I was going to push for a more universal usage.


                                I guess it's time to draw a line under it and move on.  Thanks for your time.

                                • 13. Re: Flex 4 - styles
                                  Flex harUI Adobe Employee

                                  The differences between Flex 3 and Flex 4 are significant.  I would do new

                                  projects on Flex 4 and leave significant Flex 3 projects on Flex 3 for now

                                  unless you need something Flex 4 provides.


                                  That said, keep in mind that Flex 3 will become less and less of a priority

                                  for Adobe and the amount of knowledge and support available for it will wane

                                  over time, so I would think about upgrading someday.  It might be that if an

                                  app won't need upgrades and new features it can just stay on Flex 3

                                  "forever".  I was very happy using Outlook 2000 for email at home and only

                                  an upgrade to a new computer and Win7 forced me to move.