Creating a transparent Spark TextArea control in Flex 4

By On June 2, 2009 · 8 Comments

The following example shows how you can create a semi-transparent Spark TextArea control in Flex 4 by setting the contentBackgroundAlpha style.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/06/02/creating-a-transparent-spark-textarea-control-in-flex-gumbo-2/ -->
<s:Application name="Spark_TextArea_contentBackgroundAlpha_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        backgroundColor="red">
    <s:controlBarContent>
        <mx:Form styleName="plain">
            <mx:FormItem label="contentBackgroundAlpha:">
                <s:HSlider id="sl"
                        minimum="0.0" maximum="1.0"
                        value="1.0"
                        snapInterval="0.1" stepSize="0.1" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <s:TextArea id="txtArea"
            contentBackgroundAlpha="{sl.value}"
            horizontalCenter="0" verticalCenter="0">
        <s:textFlow>
            <s:TextFlow>
                <s:p>The quick brown fox jumps over the lazy dog.</s:p>
            </s:TextFlow>
        </s:textFlow>
    </s:TextArea>
 
</s:Application>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

 
Tagged with: • • • •
 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

Visit Authors Website →

  • Add Widgets (Content Sidebar)

    This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.

Share
Facebook Twitter

8 Responses to Creating a transparent Spark TextArea control in Flex 4

  1. bmilesp says:
    July 1, 2009 at 2:08 pm

    I’ve tried exactly what you have here using Build 4.0.0.8155, and it produced the error below. I’ll report a bug also:

    [SWF] C:\bp\flexProjects\www\tests\FXVideo\main.swf – 2,061,068 bytes after decompression
    Error: Required skin part textDisplay cannot be found.
    …

  2. Peter deHaan says:
    July 1, 2009 at 4:22 pm

    bmilesp,

    I believe the skin part just changed names (from “textView” to “textDisplay”). I updated the above example to work w/ Flex SDK 4.0.0.8344.

    Peter

  3. Daniel says:
    July 6, 2009 at 5:05 pm

    I’ve got to say, this is an awful lot of code for something that used to be as simple as backgroundAlpha=”0″.

    • Neogene says:
      June 25, 2010 at 8:56 am

      You are right, in my opinion Flex is going in the wrong direction, instead of simplicity is adding complexity .

      Thinking that there is still no drag and drop from the package explorer to the editing window to allow image insertion…

    • Peter deHaan says:
      June 25, 2010 at 2:21 pm

      Actually, looking again, it looks like this was addressed in the Flex 4.0 release (I often write these examples long before the SDK is final).
      You can now just set the contentBackgroundAlpha value between 0.0 and 1.0, same as the old MX TextArea and backgroundAlpha:

       
<?xml version="1.0" encoding="utf-8"?>
<s:Application name="Spark_TextArea_contentBackgroundAlpha_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        backgroundColor="red">
    <s:controlBarContent>
        <mx:Form styleName="plain">
            <mx:FormItem label="contentBackgroundAlpha:">
                <s:HSlider id="sl"
                        minimum="0.0" maximum="1.0"
                        value="1.0"
                        snapInterval="0.1" stepSize="0.1" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <s:TextArea id="txtArea"
            contentBackgroundAlpha="{sl.value}"
            horizontalCenter="0" verticalCenter="0">
        <s:textFlow>
            <s:TextFlow>
                <s:p>The quick brown fox jumps over the lazy dog.</s:p>
            </s:TextFlow>
        </s:textFlow>
    </s:TextArea>
 
</s:Application>

      I’ll work on updating the main examples above when I get some time.

      Peter

  4. lee probert says:
    July 30, 2009 at 8:47 am

    I’m trying to remove the border by creating a custom skin and just deleting the FXG rect … it doesn’t work. I think it’s a bug. What was wrong with border-style:none?

  5. lee probert says:
    July 30, 2009 at 8:56 am

    Ok, bug in Flex 4. Setting the skin class within the Style sheet somehow stops my Textarea component from compiling. I have to set it inline.