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/23 05:25:39 UTC

[03/51] [partial] Merged TourDeFlex release from develop

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/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..084d0aa
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/formatters/SwitchFormatterExample.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">
+	
+	<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/e1f9d1df/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/e1f9d1df/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..16ab586
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/formatters/ZipCodeFormatterExample.mxml
@@ -0,0 +1,83 @@
+<?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>
+        <![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/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/fxg/BitmapImageExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/fxg/BitmapImageExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/fxg/BitmapImageExample.mxml
new file mode 100644
index 0000000..3cdcd76
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/fxg/BitmapImageExample.mxml
@@ -0,0 +1,72 @@
+<?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.
+
+-->
+<!-- BitmapGraphicExample.mxml -->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
+			   width="694" height="277">
+	    <s:Panel title="BitmapImage Sample"
+            width="100%" height="100%"
+            horizontalCenter="0" verticalCenter="0" skinClass="skins.TDFPanelSkin">
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="15" paddingRight="15" paddingTop="15" paddingBottom="15"/>
+		</s:layout>
+		<s:VGroup>
+			<s:ComboBox id="fillModes" selectedItem="repeat">
+				<s:dataProvider>
+					<s:ArrayCollection>
+						<fx:String>scale</fx:String>
+						<fx:String>clip</fx:String>
+						<fx:String>repeat</fx:String>
+					</s:ArrayCollection>
+				</s:dataProvider>
+			</s:ComboBox>
+			<s:ComboBox id="blends" selectedItem="normal">
+				<s:dataProvider>
+					<s:ArrayCollection>
+						<fx:String>add</fx:String>
+						<fx:String>alpha</fx:String>
+						<fx:String>difference</fx:String>
+						<fx:String>erase</fx:String>
+						<fx:String>hardlight</fx:String>
+						<fx:String>invert</fx:String>
+						<fx:String>layer</fx:String>
+						<fx:String>lighten</fx:String>
+						<fx:String>multiply</fx:String>
+						<fx:String>normal</fx:String>
+						<fx:String>overlay</fx:String>
+						<fx:String>screen</fx:String>
+						<fx:String>shader</fx:String>
+						<fx:String>subtract</fx:String>
+					</s:ArrayCollection>
+				</s:dataProvider>
+				</s:ComboBox>
+			<s:CheckBox id="cbSmooth" label="Smooth?"/>
+		</s:VGroup>
+			
+        <!-- Single image, scaled to fit specified dimensions. -->
+        <s:Graphic x="150" y="0">
+            <s:BitmapImage id="bg2" source="@Embed('assets/ApacheFlexLogo.png')" width="120" height="120" fillMode="{fillModes.selectedItem}"
+						   smooth="{cbSmooth.selected}" blendMode="{blends.selectedItem}"/>
+        </s:Graphic>
+
+        
+		<s:Label color="0x323232" width="200" text="A BitmapImage element defines a rectangular region in its parent element's coordinate space, filled with bitmap data drawn from a source file."/>
+    </s:Panel>
+
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/fxg/DropShadowGraphicExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/fxg/DropShadowGraphicExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/fxg/DropShadowGraphicExample.mxml
new file mode 100644
index 0000000..3e123ea
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/fxg/DropShadowGraphicExample.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/halo">
+	
+	<s:Panel width="100%" height="100%"
+			 title="DropShadows with MXML Graphics Example"
+			 skinClass="skins.TDFPanelSkin" x="0">
+			  
+	    <s:Group horizontalCenter="0" y="5" width="117">
+			<s:Graphic id="ellipse1">
+				<s:filters>
+					<s:DropShadowFilter color="0x6080a0" alpha="0.6" distance="5" />
+				</s:filters>
+				<s:Ellipse x="30" y="20" width="60" height="60">
+					<s:fill>
+						<s:SolidColor color="0x60a0e0" />
+					</s:fill>
+				</s:Ellipse>
+			</s:Graphic>
+			<s:Graphic id="rect1" x="47" y="0" width="100">
+				<s:filters>
+					<s:DropShadowFilter color="0x002020" alpha="0.9" distance="8" angle="10"/>
+				</s:filters>
+				<s:Rect right="15" x="120" y="100" width="90" height="90">
+					<s:fill>
+						<s:SolidColor color="0x4060c0" />
+					</s:fill>
+				</s:Rect>
+			</s:Graphic>
+			<s:Graphic id="image1">
+				<s:filters>
+					<s:DropShadowFilter color="0xFF6600" alpha="0.7" distance="10" angle="-30"/>
+				</s:filters>
+				<s:BitmapImage source="@Embed('assets/ApacheFlexIcon.png')" x="180" y="20" />
+			</s:Graphic>
+			
+		</s:Group>
+	    <s:Label width="250" verticalAlign="justify" color="#323232" x="10" y="30" 
+	    			  text="The DropShadowFilter class lets you add a drop shadow to display
+objects. The shadow algorithm is based on the same box filter that the blur filter uses. You have 
+several options for the style of the drop shadow, including inner or outer shadow and knockout mode. 
+You can apply the filter to any display object (that is, objects that inherit from the DisplayObject 
+class), such as MovieClip, SimpleButton, TextField, and Video objects, as well as to BitmapData objects."/>
+	    	
+	    
+	</s:Panel>
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/fxg/EclipseExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/fxg/EclipseExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/fxg/EclipseExample.mxml
new file mode 100644
index 0000000..0e89a7b
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/fxg/EclipseExample.mxml
@@ -0,0 +1,46 @@
+<?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">
+	
+	<s:Panel title="Ellipse Graphic Sample" skinClass="skins.TDFPanelSkin"
+			 width="100%" height="100%">
+		
+		<s:Graphic horizontalCenter="0" verticalCenter="0">
+			<s:Ellipse height="100" width="250">
+				<s:stroke>
+					<s:SolidColorStroke color="0x000000" weight="5"/>
+				</s:stroke>
+				<s:fill>
+					<s:RadialGradient>
+						<s:entries>
+							<s:GradientEntry color="0x336699" ratio="0.33" alpha="0.8"/>
+							<s:GradientEntry color="0x339999" ratio="0.66" alpha="0.8"/>
+							<s:GradientEntry color="0x323232" ratio="0.99" alpha="0.8"/>
+						</s:entries>
+					</s:RadialGradient>
+				</s:fill>
+			</s:Ellipse>
+		</s:Graphic>
+		<s:Label right="25" top="10" width="270" color="0x323232" text="The Ellipse class is a filled graphic element that draws an ellipse. Graphic
+objects are placed in a Graphic tag which defines the root of an FXG document."/>
+	</s:Panel>
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/fxg/EllipseTransformExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/fxg/EllipseTransformExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/fxg/EllipseTransformExample.mxml
new file mode 100644
index 0000000..19ce21f
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/fxg/EllipseTransformExample.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/halo" minWidth="1024" minHeight="768">
+	<s:layout>
+		<s:BasicLayout/>
+	</s:layout>
+    
+	<fx:Script>
+		<![CDATA[
+			
+			private function addMatrix(): void
+			{
+				ellipse1.transform.matrix = rotation20Matrix;
+				descriptionText.text = "A matrix transform was applied moving the Ellipse to coordinates: 100, 310 and skewing it to a 20 degree rotation.";
+				trace(ellipse1.width);
+			}
+		]]>
+	</fx:Script>
+	<fx:Declarations>
+		<!-- This matrix should cause the rotation of the Ellipse be 20 degrees -->
+		<s:Matrix id="rotation20Matrix"
+				  a="0.939692620786"
+				  b="0.34202014332"
+				  c="0.34202014332"
+				  d="0.939692620786"
+				  tx="100"
+				  ty="310"
+				  />
+	</fx:Declarations>
+	
+	<s:Label text="An Ellipse Using a Transform for Rotation" fontWeight="bold" fontSize="14" horizontalCenter="0"
+				  y="20" />
+	
+	<s:Label id="descriptionText" horizontalCenter="0" y="45" width="300"/>
+	<s:Ellipse id="ellipse1" width="60" height="70" horizontalCenter="0" y="90">
+		<s:fill>
+			<s:LinearGradient>
+				<s:GradientEntry color="#00FF00" alpha="1" ratio="0"/>
+				<s:GradientEntry color="#000000" alpha="0" ratio="1"/>
+			</s:LinearGradient>
+		</s:fill>
+		<s:stroke>
+			<s:SolidColorStroke color="0x666666" weight="1"/>
+		</s:stroke>
+	</s:Ellipse>
+	<s:Button label="Apply Transform" click="addMatrix()" x="40" y="330" />
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/fxg/LineExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/fxg/LineExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/fxg/LineExample.mxml
new file mode 100644
index 0000000..9d5368a
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/fxg/LineExample.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">
+	
+	
+	<s:Panel title="Line Graphic Sample" width="100%" height="100%" skinClass="skins.TDFPanelSkin">
+		<s:Group left="133" top="100">
+			
+			<s:Line xFrom="0" xTo="0" yFrom="0" yTo="100">
+				<!-- Define the border color of the line. -->
+				<s:stroke>
+					<s:SolidColorStroke color="0x000000" weight="1" joints="miter"/>
+				</s:stroke>
+			</s:Line>
+			
+			<s:Line xFrom="6" xTo="6" yFrom="0" yTo="100" >
+				<s:stroke>
+					<s:SolidColorStroke color="0x000000" weight="1" joints="miter"/>
+				</s:stroke>
+			</s:Line>
+			
+			<s:Line xFrom="12" xTo="12" yFrom="0" yTo="100">
+				<s:stroke>
+					<s:SolidColorStroke color="0x000000" weight="2" joints="miter"/>
+				</s:stroke>
+			</s:Line>
+			
+			<s:Line xFrom="20" xTo="20" yFrom="0" yTo="100">
+				<s:stroke>
+					<s:SolidColorStroke color="0x000000" weight="3" joints="miter"/>
+				</s:stroke>
+			</s:Line>
+			
+			<s:Line xFrom="30" xTo="30" yFrom="0" yTo="100">
+				<s:stroke>
+					<s:SolidColorStroke color="0x000000" weight="5" joints="miter"/>
+				</s:stroke>
+			</s:Line>
+			
+			<s:Line xFrom="43" xTo="43" yFrom="0" yTo="100">
+				<s:stroke>
+					<s:SolidColorStroke color="0x000000" weight="8" joints="miter"/>
+				</s:stroke>
+			</s:Line>
+			
+			<s:Line xFrom="58" xTo="58" yFrom="0" yTo="100">
+				<s:stroke>
+					<s:SolidColorStroke color="0x000000" weight="13" joints="miter"/>
+				</s:stroke>
+			</s:Line>
+			
+			<s:Line xFrom="84" xTo="84" yFrom="0" yTo="100">
+				<s:stroke>
+					<s:SolidColorStroke color="0x000000" weight="21" joints="miter"/>
+				</s:stroke>
+			</s:Line>
+			
+			<s:Line xFrom="123" xTo="123" yFrom="0" yTo="100" >
+				<s:stroke>
+					<s:SolidColorStroke color="0x000000" weight="34" joints="bevel" />
+				</s:stroke>
+			</s:Line>
+			<s:Line xFrom="168" xTo="168" yFrom="0" yTo="100" x="3" y="0">
+				<s:stroke>
+					<s:SolidColorStroke color="0x000000" weight="45"/>
+				</s:stroke>
+			</s:Line>
+			<s:Line xFrom="210" xTo="210" yFrom="0" yTo="100" x="19" y="0">
+				<s:stroke>
+					<s:SolidColorStroke color="0x000000" weight="60"/>
+				</s:stroke>
+			</s:Line>
+		</s:Group>
+		<s:Label color="0x323232" right="20" top="15" width="250" text="The Line class is a graphic element that draws a line between two points.
+The default stroke for a line is undefined; therefore, if you do not specify the stroke, the line is invisible."/>
+	</s:Panel>
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/fxg/LinearGradientsSpreadMethodExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/fxg/LinearGradientsSpreadMethodExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/fxg/LinearGradientsSpreadMethodExample.mxml
new file mode 100644
index 0000000..71fd6aa
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/fxg/LinearGradientsSpreadMethodExample.mxml
@@ -0,0 +1,63 @@
+<?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/halo" viewSourceURL="srcview/index.html">
+	<fx:Script>
+		<![CDATA[
+			import mx.collections.ArrayCollection;
+		]]>
+	</fx:Script>
+	
+	<s:Panel title="LinearGradient Control" 
+			  width="100%" height="100%"
+			 skinClass="skins.TDFPanelSkin">
+		
+		<s:HGroup horizontalCenter="0" top="10">
+		<s:Label verticalAlign="justify" color="#323232" x="10" y="30" width="200"
+					  text="The LinearGradient class lets you specify the fill of a graphical element, where a gradient specifies a gradual color transition in the fill color. You add a series of GradientEntry objects to the LinearGradient object's entries Array to define the colors that make up the gradient fill."/>	
+		<s:Rect id="rect1" height="150" width="160" >
+			<s:fill>
+				<s:LinearGradient id="gradient1" scaleX="20" x="0">
+					<s:entries>
+						<s:GradientEntry color="0xFF0000" />
+						<s:GradientEntry color="0xFFFFFF" />
+						<s:GradientEntry color="0x0000FF" />
+					</s:entries>
+				</s:LinearGradient>
+			</s:fill>
+		</s:Rect>
+		<s:VGroup>
+			
+			<s:Label text="scaleX value: " />
+			<s:HSlider id="scaleXVal" value="20" maximum="200" change="gradient1.scaleX=scaleXVal.value"/>
+			<s:Label text="x value: " />
+			<s:HSlider id="XVal" value="0" maximum="200" change="gradient1.x=XVal.value"/>
+			<s:Label text="select a spreadMethod: " />
+			<s:DropDownList id="spreadValue" selectedIndex="0" 
+						dataProvider="{new ArrayCollection(['pad', 'reflect', 'repeat'])}"  
+						change="gradient1.spreadMethod=spreadValue.selectedItem"/>	
+		</s:VGroup>
+			
+		</s:HGroup>
+		
+	</s:Panel>
+	
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/fxg/OrangeCrayonStar.fxg
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/fxg/OrangeCrayonStar.fxg b/TourDeFlex/TourDeFlex3/src/spark/fxg/OrangeCrayonStar.fxg
new file mode 100644
index 0000000..601841c
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/fxg/OrangeCrayonStar.fxg
@@ -0,0 +1,47 @@
+<?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.
+
+-->
+<Graphic version="1.0" xmlns="http://ns.adobe.com/fxg/2008" xmlns:fw="http://ns.adobe.com/fxg/2008/fireworks"  viewHeight= "134" viewWidth= "136">
+	<Library>
+	</Library>
+
+	<Group id="Page_1" fw:type="page">
+		<Group id="State_1" fw:type="state">
+			<Group id="Layer_1" fw:type="layer">
+				<Group id="undefined">
+					<Path winding="evenOdd" data="M 68 12 L 85 48 L 125 54 L 96 82 L 103 121 L 68 103 L 32 121 L 39 82 L 10 54 L 50 48 L 68 12 Z " blendMode="normal" alpha="1">
+						<fill>
+							<LinearGradient x = "67" y = "42" scaleX = "113" rotation = "70">
+								<GradientEntry color="#ff6600" ratio="0" alpha="1"/>
+								<GradientEntry color="#ff6600" ratio="0.08" alpha="1"/>
+								<GradientEntry color="#ffcc00" ratio="0.32" alpha="1"/>
+								<GradientEntry color="#ffff99" ratio="0.53" alpha="1"/>
+								<GradientEntry color="#dedede" ratio="0.99" alpha="1"/>
+								<GradientEntry color="#ffffcc" ratio="0.72" alpha="1"/>
+							</LinearGradient>
+						</fill>
+						<stroke>
+							<SolidColorStroke color="#ff6600" weight="6"/>
+						</stroke>
+					</Path>
+				</Group>
+			</Group>
+		</Group>
+	</Group>
+</Graphic>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/fxg/RectExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/fxg/RectExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/fxg/RectExample.mxml
new file mode 100644
index 0000000..a131ac2
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/fxg/RectExample.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">
+	<fx:Script>
+		<![CDATA[
+			import skins.TDFPanelSkin;
+		]]>
+	</fx:Script>
+	
+	<s:Panel title="Rect Graphic Sample" skinClass="skins.TDFPanelSkin"
+			 width="100%" height="100%">
+		
+			 
+		<s:Group left="15" top="20">
+			<s:Graphic x="0" y="0">
+				<!-- Draw rectangle with square corners. -->
+				<s:Rect height="100" width="150">
+					<s:stroke>
+						<s:SolidColorStroke color="0x000000" weight="2"/>
+					</s:stroke>
+					<s:fill>
+						<s:SolidColor color="0x336699"/>
+					</s:fill>
+				</s:Rect>
+			</s:Graphic>
+			
+			<s:Graphic x="250" y="0">
+				<!-- Draw rectangle with rounded corners. -->
+				<s:Rect height="100" width="150" radiusX="25" radiusY="25">
+					<s:stroke>
+						<s:SolidColorStroke color="0x336699" weight="2"/>
+					</s:stroke>
+					<s:fill>
+						<s:RadialGradient>
+							<s:entries>
+								<s:GradientEntry color="0x336699"  alpha="0.5"/>
+								<s:GradientEntry color="0x323232"  alpha="0.5"/>
+								<s:GradientEntry color="0xE2E2E2"  alpha="0.5"/>
+							</s:entries>
+						</s:RadialGradient>
+					</s:fill>
+				</s:Rect>
+			</s:Graphic>
+			
+			<s:Graphic x="500" y="0">
+				<s:Rect height="100" width="150">
+					<s:stroke>
+						<s:LinearGradientStroke weight="6" rotation="90">
+							<s:GradientEntry color="0x323232" alpha="0.8"/>
+							<s:GradientEntry color="0x336699" alpha="0.8"/>
+						</s:LinearGradientStroke>
+					</s:stroke>
+					<s:fill>
+						<s:RadialGradient>
+							<s:entries>
+								<s:GradientEntry color="0x336699"/>
+								<s:GradientEntry color="0x323232"/>
+								<s:GradientEntry color="0xE2E2E2"/>
+							</s:entries>
+						</s:RadialGradient>
+					</s:fill>
+				</s:Rect>
+			</s:Graphic>
+			
+		</s:Group>
+		<s:Label top="165" horizontalCenter="0" width="40%" text="The Rect class is a filled graphic element that draws a rectangle."/>
+	</s:Panel>
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/fxg/RichTextExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/fxg/RichTextExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/fxg/RichTextExample.mxml
new file mode 100644
index 0000000..f7aacd3
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/fxg/RichTextExample.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">
+	
+	<s:Panel title="RichText Sample" width="100%" height="100%" skinClass="skins.TDFPanelSkin">
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="8" paddingRight="8" paddingTop="8"/>
+		</s:layout>
+		<s:Group left="10" right="10" top="10" bottom="10">
+			<s:RichText x="0" y="0" width="75" fontFamily="Times" fontSize="15" textRotation="rotate90">
+				<s:content>Hello World!</s:content>
+			</s:RichText>
+			
+			<s:Group x="100" y="0">
+				<s:RichText width="100" textAlign="justify" paddingTop="5" paddingLeft="5" paddingRight="5" paddingBottom="5">
+					<s:content>Hello World! This is a justified paragraph of text in a RichText control. It has a border around it drawn by a Rect inside a Group.</s:content>
+				</s:RichText>
+				<s:Rect width="100%" height="100%">
+					<s:stroke>
+						<s:SolidColorStroke color="blue"/>
+					</s:stroke>
+				</s:Rect>
+			</s:Group>
+			
+			<s:Group x="225" y="0" >
+				<s:RichText width="140" height="120" columnCount="2" columnGap="10">
+					<s:content><s:span fontWeight="bold">Hello World!</s:span> This is a paragraph of text in 2 columns. It is about 20 words long, which should be enough to cause a few line breaks.</s:content>
+				</s:RichText>
+				<s:Rect width="100%" height="100%">
+					<s:stroke>
+						<s:SolidColorStroke color="blue"/>
+					</s:stroke>
+				</s:Rect>
+			</s:Group>
+		</s:Group>
+		<s:Label width="270" color="0x323232" text="RichText is a low-level UIComponent that can display one or more lines of richly-formatted text and embedded images. For performance reasons, it does not support scrolling, selection, editing, clickable hyperlinks, or images loaded from URLs. If you need those capabilities, see the RichEditableText class."/>
+	</s:Panel>
+
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/fxg/StaticFXGExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/fxg/StaticFXGExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/fxg/StaticFXGExample.mxml
new file mode 100644
index 0000000..37b9be0
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/fxg/StaticFXGExample.mxml
@@ -0,0 +1,51 @@
+<?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:fxg="*" viewSourceURL="srcview/index.html">
+	
+	
+	<s:Panel width="100%" height="100%"
+			 title="Static FXG Sample"
+			 skinClass="skins.TDFPanelSkin">
+		<s:Label verticalAlign="justify" color="#323232" x="10" y="30" width="200"
+					  text="You can use a static file of fxg within your MXML. You include the inline
+component as shown here."/>
+					  		
+		<fxg:OrangeCrayonStar id="crayonStar" right="160"/>
+		
+		<s:VGroup right="180" bottom="20">
+				<s:VGroup bottom="100">
+					<s:HSlider id="star_width" maximum="400" change="crayonStar.width=star_width.value" 
+							   horizontalCenter="-90" y="250" />
+					<s:Label horizontalCenter="-90" y="269" text="width"/>
+				</s:VGroup>
+				<s:VGroup bottom="60">
+					<s:HSlider id="star_height" maximum="400" change="crayonStar.height=star_height.value" 
+							   horizontalCenter="90" y="250" />
+					<s:Label horizontalCenter="90" y="269" text="height"/>	
+				</s:VGroup>	
+			
+		</s:VGroup>
+	</s:Panel>
+	
+	
+</s:Application>

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

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/fxg/assets/ApacheFlexLogo.png
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/fxg/assets/ApacheFlexLogo.png b/TourDeFlex/TourDeFlex3/src/spark/fxg/assets/ApacheFlexLogo.png
new file mode 100644
index 0000000..4ff037f
Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/fxg/assets/ApacheFlexLogo.png differ

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/fxg/skins/TDFPanelSkin.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/fxg/skins/TDFPanelSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/fxg/skins/TDFPanelSkin.mxml
new file mode 100644
index 0000000..4b06e54
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/fxg/skins/TDFPanelSkin.mxml
@@ -0,0 +1,170 @@
+<?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.
+
+-->
+
+
+<!--- Custom Spark Panel Skin created for Tour de Flex.  
+
+@langversion 3.0
+@playerversion Flash 10
+@playerversion AIR 1.5
+@productversion Flex 4
+-->
+<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled="0.5"
+			 blendMode.disabled="layer">
+	
+	<fx:Metadata>
+		<![CDATA[ 
+		/** 
+		* @copy spark.skins.spark.ApplicationSkin#hostComponent
+		*/
+		[HostComponent("spark.components.Panel")]
+		]]>
+	</fx:Metadata> 
+	
+	<fx:Script>
+		/* Define the skin elements that should not be colorized. 
+		For panel, border and title backround are skinned, but the content area and title text are not. */
+		static private const exclusions:Array = ["background", "titleDisplay", "contentGroup", "bgFill"];
+		
+		/** 
+		 * @copy spark.skins.SparkSkin#colorizeExclusions
+		 */     
+		override public function get colorizeExclusions():Array {return exclusions;}
+		
+		/* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
+		static private const contentFill:Array = [];
+		
+		/**
+		 * @inheritDoc
+		 */
+		override public function get contentItems():Array {return contentFill};
+	</fx:Script>
+	
+	<s:states>
+		<s:State name="normal" />
+		<s:State name="disabled" />
+		<s:State name="normalWithControlBar" />
+		<s:State name="disabledWithControlBar" />
+	</s:states>
+	
+	<!-- drop shadow -->
+	<s:RectangularDropShadow id="shadow" blurX="20" blurY="20" alpha="0.32" distance="11" 
+							 angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/>
+	
+	<!-- layer 1: border -->
+	<s:Rect left="0" right="0" top="0" bottom="0">
+		<s:stroke>
+			<s:SolidColorStroke color="0" alpha="0.50" weight="1" />
+		</s:stroke>
+	</s:Rect>
+	
+	
+	<!-- layer 2: background fill -->
+	<s:Rect left="0" right="0" bottom="0" height="15">
+		<s:fill>
+			<s:LinearGradient rotation="90">
+				<s:GradientEntry color="0xE2E2E2" />
+				<s:GradientEntry color="0x000000" />
+			</s:LinearGradient>
+		</s:fill>
+	</s:Rect>
+	
+	<!-- layer 3: contents -->
+	<!--- contains the vertical stack of titlebar content and controlbar -->
+	<s:Group left="1" right="1" top="1" bottom="1" >
+		<s:layout>
+			<s:VerticalLayout gap="0" horizontalAlign="justify" />
+		</s:layout>
+		
+		<s:Group id="topGroup" >
+			<!-- layer 0: title bar fill -->
+			<!-- Note: We have custom skinned the title bar to be solid black for Tour de Flex -->
+			<s:Rect id="tbFill" left="0" right="0" top="0" bottom="1" >
+				<s:fill>
+					<s:SolidColor color="0x000000" />
+				</s:fill>
+			</s:Rect>
+			
+			<!-- layer 1: title bar highlight -->
+			<s:Rect id="tbHilite" left="0" right="0" top="0" bottom="0" >
+				<s:stroke>
+					<s:LinearGradientStroke rotation="90" weight="1">
+						<s:GradientEntry color="0xEAEAEA" />
+						<s:GradientEntry color="0xD9D9D9" />
+					</s:LinearGradientStroke>
+				</s:stroke>
+			</s:Rect>
+			
+			<!-- layer 2: title bar divider -->
+			<s:Rect id="tbDiv" left="0" right="0" height="1" bottom="0">
+				<s:fill>
+					<s:SolidColor color="0xC0C0C0" />
+				</s:fill>
+			</s:Rect>
+			
+			<!-- layer 3: text -->
+			<!--- Defines the appearance of the PanelSkin class's title bar. -->
+			<!-- Note: The title text display has been slightly modified for Tour de Flex. -->
+			<s:Label id="titleDisplay" lineBreak="explicit"
+						  left="9" top="1" bottom="0" minHeight="30"
+						  verticalAlign="middle" fontWeight="bold" color="#E2E2E2">
+			</s:Label>
+		</s:Group>
+		
+		<!--
+		Note: setting the minimum size to 0 here so that changes to the host component's
+		size will not be thwarted by this skin part's minimum size.   This is a compromise,
+		more about it here: http://bugs.adobe.com/jira/browse/SDK-21143
+		-->
+		<s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0">
+		</s:Group>
+		
+		<s:Group id="bottomGroup" minWidth="0" minHeight="0"
+				 includeIn="normalWithControlBar, disabledWithControlBar" >
+			
+			<!-- layer 0: control bar background -->
+			<!-- Note: We are skinning this to be the gradient in case we do specify control
+			bar content, but it will only display if there's a controlBarContent
+			property specified.-->
+			<s:Rect left="0" right="0" bottom="0" top="0" height="15">
+				<s:fill>
+					<s:LinearGradient rotation="90">
+						<s:GradientEntry color="0xE2E2E2" />
+						<s:GradientEntry color="0x000000" />
+					</s:LinearGradient>
+				</s:fill>
+			</s:Rect>
+			
+			<!-- layer 1: control bar divider line -->
+			<s:Rect left="0" right="0" top="0" height="1" >
+				<s:fill>
+					<s:SolidColor color="0xCDCDCD" />
+				</s:fill>
+			</s:Rect>
+			
+			<!-- layer 2: control bar -->
+			<s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="0" minWidth="0" minHeight="0">
+				<s:layout>
+					<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+				</s:layout>
+			</s:Group>
+		</s:Group>
+	</s:Group>
+</s:SparkSkin>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCollator2Example.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCollator2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCollator2Example.mxml
new file mode 100644
index 0000000..815f269
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCollator2Example.mxml
@@ -0,0 +1,100 @@
+<?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%" creationComplete="compareStrings()">
+	<fx:Style>
+		@namespace s "library://ns.adobe.com/flex/spark";
+		@namespace mx "library://ns.adobe.com/flex/mx";
+		s|Label {
+			color: #FFFFFF;
+			font-weight: bold;
+		}
+		#titleL {
+			font-size: 20;
+		}
+		s|ComboBox {
+			alternating-item-colors: #424242;
+		}
+		s|Form {
+			background-color: #424242;
+		}
+		
+	</fx:Style>
+	<fx:Script>
+		<![CDATA[
+			import mx.collections.ArrayCollection;
+			[Bindable]
+			private var _locales:ArrayCollection = new ArrayCollection(['en-US','de-DE','ja-JP','ru-RU','zh-CN','fr-FR']);
+			
+			private function compareStrings():void {
+				if(firstTI.text != '' && secondTI.text != '') {
+					switch (sortCollator.compare(firstTI.text,secondTI.text)) {
+						case 1:
+							operatorL.text = '>';
+							break;
+						case 0:
+							operatorL.text = '=';
+							break;
+						case -1:
+							operatorL.text = '<';
+							break;
+						default:
+							operatorL.text = ' ';
+					}
+				}
+			}
+		]]>
+	</fx:Script>
+	<fx:Declarations>
+		<!-- Place non-visual elements (e.g., services, value objects) here -->
+		<s:SortingCollator id="sortCollator" locale="{localeCB.selectedItem}"/>
+	</fx:Declarations>
+	<s:Scroller width="100%" height="100%">
+		<s:Group>
+			<s:Form>
+				<s:Label id="titleL" text="Spark Collator"/>
+				<s:Label text="Compare two strings by using SortingCollator"/>
+				<s:Spacer height="15"/>
+				
+				<s:FormItem label="Locales:" toolTip="Select a locale for the collator instance.">
+					<s:ComboBox id="localeCB" dataProvider="{_locales}" selectedIndex="5" change="compareStrings()"/>
+				</s:FormItem>
+				<s:FormItem label="Collator Options:" toolTip="Set properties for the collator instance.">
+					<s:HGroup>
+						<s:CheckBox id="ignoreCaseCB" label="ignoreCase" change="sortCollator.ignoreCase = ignoreCaseCB.selected;compareStrings()"/>
+						<s:CheckBox id="ignDiacriticsCB" label="ignoreDiacritics" change="sortCollator.ignoreDiacritics = ignDiacriticsCB.selected;compareStrings()"/>
+						<s:CheckBox id="ignSymbolsCB" label="ignoreSymbols" change="sortCollator.ignoreSymbols = ignSymbolsCB.selected;compareStrings()"/>
+						<s:CheckBox id="ignKanaTypeCB" label="ignoreKanaType" change="sortCollator.ignoreKanaType = ignKanaTypeCB.selected;compareStrings()"/>
+						<s:CheckBox id="ignCharacterWidthCB" label="ignoreCharacterWidth" change="sortCollator.ignoreCharacterWidth = ignCharacterWidthCB.selected;compareStrings()"/>
+					</s:HGroup>
+				</s:FormItem>
+				<s:FormItem label="Strings:" toolTip="Input two strings and find out their compare result.">
+					<s:HGroup>
+						<s:TextInput id="firstTI" text="coté" change="compareStrings()"/>
+						<s:Label id="operatorL" text=" " fontSize="15"/>
+						<s:TextInput id="secondTI" text="côte" change="compareStrings()"/>
+					</s:HGroup>
+				</s:FormItem>
+			</s:Form>
+		</s:Group>
+	</s:Scroller>
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCollatorExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCollatorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCollatorExample.mxml
new file mode 100644
index 0000000..96af06a
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCollatorExample.mxml
@@ -0,0 +1,165 @@
+<?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%" creationComplete="matchRB_clickHandler()">
+	<fx:Style>
+		@namespace s "library://ns.adobe.com/flex/spark";
+		@namespace mx "library://ns.adobe.com/flex/mx";
+		s|Label {
+			color: #FFFFFF;
+			font-weight: bold;
+		}
+		#titleL {
+			font-size: 20;
+		}
+		s|ComboBox {
+			alternating-item-colors: #424242;
+		}
+		
+		s|Form {
+			background-color: #424242;
+		}
+		
+		s|List {
+			alternating-item-colors: #424242;
+		}
+	</fx:Style>
+	
+	<fx:Script>
+		<![CDATA[
+			import mx.collections.ArrayCollection;
+			
+			[Bindable]
+			private var _locales:ArrayCollection = new ArrayCollection(['en-US','de-DE','ja-JP','ru-RU','zh-CN','fr-FR']);
+			[Bindable]
+			private var _strArrColl:ArrayCollection = new ArrayCollection(['ö','Ö','A','a.bc','a','Ä','côte','ä','A','ア','ァ','あ','中','abc','WO','a','ae','Æ','côté','coté','Ô','OE','Œ','ぁ','wo']);
+			[Bindable]
+			private var _resultArrColl:ArrayCollection = new ArrayCollection();
+			[Bindable]
+			private var _collatorInstance:*;
+			
+			protected function sortRB_clickHandler():void
+			{
+				//create sortingCollator instance
+				_collatorInstance = new SortingCollator();
+				_collatorInstance = sortingCollator;
+				
+				sortStr();
+			}
+			
+			protected function matchRB_clickHandler():void
+			{
+				//create sortingCollator instance
+				_collatorInstance = new MatchingCollator();
+				_collatorInstance = matchingCollator;
+				
+				sortStr();
+			}
+			
+			private function sortStr():void 
+			{
+				//sort strings in original arrayCollection
+				_strArrColl.source.sort(_collatorInstance.compare);
+				_strArrColl.refresh();
+				
+				//format above sorted array to let those strings which with same value show in one line within the list
+				_resultArrColl.source = showResult(_strArrColl.source);
+				_resultArrColl.refresh();
+			}
+			
+			//function that make strings with same value show in the same line
+			private function showResult(arr:Array):Array 
+			{
+				var indexVal:String = arr[0];
+				//the array used to put same strings into one element
+				var reVal:Array = new Array();
+				var j:int = 0;
+				
+				reVal[j]='';
+				
+				for(var i:int = 0; i<arr.length; i++)
+				{
+					if(_collatorInstance.compare(arr[i],indexVal) == 0)
+					{
+						reVal[j] += ' ' + arr[i];
+					}
+					else
+					{
+						indexVal = arr[i];
+						j++;
+						reVal[j]='';
+						i--;
+					}
+				}
+				return reVal;
+			}
+		]]>
+	</fx:Script>
+	<fx:Declarations>
+		<!-- Place non-visual elements (e.g., services, value objects) here -->
+		<s:SortingCollator id="sortingCollator"/>
+		<s:MatchingCollator id="matchingCollator"/>
+	</fx:Declarations>
+	<s:layout>
+		<s:VerticalLayout/>
+	</s:layout>
+	
+	<s:Scroller id="scroller" width="100%" height="100%">
+		<s:Group id="myGroup">
+			<s:Form id="myForm">
+				<s:Label id="titleL" text="Spark Collator"/>
+				<s:Label text="Customize Collator options and find out the string sorting results: "/>
+				<s:Spacer height="15"/>
+				
+				<s:FormItem label="Collator Type:" toolTip="Please select a Collator type first!">
+					<s:HGroup>
+						<s:RadioButton id="sortRB" groupName="collatorType" label="SortingCollator" click="sortRB_clickHandler()"/>
+						<s:RadioButton id="matchRB" groupName="collatorType" label="MatchingCollator" selected="true" click="matchRB_clickHandler()"/>
+					</s:HGroup>
+				</s:FormItem>
+				<s:FormItem label="Locale:">
+					<s:ComboBox id="localeCB" dataProvider="{_locales}" selectedIndex="0" 
+								change="_collatorInstance.setStyle('locale',localeCB.selectedItem); sortStr()"/>
+				</s:FormItem>
+				<s:FormItem label="Collator Options:" toolTip="Customize below options to see the sorting result.">
+					<s:CheckBox id="ignCaseCB" label="ignoreCase" selected="{_collatorInstance.ignoreCase}" 
+								change="_collatorInstance.ignoreCase = ignCaseCB.selected; sortStr()"/>
+					<s:CheckBox id="ignDiacriticsCB" label="ignoreDiacritics" selected="{_collatorInstance.ignoreDiacritics}" 
+								change="_collatorInstance.ignoreDiacritics = ignDiacriticsCB.selected; sortStr()"/>
+					<s:CheckBox id="ignSymbolsCB" label="ignoreSymbols" selected="{_collatorInstance.ignoreSymbols}" 
+								change="_collatorInstance.ignoreSymbols = ignSymbolsCB.selected; sortStr()"/>
+					<s:CheckBox id="ignKanaTypeCB" label="ignoreKanaType" selected="{_collatorInstance.ignoreKanaType}" 
+								change="_collatorInstance.ignoreKanaType = ignKanaTypeCB.selected; sortStr()"/>
+					<s:CheckBox id="ignCharacterWidthCB" label="ignoreCharacterWidth" selected="{_collatorInstance.ignoreCharacterWidth}" 
+								change="_collatorInstance.ignoreCharacterWidth = ignCharacterWidthCB.selected; sortStr()"/>
+				</s:FormItem>
+				<s:Label text="============================================================================"/>
+				<s:HGroup>
+					<s:FormItem label="Sorting Result:">
+						<s:List id="sCltResult" dataProvider="{_resultArrColl}" toolTip="Strings that are equal will show within one line."/>
+					</s:FormItem>
+				</s:HGroup>
+			</s:Form>
+		</s:Group>
+	</s:Scroller>
+	
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyFormatter2Example.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyFormatter2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyFormatter2Example.mxml
new file mode 100644
index 0000000..1c24727
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyFormatter2Example.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"
+			   width="100%" height="100%">
+	<fx:Style>
+		@namespace s "library://ns.adobe.com/flex/spark";
+		@namespace mx "library://ns.adobe.com/flex/mx";
+		s|Label {
+			color: #FFFFFF;
+			font-weight: bold;
+		}
+		#titleL {
+			font-size: 20;
+		}
+		s|ComboBox {
+			alternating-item-colors: #424242;
+		}
+		
+		s|Form {
+			background-color: #424242;
+		}
+	</fx:Style>
+	<fx:Script>
+		<![CDATA[
+			import mx.collections.ArrayCollection;
+			[Bindable]
+			private var _locales:ArrayCollection = new ArrayCollection(['en-US','de-DE','ja-JP','ru-RU','ar-SA','zh-CN','fr-FR']);
+		]]>
+	</fx:Script>
+	<fx:Declarations>
+		<!-- Place non-visual elements (e.g., services, value objects) here -->
+		<s:CurrencyFormatter id="cf"/>
+	</fx:Declarations>
+	<s:Scroller width="100%" height="100%">
+		<s:Group>
+			<s:Form>
+				<s:Label id="titleL" text="Spark CurrencyFormatter"/>
+				<s:Label text="Format a currency number by using spark CurrencyFormatter"/>
+				<s:Spacer height="15"/>
+				<s:FormItem label="Locales">
+					<s:ComboBox id="localeCB" dataProvider="{_locales}" selectedIndex="0" updateComplete="cf.setStyle('locale',localeCB.selectedItem)"/>
+				</s:FormItem>
+				<s:FormItem label="Please enter a currency number: ">
+					<s:TextInput id="inputTI" text="12345"/>
+				</s:FormItem>
+				<s:FormItem label="Format result: ">
+					<s:Label id="resultL" text="{cf.format(inputTI.text)}"/>
+				</s:FormItem>
+			</s:Form>
+		</s:Group>
+	</s:Scroller>
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyFormatterExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyFormatterExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyFormatterExample.mxml
new file mode 100644
index 0000000..b198370
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyFormatterExample.mxml
@@ -0,0 +1,112 @@
+<?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:Style>
+		@namespace s "library://ns.adobe.com/flex/spark";
+		@namespace mx "library://ns.adobe.com/flex/mx";
+		s|Label {
+			color: #FFFFFF;
+			font-weight: bold;
+		}
+		#titleL {
+			font-size: 20;
+		}
+		s|ComboBox {
+			alternating-item-colors: #424242;
+		}
+		
+		s|Form {
+			background-color: #424242;
+		}
+	</fx:Style>
+	
+	<fx:Script>
+		<![CDATA[
+			import mx.collections.ArrayCollection;
+			
+			[Bindable]
+			private var locales:ArrayCollection = new ArrayCollection(['en-US','de-DE','ja-JP','ru-RU','ar-SA','zh-CN','fr-FR']);
+			[Bindable]
+			private var groupPatternArrColl:ArrayCollection = new ArrayCollection(['3;*', '1;*', '3;2;*', '3;2;1;*','2;1']);
+			
+			protected function formatCurr():void
+			{
+				cf.useCurrencySymbol = false;
+				resultL.text = cf.format(inputTI.text);
+				cf.useCurrencySymbol = true;
+				resultSymbolL.text = cf.format(inputTI.text);
+			}
+			
+		]]>
+	</fx:Script>
+	<fx:Declarations>
+		<!-- Place non-visual elements (e.g., services, value objects) here -->
+		<s:CurrencyFormatter id="cf" locale="{localeCB.selectedItem}"/>
+		<s:CurrencyFormatter id="cf_default" locale="{localeCB.selectedItem}"/>
+	</fx:Declarations>
+	<s:layout>
+		<s:VerticalLayout/>
+	</s:layout>
+	<s:Scroller id="scroller" width="100%" height="100%">
+		<s:Group>
+			<s:Form>
+				<s:Label id="titleL" text="Spark CurrencyFormatter"/>
+				<s:Label text="Select a locale to see the property value and formatted currency: "/>
+				<s:Spacer height="15"/>
+				<s:FormItem label="Locale:">
+					<s:ComboBox id="localeCB" dataProvider="{locales}" selectedIndex="0" updateComplete="formatCurr()"/>
+				</s:FormItem>
+				<s:FormItem label="Input a number to format:">
+					<s:TextInput id="inputTI" text="12345" change="formatCurr()"/>
+				</s:FormItem>
+				<s:FormItem label="Fraction Digits: (default: {cf_default.fractionalDigits})">
+					<s:NumericStepper id="fdNS" maximum="10" minimum="0" change="cf.fractionalDigits = fdNS.value;formatCurr()"/>
+				</s:FormItem>
+				<s:FormItem label="Decimal Separator: (default: {cf_default.decimalSeparator})">
+					<s:TextInput id="dsTI" change="cf.decimalSeparator = dsTI.text;formatCurr()"/>
+				</s:FormItem>
+				<s:FormItem label="Grouping Pattern: (default: {cf_default.groupingPattern})">
+					<s:ComboBox id="gpCB" dataProvider="{groupPatternArrColl}" change="cf.groupingPattern = gpCB.selectedItem;formatCurr()"/>
+				</s:FormItem>
+				<s:FormItem label="Grouping Separator: (default: {cf_default.groupingSeparator})">
+					<s:TextInput id="gsTI" change="cf.groupingSeparator = gsTI.text;formatCurr()"/>
+				</s:FormItem>
+				<s:FormItem label="Negative Currency Format: (default: {cf_default.negativeCurrencyFormat})">
+					<s:NumericStepper id="ncfNS" minimum="0" maximum="15" change="cf.negativeCurrencyFormat = ncfNS.value;formatCurr()"/>
+				</s:FormItem>
+				<s:FormItem label="Positive Currency Format: (default: {cf_default.positiveCurrencyFormat})">
+					<s:NumericStepper id="pcfNS" middleClick="0" maximum="3" change="cf.positiveCurrencyFormat = pcfNS.value;formatCurr()"/>
+				</s:FormItem>
+				<s:Label text="==================================================================="/>
+				<s:FormItem label="Formatted Currency with ISO code is:">
+					<s:Label id="resultL"/>
+				</s:FormItem>
+				<s:FormItem label="Formatted Currency with currency symbol is:">
+					<s:Label id="resultSymbolL"/>
+				</s:FormItem>
+			</s:Form>
+		</s:Group>
+	</s:Scroller>
+	
+	
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyValidator2Example.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyValidator2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyValidator2Example.mxml
new file mode 100644
index 0000000..05f17de
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyValidator2Example.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"
+			   width="100%" height="100%">
+	<fx:Style>
+		@namespace s "library://ns.adobe.com/flex/spark";
+		@namespace mx "library://ns.adobe.com/flex/mx";
+		s|Label {
+			color: #FFFFFF;
+			font-weight: bold;
+		}
+		#titleL {
+			font-size: 20;
+		}
+		s|ComboBox {
+			alternating-item-colors: #424242;
+		}
+		s|Form {
+			background-color: #424242;
+		}
+	</fx:Style>
+	<fx:Script>
+		<![CDATA[
+			import mx.collections.ArrayCollection;
+			[Bindable]
+			private var _locales:ArrayCollection = new ArrayCollection(['en-US','de-DE','ja-JP','ru-RU','zh-CN','fr-FR']);
+		]]>
+	</fx:Script>
+	<fx:Declarations>
+		<!-- Place non-visual elements (e.g., services, value objects) here -->
+		<s:CurrencyValidator id="cv" source="{inputTI}" property="text" 
+							 maxValue="100" domain="int" locale="{localeCB.selectedItem}"/>
+	</fx:Declarations>
+	<s:Scroller width="100%" height="100%">
+		<s:Group>
+			<s:Form>
+				<s:Label id="titleL" text="Spark CurrencyValidator"/>
+				<s:Label text="Validate a currency number by using Spark CurrencyValidator"/>
+				<s:Spacer height="15"/>
+				<s:FormItem label="Locales:">
+					<s:ComboBox id="localeCB" dataProvider="{_locales}" selectedIndex="0"/>
+				</s:FormItem>
+				<s:FormItem label="Enter a currency number to validate: "
+							toolTip="The number should be an integer and less than 100">
+					<s:TextInput id="inputTI" text="{cv.currencySymbol}"
+								 toolTip="It shows the currency symbol of current locale already, please continue enter numbers to validate. 
+								 Make focus out of the text input to validate the number."/>
+				</s:FormItem>
+			</s:Form>
+		</s:Group>
+	</s:Scroller>
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyValidatorExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyValidatorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyValidatorExample.mxml
new file mode 100644
index 0000000..c988d93
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyValidatorExample.mxml
@@ -0,0 +1,125 @@
+<?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:Style>
+		@namespace s "library://ns.adobe.com/flex/spark";
+		@namespace mx "library://ns.adobe.com/flex/mx";
+		s|Label {
+			color: #FFFFFF;
+			font-weight: bold;
+		}
+		#titleL {
+			font-size: 20;
+		}
+		s|ComboBox {
+			alternating-item-colors: #424242;
+		}
+		
+		s|Form {
+			background-color: #424242;
+		}
+	</fx:Style>
+	
+	<fx:Script>
+		<![CDATA[
+			import mx.collections.ArrayCollection;
+			import mx.events.FlexEvent;
+			
+			import spark.validators.supportClasses.GlobalizationValidatorBase;
+			
+			[Bindable]
+			private var _locales:ArrayCollection = new ArrayCollection(['en-US','de-DE','ja-JP','ru-RU','zh-CN','fr-FR']);
+			
+			protected function localeCB_updateCompleteHandler(event:FlexEvent):void
+			{
+				this.setStyle('locale',localeCB.selectedItem);
+			}
+			
+			protected function button1_clickHandler(event:MouseEvent):void
+			{
+				var _validatorsArr:Array = [cv1,cv2,cv3,cv4,cv5];
+				
+				GlobalizationValidatorBase.validateAll(_validatorsArr);
+			}
+			
+		]]>
+	</fx:Script>
+	<fx:Declarations>
+		<!-- Place non-visual elements (e.g., services, value objects) here -->
+		
+		<!--Click Tab key to validate the number-->
+		<s:CurrencyValidator id="cv1" source="{currTI1}" property="text"/>
+		<s:CurrencyValidator id="cv2" source="{currTI2}" property="text"/>
+		<s:CurrencyValidator id="cv3" source="{currTI3}" property="text" fractionalDigits="2"/>
+		<s:CurrencyValidator id="cv4" source="{currTI4}" property="text" minValue="20" maxValue="200"/>
+		<s:CurrencyValidator id="cv5" source="{currTI5}" property="text" domain="int"/>
+	</fx:Declarations>
+	<s:layout>
+		<s:VerticalLayout/>
+	</s:layout>
+	<s:Scroller id="scroller" width="100%" height="100%">
+		<s:Group>
+			<s:Form>
+				<s:Label id="titleL" text="Spark CurrencyValidator"/>
+				<s:Label text="Create some criterions and validate the input number: "/>
+				<s:Spacer height="15"/>
+				<s:FormItem label="Locale:">
+					<s:ComboBox id="localeCB" dataProvider="{_locales}" selectedIndex="0" updateComplete="localeCB_updateCompleteHandler(event)"/>
+				</s:FormItem>
+				<s:Label text="============================================================================"/>
+				<s:FormItem label="Currency symbol and ISO code based on current locale are:">
+					<s:HGroup>
+						<s:Label id="symbolL" text="Currency symbol:  {cv1.currencySymbol}"/>
+						<s:Label id="isoL" text="Currency ISO code:  {cv1.currencyISOCode}"/>
+					</s:HGroup>
+				</s:FormItem>
+				<s:FormItem label="Please enter an integer currency number with currency symbol:">
+					<s:TextInput id="currTI1" text="{cv1.currencySymbol}" 
+								 toolTip="Here is the correct currency symbol of current locale, please continue enter numbers to validate"/>
+				</s:FormItem>
+				<s:FormItem label="Please enter an integer currency number with currency ISO code:">
+					<s:TextInput id="currTI2" text="{cv1.currencyISOCode}" 
+								 toolTip="Here is the correct currency ISO code of current locale, please continue enter numbers to validate"/>
+				</s:FormItem>
+				<s:FormItem label="Please enter a currency number with at most two fractional digits:">
+					<s:TextInput id="currTI3" 
+								 toolTip="decimal separator of current locale is {cv3.decimalSeparator}"/>
+				</s:FormItem>
+				<s:FormItem label="Please enter a currency number between 20 and 200:">
+					<s:TextInput id="currTI4"/>
+				</s:FormItem>
+				<s:FormItem label="Please enter an integer currency number:">
+					<s:TextInput id="currTI5"/>
+				</s:FormItem>
+				<s:FormItem label="Click the button to validate all inputted currency number:">
+					<s:HGroup>
+						<s:Button label="Validate All" click="button1_clickHandler(event)"/>
+						<s:Label id="resultL"/>
+					</s:HGroup>
+				</s:FormItem>
+			</s:Form>
+		</s:Group>
+	</s:Scroller>
+	
+	
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkDateTimeFormatter2Example.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkDateTimeFormatter2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkDateTimeFormatter2Example.mxml
new file mode 100644
index 0000000..4761dd1
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkDateTimeFormatter2Example.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"
+			   width="100%" height="100%">
+	<fx:Style>
+		@namespace s "library://ns.adobe.com/flex/spark";
+		@namespace mx "library://ns.adobe.com/flex/mx";
+		s|Label {
+			color: #FFFFFF;
+			font-weight: bold;
+		}
+		#titleL {
+			font-size: 20;
+		}
+		s|ComboBox {
+			alternating-item-colors: #424242;
+		}
+		
+		s|Form {
+			background-color: #424242;
+		}
+	</fx:Style>
+	<fx:Script>
+		<![CDATA[
+			import mx.collections.ArrayCollection;
+			
+			[Bindable]
+			private var locales:ArrayCollection = new ArrayCollection(['en-US','de-DE','ja-JP','ru-RU','ar-SA','zh-CN']);
+		]]>
+	</fx:Script>
+	<fx:Declarations>
+		<!-- Place non-visual elements (e.g., services, value objects) here -->
+		<s:DateTimeFormatter id="dtf" locale="{localeCB.selectedItem}"/>
+	</fx:Declarations>
+	<s:Scroller width="100%" height="100%">
+		<s:Group>
+			<s:Form>
+				<s:Label id="titleL" text="Spark DateTimeFormatter"/>
+				<s:Label text="Format a date by using Spark DateTimeFormatter: "/>
+				<s:Spacer height="15"/>
+				
+				<s:FormItem label="Locales:">
+					<s:ComboBox id="localeCB" dataProvider="{locales}" selectedIndex="0"/>
+				</s:FormItem>
+				<s:FormItem label="Choose a date:">
+					<mx:DateChooser id="dateC" showToday="false"/>
+				</s:FormItem>
+				<s:FormItem label="Format result is:">
+					<s:Label id="resultL" text="{dtf.format(dateC.selectedDate)}"/>
+				</s:FormItem>
+			</s:Form>
+		</s:Group>
+	</s:Scroller>
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkDateTimeFormatterExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkDateTimeFormatterExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkDateTimeFormatterExample.mxml
new file mode 100644
index 0000000..15733c4
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkDateTimeFormatterExample.mxml
@@ -0,0 +1,101 @@
+<?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:Style>
+		@namespace s "library://ns.adobe.com/flex/spark";
+		@namespace mx "library://ns.adobe.com/flex/mx";
+		s|Label {
+			color: #FFFFFF;
+			font-weight: bold;
+		}
+		#titleL {
+			font-size: 20;
+		}
+		s|ComboBox {
+			alternating-item-colors: #424242;
+		}
+		
+		s|Form {
+			background-color: #424242;
+		}
+	</fx:Style>
+	
+	<fx:Script>
+		<![CDATA[
+			import mx.collections.ArrayCollection;
+			
+			[Bindable]
+			private var locales:ArrayCollection = new ArrayCollection(['en-US','de-DE','ja-JP','ru-RU','ar-SA','zh-CN']);
+			[Bindable]
+			private var dateTimePatternAryColl:ArrayCollection = new ArrayCollection(['MM-yyyy', 'MM/dd/yyyy', 'dd','hh:mm a','MM/dd/yy hh:mm:ss a', 'hh:mm:ss', 'EEEE, MMMM dd, yyyy h:mm:ss a']);
+			
+			//format the date which is selected in calender
+			protected function formatDate():void
+			{
+				resultL.text = (dateField.selectedDate != null)
+					? dtf.format(dateField.selectedDate):dtf.format(new Date());
+			}
+		]]>
+	</fx:Script>
+	<fx:Declarations>
+		<!-- Place non-visual elements (e.g., services, value objects) here -->
+		<s:DateTimeFormatter id="dtf"/>
+	</fx:Declarations>
+	<s:layout>
+		<s:VerticalLayout/>
+	</s:layout>
+	<s:Scroller id="scroller" width="100%" height="100%">
+		<s:Group>
+			<s:Form>
+				<s:Label id="titleL" text="Spark DateTimeFormatter"/>
+				<s:Label text="Select a locale to see the formatted date, weekday names and month names: "/>
+				<s:Spacer height="15"/>
+				
+				<s:FormItem label="Locale: ">
+					<s:ComboBox id="localeCB" dataProvider="{locales}" selectedIndex="0" updateComplete="dtf.setStyle('locale',localeCB.selectedItem)"/>
+				</s:FormItem>
+				<s:FormItem label="Please select the format of date:">
+					<s:ComboBox id="dtpCB" dataProvider="{dateTimePatternAryColl}" selectedIndex="0" updateComplete="dtf.dateTimePattern=dtpCB.selectedItem"/>
+				</s:FormItem>
+				<s:FormItem label="Please select a date to format:">
+					<mx:DateField id="dateField"/>
+				</s:FormItem>
+				<s:FormItem label="The Weekday Names are:">
+					<s:Label text="{dtf.getWeekdayNames()}"/>
+				</s:FormItem>
+				<s:FormItem label="The Month Names are:">
+					<s:Label text="{dtf.getMonthNames()}"/>
+				</s:FormItem>
+				<s:Label text="     ==========================================================================="/>
+				<s:FormItem label="The formatted result is:">
+					<s:Label id="resultL"/>
+				</s:FormItem>
+				<s:FormItem>
+					<s:Button id="bt" label="Format Date" click="formatDate()"/>
+				</s:FormItem>
+			</s:Form>
+		</s:Group>
+	</s:Scroller>
+	
+	
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkFormatterExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkFormatterExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkFormatterExample.mxml
new file mode 100644
index 0000000..7b92c15
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkFormatterExample.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"
+			   backgroundColor="haloSilver" fontSize="18" locale="{c.selectedItem}">
+	
+	<s:layout>
+		<s:VerticalLayout horizontalAlign="center" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" 
+						  gap="8"/>
+	</s:layout>
+	
+	<fx:Declarations>
+		<s:CurrencyFormatter id="cf" useCurrencySymbol="true"/>
+		<s:DateTimeFormatter id="df"/>
+	</fx:Declarations>
+	
+	<s:Label text="Select a locale to see the formatted currency and date:"/>
+	<s:ComboBox id="c" selectedItem="en-US...">
+		<s:dataProvider>
+			<s:ArrayList>
+				<fx:String>de-DE</fx:String>
+				<fx:String>en-US</fx:String>
+				<fx:String>es-ES</fx:String>
+				<fx:String>fi-FI</fx:String>
+				<fx:String>fr-FR</fx:String>
+				<fx:String>it-IT</fx:String>
+				<fx:String>ja-JP</fx:String>
+				<fx:String>ko-KR</fx:String>
+				<fx:String>nb-NO</fx:String>
+				<fx:String>pt-PT</fx:String>
+				<fx:String>ru-RU</fx:String>
+				<fx:String>zh-CN</fx:String>
+			</s:ArrayList>
+		</s:dataProvider>
+	</s:ComboBox>
+	
+	<s:Label text="{cf.format(12.3)}"/>
+	<s:Label text="{df.format(new Date())}"/>
+	
+</s:Application>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberFormatter2Example.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberFormatter2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberFormatter2Example.mxml
new file mode 100644
index 0000000..fcb52d1
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberFormatter2Example.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" minWidth="955" minHeight="600">
+	<fx:Style>
+		@namespace s "library://ns.adobe.com/flex/spark";
+		@namespace mx "library://ns.adobe.com/flex/mx";
+		s|Label {
+			color: #FFFFFF;
+			font-weight: bold;
+		}
+		#titleL {
+			font-size: 20;
+		}
+		s|ComboBox {
+			alternating-item-colors: #424242;
+		}
+		s|Form {
+			background-color: #424242;
+		}
+	</fx:Style>
+	<fx:Script>
+		<![CDATA[
+			import mx.collections.ArrayCollection;
+			[Bindable]
+			private var locales:ArrayCollection = new ArrayCollection(['en-US','de-DE','ja-JP','ru-RU','ar-SA','zh-CN','fr-FR']);
+		]]>
+	</fx:Script>
+	<fx:Declarations>
+		<!-- Place non-visual elements (e.g., services, value objects) here -->
+		<s:NumberFormatter id="nf" locale="{localeCB.selectedItem}"/>
+	</fx:Declarations>
+	<s:Scroller width="100%" height="100%">
+		<s:Group>
+			<s:Form>
+				<s:Label id="titleL" text="Spark NumberFormatter"/>
+				<s:Label text="Format a number by using spark NumberFormatter"/>
+				<s:Spacer height="15"/>
+				<s:FormItem label="Locales:">
+					<s:ComboBox id="localeCB" dataProvider="{locales}" selectedIndex="0"/>
+				</s:FormItem>
+				<s:FormItem label="Please enter a number:">
+					<s:TextInput id="inputTI" text="12345"/>
+				</s:FormItem>
+				<s:FormItem label="Format result:">
+					<s:Label text="{nf.format(inputTI.text)}"/>
+				</s:FormItem>
+			</s:Form>
+		</s:Group>
+	</s:Scroller>
+</s:Application>