Flex Snippet Tutorial - Using The TextRange Class

The guys over at Adobe have provided us with a lot of classes that simply make our job as developers very easy. Today I am going to go over one of these classes, TextRange. This class allows us to bind to one of several components and get/set properties about the text in that selection. The properties that can be modified include the text itself and the styles for the text. The namespace for this class is mx.controls.textClasses and the Adobe documentation page can be found here for further info.

Below is the example application we are going to build today. It is a relatively simple program but it shows off the power of the TextRange class. You can type into the textArea and then highlight sections and change the properties of that selection using the buttons at the bottom. The color picker will also change the text color of the selected text. In this example I use a TextArea but you can use TextRange with Label, Text, TextInput, or RichTextEditor.

As usual the first task we are going to do is setup the user interface. It is a very simple interface with nothing out of the ordinary. It has a panel, textarea, colorpicker, label, and several buttons which we use to control the text selection changes. So our starting interface code looks like the following:

Next we are going to setup our TextRange. We do this using a function that we call when the TextArea dispatches the creationComplete event. I called this function "initTextArea" which will reside in a <mx:Script> tag. Also in our script tag we create a new var, which will hold our TextRange object we are going to use for the selection. When creating the new TextRange object we pass the UIComponent we are going to bind to as the first argument, and the second argument is whether we are going to let the TextRange object modify the selection. There are two more arguments that can be passed in that restrict what text in the UIComponent the TextRange object can bind to - but since we didn't we are bound to whatever the user selects. We also update our <mx:TextArea> to have the event call in it.

The first code here goes directly after the opening application tag.

The second piece is our new TextArea tag.

The remaining code is pretty straightforward, so we are going to run through it real quick. We add a couple more functions to our script tag which handle click events for the buttons and change events for the colorpicker. In these functions we can update the appropriate properties of the TextRange and instantly we should see the changes to our selected text. Putting it all together we get the following code for our application:

Well I hope that this small tutorial gives some good information on how to use the TextRange class and modifying selected text from user components. As always, leave any comments or questions below.