The following example(s) require Flash Player 10 and the beta Adobe Flex Hero SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex Hero SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+Hero.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/08/30/displaying-the-error-indicator-on-a-spark-formitem-container-in-flex-hero/ -->
<s:Application name="Spark_Form_Validator_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:layout>
        <s:VerticalLayout horizontalAlign="center" verticalAlign="middle" />
    </s:layout>
 
    <fx:Script>
        <![CDATA[
            import mx.validators.Validator;
 
            protected function resetBtn_clickHandler(evt:MouseEvent):void {
                username.text = "";
                password1.text = "";
                password2.text = "";
                username.errorString = "";
                password1.errorString = "";
            }
 
            protected function submitBtn_clickHandler(evt:MouseEvent):void {
                Validator.validateAll(valArr);
            }
        ]]>
    </fx:Script>
 
    <fx:Declarations>
        <fx:Array id="valArr">
            <mx:StringValidator source="{username}" property="text" required="true" minLength="4" />
            <mx:StringValidator source="{password1}" property="text" required="true" minLength="4" />
        </fx:Array>
    </fx:Declarations>
 
    <s:Form id="frm" defaultButton="{submitBtn}" backgroundColor="#EEEEEE">
        <s:FormHeading label="Spark Form Heading" backgroundColor="haloSilver" />
        <s:FormItem sequenceLabel="1." label="Username:">
            <s:helpContent>
                <s:Label text="user@domain.com" />
            </s:helpContent>
            <s:TextInput id="username" />
        </s:FormItem>
        <s:FormItem sequenceLabel="2." label="Password:">
            <s:helpContent>
                <s:Label text="weak" color="red" />
            </s:helpContent>
            <s:TextInput id="password1" displayAsPassword="true" />
        </s:FormItem>
        <s:FormItem sequenceLabel="3." label="Confirm password:">
            <s:helpContent>
                <s:HGroup>
                    <s:Label text="One" color="red" />
                    <s:Label text="Two" color="blue" />
                </s:HGroup>
            </s:helpContent>
            <s:TextInput id="password2" displayAsPassword="true" />
        </s:FormItem>
        <s:FormItem>
            <s:layout>
                <s:HorizontalLayout />
            </s:layout>
            <s:Button id="resetBtn" label="Reset" click="resetBtn_clickHandler(event);" />
            <s:Button id="submitBtn" label="Submit" click="submitBtn_clickHandler(event);" />
        </s:FormItem>
    </s:Form>
 
</s:Application>

This entry is based on a beta version of the Flex Hero SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex Hero SDK.

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/22/changing-the-background-color-of-an-error-tip-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        @font-face {
            src: local("Base 02");
            fontFamily: Base02Embedded;
        }

        .errorTip {
            borderColor: haloOrange;
            color: black;
            fontFamily: Base02Embedded;
            fontSize: 16;
            fontWeight: normal;
        }

        TextInput {
            errorColor: haloOrange;
        }
    </mx:Style>

    <mx:TextInput id="textInput"
            errorString="Hey, you missed a spot!" />

</mx:Application>

View source is enabled in the following example.

For an example of setting the .errorTip selector’s borderColor style dynamically using ActionScript, see “Dynamically styling error tips in Flex”.

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/21/setting-an-error-string-on-a-checkbox-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function checkBox_change(evt:Event):void {
                if (checkBox.selected) {
                    checkBox.errorString = "";
                } else {
                    checkBox.errorString = "You must click here to continue";
                }
            }
        ]]>
    </mx:Script>

    <mx:Panel width="100%" height="100%">
        <mx:TextArea id="textArea"
                condenseWhite="true"
                editable="false"
                textAlign="justify"
                width="100%"
                height="100%">
            <mx:htmlText>
                <![CDATA[
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque vitae massa. Curabitur sed dolor. Maecenas risus lacus, pretium eget, tempor vestibulum, mattis vitae, sem. Pellentesque ligula nisi, sagittis sit amet, tincidunt vitae, volutpat non, arcu. Mauris non arcu. In molestie nunc. Nam molestie dui lacinia massa commodo vehicula. Ut sed ante sit amet tellus aliquam rhoncus. Nunc orci urna, dictum eget, faucibus vitae, tempus vel, dui. Vestibulum quis arcu. Morbi felis justo, hendrerit quis, tempus ac, elementum sit amet, quam. Proin congue, leo eget aliquet rhoncus, tellus lectus varius ipsum, ac ultrices erat ligula non justo. Nunc porttitor diam vel dolor luctus semper. Ut non eros volutpat mi condimentum ornare. Praesent quis nunc et libero pulvinar pretium. Sed leo lorem, fringilla vel, sodales ac, suscipit ut, nunc. Vestibulum faucibus elit. Vivamus pharetra libero ut arcu. Curabitur sit amet tellus.</p>
                    <p>Fusce sagittis. Suspendisse potenti. Aliquam velit sapien, porta at, cursus sed, pellentesque sit amet, libero. Duis aliquet purus eget mauris. Curabitur a ipsum. Nulla facilisi. Etiam porta, odio quis semper cursus, est ante volutpat massa, quis blandit orci dui ut nibh. Nulla sodales leo sit amet ligula. Suspendisse ultrices. Proin vitae felis.</p>
                    <p>Maecenas pellentesque, ligula blandit venenatis semper, magna quam laoreet urna, ut iaculis urna urna eu tortor. In interdum, dolor ut lobortis congue, massa velit egestas lectus, sed commodo sapien risus et ante. Proin id erat ac nibh luctus aliquet. Vestibulum sagittis turpis non est. Suspendisse ipsum ligula, suscipit vel, feugiat eu, commodo non, risus. Integer suscipit sapien quis lectus. Aliquam dictum, magna quis pellentesque aliquet, felis pede porttitor quam, at luctus risus odio eu ante. Phasellus a purus. Ut id dui nec diam congue auctor. Nullam nec pede. Vivamus ullamcorper iaculis urna.</p>
                    <p>Ut ultrices. Praesent convallis massa sit amet ipsum. Aenean varius posuere erat. Sed vulputate, purus eu consectetuer molestie, risus dui egestas augue, sed cursus sapien orci a turpis. Cras erat metus, ullamcorper quis, sollicitudin quis, suscipit vitae, ipsum. Suspendisse metus dolor, aliquet sit amet, vulputate sit amet, euismod ac, tortor. Nulla facilisi. Vestibulum ac sem at arcu blandit pretium. Sed faucibus, dolor sit amet viverra aliquet, mi arcu sollicitudin ante, at consequat risus mauris sit amet ante. Phasellus mi tellus, blandit ac, tempor a, pulvinar vel, ligula. Pellentesque molestie est sed nulla. Nam vel quam at magna pulvinar gravida. Curabitur sed neque eget enim tempor volutpat. Praesent varius. Nulla varius pulvinar nunc. Nulla interdum eros sed quam.</p>
                    <p>Aliquam erat volutpat. Aliquam vestibulum. Mauris fringilla, enim vitae viverra aliquet, nunc purus pretium massa, congue viverra lectus lacus in est. Sed posuere augue a tellus. Ut nunc leo, luctus ut, consequat scelerisque, ornare eu, metus. Duis et purus. Nunc hendrerit nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer vel neque. Proin mi. Aliquam sollicitudin, nulla et tincidunt luctus, orci magna eleifend velit, placerat tempor ipsum sem vitae tortor. Etiam ac urna placerat erat pulvinar venenatis. Phasellus convallis diam in metus. Donec dui risus, sollicitudin vel, pulvinar sit amet, luctus sed, massa. Quisque ultrices lacus vel eros.</p>
                ]]>
            </mx:htmlText>
        </mx:TextArea>
        <mx:ControlBar>
            <mx:CheckBox id="checkBox"
                    label="I have read and agreed to your license"
                    errorString="You must click here to continue"
                    change="checkBox_change(event);"
                    width="100%" />
            <mx:Button label="Next >>"
                    enabled="{checkBox.selected}" />
        </mx:ControlBar>
    </mx:Panel>

</mx:Application>

View source is enabled in the following example.

For some similar examples, see “Checking to see if a Flex CheckBox is selected before allowing a user to press a Button”.

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/03/displaying-an-error-tool-tip-for-an-image-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Image id="img"
            source="http://www.helpexamples.com/flash/images/404.gif"
            width="160"
            height="120"
            ioError="img.errorString = event.text;" />

</mx:Application>

View source is enabled in the following example.

The error string only appears if you hover your mouse over the broken image skin.

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/26/using-embedded-fonts-with-tool-tips-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Style>
        @font-face {
            src: local("Comic Sans MS");
            fontWeight: normal;
            fontFamily: ComicSansMSEmbedded;
        }

        .errorTip {
            borderStyle: "errorTipAbove";
            fontFamily: "ComicSansMSEmbedded";
            fontSize: 12;
            fontWeight: normal;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            import mx.events.ToolTipEvent;
            import mx.controls.ToolTip;

            private function init():void {
                ToolTip.maxWidth = textInput.width;
            }

            private function textInput_toolTipShown(evt:ToolTipEvent):void {
                var tt:ToolTip = evt.toolTip as ToolTip;
                tt.x = textInput.x;
                tt.y = (textInput.y - tt.height);
                tt.rotation = 5;
            }
        ]]>
    </mx:Script>

    <mx:TextInput id="textInput" text="{new Date().toDateString()}"
            errorString="The quick brown fox jumped over the lazy dog"
            toolTipShown="textInput_toolTipShown(event);" />

</mx:Application>

View source is enabled in the following example.

 

Full code after the jump.

1. Check to see if the selected property of the CheckBox instance is true:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/13/checking-to-see-if-a-flex-checkbox-is-selected-before-allowing-a-user-to-press-a-button/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;

            private function isChecked():void {
                if (!checkBox.selected) {
                    Alert.show("You must agree to the EULA before continuing.");
                } else {
                    Alert.show("Continuing...");
                }
            }
        ]]>
    </mx:Script>

    <mx:CheckBox id="checkBox"
            label="I have read and agree with the EULA..." />

    <mx:Button label="Continue"
            click="isChecked();" />

</mx:Application>

View source is enabled in the following example.

2. Bind the Button control’s enabled property to the CheckBox control’s selected property:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/13/checking-to-see-if-a-flex-checkbox-is-selected-before-allowing-a-user-to-press-a-button/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:CheckBox id="checkBox"
            label="I have read and agree with the EULA..." />

    <mx:Button label="Continue"
            enabled="{checkBox.selected}" />

</mx:Application>

View source is enabled in the following example.

3. Set the Button control’s errorString property when the user rolls their mouse over the button. Add an if statement in the Button control’s click event handler that checks to see if the button’s error string is an empty string (or you could check if the check box is selected):

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/13/checking-to-see-if-a-flex-checkbox-is-selected-before-allowing-a-user-to-press-a-button/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;

            private function button_rollOver(evt:MouseEvent):void {
                if (!checkBox.selected) {
                    button.errorString = "You must agree to the EULA before continuing.";
                }
            }

            private function button_rollOut(evt:MouseEvent):void {
                button.errorString = "";
            }

            private function button_click(evt:MouseEvent):void {
                if (button.errorString.length == 0) {
                    Alert.show("Continuing...");
                }
            }
        ]]>
    </mx:Script>

    <mx:CheckBox id="checkBox"
            label="I have read and agree with the EULA..." />

    <mx:Button id="button"
            label="Continue"
            rollOver="button_rollOver(event);"
            rollOut="button_rollOut(event);"
            click="button_click(event);" />

</mx:Application>

View source is enabled in the following example.

 

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/01/customizing-a-flex-textinput-controls-error-color/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:Label text="errorColor:" />
        <mx:ColorPicker id="colorPicker" />
    </mx:ApplicationControlBar>

    <mx:Form>
        <mx:FormItem label="text:" required="true">
            <mx:TextInput id="textInput"
                    errorColor="{colorPicker.selectedColor}"
                    errorString="Custom error color" />
        </mx:FormItem>
        <mx:FormItem>
            <mx:Button />
        </mx:FormItem>
    </mx:Form>

</mx:Application>

View source is enabled in the following example.