Setting the inactive text selection color on a FxTextArea control in Flex Gumbo

In previous examples, “Setting the text selection color on a FxTextArea control in Flex Gumbo” and “Setting the unfocused text selection color on a FxTextArea control in Flex Gumbo”, we saw how to to set the text selection color when the FxTextArea is focused and unfocused by setting the selectionColor and unfocusedSelectionColor styles respectively.

The following example shows how you can set the inactive text selection color on a Flex Gumbo FxTextArea control by setting the inactiveSelectionColor style.

Full code after the jump.

To use the following code, you must have Flash Player 10 and a Flex Gumbo SDK installed in your Flex Builder 3. For more information on downloading and installing the Gumbo SDK into Flex Builder 3, see “Using the beta Gumbo SDK in Flex Builder 3″.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/11/15/setting-the-inactive-text-selection-color-on-a-fxtextarea-control-in-flex-gumbo/ -->
<Application name="FxTextArea_inactiveSelectionColor_test"
        xmlns="http://ns.adobe.com/mxml/2009"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <ApplicationControlBar dock="true">
        <Form styleName="plain">
            <FormItem label="inactiveSelectionColor:">
                <ColorPicker id="colorPicker"
                        selectedColor="#FFFF99" />
            </FormItem>
        </Form>
    </ApplicationControlBar>

    <FxTextArea id="textArea"
            inactiveSelectionColor="{colorPicker.selectedColor}"
            selectionVisibility="always">
        <content><String source="data/lorem.txt" /></content>
    </FxTextArea>

    <FxTextInput text="Click here to remove FxTextArea focus"
            widthInChars="32" />

</Application>

View source is enabled in the following example.

You can also set the inactiveSelectionColor style in an external .CSS file or <Style> block, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/11/15/setting-the-inactive-text-selection-color-on-a-fxtextarea-control-in-flex-gumbo/ -->
<Application name="FxTextArea_inactiveSelectionColor_test"
        xmlns="http://ns.adobe.com/mxml/2009"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <Style>
        FxTextArea {
            inactiveSelectionColor: haloOrange;
        }
    </Style>

    <FxTextArea id="textArea"
            selectionVisibility="always">
        <content><String source="data/lorem.txt" /></content>
    </FxTextArea>

    <FxTextInput text="Click here to remove FxTextArea focus"
            widthInChars="32" />

</Application>

Or, you can set the inactiveSelectionColor style using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/11/15/setting-the-inactive-text-selection-color-on-a-fxtextarea-control-in-flex-gumbo/ -->
<Application name="FxTextArea_inactiveSelectionColor_test"
        xmlns="http://ns.adobe.com/mxml/2009"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <Script>
        import mx.events.ColorPickerEvent;

        private function colorPicker_change(evt:ColorPickerEvent):void {
            textArea.setStyle("inactiveSelectionColor", evt.color);
        }
    </Script>

    <ApplicationControlBar dock="true">
        <Form styleName="plain">
            <FormItem label="inactiveSelectionColor:">
                <ColorPicker id="colorPicker"
                        selectedColor="#FFFF99"
                        change="colorPicker_change(event);" />
            </FormItem>
        </Form>
    </ApplicationControlBar>

    <FxTextArea id="textArea"
            selectionVisibility="always">
        <content><String source="data/lorem.txt" /></content>
    </FxTextArea>

    <FxTextInput text="Click here to remove FxTextArea focus"
            widthInChars="32" />

</Application>