Skip navigation
Home/Support/

Forums

6678 Views 7 Replies Latest reply: Jun 17, 2009 10:15 AM by joan_lafferty RSS
Hironmay Adobe Employee 934 posts since
Nov 6, 2008
Currently Being Moderated

Jun 3, 2009 12:01 PM

BackgroundColor and Alpha in Flex 4

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

  • Peter deHaan Adobe Employee 1,004 posts since
    Jun 29, 2006
    Currently Being Moderated
    1. Jun 3, 2009 3:28 PM (in response to Hironmay)
    Re: BackgroundColor and Alpha in Flex 4

    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/.

  • rfrishbe Adobe Employee 295 posts since
    Oct 25, 2007
    Currently Being Moderated
    3. Jun 3, 2009 4:56 PM (in response to Hironmay)
    Re: BackgroundColor and Alpha in Flex 4

    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

  • joan_lafferty User 135 posts since
    Mar 19, 2007
    Currently Being Moderated
    4. Jun 3, 2009 5:04 PM (in response to rfrishbe)
    Re: BackgroundColor and Alpha in Flex 4

    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.

  • Andy Vern User 4 posts since
    Jun 15, 2009
    Currently Being Moderated
    6. Jun 16, 2009 9:59 PM (in response to joan_lafferty)
    Re: BackgroundColor and Alpha in Flex 4

    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?

  • joan_lafferty User 135 posts since
    Mar 19, 2007
    Currently Being Moderated
    7. Jun 17, 2009 10:15 AM (in response to Andy Vern)
    Re: BackgroundColor and Alpha in Flex 4

    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

More Like This

  • Retrieving data ...

Bookmarked By (0)

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points