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

////////////////////////////////////////////////////////////////////////////////
//
//    Copyright 2014 Ardisia Labs LLC. All Rights Reserved.
//
//    This file is licensed 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.
//
////////////////////////////////////////////////////////////////////////////////

-->
<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009" 
          xmlns:s="library://ns.adobe.com/flex/spark" 
          xmlns:mx="library://ns.adobe.com/flex/mx" 
          xmlns:containers="containers.*"
          xmlns:data="containers.data.*"
          xmlns:separators="ardisia.components.separators.*"
          xmlns:colorPicker="ardisia.components.colorPicker.*" 
          xmlns:scroller="ardisia.components.scroller.*" 
          xmlns:toolbar="ardisia.components.toolbar.*"
          frameRate="60"
          width="100%" height="100%"
          removedFromStage="removedFromStageHandler(event)">
    
    <!-- scripts -->
    <fx:Script>
        <![CDATA[
            import mx.controls.Menu;
            
            import ardisia.themes.london.skins.ColorTransformButtonSkin;
            import ardisia.themes.london.skins.TabBarSimpleSkin;
            import ardisia.themes.stockholm.skins.ColorTransformButtonSkin;
            
            //----------------------------------
            //     variables
            //----------------------------------
            
            [Bindable]private var dpFlat:ArrayCollection = new ArrayCollection([
                {Region:"Southwest", Territory:"Arizona", 
                    Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000}, 
                {Region:"Southwest", Territory:"Arizona", 
                    Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000},  
                {Region:"Southwest", Territory:"Central California", 
                    Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000},  
                {Region:"Southwest", Territory:"Nevada", 
                    Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000},  
                {Region:"Southwest", Territory:"Northern California", 
                    Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000}, 
                {Region:"Southwest", Territory:"Northern California", 
                    Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000},  
                {Region:"Southwest", Territory:"Southern California", 
                    Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000}, 
                {Region:"Southwest", Territory:"Southern California", 
                    Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000},
                {Region:"NorthEast", Territory:"New York", 
                    Territory_Rep:"Jose Rodriguez", Actual:26992, Estimate:30000}, 
                {Region:"NorthEast", Territory:"New York", 
                    Territory_Rep:"Lisa Sims", Actual:47885, Estimate:50000},  
                {Region:"NorthEast", Territory:"Massachusetts", 
                    Territory_Rep:"Kelly O'Connell", Actual:172911, Estimate:20000}, 
                {Region:"NorthEast", Territory:"Pennsylvania", 
                    Territory_Rep:"John Barnes", Actual:32105, Estimate:30000},
                {Region:"MidWest", Territory:"Illinois", 
                    Territory_Rep:"Seth Brown", Actual:42511, Estimate:40000}
            ]);
            
            //--------------------------------------
            //  methods
            //--------------------------------------
            
            public function creationComplete():void
            {
                
            }
            
            //----------------------------------
            //     event handlers
            //----------------------------------
            
            protected function menuHandler(event:MouseEvent):void
            {
                var myMenu:Menu = Menu.createMenu(null, myMenuData, false);
                myMenu.variableRowHeight = true;
                myMenu.minWidth = 190;
                myMenu.labelField="@label";
                myMenu.show(event.stageX, event.stageY);
            }
            
            protected function removedFromStageHandler(event:Event):void
            {
                
            }
            
        ]]>
    </fx:Script>
    
    <!-- declaratiosn -->
    <fx:Declarations>
        
        <fx:XMLList id="myMenuData">
            <root>
                <menuitem label="MenuItem A" >
                    <menuitem label="SubMenuItem A-1" enabled="false"/>
                    <menuitem label="SubMenuItem A-2"/>
                </menuitem>
                <menuitem label="MenuItem B" type="check" toggled="true"/>
                <menuitem label="MenuItem C" type="check" toggled="false"/>
                <menuitem type="separator"/>     
                <menuitem label="MenuItem D" >
                    <menuitem label="SubMenuItem D-1" type="radio" 
                              groupName="one"/>
                    <menuitem label="SubMenuItem D-2" type="radio" 
                              groupName="one" toggled="true"/>
                    <menuitem label="SubMenuItem D-3" type="radio" 
                              groupName="one"/>
                </menuitem>
            </root>
        </fx:XMLList>
        
    </fx:Declarations>
    
    <!-- states -->
    <s:states>
        <s:State name="stockholm" />
        <s:State name="london" />
        <s:State name="spark" />
    </s:states>
    
    <!-- application -->
    <containers:DemoApplicationWrapper id="demoAppWrapper" 
                                       top="0" right="0" bottom="0" left="0"
                                       top.london="0" right.london="4" bottom.london="4" left.london="4"
                                       westRegionTitle="Theme Demos"
                                       description="The Stockholm and London themes are high quality set of styles and skins for existing Spark and Halo UI controls.&#13;&#13;Both themes are included with the Ardisia Component Set Library."
                                       currentState.stockholm="stockholm" currentState.london="london" currentState.spark="spark">
        
        <containers:expandingContainerContent>
            
            <!--- expanding container #1 -->
            <data:ExpandingContainerData>
                <data:label>Styling</data:label>
                <data:content>
                    <s:FormItem label="Background Color:">
                        <colorPicker:ColorPicker id="backgroundColorSelect" 
                                                 selectedColor="#FFFFFF"/>
                    </s:FormItem>
                </data:content>
            </data:ExpandingContainerData>
            
        </containers:expandingContainerContent>
        
        <containers:centerContent>
            
            <!--- example #1 -->
            <data:PrimaryContentData>
                <data:tabLabel>Theme Examples</data:tabLabel>
                <data:exampleDescription>Change the theme using the dropdown in the upper-right to see Flex SDK UI controls for each theme.</data:exampleDescription>
                <data:primaryContent>
                    <s:Rect top="0" right="0" bottom="0" left="0">
                        <s:fill>
                            <s:SolidColor color="{backgroundColorSelect.selectedColor}" />
                        </s:fill>
                    </s:Rect>
                    <scroller:Scroller width="100%" height="100%"
                                       mouseWheelStepSize="120">
                        <s:Group>
                            <s:VGroup top="20" right="20" bottom="20" left="20"
                                      horizontalAlign="justify"
                                      gap="20">
                                <s:Form>
                                    <s:layout>
                                        <s:FormLayout gap="13"/>
                                    </s:layout>
                                    
                                    <s:FormHeading label="Spark"/>
                                    <separators:HSeparator width="100%"
                                                           paddingTop="-5" paddingBottom="5"/>
                                    
                                    <s:FormHeading label="Buttons"/>
                                    <s:FormItem label="Default:">
                                        <s:Button label="Find Replace with:"/>
                                    </s:FormItem>
                                    <s:FormItem label="Emphasized:">
                                        <s:Button label="Click Me"
                                                  styleName="emphasized"/>
                                    </s:FormItem>
                                    <s:FormItem label="Toggle:">
                                        <s:ToggleButton label="Click Me"/>
                                    </s:FormItem>
                                    <!-- do not exclude from spark -->
                                    <s:FormItem visible="true" visible.spark="false"
                                                includeInLayout="true" includeInLayout.spark="false"
                                                label="Color Transform:">
                                        <s:Button label="Click Me" 
                                                  icon="@Embed(source='icons/folder-open.png')"
                                                  skinClass="ardisia.themes.stockholm.skins.ColorTransformButtonSkin" 
                                                  skinClass.london="ardisia.themes.london.skins.ColorTransformButtonSkin" />
                                    </s:FormItem>
                                    <s:FormItem label="ButtonBar:">
                                        <s:ButtonBar>
                                            <s:dataProvider>
                                                <s:ArrayCollection>
                                                    <fx:String>Button A</fx:String>
                                                    <fx:String>Button BBB BBB</fx:String>
                                                    <fx:String>Button C C C</fx:String>
                                                    <fx:String>Button DD DD DD</fx:String>
                                                </s:ArrayCollection>
                                            </s:dataProvider>
                                        </s:ButtonBar>
                                    </s:FormItem>
                                    <s:FormItem label="TabBar:">
                                        <s:VGroup gap="-1"
                                                  horizontalAlign="contentJustify">
                                            <s:TabBar depth="2">
                                                <s:dataProvider>
                                                    <s:ArrayCollection>
                                                        <fx:String>Tab A</fx:String>
                                                        <fx:String>Tab BBB BBB</fx:String>
                                                        <fx:String>Tab CC CC</fx:String>
                                                    </s:ArrayCollection>
                                                </s:dataProvider>
                                            </s:TabBar>
                                            <s:BorderContainer height="50" backgroundColor="#FFFFFF" depth="1"/>
                                        </s:VGroup>
                                    </s:FormItem>
                                    <s:FormItem visible="false" visible.london="true" 
                                                includeInLayout="false" includeInLayout.london="true" 
                                                label="Simple TabBar:">
                                        <s:VGroup gap="-1"
                                                  horizontalAlign="contentJustify">
                                            <s:TabBar skinClass="ardisia.themes.london.skins.TabBarSimpleSkin"
                                                      depth="2">
                                                <s:dataProvider>
                                                    <s:ArrayCollection>
                                                        <fx:String>Tab A AA</fx:String>
                                                        <fx:String>Tab BBB BBB</fx:String>
                                                        <fx:String>Tab CC CC</fx:String>
                                                        <fx:String>Tab D</fx:String>
                                                    </s:ArrayCollection>
                                                </s:dataProvider>
                                            </s:TabBar>
                                            <s:BorderContainer height="50" backgroundColor="#FFFFFF" depth="1"/>
                                        </s:VGroup>
                                    </s:FormItem>
                                    
                                    <s:FormHeading label="Toolbar, Toolbar Buttons"/>
                                    <s:FormItem label="Toolbar:">
                                        <toolbar:Toolbar width="300" height="39" />
                                    </s:FormItem>
                                    
                                    <s:FormItem label="Toolbar Buttons:">
                                        <toolbar:Toolbar width="300">
                                            <toolbar:layout>
                                                <s:HorizontalLayout verticalAlign="justify"/>
                                            </toolbar:layout>
                                            <toolbar:ToolbarButton icon="@Embed(source='icons/open-iconic-master/home-2x.png')"/>
                                            <toolbar:ToolbarButton icon="@Embed(source='icons/open-iconic-master/globe-2x.png')"/>
                                            <toolbar:ToolbarButton icon="@Embed(source='icons/open-iconic-master/paperclip-2x.png')"/>
                                            <toolbar:ToolbarButton icon="@Embed(source='icons/open-iconic-master/magnifying-glass-2x.png')"/>
                                            <separators:VSeparator height="100%"
                                                                   paddingTop="0" paddingBottom="0" paddingRight="5" paddingLeft="5"/>
                                            <toolbar:ToolbarButton label="Close"/>
                                            <toolbar:ToolbarButton label="Open"/>
                                        </toolbar:Toolbar>
                                    </s:FormItem>
                                    <s:FormItem label="Toolbar Color Transform Buttons:">
                                        <toolbar:Toolbar width="300">
                                            <toolbar:layout>
                                                <s:HorizontalLayout verticalAlign="justify"/>
                                            </toolbar:layout>
                                            <toolbar:ToolbarColorTransformButton icon="@Embed(source='icons/fugue/clipboard-paste-image.png')"/>
                                            <toolbar:ToolbarColorTransformButton icon="@Embed(source='icons/fugue/document-image.png')"/>
                                            <toolbar:ToolbarColorTransformButton icon="@Embed(source='icons/folder-open.png')"
                                                                                 label="Click Me"/>
                                        </toolbar:Toolbar>
                                    </s:FormItem>
                                    <s:FormItem label="Toolbar Toggle Buttons:">
                                        <toolbar:Toolbar width="300">
                                            <toolbar:layout>
                                                <s:HorizontalLayout verticalAlign="justify"/>
                                            </toolbar:layout>
                                            <toolbar:ToolbarColorTransformIconToggleButton icon="@Embed(source='icons/fugue/clipboard-paste-image.png')"/>
                                            <toolbar:ToolbarColorTransformIconToggleButton icon="@Embed(source='icons/fugue/document-image.png')"/>
                                            <toolbar:ToolbarColorTransformIconToggleButton icon="@Embed(source='icons/folder-open.png')"
                                                                                           label="Click Me"/>
                                        </toolbar:Toolbar>
                                    </s:FormItem>
                                    <s:FormItem label="Toolbar TabBar:">
                                        <s:VGroup width="300"
                                                  horizontalAlign="justify"
                                                  gap="-1">
                                            <toolbar:ToolbarTabBar depth="2">
                                                <s:ArrayCollection>
                                                    <fx:String>Tab A</fx:String>
                                                    <fx:String>Tab B</fx:String>
                                                    <fx:String>Tab C</fx:String>
                                                    <fx:String>Tab D</fx:String>
                                                </s:ArrayCollection>
                                            </toolbar:ToolbarTabBar>
                                            <toolbar:Toolbar height="39" 
                                                             depth="1"/>
                                        </s:VGroup>
                                    </s:FormItem>
                                    
                                    <s:FormHeading label="Form Controls"/>
                                    <s:FormItem label="Checkbox:">
                                        <s:CheckBox label="Label"/>
                                    </s:FormItem>
                                    <s:FormItem label="RadioButton:">
                                        <s:VGroup>
                                            <s:RadioButton label="Radio A" groupName="radioGroup"/>
                                            <s:RadioButton label="Radio B" groupName="radioGroup"/>
                                            <s:RadioButton label="Radio C" groupName="radioGroup"/>
                                        </s:VGroup>
                                    </s:FormItem>
                                    <s:FormItem label="TextInput:">
                                        <s:TextInput />
                                    </s:FormItem>
                                    <s:FormItem label="TextArea:">
                                        <s:TextArea width="200" height="100"/>
                                    </s:FormItem>
                                    <s:FormItem label="HSlider:">
                                        <s:HSlider />
                                    </s:FormItem>
                                    <s:FormItem label="VSlider:">
                                        <s:VSlider />
                                    </s:FormItem>
                                    <s:FormItem label="NumericStepper:">
                                        <s:NumericStepper />
                                    </s:FormItem>
                                    <s:FormItem label="Spinner:">
                                        <s:Spinner />
                                    </s:FormItem>
                                    
                                    <s:FormHeading label="Lists"/>
                                    <s:FormItem label="List:">
                                        <s:List borderVisible="true">
                                            <s:dataProvider>
                                                <s:ArrayCollection>
                                                    <fx:String>AAAA AA A</fx:String>
                                                    <fx:String>BBBB BB B</fx:String>
                                                    <fx:String>CCCC CC C</fx:String>
                                                    <fx:String>DDDD DD D</fx:String>
                                                </s:ArrayCollection>
                                            </s:dataProvider>
                                        </s:List>
                                    </s:FormItem>
                                    <s:FormItem label="DropDownList:">
                                        <s:DropDownList requireSelection="true">
                                            <s:dataProvider>
                                                <s:ArrayCollection>
                                                    <fx:String>AAAA AA A</fx:String>
                                                    <fx:String>BBBB BB B</fx:String>
                                                    <fx:String>CCCC CC C</fx:String>
                                                    <fx:String>DDDD DD D</fx:String>
                                                    <fx:String>AAAA AA A</fx:String>
                                                    <fx:String>BBBB BB B</fx:String>
                                                    <fx:String>CCCC CC C</fx:String>
                                                    <fx:String>DDDD DD D</fx:String>
                                                    <fx:String>AAAA AA A</fx:String>
                                                    <fx:String>BBBB BB B</fx:String>
                                                    <fx:String>CCCC CC C</fx:String>
                                                    <fx:String>DDDD DD D</fx:String>
                                                </s:ArrayCollection>
                                            </s:dataProvider>
                                        </s:DropDownList>
                                    </s:FormItem>
                                    <s:FormItem label="ComboBox:">
                                        <s:ComboBox cornerRadius="10">
                                            <s:dataProvider>
                                                <s:ArrayCollection>
                                                    <fx:String>AAAA AA A</fx:String>
                                                    <fx:String>BBBB BB B</fx:String>
                                                    <fx:String>CCCC CC C</fx:String>
                                                    <fx:String>DDDD DD D</fx:String>
                                                </s:ArrayCollection>
                                            </s:dataProvider>
                                        </s:ComboBox>
                                    </s:FormItem>
                                    <s:FormItem label="DataGrid:">
                                        <s:DataGrid id="dataGrid" 
                                                    width="400" height="200"
                                                    borderVisible="true"
                                                    requestedRowCount="5" verticalCenter="0" horizontalCenter="0">
                                            <s:ArrayCollection>
                                                <s:DataItem key="1000" name="Abrasive" price="100.11" call="false"/>
                                                <s:DataItem key="1001" name="Brush" price="110.01" call="true"/>
                                                <s:DataItem key="1002" name="Clamp" price="120.02" call="false"/>
                                                <s:DataItem key="1003" name="Drill" price="130.03" call="true"/>
                                                <s:DataItem key="1004" name="Epoxy" price="140.04" call="false"/>
                                                <s:DataItem key="1005" name="File" price="150.05" call="true"/>
                                                <s:DataItem key="1006" name="Gouge" price="160.06" call="false"/>
                                                <s:DataItem key="1007" name="Hook" price="170.07" call="true"/>
                                                <s:DataItem key="1008" name="Ink" price="180.08" call="false"/>
                                                <s:DataItem key="1009" name="Jack" price="190.09" call="true"/>             
                                            </s:ArrayCollection>
                                        </s:DataGrid>
                                    </s:FormItem>
                                    
                                    <s:FormHeading label="Containers"/>
                                    <s:FormItem label="Panel:">
                                        <s:Panel width="400" height="200"
                                                 title="Testing Title Bar Here">
                                            
                                            <s:controlBarContent>
                                                <s:Button label="test" right="0"/>
                                                
                                                <s:Button label="test2" left="0"/>
                                            </s:controlBarContent>
                                            
                                            <s:VGroup top="-1" right="-1" bottom="0" left="-1" 
                                                      gap="-1"
                                                      horizontalAlign="contentJustify">
                                                <s:TabBar depth="2">
                                                    <s:dataProvider>
                                                        <s:ArrayCollection>
                                                            <fx:String>AAAA AA A</fx:String>
                                                            <fx:String>BBBB Basd asd as ddsd B B</fx:String>
                                                            <fx:String>CCCC CC C</fx:String>
                                                        </s:ArrayCollection>
                                                    </s:dataProvider>
                                                </s:TabBar>
                                                <s:Group />
                                            </s:VGroup>
                                            
                                        </s:Panel>
                                    </s:FormItem>
                                    <s:FormItem label="Embedded Scroller:">
                                        <s:Panel width="400" height="200"
                                                 title="Testing Title Bar Here">
                                            
                                            <s:controlBarContent>
                                                <s:Button label="test" right="0"/>
                                                
                                                <s:Button label="test2" left="0"/>
                                            </s:controlBarContent>
                                            
                                            
                                            <s:Scroller top="0" right="0" bottom="0" left="0">
                                                <s:Group>
                                                    <s:Image width="15000" height="500" />
                                                </s:Group>
                                            </s:Scroller>
                                            
                                        </s:Panel>
                                    </s:FormItem>
                                    <s:FormItem label="TitleWindow:">
                                        <s:TitleWindow id="titleWindow" 
                                                       width="400" height="300"
                                                       title="London Theme">
                                            <s:controlBarContent>
                                                <s:Button label="London" right="0"/>
                                                
                                            </s:controlBarContent>
                                            
                                            <s:Scroller top="20" left="20" right="20" depth="20">
                                                <s:VGroup>
                                                    <s:TabBar width="100%">
                                                        <s:dataProvider>
                                                            <s:ArrayCollection>
                                                                <fx:String>AAAA AA A</fx:String>
                                                                <fx:String>BBBB Basd asd as ddsd B B</fx:String>
                                                                <fx:String>CCCC CC C</fx:String>
                                                            </s:ArrayCollection>
                                                        </s:dataProvider>
                                                    </s:TabBar>
                                                    <s:HGroup>
                                                        <s:List>
                                                            <s:dataProvider>
                                                                <s:ArrayCollection>
                                                                    <fx:String>AAAA AA A</fx:String>
                                                                    <fx:String>BBBB BB B</fx:String>
                                                                    <fx:String>CCCC CC C</fx:String>
                                                                    <fx:String>DDDD DD D</fx:String>
                                                                </s:ArrayCollection>
                                                            </s:dataProvider>
                                                        </s:List>
                                                        <s:DataGrid borderVisible="true"
                                                                    width="210" height="130"
                                                                    requestedRowCount="5">
                                                            <s:ArrayCollection>
                                                                <s:DataItem key="1000" name="Abrasive" price="100.11" call="false"/>
                                                                <s:DataItem key="1001" name="Brush" price="110.01" call="true"/>
                                                                <s:DataItem key="1002" name="Clamp" price="120.02" call="false"/>
                                                                <s:DataItem key="1003" name="Drill" price="130.03" call="true"/>
                                                                <s:DataItem key="1004" name="Epoxy" price="140.04" call="false"/>
                                                                <s:DataItem key="1005" name="File" price="150.05" call="true"/>
                                                                <s:DataItem key="1006" name="Gouge" price="160.06" call="false"/>
                                                                <s:DataItem key="1007" name="Hook" price="170.07" call="true"/>
                                                                <s:DataItem key="1008" name="Ink" price="180.08" call="false"/>
                                                                <s:DataItem key="1009" name="Jack" price="190.09" call="true"/>             
                                                            </s:ArrayCollection>
                                                        </s:DataGrid>
                                                    </s:HGroup>
                                                </s:VGroup>
                                            </s:Scroller>
                                            
                                        </s:TitleWindow>
                                    </s:FormItem>
                                    
                                    <s:FormHeading label="Halo"
                                                   fontSize="14"/>
                                    <separators:HSeparator width="100%"
                                                           paddingTop="-5" paddingBottom="5"/>
                                    <s:FormItem label="MX ColorPicker:">
                                        <mx:ColorPicker />
                                    </s:FormItem>
                                    <s:FormItem label="MX Scrollbars">
                                        <mx:Canvas width="200" height="200">
                                            <mx:UIComponent width="5000" height="500" />
                                        </mx:Canvas>
                                    </s:FormItem>
                                    <s:FormItem label="MX Tree:">
                                        <mx:Tree width="200" 
                                                 labelField="@label"
                                                 showRoot="false">
                                            <mx:dataProvider>
                                                <s:XMLListCollection>
                                                    <fx:XMLList xmlns="">
                                                        <node label="Mail Box">
                                                            <node label="Inbox">
                                                                <node label="Marketing"/>
                                                                <node label="Product Management "/>
                                                                <node label="Personal"/>
                                                                <node label="Marketing"/>
                                                                <node label="Product Management "/>
                                                                <node label="Personal"/>
                                                                <node label="Marketing"/>
                                                            </node>
                                                            <node label="Outbox">
                                                                <node label="Professional"/>
                                                                <node label="Personal"/>
                                                            </node>
                                                            <node label="Spam"/>
                                                            <node label="Sent"/>
                                                            <node label="Spam"/>
                                                            <node label="Sent"/>
                                                        </node>
                                                    </fx:XMLList>
                                                </s:XMLListCollection>
                                            </mx:dataProvider>
                                        </mx:Tree>
                                    </s:FormItem>
                                    <s:FormItem label="MX AdvancedDataGrid:">
                                        <mx:AdvancedDataGrid id="myADG" 
                                                             width="100%" height="260"
                                                             color="#323232"
                                                             dataProvider="{dpFlat}">
                                            
                                            <mx:groupedColumns>
                                                
                                                <mx:AdvancedDataGridColumn dataField="Region" />
                                                <mx:AdvancedDataGridColumn dataField="Territory" />
                                                <mx:AdvancedDataGridColumn dataField="Territory_Rep"
                                                                           headerText="Territory Rep"/>
                                                <mx:AdvancedDataGridColumnGroup headerText="Revenues">    
                                                    <mx:AdvancedDataGridColumn dataField="Actual"/>
                                                    <mx:AdvancedDataGridColumn dataField="Estimate"/>
                                                </mx:AdvancedDataGridColumnGroup>
                                                
                                            </mx:groupedColumns>
                                            
                                        </mx:AdvancedDataGrid>
                                    </s:FormItem>
                                    <s:FormItem label="MX DateChooser:">
                                        <mx:DateChooser width="200" height="200"/>
                                    </s:FormItem>
                                    <s:FormItem label="MX DateField:">
                                        <mx:DateField editable="true"
                                                      width="100"/>
                                    </s:FormItem>
                                    <s:FormItem label="MX ToolTip:">
                                        <mx:ToolTip text="Flex Is Fun!"/>
                                    </s:FormItem>
                                </s:Form>
                                <mx:Spacer height="100" />
                            </s:VGroup>
                        </s:Group>
                    </scroller:Scroller>
                </data:primaryContent>
            </data:PrimaryContentData>
            
        </containers:centerContent>
        
    </containers:DemoApplicationWrapper>
    
</s:Module>