Skip navigation
Currently Being Moderated

BackgroundColor and Alpha in Flex 4

Jun 3, 2009 11:01 AM

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.htm l.

 

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

 
Replies
  • Currently Being Moderated
    Jun 3, 2009 2:28 PM   in reply to Hironmay

    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-t extarea-control-in-flex-gumbo/.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 3, 2009 3:56 PM   in reply to Hironmay

    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.htm l

     

    "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

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 3, 2009 4:04 PM   in reply to rfrishbe

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 16, 2009 8:59 PM   in reply to joan_lafferty

    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?

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 17, 2009 9:15 AM   in reply to Andy Vern

    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

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points