7 Replies Latest reply: Jun 17, 2009 9:15 AM by joan_lafferty RSS

    BackgroundColor and Alpha in Flex 4

    Hironmay Community Member

      Hi,

       

      I created a new project in flex 4 and was integrating some old codes of ours that were written in flex 3. I am running into styling issues. My css has backgroundAlpha and backgroundColor which doesn't seem to work for old components that were written in flex 3.

      I have used the namespacing in .css file as went through some the differences mentioned here http://www.adobe.com/devnet/flex/articles/flex3and4_differences_02.html.

       

      One option for me is to make --qualified-type-selectors=false, or --compatibility-version=3 but i can't use flex 4 styling features for the new components I write.

       

      I looked more and found that we can use only certain styles like contentBackgroundColor but do we have anything for alpha. How can make my old mx components work in flex 4 that also has new fx:style with the .css. Is there a way that my old components keep using the same .css styles in such a project that also has new flex components and styles.

       

       

      Thanks

      Hironmay Basu

        • 1. Re: BackgroundColor and Alpha in Flex 4
          Peter deHaan Community Member

          Hironmay Basu,

           

          Depending on the component, it may be necessary to create a custom skin.

           

          For example, to set the background alpha on the Spark TextArea control, I'd copy/paste the default TextAreaSkin.mxml file (frameworks\projects\flex4\src\spark\skins\default\TextAreaSkin.mxml), and set the alpha property on the fill to whatever you want. For example, change the fill to the following snippet (only added alpha and set it to 0.5 (50%)):

           

              <!-- fill -->
              <!--- Defines the appearance of the TextArea component's background. -->
              <s:Rect id="background" left="1" right="1" top="1" bottom="1">
                  <s:fill>
                  <!--- Defines the background fill color. -->
                      <s:SolidColor id="bgFill" color="0xFFFFFF" alpha="0.5" />
                  </s:fill>
              </s:Rect>

           

           

          Now, in your Flex application, set the custom skin class to the new, custom skin:

           

          <?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/halo">

           

              <s:TextArea id="textArea"
                contentBackgroundColor="red"
                skinClass="skins.TextAreaAlphaSkin"
                horizontalCenter="0"
                verticalCenter="0">
               <s:text>The quick brown fox jumps over the lazy dog.</s:text>
              </s:TextArea>

           

          </s:Application>

           

          Peter

           

          Update: You can see a more complete example at http://blog.flexexamples.com/2009/06/02/creating-a-transparent-spark-textarea-control-in-f lex-gumbo/.

          • 2. Re: BackgroundColor and Alpha in Flex 4
            Hironmay Community Member

            Hi,

             

            My question is actually related more with mx components. Here is what I am doing :

             

            I have a .css file that has skins for mx lists

             

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

            mx|List
            {
                borderStyle: none;
                fontFamily: "Myriad Pro";
                fontSize: 14;
                selectionColor: #645182;
                color: #333333;
                backgroundColor : #333333 ;
                rollOverColor: #534863;
                leading: 5;
                textRollOverColor: #FFFFFF;
                textSelectedColor: #FFFFFF;
                paddingLeft: 20;
            }

             

            Now I have my application.mxml that has something like this ( it has both spark and other component)

             

            <s:WindowedApplication 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:component="*" xmlns:tabs="com.adobe.rtc.tabs.*" width="800" height="600"

                 <fx:Style source="skins.css" />

                 <s:Button label="Open Console"  width="200" x="100"/>

                 <component:MyComponent />

            </s:WindowedApplication>

             

            and MyComponent.mxml is the file that has the mx List whose style it uses from the mx file.

             

            MyComponent.mxml is something like this

            <mx:List id="myStyleList" width="200" height="100" />

             

            The list uses the style defined above in .css but it doesn't use things like backgroundAlpha or backgroundColor rather it uses something like contentBackgroundColor(if i define it ) . Shouldn't my old mx components keep using all the styles I defined earlier?

             

            The use case came as I was integrarting parts of my old project (with its styles and mx classes) into my new project built with Flex 4, but i am running into all these styling issues.

             

            Please let me know how we can solve problems like this.

             

            Thanks

            Hironmay Basu

            • 3. Re: BackgroundColor and Alpha in Flex 4
              rfrishbe Community Member

              The Halo components by default use the Spark skin.  These skins don't have support for all of these styles.  You could either use the new styles or switch to a Halo theme.  For more info, check out:

               

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

               

              "If you do choose to use the new Spark theme, note that many               of the styles that worked with the Halo theme do not work in the Spark theme.               The Spark theme only supports a limited number of styles including baseColor, color, contentBackgroundColor, focusColor, symbolColor, selectionColor,               and rollOverColor."

               

              Hope that helps,

              Ryan

              • 4. Re: BackgroundColor and Alpha in Flex 4
                joan_lafferty Employee Hosts

                A little bit more info... to compile with the Halo theme and get your styles like borderStyle working, you need to add -theme=<SDK_Build>/frameworks/themes/Halo/halo.swc to your compiler arguments (where <SDK_Build> is the location of your Flex SDK build.

                 

                If you want to continue using the Spark theme, you will need to create a custom skin for your component to change its border and other styles. By the way, in the Spark theme, anywhere that backgroundColor was supported, you should use contentBackgroundColor. If this doesn't work, its a bug.

                • 5. Re: BackgroundColor and Alpha in Flex 4
                  Hironmay Community Member

                  Thanks Joan,

                   


                  Adding halo.swc did the trick. I can now skin my spark components also using skin files as well as use halo skins for halo components.

                   

                  Thanks a lot.


                  Regards

                  Hironmay Basu

                  • 6. Re: BackgroundColor and Alpha in Flex 4
                    Andy Vern Community Member

                    how do I write the location of the <SDK_Build>, if it's located at something like

                     

                    C:\Program Files (x86)\Adobe\Flash Builder Beta\sdks\4.0.0\frameworks\themes\Halo\halo.swc

                     

                    ?

                     

                    I've tried this a few different ways and it's not finding it. Or am I way off?

                    • 7. Re: BackgroundColor and Alpha in Flex 4
                      joan_lafferty Employee Hosts

                      Hi Andy,

                       

                      In Flex Builder, in your Properties -> Flex Build Path -> Source Path, add the folder C:\Program Files (x86)\Adobe\Flash Builder Beta\sdks\4.0.0\frameworks\themes\.

                       

                      Then, in Properties -> Flex Compiler -> Additional Compiler arguments, you can add: -theme=Halo/halo.swc

                       

                      HTH,

                      Joan