Creating a transparent Spark TextArea control in Flex 4

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 www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see 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.

8 thoughts on “Creating a transparent Spark TextArea control in Flex 4

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

    1. 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…

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

  3. 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?

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

Comments are closed.