Flex 4 - Advanced Datagrid

Sample.mxml

<?xml version="1.0" encoding="utf-8"?>
<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" 
               skinClass="TDFGradientBackgroundSkin" 
               viewSourceURL="srcview/index.html">
    
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            
            [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}
            ]);
        ]]>
    </fx:Script>
    
    <s:layout>
        <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
    </s:layout>
    
    <s:Panel title="AdvancedDataGrid Control" 
             color="0x000000" 
             borderAlpha="0.15" 
             width="600">
        
        <mx:AdvancedDataGrid id="myADG" 
                             width="100%" height="100%" 
                             color="0x323232"
                             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:Panel>
    
</s:Application>

TDFPanelSkin.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
             xmlns:mx="library://ns.adobe.com/flex/mx" 
             xmlns:s="library://ns.adobe.com/flex/spark">
    
    <fx:Metadata>
        [HostComponent("spark.components.Application")]
    </fx:Metadata> 
    
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>
    
    <s:layout>
        <s:BasicLayout />
    </s:layout>
    
    <s:Rect id="bg" width="100%" height="100%">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:entries>
                    <s:GradientEntry color="0x000000" ratio="0.00" />
                    <s:GradientEntry color="0x323232" ratio="1.0" />
                </s:entries>
            </s:LinearGradient>    
        </s:fill>
    </s:Rect>
    
    <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" />
</s:SparkSkin>

Flex Rich Text Editor Example

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top"
    horizontalAlign="center" backgroundGradientColors="[0x000000,0x323232]" paddingTop="0" viewSourceURL="srcview/index.html">
    <mx:Script>
        <![CDATA[
            private var richText:String = "Enter text into the <b>RichTextEditor control</b>, then click a <b><font color='#0050AA'>button</font></b> to display your text as <i>plain text</i>, or as <i>HTML-formatted</i> text.";
        ]]>
    </mx:Script>
    <mx:Style>
        .white{
            color: #ffffff;
            fontWeight: bold;
        }
    </mx:Style>
    
    <mx:RichTextEditor titleStyleName="white" id="rte" title="RichTextEditor" width="70%" height="150"
        borderAlpha="0.15" creationComplete="rte.htmlText=richText;"  />

    <mx:TextArea id="rteText" width="70%" height="50" />

    <mx:HBox>
        <mx:Button color="black" label="Show Plain Text" click="rteText.text=rte.text;"/>
        <mx:Button color="black" label="Show HTML Markup" click="rteText.text=rte.htmlText;"/>
    </mx:HBox>
</mx:Application>

Flex Radio Button Example

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" verticalAlign="middle"
    horizontalAlign="center" backgroundGradientColors="[0x000000,0x323232]" viewSourceURL="srcview/index.html">
    
    <mx:Script>
        <![CDATA[
            
            private var statement:Array = ["I","love Flex."];
            
            private function displayAnswer(txt:String):void{
                answer.htmlText = statement[0] + " <u>" + txt + "</u> " + statement[1];
            }
        ]]>
    </mx:Script>
    
    <mx:Panel title="RadioButton" layout="vertical" color="0xffffff" borderAlpha="0.15"
         paddingTop="10" paddingRight="10" paddingBottom="10" paddingLeft="10" horizontalAlign="center">
        
        <mx:Text color="0x323232" fontWeight="bold" text="Which word best completes the statement below?" />
        
        <mx:VBox>
            <mx:RadioButton groupName="survey" id="word1" label="totally" color="0x323232" click="displayAnswer(word1.label);" /> 
            <mx:RadioButton groupName="survey" id="word2" label="do" color="0x323232" click="displayAnswer(word2.label);" />
            <mx:RadioButton groupName="survey" id="word3" label="kind of" color="0x323232" click="displayAnswer(word3.label);" />
            <mx:RadioButton groupName="survey" id="word4" label="do not" color="0x323232" click="displayAnswer(word4.label);" />
        </mx:VBox>
        
        <mx:Text id="answer" fontSize="16" fontWeight="bold" color="0x0050AA" creationComplete="displayAnswer('     ');" />
    </mx:Panel>
</mx:Application>

Flex Numeric Stepper Example

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top"
    horizontalAlign="center" backgroundGradientColors="[0x000000,0x323232]" paddingTop="0" viewSourceURL="srcview/index.html">
    
    <mx:Panel title="NumericStepper Control" layout="horizontal" color="0xffffff" borderAlpha="0.15" width="500"
         paddingTop="10" paddingRight="10" paddingBottom="10" paddingLeft="10" horizontalAlign="center">
         
         <mx:VBox color="0x323232" horizontalAlign="center" borderColor="0xACACAC" borderStyle="solid" width="50%" height="100%">
         
             <mx:Text width="100%" textAlign="center"
                 text="Default NumericStepper control with a minimum=0, maximum=10, and stepSize=1."/>
            <mx:NumericStepper/>
            
         </mx:VBox>
         <mx:VBox color="0x323232" horizontalAlign="center" borderColor="0xACACAC" borderStyle="solid" width="50%" height="100%">
             
             <mx:Text width="100%" textAlign="center"
            text="NumericStepper control with a minimum=10, maximum=40, stepSize=0.01, and starting value of 20."/>

            <mx:NumericStepper id="ns" minimum="10.00" maximum="40.00" stepSize="0.01" value="20.00" width="65"/>
            
         </mx:VBox>
         
    </mx:Panel>
</mx:Application>

Flex Label Example

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundGradientColors="[0x000000,0x323232]" viewSourceURL="srcview/index.html">
<!-- Simple example to demonstrate the Label control -->

    <mx:Script>
        <![CDATA[
      
            private var htmlData:String="<br>This label displays <b>bold</b> and <i>italic</i> HTML-formatted text.";
                                         
            // Event handler function to change the image size.
            private function displayHTML():void {
                simpleLabel.htmlText= htmlData;
            }
          
            // Event handler function to change the image size.
            private function displayText():void {
                simpleLabel.text="This Label displays plain text.";
            }         
        ]]>
    </mx:Script>

  <mx:Panel title="Label Control Example" height="75%" width="75%" 
      paddingTop="10" paddingLeft="10" color="0xffffff" borderAlpha="0.15">
    
      <mx:Label id="simpleLabel" text="This Label displays plain text." color="0x000000"/>
      <mx:Button id="Display" label="Click to display HTML Text" click="displayHTML();" color="0x000000"/>
      <mx:Button id="Clear" label="Click to display plain text" click="displayText();" color="0x000000"/>
  
  </mx:Panel>
</mx:Application>

Flex Data Field Example

<?xml version="1.0" encoding="utf-8"?>
<!-- Simple example to demonstrate the DateField control. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" verticalAlign="top"
    horizontalAlign="center" backgroundGradientColors="[0x000000,0x323232]" paddingTop="0" paddingBottom="0" viewSourceURL="srcview/index.html">

    <mx:Script>
      <![CDATA[

         // Event handler for the DateField change event.
         private function dateChanged(date:Date):void {
            if (date == null)
                selection.text = "Date selected: ";                
            else
                selection.text = "Date selected: " + date.getFullYear().toString() + 
                    '/' + (date.getMonth()+1).toString() + '/' + date.getDate();
         }
      ]]>
    </mx:Script>
 
 <mx:DateFormatter id="df"/>

    <mx:Panel title="DateField Control Example" width="600" color="0xffffff" borderAlpha="0.15" height="240"
       layout="horizontal" horizontalGap="15" paddingLeft="10" paddingTop="10" paddingRight="10" paddingBottom="10" horizontalScrollPolicy="off" verticalScrollPolicy="off">
        
        <mx:VBox width="50%" borderColor="0xDCDCDC" borderStyle="solid" height="100%" paddingLeft="10">
            <mx:Label id="selection" color="0x323232" text="Date selected:" />
            
            <mx:DateField id="dateField1" yearNavigationEnabled="true"
                change="dateChanged(DateField(event.target).selectedDate)" color="0x000000"/>
                
            <mx:Label color="0x000000" text="Basic DateField:"/>
            <mx:Text width="100%" color="0x323232"
                text="Select a date in the DateField control. Select it again while holding down the Control key to clear it."/>
            
        </mx:VBox>
        
        <mx:VBox width="50%" borderColor="0xDCDCDC" borderStyle="solid" height="100%" paddingLeft="10">
            <mx:Label color="0x323232" text="Date selected: {df.format(dateField2.selectedDate)}"/>
            
            <mx:DateField id="dateField2" yearNavigationEnabled="true" 
                disabledRanges="{[ {rangeEnd: new Date(2008, 9, 31)} ]}" color="0x000000"/>
                
            <mx:Text color="0x000000" text="Disable dates on or before Oct 31, 2008."/>
        </mx:VBox>
        
    </mx:Panel>
</mx:Application>

Flex Date Chooser Example

<?xml version="1.0"?>
<!-- Simple example to demonstrate DateChooser control. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" verticalAlign="top"
    horizontalAlign="center" backgroundGradientColors="[0x000000,0x323232]" paddingTop="0" paddingBottom="0" viewSourceURL="srcview/index.html">

    <mx:Script>
        <![CDATA[

            // Event handler function to write the selected
            // date to the Label control.        
            private function displayDate(date:Date):void {
                if (date == null)
                    selection.text = "Date selected: ";
                else
                    selection.text = "Date selected: " + date.getFullYear().toString() +
                        '/' + (date.getMonth()+1).toString() + '/' + date.getDate();
            }
        ]]>
    </mx:Script>

    <mx:DateFormatter id="df"/>
    
    <mx:Panel title="DateChooser Control Example" width="600" color="0xffffff" borderAlpha="0.15" height="240"
       layout="horizontal" horizontalGap="15" paddingLeft="10" paddingTop="0" paddingRight="10" paddingBottom="0" horizontalScrollPolicy="off" verticalScrollPolicy="off">
        
           <mx:VBox>
          <mx:Label width="100%" color="0x000000" text="Simple DateChooser Control"/>
          <mx:DateChooser id="dateChooser1" yearNavigationEnabled="true"  height="145"   
              change="displayDate(DateChooser(event.target).selectedDate)" color="0x000000"/>
          <mx:Label id="selection" color="0x323232" text="Date selected:"/>
          </mx:VBox>

          <mx:VBox>
          <mx:Label width="100%" color="0x000000" text="Disable dates before Oct 31st, 2008"/>
          <mx:DateChooser id="dateChooser2" yearNavigationEnabled="true" width="175" height="145"
              disabledRanges="{[ {rangeEnd: new Date(2008, 9, 31)} ]}" color="0x000000"/>
          <mx:Label color="0x323232" text="Date selected: {df.format(dateChooser2.selectedDate)}"/>
        </mx:VBox>
        
        <mx:VBox width="30%">
            <mx:Text width="100%" color="0x323232" text="Select a date in the DateChooser control."/>
            <mx:Text width="100%" color="0x323232" text="Select it again while holding down the Control key to clear it."/>
        </mx:VBox>
        
    </mx:Panel>    
</mx:Application>