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>

Tagged as: backgroundAlpha, textAreaStyleName