Applying selection dynamically to Spark RichText component
Flex 4 documentation article named "Selecting and modifying text" lists an finite final list of components that supports the selection:
- RichEditableText
- Label (Spark only)
- TextInput (both MX and Spark)
- TextArea (both MX and Spark)
- RichTextEditor and all controls that have a TextArea as a subcomponent
This list does not include RichText component, but luckily with a new Text Layout Framework (TLF) available starting from Flash player 10, it is quite easy to "simulate" dynamic selection of the text with some ActionScript 3 code.
In the following example, try to drag the slider to the left and to the right to control the dynamic selection of the text of RichText component:
Code listing:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo"
width="200"
height="75">
<s:layout>
<s:HorizontalLayout paddingLeft="25"
paddingTop="25"
paddingRight="25"/>
</s:layout>
<fx:Script>
<![CDATA[
import flashx.textLayout.edit.EditManager;
import flashx.textLayout.edit.SelectionState;
import flashx.textLayout.formats.TextLayoutFormat;
protected function highlightItem(endSelectionCharIndex : int):void
{
var containerFormat:TextLayoutFormat = new TextLayoutFormat();
var paragraphFormat:TextLayoutFormat = new TextLayoutFormat();
var characterFormat:TextLayoutFormat = new TextLayoutFormat();
characterFormat = _selectedTextFormat;
var selectionState : SelectionState = new SelectionState(rt.textFlow, 0, endSelectionCharIndex, _selectedTextFormat);
// apply format to the selection
_textEditManager.applyFormat(
characterFormat,
paragraphFormat,
containerFormat,
selectionState);
characterFormat = _notSelectedTextFormat;
// apply format to the rest of the text
var notSelectionState : SelectionState = new SelectionState(rt.textFlow, endSelectionCharIndex, rt.text.length, _notSelectedTextFormat);
_textEditManager.applyFormat(
characterFormat, paragraphFormat, containerFormat, notSelectionState);
}
protected function onRichTextCreationComplete():void
{
_textEditManager = new EditManager();
rt.textFlow.interactionManager = _textEditManager;
_selectedTextFormat = new TextLayoutFormat();
_selectedTextFormat.backgroundColor = 0xFF99CC;
_selectedTextFormat.color = 0x000000;
_notSelectedTextFormat = new TextLayoutFormat();
_notSelectedTextFormat.backgroundColor = 0xFFFFFF;
_notSelectedTextFormat.color = 0x000000;
}
private var _textEditManager : EditManager;
private var _selectedTextFormat : TextLayoutFormat;
private var _notSelectedTextFormat : TextLayoutFormat;
]]>
</fx:Script>
<s:RichText id="rt" text="Sample text"
creationComplete="onRichTextCreationComplete()"/>
<s:HSlider id="slider"
minimum="0"
maximum="10"
change="highlightItem(slider.value)">
</s:HSlider>
</s:Application>
.
