<?xml version="1.0"?>
<!-- Simple example to demonstrate Halo Form layout container. -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">

    <fx:Declarations>
        <fx:Model id="checkModel">
            <User>
                <FirstName>{fname.text}</FirstName>
                <DOB>{dob.text}</DOB>
                <Email>{email.text}</Email>
                <Age>{age.text}</Age>
                <SSN>{ssn.text}</SSN>
                <Zip>{zip.text}</Zip>
                <Phone>{phone.text}</Phone>
            </User>
        </fx:Model>

        <mx:StringValidator source="{fname}" property="text" minLength="4" maxLength="12"/>
        <mx:PhoneNumberValidator source="{phone}" property="text"/>
        <mx:DateValidator source="{dob}" property="text"/>
        <mx:EmailValidator source="{email}" property="text"/>
        <mx:NumberValidator source="{age}" property="text" integerError="Enter Integer value"
            minValue="18" maxValue="100" domain="int"/>
        <mx:SocialSecurityValidator source="{ssn}" property="text"/>
        <mx:ZipCodeValidator source="{zip}" property="text"/>
    </fx:Declarations>

    <s:Panel title="Form Container Example"
           width="75%" height="75%"
           horizontalCenter="0" verticalCenter="0">

        <s:VGroup left="10" right="10" top="10" bottom="10">
            <s:Label width="100%" color="blue"
                text="Moving from one form field to another triggers the validator."/>
    
            <mx:Form width="100%" height="100%">
                <mx:FormHeading label="Enter values into the form."/>
    
                <mx:FormItem label="First name">
                    <mx:TextInput id="fname" width="200"/>
                </mx:FormItem>
    
                <mx:FormItem label="Date of birth (mm/dd/yyyy)">
                    <mx:TextInput id="dob" width="200"/>
                </mx:FormItem>
    
                <mx:FormItem label="E-mail address">
                    <mx:TextInput id="email" width="200"/>
                </mx:FormItem>
    
                <mx:FormItem label="Age">
                    <mx:TextInput id="age" width="200"/>
                </mx:FormItem>
    
                <mx:FormItem label="SSN">
                    <mx:TextInput id="ssn" width="200"/>
                </mx:FormItem>
    
                <mx:FormItem label="Zip">
                    <mx:TextInput id="zip" width="200"/>
                </mx:FormItem>
    
                <mx:FormItem label="Phone">
                    <mx:TextInput id="phone" width="200"/>
                </mx:FormItem>
            </mx:Form>
        </s:VGroup>
    </s:Panel>

</s:Application>