Setting the background alpha of the RichTextEditor text area in Flex

In a previous example, Setting the background color of the RichTextEditor text area in Flex, we saw how you could set the background color of the RichTextEditor control’s nested TextArea control by setting the backgroundColor style.

The following example shows how you can set the background alpha of the Flex RichTextEditor control’s nested TextArea control by setting the backgroundAlpha style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/25/setting-the-background-alpha-of-the-richtexteditor-text-area-in-flex/ -->
<mx:Application name="RichTextEditor_textArea_backgroundAlpha_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.ColorPickerEvent;
            import mx.events.SliderEvent;

            private function colorPicker_change(evt:ColorPickerEvent):void {
                richTextEditor.textArea.setStyle("backgroundColor", evt.color);
            }

            private function slider_change(evt:SliderEvent):void {
                richTextEditor.textArea.setStyle("backgroundAlpha", evt.value);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="backgroundColor:">
                <mx:ColorPicker id="colorPicker"
                        selectedColor="0xFFFFFF"
                        change="colorPicker_change(event);" />
            </mx:FormItem>
            <mx:FormItem label="backgroundAlpha:">
                <mx:HSlider id="slider"
                        minimum="0.0"
                        maximum="1.0"
                        value="1.0"
                        snapInterval="0.01"
                        tickInterval="0.1"
                        liveDragging="true"
                        change="slider_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:RichTextEditor id="richTextEditor" />

</mx:Application>

View source is enabled in the following example.

You can also set the nested TextArea control’s background alpha in an external .CSS file or <mx:Style /> block, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/25/setting-the-background-alpha-of-the-richtexteditor-text-area-in-flex/ -->
<mx:Application name="RichTextEditor_textArea_backgroundAlpha_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        RichTextEditor {
            textAreaStyleName: rteTextAreaStyles;
        }

        .rteTextAreaStyles {
            backgroundAlpha: 0.3; /* 30% */
            backgroundColor: red;
        }
    </mx:Style>

    <mx:RichTextEditor id="richTextEditor" />

</mx:Application>

3 thoughts on “Setting the background alpha of the RichTextEditor text area in Flex

  1. Have you tried this with a non-white application background? There seems to be another big white rectangle behind the text area which is not affected by these settings.

  2. This component is so stupid. When you change alpha of the text area it automatically resets all html content inside text area. I mean all color and font size for text. WTF is that? Is it possible that Adobe is so retarded to make such component? I mean Flex framework 3 is really giving me more reasons to just give up from it.

  3. That white rectangle that tom is talking about is rectangle of RichTextEditor itself. So if you want to set backgroundAlpha of textArea in RichTextEditor you first must set backgroundAlpha of RichTextEditor to 0 or whatever you want because backgroundColor of RichTextEditor is above textArea in RichTextEditor

Comments are closed.