Flex Examples
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.
<?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:
<?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>
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.
Share
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.
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.
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