frameworks/projects/spark/asdoc/en_US/spark/components/examples/StackedFormSkinExample.mxml

<?xml version="1.0" encoding="utf-8"?>
<!--

  Licensed to the Apache Software Foundation (ASF) under one or more
  contributor license agreements.  See the NOTICE file distributed with
  this work for additional information regarding copyright ownership.
  The ASF licenses this file to You under the Apache License, Version 2.0
  (the "License"); you may not use this file except in compliance with
  the License.  You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.

-->
<!-- Simple example to demonstrate the Spark Form control skins -->
<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:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.validators.Validator;
            
            protected function sbmt_clickHandler(evt:MouseEvent):void {
                var arr:Array = Validator.validateAll(valArr);
                if (arr.length == 0) {
                    Alert.show("Form is valid!");
                }
            }
        ]]>
    </fx:Script>
    
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        
        s|Form {
            skinClass: ClassReference("spark.skins.spark.StackedFormSkin");
        }
        
        s|FormHeading {
            skinClass: ClassReference("spark.skins.spark.StackedFormHeadingSkin");
        }
        
        s|FormItem {
            skinClass: ClassReference("spark.skins.spark.StackedFormItemSkin");
        }
    </fx:Style>
    
    <fx:Declarations>
        <fx:Array id="valArr">
            <mx:StringValidator id="fNameVal" source="{fName}" property="text" required="true" maxLength="64" />
            <mx:StringValidator id="usrnmVal" source="{usrnm}" property="text" required="true" maxLength="32" />
            <mx:StringValidator id="psswdVal" source="{psswd}" property="text" required="true" maxLength="32" />
            <mx:SocialSecurityValidator id="ssnVal" source="{ssn}" property="text" required="false" />
        </fx:Array>
    </fx:Declarations>
    
    <s:Panel title="Spark Form Control skinClass Example"
             width="75%" height="75%"
             horizontalCenter="0" verticalCenter="0">
        <s:Scroller width="100%" height="100%">
            <s:Group left="10" right="10" top="10" bottom="10">
                <s:Form id="frm" defaultButton="{sbmt}">
                    <s:FormHeading label="STACKED SPARK FORM" backgroundColor="haloSilver" />
                    <s:FormItem sequenceLabel="i)" label="First name:" required="true">
                        <s:TextInput id="fName" maxChars="64" />
                    </s:FormItem>
                    <s:FormItem sequenceLabel="ii)" label="Last name:">
                        <s:TextInput id="lName" maxChars="64" />
                    </s:FormItem>
                    <s:FormItem sequenceLabel="iii)" label="User name:" required="true">
                        <s:TextInput id="usrnm" maxChars="32" />
                    </s:FormItem>
                    <s:FormItem sequenceLabel="iv)" label="Password:" required="true">
                        <s:TextInput id="psswd" maxChars="32" displayAsPassword="true" />
                    </s:FormItem>
                    <s:FormItem sequenceLabel="v)" label="SSN:">
                        <s:helpContent>
                            <s:Label text="###-##-####" />
                        </s:helpContent>
                        <s:TextInput id="ssn" maxChars="11" />
                    </s:FormItem>
                    <s:FormItem>
                        <s:Button id="sbmt" label="Submit" click="sbmt_clickHandler(event);" />
                    </s:FormItem>
                </s:Form>
            </s:Group>
        </s:Scroller>
    </s:Panel>
    
</s:Application>