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">
<!--- Defines the background fill color. -->
<s:SolidColor id="bgFill" color="0xFFFFFF" alpha="0.5" />
Now, in your Flex application, set the custom skin class to the new, custom skin:
<?xml version="1.0" encoding="utf-8"?>
<s:text>The quick brown fox jumps over the lazy dog.</s:text>
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/.
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";
fontFamily: "Myriad Pro";
backgroundColor : #333333 ;
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"/>
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.
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:
"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
Hope that helps,
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.
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.
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?
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