http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/i18n/SparkCollatorExample.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmodules/src/spark/i18n/SparkCollatorExample.mxml 
b/tourdeflexmodules/src/spark/i18n/SparkCollatorExample.mxml
new file mode 100644
index 0000000..bd77d58
--- /dev/null
+++ b/tourdeflexmodules/src/spark/i18n/SparkCollatorExample.mxml
@@ -0,0 +1,142 @@
+<?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:Module xmlns:fx="http://ns.adobe.com/mxml/2009";
+                          xmlns:s="library://ns.adobe.com/flex/spark"
+                          xmlns:mx="library://ns.adobe.com/flex/mx"
+                          width="100%" height="100%" 
creationComplete="matchRB_clickHandler()">
+       
+       <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>
+               <s:SortingCollator id="sortingCollator"/>
+               <s:MatchingCollator id="matchingCollator"/>
+       </fx:Declarations>
+       
+       <s:Panel title="Spark Collator" width="100%" height="100%">
+
+               <s:layout>
+                       <s:HorizontalLayout paddingLeft="10" paddingRight="10" 
paddingTop="10" paddingBottom="10" />
+               </s:layout>
+               
+               <s:Form id="myForm" height="100%" width="100%">
+                       <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:Panel>      
+</s:Module>

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/i18n/SparkCurrencyFormatter2Example.mxml
----------------------------------------------------------------------
diff --git 
a/tourdeflexmodules/src/spark/i18n/SparkCurrencyFormatter2Example.mxml 
b/tourdeflexmodules/src/spark/i18n/SparkCurrencyFormatter2Example.mxml
new file mode 100644
index 0000000..c42318d
--- /dev/null
+++ b/tourdeflexmodules/src/spark/i18n/SparkCurrencyFormatter2Example.mxml
@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009";
+                          xmlns:s="library://ns.adobe.com/flex/spark"
+                          xmlns:mx="library://ns.adobe.com/flex/mx"
+                          width="100%" height="100%">
+       <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>
+               <s:CurrencyFormatter id="cf"/>
+       </fx:Declarations>
+       
+       <s:Panel title="Spark CurrencyFormatter" width="100%" height="100%">
+
+               <s:layout>
+                       <s:HorizontalLayout paddingLeft="10" paddingRight="10" 
paddingTop="10" paddingBottom="10" />
+               </s:layout>
+               
+               <s:Form height="100%" width="100%">
+                       <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:Panel>
+</s:Module>

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/i18n/SparkCurrencyFormatterExample.mxml
----------------------------------------------------------------------
diff --git 
a/tourdeflexmodules/src/spark/i18n/SparkCurrencyFormatterExample.mxml 
b/tourdeflexmodules/src/spark/i18n/SparkCurrencyFormatterExample.mxml
new file mode 100644
index 0000000..318ad57
--- /dev/null
+++ b/tourdeflexmodules/src/spark/i18n/SparkCurrencyFormatterExample.mxml
@@ -0,0 +1,94 @@
+<?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:Module xmlns:fx="http://ns.adobe.com/mxml/2009";
+                          xmlns:s="library://ns.adobe.com/flex/spark"
+                          xmlns:mx="library://ns.adobe.com/flex/mx"
+                          width="100%" height="100%">
+       
+       <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>
+               <s:CurrencyFormatter id="cf" locale="{localeCB.selectedItem}"/>
+               <s:CurrencyFormatter id="cf_default" 
locale="{localeCB.selectedItem}"/>
+       </fx:Declarations>
+
+
+       <s:Panel title="Spark CurrencyFormatter" width="100%" height="100%">
+
+               <s:layout>
+                       <s:HorizontalLayout paddingLeft="10" paddingRight="10" 
paddingTop="10" paddingBottom="10" />
+               </s:layout>
+                       
+               <s:Form height="100%" width="100%">
+                       <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:Panel>
+</s:Module>

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/i18n/SparkCurrencyValidator2Example.mxml
----------------------------------------------------------------------
diff --git 
a/tourdeflexmodules/src/spark/i18n/SparkCurrencyValidator2Example.mxml 
b/tourdeflexmodules/src/spark/i18n/SparkCurrencyValidator2Example.mxml
new file mode 100644
index 0000000..d69ee03
--- /dev/null
+++ b/tourdeflexmodules/src/spark/i18n/SparkCurrencyValidator2Example.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:Module xmlns:fx="http://ns.adobe.com/mxml/2009";
+                          xmlns:s="library://ns.adobe.com/flex/spark"
+                          xmlns:mx="library://ns.adobe.com/flex/mx"
+                          width="100%" height="100%">
+       <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>
+               <s:CurrencyValidator id="cv" source="{inputTI}" property="text" 
+                                                        maxValue="100" 
domain="int" locale="{localeCB.selectedItem}"/>
+       </fx:Declarations>
+
+       <s:Panel title="Spark CurrencyValidator" width="100%" height="100%">
+
+               <s:layout>
+                       <s:HorizontalLayout paddingLeft="10" paddingRight="10" 
paddingTop="10" paddingBottom="10" />
+               </s:layout>
+               
+               <s:Form height="100%" width="100%">
+                       <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:Panel>
+</s:Module>

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/i18n/SparkCurrencyValidatorExample.mxml
----------------------------------------------------------------------
diff --git 
a/tourdeflexmodules/src/spark/i18n/SparkCurrencyValidatorExample.mxml 
b/tourdeflexmodules/src/spark/i18n/SparkCurrencyValidatorExample.mxml
new file mode 100644
index 0000000..1f58d08
--- /dev/null
+++ b/tourdeflexmodules/src/spark/i18n/SparkCurrencyValidatorExample.mxml
@@ -0,0 +1,105 @@
+<?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:Module xmlns:fx="http://ns.adobe.com/mxml/2009";
+                          xmlns:s="library://ns.adobe.com/flex/spark"
+                          xmlns:mx="library://ns.adobe.com/flex/mx"
+                          width="100%" height="100%">
+       
+       <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>
+               <!--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:Panel title="Spark CurrencyValidator" width="100%" height="100%">
+
+               <s:layout>
+                       <s:HorizontalLayout paddingLeft="10" paddingRight="10" 
paddingTop="10" paddingBottom="10" />
+               </s:layout>
+                       
+               <s:Form height="100%" width="100%">
+                       <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:Panel>
+</s:Module>

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/i18n/SparkDateTimeFormatter2Example.mxml
----------------------------------------------------------------------
diff --git 
a/tourdeflexmodules/src/spark/i18n/SparkDateTimeFormatter2Example.mxml 
b/tourdeflexmodules/src/spark/i18n/SparkDateTimeFormatter2Example.mxml
new file mode 100644
index 0000000..e1c5a5b
--- /dev/null
+++ b/tourdeflexmodules/src/spark/i18n/SparkDateTimeFormatter2Example.mxml
@@ -0,0 +1,59 @@
+<?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:Module xmlns:fx="http://ns.adobe.com/mxml/2009";
+                          xmlns:s="library://ns.adobe.com/flex/spark"
+                          xmlns:mx="library://ns.adobe.com/flex/mx"
+                          width="100%" height="100%">
+       <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>
+               <s:DateTimeFormatter id="dtf" locale="{localeCB.selectedItem}"/>
+       </fx:Declarations>
+
+       <s:Panel title="Spark DateTimeFormatter" width="100%" height="100%">
+
+               <s:layout>
+                       <s:HorizontalLayout paddingLeft="10" paddingRight="10" 
paddingTop="10" paddingBottom="10" />
+               </s:layout>
+               
+               <s:Form height="100%" width="100%">
+                       <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:Panel>              
+</s:Module>

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/i18n/SparkDateTimeFormatterExample.mxml
----------------------------------------------------------------------
diff --git 
a/tourdeflexmodules/src/spark/i18n/SparkDateTimeFormatterExample.mxml 
b/tourdeflexmodules/src/spark/i18n/SparkDateTimeFormatterExample.mxml
new file mode 100644
index 0000000..d08fa90
--- /dev/null
+++ b/tourdeflexmodules/src/spark/i18n/SparkDateTimeFormatterExample.mxml
@@ -0,0 +1,86 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009";
+                          xmlns:s="library://ns.adobe.com/flex/spark"
+                          xmlns:mx="library://ns.adobe.com/flex/mx"
+                          width="100%" height="100%">
+
+       <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>
+               <s:DateTimeFormatter id="dtf"/>
+       </fx:Declarations>
+
+       <s:layout>
+               <s:VerticalLayout/>
+       </s:layout>
+
+       <s:Panel title="Spark DateTimeFormatter" width="100%" height="100%">
+
+               <s:layout>
+                       <s:HorizontalLayout paddingLeft="10" paddingRight="10" 
paddingTop="10" paddingBottom="10" />
+               </s:layout>
+               
+               <s:Form height="100%" width="100%">
+                       <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:Panel>
+</s:Module>

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/i18n/SparkFormatterExample.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmodules/src/spark/i18n/SparkFormatterExample.mxml 
b/tourdeflexmodules/src/spark/i18n/SparkFormatterExample.mxml
new file mode 100644
index 0000000..471e7bd
--- /dev/null
+++ b/tourdeflexmodules/src/spark/i18n/SparkFormatterExample.mxml
@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009";
+                          xmlns:s="library://ns.adobe.com/flex/spark"
+                          xmlns:mx="library://ns.adobe.com/flex/mx"
+                          locale="{c.selectedItem}">
+
+       <fx:Declarations>
+               <s:CurrencyFormatter id="cf" useCurrencySymbol="true"/>
+               <s:DateTimeFormatter id="df"/>
+       </fx:Declarations>
+       
+       <s:Panel title="Spark Locale Formatter" width="100%" height="100%">
+
+               <s:layout>
+                       <s:VerticalLayout paddingLeft="10" paddingRight="10" 
paddingTop="10" paddingBottom="10" />
+               </s:layout>
+               
+               <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:Panel>
+</s:Module>

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/i18n/SparkNumberFormatter2Example.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmodules/src/spark/i18n/SparkNumberFormatter2Example.mxml 
b/tourdeflexmodules/src/spark/i18n/SparkNumberFormatter2Example.mxml
new file mode 100644
index 0000000..a9ecb89
--- /dev/null
+++ b/tourdeflexmodules/src/spark/i18n/SparkNumberFormatter2Example.mxml
@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; 
+                          xmlns:s="library://ns.adobe.com/flex/spark" 
+                          xmlns:mx="library://ns.adobe.com/flex/mx">
+       <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>
+               <s:NumberFormatter id="nf" locale="{localeCB.selectedItem}"/>
+       </fx:Declarations>
+
+       <s:Panel title="Spark NumberFormatter" width="100%" height="100%">
+
+               <s:layout>
+                       <s:HorizontalLayout paddingLeft="10" paddingRight="10" 
paddingTop="10" paddingBottom="10" />
+               </s:layout>
+               
+               <s:Form height="100%" width="100%">
+                       <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:Panel>
+</s:Module>

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/i18n/SparkNumberFormatterExample.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmodules/src/spark/i18n/SparkNumberFormatterExample.mxml 
b/tourdeflexmodules/src/spark/i18n/SparkNumberFormatterExample.mxml
new file mode 100644
index 0000000..567f927
--- /dev/null
+++ b/tourdeflexmodules/src/spark/i18n/SparkNumberFormatterExample.mxml
@@ -0,0 +1,79 @@
+<?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:Module xmlns:fx="http://ns.adobe.com/mxml/2009";
+                          xmlns:s="library://ns.adobe.com/flex/spark"
+                          xmlns:mx="library://ns.adobe.com/flex/mx"
+                          width="100%" height="100%">
+       
+       <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>
+               <s:NumberFormatter id="nf"  locale="{localeCB.selectedItem}"/>
+               <s:NumberFormatter id="nf_default" 
locale="{localeCB.selectedItem}"/>
+       </fx:Declarations>
+
+       <s:Panel title="Spark NumberFormatter" width="100%" height="100%">
+
+               <s:layout>
+                       <s:HorizontalLayout paddingLeft="10" paddingRight="10" 
paddingTop="10" paddingBottom="10" />
+               </s:layout>
+               
+               <s:Form height="100%" width="100%">
+                       <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:Panel>
+</s:Module>

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/i18n/SparkNumberValidator2Example.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmodules/src/spark/i18n/SparkNumberValidator2Example.mxml 
b/tourdeflexmodules/src/spark/i18n/SparkNumberValidator2Example.mxml
new file mode 100644
index 0000000..2b90eb9
--- /dev/null
+++ b/tourdeflexmodules/src/spark/i18n/SparkNumberValidator2Example.mxml
@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009";
+                          xmlns:s="library://ns.adobe.com/flex/spark"
+                          xmlns:mx="library://ns.adobe.com/flex/mx"
+                          width="100%" height="100%">
+       <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>
+               <s:NumberValidator id="nv" source="{inputTI}" property="text" 
+                                                  minValue="100" domain="int" 
locale="{localeCB.selectedItem}"/>
+       </fx:Declarations>
+
+       <s:Panel title="Spark NumberValidator" width="100%" height="100%">
+
+               <s:layout>
+                       <s:HorizontalLayout paddingLeft="10" paddingRight="10" 
paddingTop="10" paddingBottom="10" />
+               </s:layout>
+               
+               <s:Form height="100%" width="100%">
+                       <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:Panel>
+</s:Module>

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/i18n/SparkNumberValidatorExample.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmodules/src/spark/i18n/SparkNumberValidatorExample.mxml 
b/tourdeflexmodules/src/spark/i18n/SparkNumberValidatorExample.mxml
new file mode 100644
index 0000000..e61cf87
--- /dev/null
+++ b/tourdeflexmodules/src/spark/i18n/SparkNumberValidatorExample.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:Module xmlns:fx="http://ns.adobe.com/mxml/2009";
+                          xmlns:s="library://ns.adobe.com/flex/spark"
+                          xmlns:mx="library://ns.adobe.com/flex/mx"
+                          width="100%" height="100%">
+       
+       <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>
+               <s:NumberValidator id="nv" source="{inputTI}" property="text"/>
+       </fx:Declarations>
+
+       <s:Panel title="Spark NumberValidator" width="100%" height="100%">
+
+               <s:layout>
+                       <s:HorizontalLayout paddingLeft="10" paddingRight="10" 
paddingTop="10" paddingBottom="10" />
+               </s:layout>
+               
+               <s:Form height="100%" width="100%">
+                       <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:" />
+                       <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:"
+                                        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:Panel>
+</s:Module>

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/i18n/SparkSortandSortField2Example.mxml
----------------------------------------------------------------------
diff --git 
a/tourdeflexmodules/src/spark/i18n/SparkSortandSortField2Example.mxml 
b/tourdeflexmodules/src/spark/i18n/SparkSortandSortField2Example.mxml
new file mode 100644
index 0000000..6338f30
--- /dev/null
+++ b/tourdeflexmodules/src/spark/i18n/SparkSortandSortField2Example.mxml
@@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009";
+                          xmlns:s="library://ns.adobe.com/flex/spark"
+                          xmlns:mx="library://ns.adobe.com/flex/mx"
+                          width="100%" height="100%">
+       <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>
+               <s:Sort id="mySort" locale="{localeCB.selectedItem}"/>
+               <s:SortField id="sortField" />
+       </fx:Declarations>
+
+       <s:Panel title="Spark Sort and SortField" width="100%" height="100%">
+
+               <s:layout>
+                       <s:HorizontalLayout paddingLeft="10" paddingRight="10" 
paddingTop="10" paddingBottom="10" />
+               </s:layout>
+               
+               <s:Form height="100%" width="100%">
+                       <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:Panel>
+</s:Module>

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/i18n/SparkSortandSortFieldExample.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmodules/src/spark/i18n/SparkSortandSortFieldExample.mxml 
b/tourdeflexmodules/src/spark/i18n/SparkSortandSortFieldExample.mxml
new file mode 100644
index 0000000..0502879
--- /dev/null
+++ b/tourdeflexmodules/src/spark/i18n/SparkSortandSortFieldExample.mxml
@@ -0,0 +1,107 @@
+<?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:Module xmlns:fx="http://ns.adobe.com/mxml/2009";
+                          xmlns:s="library://ns.adobe.com/flex/spark"
+                          xmlns:mx="library://ns.adobe.com/flex/mx"
+                          width="100%" height="100%">
+       
+       <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>
+               <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:Panel title="Spark Sort and SortField" width="100%" height="100%">
+
+               <s:layout>
+                       <s:HorizontalLayout paddingLeft="10" paddingRight="10" 
paddingTop="10" paddingBottom="10" />
+               </s:layout>
+               
+               <s:Form height="100%" width="100%">
+                       <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:Panel>      
+</s:Module>

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/i18n/SparkStringToolsExample.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmodules/src/spark/i18n/SparkStringToolsExample.mxml 
b/tourdeflexmodules/src/spark/i18n/SparkStringToolsExample.mxml
new file mode 100644
index 0000000..e14c0ec
--- /dev/null
+++ b/tourdeflexmodules/src/spark/i18n/SparkStringToolsExample.mxml
@@ -0,0 +1,102 @@
+<?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:Module xmlns:fx="http://ns.adobe.com/mxml/2009";
+                          xmlns:s="library://ns.adobe.com/flex/spark"
+                          xmlns:mx="library://ns.adobe.com/flex/mx"
+                          width="100%" height="100%">
+       <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>
+               <s:StringTools id="st"/>
+       </fx:Declarations>
+
+       <s:Panel title="Spark StringTools" width="100%" height="100%">
+
+               <s:layout>
+                       <s:HorizontalLayout paddingLeft="10" paddingRight="10" 
paddingTop="10" paddingBottom="10" />
+               </s:layout>
+               
+               <s:Form height="100%" width="100%">
+                       <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:Panel>
+</s:Module>
+

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/itemRenderers/Item.as
----------------------------------------------------------------------
diff --git a/tourdeflexmodules/src/spark/itemRenderers/Item.as 
b/tourdeflexmodules/src/spark/itemRenderers/Item.as
new file mode 100644
index 0000000..f5f0a30
--- /dev/null
+++ b/tourdeflexmodules/src/spark/itemRenderers/Item.as
@@ -0,0 +1,62 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package
+{
+    [Bindable]
+    public class Item
+    {
+        private var _name:String;
+        private var _photo:String;
+               private var _price:String;
+        
+        public function Item()
+        {
+        }
+        
+        public function get name():String
+        {
+            return _name;
+        }
+               
+               public function set name(name:String):void
+               {
+                       _name = name;
+               }
+
+               public function get photo():String
+        {
+            return _photo;
+        }
+               
+               public function set photo(photo:String):void
+               {
+                       _photo = photo;
+               }
+        
+               public function get price():String
+               {
+                       return _price;
+               }
+               public function set price(price:String):void
+               {
+                       _price = price;
+               }
+
+    }
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/itemRenderers/ItemRenderer1Example.mxml
----------------------------------------------------------------------
diff --git 
a/tourdeflexmodules/src/spark/itemRenderers/ItemRenderer1Example.mxml 
b/tourdeflexmodules/src/spark/itemRenderers/ItemRenderer1Example.mxml
new file mode 100644
index 0000000..e2348bb
--- /dev/null
+++ b/tourdeflexmodules/src/spark/itemRenderers/ItemRenderer1Example.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:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; 
+                          xmlns:s="library://ns.adobe.com/flex/spark" 
+                          xmlns:mx="library://ns.adobe.com/flex/mx" 
+                          initialize="init()">
+       
+       
+       <fx:Script>
+               <![CDATA[
+                       import mx.collections.XMLListCollection;
+                       
+                       [Bindable]
+                       private var employees:XMLListCollection;
+                       
+                       [Embed(source="data/list.xml", 
mimeType="application/octet-stream")]
+                       private var XMLData:Class;
+                       
+                       private function init():void
+                       {
+                               var data:XML = XML(new XMLData());
+                               
+                               employees = new 
XMLListCollection(data.employee);
+                       }                       
+               ]]>
+       </fx:Script>
+
+       <s:Panel title="Custom Item Renderer with Animation" width="100%" 
height="100%">
+               <s:layout>
+                       <s:HorizontalLayout paddingLeft="10" paddingRight="10" 
paddingTop="10" paddingBottom="10" />
+               </s:layout>
+               <s:DataGroup dataProvider="{employees}" width="300" 
itemRenderer="renderers.ImageRenderer1">
+                       <s:layout>
+                               <s:TileLayout horizontalGap="0" 
verticalGap="0"/>
+                       </s:layout>
+               </s:DataGroup>
+               <s:Label width="200" text="The item renderer on this DataGroup 
uses the Spark Animate to scale the image
+when hovered over each item. See the ImageRenderer1.mxml source for more 
information."/>
+       </s:Panel>
+       
+</s:Module>

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/itemRenderers/ItemRenderer2Example.mxml
----------------------------------------------------------------------
diff --git 
a/tourdeflexmodules/src/spark/itemRenderers/ItemRenderer2Example.mxml 
b/tourdeflexmodules/src/spark/itemRenderers/ItemRenderer2Example.mxml
new file mode 100644
index 0000000..6ca704a
--- /dev/null
+++ b/tourdeflexmodules/src/spark/itemRenderers/ItemRenderer2Example.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:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; 
+                          xmlns:s="library://ns.adobe.com/flex/spark" 
+                          xmlns:mx="library://ns.adobe.com/flex/mx" 
+                          initialize="init()">
+       
+       <fx:Style>
+
+               @namespace s "library://ns.adobe.com/flex/spark";
+               @namespace mx "library://ns.adobe.com/flex/halo";
+               
+               s|Application {
+                       font-size: 14;
+               }
+               
+       </fx:Style>
+       
+       <fx:Script>
+               <![CDATA[
+                       import mx.collections.XMLListCollection;
+                       
+                       [Bindable]
+                       private var employees:XMLListCollection;
+                       
+                       [Embed(source="data/list.xml", 
mimeType="application/octet-stream")]
+                       private var XMLData:Class;
+                       
+                       private function init():void
+                       {
+                               var data:XML = XML(new XMLData());
+                               
+                               employees = new 
XMLListCollection(data.employee);
+                       }
+               ]]>
+       </fx:Script>
+       
+       <s:Panel title="Custom Item Renderer with Animation" width="100%" 
height="100%">
+               <s:layout>
+                       <s:HorizontalLayout paddingLeft="10" paddingRight="10" 
paddingTop="10" paddingBottom="10" />
+               </s:layout>
+               
+               <s:DataGroup dataProvider="{employees}" width="440" 
itemRenderer="renderers.ImageRenderer2" horizontalCenter="0" verticalCenter="0">
+                       <s:layout>
+                               <s:TileLayout />
+                       </s:layout>
+               </s:DataGroup>
+               <s:Label width="200" text="The item renderer on this DataGroup 
uses effects to provide a
+Spark 3D rotation effect when hovered over each item. See the 
ImageRenderer2.mxml source for more information. This sample also 
+shows the use of a special font for the text."/>
+       </s:Panel>
+</s:Module>

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/itemRenderers/ListItemRendererExample.mxml
----------------------------------------------------------------------
diff --git 
a/tourdeflexmodules/src/spark/itemRenderers/ListItemRendererExample.mxml 
b/tourdeflexmodules/src/spark/itemRenderers/ListItemRendererExample.mxml
new file mode 100644
index 0000000..d9be5e7
--- /dev/null
+++ b/tourdeflexmodules/src/spark/itemRenderers/ListItemRendererExample.mxml
@@ -0,0 +1,102 @@
+<?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:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; 
+                          xmlns:s="library://ns.adobe.com/flex/spark" 
+                          xmlns:mx="library://ns.adobe.com/flex/mx"
+                          xmlns:local="*">
+       <fx:Script>
+               <![CDATA[
+                       import spark.events.IndexChangeEvent;
+                       
+                       [Bindable]
+                       private var totalPrice:Number = 0.00;
+                       
+                       protected function 
itemIndexChangeHandler(event:IndexChangeEvent):void
+                       {
+                               if (ta.text.length!=0) 
+                                       
ta.text=ta.text+"\n"+myList.selectedItem.name + " $"+myList.selectedItem.price;
+                               else ta.text=myList.selectedItem.name+ " 
$"+myList.selectedItem.price;
+                               totalPrice += Number(myList.selectedItem.price);
+                       }
+                       protected function 
buyBtn_clickHandler(event:MouseEvent):void
+                       {
+                               txtResponse.text="Thank you for your order 
totaling: " + usdFormatter.format(totalPrice) + "\nItems will ship in 3 days.";
+                       }
+
+               ]]>
+       </fx:Script>
+       <fx:Declarations>
+               <mx:CurrencyFormatter id="usdFormatter" precision="2" 
currencySymbol="$"
+                                                         
decimalSeparatorFrom="." decimalSeparatorTo="." useNegativeSign="true"
+                                                         
useThousandsSeparator="true" alignSymbol="left"/>
+       </fx:Declarations>
+       <fx:Style>
+               @namespace "library://ns.adobe.com/flex/spark";
+               #vGrp { 
+                       color: #000000; 
+                       fontFamily: "Arial";
+                       fontSize: "12";
+               }
+       </fx:Style>
+               
+       <s:Panel title="List Sample" 
+                        width="100%" height="100%"  
+                        >
+               <s:VGroup id="vGrp" horizontalCenter="0" top="3" 
+                                 width="80%" height="75%">
+                       <s:HGroup verticalAlign="middle">
+                               <s:Label text="Select items to add, price will 
be shown when added:" 
+                                                         
verticalAlign="bottom"/>
+                       </s:HGroup>
+                       <s:HGroup >
+                               <s:List id="myList" height="157" width="160" 
+                                               
itemRenderer="MyListItemRenderer" 
+                                               
change="itemIndexChangeHandler(event)">
+                                       <s:dataProvider>
+                                               <s:ArrayCollection>
+                                                       <local:Item 
name="Backpack" photo="assets/ApacheFlexIcon.png" price="29.99"/>
+                                                       <local:Item 
name="Boots" photo="assets/ApacheFlexIcon.png" price="69.99"/>
+                                                       <local:Item 
name="Compass" photo="assets/ApacheFlexIcon.png" price="12.99"/>
+                                                       <local:Item 
name="Goggles" photo="assets/ApacheFlexIcon.png" price="14.99"/>
+                                                       <local:Item 
name="Helmet" photo="assets/ApacheFlexIcon.png" price="47.99"/>
+                                               </s:ArrayCollection>
+                                       </s:dataProvider>
+                               </s:List>
+                               <s:TextArea id="ta" width="{myList.width}" 
height="{myList.height}" 
+                                                       color="0xAE0A0A" 
fontWeight="bold"/>
+                               <s:VGroup>
+                                       <mx:Spacer height="10"/>
+                                       <s:Label text="Total of Items selected: 
{usdFormatter.format(this.totalPrice)}"/> 
+                                       <s:Button id="buyBtn" 
horizontalCenter="0" bottom="30" label="Buy Now!" 
+                                                         fontWeight="bold" 
+                                                         
click="buyBtn_clickHandler(event)"/>
+                                       <s:Label id="txtResponse"/>
+                               </s:VGroup>
+                       </s:HGroup>
+               </s:VGroup>
+               <s:Label bottom="15" horizontalCenter="0" width="95%" 
verticalAlign="justify" 
+                                         text="The Spark List control displays 
a list of data items. Its functionality is
+very similar to that of the SELECT form element in HTML. The user can select 
one or more items from the list. 
+The List control automatically displays horizontal and vertical scroll bar 
when the list items do not fit 
+the size of the control."/>
+       </s:Panel>
+       
+       
+</s:Module>

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/itemRenderers/MyListItemRenderer.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmodules/src/spark/itemRenderers/MyListItemRenderer.mxml 
b/tourdeflexmodules/src/spark/itemRenderers/MyListItemRenderer.mxml
new file mode 100644
index 0000000..1f00f1d
--- /dev/null
+++ b/tourdeflexmodules/src/spark/itemRenderers/MyListItemRenderer.mxml
@@ -0,0 +1,39 @@
+<!--
+
+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:ItemRenderer
+       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:states>
+               <s:State name="normal"/>
+               <s:State name="hovered"/>
+               <s:State name="selected" />
+       </s:states>
+       
+       <s:layout>
+               <s:VerticalLayout/>
+       </s:layout>
+       
+       <s:HGroup verticalAlign="middle" paddingTop="0" paddingBottom="0">
+               <mx:Image source="{data.photo}" width="50" height="40" 
alpha.hovered=".5"/>
+               <s:Label text="{data.name}" color.hovered="0x1313cd" 
color.selected="0x000000" verticalAlign="bottom"/>
+       </s:HGroup>
+       
+</s:ItemRenderer>

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/itemRenderers/assets/1.jpg
----------------------------------------------------------------------
diff --git a/tourdeflexmodules/src/spark/itemRenderers/assets/1.jpg 
b/tourdeflexmodules/src/spark/itemRenderers/assets/1.jpg
new file mode 100644
index 0000000..2533129
Binary files /dev/null and 
b/tourdeflexmodules/src/spark/itemRenderers/assets/1.jpg differ

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/itemRenderers/assets/2.jpg
----------------------------------------------------------------------
diff --git a/tourdeflexmodules/src/spark/itemRenderers/assets/2.jpg 
b/tourdeflexmodules/src/spark/itemRenderers/assets/2.jpg
new file mode 100644
index 0000000..2533129
Binary files /dev/null and 
b/tourdeflexmodules/src/spark/itemRenderers/assets/2.jpg differ

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/itemRenderers/assets/3.jpg
----------------------------------------------------------------------
diff --git a/tourdeflexmodules/src/spark/itemRenderers/assets/3.jpg 
b/tourdeflexmodules/src/spark/itemRenderers/assets/3.jpg
new file mode 100644
index 0000000..b98cd8a
Binary files /dev/null and 
b/tourdeflexmodules/src/spark/itemRenderers/assets/3.jpg differ

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/itemRenderers/assets/4.jpg
----------------------------------------------------------------------
diff --git a/tourdeflexmodules/src/spark/itemRenderers/assets/4.jpg 
b/tourdeflexmodules/src/spark/itemRenderers/assets/4.jpg
new file mode 100644
index 0000000..657c12b
Binary files /dev/null and 
b/tourdeflexmodules/src/spark/itemRenderers/assets/4.jpg differ

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/itemRenderers/assets/5.jpg
----------------------------------------------------------------------
diff --git a/tourdeflexmodules/src/spark/itemRenderers/assets/5.jpg 
b/tourdeflexmodules/src/spark/itemRenderers/assets/5.jpg
new file mode 100644
index 0000000..e296f9c
Binary files /dev/null and 
b/tourdeflexmodules/src/spark/itemRenderers/assets/5.jpg differ

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/itemRenderers/assets/6.jpg
----------------------------------------------------------------------
diff --git a/tourdeflexmodules/src/spark/itemRenderers/assets/6.jpg 
b/tourdeflexmodules/src/spark/itemRenderers/assets/6.jpg
new file mode 100644
index 0000000..5ebc534
Binary files /dev/null and 
b/tourdeflexmodules/src/spark/itemRenderers/assets/6.jpg differ

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/itemRenderers/assets/7.jpg
----------------------------------------------------------------------
diff --git a/tourdeflexmodules/src/spark/itemRenderers/assets/7.jpg 
b/tourdeflexmodules/src/spark/itemRenderers/assets/7.jpg
new file mode 100644
index 0000000..3047de0
Binary files /dev/null and 
b/tourdeflexmodules/src/spark/itemRenderers/assets/7.jpg differ

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/itemRenderers/assets/8.jpg
----------------------------------------------------------------------
diff --git a/tourdeflexmodules/src/spark/itemRenderers/assets/8.jpg 
b/tourdeflexmodules/src/spark/itemRenderers/assets/8.jpg
new file mode 100644
index 0000000..4e3f9ca
Binary files /dev/null and 
b/tourdeflexmodules/src/spark/itemRenderers/assets/8.jpg differ

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/itemRenderers/assets/9.jpg
----------------------------------------------------------------------
diff --git a/tourdeflexmodules/src/spark/itemRenderers/assets/9.jpg 
b/tourdeflexmodules/src/spark/itemRenderers/assets/9.jpg
new file mode 100644
index 0000000..ed4e5fe
Binary files /dev/null and 
b/tourdeflexmodules/src/spark/itemRenderers/assets/9.jpg differ

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/itemRenderers/assets/ApacheFlexIcon.png
----------------------------------------------------------------------
diff --git 
a/tourdeflexmodules/src/spark/itemRenderers/assets/ApacheFlexIcon.png 
b/tourdeflexmodules/src/spark/itemRenderers/assets/ApacheFlexIcon.png
new file mode 100644
index 0000000..e68d831
Binary files /dev/null and 
b/tourdeflexmodules/src/spark/itemRenderers/assets/ApacheFlexIcon.png differ

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/itemRenderers/data/list.xml
----------------------------------------------------------------------
diff --git a/tourdeflexmodules/src/spark/itemRenderers/data/list.xml 
b/tourdeflexmodules/src/spark/itemRenderers/data/list.xml
new file mode 100644
index 0000000..f70cbf5
--- /dev/null
+++ b/tourdeflexmodules/src/spark/itemRenderers/data/list.xml
@@ -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.
+
+-->
+<list>
+    <employee employeeId="1">
+       <firstName>Michael</firstName>
+       <lastName>Scott</lastName>
+       <image>assets/2.jpg</image>
+    </employee>
+    <employee employeeId="2">
+       <firstName>Pam</firstName>
+       <lastName>Beesly</lastName>
+       <image>assets/3.jpg</image>
+    </employee>
+    <employee employeeId="3">
+       <firstName>Andy</firstName>
+       <lastName>Bernard</lastName>
+       <image>assets/4.jpg</image>
+    </employee>
+    <employee employeeId="3">
+       <firstName>Creed</firstName>
+       <lastName>Bratton</lastName>
+       <image>assets/5.jpg</image>
+    </employee>
+    <employee employeeId="3">
+       <firstName>Toby</firstName>
+       <lastName>Flenderson</lastName>
+       <image>assets/6.jpg</image>
+    </employee>
+    <employee employeeId="3">
+       <firstName>Jim</firstName>
+       <lastName>Halpert</lastName>
+       <image>assets/7.jpg</image>
+    </employee>
+    <employee employeeId="3">
+       <firstName>Ryan</firstName>
+       <lastName>Howard</lastName>
+       <image>assets/8.jpg</image>
+    </employee>
+    <employee employeeId="3">
+       <firstName>Stanley</firstName>
+       <lastName>Hudson</lastName>
+       <image>assets/9.jpg</image>
+    </employee>
+    <employee employeeId="3">
+       <firstName>Kelly</firstName>
+       <lastName>Kapoor</lastName>
+       <image>assets/1.jpg</image>
+    </employee>
+    <employee employeeId="3">
+       <firstName>Phyllis</firstName>
+       <lastName>Lapin</lastName>
+       <image>assets/2.jpg</image>
+    </employee>
+    <employee employeeId="3">
+       <firstName>Kevin</firstName>
+       <lastName>Malone</lastName>
+       <image>assets/3.jpg</image>
+    </employee>
+    <employee employeeId="3">
+       <firstName>Angela</firstName>
+       <lastName>Martin</lastName>
+       <image>assets/4.jpg</image>
+    </employee>
+    <employee employeeId="3">
+       <firstName>Oscar</firstName>
+       <lastName>Martinez</lastName>
+       <image>assets/5.jpg</image>
+    </employee>
+    <employee employeeId="3">
+       <firstName>Meredith</firstName>
+       <lastName>Palmer</lastName>
+       <image>assets/6.jpg</image>
+    </employee>
+    <employee employeeId="3">
+       <firstName>Dwight</firstName>
+       <lastName>Schrute</lastName>
+       <image>assets/7.jpg</image>
+    </employee>
+</list>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/itemRenderers/renderers/ImageRenderer1.mxml
----------------------------------------------------------------------
diff --git 
a/tourdeflexmodules/src/spark/itemRenderers/renderers/ImageRenderer1.mxml 
b/tourdeflexmodules/src/spark/itemRenderers/renderers/ImageRenderer1.mxml
new file mode 100644
index 0000000..cd9d549
--- /dev/null
+++ b/tourdeflexmodules/src/spark/itemRenderers/renderers/ImageRenderer1.mxml
@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009";
+                               xmlns:s="library://ns.adobe.com/flex/spark"
+                               xmlns:mx="library://ns.adobe.com/flex/mx" 
+                               autoDrawBackground="false" 
+                               depth="0" depth.hovered="1">
+       
+       <s:states>
+               <s:State name="normal" />
+               <s:State name="hovered" />
+       </s:states>
+
+       <s:postLayoutTransformOffsets>
+               <mx:TransformOffsets id="offsets" x.hovered="-40" 
y.hovered="-40" scaleX.hovered="2" scaleY.hovered="2" />
+       </s:postLayoutTransformOffsets> 
+       
+       <s:transitions>
+               <mx:Transition fromState="normal" toState="hovered" 
autoReverse="true">
+                       <s:Animate target="{offsets}" duration="200">
+                               <s:SimpleMotionPath property="scaleX" />
+                               <s:SimpleMotionPath property="scaleY" />
+                               <s:SimpleMotionPath property="x" />
+                               <s:SimpleMotionPath property="y" />
+                       </s:Animate>
+               </mx:Transition>
+               <mx:Transition fromState="hovered" toState="normal" 
autoReverse="true">
+                       <s:Animate target="{offsets}" duration="200">
+                               <s:SimpleMotionPath property="scaleX" />
+                               <s:SimpleMotionPath property="scaleY" />
+                               <s:SimpleMotionPath property="x" />
+                               <s:SimpleMotionPath property="y" />
+                       </s:Animate>
+               </mx:Transition>
+       </s:transitions>        
+       
+       <mx:Image id="image" source="{data.image}" width="60" height="60" 
horizontalCenter="0" verticalCenter="0"/>
+
+</s:ItemRenderer>

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/itemRenderers/renderers/ImageRenderer2.mxml
----------------------------------------------------------------------
diff --git 
a/tourdeflexmodules/src/spark/itemRenderers/renderers/ImageRenderer2.mxml 
b/tourdeflexmodules/src/spark/itemRenderers/renderers/ImageRenderer2.mxml
new file mode 100644
index 0000000..db7ccfb
--- /dev/null
+++ b/tourdeflexmodules/src/spark/itemRenderers/renderers/ImageRenderer2.mxml
@@ -0,0 +1,54 @@
+<?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:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009";
+                               xmlns:s="library://ns.adobe.com/flex/spark"
+                               xmlns:mx="library://ns.adobe.com/flex/mx" 
+                               autoDrawBackground="false" 
+                               depth="0" depth.hovered="1">
+       
+       <s:states>
+               <s:State name="normal" />
+               <s:State name="hovered" />
+       </s:states>
+
+       <s:transitions>
+               <s:Transition fromState="normal" toState="hovered" 
autoReverse="true">
+                       <s:Parallel>
+                               <s:Rotate3D target="{image}" angleYFrom="0" 
angleYTo="360" autoCenterProjection="true" autoCenterTransform="true" 
duration="400"/>
+                               <s:Fade target="{image}" startDelay="400" 
duration="200"/>
+                               <s:Fade target="{group}" startDelay="400" 
duration="200"/>
+                       </s:Parallel>
+               </s:Transition>
+       </s:transitions>
+       
+       <s:Rect id="rect" left="0" right="0" top="0" bottom="0">
+               <s:fill>
+                       <s:SolidColor color="black" alpha="0.7"/>
+               </s:fill>
+       </s:Rect>
+
+       <s:Group id="group" left="0" right="0" top="0" bottom="0" 
visible.normal="false">
+               <s:Label text="{data.firstName}" verticalCenter="-10" 
horizontalCenter="0" color="white"/> 
+               <s:Label text="{data.lastName}" verticalCenter="10" 
horizontalCenter="0" color="white"/> 
+       </s:Group>
+
+       <mx:Image id="image" source="{data.image}" width="70" height="70" 
horizontalCenter="0" verticalCenter="0" visible.hovered="false"/>
+       
+</s:ItemRenderer>

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/layouts/CustomLayoutAnimatedExample.mxml
----------------------------------------------------------------------
diff --git 
a/tourdeflexmodules/src/spark/layouts/CustomLayoutAnimatedExample.mxml 
b/tourdeflexmodules/src/spark/layouts/CustomLayoutAnimatedExample.mxml
new file mode 100644
index 0000000..372783d
--- /dev/null
+++ b/tourdeflexmodules/src/spark/layouts/CustomLayoutAnimatedExample.mxml
@@ -0,0 +1,105 @@
+<?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:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; 
+                          xmlns:s="library://ns.adobe.com/flex/spark" 
+                          xmlns:mx="library://ns.adobe.com/flex/mx" 
+                          xmlns:local="*" xmlns:layouts="layouts.*"
+                          initialize="init()">
+       
+       <fx:Script>
+               <![CDATA[
+                       import mx.collections.ArrayCollection;
+                       import mx.rpc.xml.SimpleXMLDecoder;
+                       import mx.rpc.xml.SimpleXMLEncoder;
+                       import mx.utils.ArrayUtil;
+                       
+                       [Bindable]
+                       private var items:ArrayCollection;
+                       
+                       [Bindable]
+                       private var filteredItems:ArrayCollection;
+                       
+                       [Bindable]
+                       private var _maxPrice:Number = 1000;
+                       
+                       [Bindable]
+                       private var _camera:Boolean = false;
+                       
+                       [Bindable]
+                       private var _video:Boolean = false;
+                       
+                       [Bindable]
+                       private var _triband:Boolean = false;
+                       
+                       [Embed(source="data/catalog.xml", 
mimeType="application/octet-stream")]
+                       private var XMLData:Class;
+                       
+                       private function init():void
+                       {
+                               var data:XML = XML(new XMLData());
+                               var xmlDoc:XMLDocument = new XMLDocument(data);
+                var decoder:SimpleXMLDecoder = new SimpleXMLDecoder(true);
+                var object:Object = decoder.decodeXML(xmlDoc);
+                               
+                               items = object.catalog.product;
+                               filteredItems = new 
ArrayCollection(items.source);
+                               filteredItems.filterFunction = filter;
+                       }
+                       
+                       private function selectionChange():void
+                       {
+                               filteredItems.refresh();
+                               filterLayout.filter();
+                       }
+                       
+                       private function filter(item:Object):Boolean
+                       {
+                               return  (item.price <= _maxPrice) &&
+                                       (!_camera || item.camera) &&
+                                       (!_video || item.video) &&
+                                       (!_triband || item.triband);
+                       }                       
+                       
+               ]]>
+       </fx:Script>
+
+       <s:Panel title="Custom Layout Sample" width="100%" height="100%">
+               
+               <s:layout>
+                       <s:VerticalLayout paddingLeft="10" paddingRight="10" 
paddingTop="10" paddingBottom="10"/>
+               </s:layout>
+               
+               <s:HGroup>
+                       <s:Label text="Max Price:"/>
+                       <s:HSlider id="priceSlider" minimum="0" maximum="1000" 
snapInterval="100" value="@{_maxPrice}" change="selectionChange()"/>
+                       <mx:Spacer width="20"/>
+                       <s:CheckBox label="Camera" selected="@{_camera}" 
change="selectionChange()"/>
+                       <s:CheckBox label="Video" selected="@{_video}" 
change="selectionChange()"/>
+                       <s:CheckBox label="Triband" selected="@{_triband}" 
change="selectionChange()"/>
+               </s:HGroup>
+               
+               <s:DataGroup dataProvider="{items}" 
itemRenderer="renderers.PhoneRenderer" width="100%" height="100%">
+                       <s:layout>
+                               <layouts:FilteredTileLayout id="filterLayout" 
filteredItems="{filteredItems}" />
+                       </s:layout>
+               </s:DataGroup>
+               
+       </s:Panel>
+</s:Module>

Reply via email to