<?xml version="1.0" encoding="utf-8"?>
<!---
Spark Form Sample
-->
<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"
fontSize = "35"
 viewSourceURL="srcview/index.html">

<s:layout>
    <s:VerticalLayout
        paddingLeft     = "20"
        paddingTop      = "20"
        paddingRight    = "20"
        paddingBottom   = "20"
     />
</s:layout>

<s:controlBarContent>
    <s:CheckBox id="comboBox" label="Stacked forms" change="comboBoxChangeHandler(event);"
                skinClass="jp.taiga.component.skin.CustomCheckBoxSkin" />
</s:controlBarContent>

<fx:Declarations>
    <fx:Array id="validators">
        <mx:EmailValidator  source="{usernameTextInput}" property="text"  />
        <mx:StringValidator source="{passwordTextInput}" property="text" minLength="4" maxLength="10" />
        <mx:StringValidator source="{confirmPasswordTextInput}" property="text" minLength="4" maxLength="10" />
    </fx:Array>
</fx:Declarations>

<fx:Script>
    <![CDATA[
        import mx.controls.Alert;
        import mx.events.ValidationResultEvent;
        import mx.validators.Validator;

        import spark.skins.spark.FormHeadingSkin;
        import spark.skins.spark.FormItemSkin;
        import spark.skins.spark.FormSkin;
        import spark.skins.spark.StackedFormHeadingSkin;
        import spark.skins.spark.StackedFormItemSkin;
        import spark.skins.spark.StackedFormSkin;
        protected const STYLE_PROPERTY :String = "skinClass";
        protected var formCSS          :CSSStyleDeclaration;
        protected var formHeadingCSS   :CSSStyleDeclaration;
        protected var formItemCSS      :CSSStyleDeclaration;
        protected override function createChildren():void {
            super.createChildren();
            formCSS        = styleManager.getStyleDeclaration("spark.components.Form");
            formHeadingCSS = styleManager.getStyleDeclaration("spark.components.FormHeading");
            formItemCSS    = styleManager.getStyleDeclaration("spark.components.FormItem");
            Alert.buttonWidth  = 120;
            Alert.buttonHeight = 50;
        }
        protected function comboBoxChangeHandler(event:Event):void {
            if (comboBox.selected) {
                formCSS.setStyle(STYLE_PROPERTY, StackedFormSkin);
                formHeadingCSS.setStyle(STYLE_PROPERTY, StackedFormHeadingSkin);
                formItemCSS.setStyle(STYLE_PROPERTY, StackedFormItemSkin);
            }
            else {
                formCSS.setStyle(STYLE_PROPERTY, FormSkin);
                formHeadingCSS.setStyle(STYLE_PROPERTY, FormHeadingSkin);
                formItemCSS.setStyle(STYLE_PROPERTY, FormItemSkin);
            }
        }
        protected function validateAll():void {
            var i             :int;
            var l             :int;
            var results       :Array = Validator.validateAll(validators);
            var event_        :ValidationResultEvent;
            var alert         :Alert;
            var errorMessages :String = "";
            l = results.length;
            if(0 < l) {
                for(i = 0; i < l; i++) {
                    event_ = results[i] as ValidationResultEvent;
                    errorMessages += event_.message + "\n";
                }
                alert = Alert.show(errorMessages, "Error");
                alert.width  = 800;
                alert.height = 600;

                var elements_ :Array;
                elements_ = form.invalidElements;
                l = elements_.length;
                for(i = 0; i < l; i++) {
                    logTextArea.appendText( elements_[i].element.id + " " + elements_[i].position.toString() + "\n" );
                }

            }
        }
        protected function resetAll():void {
            usernameTextInput.text = "";
            passwordTextInput.text = "";
            confirmPasswordTextInput.text = "";
            usernameTextInput.errorString = "";
            passwordTextInput.errorString = "";
            confirmPasswordTextInput.errorString = "";
        }
    ]]>
</fx:Script>

<s:Scroller width="100%" height="100%" verticalScrollPolicy="on">
<s:Group width="100%" height="100%">

<s:Form id="form" width="100%" height="100%" defaultButton="{submitButton}" backgroundColor="#eeeeee">

    <s:FormHeading width="100%" fontSize="35" label="Spark Form Heading" backgroundColor="#000000" color="#ffffff" />

    <s:FormItem sequenceLabel="1." label="Username:" required="true">
        <s:helpContent>
            <s:Label text="user@domain.com" />
        </s:helpContent>
        <s:TextInput id="usernameTextInput" />
    </s:FormItem>

    <s:FormItem sequenceLabel="2." label="Password:" required="true">
        <s:helpContent>
            <s:Label text="hoge" color="#ff0000" />
        </s:helpContent>
        <s:TextInput id="passwordTextInput" displayAsPassword="true" />
    </s:FormItem>

    <s:FormItem sequenceLabel="3." label="Confirm password:" required="true">
        <s:helpContent>
            <s:HGroup>
                <s:Label text="fuga" color="#ff0000" />
                <s:Label text="piyo" color="#0000ff" />
            </s:HGroup>
        </s:helpContent>
        <s:TextInput id="confirmPasswordTextInput" displayAsPassword="true" />
    </s:FormItem>

    <s:FormItem>
        <s:layout>
            <s:HorizontalLayout />
        </s:layout>
        <s:Button id="submitButton" height="50" label="Submit" click="validateAll()" />
        <s:Button id="resetButton"  height="50" label="Reset" click="resetAll()" />
    </s:FormItem>

</s:Form>

</s:Group>
</s:Scroller>

<s:TextArea id="logTextArea" width="100%" height="200" />

</s:Application>