18 Replies Latest reply on Jun 19, 2009 2:30 AM by Jason Villmer

    Broken Style

    Jason Villmer Level 1

      I've been using a wonderful Style within Flex Builder 3.3 but it appears that using Flash Builder 4 (and version 4.0.0.7910 of the SDK) completely removes it. Is there a quick solution to this?

        • 1. Re: Broken Style
          GordonSmith Level 4

          What do you mean by "using a wonderful Style"? Style of what?

           

          Gordon Smith

          Adobe Flex SDK Team

          • 2. Re: Broken Style
            Jason Villmer Level 1

            Gordon,

             

            I'm using a skin from http://www.scalenine.com. Works great in Flex 

            Builder 3.3 but the new 4.0 sdk breaks it entirely. Is there a new 

            method for applying skins. I've recently migrated a 3.3 project to 

            Builder 4 and the only thing missing (not working) is the skin. (.css)

             

            Jason Villmer

            www.lucid.it

            villmer@lucid.it

            • 3. Re: Broken Style
              eh_adobe Level 1

              For Flex 4 projects, make sure to update the .css with new namespaces, e.g.

               

              @namespace "library://ns.adobe.com/flex/halo";

               

              or:

              @namespace s "library://ns.adobe.com/flex/spark";
              @namespace mx "library://ns.adobe.com/flex/halo";

              and then add the namespace, e.g. Button -> mx|Button

              • 4. Re: Broken Style
                Jason Villmer Level 1

                Imported Flex Builder 3.3 projects should offer 'migration assistance' 

                that would allow the project to be 'updated' with all the proper 

                namespaces.

                 

                Jason Villmer

                www.lucid.it

                villmer@lucid.it

                • 5. Re: Broken Style
                  Jason Villmer Level 1

                  Yeah, this is really a pain. Having to figure out which namespaces to 

                  change. I've spent over an hour replacing namespace tags and my style 

                  skins still don't update and my components still have conflicts. I 

                  should be able to import a Flex 3.3 project and have the application 

                  prompt to 'migrate to Flex 4 configuration' or something. The only 

                  thing I'm trying to do is use my skin style, that's it. I shouldn't 

                  have to spend any time trying to find and make the proper code 

                  adjustment for a migration.

                   

                  Jason Villmer

                  www.lucid.it

                  villmer@lucid.it

                  • 6. Re: Broken Style
                    Peter deHaan Level 4

                    Jason,

                     

                    Can you file an enhancement request against Flash Builder at http://bugs.adobe.com/flex/

                     

                    Thanks,

                    Peter

                    • 7. Re: Broken Style
                      Jason Villmer Level 1

                      I've also experienced the same issues by just replacing my 4.0.0.4600 

                      sdk with the updated 4.0.0.7910 in Flex Builder 3.3. One of the most 

                      important things to me is being able to attach one line of code 

                      <mx:Style source="style/style.css"/> and have my entire application be 

                      reskinned for me without hassle. I don't use the default skin/theme of 

                      Flex/Flash Builder. Flash Builder 4 should offer a MIGRATION ASSISTANT 

                      with perhaps a list of checkboxes of things you want updated / 

                      migrated. I'm not yet sure how to get the simple act of styling back 

                      with 4.0.0.7910 or Flash Builder 4.

                       

                      Jason Villmer

                      www.lucid.it

                      villmer@lucid.it

                      • 9. Re: Broken Style
                        tinylion_uk Level 2

                        Also it sometimes helps if you grab the original halo css file from the sdk and include that at the start of your main mxml file. Then include your custom style next.

                         

                        This makes sure that all the styles are set as they're expected to be by the custom style you're using

                        • 10. Re: Broken Style
                          Jason Villmer Level 1

                          TinyLion,

                           

                          How do I include / incorporate the original halo css file into the 

                          project?

                           

                          Jason Villmer

                          www.lucid.it

                          villmer@lucid.it

                          • 11. Re: Broken Style
                            Peter Farland Level 3

                            To have a Flex 3 application compile as it were still a Flex 3 application in Flex 4, you set the --compatibility-version=3 switch for the compiler. This would avoid the need to have to specify namespaces for CSS type selectors too (and will cause the defaults-3.0.0.css file to be loaded from the framework swcs instead of the defaults.css).

                             

                            How many type selectors have you used in your style sheets that needed to be changed?

                             

                            That said, if you're now trying to add Flex 4 components to your existing Flex 3 application, then a tool to help you migrate the halo content and include the correct namespaces would be useful.

                             

                            Pete

                            • 12. Re: Broken Style
                              Jason Villmer Level 1

                              Pete,

                               

                              Actually I had been using the 4.0.0.4600 SDK in Flex and all was fine. 

                              Components worked fine and all CSS skinning was perfect. Once I 

                              updated the SDK to 4.0.0.7910, all was lost in terms of applying the 

                              CSS style. This was additionally the case when attempting to import 

                              the Flex project to Flash Builder 4.

                              issue

                               

                              My objective is to bring the Flex Builder project into Flash Builder 

                              4, keep the applied CSS skin (Kingsnare) and use the new component 

                              features. I know there are new issues in FB4, including new 

                              namespaces,  but I certainly expected my Flex Builder 3 project to 

                              remain in tact. I had, at least, expected some kind of Migration 

                              Assistant to point out what elements would be broken - and 

                              additionally ask me if I wanted to update them. The two most important 

                              ones are the CSS styles and the namespaces. I must admit, if you've 

                              got a highly customized Flex 3 application (both technically and 

                              visually) the migration to Flash Builder 4 is painful.

                               

                              Jason Villmer

                              www.lucid.it

                              villmer@lucid.it

                              • 13. Re: Broken Style
                                Jason Villmer Level 1

                                Pete,

                                 

                                I went ahead and set the -compatibility-version=3.0 switch for the 

                                compiler and all works well now! Thank you so much. I also read about 

                                this issue here: http://www.adobe.com/devnet/flex/articles/flex3and4_differences_02.html

                                 

                                Jason Villmer

                                www.lucid.it

                                villmer@lucid.it

                                • 14. Re: Broken Style
                                  Jason Villmer Level 1

                                  Excellent! I was VERY concerned that I might lose the application's style.

                                  • 15. Re: Broken Style
                                    Peter Farland Level 3

                                    Hi Jason,

                                     

                                    Note that if you're looking to add Flex 4 features to your existing application you'd have to move away from the --compatibility-version=3 switch. (Also, the change between those pre-release builds of Flex 4 was that the Fx prefix was dropped from component names and so a mechanism to disambiguate between identically named components in different namespaces was extended to CSS).

                                     

                                    If you want to avoid using namespaces to qualify type selectors in CSS then instead of the --compatibility-version switch you could specify --qualified-type-selectors=false and still use Flex 4 features. You just need to make sure you don't try to style types from different namespaces (i.e. a halo Button and a spark Button) in the same application.

                                     

                                    If you wanted to retain the legacy halo look for halo components then perhaps you could apply the halo theme? (However, if you ended up adding the new Spark components to your application I don't think they have a halo theme and you'd need to manually skin them).

                                     

                                    Pete

                                    • 16. Re: Broken Style
                                      Jason Villmer Level 1

                                      Pete,

                                       

                                      Thanks for the info. I do indeed want to use the Flash Builder 4 

                                      components so I suppose the -compatibility-version=3 switch isn't the 

                                      solution I'm after. Although, this does solve the issue of retaining 

                                      styles in Flex Builder (using the 4.0.0.7910 SDK). I tried using the -

                                      qualified-type-selectors=false switch in Flash Builder but it broke a 

                                      few things. In Flex Builder I'm only needing to use one line to get 

                                      the style working: <mx:Style source="style/style.css"/>

                                      What do you recommend would be the easiest, fastest way to get this 

                                      style working in my application AND retain the capacity to use the 

                                      Flash Builder 4 components?

                                       

                                      Jason Villmer

                                      www.lucid.it

                                      villmer@lucid.it

                                      • 17. Re: Broken Style
                                        Peter Farland Level 3

                                        As a compromise, if you were primarily using halo components then set the halo namespace as the default. Just add one line at the beginning of your style.css file and you avoid having to prefix halo type selectors:

                                         

                                        @namespace "library://ns.adobe.com/flex/halo";

                                         

                                        When you need to add new Flex 4 spark components to your application you could add another @namespace declaration and pick a prefix:

                                        @namespace s "library://ns.adobe.com/flex/spark";

                                         

                                        So this would be a pay-as-you-go solution.

                                        • 18. Re: Broken Style
                                          Jason Villmer Level 1

                                          Pete,

                                           

                                          Adding @namespace "library://ns.adobe.com/flex/halo" to the style.css 

                                          worked. Excellent.

                                          I'll be attempting to integrate some of the new 4.0 components now. 

                                          Hopefully this will unfold well.

                                           

                                          Jason Villmer

                                          www.lucid.it

                                          villmer@lucid.it