Flex Examples
The following example shows how you can set the focus blend mode of the focus rectangle on a Flex TextArea control by setting the focusBlendMode style.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/01/11/setting-the-focus-blend-mode-on-a-textarea-control-in-flex/ -->
<mx:Application name="TextArea_focusBlendMode_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle">
<mx:ApplicationControlBar dock="true" styleName="plain">
<mx:Form styleName="plain">
<mx:FormItem label="focusThickness:">
<mx:HSlider id="slider"
minimum="0"
maximum="24"
value="10"
snapInterval="1"
tickInterval="1"
change="textArea.setFocus();" />
</mx:FormItem>
<mx:FormItem label="focusBlendMode:">
<mx:ComboBox id="comboBox"
selectedIndex="10"
change="textArea.setFocus();">
<mx:dataProvider>
<mx:Array>
<mx:String>{BlendMode.ADD}</mx:String>
<mx:String>{BlendMode.ALPHA}</mx:String>
<mx:String>{BlendMode.DARKEN}</mx:String>
<mx:String>{BlendMode.DIFFERENCE}</mx:String>
<mx:String>{BlendMode.ERASE}</mx:String>
<mx:String>{BlendMode.HARDLIGHT}</mx:String>
<mx:String>{BlendMode.INVERT}</mx:String>
<mx:String>{BlendMode.LAYER}</mx:String>
<mx:String>{BlendMode.LIGHTEN}</mx:String>
<mx:String>{BlendMode.MULTIPLY}</mx:String>
<mx:String>{BlendMode.NORMAL}</mx:String>
<mx:String>{BlendMode.OVERLAY}</mx:String>
<mx:String>{BlendMode.SCREEN}</mx:String>
<!--
<mx:String>{BlendMode.SHADER}</mx:String>
-->
<mx:String>{BlendMode.SUBTRACT}</mx:String>
</mx:Array>
</mx:dataProvider>
</mx:ComboBox>
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:TextArea id="textArea"
text="The quick brown fox jumps over the lazy dog."
focusThickness="{slider.value}"
focusBlendMode="{comboBox.selectedItem}" />
</mx:Application>
View source is enabled in the following example.
You can also set the focusBlendMode style in an external .CSS file or <Style> block, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/01/11/setting-the-focus-blend-mode-on-a-textarea-control-in-flex/ -->
<mx:Application name="TextArea_focusBlendMode_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle">
<mx:Style>
TextArea {
focusThickness: 20;
focusBlendMode: difference;
}
</mx:Style>
<mx:TextArea id="textArea"
text="The quick brown fox jumps over the lazy dog." />
</mx:Application>
Or, you can set the focusBlendMode style using ActionScript, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/01/11/setting-the-focus-blend-mode-on-a-textarea-control-in-flex/ -->
<mx:Application name="TextArea_focusBlendMode_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle">
<mx:Script>
<![CDATA[
import mx.events.ListEvent;
import mx.events.SliderEvent;
private function slider_change(evt:SliderEvent):void {
textArea.setStyle("focusThickness", evt.value);
textArea.setFocus();
}
private function comboBox_change(evt:ListEvent):void {
textArea.setStyle("focusBlendMode", comboBox.selectedItem);
textArea.setFocus();
}
]]>
</mx:Script>
<mx:ApplicationControlBar dock="true" styleName="plain">
<mx:Form styleName="plain">
<mx:FormItem label="focusThickness:">
<mx:HSlider id="slider"
minimum="0"
maximum="24"
value="10"
snapInterval="1"
tickInterval="1"
change="slider_change(event);" />
</mx:FormItem>
<mx:FormItem label="focusBlendMode:">
<mx:ComboBox id="comboBox"
selectedIndex="10"
change="comboBox_change(event);">
<mx:dataProvider>
<mx:Array>
<mx:String>{BlendMode.ADD}</mx:String>
<mx:String>{BlendMode.ALPHA}</mx:String>
<mx:String>{BlendMode.DARKEN}</mx:String>
<mx:String>{BlendMode.DIFFERENCE}</mx:String>
<mx:String>{BlendMode.ERASE}</mx:String>
<mx:String>{BlendMode.HARDLIGHT}</mx:String>
<mx:String>{BlendMode.INVERT}</mx:String>
<mx:String>{BlendMode.LAYER}</mx:String>
<mx:String>{BlendMode.LIGHTEN}</mx:String>
<mx:String>{BlendMode.MULTIPLY}</mx:String>
<mx:String>{BlendMode.NORMAL}</mx:String>
<mx:String>{BlendMode.OVERLAY}</mx:String>
<mx:String>{BlendMode.SCREEN}</mx:String>
<!--
<mx:String>{BlendMode.SHADER}</mx:String>
-->
<mx:String>{BlendMode.SUBTRACT}</mx:String>
</mx:Array>
</mx:dataProvider>
</mx:ComboBox>
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:TextArea id="textArea"
text="The quick brown fox jumps over the lazy dog." />
</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
Where’s the SWF?
Can I change the focus-mode color of the TextArea control?
Strange behavior: clicking a location on the slider bar so the pointer moves there doesn’t update the outline. You have to drag the pointer to get an update.
@Eric,
That’s probably just my crappy code. I probably should have looked into a way of clearing the focus on the TextArea and resetting it after changing the slider.
Peter