12 Replies Latest reply on Apr 12, 2010 12:53 PM by Peter deHaan

    Moving to Flex 4

    Zolotoj Level 3

      Just upgraded  my Flex 4 Beta 2 code to Flex 4.

      Doing compiling I am getting message:

      The style 'backgroundColor' is only supported by type 'mx.controls.Tree' with the theme(s) 'halo'.

      What exactly does that mean?

       

      Thanks

        • 1. Re: Moving to Flex 4
          Peter deHaan Level 4

          It means that some styles are only supported by some themes. The default theme for Flex 4 apps is the new "spark" theme. In Flex 3 the default theme was "halo".

           

          You can either switch to the Halo theme in Flex 4 or you can use the Spark theme and try setting the contentBackgroundColor style instead of the backgroundColor style, as seen in the following example:

           

          <?xml version="1.0" encoding="utf-8"?>
          <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                         xmlns:s="library://ns.adobe.com/flex/spark"
                         xmlns:mx="library://ns.adobe.com/flex/mx">
              
              <mx:Tree id="tr"
                       labelField="@label"
                       contentBackgroundColor="haloBlue"
                       width="200" rowCount="5"
                       horizontalCenter="0" verticalCenter="0">
                  <mx:dataProvider>
                      <mx:XMLListCollection>
                          <mx:source>
                              <fx:XMLList xmlns="">
                                  <node label="foo">
                                      <node label="foo.1" />
                                      <node label="foo.2" />
                                      <node label="foo.3" />
                                      <node label="foo.4" />
                                  </node>
                                  <node label="bar">
                                      <node label="bar.1" />
                                      <node label="bar.2" />
                                      <node label="bar.3" />
                                  </node>
                              </fx:XMLList>
                          </mx:source>
                      </mx:XMLListCollection>
                  </mx:dataProvider>
              </mx:Tree>
              
          </s:Application>
          

           

          Peter

          • 2. Re: Moving to Flex 4
            Zolotoj Level 3

            But then the background color only appears behind tree nodes. I need to color the background of a container the tree is in.

            • 3. Re: Moving to Flex 4
              wind_surfer

              I am having the same problem. What do you mean by switch to the halo theme? You did not provide an example on how to do this. I cannot use the halo namespace anymore because it also results in compiler errors. I have

              been trying to get help on this issue for the last several days with many hours spent on hold, many

              requests to customer support and I have had no real answers.

              I am having trouble figuring out WHY Adobe would do this. It makes no sense to change a tool and not let anyone know about it.

              • 4. Re: Moving to Flex 4
                SpaghettiCoder Level 3

                *yawn*

                 

                click on your app

                click on the appearance tab

                click on on current theme: Spark and change it to whatever.

                • 5. Re: Moving to Flex 4
                  Ansury Level 3

                  SpaghettiCoder wrote:

                   

                  *yawn*

                   

                  click on your app

                  click on the appearance tab

                  click on on current theme: Spark and change it to whatever.

                   

                  IIRC, I've recently done that with a Fx3 app and it had no effect on the bogus warning.

                  • 6. Re: Moving to Flex 4
                    wind_surfer Level 1

                    OK, I did that and the error went away, but my app still does not work. My embedded fonts do not show and I still get a hundred or so warnings about not being able to resolve namespace qualified type 'Button' in css selector 'Button'  and so forth for many other components.

                     

                    I WISH I could copy the error messages produced by FB, but it won't let me!

                    • 7. Re: Moving to Flex 4
                      SpaghettiCoder Level 3

                      Oh well if it doesn't let you then you're done for.

                       

                      ...

                       

                      There's always a screen cap, or you could always type the error msg character by character.

                      • 8. Re: Moving to Flex 4
                        wind_surfer Level 1

                        ???

                         

                        I really don't care about the error as much as HOW to solve it.

                         

                        If you have any helpful suggestions, I would very much welcome them.

                         

                        Was the info on the error that I provided not adequate to determine a solution?

                        • 9. Re: Moving to Flex 4
                          Peter deHaan Level 4

                          Since Flex 4 has two different "Button" components (mx:Button and s:Button), your CSS now needs namespaces, so it will either need to be mx|Button or s|Button, and you'll need to import the appropriate namespace.

                           

                          Similarly, Flex 4 supports the old flash.text.TextField classes which used a different font engine than the newer Spark components which use Flash Player's Flash Text Engine (FTE) and the new Text Layout Framework (TLF). Therefore, it isn't as straight forward as embedding a font and using it globally anymore. You'll either need to set embedAsCFF=false in your font embeds if you're using MX controls/containers, or set embedAsCFF=true (the default) if you are using Spark controls/containers. Or, you can set use the MXFTEText.css "theme" (either as a command line argument or there should be a checkbox in the project properties to use Flash Text Engine in MX components).

                           

                          Unfortunately I wouldn't expect that you can take a Flex 3.x app and compile it against the Flex 4 SDK without a certain amount of tweaking and refactoring.

                           

                          But if you can post the errors you're seeing, or some simple sample code (not an entire 4000+ line project) we can take a look and help debug the errors.

                           

                          Peter

                          • 10. Re: Moving to Flex 4
                            wind_surfer Level 1

                            Hi Peter,

                             

                            Thanks for your reply.

                             

                            All this stuff worked when I was using beta 2.

                             

                             

                            This is my css: (sorry, this forum software mangles it!)

                            @font-face{

                             

                            src

                            :url("arialbd.ttf");

                             

                            :url("arialbd.ttf");

                            :url("arialbd.ttf");

                             

                             

                             

                             

                            fontFamily:"Arial";

                             

                            fontStyle: normal;

                             

                            fontWeight: bold;

                             

                            embedAsCFF:true;

                            }

                             

                            My font disappeared when I went to halo theme. But, if I stay in halo, I get the other error. So, I'm damned if I do and damned if I don't.

                            Why did it work just fine in Beta 2? I would rather just keep the same source code and not have to debug for hours and hours just because the tools have changed.

                             

                            I'm still getting 191 warnings that it: Cannot resolve namespace qualified type 'Button' in css selector 'Button'

                            and many other warnings like it with other components. It only shows 100 warnings, so I'm not sure what else is wrong.

                             

                            Also, when at Adobe MAX 2009, I attended some classes on this issue. A presenter (I forget who) gave me this compiler setting:

                            -locale en_US -theme+=${flexlib}\projects\spark\TLFText.css -show-unused-type-selector-warnings=false

                             

                            I'm not sure if this is working anymore and I wish I knew what to do next.

                             

                            Thanks again,

                            Shannon Vance

                             

                             

                             

                            • 11. Re: Moving to Flex 4
                              Peter deHaan Level 4

                              TLFText.css was renamed to MXFTEText.css

                               

                              As for next steps, I suggest creating a brand new project using the Flex 4.0 SDK (build 14159 was the final build/version) and embed your font, and try and create a very simple use case where the Button's label isnt showing and you're seeing errors/warnings. Then paste that simple example on the forums and we can take a look.

                              Without seeing any of your code or errors, I can only guess at solutions.

                               

                              Peter

                              • 12. Re: Moving to Flex 4
                                Peter deHaan Level 4

                                For example, I tested this quickly, and the following example works in Flex 4.0.0.14159 with the Spark theme or old Halo theme (when I use the MXFTEText.css file by clicking the "Use Flash Text Engine in MX components" checkbox in my project properties Flex Compiler section):

                                 

                                 

                                <?xml version="1.0" encoding="utf-8"?>
                                <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                                               xmlns:s="library://ns.adobe.com/flex/spark"
                                               xmlns:mx="library://ns.adobe.com/flex/mx">
                                    
                                    <fx:Style>
                                        @namespace s "library://ns.adobe.com/flex/spark";
                                        @namespace mx "library://ns.adobe.com/flex/mx";
                                        
                                        @font-face{
                                            src: url("c:/windows/fonts/arial.ttf"); 
                                            fontFamily: Arial;
                                            fontStyle: normal;
                                            embedAsCFF:true;
                                        }
                                        
                                        @font-face{
                                            src: url("c:/windows/fonts/arialbd.ttf"); 
                                            fontFamily: Arial;
                                            fontStyle: normal;
                                            fontWeight: bold;
                                            embedAsCFF:true;
                                        }
                                        
                                        mx|Button {
                                            fontFamily: Arial;
                                        }
                                    </fx:Style>
                                    
                                    <s:VGroup x="20" y="20">
                                        <s:Button label="Spark Button" />
                                        <mx:Button label="MX Button" fontWeight="normal" />
                                        <mx:Button label="MX Button (bold)" fontWeight="bold" />
                                    </s:VGroup>
                                    
                                </s:Application>