Dynamically styling error tips in Flex

In a previous example, “Changing the background color of an error tip in Flex”, we saw how you could change the background color of a Flex error tip by setting the borderColor style on the .errorTip CSS selector.

The following example shows how you can style the Flex .errorTip style dynamically using ActionScript using the static StyleManager.getStyleDeclaration() and setStyle() methods.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/26/dynamically-styling-error-tips-in-flex/ -->
<mx:Application name="errorTip_borderColor_test_2"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.FlexEvent;

            private function comboBox_valueCommit(evt:FlexEvent):void {
                if (comboBox.selectedIndex > -1) {
                    var value:String = comboBox.selectedItem.data;
                    var cssObj:CSSStyleDeclaration;
                    cssObj = StyleManager.getStyleDeclaration(".errorTip");
                    cssObj.setStyle("borderColor", value);
                    textInput.setStyle("errorColor", value);
                    textInput.errorString = errStr;
                } else {
                    textInput.errorString = "";
                }
            }

            private function button_click(evt:MouseEvent):void {
                comboBox.selectedIndex = -1;
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr">
        <mx:Object label="Red"    data="red" />
        <mx:Object label="Orange" data="haloOrange" />
        <mx:Object label="Yellow" data="yellow" />
        <mx:Object label="Green"  data="haloGreen" />
        <mx:Object label="Blue"   data="haloBlue" />
    </mx:Array>

    <mx:String id="errStr">Oh noes, an errata!</mx:String>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="errorColor:">
                <mx:ComboBox id="comboBox"
                        dataProvider="{arr}"
                        prompt="Please select a color:"
                        valueCommit="comboBox_valueCommit(event);" />
            </mx:FormItem>
        </mx:Form>
        <mx:Spacer width="100%" />
        <mx:Button label="Deselect ComboBox"
                click="button_click(event);" />
    </mx:ApplicationControlBar>

    <mx:TextInput id="textInput" />

</mx:Application>

View source is enabled in the following example.