<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" viewSourceURL="srcview/index.html">

    <mx:Script>
        <![CDATA[        
            import mx.controls.Alert;
            private function showAlert():void {
                Alert.show("Alert Text", "Alert Title", Alert.OK);
            }
            
            import mx.collections.ArrayCollection;
            private var flatData:ArrayCollection = new ArrayCollection([
                {col1:"A", col2:"D", col3:"G"},
                {col1:"B", col2:"E", col3:"H"},
                {col1:"C", col2:"F", col3:"I"}
            ]);
            
            private var hierarchicalData:ArrayCollection = new ArrayCollection([
                {col1:"A", children: [ 
                    {col2:"D1", col3:"G1"}, 
                    {col2:"D2", col3:"G2"}]},  
                {col1:"B", children: [ 
                    {col2:"E1", col3:"H1"},  
                    {col2:"E2", col3:"H2"}]},  
                {col1:"C", col2:"F", col3:"I"} 
            ]);            
        ]]>
    </mx:Script>

    <mx:Panel tabIndex="1" title="Basic Controls">

        <mx:HBox tabIndex="2" width="100%" paddingTop="10" paddingRight="10" paddingBottom="0" paddingLeft="10">
            <mx:Text tabIndex="3" text="This is a test of accessible Flex Controls."/>
            <mx:Image tabIndex="4" source="flex.png" toolTip="Image ToolTip" />
        </mx:HBox>
        
        <mx:Form tabIndex="5" paddingTop="0">
            <mx:FormHeading tabIndex="6" label="Form Heading"/>

            <mx:FormItem tabIndex="7" label="Text Input:">
                <mx:TextInput tabIndex="8"/>
            </mx:FormItem>
            
            <mx:FormItem tabIndex="9" label="Text Area:">
                <mx:TextArea tabIndex="10" height="33"/>
            </mx:FormItem>
            
            <mx:FormItem tabIndex="11" label="Checkboxes:">
                <mx:CheckBox tabIndex="12" label="Checkbox 1"/>
                <mx:CheckBox tabIndex="13" label="Checkbox 2"/>
            </mx:FormItem>
            
            <mx:FormItem tabIndex="14" label="Radio Group:">
                <mx:RadioButtonGroup id="radiogroup1"/>
                <mx:RadioButton tabIndex="15" label="Radio Button 1" groupName="radiogroup1"/>
                <mx:RadioButton tabIndex="16" label="Radio Button 2" groupName="radiogroup1"/>
            </mx:FormItem> 
                         
            <mx:FormItem tabIndex="17" label="Combo Box:">
                <mx:ComboBox tabIndex="18">
                    <mx:ArrayCollection>
                        <mx:String>Item 1</mx:String>
                        <mx:String>Item 2</mx:String>
                        <mx:String>Item 3</mx:String>
                    </mx:ArrayCollection>                  
                </mx:ComboBox>
            </mx:FormItem>
            
            <mx:FormItem tabIndex="19" label="List:">
                <mx:List tabIndex="20" labelField="@label" height="45" width="70">
                    <mx:ArrayCollection>
                        <mx:String>Item 1</mx:String>
                        <mx:String>Item 2</mx:String>
                        <mx:String>Item 3</mx:String>
                    </mx:ArrayCollection>                  
                </mx:List>
            </mx:FormItem>
            
            <mx:FormItem tabIndex="21" label="Tree:">
                <mx:Tree tabIndex="22" labelField="@label" showRoot="false" height="45" width="160">
                    <mx:XMLListCollection>
                        <mx:XMLList>
                            <root>
                                <node label="Branch 1">
                                    <node label="Leaf 1"/>
                                    <node label="Leaf 2"/>
                                </node>
                                <node label="Branch 2">
                                    <node label="Leaf 3"/>
                                    <node label="Leaf 4"/>
                                </node>
                                <node label="Branch 3" isBranch="true"/>
                            </root>
                        </mx:XMLList>
                    </mx:XMLListCollection>
                </mx:Tree>
            </mx:FormItem>

            <mx:FormItem tabIndex="23" label="Slider:">
                <mx:HSlider tabIndex="24" maximum="100" snapInterval="1" dataTipPrecision="0"/>
            </mx:FormItem>
                
            <mx:FormItem tabIndex="25" label="Date Field:">
                <mx:DateField tabIndex="26"/>
            </mx:FormItem>
            
            <mx:FormItem tabIndex="27" label="Color Picker:">
                <mx:ColorPicker tabIndex="28"/>
            </mx:FormItem>
            
            <mx:FormItem tabIndex="29" direction="horizontal">
                <mx:Button tabIndex="30" label="Button" click="showAlert();"/>
                <mx:LinkButton tabIndex="31" label="Link Button" click="navigateToURL(new URLRequest('about:blank'))"/>
            </mx:FormItem>

        </mx:Form>

    </mx:Panel>

    <mx:VBox tabIndex="32">
    
        <mx:Panel tabIndex="33" title="Navigation Controls" width="100%" paddingTop="10" paddingRight="10" paddingBottom="10" paddingLeft="10">
            
            <mx:MenuBar tabIndex="34" labelField="@label" width="100%">
                <mx:XMLList>
                    <menuitem label="Menu 1">
                        <menuitem label="Item 1"/>
                        <menuitem label="Item 2">
                         <menuitem label="Sub Menu Item 1"/>
                         <menuitem label="Sub Menu Item 2"/>
                        </menuitem>
                    </menuitem>
                    <menuitem label="Menu 2">
                        <menuitem label="Item 1"/>
                        <menuitem label="Item 2">
                         <menuitem label="Sub Menu Item 1"/>
                         <menuitem label="Sub Menu Item 2"/>
                        </menuitem>
                    </menuitem>
                    <menuitem label="Menu 3">
                        <menuitem label="Radio 1" type="radio" groupName="group1" selected="true"/>
                        <menuitem label="Radio 2" type="radio" groupName="group1"/>
                    </menuitem>
                    <menuitem label="Menu 4" enabled="false"/>
                </mx:XMLList>
            </mx:MenuBar>
            
            <mx:TabNavigator tabIndex="35" width="100%">
                <mx:Form tabIndex="36" label="Tab 1">
                       <mx:FormItem tabIndex="37" label="Text Input T1:">
                           <mx:TextInput tabIndex="38"/>
                       </mx:FormItem>
                </mx:Form>
                <mx:Form tabIndex="39" label="Tab 2">
                       <mx:FormItem tabIndex="40" label="Text Input T2:">
                           <mx:TextInput tabIndex="41"/>
                       </mx:FormItem>
                </mx:Form>
                <mx:Form tabIndex="42" label="Tab 3">
                       <mx:FormItem tabIndex="43" label="Text Input T3:">
                           <mx:TextInput tabIndex="44"/>
                       </mx:FormItem>
                </mx:Form>
            </mx:TabNavigator>
            
            <mx:Accordion tabIndex="45" width="100%">
                <mx:Form tabIndex="46" label="Accordion Pane 1" width="100%">
                       <mx:FormItem tabIndex="47" label="Text Input A1:">
                           <mx:TextInput tabIndex="48"/>
                       </mx:FormItem>
                </mx:Form>
                <mx:Form tabIndex="49" label="Accordion Pane 2" width="100%">
                       <mx:FormItem tabIndex="50" label="Text Input A2:">
                           <mx:TextInput tabIndex="51"/>
                       </mx:FormItem>
                </mx:Form>
                <mx:Form tabIndex="52" label="Accordion Pane 3" width="100%">
                       <mx:FormItem tabIndex="53" label="Text Input A3:">
                           <mx:TextInput tabIndex="54"/>
                       </mx:FormItem>
                </mx:Form>
            </mx:Accordion>
        
        </mx:Panel>
        
        <mx:Panel tabIndex="55" title="Data Grids" paddingTop="10" paddingRight="10" paddingBottom="10" paddingLeft="10">

            <mx:TabNavigator tabIndex="56">
            
                <mx:Box tabIndex="57" label="Data Grid" paddingTop="10" paddingRight="10" paddingBottom="10" paddingLeft="10">

                    <mx:DataGrid tabIndex="58" dataProvider="{flatData}" height="120">
                        <mx:columns>
                            <mx:DataGridColumn dataField="col1" headerText="Column 1"/>
                            <mx:DataGridColumn dataField="col2" headerText="Column 2"/>
                            <mx:DataGridColumn dataField="col3" headerText="Column 3"/>
                        </mx:columns>
                    </mx:DataGrid>

                </mx:Box>

                <mx:Box tabIndex="59" label="Advanced (Flat)" paddingTop="10" paddingRight="10" paddingBottom="10" paddingLeft="10">
                    
                    <mx:AdvancedDataGrid tabIndex="60" dataProvider="{flatData}" designViewDataType="flat" selectionMode="singleCell" height="90">
                        <mx:columns>
                            <mx:AdvancedDataGridColumn dataField="col1" headerText="Column 1"/>
                            <mx:AdvancedDataGridColumn dataField="col2" headerText="Column 2"/>
                            <mx:AdvancedDataGridColumn dataField="col3" headerText="Column 3"/>
                        </mx:columns>
                    </mx:AdvancedDataGrid>

                </mx:Box>
                
                <mx:Box tabIndex="61" label="Advanced (Tree)" paddingTop="10" paddingRight="10" paddingBottom="10" paddingLeft="10">
                    
                    <mx:AdvancedDataGrid tabIndex="62" designViewDataType="tree" selectionMode="singleCell" height="90"> 
                        <mx:dataProvider>
                            <mx:HierarchicalData source="{hierarchicalData}" childrenField="children"/>
                        </mx:dataProvider>
                        <mx:columns>
                            <mx:AdvancedDataGridColumn dataField="col1" headerText="Column 1"/>
                            <mx:AdvancedDataGridColumn dataField="col2" headerText="Column 2"/>
                            <mx:AdvancedDataGridColumn dataField="col3" headerText="Column 3"/>
                        </mx:columns>
                    </mx:AdvancedDataGrid> 

                </mx:Box>

            </mx:TabNavigator>
                    
        </mx:Panel>

    </mx:VBox>
    
</mx:Application>