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/10 07:41:12 UTC

[2/2] git commit: [flex-utilities] [refs/heads/develop] - Add i18N spark examples

Add i18N 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/832024b1
Tree: http://git-wip-us.apache.org/repos/asf/flex-utilities/tree/832024b1
Diff: http://git-wip-us.apache.org/repos/asf/flex-utilities/diff/832024b1

Branch: refs/heads/develop
Commit: 832024b1919e939964de40c9edcdd21f922ddf06
Parents: 1830c22
Author: Justin Mclean <jm...@apache.org>
Authored: Sun Aug 10 15:40:55 2014 +1000
Committer: Justin Mclean <jm...@apache.org>
Committed: Sun Aug 10 15:40:55 2014 +1000

----------------------------------------------------------------------
 .../src/spark/i18n/SparkCollator2Example.mxml   | 101 +++++++++++
 .../src/spark/i18n/SparkCollatorExample.mxml    | 166 +++++++++++++++++++
 .../i18n/SparkCurrencyFormatter2Example.mxml    |  71 ++++++++
 .../i18n/SparkCurrencyFormatterExample.mxml     | 112 +++++++++++++
 .../i18n/SparkCurrencyValidator2Example.mxml    |  71 ++++++++
 .../i18n/SparkCurrencyValidatorExample.mxml     | 125 ++++++++++++++
 .../i18n/SparkDateTimeFormatter2Example.mxml    |  73 ++++++++
 .../i18n/SparkDateTimeFormatterExample.mxml     | 101 +++++++++++
 .../i18n/SparkNumberFormatter2Example.mxml      |  69 ++++++++
 .../spark/i18n/SparkNumberFormatterExample.mxml |  97 +++++++++++
 .../i18n/SparkNumberValidator2Example.mxml      |  70 ++++++++
 .../spark/i18n/SparkNumberValidatorExample.mxml | 104 ++++++++++++
 .../i18n/SparkSortandSortField2Example.mxml     |  82 +++++++++
 .../i18n/SparkSortandSortFieldExample.mxml      | 122 ++++++++++++++
 .../src/spark/i18n/SparkStringToolsExample.mxml | 124 ++++++++++++++
 15 files changed, 1488 insertions(+)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/832024b1/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..89f51e1
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCollator2Example.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%" creationComplete="compareStrings()"
+			   viewSourceURL="srcview/index.html">
+	<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/832024b1/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..d69e63d
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCollatorExample.mxml
@@ -0,0 +1,166 @@
+<?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()"
+			   viewSourceURL="srcview/index.html">
+	<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/832024b1/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..6d7cd1b
--- /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%" viewSourceURL="srcview/index.html">
+	<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/832024b1/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..a4bf99a
--- /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%" viewSourceURL="srcview/index.html">
+	<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/832024b1/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..9f22e16
--- /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%" viewSourceURL="srcview/index.html">
+	<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/832024b1/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..d6bc0fa
--- /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%" viewSourceURL="srcview/index.html">
+	<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/832024b1/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..6fcbad9
--- /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%" viewSourceURL="srcview/index.html">
+	<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/832024b1/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..64a0802
--- /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%" viewSourceURL="srcview/index.html">
+	<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/832024b1/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>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/832024b1/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberFormatterExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberFormatterExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberFormatterExample.mxml
new file mode 100644
index 0000000..0c5dfec
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberFormatterExample.mxml
@@ -0,0 +1,97 @@
+<?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%" viewSourceURL="srcview/index.html">
+	<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']);
+		]]>
+	</fx:Script>
+	<fx:Declarations>
+		<!-- Place non-visual elements (e.g., services, value objects) here -->
+		<s:NumberFormatter id="nf"  locale="{localeCB.selectedItem}"/>
+		<s:NumberFormatter id="nf_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 NumberFormatter"/>
+				<s:Label text="Select a locale to see the property value and formatted Number: "/>
+				<s:Spacer height="15"/>
+				
+				<s:FormItem label="Locale:">
+					<s:ComboBox id="localeCB" dataProvider="{locales}" selectedIndex="0"/>
+				</s:FormItem>
+				<s:FormItem label="Input a number to format:">
+					<s:TextInput id="inputTI" text="12345"/>
+				</s:FormItem>
+				<s:FormItem label="Fraction Digits: (default: {nf_default.fractionalDigits})">
+					<s:NumericStepper id="fdNS" maximum="10" minimum="0" change="nf.fractionalDigits = fdNS.value"/>
+				</s:FormItem>
+				<s:FormItem label="Decimal Separator: (default: {nf_default.decimalSeparator})">
+					<s:TextInput id="dsTI" change="nf.decimalSeparator = dsTI.text"/>
+				</s:FormItem>
+				<s:FormItem label="Grouping Pattern: (default: {nf_default.groupingPattern})">
+					<s:ComboBox id="gpCB" dataProvider="{groupPatternArrColl}" change="nf.groupingPattern = gpCB.selectedItem"/>
+				</s:FormItem>
+				<s:FormItem label="Grouping Separator: (default: {nf_default.groupingSeparator})">
+					<s:TextInput id="gsTI" change="nf.groupingSeparator = gsTI.text"/>
+				</s:FormItem>
+				<s:FormItem label="Negative Number Format: (default: {nf_default.negativeNumberFormat})">
+					<s:NumericStepper id="ncfNS" minimum="0" maximum="4" change="nf.negativeNumberFormat = ncfNS.value"/>
+				</s:FormItem>
+				<s:Label text="==================================================================="/>
+				<s:FormItem label="Formatted Number is:">
+					<s:Label id="resultL" text="{nf.format(inputTI.text)}"/>
+				</s:FormItem>
+			</s:Form>
+		</s:Group>
+	</s:Scroller>
+	
+	
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/832024b1/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberValidator2Example.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberValidator2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberValidator2Example.mxml
new file mode 100644
index 0000000..729894c
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberValidator2Example.mxml
@@ -0,0 +1,70 @@
+<?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%" viewSourceURL="srcview/index.html">
+	<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:NumberValidator id="nv" source="{inputTI}" property="text" 
+						   minValue="100" domain="int" locale="{localeCB.selectedItem}"/>
+	</fx:Declarations>
+	<s:Scroller width="100%" height="100%">
+		<s:Group>
+			<s:Form>
+				<s:Label id="titleL" text="Spark NumberValidator"/>
+				<s:Label text="Validate a number by using Spark NumberValidator"/>
+				<s:Spacer height="15"/>
+				<s:FormItem label="Locale:">
+					<s:ComboBox id="localeCB" dataProvider="{locales}" selectedIndex="0"/>
+				</s:FormItem>
+				<s:FormItem label="Enter a number to validate:">
+					<s:TextInput id="inputTI" toolTip="The number should be an integer which greater than 100."/>
+				</s:FormItem>
+			</s:Form>
+		</s:Group>
+	</s:Scroller>
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/832024b1/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberValidatorExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberValidatorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberValidatorExample.mxml
new file mode 100644
index 0000000..d1e0b07
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberValidatorExample.mxml
@@ -0,0 +1,104 @@
+<?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%" viewSourceURL="srcview/index.html">
+	<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']);
+			
+		]]>
+	</fx:Script>
+	<fx:Declarations>
+		<!-- Place non-visual elements (e.g., services, value objects) here -->
+		
+		<!--Click Tab key to validate the number-->
+		<s:NumberValidator id="nv" source="{inputTI}" property="text"/>
+	</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 NumberValidator"/>
+				<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="nv.setStyle('locale',localeCB.selectedItem);"/>
+				</s:FormItem>
+				<s:Label text="==================================================================="/>
+				<s:Label text="     Create some criterions to validate number:" color="#DEB887"/>
+				<s:FormItem label="Max Value:">
+					<s:TextInput id="maxTI" change="nv.maxValue = Number(maxTI.text)"/>
+				</s:FormItem>
+				<s:FormItem label="Min Value:">
+					<s:TextInput id="minTI" change="nv.minValue = Number(minTI.text)"/>
+				</s:FormItem>
+				<s:FormItem label="Fraction Digits:">
+					<s:NumericStepper id="fdNS" maximum="5" minimum="0" change="nv.fractionalDigits = fdNS.value"/>
+				</s:FormItem>
+				<s:FormItem label="Decimal Separator:">
+					<s:TextInput id="dsTI" change="nv.decimalSeparator = dsTI.text"/>
+				</s:FormItem>
+				<s:FormItem label="Grouping Separator:">
+					<s:TextInput id="gsTI" change="nv.groupingSeparator = gsTI.text"/>
+				</s:FormItem>
+				<s:Label text="     Customize error messages:" color="#DEB887"
+						 toolTip="Spark NumberValidator provide the ability to let user customize all the error messages."/>
+				<s:FormItem label="Greater Than Max Error:" toolTip="Error message when the value exceeds the max value.">
+					<s:TextInput id="gtmTI" change="nv.greaterThanMaxError = gtmTI.text"/>
+				</s:FormItem>
+				<s:Label text="==================================================================="/>
+				<s:FormItem label="Input a number and press TAB key to validate:">
+					<s:TextInput id="inputTI"/>
+				</s:FormItem>
+			</s:Form>
+		</s:Group>
+	</s:Scroller>
+	
+	
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/832024b1/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkSortandSortField2Example.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkSortandSortField2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkSortandSortField2Example.mxml
new file mode 100644
index 0000000..44ccce6
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkSortandSortField2Example.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"
+			   width="100%" height="100%" viewSourceURL="srcview/index.html">
+	<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, s|List {
+			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','fr-FR']);
+			[Bindable]
+			private var employeeArrColl:ArrayCollection = new ArrayCollection(['côte','b','coté','xyz','ABC','Öhlund','Oehland','Zorn','Aaron','Ohlin','Aaron']);
+			
+			protected function button1_clickHandler(event:MouseEvent):void
+			{
+				mySort.fields = [sortField];
+				employeeArrColl.sort = mySort;
+				employeeArrColl.refresh();
+			}
+			
+		]]>
+	</fx:Script>
+	<fx:Declarations>
+		<!-- Place non-visual elements (e.g., services, value objects) here -->
+		<s:Sort id="mySort" locale="{localeCB.selectedItem}"/>
+		<s:SortField id="sortField" />
+	</fx:Declarations>
+	<s:Scroller width="100%" height="100%">
+		<s:Group>
+			<s:Form>
+				<s:Label id="titleL" text="Spark Sort and SortField"/>
+				<s:Label text="Sort strings in List by using Spark Sort and SortField"/>
+				<s:Spacer height="15"/>
+				<s:FormItem label="Locale: ">
+					<s:ComboBox id="localeCB" dataProvider="{_locales}" selectedIndex="0"/>
+				</s:FormItem>
+				<s:FormItem label="List: ">
+					<s:List dataProvider="{employeeArrColl}"/>
+				</s:FormItem>
+				<s:FormItem>
+					<s:Button label="Click to sort" click="button1_clickHandler(event)"/>
+				</s:FormItem>
+			</s:Form>
+		</s:Group>
+	</s:Scroller>
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/832024b1/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkSortandSortFieldExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkSortandSortFieldExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkSortandSortFieldExample.mxml
new file mode 100644
index 0000000..8db6555
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkSortandSortFieldExample.mxml
@@ -0,0 +1,122 @@
+<?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%" viewSourceURL="srcview/index.html">
+	<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']);
+			
+			private function sortInOrder(order:int):void {
+				switch (order)
+				{
+					case 1:
+						mySort.fields = [firstField,lastField,ageField];
+						break;
+					case 2:
+						mySort.fields = [lastField,firstField,ageField];
+						break;
+					case 3:
+						mySort.fields = [ageField,firstField,lastField];
+						break;
+					case 4:
+						mySort.fields = [firstField,ageField,lastField];
+						break;
+				}
+				
+				employeeArrColl.sort = mySort;
+				employeeArrColl.refresh();
+			}
+		]]>
+	</fx:Script>
+	<fx:Declarations>
+		<!-- Place non-visual elements (e.g., services, value objects) here -->
+		<s:Sort id="mySort" locale="{localeCB.selectedItem}"/>
+		
+		<s:SortField id="firstField" name="first"/>
+		<s:SortField id="lastField" name="last"/>
+		<s:SortField id="ageField" name="age"/>
+		
+		<s:ArrayCollection id="employeeArrColl">
+			<fx:Object first="Anders" last="Öhlund" age="36"/>
+			<fx:Object first="Eileen" last="Oehland" age="25"/>
+			<fx:Object first="Anders" last="Zorn" age="36"/>
+			<fx:Object first="Steve" last="Aaron" age="40"/>
+			<fx:Object first="Toren" last="Ohlin" age="20"/>
+			<fx:Object first="Toren" last="Aaron" age="36"/>
+			<fx:Object first="Torolf" last="Aaron" age="40"/>
+		</s:ArrayCollection>
+	</fx:Declarations>
+	<s:Scroller id="scroller" width="100%" height="100%">
+		<s:Group>
+			<s:Form>
+				<s:Label id="titleL" text="Spark Sort and SortField"/>
+				<s:Label text="Select a locale to see the strings sorting result:"/>
+				<s:Spacer height="15"/>
+				
+				<s:FormItem label="Locale: ">
+					<s:ComboBox id="localeCB" dataProvider="{_locales}" selectedIndex="0"/>
+				</s:FormItem>
+				<s:Label text="     ==========================================================================="/>
+				<s:FormItem label="Sorting Priority:" toolTip="Click priority radio button to sort multiple columns">
+					<s:RadioButton id="flaRB" groupName="priority" label="first name > last name > age" click="sortInOrder(1)"/>
+					<s:RadioButton id="lfaRB" groupName="priority" label="last name > first name > age" click="sortInOrder(2)"/>
+					<s:RadioButton id="alfRB" groupName="priority" label="age > first name > last name" click="sortInOrder(3)"/>
+					<s:RadioButton id="falRB" groupName="priority" label="first name > age > last name" click="sortInOrder(4)"/>
+				</s:FormItem>
+				<s:FormItem label="Employee Table:" toolTip="Click data grid column header to sort single one column">
+					<s:DataGrid id="dg" dataProvider="{employeeArrColl}" width="100%">
+						<s:columns>
+							<s:ArrayList>
+								<s:GridColumn dataField="first" headerText="First Name"/>
+								<s:GridColumn dataField="last" headerText="Last Name"/>
+								<s:GridColumn dataField="age" headerText="Age"/>
+							</s:ArrayList>
+						</s:columns>
+					</s:DataGrid>
+				</s:FormItem>
+			</s:Form>
+		</s:Group>
+	</s:Scroller>
+	
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/832024b1/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkStringToolsExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkStringToolsExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkStringToolsExample.mxml
new file mode 100644
index 0000000..7ebd45e
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkStringToolsExample.mxml
@@ -0,0 +1,124 @@
+<?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%" viewSourceURL="srcview/index.html">
+	<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','zh-CN','ja-JP','de-DE','fr-FR','ru-RU','ar-SA']);
+			[Bindable]
+			private var _initStr:String = 'Turkish I: iI & ıİ; Greek: ΣςσβΰΐΣ; German: ß';
+			protected function localesCB_changeHandler():void
+			{
+				st.setStyle('locale',localesCB.selectedItem);
+				initStrs(localesCB.selectedItem);
+				converString();
+			}
+			
+			private function initStrs(locale:String):void 
+			{
+				switch(locale)
+				{
+					case 'en-US':
+						_initStr = 'Turkish I: iI & ıİ; Greek: ΣςσβΰΐΣ; German: ß';
+						break;
+					case 'zh-CN':
+						_initStr = '这是一个中文测试语句';
+						break;
+					case 'ja-JP':
+						_initStr = '現代の日本語では、主に以下の3種類の文字体系が用いられる。';
+						break;
+					case 'de-DE':
+						_initStr = 'Wie heißen Sie?';
+						break;
+					case 'fr-FR':
+						_initStr = 'Le français parlé aujourd’hui tire son nom de cet ancien franceis';
+						break;
+					case 'ru-RU':
+						_initStr = 'большой';
+						break;
+					case 'ar-SA':
+						_initStr = 'جامعة الدول العربية';
+						break;
+				}
+			}
+			private function converString():void
+			{
+				upperL.text = st.toUpperCase(inputTI.text);
+				lowerL.text = st.toLowerCase(inputTI.text);
+			}  
+		]]>
+	</fx:Script>
+	<fx:Declarations>
+		<!-- Place non-visual elements (e.g., services, value objects) here -->
+		<s:StringTools id="st"/>
+	</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 StringTools"/>
+				<s:Label text="Enter strings and find the case conversion result"/>
+				<s:Spacer height="15"/>
+				<s:FormItem label="Locales:">
+					<s:ComboBox id="localesCB" dataProvider="{_locales}" selectedIndex="0" change="localesCB_changeHandler()"/>
+				</s:FormItem>
+				<s:FormItem label="Please enter a string:">
+					<s:TextInput id="inputTI" width="380" text="{_initStr}" change="converString()"/>
+				</s:FormItem>
+				<s:FormItem label="ToLowerCase:">
+					<s:Label id="lowerL"/>
+				</s:FormItem>
+				<s:FormItem label="ToUpperCase:">
+					<s:Label id="upperL"/>
+				</s:FormItem>
+			</s:Form>
+		</s:Group>
+	</s:Scroller>
+</s:Application>
+