You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@flex.apache.org by jm...@apache.org on 2014/08/09 04:17:21 UTC

[06/10] moved mx example files to mx directory

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/48f47e61/TourDeFlex/TourDeFlex3/src/formatters/SimpleFormatterExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/formatters/SimpleFormatterExample.mxml b/TourDeFlex/TourDeFlex3/src/formatters/SimpleFormatterExample.mxml
deleted file mode 100755
index fbb09fe..0000000
--- a/TourDeFlex/TourDeFlex3/src/formatters/SimpleFormatterExample.mxml
+++ /dev/null
@@ -1,67 +0,0 @@
-<?xml version="1.0"?>
-<!--
-  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 Formatter class. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
-
-    <fx:Script>
-        <![CDATA[
-
-            // Event handler to format the input.            
-            private function Format():void
-            {
-                // The format() method returns the formatted String,
-                // or an empty String if there is an error.
-                var formattedVal:String = numberFormatter.format(inputVal.text);
-
-                if (formattedVal.length==0) {
-                    // If there is an error, the Format.error property 
-                    // contains the reason.
-                	formattedNumber.text=numberFormatter.error;
-                }
-                
-                else {
-                    formattedNumber.text=formattedVal;
-                }
-            }
-        ]]>
-    </fx:Script>
-
-	<fx:Declarations>
-    	<mx:NumberFormatter id="numberFormatter"/>
-	</fx:Declarations>
-
-    <mx:Panel title="NumberFormatter Example" width="75%" height="75%" 
-            paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
-
-        <mx:Form>
-            <mx:FormItem label="Enter number - a letter is invalid:">
-                <mx:TextInput id="inputVal" text="" width="75%"/>
-            </mx:FormItem>
-
-            <mx:FormItem label="Formatted number: ">
-                <mx:TextInput id="formattedNumber" editable="false" width="75%"/>
-            </mx:FormItem>
-
-            <mx:FormItem>
-                <mx:Button label="Validate and Format" click="Format();"/>
-            </mx:FormItem>
-        </mx:Form>
-  
-    </mx:Panel>
-</mx:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/48f47e61/TourDeFlex/TourDeFlex3/src/formatters/SwitchSymbolFormatterExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/formatters/SwitchSymbolFormatterExample.mxml b/TourDeFlex/TourDeFlex3/src/formatters/SwitchSymbolFormatterExample.mxml
deleted file mode 100755
index 050bc6d..0000000
--- a/TourDeFlex/TourDeFlex3/src/formatters/SwitchSymbolFormatterExample.mxml
+++ /dev/null
@@ -1,63 +0,0 @@
-<?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 SwitchSymbolFormatter. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
-
-    <fx:Script>
-        <![CDATA[
-        
-            import mx.formatters.SwitchSymbolFormatter;                
-            import mx.events.ValidationResultEvent;			
-            
-            private var vResult:ValidationResultEvent;
-
-            // Event handler to validate and format input.            
-            private function Format():void
-            {
-                vResult = scVal.validate();
-
-                if (vResult.type==ValidationResultEvent.VALID) {
-                    var switcher:SwitchSymbolFormatter=new SwitchSymbolFormatter('#');
-
-                    formattedSCNumber.text = 
-                        switcher.formatValue("Formatted Social Securty number: ###-##-#### ", scNum.text);
-                }
-
-                else {
-                    formattedSCNumber.text= "";
-                }
-            }
-        ]]>
-    </fx:Script>
-
-	<fx:Declarations>
-    	<mx:SocialSecurityValidator id="scVal" source="{scNum}" property="text"/>
-	</fx:Declarations>
-
-    <mx:Panel title="SwitchSymbolFormatter Example" width="75%" height="75%" 
-            paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
-
-        <mx:Label text="Enter a 9 digit Social Security number with no separator characters:"/>
-        <mx:TextInput id="scNum" text="" maxChars="9" width="50%"/>
-
-        <mx:Button label="Validate and Format" click="Format();"/>
-        <mx:TextInput id="formattedSCNumber" editable="false" width="75%"/>
-
-    </mx:Panel>
-</mx:Application>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/48f47e61/TourDeFlex/TourDeFlex3/src/formatters/ZipCodeFormatterExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/formatters/ZipCodeFormatterExample.mxml b/TourDeFlex/TourDeFlex3/src/formatters/ZipCodeFormatterExample.mxml
deleted file mode 100755
index 7151f69..0000000
--- a/TourDeFlex/TourDeFlex3/src/formatters/ZipCodeFormatterExample.mxml
+++ /dev/null
@@ -1,68 +0,0 @@
-<?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 ZipCodeFormatter. -->
-<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
-
-    <fx:Script>
-        <![CDATA[
-
-            import mx.events.ValidationResultEvent;			
-            private var vResult:ValidationResultEvent;
-
-            // Event handler to validate and format input.
-            private function Format():void 
-            {
-                vResult = zcVal.validate();
-                
-                if (vResult.type==ValidationResultEvent.VALID) {
-                    formattedZipcode.text= zipFormatter.format(zip.text);
-                }
-                
-                else {
-                    formattedZipcode.text= "";
-                }
-            }
-        ]]>      
-    </fx:Script>
-
-	<fx:Declarations>
-    	<mx:ZipCodeFormatter id="zipFormatter" formatString="#####-####"/>
-
-    	<mx:ZipCodeValidator id="zcVal" source="{zip}" property="text" allowedFormatChars=""/>
-	</fx:Declarations>
-	
-    <mx:Panel title="ZipCodeFormatter Example" width="75%" height="75%" 
-            paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
-
-        <mx:Form width="100%">
-            <mx:FormItem label="Enter a 5 or 9 digit U.S. ZIP code:" width="100%">
-                <mx:TextInput id="zip" text=""/>
-            </mx:FormItem>
-
-            <mx:FormItem label="Formatted ZIP code: " width="100%">
-                <mx:TextInput id="formattedZipcode" text="" editable="false"/>
-            </mx:FormItem>
-
-            <mx:FormItem>
-                <mx:Button label="Validate and Format" click="Format();"/>
-            </mx:FormItem>
-        </mx:Form>
-
-    </mx:Panel>
-</mx:Application>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/48f47e61/TourDeFlex/TourDeFlex3/src/mx/charts/BubbleChartExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/mx/charts/BubbleChartExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/charts/BubbleChartExample.mxml
new file mode 100755
index 0000000..09dd98c
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/mx/charts/BubbleChartExample.mxml
@@ -0,0 +1,60 @@
+<?xml version="1.0"?>
+<!--
+  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 BubbleChart control. -->
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+    <fx:Script>
+        <![CDATA[        
+        import mx.collections.ArrayCollection;
+
+        [Bindable]
+        private var expensesAC:ArrayCollection = new ArrayCollection( [
+            { Month: "Jan", Profit: 2000, Expenses: 1500, Amount: 450 },
+            { Month: "Feb", Profit: 1000, Expenses: 200, Amount: 600 },
+            { Month: "Mar", Profit: 1500, Expenses: 500, Amount: 300 },
+            { Month: "Apr", Profit: 1800, Expenses: 1200, Amount: 900 },
+            { Month: "May", Profit: 2400, Expenses: 575, Amount: 500 } ]);
+        ]]>
+    </fx:Script>
+
+	<fx:Declarations>
+		<!-- Define custom color and line style for the bubbles. -->
+    	<mx:SolidColor id="sc1" color="blue" alpha=".3"/>
+    	<mx:SolidColorStroke id="stroke1" color="blue" weight="1"/>
+	</fx:Declarations>
+
+    <mx:Panel title="BubbleChart Control Example" height="100%" width="100%">
+        <mx:BubbleChart id="bubblechart" 
+            height="100%" width="100%"
+            paddingRight="5" paddingLeft="5" 
+            showDataTips="true" maxRadius="20"
+            dataProvider="{expensesAC}">
+            <mx:series>
+                <mx:BubbleSeries 
+                    displayName="Profit/Expenses/Amount" 
+                    xField="Profit" 
+                    yField="Expenses" 
+                    radiusField="Amount"
+                    fill="{sc1}"
+                    stroke="{stroke1}"
+                />
+            </mx:series>            
+        </mx:BubbleChart>            
+        <mx:Legend dataProvider="{bubblechart}"/>            
+    </mx:Panel>
+</mx:Application>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/48f47e61/TourDeFlex/TourDeFlex3/src/mx/charts/CandlestickChartExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/mx/charts/CandlestickChartExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/charts/CandlestickChartExample.mxml
new file mode 100755
index 0000000..68e7894
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/mx/charts/CandlestickChartExample.mxml
@@ -0,0 +1,87 @@
+<?xml version="1.0"?>
+<!--
+  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 CandlestickChart control. -->
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+    <fx:Script>
+        <![CDATA[          
+        import mx.collections.ArrayCollection;
+
+        [Bindable]
+        private var expensesAC:ArrayCollection = new ArrayCollection( [
+            { Date: "25-Jul", Open: 40.75,  High: 40.75, Low: 40.24, Close:40.31},
+            { Date: "26-Jul", Open: 39.98,  High: 40.78, Low: 39.97, Close:40.34},
+            { Date: "27-Jul", Open: 40.38,  High: 40.66, Low: 40, Close:40.63},
+            { Date: "28-Jul", Open: 40.49,  High: 40.99, Low: 40.3, Close:40.98},
+            { Date: "29-Jul", Open: 40.13,  High: 40.4, Low: 39.65, Close:39.95},
+            { Date: "1-Aug", Open: 39.00,  High: 39.50, Low: 38.7, Close:38.6}, 
+            { Date: "2-Aug", Open: 38.68,  High: 39.34, Low: 37.75, Close:38.84}, 
+            { Date: "3-Aug", Open: 38.76,  High: 38.76, Low: 38.03, Close:38.12}, 
+            { Date: "4-Aug", Open: 37.98,  High: 37.98, Low: 36.56, Close:36.69},                       
+            { Date: "5-Aug", Open: 36.61,  High: 37, Low: 36.48, Close:36.86} ]);
+        ]]>
+    </fx:Script>
+
+	<fx:Declarations>
+	    <!-- Define custom colors for the candles. -->
+	    <mx:SolidColor id="up" color="green" alpha=".8"/>
+	    <mx:SolidColor id="down" color="red" alpha=".8"/>
+	
+	    <!-- Define custom Stroke for the candle wick. -->
+	    <mx:SolidColorStroke id="wick" color="black" weight="2"/>
+	
+	    <!-- Define custom Stroke for the candle box. -->
+	    <mx:SolidColorStroke id="box" color="black" weight="1"/>
+	</fx:Declarations>
+
+    <mx:Panel title="CandlestickChart Control Example" height="100%" width="100%">
+        <mx:CandlestickChart id="candlestickchart" 
+            height="100%" 
+            width="100%"
+            paddingRight="5" 
+            paddingLeft="5" 
+            showDataTips="true"
+            dataProvider="{expensesAC}"
+        >            
+            <mx:verticalAxis>
+                <mx:LinearAxis id="vaxis" baseAtZero="false" title="Price"/>
+            </mx:verticalAxis>
+
+            <mx:horizontalAxis>
+                <mx:CategoryAxis id="haxis" categoryField="Date" title="Date"/>
+            </mx:horizontalAxis>
+
+            <mx:horizontalAxisRenderers>
+                <mx:AxisRenderer axis="{haxis}" canDropLabels="true"/>
+            </mx:horizontalAxisRenderers>
+
+            <mx:series>
+                <mx:CandlestickSeries 
+                    openField="Open" 
+                    highField="High" 
+                    lowField="Low" 
+                    closeField="Close"
+                    fill="{up}"
+                    declineFill="{down}"
+                    stroke="{wick}"
+                    boxStroke="{box}"
+                />
+            </mx:series>
+        </mx:CandlestickChart>
+    </mx:Panel>
+</mx:Application>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/48f47e61/TourDeFlex/TourDeFlex3/src/mx/charts/Column_BarChartExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/mx/charts/Column_BarChartExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/charts/Column_BarChartExample.mxml
new file mode 100755
index 0000000..37d6a83
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/mx/charts/Column_BarChartExample.mxml
@@ -0,0 +1,122 @@
+<?xml version="1.0"?>
+<!--
+  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 ColumnChart and BarChart controls. -->
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+    <fx:Script>
+        <![CDATA[          
+        import mx.collections.ArrayCollection;
+
+        [Bindable]
+        private var medalsAC:ArrayCollection = new ArrayCollection( [
+            { Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
+            { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
+            { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 } ]);
+        ]]>
+    </fx:Script>
+
+	<fx:Declarations>
+	    <!-- Define custom colors for use as fills. -->
+	    <mx:SolidColor id="sc1" color="yellow" alpha=".8"/>
+	    <mx:SolidColor id="sc2" color="0xCCCCCC" alpha=".6"/>
+	    <mx:SolidColor id="sc3" color="0xFFCC66" alpha=".6"/>
+	
+	    <!-- Define custom Strokes for the columns. -->
+	    <mx:SolidColorStroke id="s1" color="yellow" weight="2"/>
+	    <mx:SolidColorStroke id="s2" color="0xCCCCCC" weight="2"/>
+	    <mx:SolidColorStroke id="s3" color="0xFFCC66" weight="2"/>
+	</fx:Declarations>
+
+    <mx:Panel title="ColumnChart and BarChart Controls Example" 
+        height="100%" width="100%" layout="horizontal">
+        <mx:ColumnChart id="column" 
+            height="100%" 
+            width="45%" 
+            paddingLeft="5" 
+            paddingRight="5" 
+            showDataTips="true" 
+            dataProvider="{medalsAC}"
+        >                
+            <mx:horizontalAxis>
+                <mx:CategoryAxis categoryField="Country"/>
+            </mx:horizontalAxis>
+                
+            <mx:series>
+                <mx:ColumnSeries 
+                    xField="Country" 
+                    yField="Gold" 
+                    displayName="Gold"
+                    fill="{sc1}"
+                    stroke="{s1}"
+                />
+                <mx:ColumnSeries 
+                    xField="Country" 
+                    yField="Silver" 
+                    displayName="Silver"
+                    fill="{sc2}"
+                    stroke="{s2}"
+                />
+                <mx:ColumnSeries 
+                    xField="Country" 
+                    yField="Bronze" 
+                    displayName="Bronze"
+                    fill="{sc3}"
+                    stroke="{s3}"
+                />
+            </mx:series>
+        </mx:ColumnChart>
+
+        <mx:Legend dataProvider="{column}"/>
+
+         <mx:BarChart id="bar" height="100%" width="45%" 
+            paddingLeft="5" paddingRight="5" 
+            showDataTips="true" dataProvider="{medalsAC}">
+                
+            <mx:verticalAxis>
+                <mx:CategoryAxis categoryField="Country"/>
+            </mx:verticalAxis>
+                
+            <mx:series>
+                <mx:BarSeries 
+                    yField="Country" 
+                    xField="Gold" 
+                    displayName="Gold"
+                    fill="{sc1}"
+                    stroke="{s1}"
+                />
+                <mx:BarSeries 
+                    yField="Country" 
+                    xField="Silver" 
+                    displayName="Silver"
+                    fill="{sc2}"
+                    stroke="{s2}"
+                />
+                <mx:BarSeries 
+                    yField="Country" 
+                    xField="Bronze" 
+                    displayName="Bronze"
+                    fill="{sc3}"
+                    stroke="{s3}"
+                />
+            </mx:series>
+        </mx:BarChart>
+
+        <mx:Legend dataProvider="{bar}"/>
+
+    </mx:Panel>
+</mx:Application>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/48f47e61/TourDeFlex/TourDeFlex3/src/mx/charts/DateTimeAxisExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/mx/charts/DateTimeAxisExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/charts/DateTimeAxisExample.mxml
new file mode 100755
index 0000000..11c28f9
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/mx/charts/DateTimeAxisExample.mxml
@@ -0,0 +1,68 @@
+<?xml version="1.0"?>
+<!--
+  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 DateTimeAxis class. -->
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+
+    <fx:Script>
+        <![CDATA[
+
+            import mx.collections.ArrayCollection;
+
+            [Bindable] 
+            public var stockDataAC:ArrayCollection = new ArrayCollection( [
+                {date: "2005, 7, 27", close: 41.71},
+                {date: "2005, 7, 28", close: 42.21},
+                {date: "2005, 7, 29", close: 42.11},
+                {date: "2005, 8, 1", close: 42.71},
+                {date: "2005, 8, 2", close: 42.99},
+                {date: "2005, 8, 3", close: 44} ]);
+    
+            public function myParseFunction(s:String):Date { 
+                // Get an array of Strings from the comma-separated String passed in.
+                var a:Array = s.split(",");
+                // Create the new Date object. Subtract one from 
+                // the month property because months are zero-based in 
+                // the Date constructor.
+                var newDate:Date = new Date(a[0],a[1]-1,a[2]);
+                return newDate;
+            }
+        ]]>
+    </fx:Script>
+
+    <mx:Panel title="DateTimeAxis Example" height="100%" width="100%">
+    
+        <mx:LineChart id="mychart" height="100%" width="100%"
+            paddingRight="5" paddingLeft="5" 
+            showDataTips="true" dataProvider="{stockDataAC}">
+            
+            <mx:horizontalAxis>
+                <mx:DateTimeAxis dataUnits="days" parseFunction="myParseFunction"/>
+            </mx:horizontalAxis>
+
+            <mx:verticalAxis>
+                <mx:LinearAxis baseAtZero="false" />
+            </mx:verticalAxis>
+
+            <mx:series>
+                <mx:LineSeries yField="close" xField="date" displayName="AAPL"/>
+            </mx:series>
+        </mx:LineChart>
+        
+    </mx:Panel>
+</mx:Application>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/48f47e61/TourDeFlex/TourDeFlex3/src/mx/charts/GridLinesExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/mx/charts/GridLinesExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/charts/GridLinesExample.mxml
new file mode 100755
index 0000000..9a8765e
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/mx/charts/GridLinesExample.mxml
@@ -0,0 +1,68 @@
+<?xml version="1.0"?>
+<!--
+  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 GridLines class. -->
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+
+    <fx:Script>
+        <![CDATA[
+
+        import mx.collections.ArrayCollection;
+
+        [Bindable]
+        private var expensesAC:ArrayCollection = new ArrayCollection( [
+            { Month: "Jan", Profit: 2000, Expenses: 1500, Amount: 450 },
+            { Month: "Feb", Profit: 1000, Expenses: 200, Amount: 600 },
+            { Month: "Mar", Profit: 1500, Expenses: 500, Amount: 300 },
+            { Month: "Apr", Profit: 1800, Expenses: 1200, Amount: 900 },
+            { Month: "May", Profit: 2400, Expenses: 575, Amount: 500 } ]);
+        ]]>
+    </fx:Script>
+
+    <mx:Panel title="GridLines Example" height="100%" width="100%">
+
+        <mx:LineChart id="linechart" height="100%" width="100%"
+            paddingLeft="5" paddingRight="5" 
+            showDataTips="true" dataProvider="{expensesAC}">
+                
+            <mx:horizontalAxis>
+                <mx:CategoryAxis categoryField="Month"/>
+            </mx:horizontalAxis>
+                
+            <mx:backgroundElements>
+               <mx:GridLines gridDirection="horizontal">
+                    <mx:horizontalStroke>
+                        <mx:SolidColorStroke weight="1"/>
+                    </mx:horizontalStroke>
+                    <mx:horizontalFill>
+                        <mx:SolidColor color="0xCCCCCC" alpha=".66"/>
+                    </mx:horizontalFill>
+                </mx:GridLines>
+            </mx:backgroundElements>
+
+            <mx:series>
+                <mx:LineSeries yField="Profit" form="curve" displayName="Profit"/>
+                <mx:LineSeries yField="Expenses" form="curve" displayName="Expenses"/>
+                <mx:LineSeries yField="Amount" form="curve" displayName="Amount"/>
+            </mx:series>
+        </mx:LineChart>
+
+        <mx:Legend dataProvider="{linechart}"/>
+
+    </mx:Panel>
+</mx:Application>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/48f47e61/TourDeFlex/TourDeFlex3/src/mx/charts/HLOCChartExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/mx/charts/HLOCChartExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/charts/HLOCChartExample.mxml
new file mode 100755
index 0000000..0e6c1de
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/mx/charts/HLOCChartExample.mxml
@@ -0,0 +1,77 @@
+<?xml version="1.0"?>
+<!--
+  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 HLOCChart control. -->
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+    <fx:Script>
+        <![CDATA[          
+        import mx.collections.ArrayCollection;
+
+        [Bindable]
+        private var stockDataAC:ArrayCollection = new ArrayCollection( [
+            { Date: "25-Jul", Open: 40.55,  High: 40.75, Low: 40.24, Close:40.31},
+            { Date: "26-Jul", Open: 40.15,  High: 40.78, Low: 39.97, Close:40.34},
+            { Date: "27-Jul", Open: 40.38,  High: 40.66, Low: 40, Close:40.63},
+            { Date: "28-Jul", Open: 40.49,  High: 40.99, Low: 40.3, Close:40.98},
+            { Date: "29-Jul", Open: 40.13,  High: 40.4, Low: 39.65, Close:39.95},
+            { Date: "1-Aug", Open: 39.00,  High: 39.50, Low: 38.7, Close:38.6}, 
+            { Date: "2-Aug", Open: 38.68,  High: 39.34, Low: 37.75, Close:38.84}, 
+            { Date: "3-Aug", Open: 38.76,  High: 38.76, Low: 38.03, Close:38.12}, 
+            { Date: "4-Aug", Open: 37.98,  High: 37.98, Low: 36.56, Close:36.69},                       
+            { Date: "5-Aug", Open: 36.61,  High: 37, Low: 36.48, Close:36.86} ]); 
+        ]]>
+    </fx:Script>
+
+	<fx:Declarations>
+    	<!-- Define custom Stroke for the wick and ticks. -->
+   		<mx:SolidColorStroke id="s1" color="0x000000" weight="5" joints="bevel" caps="square"/>
+	</fx:Declarations>
+
+    <mx:Panel title="HLOCChart Control Example" height="100%" width="100%">
+        <mx:HLOCChart id="hlocchart" height="100%" width="100%"
+            paddingRight="5" paddingLeft="5" 
+            showDataTips="true" dataProvider="{stockDataAC}">
+            
+            <mx:verticalAxis>
+                <mx:LinearAxis id="vaxis" baseAtZero="false" title="Price"/>
+            </mx:verticalAxis>
+
+            <mx:horizontalAxis>
+                <mx:CategoryAxis id="haxis" categoryField="Date" title="Date"/>
+            </mx:horizontalAxis>
+
+            <mx:horizontalAxisRenderers>
+                <mx:AxisRenderer axis="{haxis}" canDropLabels="true"/>
+            </mx:horizontalAxisRenderers>
+
+            <mx:series>
+                <mx:HLOCSeries 
+                    openField="Open" 
+                    highField="High" 
+                    lowField="Low" 
+                    closeField="Close"
+                    stroke="{s1}"
+                    openTickStroke="{s1}"
+                    closeTickStroke="{s1}"
+                    openTickLength="7"
+                    closeTickLength="7"
+                />
+            </mx:series>
+        </mx:HLOCChart>
+    </mx:Panel>
+</mx:Application>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/48f47e61/TourDeFlex/TourDeFlex3/src/mx/charts/Line_AreaChartExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/mx/charts/Line_AreaChartExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/charts/Line_AreaChartExample.mxml
new file mode 100755
index 0000000..afebf63
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/mx/charts/Line_AreaChartExample.mxml
@@ -0,0 +1,87 @@
+<?xml version="1.0"?>
+<!--
+  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 LineChart and AreaChart controls. -->
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+
+    <fx:Script>
+        <![CDATA[
+
+        import mx.collections.ArrayCollection;
+
+        [Bindable]
+        private var expensesAC:ArrayCollection = new ArrayCollection( [
+            { Month: "Jan", Profit: 2000, Expenses: 1500, Amount: 450 },
+            { Month: "Feb", Profit: 1000, Expenses: 200, Amount: 600 },
+            { Month: "Mar", Profit: 1500, Expenses: 500, Amount: 300 },
+            { Month: "Apr", Profit: 1800, Expenses: 1200, Amount: 900 },
+            { Month: "May", Profit: 2400, Expenses: 575, Amount: 500 } ]);
+        ]]>
+    </fx:Script>
+
+	<fx:Declarations>
+	    <!-- Define custom colors for use as fills in the AreaChart control. -->
+	    <mx:SolidColor id="sc1" color="blue" alpha=".3"/>
+	    <mx:SolidColor id="sc2" color="red" alpha=".3"/>
+	    <mx:SolidColor id="sc3" color="green" alpha=".3"/>
+	
+	    <!-- Define custom Strokes. -->
+	    <mx:SolidColorStroke id = "s1" color="blue" weight="2"/>
+	    <mx:SolidColorStroke id = "s2" color="red" weight="2"/>
+	    <mx:SolidColorStroke id = "s3" color="green" weight="2"/>
+	</fx:Declarations>
+
+    <mx:Panel title="LineChart and AreaChart Controls Example" 
+        height="100%" width="100%" layout="horizontal">
+
+        <mx:LineChart id="linechart" height="100%" width="45%"
+            paddingLeft="5" paddingRight="5" 
+            showDataTips="true" dataProvider="{expensesAC}">
+                
+            <mx:horizontalAxis>
+                <mx:CategoryAxis categoryField="Month"/>
+            </mx:horizontalAxis>
+
+            <mx:series>
+                <mx:LineSeries yField="Profit" form="curve" displayName="Profit" lineStroke="{s1}"/>
+                <mx:LineSeries yField="Expenses" form="curve" displayName="Expenses" lineStroke="{s2}"/>
+                <mx:LineSeries yField="Amount" form="curve" displayName="Amount" lineStroke="{s3}"/>
+            </mx:series>
+        </mx:LineChart>
+
+        <mx:Legend dataProvider="{linechart}"/>
+
+        <mx:AreaChart id="Areachart" height="100%" width="45%"
+             paddingLeft="5" paddingRight="5" 
+             showDataTips="true" dataProvider="{expensesAC}">
+                 
+            <mx:horizontalAxis>
+                <mx:CategoryAxis categoryField="Month"/>
+            </mx:horizontalAxis>
+
+            <mx:series>
+                <mx:AreaSeries yField="Profit" form="curve" displayName="Profit" areaStroke="{s1}" areaFill="{sc1}"/>
+                <mx:AreaSeries yField="Expenses" form="curve" displayName="Expenses" areaStroke="{s2}" areaFill="{sc2}"/>
+                <mx:AreaSeries yField="Amount" form="curve" displayName="Amount" areaStroke="{s3}" areaFill="{sc3}"/>
+            </mx:series>
+        </mx:AreaChart>
+            
+        <mx:Legend dataProvider="{Areachart}"/>
+
+    </mx:Panel>
+</mx:Application>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/48f47e61/TourDeFlex/TourDeFlex3/src/mx/charts/LogAxisExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/mx/charts/LogAxisExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/charts/LogAxisExample.mxml
new file mode 100755
index 0000000..3982d8f
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/mx/charts/LogAxisExample.mxml
@@ -0,0 +1,61 @@
+<?xml version="1.0"?>
+<!--
+  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 LogAxis class. -->
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+
+    <fx:Script>
+        <![CDATA[
+
+        import mx.collections.ArrayCollection;
+
+        [Bindable]
+        private var expensesAC:ArrayCollection = new ArrayCollection( [
+            { Month: "Jan", Profit: 20000, Expenses: 1500, Amount: 450 },
+            { Month: "Feb", Profit: 1000, Expenses: 15000, Amount: 600 },
+            { Month: "Mar", Profit: 15000, Expenses: 5000, Amount: 300 },
+            { Month: "Apr", Profit: 1800, Expenses: 1200, Amount: 900 },
+            { Month: "May", Profit: 2400, Expenses: 575, Amount: 500 } ]);
+        ]]>
+    </fx:Script>
+
+    <mx:Panel title="LogAxis Example" height="100%" width="100%">
+
+        <mx:LineChart id="linechart" height="100%" width="100%"
+            paddingLeft="5" paddingRight="5" 
+            showDataTips="true" dataProvider="{expensesAC}">
+                
+            <mx:horizontalAxis>
+                <mx:CategoryAxis categoryField="Month"/>
+            </mx:horizontalAxis>
+                
+            <mx:verticalAxis>
+                <mx:LogAxis interval="10"/>
+            </mx:verticalAxis>
+                
+            <mx:series>
+                <mx:LineSeries yField="Profit" form="curve" displayName="Profit"/>
+                <mx:LineSeries yField="Expenses" form="curve" displayName="Expenses"/>
+                <mx:LineSeries yField="Amount" form="curve" displayName="Amount"/>
+            </mx:series>
+        </mx:LineChart>
+
+        <mx:Legend dataProvider="{linechart}"/>
+
+    </mx:Panel>
+</mx:Application>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/48f47e61/TourDeFlex/TourDeFlex3/src/mx/charts/PieChartExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/mx/charts/PieChartExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/charts/PieChartExample.mxml
new file mode 100755
index 0000000..245a89d
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/mx/charts/PieChartExample.mxml
@@ -0,0 +1,85 @@
+<?xml version="1.0"?>
+<!--
+  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 PieChart control. -->
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+    <fx:Script>
+        <![CDATA[          
+        import mx.collections.ArrayCollection;
+
+        [Bindable]
+        private var medalsAC:ArrayCollection = new ArrayCollection( [
+            { Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
+            { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
+            { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 } ]);
+    
+        private function displayGold(data:Object, field:String, index:Number, percentValue:Number):String {
+            var temp:String= (" " + percentValue).substr(0,6);
+            return data.Country + ": " + '\n' + "Total Gold: " + data.Gold + '\n' + temp + "%";
+        }
+        ]]>
+    </fx:Script>
+
+	<fx:Declarations>
+	    <!-- Define custom colors for use as pie wedge fills. -->
+	    <mx:SolidColor id="sc1" color="blue" alpha=".6"/>
+	    <mx:SolidColor id="sc2" color="red" alpha=".6"/>
+	    <mx:SolidColor id="sc3" color="0x663300" alpha=".6"/>
+	
+	    <!-- This Stroke is used for the callout lines. -->
+	    <mx:SolidColorStroke id="callouts" weight="2" color="0x999999" alpha=".8" caps="square"/>
+	    
+	    <!-- This Stroke is used to separate the wedges in the pie. -->
+	    <mx:SolidColorStroke id="radial" weight="1" color="0xFFFFCC" alpha=".3"/>
+	
+	    <!-- This Stroke is used for the outer border of the pie. -->
+	    <mx:SolidColorStroke id="pieborder" color="0x000000" weight="2" alpha=".5"/>
+	</fx:Declarations>
+
+    <mx:Panel title="Olympics 2004 Medals Tally Panel" height="100%" width="100%">
+        <mx:PieChart id="chart" 
+            height="100%" 
+            width="100%"
+            paddingRight="5" 
+            paddingLeft="5" 
+            showDataTips="true" 
+            dataProvider="{medalsAC}"
+        >          
+            <!--
+            -->
+            <mx:series>
+                <mx:PieSeries 
+                    nameField="Country"
+                    labelPosition="callout" 
+                    field="Gold" 
+                    labelFunction="displayGold" 
+                    calloutStroke="{callouts}" 
+                    radialStroke="{radial}" 
+                    stroke="{pieborder}"
+                    fills="{[sc1, sc2, sc3]}"
+                >
+                    <!-- Clear the drop shadow filters from the chart. -->
+                    <mx:filters>
+                        <fx:Array/>
+                    </mx:filters>
+                </mx:PieSeries>
+            </mx:series>
+        </mx:PieChart>  
+        <mx:Legend dataProvider="{chart}"/>
+    </mx:Panel>
+</mx:Application>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/48f47e61/TourDeFlex/TourDeFlex3/src/mx/charts/PlotChartExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/mx/charts/PlotChartExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/charts/PlotChartExample.mxml
new file mode 100755
index 0000000..f1d7435
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/mx/charts/PlotChartExample.mxml
@@ -0,0 +1,80 @@
+<?xml version="1.0"?>
+<!--
+  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 PlotChart control. -->
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+    <fx:Script>
+        <![CDATA[
+        import mx.collections.ArrayCollection;
+
+        [Bindable]
+        private var expensesAC:ArrayCollection = new ArrayCollection( [
+            { Month: "Jan", Profit: 2000, Expenses: 1500, Amount: 450 },
+            { Month: "Feb", Profit: 1000, Expenses: 200, Amount: 600 },
+            { Month: "Mar", Profit: 1500, Expenses: 500, Amount: 300 } ]);
+        ]]>
+    </fx:Script>
+
+	<fx:Declarations>
+	    <!-- Define custom colors for use as plot point fills. -->
+	    <mx:SolidColor id="sc1" color="blue" alpha=".3"/>
+	    <mx:SolidColor id="sc2" color="red" alpha=".3"/>
+	    <mx:SolidColor id="sc3" color="green" alpha=".3"/>
+	
+	    <!-- Define custom Strokes. -->
+	    <mx:SolidColorStroke id="s1" color="blue" weight="1"/>
+	    <mx:SolidColorStroke id="s2" color="red" weight="1"/>
+	    <mx:SolidColorStroke id="s3" color="green" weight="1"/>
+	</fx:Declarations>
+
+    <mx:Panel title="PlotChart Control Example" height="100%" width="100%">
+        <mx:PlotChart id="plot" 
+            height="100%" 
+            width="100%"
+            paddingLeft="5" 
+            paddingRight="5" 
+            showDataTips="true" 
+            dataProvider="{expensesAC}"
+        >                
+            <mx:series>
+                <mx:PlotSeries
+                    xField="Expenses"
+                    yField="Profit"
+                    displayName="Plot 1"
+                    fill="{sc1}"
+                    stroke="{s1}"
+                />
+                <mx:PlotSeries
+                    xField="Amount"
+                    yField="Expenses"
+                    displayName="Plot 2"
+                    fill="{sc2}"
+                    stroke="{s2}"
+                />
+                <mx:PlotSeries
+                    xField="Profit"
+                    yField="Amount"
+                    displayName="Plot 3"
+                    fill="{sc3}"
+                    stroke="{s3}"
+                />
+            </mx:series>
+        </mx:PlotChart>
+        <mx:Legend dataProvider="{plot}"/>
+    </mx:Panel>
+</mx:Application>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/48f47e61/TourDeFlex/TourDeFlex3/src/mx/charts/SeriesInterpolateExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/mx/charts/SeriesInterpolateExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/charts/SeriesInterpolateExample.mxml
new file mode 100755
index 0000000..13ce221
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/mx/charts/SeriesInterpolateExample.mxml
@@ -0,0 +1,96 @@
+<?xml version="1.0"?>
+<!--
+  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 CandlestickChart control. -->
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+
+    <fx:Script>
+        <![CDATA[
+          
+        import mx.collections.ArrayCollection;
+
+        [Bindable]
+        private var companyAAC:ArrayCollection = new ArrayCollection( [
+            { Date: "25-Jul", Open: 40.75,  High: 40.75, Low: 40.24, Close:40.31},
+            { Date: "26-Jul", Open: 39.98,  High: 40.78, Low: 39.97, Close:40.34},
+            { Date: "27-Jul", Open: 40.38,  High: 40.66, Low: 40, Close:40.63},
+            { Date: "28-Jul", Open: 40.49,  High: 40.99, Low: 40.3, Close:40.98},
+            { Date: "29-Jul", Open: 40.13,  High: 40.4, Low: 39.65, Close:39.95},
+            { Date: "1-Aug", Open: 39.00,  High: 39.50, Low: 38.7, Close:38.6}, 
+            { Date: "2-Aug", Open: 38.68,  High: 39.34, Low: 37.75, Close:38.84}, 
+            { Date: "3-Aug", Open: 38.76,  High: 38.76, Low: 38.03, Close:38.12}, 
+            { Date: "4-Aug", Open: 37.98,  High: 37.98, Low: 36.56, Close:36.69},                       
+            { Date: "5-Aug", Open: 36.61,  High: 37, Low: 36.48, Close:36.86} ]);
+
+        [Bindable]
+        private var companyBAC:ArrayCollection = new ArrayCollection( [
+            { Date: "25-Jul", Open: 18.50,  High: 19, Low: 18.48, Close:18.86},
+            { Date: "26-Jul", Open: 19.56,  High: 19.98, Low: 18.6, Close:18.69},                       
+            { Date: "27-Jul", Open: 20.81,  High: 20.99, Low: 20.03, Close:20.12}, 
+            { Date: "28-Jul", Open: 20.70,  High: 21.00, Low: 19.5, Close:20.84}, 
+            { Date: "29-Jul", Open: 21.7,  High: 21.79, Low: 20.45, Close:20.6}, 
+            { Date: "1-Aug", Open: 22.45,  High: 22.65, Low: 21.65, Close:21.95},
+            { Date: "2-Aug", Open: 22.56,  High: 22.6, Low: 22.05, Close:22.98},
+            { Date: "3-Aug", Open: 22.42,  High: 22.70, Low: 22.1, Close:22.63},
+            { Date: "4-Aug", Open: 21.67,  High: 22.82, Low: 21.67, Close:22.34},
+            { Date: "5-Aug", Open: 22.44,  High: 22.85, Low: 22.12, Close:22.31} ]);
+        ]]>
+    </fx:Script>
+
+	<fx:Declarations>
+    	<mx:SeriesInterpolate id="interpolateIn" duration="1000"/>
+	</fx:Declarations>
+	
+    <mx:Panel title="CandlestickChart Control Example" height="100%" width="100%" 
+        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
+
+        <mx:CandlestickChart id="candlestickchart" height="100%" width="100%"
+            paddingRight="5" paddingLeft="5" 
+            showDataTips="true" dataProvider="{companyAAC}">
+            
+            <mx:verticalAxis>
+                <mx:LinearAxis id="vaxis" baseAtZero="false" title="Price"/>
+            </mx:verticalAxis>
+
+            <mx:horizontalAxis>
+                <mx:CategoryAxis id="haxis" categoryField="Date" title="Date"/>
+            </mx:horizontalAxis>
+
+            <mx:horizontalAxisRenderers>
+                <mx:AxisRenderer axis="{haxis}" canDropLabels="true"/>
+            </mx:horizontalAxisRenderers>
+
+            <mx:series>
+                <mx:CandlestickSeries  
+                    openField="Open" highField="High" 
+                    lowField="Low" closeField="Close"
+                    showDataEffect="{interpolateIn}"/>
+            </mx:series>
+        </mx:CandlestickChart>
+        
+        <mx:Label width="100%" color="blue"
+            text="Choose a company to view recent stock data."/>
+
+        <mx:HBox>
+            <mx:RadioButton groupName="stocks" label="View Company A"
+                selected="true" click="candlestickchart.dataProvider=companyAAC;"/>
+            <mx:RadioButton groupName="stocks" label="View Company B"
+                click="candlestickchart.dataProvider=companyBAC;"/>
+        </mx:HBox>
+    </mx:Panel>
+</mx:Application>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/48f47e61/TourDeFlex/TourDeFlex3/src/mx/charts/SeriesSlideExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/mx/charts/SeriesSlideExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/charts/SeriesSlideExample.mxml
new file mode 100755
index 0000000..09335b9
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/mx/charts/SeriesSlideExample.mxml
@@ -0,0 +1,98 @@
+<?xml version="1.0"?>
+<!--
+  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 CandlestickChart control. -->
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+
+    <fx:Script>
+        <![CDATA[
+          
+        import mx.collections.ArrayCollection;
+
+        [Bindable]
+        private var companyAAC:ArrayCollection = new ArrayCollection( [
+            { Date: "25-Jul", Open: 40.75,  High: 40.75, Low: 40.24, Close:40.31},
+            { Date: "26-Jul", Open: 39.98,  High: 40.78, Low: 39.97, Close:40.34},
+            { Date: "27-Jul", Open: 40.38,  High: 40.66, Low: 40, Close:40.63},
+            { Date: "28-Jul", Open: 40.49,  High: 40.99, Low: 40.3, Close:40.98},
+            { Date: "29-Jul", Open: 40.13,  High: 40.4, Low: 39.65, Close:39.95},
+            { Date: "1-Aug", Open: 39.00,  High: 39.50, Low: 38.7, Close:38.6}, 
+            { Date: "2-Aug", Open: 38.68,  High: 39.34, Low: 37.75, Close:38.84}, 
+            { Date: "3-Aug", Open: 38.76,  High: 38.76, Low: 38.03, Close:38.12}, 
+            { Date: "4-Aug", Open: 37.98,  High: 37.98, Low: 36.56, Close:36.69},                       
+            { Date: "5-Aug", Open: 36.61,  High: 37, Low: 36.48, Close:36.86} ]);
+
+        [Bindable]
+        private var companyBAC:ArrayCollection = new ArrayCollection( [
+            { Date: "25-Jul", Open: 18.50,  High: 19, Low: 18.48, Close:18.86},
+            { Date: "26-Jul", Open: 19.56,  High: 19.98, Low: 18.6, Close:18.69},                       
+            { Date: "27-Jul", Open: 20.81,  High: 20.99, Low: 20.03, Close:20.12}, 
+            { Date: "28-Jul", Open: 20.70,  High: 21.00, Low: 19.5, Close:20.84}, 
+            { Date: "29-Jul", Open: 21.7,  High: 21.79, Low: 20.45, Close:20.6}, 
+            { Date: "1-Aug", Open: 22.45,  High: 22.65, Low: 21.65, Close:21.95},
+            { Date: "2-Aug", Open: 22.56,  High: 22.6, Low: 22.05, Close:22.98},
+            { Date: "3-Aug", Open: 22.42,  High: 22.70, Low: 22.1, Close:22.63},
+            { Date: "4-Aug", Open: 21.67,  High: 22.82, Low: 21.67, Close:22.34},
+            { Date: "5-Aug", Open: 22.44,  High: 22.85, Low: 22.12, Close:22.31} ]);
+        ]]>
+    </fx:Script>
+    
+	<fx:Declarations>
+    	<mx:SeriesSlide id="slideIn" duration="1000" direction="up"/>
+    	<mx:SeriesSlide id="slideOut" duration="1000" direction="down"/>
+	</fx:Declarations>
+
+    <mx:Panel title="CandlestickChart Control Example" height="100%" width="100%" 
+        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
+
+        <mx:CandlestickChart id="candlestickchart" height="100%" width="100%"
+            paddingRight="5" paddingLeft="5" 
+            showDataTips="true" dataProvider="{companyAAC}">
+            
+            <mx:verticalAxis>
+                <mx:LinearAxis id="vaxis" baseAtZero="false" title="Price"/>
+            </mx:verticalAxis>
+
+            <mx:horizontalAxis>
+                <mx:CategoryAxis id="haxis" categoryField="Date" title="Date"/>
+            </mx:horizontalAxis>
+
+            <mx:horizontalAxisRenderers>
+                <mx:AxisRenderer axis="{haxis}" canDropLabels="true"/>
+            </mx:horizontalAxisRenderers>
+
+            <mx:series>
+                <mx:CandlestickSeries  
+                    openField="Open" highField="High" 
+                    lowField="Low" closeField="Close"
+                    showDataEffect="{slideIn}" 
+                    hideDataEffect="{slideOut}"/>
+            </mx:series>
+        </mx:CandlestickChart>
+        
+        <mx:Label width="100%" color="blue"
+            text="Choose a company to view recent stock data."/>
+
+        <mx:HBox>
+            <mx:RadioButton groupName="stocks" label="View Company A"
+                selected="true" click="candlestickchart.dataProvider=companyAAC;"/>
+            <mx:RadioButton groupName="stocks" label="View Company B"
+                click="candlestickchart.dataProvider=companyBAC;"/>
+        </mx:HBox>
+    </mx:Panel>
+</mx:Application>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/48f47e61/TourDeFlex/TourDeFlex3/src/mx/charts/SeriesZoomExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/mx/charts/SeriesZoomExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/charts/SeriesZoomExample.mxml
new file mode 100755
index 0000000..b68ca56
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/mx/charts/SeriesZoomExample.mxml
@@ -0,0 +1,98 @@
+<?xml version="1.0"?>
+<!--
+  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 CandlestickChart control. -->
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+
+    <fx:Script>
+        <![CDATA[
+          
+        import mx.collections.ArrayCollection;
+
+        [Bindable]
+        private var companyAAC:ArrayCollection = new ArrayCollection( [
+            { Date: "25-Jul", Open: 40.75,  High: 40.75, Low: 40.24, Close:40.31},
+            { Date: "26-Jul", Open: 39.98,  High: 40.78, Low: 39.97, Close:40.34},
+            { Date: "27-Jul", Open: 40.38,  High: 40.66, Low: 40, Close:40.63},
+            { Date: "28-Jul", Open: 40.49,  High: 40.99, Low: 40.3, Close:40.98},
+            { Date: "29-Jul", Open: 40.13,  High: 40.4, Low: 39.65, Close:39.95},
+            { Date: "1-Aug", Open: 39.00,  High: 39.50, Low: 38.7, Close:38.6}, 
+            { Date: "2-Aug", Open: 38.68,  High: 39.34, Low: 37.75, Close:38.84}, 
+            { Date: "3-Aug", Open: 38.76,  High: 38.76, Low: 38.03, Close:38.12}, 
+            { Date: "4-Aug", Open: 37.98,  High: 37.98, Low: 36.56, Close:36.69},                       
+            { Date: "5-Aug", Open: 36.61,  High: 37, Low: 36.48, Close:36.86} ]);
+
+        [Bindable]
+        private var companyBAC:ArrayCollection = new ArrayCollection( [
+            { Date: "25-Jul", Open: 18.50,  High: 19, Low: 18.48, Close:18.86},
+            { Date: "26-Jul", Open: 19.56,  High: 19.98, Low: 18.6, Close:18.69},                       
+            { Date: "27-Jul", Open: 20.81,  High: 20.99, Low: 20.03, Close:20.12}, 
+            { Date: "28-Jul", Open: 20.70,  High: 21.00, Low: 19.5, Close:20.84}, 
+            { Date: "29-Jul", Open: 21.7,  High: 21.79, Low: 20.45, Close:20.6}, 
+            { Date: "1-Aug", Open: 22.45,  High: 22.65, Low: 21.65, Close:21.95},
+            { Date: "2-Aug", Open: 22.56,  High: 22.6, Low: 22.05, Close:22.98},
+            { Date: "3-Aug", Open: 22.42,  High: 22.70, Low: 22.1, Close:22.63},
+            { Date: "4-Aug", Open: 21.67,  High: 22.82, Low: 21.67, Close:22.34},
+            { Date: "5-Aug", Open: 22.44,  High: 22.85, Low: 22.12, Close:22.31} ]);
+        ]]>
+    </fx:Script>
+    
+	<fx:Declarations>
+    	<mx:SeriesZoom id="zoomIn" duration="1000"/>
+    	<mx:SeriesZoom id="zoomOut" duration="1000"/>
+	</fx:Declarations>
+
+    <mx:Panel title="CandlestickChart Control Example" height="100%" width="100%" 
+        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
+
+        <mx:CandlestickChart id="candlestickchart" height="100%" width="100%"
+            paddingRight="5" paddingLeft="5" 
+            showDataTips="true" dataProvider="{companyAAC}">
+            
+            <mx:verticalAxis>
+                <mx:LinearAxis id="vaxis" baseAtZero="false" title="Price"/>
+            </mx:verticalAxis>
+
+            <mx:horizontalAxis>
+                <mx:CategoryAxis id="haxis" categoryField="Date" title="Date"/>
+            </mx:horizontalAxis>
+
+            <mx:horizontalAxisRenderers>
+                <mx:AxisRenderer axis="{haxis}" canDropLabels="true"/>
+            </mx:horizontalAxisRenderers>
+
+            <mx:series>
+                <mx:CandlestickSeries  
+                    openField="Open" highField="High" 
+                    lowField="Low" closeField="Close"
+                    showDataEffect="{zoomIn}" 
+                    hideDataEffect="{zoomOut}"/>
+            </mx:series>
+        </mx:CandlestickChart>
+        
+        <mx:Label width="100%" color="blue"
+            text="Choose a company to view recent stock data."/>
+
+        <mx:HBox>
+            <mx:RadioButton groupName="stocks" label="View Company A"
+                selected="true" click="candlestickchart.dataProvider=companyAAC;"/>
+            <mx:RadioButton groupName="stocks" label="View Company B"
+                click="candlestickchart.dataProvider=companyBAC;"/>
+        </mx:HBox>
+    </mx:Panel>
+</mx:Application>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/48f47e61/TourDeFlex/TourDeFlex3/src/mx/containers/AccordionExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/mx/containers/AccordionExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/containers/AccordionExample.mxml
new file mode 100755
index 0000000..185f7a4
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/mx/containers/AccordionExample.mxml
@@ -0,0 +1,53 @@
+<?xml version="1.0"?>
+<!--
+  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 Accordion layout container. -->
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+
+    <mx:Panel title="Accordion Container Example" height="90%" width="90%" 
+        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
+
+        <mx:Label width="100%" color="blue"
+            text="Select an Accordion navigator button to change the panel."/>
+
+        <mx:Accordion id="accordion" width="100%" height="100%">
+            <!-- Define each panel using a VBox container. -->
+            <mx:VBox label="Accordion Button for Panel 1">
+                <mx:Label text="Accordion container panel 1"/>
+            </mx:VBox>
+
+            <mx:VBox label="Accordion Button for Panel 2">
+                <mx:Label text="Accordion container panel 2"/>
+            </mx:VBox>
+
+            <mx:VBox label="Accordion Button for Panel 3">
+                <mx:Label text="Accordion container panel 3"/>
+            </mx:VBox>
+        </mx:Accordion>
+
+        <mx:Label width="100%" color="blue"
+            text="Programmatically select the panel using a Button control."/>
+
+        <mx:HBox>
+            <mx:Button label="Select Panel 1" click="accordion.selectedIndex=0;"/>
+            <mx:Button label="Select Panel 2" click="accordion.selectedIndex=1;"/>
+            <mx:Button label="Select Panel 3" click="accordion.selectedIndex=2;"/>
+        </mx:HBox>
+    
+    </mx:Panel>
+</mx:Application>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/48f47e61/TourDeFlex/TourDeFlex3/src/mx/containers/DividedBoxExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/mx/containers/DividedBoxExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/containers/DividedBoxExample.mxml
new file mode 100755
index 0000000..b05004b
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/mx/containers/DividedBoxExample.mxml
@@ -0,0 +1,39 @@
+<?xml version="1.0"?>
+<!--
+  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 DividedBox layout container. -->
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+
+    <mx:Panel title="DividedBox Container Example" height="95%" width="95%" 
+        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
+
+        <mx:Text width="100%" color="blue"
+            text="A horizontal DividedBox container. Drag the divider side to side to resize the children."/>
+
+        <mx:DividedBox direction="horizontal" width="100%" height="100%">
+
+            <mx:Panel title="Panel 1" width="25%" height="100%" backgroundColor="0xCCCCCC">
+            </mx:Panel>
+            
+            <mx:Panel title="Panel 2" width="25%" height="100%" backgroundColor="0xCCCCCC">
+            </mx:Panel>
+
+        </mx:DividedBox>
+
+    </mx:Panel>
+</mx:Application>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/48f47e61/TourDeFlex/TourDeFlex3/src/mx/containers/FormExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/mx/containers/FormExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/containers/FormExample.mxml
new file mode 100755
index 0000000..37b2363
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/mx/containers/FormExample.mxml
@@ -0,0 +1,85 @@
+<?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 Form layout container. -->
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+
+	<fx:Declarations>
+	    <fx:Model id="checkModel">
+	        <User>
+	            <FirstName>{fname.text}</FirstName>
+	            <DOB>{dob.text}</DOB>
+	            <Email>{email.text}</Email>
+	            <Age>{age.text}</Age>
+	            <SSN>{ssn.text}</SSN>
+	            <Zip>{zip.text}</Zip>
+	            <Phone>{phone.text}</Phone>
+	        </User>
+	    </fx:Model>
+		
+	    <mx:StringValidator source="{fname}" property="text" minLength="4" maxLength="12"/>
+	    <mx:PhoneNumberValidator source="{phone}" property="text"/>
+	    <mx:DateValidator source="{dob}" property="text"/>
+	    <mx:EmailValidator source="{email}" property="text"/>
+	    <mx:NumberValidator source="{age}" property="text" integerError="Enter Integer value"
+	        minValue="18" maxValue="100" domain="int"/>
+	    <mx:SocialSecurityValidator source="{ssn}" property="text"/>
+	    <mx:ZipCodeValidator source="{zip}" property="text"/>
+	</fx:Declarations>
+	
+    <mx:Panel title="Form Container Example" height="75%" width="75%" 
+        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
+
+        <mx:Text width="100%" color="blue"
+            text="Moving from one form field to another triggers the validator."/>
+
+        <mx:Form width="100%" height="100%">
+            <mx:FormHeading label="Enter values into the form."/>
+
+            <mx:FormItem label="First name">
+                <mx:TextInput id="fname" width="200"/>
+            </mx:FormItem>
+
+            <mx:FormItem label="Date of birth (mm/dd/yyyy)">
+                <mx:TextInput id="dob" width="200"/>
+            </mx:FormItem>
+
+            <mx:FormItem label="E-mail address">
+                <mx:TextInput id="email" width="200"/>
+            </mx:FormItem>
+
+            <mx:FormItem label="Age">
+                <mx:TextInput id="age" width="200"/>
+            </mx:FormItem>
+
+            <mx:FormItem label="SSN">
+                <mx:TextInput id="ssn" width="200"/>
+            </mx:FormItem>
+
+            <mx:FormItem label="Zip">
+                <mx:TextInput id="zip" width="200"/>
+            </mx:FormItem>
+
+            <mx:FormItem label="Phone">
+                <mx:TextInput id="phone" width="200"/>
+            </mx:FormItem>
+        </mx:Form>
+
+    </mx:Panel>
+
+</mx:Application>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/48f47e61/TourDeFlex/TourDeFlex3/src/mx/containers/GridLayoutExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/mx/containers/GridLayoutExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/containers/GridLayoutExample.mxml
new file mode 100755
index 0000000..b62f859
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/mx/containers/GridLayoutExample.mxml
@@ -0,0 +1,67 @@
+<?xml version="1.0"?>
+<!--
+  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 Grid layout container.-->
+<mx:Application borderStyle="none" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+    
+    <mx:Panel title="Grid Container Example" height="75%" width="75%" 
+        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
+
+        <mx:Label width="100%" color="blue" 
+            text="A 3 by 3 Grid container of Button controls."/>
+
+        <mx:Grid>
+            <mx:GridRow>
+                <mx:GridItem>
+                    <mx:Button label="Row 1 Col 1" width="100"/>
+                </mx:GridItem>
+                <mx:GridItem>
+                    <mx:Button label="Row 1 Col 2" width="100"/>
+                </mx:GridItem>
+                <mx:GridItem>
+                    <mx:Button label="Row 1 Col 3" width="100"/>
+                </mx:GridItem>
+            </mx:GridRow>
+
+            <mx:GridRow>
+                <mx:GridItem>
+                    <mx:Button label="Row 2 Col 1" width="100"/>
+                </mx:GridItem>
+                <mx:GridItem>
+                    <mx:Button label="Row 2 Col 2" width="100"/>
+                </mx:GridItem>
+                <mx:GridItem>
+                    <mx:Button label="Row 2 Col 3" width="100"/>
+                </mx:GridItem>
+            </mx:GridRow>
+
+            <mx:GridRow>
+                <mx:GridItem>
+                    <mx:Button label="Row 3 Col 1" width="100"/>
+                </mx:GridItem>
+                <mx:GridItem>
+                    <mx:Button label="Row 3 Col 2" width="100"/>
+                </mx:GridItem>
+                <mx:GridItem>
+                    <mx:Button label="Row 3 Col 3" width="100"/>
+                </mx:GridItem>
+            </mx:GridRow>
+        </mx:Grid>
+
+    </mx:Panel>		
+</mx:Application>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/48f47e61/TourDeFlex/TourDeFlex3/src/mx/containers/HBoxExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/mx/containers/HBoxExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/containers/HBoxExample.mxml
new file mode 100755
index 0000000..b8e1eed
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/mx/containers/HBoxExample.mxml
@@ -0,0 +1,39 @@
+<?xml version="1.0"?>
+<!--
+  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 HBox layout container. -->
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+
+    <mx:Panel title="HBox Container Example" height="75%" width="75%" 
+        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
+
+       <mx:Label width="100%" color="blue"
+           text="An HBox container with horizontally aligned children."/>
+           
+       <mx:HBox borderStyle="solid" paddingTop="10" paddingBottom="10" 
+               paddingLeft="10" paddingRight="10">
+
+            <mx:Button label="Button 1"/>
+            <mx:Button label="Button 2"/>
+            <mx:Button label="Button 3"/>
+            <mx:ComboBox/>
+
+        </mx:HBox>
+
+    </mx:Panel>
+</mx:Application>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/48f47e61/TourDeFlex/TourDeFlex3/src/mx/containers/HDividedBoxExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/mx/containers/HDividedBoxExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/containers/HDividedBoxExample.mxml
new file mode 100755
index 0000000..d5e61dd
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/mx/containers/HDividedBoxExample.mxml
@@ -0,0 +1,41 @@
+<?xml version="1.0"?>
+<!--
+  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 HDividedBox layout -->
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+
+    <mx:Panel title="HDividedBox Container Example" width="90%" height="90%" 
+        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
+
+        <mx:Text width="100%" color="blue"
+            text="Drag the divider side to side to resize the children."/>
+
+        <mx:HDividedBox width="100%" height="100%">
+
+            <mx:Canvas label="Canvas 1" width="100%" height="100%" backgroundColor="#FFFFCC">
+                <mx:Label text="Add components here" fontWeight="bold"/>
+            </mx:Canvas>
+
+            <mx:Canvas label="Canvas 2" width="100%" height="100%" backgroundColor="#99CCFF">
+                <mx:Label text="Add components here" fontWeight="bold"/>
+            </mx:Canvas>
+
+        </mx:HDividedBox>
+
+    </mx:Panel>
+</mx:Application>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/48f47e61/TourDeFlex/TourDeFlex3/src/mx/containers/SimpleApplicationControlBarExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/mx/containers/SimpleApplicationControlBarExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/containers/SimpleApplicationControlBarExample.mxml
new file mode 100755
index 0000000..62bac5d
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/mx/containers/SimpleApplicationControlBarExample.mxml
@@ -0,0 +1,57 @@
+<?xml version="1.0"?>
+<!--
+  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 ApplicationControlBar container. -->
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+    paddingLeft="10" paddingRight="10" paddingBottom="10" 
+    backgroundColor="0xCCCCCC">
+
+    <mx:ApplicationControlBar dock="true" paddingTop="0" paddingBottom="0">
+        <mx:Label text="Docked" color="blue"/>
+
+        <mx:MenuBar id="myMenuBar" labelField="@label">
+            <fx:XMLList>
+                <menuitem label="MenuItem A" >
+                    <menuitem label="SubMenuItem A-1" type="check"/>
+                    <menuitem label="SubMenuItem A-2" type="check"/>
+                </menuitem>
+                <menuitem label="MenuItem B"/>
+                <menuitem label="MenuItem C"/>
+                <menuitem label="MenuItem D" >
+                    <menuitem label="SubMenuItem D-1" type="radio" groupName="one"/>
+                    <menuitem label="SubMenuItem D-2" type="radio" groupName="one"/>
+                    <menuitem label="SubMenuItem D-3" type="radio" groupName="one"/>
+                </menuitem>
+            </fx:XMLList>
+        </mx:MenuBar>
+    </mx:ApplicationControlBar>
+	
+    <mx:Label text="A docked ApplicationControlBar appears at the top of the application window."/>
+    <mx:Spacer height="100%" />
+
+    <mx:ApplicationControlBar width="80%">
+        <mx:Label text="Normal" color="blue"/>
+        <mx:Label text="Search:" />
+        <mx:TextInput width="100%" maxWidth="200" />
+        <mx:Spacer width="100%" />
+        <mx:Button label="Go flex.apache.org" />
+    </mx:ApplicationControlBar>
+
+    <mx:Label text="A normal ApplicationControlBar can appear anywhere in the application."/>
+
+</mx:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/48f47e61/TourDeFlex/TourDeFlex3/src/mx/containers/SimpleBoxExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/mx/containers/SimpleBoxExample.mxml b/TourDeFlex/TourDeFlex3/src/mx/containers/SimpleBoxExample.mxml
new file mode 100755
index 0000000..884c16b
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/mx/containers/SimpleBoxExample.mxml
@@ -0,0 +1,46 @@
+<?xml version="1.0"?>
+<!--
+  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 Box layout container. -->
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx">
+
+    <mx:Panel title="Box Container Example" height="75%" width="75%" 
+        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
+
+        <mx:Label width="100%" color="blue"
+            text="A Box container with vertically aligned children."/>
+        <mx:Box direction="vertical" borderStyle="solid" 
+                paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
+            <mx:Button label="Button 1"/>
+            <mx:Button label="Button 2"/>
+            <mx:Button label="Button 3"/>
+            <mx:ComboBox/>
+        </mx:Box>
+
+        <mx:Label width="100%" color="blue"
+            text="A Box container with horizontally aligned children."/>
+        <mx:Box direction="horizontal" borderStyle="solid" 
+                paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
+            <mx:Button label="Button 1"/>
+            <mx:Button label="Button 2"/>
+            <mx:Button label="Button 3"/>
+            <mx:ComboBox/>
+        </mx:Box>
+
+    </mx:Panel>
+</mx:Application>
\ No newline at end of file