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>
{ 4 comments… read them below or add one }
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