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.

 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

2 Responses to Dynamically styling error tips in Flex

  1. Christian says:

    How would you do that with an Spark TextInput that is skinned with a custom skin. The Spark TextInput doesn’t provide a style “errorColor”. Cheers, Christian.

  2. Ravi Shankar says:

    Excellent job. It helped me a lot.