flex-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From jmcl...@apache.org
Subject [2/2] git commit: [flex-utilities] [refs/heads/develop] - Added more spark examples
Date Sat, 09 Aug 2014 06:05:22 GMT
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/f8cd5238
Tree: http://git-wip-us.apache.org/repos/asf/flex-utilities/tree/f8cd5238
Diff: http://git-wip-us.apache.org/repos/asf/flex-utilities/diff/f8cd5238

Branch: refs/heads/develop
Commit: f8cd523876c2d0effc4ee82b81d255a4ca3747a6
Parents: bf1d7a5
Author: Justin Mclean <jmclean@apache.org>
Authored: Sat Aug 9 16:05:08 2014 +1000
Committer: Justin Mclean <jmclean@apache.org>
Committed: Sat Aug 9 16:05:08 2014 +1000

----------------------------------------------------------------------
 .../spark/charts/SeriesInterplateExample.mxml   | 115 ++++++++++++++++++
 .../src/spark/charts/SeriesSlideExample.mxml    | 117 +++++++++++++++++++
 .../src/spark/charts/SeriesZoomExample.mxml     | 116 ++++++++++++++++++
 .../src/spark/controls/SWFLoaderExample.mxml    |  57 +++++++++
 .../controls/SimpleTitleWindowExample.mxml      |  62 ++++++++++
 .../src/spark/controls/TabNavigatorExample.mxml |  67 +++++++++++
 .../src/spark/controls/TitleWindowExample.mxml  |  81 +++++++++++++
 .../spark/controls/ToggleButtonBarExample.mxml  |  73 ++++++++++++
 .../src/spark/controls/ToolTipExample.mxml      |  60 ++++++++++
 .../src/spark/controls/TreeExample.mxml         |  82 +++++++++++++
 .../src/spark/controls/VideoDisplayExample.mxml |  56 +++++++++
 .../src/spark/controls/ViewStackExample.mxml    | 113 ++++++++++++++++++
 .../formatters/SwitchFormatterExample.mxml      |  85 ++++++++++++++
 .../formatters/ZipCodeFormatterExample.mxml     |  84 +++++++++++++
 .../src/spark/other/RepeaterExample.mxml        |  66 +++++++++++
 .../spark/validators/FormValidatorExample.mxml  |  92 +++++++++++++++
 .../SocialSecurityValidatorExample.mxml         |  64 ++++++++++
 .../validators/StringValidatorExample.mxml      |  67 +++++++++++
 .../validators/ZipCodeValidatorExample.mxml     |  64 ++++++++++
 19 files changed, 1521 insertions(+)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/f8cd5238/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesInterplateExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesInterplateExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesInterplateExample.mxml
new file mode 100644
index 0000000..16a51bf
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesInterplateExample.mxml
@@ -0,0 +1,115 @@
+<?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 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>
+	
+	<s:layout>
+		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
+	</s:layout>
+	
+	<fx:Declarations>
+		<mx:SeriesInterpolate id="interpolateIn" duration="1000"/>
+	</fx:Declarations>
+	
+	<s:Panel title="Interpolate Effect" 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%" paddingRight="5" paddingLeft="5" color="0x323232"
+							 showDataTips="true" dataProvider="{companyAAC}">
+			
+			<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"
+					showDataEffect="{interpolateIn}"/>
+			</mx:series>
+		</mx:CandlestickChart>
+		
+		
+		<s:BorderContainer color="0x323232" width="30%" borderColor="0xDCDCDC" borderStyle="solid" height="100%">
+			
+			<s:layout>
+				<s:VerticalLayout paddingLeft="5" paddingRight="0" paddingTop="5" />
+			</s:layout>
+			
+			<s:Label color="0x0050AA" width="100%"
+					 text="Choose a company to view recent stock data."/>
+			
+			<s:RadioButton groupName="stocks" label="View Company A"
+						   selected="true" click="candlestickchart.dataProvider=companyAAC;"/>
+			<s:RadioButton groupName="stocks" label="View Company B"
+						   click="candlestickchart.dataProvider=companyBAC;"/>
+		</s:BorderContainer>
+		
+	</s:Panel>
+	
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/f8cd5238/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesSlideExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesSlideExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesSlideExample.mxml
new file mode 100644
index 0000000..58f88a4
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesSlideExample.mxml
@@ -0,0 +1,117 @@
+<?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 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>
+	
+	<s:layout>
+		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
+	</s:layout>
+	
+	<fx:Declarations>
+		<mx:SeriesSlide id="slideIn" duration="1000" direction="up"/>
+		<mx:SeriesSlide id="slideOut" duration="1000" direction="down"/>
+	</fx:Declarations>
+	
+	
+	<s:Panel title="Slide Effect" 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%" paddingRight="5" paddingLeft="5" color="0x323232"
+							 showDataTips="true" dataProvider="{companyAAC}">
+			
+			<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"
+					showDataEffect="{slideIn}" 
+					hideDataEffect="{slideOut}"/>
+			</mx:series>
+		</mx:CandlestickChart>
+		
+		<s:BorderContainer color="0x323232" width="30%" borderColor="0xDCDCDC" borderStyle="solid" height="100%">
+			
+			<s:layout>
+				<s:VerticalLayout paddingLeft="5" paddingRight="0" paddingTop="5" />
+			</s:layout>
+			
+			<s:Label color="0x0050AA" width="100%"
+					 text="Choose a company to view recent stock data."/>
+			
+			<s:RadioButton groupName="stocks" label="View Company A"
+						   selected="true" click="candlestickchart.dataProvider=companyAAC;"/>
+			<s:RadioButton groupName="stocks" label="View Company B"
+						   click="candlestickchart.dataProvider=companyBAC;"/>
+		</s:BorderContainer>
+		
+	</s:Panel>
+	
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/f8cd5238/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesZoomExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesZoomExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesZoomExample.mxml
new file mode 100644
index 0000000..d5b85d2
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesZoomExample.mxml
@@ -0,0 +1,116 @@
+<?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 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>
+	
+	<s:layout>
+		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
+	</s:layout>
+	
+	<fx:Declarations>
+		<mx:SeriesZoom id="zoomIn" duration="1000"/>
+		<mx:SeriesZoom id="zoomOut" duration="1000"/>
+	</fx:Declarations>
+	
+	
+	<s:Panel title="Zoom Effect" 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%" paddingRight="5" paddingLeft="5" color="0x323232"
+							 showDataTips="true" dataProvider="{companyAAC}">
+			
+			<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"
+					showDataEffect="{zoomIn}" 
+					hideDataEffect="{zoomOut}"/>
+			</mx:series>
+		</mx:CandlestickChart>
+		
+		<s:BorderContainer color="0x323232" width="30%" borderColor="0xDCDCDC" borderStyle="solid" height="100%">
+			<s:layout>
+				<s:VerticalLayout paddingLeft="5" paddingRight="0" paddingTop="5" />
+			</s:layout>
+			
+			<s:Label color="0x0050AA" width="100%"
+					 text="Choose a company to view recent stock data."/>
+			
+			<s:RadioButton groupName="stocks" label="View Company A"
+						   selected="true" click="candlestickchart.dataProvider=companyAAC;"/>
+			<s:RadioButton groupName="stocks" label="View Company B"
+						   click="candlestickchart.dataProvider=companyBAC;"/>
+		</s:BorderContainer>
+		
+	</s:Panel>
+</s:Application>
+

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/f8cd5238/TourDeFlex/TourDeFlex3/src/spark/controls/SWFLoaderExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/SWFLoaderExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/SWFLoaderExample.mxml
new file mode 100644
index 0000000..f198e82
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/SWFLoaderExample.mxml
@@ -0,0 +1,57 @@
+<?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"
+			   creationComplete="init()">
+	
+	<fx:Script>
+		<![CDATA[
+			private function init():void{
+				swfObj.content.addEventListener("SWF_EVENT",ballHandler);
+			}
+			private function ballHandler(ev:Event):void{
+				txt.text = "Flash content embedded at compile time | " + ev.target.ballCnt + " gumballs left";
+			}
+		]]>
+	</fx:Script>
+	
+	<s:layout>
+		<s:HorizontalLayout horizontalAlign="center" />
+	</s:layout>
+	
+	<s:Panel title="SWFLoader Control" color="0x000000" 
+			 borderAlpha="0.15" 
+			 width="600">
+		
+		<s:layout>
+			<s:VerticalLayout horizontalAlign="center" 
+							  paddingLeft="10" paddingRight="10" 
+							  paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<s:Label id="txt" color="0x323232" fontWeight="bold" text="Flash content embedded at compile time | 10 gumballs left" />
+		
+		<mx:SWFLoader id="swfObj" source="@Embed('assets/swf_sample.swf')"  />
+	</s:Panel>
+	
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/f8cd5238/TourDeFlex/TourDeFlex3/src/spark/controls/SimpleTitleWindowExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/SimpleTitleWindowExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/SimpleTitleWindowExample.mxml
new file mode 100644
index 0000000..204daab
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/SimpleTitleWindowExample.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.
+
+-->
+<!-- Simple custom MXML TitleWindow component.
+     The TitleWindowApp application displays this component. 
+     You cannot run it independently. -->
+     
+<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"  
+				xmlns:s="library://ns.adobe.com/flex/spark" 
+				xmlns:mx="library://ns.adobe.com/flex/mx"  
+    			title="Title Window"
+				close="PopUpManager.removePopUp(this);" >
+
+    <fx:Script>
+        <![CDATA[       
+			import mx.managers.PopUpManager;
+			
+			import spark.components.RichText;
+	       
+            // A reference to the TextInput control in which to put the result.
+            public var loginName:RichText;
+		   
+            // Event handler for the OK button.
+            private function returnName():void {
+                loginName.text="Name entered: " + userName.text; 
+                PopUpManager.removePopUp(this);
+            }
+        ]]>
+    </fx:Script>
+	
+	<s:layout>
+		<s:VerticalLayout horizontalAlign="center" 
+						  paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" />
+	</s:layout>
+
+    <s:HGroup>
+		<s:Label text="Enter Name: "/>
+		<s:TextInput id="userName" width="100%"/>
+	</s:HGroup>
+   
+	<s:HGroup>
+        <s:Button label="OK" click="returnName();"/>
+        <s:Button label="Cancel" click="PopUpManager.removePopUp(this);"/>
+	</s:HGroup>
+
+</s:TitleWindow>  
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/f8cd5238/TourDeFlex/TourDeFlex3/src/spark/controls/TabNavigatorExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/TabNavigatorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/TabNavigatorExample.mxml
new file mode 100644
index 0000000..969c4b8
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/TabNavigatorExample.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="TabNavigator 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" fontWeight="bold"
+				 text="Select the tabs to change the panel."/>
+		
+		<mx:TabNavigator id="tn"  width="100%" height="100%" color="0x323232" >
+			<!-- Define each panel using a VBox container. -->
+			
+			<s:NavigatorContent label="Panel 1">
+				<s:Label text="TabNavigator container panel 1"/>
+			</s:NavigatorContent>
+			
+			<s:NavigatorContent label="Panel 2">
+				<s:Label text="TabNavigator container panel 2"/>
+			</s:NavigatorContent>
+			
+			<s:NavigatorContent label="Panel 3">
+				<s:Label text="TabNavigator container panel 3"/>
+			</s:NavigatorContent>
+		</mx:TabNavigator>
+		
+		<s:Label width="100%" color="0x323232"
+				 text="Programmatically select the panel using a Button control."/>
+		
+		<s:HGroup>
+			<s:Button label="Select Tab 1" click="tn.selectedIndex=0" color="0x545454" />
+			<s:Button label="Select Tab 2" click="tn.selectedIndex=1" color="0x545454" />
+			<s:Button label="Select Tab 3" click="tn.selectedIndex=2" color="0x545454" />
+		</s:HGroup>
+		
+	</s:Panel>
+	
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/f8cd5238/TourDeFlex/TourDeFlex3/src/spark/controls/TitleWindowExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/TitleWindowExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/TitleWindowExample.mxml
new file mode 100644
index 0000000..9414f7f
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/TitleWindowExample.mxml
@@ -0,0 +1,81 @@
+<?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 flash.geom.Point;
+			
+			import mx.containers.TitleWindow;
+			import mx.managers.PopUpManager;
+			
+			import spark.components.TitleWindow;
+			
+			private var point1:Point = new Point();
+			
+			// Open the TitleWindow container.
+			// Cast the return value of the createPopUp() method
+			// to SimpleTitleWindowExample, the name of the 
+			// component containing the TitleWindow container.
+			private function showWindow():void {
+				var login:SimpleTitleWindowExample=SimpleTitleWindowExample(PopUpManager.createPopUp( 
+					this, SimpleTitleWindowExample , true) as spark.components.TitleWindow);
+				
+				// Calculate position of TitleWindow in Application's coordinates. 
+				point1.x=myButton.x;
+				point1.y=myButton.y;                
+				point1=myButton.localToGlobal(point1);
+				login.x=point1.x+25;
+				login.y=point1.y+25;
+				
+				// Pass a reference to the TextInput control
+				// to the TitleWindow container so that the 
+				// TitleWindow container can return data to the main application.
+				login.loginName=returnedName;
+			}
+		]]>
+	</fx:Script>
+	
+	<s:layout>
+		<s:HorizontalLayout horizontalAlign="center" />
+	</s:layout>
+	
+	<s:Panel title="TitleWindow Container" color="0x000000" 
+			 borderAlpha="0.15" 
+			 width="600">
+		
+		<s:layout>
+			<s:VerticalLayout horizontalAlign="center" 
+							  paddingLeft="10" paddingRight="10" 
+							  paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<s:Button id="myButton" color="0x323232" height="32" label="Click to open the TitleWindow container" 
+				  click="showWindow();"/>
+		
+		<s:RichText id="returnedName" width="100%" color="0x323232" text="Waiting..."/>
+		
+	</s:Panel>
+	
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/f8cd5238/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButtonBarExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButtonBarExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButtonBarExample.mxml
new file mode 100644
index 0000000..f152cba
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButtonBarExample.mxml
@@ -0,0 +1,73 @@
+<?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.ItemClickEvent;	
+			
+			// Event handler function to print a message
+			// describing the selected Button control.        
+			private function clickHandler(event:ItemClickEvent):void {
+				tgPanel.title = "ToggleButtonBar: " + event.label;
+				myTA.text="Selected button index: " + String(event.index) + 
+					"\n" + "Selected button label: " + event.label;
+			}
+		]]>
+	</fx:Script>
+	
+	<fx:Declarations>
+		
+		<fx:Array id="dp">
+			<fx:String>Flash</fx:String>
+			<fx:String>Flex</fx:String>
+			<fx:String>AIR</fx:String>
+			<fx:String>ColdFusion</fx:String>
+			<fx:String>LiveCycle</fx:String>
+		</fx:Array>
+		
+	</fx:Declarations>
+	
+	<s:layout>
+		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
+	</s:layout>
+	
+	<s:Panel id="tgPanel" title="ToggleButtonBar: Flash" width="600" height="100%"
+			 color="0x000000" 
+			 borderAlpha="0.15">
+		
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<mx:ToggleButtonBar color="0x323232" horizontalGap="5" itemClick="clickHandler(event);" dataProvider="{dp}" />
+		
+		<s:Label width="100%" textAlign="center" color="0x323232" 
+				 text="Select a button in the ToggleButtonBar control."/>
+		
+		<s:TextArea color="0x323232" id="myTA" width="100%" height="100%" text="{'Selected button index: 0' + '\n' +'Selected button label: Flash'}"/>
+		
+	</s:Panel>
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/f8cd5238/TourDeFlex/TourDeFlex3/src/spark/controls/ToolTipExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/ToolTipExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/ToolTipExample.mxml
new file mode 100644
index 0000000..51aa8e4
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ToolTipExample.mxml
@@ -0,0 +1,60 @@
+<?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:Style>
+		@namespace mx "library://ns.adobe.com/flex/mx";
+		
+		mx|ToolTip 
+		{
+			fontFamily: "Arial";
+			fontSize: 12;
+			fontStyle: "italic";
+			color: #000000;
+			backgroundColor: #FCEA1E;
+		}
+	</fx:Style>
+	
+	<s:layout>
+		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
+	</s:layout>
+	
+	<s:Panel title="ToolTip 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:Button label="Roll over me!" toolTip="This button doesn't do anything &#13;This tip could provide more instructions" />        
+		<s:TextInput toolTip="Enter some data here"/>
+		
+	</s:Panel>
+	
+</s:Application>
+

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/f8cd5238/TourDeFlex/TourDeFlex3/src/spark/controls/TreeExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/TreeExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/TreeExample.mxml
new file mode 100644
index 0000000..88fd9f3
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/TreeExample.mxml
@@ -0,0 +1,82 @@
+<?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[
+
+            [Bindable]
+            public var selectedNode:XML;
+
+            // Event handler for the Tree control change event.
+            public function treeChanged(event:Event):void {
+                selectedNode=Tree(event.target).selectedItem as XML;
+            }
+        ]]>
+    </fx:Script>
+    
+	<fx:Declarations>
+		<fx:XMLList id="treeData">
+			<node label="Mail Box">
+				<node label="Inbox">
+					<node label="Marketing"/>
+					<node label="Product Management"/>
+					<node label="Personal"/>
+				</node>
+				<node label="Outbox">
+					<node label="Professional"/>
+					<node label="Personal"/>
+				</node>
+				<node label="Spam"/>
+				<node label="Sent"/>
+			</node>	
+		</fx:XMLList>
+	</fx:Declarations>
+	
+	<s:layout>
+		<s:VerticalLayout horizontalAlign="center" />
+	</s:layout>
+    
+	<s:Panel title="Tree Control" color="0x000000" 
+			 borderAlpha="0.15" 
+			 width="600">
+		
+		<s:layout>
+			<s:VerticalLayout horizontalAlign="center" 
+							  paddingLeft="10" paddingRight="10" 
+							  paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+         
+         <s:Label width="100%" color="0x323232" 
+            text="Select a node in the Tree control."/>
+
+        <mx:HDividedBox width="100%" height="100%" color="0x323232">
+            <mx:Tree id="myTree" width="50%" height="100%" labelField="@label"
+                showRoot="false" dataProvider="{treeData}" change="treeChanged(event)"/>
+            <s:TextArea height="100%" width="50%"
+                text="Selected Item: {selectedNode.@label}"/>
+        </mx:HDividedBox>
+        
+	</s:Panel>
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/f8cd5238/TourDeFlex/TourDeFlex3/src/spark/controls/VideoDisplayExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/VideoDisplayExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/VideoDisplayExample.mxml
new file mode 100644
index 0000000..f43e379
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/VideoDisplayExample.mxml
@@ -0,0 +1,56 @@
+<?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 horizontalAlign="center" />
+	</s:layout>
+	
+	<fx:Script>
+		<![CDATA[
+			import flashx.textLayout.conversion.TextConverter;
+		]]>
+	</fx:Script>
+	
+	<fx:Declarations>
+		<fx:String id="TitleText"><![CDATA["<b>VideoDisplay Control:</b><br />Use the buttons to control the video."]]></fx:String>
+	</fx:Declarations>
+	
+	<s:VGroup width="600" horizontalAlign="center" paddingTop="10">
+		
+		<s:RichText width="75%" color="0xffffff" textAlign="center"
+					textFlow="{TextConverter.importToFlow(TitleText, TextConverter.TEXT_FIELD_HTML_FORMAT)}"
+					horizontalCenter="0" verticalCenter="0" />
+		
+		<s:VideoDisplay id="myVid" height="146" width="220" source="assets/sample_vid.flv" autoPlay="false"/>
+		
+		<s:HGroup>
+			<s:Button label="Play" color="0x00000" click="myVid.play();"/>
+			<s:Button label="Pause" color="0x00000" click="myVid.pause();"/>
+			<s:Button label="Stop" color="0x00000" click="myVid.stop();"/>
+		</s:HGroup>
+		
+	</s:VGroup>
+	
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/f8cd5238/TourDeFlex/TourDeFlex3/src/spark/controls/ViewStackExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/ViewStackExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/ViewStackExample.mxml
new file mode 100644
index 0000000..3685017
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ViewStackExample.mxml
@@ -0,0 +1,113 @@
+<?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="ViewStack 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" textAlign="center"
+				 text="Use the Button controls to change panels of the ViewStack container."/>
+		
+		<s:BorderContainer borderStyle="solid" width="100%" color="0x323232">
+			
+			<s:layout>
+				<s:HorizontalLayout horizontalAlign="center"  
+									paddingTop="5" paddingLeft="5" 
+									paddingRight="5" paddingBottom="5" />
+			</s:layout>
+			
+			<s:Button id="searchButton" label="Search Panel"
+					  click="myViewStack.selectedChild=search;"/>
+			<s:Button id="cInfoButton" label="Customer Info Panel"
+					  click="myViewStack.selectedChild=custInfo;"/>
+			<s:Button id="aInfoButton" label="Account Panel"
+					  click="myViewStack.selectedChild=accountInfo;"/>
+		</s:BorderContainer>
+		
+		<!-- Define the ViewStack and the three child containers and have it
+		resize up to the size of the container for the buttons. -->
+		<mx:ViewStack id="myViewStack" borderStyle="solid" width="100%" height="80%" color="0x323232">
+			
+			<s:NavigatorContent id="search" label="Search" backgroundColor="0xDCDCDC" width="100%" height="100%" fontWeight="bold" >
+				
+				<s:layout>
+					<s:VerticalLayout horizontalAlign="center"  
+										paddingTop="5" paddingLeft="5" 
+										paddingRight="5" paddingBottom="5" />
+				</s:layout>
+				
+				<s:Label text="Search Panel" />
+				<s:HGroup >
+					<s:TextInput id="Searchtxt" width="200" />
+					<mx:Button label="search" click="Searchtxt.text=''" />
+				</s:HGroup>
+			</s:NavigatorContent>
+			
+			<s:NavigatorContent id="custInfo" label="Customer Info" backgroundColor="0xDCDCDC" 
+								width="100%" height="100%" fontWeight="bold" >
+				
+				<s:layout>
+					<s:VerticalLayout horizontalAlign="center"  
+										paddingTop="5" paddingLeft="5" 
+										paddingRight="5" paddingBottom="5" />
+				</s:layout>
+				
+				<s:Label text="Customer Info" />
+				<s:HGroup>
+					<s:Label text="Email Address"/>
+					<s:TextInput id="email" width="200"/>
+					<s:Button label="Submit" click="email.text='';" />
+				</s:HGroup>
+			</s:NavigatorContent>
+			
+			<s:NavigatorContent id="accountInfo" label="Account Info" backgroundColor="0xDCDCDC" width="100%" height="100%" fontWeight="bold" >
+				
+				<s:layout>
+					<s:VerticalLayout horizontalAlign="center"  
+										paddingTop="5" paddingLeft="5" 
+										paddingRight="5" paddingBottom="5" />
+				</s:layout>
+				
+				<s:Label text="Account Info" />
+				<s:HGroup>
+					<s:Button label="Purchases" />
+					<s:Button label="Sales" />
+					<s:Button label="Reports" />
+				</s:HGroup>
+			</s:NavigatorContent>
+			
+		</mx:ViewStack>
+		
+	</s:Panel>
+	
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/f8cd5238/TourDeFlex/TourDeFlex3/src/spark/formatters/SwitchFormatterExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/formatters/SwitchFormatterExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/formatters/SwitchFormatterExample.mxml
new file mode 100644
index 0000000..fec712f
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/formatters/SwitchFormatterExample.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.
+
+-->
+<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.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("###-##-####", scNum.text);
+                }
+
+                else {
+                    formattedSCNumber.text= "";
+                }
+            }
+        ]]>
+    </fx:Script>
+	
+	<s:layout>
+		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
+	</s:layout>
+    
+	<fx:Declarations>
+		<mx:SocialSecurityValidator id="scVal" source="{scNum}" property="text"/>
+	</fx:Declarations>
+   
+        
+	<s:Panel title="SwitchSymbolFormatter 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" width="100%">
+         	<s:Label text="Enter a 9 digit Social Security number with no separator characters:" />
+         	
+         	<s:TextInput id="scNum" text="" width="50%" maxChars="9"/>
+            <s:Button label="Validate and Format" click="Format();"/>
+			
+            <mx:FormItem label="formatted Social Security number:">
+                <s:Label id="formattedSCNumber" text="" />
+            </mx:FormItem>
+        </mx:Form>
+        
+	</s:Panel>
+	
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/f8cd5238/TourDeFlex/TourDeFlex3/src/spark/formatters/ZipCodeFormatterExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/formatters/ZipCodeFormatterExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/formatters/ZipCodeFormatterExample.mxml
new file mode 100644
index 0000000..14afe89
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/formatters/ZipCodeFormatterExample.mxml
@@ -0,0 +1,84 @@
+<?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 = zcVal.validate();
+                
+                if (vResult.type==ValidationResultEvent.VALID) {
+                    formattedZipcode.text= zipFormatter.format(zip.text);
+                }
+                
+                else {
+                    formattedZipcode.text= "";
+                }
+            }
+        ]]>      
+    </fx:Script>
+	
+	<s:layout>
+		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
+	</s:layout>
+	
+	<fx:Declarations>
+		<mx:ZipCodeFormatter id="zipFormatter" formatString="#####-####"/>
+
+    <mx:ZipCodeValidator id="zcVal" source="{zip}" property="text" allowedFormatChars=""/>
+	</fx:Declarations>
+    
+	<s:Panel title="ZipCodeFormatter 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 width="100%" color="0x323232">
+            <mx:FormItem label="Enter a 5 or 9 digit U.S. ZIP code:" width="100%">
+                <s:TextInput id="zip" text=""/>
+            </mx:FormItem>
+
+            <mx:FormItem label="Formatted ZIP code: " width="100%">
+                <s:Label id="formattedZipcode" 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/f8cd5238/TourDeFlex/TourDeFlex3/src/spark/other/RepeaterExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/other/RepeaterExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/other/RepeaterExample.mxml
new file mode 100644
index 0000000..3228c60
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/other/RepeaterExample.mxml
@@ -0,0 +1,66 @@
+<?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.Alert;
+  
+			[Bindable]
+			private var dp:Array = [1, 2, 3, 4, 5, 6, 7, 8, 9];    
+			
+        ]]>
+     </fx:Script>
+	
+	<s:layout>
+		<s:HorizontalLayout horizontalAlign="center" />
+	</s:layout>
+        
+	<s:Panel title="Repeater Example" color="0x000000" 
+			 borderAlpha="0.15" 
+			 width="600">
+		
+		<s:layout>
+			<s:VerticalLayout horizontalAlign="center" 
+							  paddingLeft="10" paddingRight="10" 
+							  paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+         
+         <s:Label width="100%" color="0x323232"  textAlign="center"
+            text="Use the Repeater class to create multi-Button controls in a Tile container."/>
+
+        <mx:Tile direction="horizontal" borderStyle="inset" horizontalGap="10" verticalGap="10" color="0x323232"
+            paddingLeft="10" paddingTop="10" paddingBottom="10" paddingRight="10">
+        
+            <mx:Repeater id="rp" dataProvider="{dp}">
+                <s:Button height="24" width="50" 
+                    label="{String(rp.currentItem)}" 
+                    click="Alert.show(String(event.currentTarget.getRepeaterItem()) + ' pressed')"/>
+            </mx:Repeater>    
+        </mx:Tile>
+        
+	</s:Panel>
+	
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/f8cd5238/TourDeFlex/TourDeFlex3/src/spark/validators/FormValidatorExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/validators/FormValidatorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/validators/FormValidatorExample.mxml
new file mode 100644
index 0000000..3a149f9
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/validators/FormValidatorExample.mxml
@@ -0,0 +1,92 @@
+<?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 necessary classes.
+            import mx.controls.Alert;
+			import mx.events.ValidationResultEvent;
+			
+			// Event listener for the valid and invalid events.
+			private function handleValid(eventObj:ValidationResultEvent):void {
+				if(eventObj.type==ValidationResultEvent.VALID)	
+				    // Enable Submit button.
+					submitButton.enabled = true;
+				else
+					submitButton.enabled = false;
+			}
+
+			// Submit form is everything is valid. 
+			private function submitForm():void {
+				Alert.show("Form Submitted!");
+			}
+
+        ]]>
+    </fx:Script>
+	
+	<s:layout>
+		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
+	</s:layout>
+
+	<fx:Declarations>
+		<!-- The Validator class defines the required property and the validator events
+         used by all validator subclasses. -->
+    <mx:Validator id="reqValid" required="true"
+        source="{fname}" property="text" 
+        valid="handleValid(event)" invalid="handleValid(event)"/>
+	</fx:Declarations>
+        
+	<s:Panel title="Validator Example" width="620" height="100%"
+			 color="0x000000" 
+			 borderAlpha="0.15">
+		
+		<s:layout>
+			<s:VerticalLayout horizontalAlign="center" 
+							  paddingLeft="10" paddingRight="10" 
+							  paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+         
+         <mx:Form color="0x323232">
+            <s:Label width="100%"
+                text="Enter a value in the Name field before you can submit. The E-mail field is optional."/>
+
+            <mx:FormItem label="Name: " required="true">
+                <s:TextInput id="fname" width="100%"/>
+            </mx:FormItem>
+
+            <mx:FormItem label="E-mail address: " required="false">
+                <s:TextInput id="email" width="100%"/>
+            </mx:FormItem>
+            
+            <mx:FormItem>
+                <s:Button id="submitButton" enabled="false" 
+                    label="Submit" click="submitForm();"/>
+            </mx:FormItem>
+        </mx:Form>
+        
+	</s:Panel>
+	
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/f8cd5238/TourDeFlex/TourDeFlex3/src/spark/validators/SocialSecurityValidatorExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/validators/SocialSecurityValidatorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/validators/SocialSecurityValidatorExample.mxml
new file mode 100644
index 0000000..90995a1
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/validators/SocialSecurityValidatorExample.mxml
@@ -0,0 +1,64 @@
+<?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.Alert;
+		]]>
+	</fx:Script>
+	
+	<s:layout>
+		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
+	</s:layout>
+	
+	<fx:Declarations>
+		<mx:SocialSecurityValidator source="{ssn}" property="text" 
+									trigger="{myButton}" triggerEvent="click"
+									valid="Alert.show('Validation Succeeded!');"/>
+	</fx:Declarations>
+	
+	<s:Panel title="SocialSecurityValidator Example" width="620" height="100%"
+			 color="0x000000" 
+			 borderAlpha="0.15">
+		
+		<s:layout>
+			<s:VerticalLayout horizontalAlign="center" 
+							  paddingLeft="10" paddingRight="10" 
+							  paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<mx:Form color="0x323232">
+			<mx:FormItem label="Enter Social Security number: ">
+				<s:TextInput id="ssn" 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/f8cd5238/TourDeFlex/TourDeFlex3/src/spark/validators/StringValidatorExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/validators/StringValidatorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/validators/StringValidatorExample.mxml
new file mode 100644
index 0000000..7264296
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/validators/StringValidatorExample.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">
+	
+	<fx:Script>
+		<![CDATA[
+			import mx.controls.Alert;
+		]]>
+	</fx:Script>
+	
+	<s:layout>
+		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
+	</s:layout>
+	
+	<fx:Declarations>
+		<mx:StringValidator source="{fname}" property="text" 
+							tooShortError="This string is shorter than the minimum allowed length of 4. " 
+							tooLongError="This string is longer than the maximum allowed length of 20." 
+							minLength="4" maxLength="20"
+							trigger="{myButton}" triggerEvent="click" 
+							valid="Alert.show('Validation Succeeded!');"/>
+	</fx:Declarations>
+	
+	<s:Panel title="StringValidator Example" width="620" height="100%"
+			 color="0x000000" 
+			 borderAlpha="0.15">
+		
+		<s:layout>
+			<s:VerticalLayout horizontalAlign="center" 
+							  paddingLeft="10" paddingRight="10" 
+							  paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<mx:Form color="0x323232">               
+			<mx:FormItem label="Enter a name between 4 and 20 characters: ">
+				<s:TextInput id="fname" 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/f8cd5238/TourDeFlex/TourDeFlex3/src/spark/validators/ZipCodeValidatorExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/validators/ZipCodeValidatorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/validators/ZipCodeValidatorExample.mxml
new file mode 100644
index 0000000..697be46
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/validators/ZipCodeValidatorExample.mxml
@@ -0,0 +1,64 @@
+<?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.Alert;
+		]]>
+	</fx:Script>
+	
+	<s:layout>
+		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
+	</s:layout>
+	
+	<fx:Declarations>
+		<mx:ZipCodeValidator source="{zip}" property="text" 
+							 trigger="{myButton}" triggerEvent="click"  
+							 valid="Alert.show('Validation Succeeded!');"/>
+	</fx:Declarations>
+	
+	<s:Panel title="ZipCodeValidator Example" width="620" height="100%"
+			 color="0x000000" 
+			 borderAlpha="0.15">
+		
+		<s:layout>
+			<s:VerticalLayout horizontalAlign="center" 
+							  paddingLeft="10" paddingRight="10" 
+							  paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<mx:Form color="0x323232">
+			<mx:FormItem label="Enter a 5 or 9 digit U.S. Zip code: ">
+				<s:TextInput id="zip" width="100%"/>
+			</mx:FormItem>
+			
+			<mx:FormItem >
+				<s:Button id="myButton" label="Validate" />
+			</mx:FormItem>
+		</mx:Form>
+		
+	</s:Panel>
+	
+</s:Application>


Mime
View raw message