6 Replies Latest reply on Sep 10, 2009 11:16 AM by Joann Chuang Anderson

    Background Color on Application tag not showing...

    wicket971 Level 1

      I just recently upgraded to the nightly build version # 4.0.0.10045 and the backgroundColor property on the main application tag is no longer rendering the background color. I noticed a new ApplicationSkin.mxml in the spark skins with the following:

       

      <!---

              A rectangle with a solid color fill that forms the background of the application.

              The color of the fill is set to the Application's backgroundColor property.

          -->

          <s:Rect id="backgroundRect" left="0" right="0" top="0" bottom="0"  >

              <s:fill>

                  <s:SolidColor color="{getStyle('backgroundColor')}" />

              </s:fill>

          </s:Rect>

       

       

      However adding a backgroundColor property to the Application tag or in the CSS has not given any results.

        • 1. Re: Background Color on Application tag not showing...
          Joann Chuang Anderson

          I just tried in 4.0.0.10071 and it works for me:

           

          <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/halo"
                         xmlns:local="*" backgroundColor="0x000000">
          </s:Application>

           

          If you're in FlashBuilder, you may want to clean your project and rebuild.

           

          Joann

          • 2. Re: Background Color on Application tag not showing...
            Joann Chuang Anderson Level 1

            I should add that backgroundColor is now a style not a property on Application, so things like myApp.backgroundColor = 'red' won't work, you'd have to do myApp.setStyle('backgroundColor', 'red').  For example:

             

            <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/halo"
                           xmlns:local="*" backgroundColor="0x000000">
                <fx:Script>
                    <![CDATA[
                        import mx.core.FlexGlobals;
                    ]]>
                </fx:Script>
               
                <s:Button click="FlexGlobals.topLevelApplication.setStyle('backgroundColor', 'red')"/>
            </s:Application>

             

            Clicking on the button will cause the backgroundColor to be red at runtime.

            • 3. Re: Background Color on Application tag not showing...
              wicket971 Level 1

              Ok it turns out it is not the application tag causing problems, but the halo VBoxes, HBoxes and Viewstacks. It seems I can no longer apply background colors to them at all.

               

              Here's an example:

               

              <mx:VBox id="footerVBox" horizontalAlign="center" verticalGap="-5" paddingBottom="5" paddingTop="0" backgroundColor="0xFF0000" width="600">

                   <mx:HBox horizontalGap="1" verticalAlign="middle">

                        <mx:Label text="{copyrightSymbol} 2009 SearchIgnite" fontSize="12" color="#003366" />

                        <mx:VRule height="12" strokeColor="#003366"/>

                        <mx:Label text="{'Version ' + version}" fontSize="12" color="#003366"/>

                        <mx:VRule height="12" strokeColor="#003366"/>

                        <mx:Label text="Customer Service 888-744-6483" fontSize="12" color="#003366" />

                   </mx:HBox>

              </mx:VBox>

               

              Is rendering with a white background behind it, obsucring the background color of my application. The backgroundColor style property is not getting applied at all.

               

              Upon rewriting this group as:

               

              <s:Group id="footerVBox" width="100%">

                   <s:layout>

                        <s:VerticalLayout horizontalAlign="center" paddingBottom="5" paddingTop="5"  />

                   </s:layout>

                   <s:Group>

                        <s:layout>

                             <s:HorizontalLayout verticalAlign="middle" />

                        </s:layout>

               

                       <s:Label text="{copyrightSymbol} 2009 SearchIgnite" fontSize="12" color="#003366" />

                       <mx:VRule height="12" strokeColor="#003366"/>

                       <s:Label text="{'Version ' + version}" fontSize="12" color="#003366"/>

                       <mx:VRule height="12" strokeColor="#003366"/>

                       <s:Label text="Customer Service 888-744-6483" fontSize="12" color="#003366" />

              </s:Group>

              </s:Group>       

               

              I am able to get the background color of the app to show through. Again I am using build version 4.0.0.10045 and this was not an issue in the previous builds.

              • 4. Re: Background Color on Application tag not showing...
                Joann Chuang Anderson Level 1

                Unfortunately 10045 is an in between build where this wasn't working.  If you get something after 4.0.0.10064 your original code should work as expected.

                 

                Joann

                • 5. Re: Background Color on Application tag not showing...
                  wicket971 Level 1

                  Doh!  =)  Thanks for the response back. I can now move on in my project.

                  • 6. Re: Background Color on Application tag not showing...
                    Joann Chuang Anderson Level 1

                    No problem.  Please do continue to post if you do see issues though, we've only just started testing it.