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 06:50:03 UTC

[1/2] git commit: [flex-utilities] [refs/heads/develop] - added more spark example

Repository: flex-utilities
Updated Branches:
  refs/heads/develop 84e898f48 -> 9c4cde037


added more spark example


Project: http://git-wip-us.apache.org/repos/asf/flex-utilities/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-utilities/commit/93442e14
Tree: http://git-wip-us.apache.org/repos/asf/flex-utilities/tree/93442e14
Diff: http://git-wip-us.apache.org/repos/asf/flex-utilities/diff/93442e14

Branch: refs/heads/develop
Commit: 93442e14480817112825d47b695e09558c124201
Parents: 84e898f
Author: Justin Mclean <jm...@apache.org>
Authored: Sat Aug 9 14:49:08 2014 +1000
Committer: Justin Mclean <jm...@apache.org>
Committed: Sat Aug 9 14:49:08 2014 +1000

----------------------------------------------------------------------
 TourDeFlex/TourDeFlex3/build.xml        | 21 ++++++++++++++++++
 TourDeFlex/TourDeFlex3/src/explorer.xml | 32 ++++++++++++++++++++++++++--
 2 files changed, 51 insertions(+), 2 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/93442e14/TourDeFlex/TourDeFlex3/build.xml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/build.xml b/TourDeFlex/TourDeFlex3/build.xml
index 8d2b919..ed63ccc 100644
--- a/TourDeFlex/TourDeFlex3/build.xml
+++ b/TourDeFlex/TourDeFlex3/build.xml
@@ -177,7 +177,11 @@
 		<compile-mxml example="/mx/validators/ZipCodeValidatorExample"/>
 		
 		<!-- Spark examples -->
+		<compile-mxml example="/spark/controls/AccordionExample"/>
+		<compile-mxml example="/spark/controls/AdvancedDatagridExample"/>
+		<compile-mxml example="/spark/controls/ColorPickerExample"/>
 		<compile-mxml example="/spark/controls/ComboBoxExample"/>
+		<compile-mxml example="/spark/controls/DataGridExample"/>
 		<compile-mxml example="/spark/controls/DataGroupExample"/>
 		<compile-mxml example="/spark/controls/MenuExample"/>
 		<compile-mxml example="/spark/controls/RichEditableTextExample"/>
@@ -205,6 +209,23 @@
 		
 		<compile-mxml example="/spark/effects/Move3DExample"/>
 		
+		<compile-mxml example="/spark/charts/AreaChartExample"/>
+		<compile-mxml example="/spark/charts/BarChartExample"/>
+		<compile-mxml example="/spark/charts/BubbleChartExample"/>
+		<compile-mxml example="/spark/charts/CandleStickChartExample"/>
+		<compile-mxml example="/spark/charts/ColumnChartExample"/>
+			
+		<compile-mxml example="/spark/components/SearchExample"/>
+		<compile-mxml example="/spark/components/VideoPlayerExample"/>
+		
+		<compile-mxml example="/spark/validators/CreditCardValidatorExample"/>
+		<compile-mxml example="/spark/validators/CurrancyFormatterExample"/>
+		
+		<compile-mxml example="/spark/formatters/CurrancyFormatterExample"/>
+		
+		<compile-mxml example="/spark/other/Cursor1Example"/>
+		<compile-mxml example="/spark/other/Cursor2Example"/>
+
 		<!-- Explorer shell -->
 		<compile-mxml example="/explorer"/>
 		<compile-mxml example="/loaderPanel"/>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/93442e14/TourDeFlex/TourDeFlex3/src/explorer.xml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/explorer.xml b/TourDeFlex/TourDeFlex3/src/explorer.xml
index 625cc44..19735bc 100755
--- a/TourDeFlex/TourDeFlex3/src/explorer.xml
+++ b/TourDeFlex/TourDeFlex3/src/explorer.xml
@@ -187,7 +187,7 @@
 						<node label="PieSeries" app="mx/charts/PieChartExample" />
 						<node label="PlotSeries" app="mx/charts/PlotChartExample" />
 					</node>
-=					<node label="Chart Effects">
+					<node label="Chart Effects">
 						<node label="SeriesInterpolate" app="mx/charts/SeriesInterpolateExample" />
 						<node label="SeriesSlide" app="mx/charts/SeriesSlideExample" />
 						<node label="SeriesZoom" app="mx/charts/SeriesZoomExample" />
@@ -209,6 +209,14 @@
 				<node label="Descendant Selector" app="spark/css/CSSDescendantSelectorExample" />
 				<node label="Type + Class Selector" app="spark/css/CSSTypeClassSelectorExample" />
 			</node>
+			<node label="Cursor">
+				<node label="Busy Cursor" app="spark/other/Cursor1Example" />
+				<node label="Custom Cursor" app="spark/other/Cursor2Example" />
+			</node>
+			<node label="Custom Components">
+				<node label="Search" app="spark/components/SearchExample" />
+				<node label="Video Player" app="spark/components/VideoPlayerExample" />
+			</node>
 			<node label="Item Renderers">
 				<node label="Scale Image" app="spark/itemRenderers/ItemRenderer1Example" />
 				<node label="3D Rotate" app="spark/itemRenderers/ItemRenderer2Example" />
@@ -230,10 +238,14 @@
 					<node label="RichText" app="spark/fxg/RichTextExample" />
 				</node>
 				<node label="General Controls">
+					<node label="Accordion" app="spark/controls/AccordionExample" />
+					<node label="AdvancedDataGrid" app="spark/controls/AdvancedDatagridExample" />
+					<node label="ColorPicker" app="spark/controls/ColorPickerExample" />
 					<node label="ComboBox" app="spark/controls/ComboBoxExample" />
 					<node label="DataGroup" app="spark/controls/DataGroupExample" />
+					<node label="DataGrid" app="spark/controls/DataGridExample" />
 					<node label="Menu" app="spark/controls/MenuExample" />
-					<node label="Rich Editable Text" app="spark/controls/RichEditableTextExample" />
+					<node label="RichEditableText" app="spark/controls/RichEditableTextExample" />
 				</node>
 				<node label="Layouts">
 					<node label="Animated" app="spark/layouts/CustomLayoutAnimatedExample" />
@@ -242,6 +254,22 @@
 					<node label="Text Flow" app="spark/layouts/CustomLayoutFlowExample" />
 				</node>
 			</node>
+			<node label="Charts">
+				<node label="AreaChart" app="spark/charts/AreaChartExample" />
+				<node label="BarChart" app="spark/charts/BarChartExample" />
+				<node label="BubbleChart" app="spark/charts/BubbleChartExample" />
+				<node label="CandleStickChart" app="spark/charts/CandleStickChartExample" />
+				<node label="ColumnChart" app="spark/charts/ColumnChartExample" />
+			</node>
+			<node label="Validators and Formatters">
+				<node label="Validators">
+					<node label="CreditCardValidator" app="spark/validators/CreditCardValidatorExample" />
+					<node label="CurrencyValidator" app="spark/validators/CurrencyValidatorExample" />
+				</node>
+				<node label="Formatters">
+					<node label="CurrencyFormatter" app="spark/formatters/CurrencyFormatterExample" />
+				</node>
+			</node>
 		</node>
 	</node>
 </compTree>
\ No newline at end of file


[2/2] git commit: [flex-utilities] [refs/heads/develop] - Added more spark examples

Posted by jm...@apache.org.
Added more spark examples


Project: http://git-wip-us.apache.org/repos/asf/flex-utilities/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-utilities/commit/9c4cde03
Tree: http://git-wip-us.apache.org/repos/asf/flex-utilities/tree/9c4cde03
Diff: http://git-wip-us.apache.org/repos/asf/flex-utilities/diff/9c4cde03

Branch: refs/heads/develop
Commit: 9c4cde03786a9a7075f7f2526001daadfa4b8bce
Parents: 93442e1
Author: Justin Mclean <jm...@apache.org>
Authored: Sat Aug 9 14:49:45 2014 +1000
Committer: Justin Mclean <jm...@apache.org>
Committed: Sat Aug 9 14:49:45 2014 +1000

----------------------------------------------------------------------
 .../src/spark/charts/AreaChartExample.mxml      |  71 ++++++++
 .../src/spark/charts/BarChartExample.mxml       |  69 ++++++++
 .../src/spark/charts/BubbleChartExample.mxml    |  74 ++++++++
 .../spark/charts/CandleStickChartExample.mxml   |  80 +++++++++
 .../src/spark/charts/ColumnChartExample.mxml    |  71 ++++++++
 .../spark/charts/TDFGradientBackgroundSkin.mxml |  49 ++++++
 .../src/spark/components/SearchBox.as           | 176 +++++++++++++++++++
 .../src/spark/components/SearchBoxEvent.as      |  35 ++++
 .../src/spark/components/SearchExample.mxml     |  91 ++++++++++
 .../components/TDFGradientBackgroundSkin.mxml   |  49 ++++++
 .../src/spark/components/VideoPlayer.mxml       |  89 ++++++++++
 .../spark/components/VideoPlayerExample.mxml    |  49 ++++++
 .../src/spark/components/VideoPlayerModule.mxml |  33 ++++
 .../components/VideoPlayerModuleLoader.mxml     |  34 ++++
 .../components/assets/control_pause_blue.png    | Bin 0 -> 721 bytes
 .../components/assets/control_play_blue.png     | Bin 0 -> 717 bytes
 .../components/assets/control_stop_blue.png     | Bin 0 -> 695 bytes
 .../src/spark/components/assets/icon_close.png  | Bin 0 -> 59707 bytes
 .../src/spark/controls/AccordionExample.mxml    |  67 +++++++
 .../spark/controls/AdvancedDatagridExample.mxml |  93 ++++++++++
 .../src/spark/controls/ColorPickerExample.mxml  |  49 ++++++
 .../src/spark/controls/DataGridExample.mxml     |  96 ++++++++++
 .../controls/TDFGradientBackgroundSkin.mxml     |  49 ++++++
 .../src/spark/controls/images/arrow_icon_sm.png | Bin 0 -> 527 bytes
 .../formatters/CurrencyFormatterExample.mxml    |  87 +++++++++
 .../formatters/TDFGradientBackgroundSkin.mxml   |  49 ++++++
 .../src/spark/other/Cursor1Example.mxml         |  58 ++++++
 .../src/spark/other/Cursor2Example.mxml         |  74 ++++++++
 .../spark/other/TDFGradientBackgroundSkin.mxml  |  49 ++++++
 .../validators/CreditCardValidatorExample.mxml  |  86 +++++++++
 .../validators/CurrencyValidatorExample.mxml    |  62 +++++++
 .../validators/TDFGradientBackgroundSkin.mxml   |  49 ++++++
 32 files changed, 1838 insertions(+)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/9c4cde03/TourDeFlex/TourDeFlex3/src/spark/charts/AreaChartExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/charts/AreaChartExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/charts/AreaChartExample.mxml
new file mode 100644
index 0000000..dda5d88
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/charts/AreaChartExample.mxml
@@ -0,0 +1,71 @@
+<?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.
+
+-->
+<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 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>
+	
+	<s:layout>
+		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
+	</s:layout>
+	
+	<s:Panel title="AreaChart Control" width="600" height="100%"
+			 color="0x000000" 
+			 borderAlpha="0.15">
+		
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<mx:AreaChart id="Areachart" color="0x323232" height="100%"
+					  showDataTips="true" dataProvider="{expensesAC}">
+			
+			<mx:horizontalAxis>
+				<mx:CategoryAxis categoryField="Month"/>
+			</mx:horizontalAxis>
+			
+			<mx:series>
+				<mx:AreaSeries yField="Profit" form="curve" displayName="Profit"/>
+				<mx:AreaSeries yField="Expenses" form="curve" displayName="Expenses"/>
+				<mx:AreaSeries yField="Amount" form="curve" displayName="Amount"/>
+			</mx:series>
+		</mx:AreaChart>
+		
+		<mx:Legend dataProvider="{Areachart}" color="0x323232"/>
+		
+	</s:Panel>
+	
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/9c4cde03/TourDeFlex/TourDeFlex3/src/spark/charts/BarChartExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/charts/BarChartExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/charts/BarChartExample.mxml
new file mode 100644
index 0000000..f33173c
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/charts/BarChartExample.mxml
@@ -0,0 +1,69 @@
+<?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.
+
+-->
+<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 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>
+	
+	<s:layout>
+		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
+	</s:layout>
+    
+	<s:Panel title="BarChart Control" width="600" height="100%"
+			 color="0x000000" 
+			 borderAlpha="0.15">
+		
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+         
+         <mx:BarChart id="bar" height="100%" color="0x323232" 
+         	showDataTips="true" dataProvider="{medalsAC}">
+                
+            <mx:verticalAxis>
+                <mx:CategoryAxis categoryField="Country"/>
+            </mx:verticalAxis>
+                
+            <mx:series>
+                <mx:BarSeries yField="Country" xField="Gold" displayName="Gold"/>
+                <mx:BarSeries yField="Country" xField="Silver" displayName="Silver"/>
+                <mx:BarSeries yField="Country" xField="Bronze" displayName="Bronze"/>
+            </mx:series>
+        </mx:BarChart>
+
+        <mx:Legend dataProvider="{bar}" color="0x323232"/>
+        
+	</s:Panel>
+	
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/9c4cde03/TourDeFlex/TourDeFlex3/src/spark/charts/BubbleChartExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/charts/BubbleChartExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/charts/BubbleChartExample.mxml
new file mode 100644
index 0000000..4bb4b3d
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/charts/BubbleChartExample.mxml
@@ -0,0 +1,74 @@
+<?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.
+
+-->
+<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 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:Style>  
+		@namespace mx "library://ns.adobe.com/flex/mx";
+		
+		mx|BubbleChart { color:#000099; }
+	</fx:Style>
+	
+	<s:layout>
+		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
+	</s:layout>
+	
+	<s:Panel title="BubbleChart Control" width="600" height="100%"
+			 color="0x000000" 
+			 borderAlpha="0.15">
+		
+		<s:layout>
+			<s:HorizontalLayout horizontalAlign="center" 
+							  paddingLeft="10" paddingRight="10" 
+							  paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<mx:BubbleChart id="bubblechart" height="100%" width="100%" paddingRight="5" paddingLeft="5" color="0x323232"
+						showDataTips="true" maxRadius="20" dataProvider="{expensesAC}">
+			
+			<mx:series>
+				<mx:BubbleSeries displayName="Profit/Expenses/Amount" 
+								 xField="Profit" yField="Expenses" radiusField="Amount"/>
+			</mx:series>            
+		</mx:BubbleChart>
+		
+		<mx:Legend dataProvider="{bubblechart}" color="0x323232"/>
+		
+	</s:Panel>
+	
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/9c4cde03/TourDeFlex/TourDeFlex3/src/spark/charts/CandleStickChartExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/charts/CandleStickChartExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/charts/CandleStickChartExample.mxml
new file mode 100644
index 0000000..8caa800
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/charts/CandleStickChartExample.mxml
@@ -0,0 +1,80 @@
+<?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.
+
+-->
+<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 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>
+	
+	<s:layout>
+		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
+	</s:layout>
+    
+	<s:Panel title="CandlestickChart Control" width="600" height="100%"
+			 color="0x000000" 
+			 borderAlpha="0.15">
+		
+		<s:layout>
+			<s:HorizontalLayout horizontalAlign="center" 
+								paddingLeft="10" paddingRight="10" 
+								paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+         
+         <mx:CandlestickChart id="candlestickchart" height="100%" width="100%" paddingRight="5" paddingLeft="5" 
+            color="0x323232" showDataTips="true" dataProvider="{expensesAC}">
+            
+            <mx:verticalAxis>
+                <mx:LinearAxis baseAtZero="false" />
+            </mx:verticalAxis>
+
+            <mx:horizontalAxis>
+                <mx:CategoryAxis categoryField="Date" title="Date"/>
+            </mx:horizontalAxis>
+
+            <mx:series>
+                <mx:CandlestickSeries openField="Open" highField="High" 
+                    lowField="Low" closeField="Close"/>
+            </mx:series>
+
+        </mx:CandlestickChart>
+        
+	</s:Panel>
+	
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/9c4cde03/TourDeFlex/TourDeFlex3/src/spark/charts/ColumnChartExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/charts/ColumnChartExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/charts/ColumnChartExample.mxml
new file mode 100644
index 0000000..ca36f42
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/charts/ColumnChartExample.mxml
@@ -0,0 +1,71 @@
+<?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.
+
+-->
+<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 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>
+	
+	<s:layout>
+		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
+	</s:layout>
+    
+	<s:Panel title="ColumnChart Control" width="600" height="100%"
+			 color="0x000000" 
+			 borderAlpha="0.15">
+		
+		<s:layout>
+			<s:HorizontalLayout horizontalAlign="center" 
+								paddingLeft="10" paddingRight="10" 
+								paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+         
+         <mx:ColumnChart id="column" height="100%" color="0x323232"
+            showDataTips="true" dataProvider="{medalsAC}">
+                
+            <mx:horizontalAxis>
+                <mx:CategoryAxis categoryField="Country"/>
+            </mx:horizontalAxis>
+                
+            <mx:series>
+                <mx:ColumnSeries xField="Country" yField="Gold" displayName="Gold"/>
+                <mx:ColumnSeries xField="Country" yField="Silver" displayName="Silver"/>
+                <mx:ColumnSeries xField="Country" yField="Bronze" displayName="Bronze"/>
+            </mx:series>
+        </mx:ColumnChart>
+
+        <mx:Legend dataProvider="{column}" color="0x323232"/>
+        
+	</s:Panel>
+	
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/9c4cde03/TourDeFlex/TourDeFlex3/src/spark/charts/TDFGradientBackgroundSkin.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/charts/TDFGradientBackgroundSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/charts/TDFGradientBackgroundSkin.mxml
new file mode 100644
index 0000000..553aee3
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/charts/TDFGradientBackgroundSkin.mxml
@@ -0,0 +1,49 @@
+<?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.
+
+-->
+<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>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/9c4cde03/TourDeFlex/TourDeFlex3/src/spark/components/SearchBox.as
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/components/SearchBox.as b/TourDeFlex/TourDeFlex3/src/spark/components/SearchBox.as
new file mode 100644
index 0000000..e263c2c
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/components/SearchBox.as
@@ -0,0 +1,176 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.
+//
+////////////////////////////////////////////////////////////////////////////////
+package
+{
+	import flash.events.Event;
+	import flash.events.KeyboardEvent;
+	import flash.events.MouseEvent;
+	import flash.geom.Point;
+	import flash.ui.Keyboard;
+	
+	import mx.collections.ArrayCollection;
+	import mx.controls.Button;
+	import mx.controls.List;
+	import mx.controls.TextInput;
+	import mx.core.UIComponent;
+	import mx.events.FlexEvent;
+	import mx.events.FlexMouseEvent;
+	import mx.events.ListEvent;
+	import mx.managers.PopUpManager;
+	
+	[Event(name="textChange", type="flash.events.Event")]
+	[Event(name="itemSelected", type="SearchBoxEvent")]
+	
+	public class SearchBox extends UIComponent
+	{
+		[Embed("assets/icon_close.png")]
+		private var closeIcon:Class;
+		
+		private var textInput:TextInput;
+		private var closeButton:Button;
+		private var list:List;
+		
+		private var isListVisible:Boolean = false;
+		
+		public var text:String;
+		
+		public function set dataProvider(dp:ArrayCollection):void
+		{
+			list.dataProvider = dp;
+			if (dp != null && dp.length > 0)
+			{
+				 if (!isListVisible) popup();
+				 list.selectedIndex = 0;
+			}
+			else
+			{
+				 if (isListVisible) removePopup();
+			}
+		}
+		
+		override protected function createChildren():void
+		{
+			super.createChildren();
+
+            textInput = new TextInput();
+			textInput.addEventListener(Event.CHANGE, textInput_changeHandler);
+			textInput.addEventListener(KeyboardEvent.KEY_DOWN, textInput_keyDownHandler);
+            addChild(textInput);
+            
+            closeButton = new Button();
+            closeButton.setStyle("icon", closeIcon)
+            closeButton.setStyle("skin", null)
+            closeButton.addEventListener(MouseEvent.CLICK, closeHandler);
+			closeButton.width = 20;
+            addChild(closeButton);
+			
+			list = new List();
+			list.setStyle("dropShadowEnabled", true);
+			list.addEventListener(ListEvent.ITEM_CLICK, selectItem);
+            systemManager.addEventListener(Event.RESIZE, removePopup, false, 0, true);
+		}
+	   	
+		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
+		{
+			super.updateDisplayList(unscaledWidth, unscaledHeight);
+
+			textInput.width = unscaledWidth - closeButton.width;
+			textInput.height = unscaledHeight;
+			
+			closeButton.height = unscaledHeight;
+			closeButton.move(unscaledWidth - closeButton.width, 0);
+		}
+		
+        override protected function measure():void 
+        {
+            super.measure();
+            this.measuredWidth = 160;
+            this.measuredHeight = textInput.measuredHeight;
+        }
+
+		private function textInput_keyDownHandler(event:KeyboardEvent):void
+		{
+			switch (event.keyCode) 
+			{
+				case Keyboard.DOWN:
+					if (isListVisible)
+						list.selectedIndex++;
+					else
+						popup();					
+    				break;
+				case Keyboard.UP:
+					if (isListVisible && list.selectedIndex > 0)
+					{
+						list.selectedIndex--;
+					}
+					textInput.setSelection(textInput.text.length, textInput.text.length);
+    				break;
+				case Keyboard.ENTER:
+					if (isListVisible) selectItem();
+    				break;
+				case Keyboard.ESCAPE:
+					if (isListVisible) removePopup();
+    				break;
+			}
+		}
+
+	    private function textInput_changeHandler(event:Event):void
+	    {
+	    	text = textInput.text;
+	    	dispatchEvent(new Event("textChange"));	
+	    }
+
+	    private function list_mouseDownOutsideHandler(event:MouseEvent):void
+	    {
+    		removePopup();
+	    }
+
+	    private function selectItem(event:ListEvent = null):void
+	    {
+	    	dispatchEvent(new SearchBoxEvent(SearchBoxEvent.ITEM_SELECTED, list.selectedItem));	
+	    	removePopup();
+	    }
+
+		private function popup():void
+		{
+			PopUpManager.addPopUp(list, this);
+        	isListVisible = true;
+			list.width = textInput.width;
+	        var point:Point = new Point(0, unscaledHeight);
+    	    point = localToGlobal(point);
+    	    point = list.parent.globalToLocal(point);
+        	list.move(point.x, point.y);
+            list.addEventListener(FlexMouseEvent.MOUSE_DOWN_OUTSIDE, list_mouseDownOutsideHandler);
+		}
+
+		private function removePopup(event:Event=null):void
+		{
+			PopUpManager.removePopUp(list);
+            list.removeEventListener(FlexMouseEvent.MOUSE_DOWN_OUTSIDE, list_mouseDownOutsideHandler);
+			isListVisible = false;	
+		}
+		
+		private function closeHandler(event:MouseEvent):void
+		{
+			textInput.text = "";
+			textInput.setFocus();
+		}
+		
+	}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/9c4cde03/TourDeFlex/TourDeFlex3/src/spark/components/SearchBoxEvent.as
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/components/SearchBoxEvent.as b/TourDeFlex/TourDeFlex3/src/spark/components/SearchBoxEvent.as
new file mode 100644
index 0000000..28e744f
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/components/SearchBoxEvent.as
@@ -0,0 +1,35 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.
+//
+////////////////////////////////////////////////////////////////////////////////
+package
+{
+	import flash.events.Event;
+
+	public class SearchBoxEvent extends Event
+	{
+		public static const ITEM_SELECTED:String = "itemSelected";
+	
+		public var item:Object;
+		
+		public function SearchBoxEvent(type:String, item:Object, bubbles:Boolean = true, cancelable:Boolean = false)
+   		{
+   			this.item = item;
+			super(type, bubbles, cancelable);
+		}
+	}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/9c4cde03/TourDeFlex/TourDeFlex3/src/spark/components/SearchExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/components/SearchExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/components/SearchExample.mxml
new file mode 100644
index 0000000..6843f52
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/components/SearchExample.mxml
@@ -0,0 +1,91 @@
+<?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.
+
+-->
+<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" 
+			   xmlns:local="*"
+			   skinClass="TDFGradientBackgroundSkin">
+	
+	<fx:Style>
+		@namespace s "library://ns.adobe.com/flex/spark";
+		@namespace mx "library://ns.adobe.com/flex/mx";
+		@namespace local "*";
+		
+		s|Label {
+			color: #000000;
+		}
+		
+	</fx:Style>
+	
+	<fx:Script>
+		<![CDATA[
+			
+			import mx.collections.ArrayCollection;
+			
+			private var names:ArrayCollection = new ArrayCollection( 
+				["John Smith", "Jane Doe", "Paul Dupont", "Liz Jones", "Marie Taylor"]);
+			
+			private function searchName(item:Object):Boolean
+			{
+				return item.toLowerCase().search(searchBox.text) != -1;
+			}
+			
+			private function textChangeHandler():void
+			{
+				names.filterFunction = searchName;
+				names.refresh();
+				searchBox.dataProvider = names;
+			}
+			
+			private function itemSelectedHandler(event:SearchBoxEvent):void
+			{
+				fullName.text = event.item as String;	
+			}
+			
+		]]>
+	</fx:Script>
+	
+	<s:layout>
+		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
+	</s:layout>
+	
+	<s:Panel title="Components Samples"
+			 width="600" height="100%"
+			 color="0x000000" 
+			 borderAlpha="0.15">
+		
+		<s:layout>
+			<s:HorizontalLayout horizontalAlign="center" 
+								paddingLeft="10" paddingRight="10" 
+								paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<s:HGroup >
+			<s:Label text="Type a few characters to search:" />
+			<local:SearchBox id="searchBox" textChange="textChangeHandler()" itemSelected="itemSelectedHandler(event)"/>
+		</s:HGroup>
+		
+		<mx:FormItem label="You selected:" >
+			<s:TextInput id="fullName"/>
+		</mx:FormItem>
+		
+	</s:Panel>
+	
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/9c4cde03/TourDeFlex/TourDeFlex3/src/spark/components/TDFGradientBackgroundSkin.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/components/TDFGradientBackgroundSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/components/TDFGradientBackgroundSkin.mxml
new file mode 100644
index 0000000..553aee3
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/components/TDFGradientBackgroundSkin.mxml
@@ -0,0 +1,49 @@
+<?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.
+
+-->
+<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>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/9c4cde03/TourDeFlex/TourDeFlex3/src/spark/components/VideoPlayer.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/components/VideoPlayer.mxml b/TourDeFlex/TourDeFlex3/src/spark/components/VideoPlayer.mxml
new file mode 100644
index 0000000..af39161
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/components/VideoPlayer.mxml
@@ -0,0 +1,89 @@
+<?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.
+
+-->
+<s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009"  
+				   xmlns:s="library://ns.adobe.com/flex/spark" 
+				   xmlns:mx="library://ns.adobe.com/flex/mx" 
+				   borderStyle="solid" 
+				   backgroundColor="#333333">
+	
+	<fx:Metadata>
+		[Event(name="complete", type="mx.events.VideoEvent")]
+		[Event(name="mediaPlayerStateChange", type="org.osmf.events.MediaPlayerStateChangeEvent")]
+	</fx:Metadata>
+	
+	<fx:Script>
+		<![CDATA[
+			import mx.events.ItemClickEvent;
+			import mx.events.VideoEvent;
+			
+			import org.osmf.events.MediaPlayerStateChangeEvent;
+			import org.osmf.events.TimeEvent;
+			
+			[Bindable] public var videoWidth:int = 240;
+			[Bindable] public var videoHeight:int = 180;
+			[Bindable] public var source:String; 
+			
+			private function buttonBarClick(event:ItemClickEvent):void
+			{
+				switch (event.index)
+				{
+					case 0:
+						videoDisplay.play();
+						break;
+					case 1:
+						videoDisplay.pause();
+						break;
+					case 2:
+						videoDisplay.stop();
+						break;
+				}
+			}
+			
+			private function playHeadUpdateHandler(event:TimeEvent):void
+			{
+				progressBar.setProgress(event.time, videoDisplay.duration);
+			}
+			
+		]]>
+	</fx:Script>
+	
+	<s:layout>
+		<s:VerticalLayout verticalAlign="middle" horizontalAlign="center" />
+	</s:layout>
+	
+	<s:VideoDisplay id="videoDisplay" width="{videoWidth}" height="{videoHeight}" autoPlay="false"
+					currentTimeChange="playHeadUpdateHandler(event)"
+					source="{source}"
+					complete="dispatchEvent(event)"
+					mediaPlayerStateChange="dispatchEvent(event)"/>
+	
+	<mx:ProgressBar id="progressBar" mode="manual" minimum="0" maximum="{videoDisplay.duration}" 
+					label="" top="{videoHeight + 8 }" left="4" right="4"/>
+	
+	<mx:ButtonBar id="bb" itemClick="buttonBarClick(event)" top="{videoHeight + 20}" bottom="4" 
+				  horizontalCenter="0" toolTipField="toolTip">
+		<mx:dataProvider>
+			<fx:Object icon="@Embed('assets/control_play_blue.png')" toolTip="Play"/>
+			<fx:Object icon="@Embed('assets/control_pause_blue.png')" toolTip="Pause"/>
+			<fx:Object icon="@Embed('assets/control_stop_blue.png')" toolTip="Stop"/>
+		</mx:dataProvider>
+	</mx:ButtonBar>
+	
+</s:BorderContainer>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/9c4cde03/TourDeFlex/TourDeFlex3/src/spark/components/VideoPlayerExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/components/VideoPlayerExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/components/VideoPlayerExample.mxml
new file mode 100644
index 0000000..5b56811
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/components/VideoPlayerExample.mxml
@@ -0,0 +1,49 @@
+<?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.
+
+-->
+<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" 
+			   xmlns:local="*"
+			   skinClass="TDFGradientBackgroundSkin">
+	
+	<s:layout>
+		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
+	</s:layout>
+	
+	<s:Panel title="Components Samples"
+			 width="600" height="100%"
+			 color="0x000000" 
+			 borderAlpha="0.15">
+		
+		<s:layout>
+			<s:HorizontalLayout horizontalAlign="center" 
+							  paddingLeft="10" paddingRight="10" 
+							  paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<local:VideoPlayer source="video1.flv"
+						   complete="log.text += 'complete\n'"
+						   mediaPlayerStateChange="log.text += event.state.toString() + '\n'"/>
+		
+		<s:TextArea id="log" height="220"/>
+		
+	</s:Panel>
+	
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/9c4cde03/TourDeFlex/TourDeFlex3/src/spark/components/VideoPlayerModule.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/components/VideoPlayerModule.mxml b/TourDeFlex/TourDeFlex3/src/spark/components/VideoPlayerModule.mxml
new file mode 100644
index 0000000..2f2fb89
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/components/VideoPlayerModule.mxml
@@ -0,0 +1,33 @@
+<?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.
+
+-->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009"  
+		   xmlns:s="library://ns.adobe.com/flex/spark" 
+		   xmlns:mx="library://ns.adobe.com/flex/mx"  
+		   xmlns="*"
+		   layout="horizontal" 
+		   paddingTop="8">
+	
+	<VideoPlayer source="objects/HOWTO/Components/video1.flv"
+				 complete="log.text += 'complete\n'"
+				 mediaPlayerStateChange="log.text += event.state + '\n'"/>
+	
+	<s:TextArea id="log" height="220"/>
+	
+</mx:Module>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/9c4cde03/TourDeFlex/TourDeFlex3/src/spark/components/VideoPlayerModuleLoader.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/components/VideoPlayerModuleLoader.mxml b/TourDeFlex/TourDeFlex3/src/spark/components/VideoPlayerModuleLoader.mxml
new file mode 100644
index 0000000..f11dac8
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/components/VideoPlayerModuleLoader.mxml
@@ -0,0 +1,34 @@
+<?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.
+
+-->
+<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"  width="100%" height="100%">
+	
+	<fx:Script>
+		<![CDATA[
+			import mx.controls.Alert;
+		]]>
+	</fx:Script>
+
+	<mx:ModuleLoader url="VideoPlayerModule.swf" width="100%" height="100%" error="Alert.show(event.errorText)"/>
+	
+	<s:VideoDisplay/>
+	
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/9c4cde03/TourDeFlex/TourDeFlex3/src/spark/components/assets/control_pause_blue.png
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/components/assets/control_pause_blue.png b/TourDeFlex/TourDeFlex3/src/spark/components/assets/control_pause_blue.png
new file mode 100644
index 0000000..ec61099
Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/components/assets/control_pause_blue.png differ

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/9c4cde03/TourDeFlex/TourDeFlex3/src/spark/components/assets/control_play_blue.png
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/components/assets/control_play_blue.png b/TourDeFlex/TourDeFlex3/src/spark/components/assets/control_play_blue.png
new file mode 100644
index 0000000..f8c8ec6
Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/components/assets/control_play_blue.png differ

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/9c4cde03/TourDeFlex/TourDeFlex3/src/spark/components/assets/control_stop_blue.png
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/components/assets/control_stop_blue.png b/TourDeFlex/TourDeFlex3/src/spark/components/assets/control_stop_blue.png
new file mode 100644
index 0000000..e6f75d2
Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/components/assets/control_stop_blue.png differ

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/9c4cde03/TourDeFlex/TourDeFlex3/src/spark/components/assets/icon_close.png
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/components/assets/icon_close.png b/TourDeFlex/TourDeFlex3/src/spark/components/assets/icon_close.png
new file mode 100644
index 0000000..bf9be79
Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/components/assets/icon_close.png differ

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/9c4cde03/TourDeFlex/TourDeFlex3/src/spark/controls/AccordionExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/AccordionExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/AccordionExample.mxml
new file mode 100644
index 0000000..d6b97db
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/AccordionExample.mxml
@@ -0,0 +1,67 @@
+<?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.
+
+-->
+<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">
+	
+	<s:layout>
+		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
+	</s:layout>
+	
+	<s:Panel title="Accordion Container" width="600" height="100%"
+			 color="0x000000" 
+			 borderAlpha="0.15">
+		
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<s:Label width="100%" color="0x323232"
+				 text="Select an Accordion navigator button to change the panel."/>
+		
+		<mx:Accordion id="accordion" color="0x323232" width="100%" height="100%">
+			<!-- Define each panel using a VBox container. -->
+			<s:NavigatorContent label="Accordion Button for Panel 1">
+				<mx:Label text="Accordion container panel 1"/>
+			</s:NavigatorContent>
+			
+			<s:NavigatorContent label="Accordion Button for Panel 2">
+				<mx:Label text="Accordion container panel 2"/>
+			</s:NavigatorContent>
+			
+			<s:NavigatorContent label="Accordion Button for Panel 3">
+				<mx:Label text="Accordion container panel 3"/>
+			</s:NavigatorContent>
+		</mx:Accordion>
+		
+		<s:Label width="100%" color="0x323232"
+				 text="Programmatically select the panel using a Button control."/>
+		
+		<s:HGroup color="0x323232">
+			<s:Button label="Select Panel 1" click="accordion.selectedIndex=0;"/>
+			<s:Button label="Select Panel 2" click="accordion.selectedIndex=1;"/>
+			<s:Button label="Select Panel 3" click="accordion.selectedIndex=2;"/>
+		</s:HGroup>
+		
+	</s:Panel>
+	
+</s:Application>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/9c4cde03/TourDeFlex/TourDeFlex3/src/spark/controls/AdvancedDatagridExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/AdvancedDatagridExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/AdvancedDatagridExample.mxml
new file mode 100644
index 0000000..889ef08
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/AdvancedDatagridExample.mxml
@@ -0,0 +1,93 @@
+<?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.
+
+-->
+<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>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/9c4cde03/TourDeFlex/TourDeFlex3/src/spark/controls/ColorPickerExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/ColorPickerExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/ColorPickerExample.mxml
new file mode 100644
index 0000000..ea8c106
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ColorPickerExample.mxml
@@ -0,0 +1,49 @@
+<?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 ColorPicker control. -->
+<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">
+	
+	<s:layout>
+		<s:HorizontalLayout horizontalAlign="center" />
+	</s:layout>
+
+    <s:Panel title="ColorPicker Control Example" 
+			 width="600" height="100%"
+			 color="0x000000" 
+			 borderAlpha="0.15">
+		
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+        
+        <s:Label width="100%" color="0x000000"
+           text="Select the background color of the Skinnable container."/>
+		
+        <mx:ColorPicker id="cp" showTextField="true" selectedColor="0xFFFFFF"/>
+		
+		<s:SkinnableContainer width="100%" height="100%" backgroundColor="{cp.selectedColor}" />
+		
+        <s:Label color="0x000000" text="selectedColor: 0x{cp.selectedColor.toString(16)}"/> 
+    </s:Panel>
+	
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/9c4cde03/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridExample.mxml
new file mode 100644
index 0000000..92e4a89
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridExample.mxml
@@ -0,0 +1,96 @@
+<?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.
+
+-->
+<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:Declarations>
+		<fx:XMLList id="employees">
+			<employee>
+				<name>Christina Coenraets</name>
+				<phone>555-219-2270</phone>
+				<email>ccoenraets@fictitious.com</email>
+				<active>true</active>
+				<image>images/arrow_icon_sm.png</image>
+			</employee>
+			<employee>
+				<name>Joanne Wall</name>
+				<phone>555-219-2012</phone>
+				<email>jwall@fictitious.com</email>
+				<active>true</active>
+			</employee>
+			<employee>
+				<name>Maurice Smith</name>
+				<phone>555-219-2012</phone>
+				<email>maurice@fictitious.com</email>
+				<active>false</active>
+			</employee>
+			<employee>
+				<name>Mary Jones</name>
+				<phone>555-219-2000</phone>
+				<email>mjones@fictitious.com</email>
+				<active>true</active>
+			</employee>
+		</fx:XMLList>
+	</fx:Declarations>
+	
+	<s:layout>
+		<s:HorizontalLayout horizontalAlign="center" />
+	</s:layout>
+	
+	<s:Panel title="DataGrid Control" 
+			 color="0x000000" 
+			 borderAlpha="0.15" 
+			 width="600">
+		
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<s:Label width="100%" color="0x323232"
+				 text="Select a row in the DataGrid control."/>
+		
+		<mx:DataGrid id="dg" color="0x323232" width="100%" rowCount="3" dataProvider="{employees}">
+			<mx:columns>
+				<mx:DataGridColumn dataField="name" headerText="Name"/>
+				<mx:DataGridColumn dataField="phone" headerText="Phone"/>
+				<mx:DataGridColumn dataField="email" headerText="Email"/>
+			</mx:columns>
+		</mx:DataGrid>
+		
+		<mx:Form color="0x323232" width="100%" height="100%" paddingTop="0" paddingBottom="0"  >
+			
+			<mx:FormItem label="Name" paddingTop="0" paddingBottom="0">
+				<s:Label text="{dg.selectedItem.name}"/>
+			</mx:FormItem>
+			<mx:FormItem label="Email" paddingTop="0" paddingBottom="0">
+				<s:Label text="{dg.selectedItem.email}"/>
+			</mx:FormItem>
+			<mx:FormItem label="Phone" paddingTop="0" paddingBottom="0">
+				<s:Label text="{dg.selectedItem.phone}"/>
+			</mx:FormItem>
+			
+		</mx:Form>
+		
+	</s:Panel>
+	
+</s:Application>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/9c4cde03/TourDeFlex/TourDeFlex3/src/spark/controls/TDFGradientBackgroundSkin.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/TDFGradientBackgroundSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/TDFGradientBackgroundSkin.mxml
new file mode 100644
index 0000000..553aee3
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/TDFGradientBackgroundSkin.mxml
@@ -0,0 +1,49 @@
+<?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.
+
+-->
+<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>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/9c4cde03/TourDeFlex/TourDeFlex3/src/spark/controls/images/arrow_icon_sm.png
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/images/arrow_icon_sm.png b/TourDeFlex/TourDeFlex3/src/spark/controls/images/arrow_icon_sm.png
new file mode 100644
index 0000000..33debc8
Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/controls/images/arrow_icon_sm.png differ

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/9c4cde03/TourDeFlex/TourDeFlex3/src/spark/formatters/CurrencyFormatterExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/formatters/CurrencyFormatterExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/formatters/CurrencyFormatterExample.mxml
new file mode 100644
index 0000000..d1c345d
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/formatters/CurrencyFormatterExample.mxml
@@ -0,0 +1,87 @@
+<?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.
+
+-->
+<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.events.ValidationResultEvent;			
+			private var vResult:ValidationResultEvent;
+			
+			// Event handler to validate and format input.
+			private function Format():void {
+				
+				vResult = numVal.validate();
+				
+				if (vResult.type==ValidationResultEvent.VALID) {
+					var temp:Number=Number(priceUS.text); 
+					formattedUSPrice.text= usdFormatter.format(temp);
+				}
+					
+				else {
+					formattedUSPrice.text="";
+				}
+			}
+		]]>
+	</fx:Script>
+	
+	<s:layout>
+		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
+	</s:layout>
+	
+	<fx:Declarations>
+		<mx:CurrencyFormatter id="usdFormatter" precision="2" currencySymbol="$" decimalSeparatorFrom="."  rounding="nearest"
+							  decimalSeparatorTo="." useNegativeSign="true" useThousandsSeparator="true" alignSymbol="left"/>
+		
+		<mx:NumberValidator id="numVal" source="{priceUS}" property="text" allowNegative="true" domain="real"/>
+	</fx:Declarations>
+	
+	
+	<s:Panel title="CurrencyFormatter Example" width="600" height="100%"
+			 color="0x000000" 
+			 borderAlpha="0.15">
+		
+		<s:layout>
+			<s:HorizontalLayout horizontalAlign="center" 
+								paddingLeft="10" paddingRight="10" 
+								paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<mx:Form color="0x323232">
+			<mx:FormItem label="Enter dollar amount:">
+				<s:TextInput id="priceUS" text="" width="50%"/>
+			</mx:FormItem>
+			
+			<mx:FormItem label="Formatted U.S. dollar amount: ">
+				<s:Label id="formattedUSPrice" text="" />
+			</mx:FormItem>
+			
+			<mx:FormItem>
+				<s:Button label="Validate and Format" click="Format();"/>
+			</mx:FormItem>
+		</mx:Form>
+		
+	</s:Panel>
+	
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/9c4cde03/TourDeFlex/TourDeFlex3/src/spark/formatters/TDFGradientBackgroundSkin.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/formatters/TDFGradientBackgroundSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/formatters/TDFGradientBackgroundSkin.mxml
new file mode 100644
index 0000000..553aee3
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/formatters/TDFGradientBackgroundSkin.mxml
@@ -0,0 +1,49 @@
+<?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.
+
+-->
+<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>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/9c4cde03/TourDeFlex/TourDeFlex3/src/spark/other/Cursor1Example.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/other/Cursor1Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/other/Cursor1Example.mxml
new file mode 100644
index 0000000..896b671
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/other/Cursor1Example.mxml
@@ -0,0 +1,58 @@
+<?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.
+
+-->
+<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.managers.CursorManager;
+			
+			private function switchCursor():void 
+			{
+				if (toggle.selected) CursorManager.setBusyCursor();
+				else CursorManager.removeBusyCursor();
+			}
+		]]>
+	</fx:Script>
+	
+	<s:layout>
+		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
+	</s:layout>
+	
+	<s:Panel title="Cursor Management Samples"
+			 width="600" height="100%"
+			 color="0x000000" 
+			 borderAlpha="0.15">
+		
+		<s:layout>
+			<s:VerticalLayout horizontalAlign="center" 
+							  paddingLeft="10" paddingRight="10" 
+							  paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<s:CheckBox id="toggle" label="Toggle Cursor" selected="false" color="0x000000" click="switchCursor();"/>
+		
+	</s:Panel>
+	
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/9c4cde03/TourDeFlex/TourDeFlex3/src/spark/other/Cursor2Example.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/other/Cursor2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/other/Cursor2Example.mxml
new file mode 100644
index 0000000..97759e6
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/other/Cursor2Example.mxml
@@ -0,0 +1,74 @@
+<?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.
+
+-->
+<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.controls.Button;
+			import mx.managers.CursorManager;
+			import flash.events.*;
+			
+			private var cursorID:Number = 0;
+			// Embed the cursor symbol.
+			[Embed(source="aircursor.png")]
+			private var waitCursorSymbol:Class;           
+			
+			private function setCursor(cursorType:String):void 
+			{
+				if (cursorType == "normal") {
+					CursorManager.removeAllCursors();
+					CursorManager.removeBusyCursor();
+				} else if (cursorType == "busy") {
+					CursorManager.removeAllCursors();
+					CursorManager.setBusyCursor();
+				} else if (cursorType == "custom") {
+					CursorManager.removeAllCursors();            		
+					cursorID = CursorManager.setCursor(waitCursorSymbol);
+				}
+			}
+		]]>
+	</fx:Script>
+	
+	<s:layout>
+		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
+	</s:layout>
+	
+	<s:Panel title="Cursor Management Samples"
+			 width="600" height="100%"
+			 color="0x000000" 
+			 borderAlpha="0.15">
+		
+		<s:layout>
+			<s:HorizontalLayout horizontalAlign="center" 
+							  paddingLeft="10" paddingRight="10" 
+							  paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<s:Button label="Normal Cursor" color="0x000000" click="setCursor('normal')"/>
+		<s:Button label="Default Busy Cursor" color="0x000000" click="setCursor('busy')"/>
+		<s:Button label="Custom Busy Cursor" color="0x000000" click="setCursor('custom')"/>
+		
+	</s:Panel>
+	
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/9c4cde03/TourDeFlex/TourDeFlex3/src/spark/other/TDFGradientBackgroundSkin.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/other/TDFGradientBackgroundSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/other/TDFGradientBackgroundSkin.mxml
new file mode 100644
index 0000000..553aee3
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/other/TDFGradientBackgroundSkin.mxml
@@ -0,0 +1,49 @@
+<?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.
+
+-->
+<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>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/9c4cde03/TourDeFlex/TourDeFlex3/src/spark/validators/CreditCardValidatorExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/validators/CreditCardValidatorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/validators/CreditCardValidatorExample.mxml
new file mode 100644
index 0000000..03bd534
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/validators/CreditCardValidatorExample.mxml
@@ -0,0 +1,86 @@
+<?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.
+
+-->
+<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">
+	
+	<fx:Script>
+		import mx.controls.Alert;
+	</fx:Script>
+	
+	<s:layout>
+		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
+	</s:layout>
+	
+	<fx:Declarations>
+		
+		<!-- Define model for the credit card data. -->
+		<fx:Model id="creditcard">
+			<card>	
+				<cardType>{cardTypeCombo.selectedItem.data}</cardType>
+				<cardNumber>{cardNumberInput.text}</cardNumber>
+			</card>
+		</fx:Model>
+		
+		<mx:CreditCardValidator id="ccV" 
+								cardTypeSource="{creditcard}" cardTypeProperty="cardType"
+								cardNumberSource="{creditcard}" cardNumberProperty="cardNumber"
+								trigger="{myButton}" triggerEvent="click"
+								cardTypeListener="{cardTypeCombo}"
+								cardNumberListener="{cardNumberInput}"
+								valid="Alert.show('Validation Succeeded!');"/>
+		
+		<s:ArrayCollection id="dp">
+			<fx:Object label="American Express" data="American Express"/>
+			<fx:Object label="Diners Club" data="Diners Club"/>
+			<fx:Object label="Discover" data="Discover"/>
+			<fx:Object label="MasterCard" data="MasterCard"/>
+			<fx:Object label="Visa" data="Visa"/>
+		</s:ArrayCollection>
+		
+	</fx:Declarations>
+	
+	<s:Panel title="CreditCardValidator Example" width="600" height="100%"
+			 color="0x000000" 
+			 borderAlpha="0.15">
+		
+		<s:layout>
+			<s:HorizontalLayout horizontalAlign="center" 
+								paddingLeft="10" paddingRight="10" 
+								paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<mx:Form id="creditCardForm" color="0x323232">
+			<mx:FormItem label="Card Type">    
+				<s:DropDownList id="cardTypeCombo" dataProvider="{dp}" width="160"
+								prompt="Card Type"/>
+			</mx:FormItem>
+			<mx:FormItem label="Credit Card Number">
+				<s:TextInput id="cardNumberInput"/>
+			</mx:FormItem>
+			<mx:FormItem>
+				<s:Button id="myButton" label="Check Credit"/>
+			</mx:FormItem>
+		</mx:Form> 	
+		
+	</s:Panel>
+	
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/9c4cde03/TourDeFlex/TourDeFlex3/src/spark/validators/CurrencyValidatorExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/validators/CurrencyValidatorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/validators/CurrencyValidatorExample.mxml
new file mode 100644
index 0000000..8d13797
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/validators/CurrencyValidatorExample.mxml
@@ -0,0 +1,62 @@
+<?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.
+
+-->
+<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>
+        import mx.controls.Alert;
+    </fx:Script>
+	
+	<s:layout>
+		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
+	</s:layout>
+
+	<fx:Declarations>
+		<mx:CurrencyValidator source="{priceUS}" property="text" precision="2" 
+        trigger="{myButton}" triggerEvent="click" 
+        valid="Alert.show('Validation Succeeded!');"/>
+	</fx:Declarations>
+        
+	<s:Panel title="CurrencyValidator Example" width="600" height="100%"
+			 color="0x000000" 
+			 borderAlpha="0.15">
+		
+		<s:layout>
+			<s:HorizontalLayout horizontalAlign="center" 
+								paddingLeft="10" paddingRight="10" 
+								paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+         
+         <mx:Form color="0x323232">
+            <mx:FormItem label="Enter a U.S. dollar amount: ">
+                 <s:TextInput id="priceUS" width="100%"/>
+            </mx:FormItem>
+
+            <mx:FormItem >
+                <s:Button id="myButton" label="Validate"/>
+            </mx:FormItem>
+        </mx:Form>
+         
+	</s:Panel>
+	
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/9c4cde03/TourDeFlex/TourDeFlex3/src/spark/validators/TDFGradientBackgroundSkin.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/validators/TDFGradientBackgroundSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/validators/TDFGradientBackgroundSkin.mxml
new file mode 100644
index 0000000..553aee3
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/validators/TDFGradientBackgroundSkin.mxml
@@ -0,0 +1,49 @@
+<?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.
+
+-->
+<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>
\ No newline at end of file