diff --git a/tourdeflexmodules/README b/tourdeflexmodules/README
new file mode 100644
index 0000000..695b151
--- /dev/null
+++ b/tourdeflexmodules/README
@@ -0,0 +1,80 @@
+
+  The Apache Flex Tour De Flex component explorer provides a sample set of working
+  Apache Flex examples.
+	 
+  This application is based on work donated by Adobe and their component explorer and is
+  expected to be updated over time.
+  
+  
+==========================================================================================
+Initial Setup Required
+==========================================================================================            
+  
+    The environment variable FLEX_HOME needs to be set to the absolute path of the Apache
+    Flex SDK. If you prefer you can set this in env.properties.
+  
+==========================================================================================
+How to build Tour De Flex using ant (no IDE is required)
+==========================================================================================
+
+1.  On Linux or Mac un tar/gzip the source distribution:
+	    tar -zxvf apache-flex-tour-de-flex-component-explorer-1.2.tar.gz
+	Or if on windows unzip 
+		apache-flex-tour-de-flex-component-explorer-1.2.zip
+
+2.  In the base directory, run:
+        ant compile
+        
+3. To optionally create a release source package, run:
+ 		ant package
+
+4. Open explorer.html in your browser of choice. 
+
+Note Some browsers (such as Chrome) may not be able to view local content without further
+configuration.
+
+5. To remove all of the compiled swfs:
+ 		ant clean
+ 		
+==========================================================================================
+Some other useful ant targets
+========================================================================================== 		
+	
+There are several other useful ant targets. Note that compile-shell is required if you want
+changes to explorer.xml to take effect.
+
+	 compile-shell     compile explorer shell
+	 compile-mx        compile mx examples
+	 compile-spark     compile first set of spark examples
+	 compile-spark2    compile second set of spark examples
+	 compile-spark3    compile third set of spark examples
+ 	 compile-apache    compile apache examples
+ 	 compile-squiggly  compile apache squiggly examples
+	 package-tar       tar up all source files
+	 package-zip       zip up all source files
+
+==========================================================================================
+Compiling a single example
+==========================================================================================
+
+Most of the examples can be compiled by hand with mxmlc. For example:
+
+	mxmlc ./src/spark/controls/ListExample.mxml 
+ 		
+==========================================================================================
+How to check the code out of Git
+==========================================================================================
+
+1.  Check out the the code from the Apache Flex utilities project
+	 git clone https://git-wip-us.apache.org/repos/asf/flex-utilities.git flex-utilities
+	 cd flex-utilities
+	 git checkout develop 
+
+2.  Change directory to:
+	cd TourDeFlex/TourDeFlex3
+
+
+Thanks for using Apache Flex.  Enjoy!
+
+       The Apache Flex Project
+       <http://flex.apache.org>	
diff --git a/tourdeflexmodules/RELEASE_NOTES b/tourdeflexmodules/RELEASE_NOTES
new file mode 100644
index 0000000..a8faa5f
--- /dev/null
+++ b/tourdeflexmodules/RELEASE_NOTES
@@ -0,0 +1,68 @@
+------------------------------------------------
+Apache Flex Tour De Flex Component Explorer 1.2
+------------------------------------------------
+
+Apache Flex Tour De Flex 1.2 is an update to 1.1 adding a few minor improvements.
+
+Changes since the version 1.1
+- Added welcome page
+- Added support for 3rd party examples
+- Changed examples look and feel to be more consistent
+- Added Squiggly spelling engine examples
+
+Known issues:
+- Callout example in the Apache Flex 4.9 examples fails to show the callout.
+  The sample code will work externally. See FLEX-34539 for details.
+  
+Bugs fixed and improvements:
+FLEX-34505 Add squiggly example to Tour De Flex
+FLEX-34501 Allow 3rd parties to provide examples for inclusion in TourDeFlex
+FLEX-34596 Tour De Flex linking is broken
+FLEX-34493 Loading bar not centered in panel
+FLEX-34485 Improve TourDeFlex consistency and design
+
+------------------------------------------------
+Apache Flex Tour De Flex Component Explorer 1.1
+------------------------------------------------
+
+Apache Flex Tour De Flex 1.1 is an update to 1.0 adding a few improvements and
+fixing a few broken and non working examples.
+
+Changes since the version 1.0
+- Update README and RELEASE_NOTES
+- Added some Apache Flex specific examples (we would like to see more)
+- Added button to copy code in source tab
+- Added button to link to github code
+- Added button to copy link to example
+- Improved build file ant tasks descriptions
+- Removed broken view source URLs
+- Fixed a few other minor issues
+- Now contains over 300 examples!
+
+Known issues:
+- Callout example in the Apache Flex 4.9 examples fails to show the callout.
+  The sample code will work externally. See FLEX-34539 for details.
+
+Bugs fixed and improvements:
+FLEX-34530 TDF ScrollBarExample not setting up default vertical scroll and 2 warnings
+FLEX-34529 TDF Bidirectional binding example label/warning
+FLEX-34502 Add link to github in TourDeFlex
+FLEX-34500 Show total number of examples in Tour De Flex UI
+FLEX-34495 Error loading source file
+FLEX-34492 Need ability to link to examples
+FLEX-34491 The Spark Module Load example is non functional
+FLEX-34490 The Spark Video example produces a "Playback Error"
+FLEX-34489 Some examples are missing all source files tab
+FLEX-34488 Add favicon to TourDeFlex
+FLEX-34483 Make logo links to Apache Flex web site
+FLEX-34482 Add copy button to copy code examples to clipboard
+FLEX-34480 If TourDeFlex is run from an untrusted location you get an error
+FLEX-34479 Change naming format of TourDeFlex
+FLEX-34478 Wrong paths for video in TourDeFlex application
+FLEX-34474 TourDeFlex effects example bad styles and modifying default destination scaling
+
+------------------------------------------------
+Apache Flex Tour De Flex Component Explorer 1.0
+------------------------------------------------
+
+Initial parity release for Adobe's Tour De Flex Component Explorer.
\ No newline at end of file
diff --git a/tourdeflexmodules/build.xml b/tourdeflexmodules/build.xml
new file mode 100644
index 0000000..876a68f
--- /dev/null
+++ b/tourdeflexmodules/build.xml
@@ -0,0 +1,524 @@
+<?xml version="1.0" ?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<project name="TourDeFlex" default="compile" basedir=".">
+
+    <property file="${basedir}/env.properties"/>
+    <property environment="env"/>
+    <property file="${basedir}/local.properties"/>
+    <property file="${basedir}/build.properties"/>
+    <condition property="FLEX_HOME" value="${env.FLEX_HOME}">
+        <isset property="env.FLEX_HOME" />
+    </condition>
+    <property name="version" value="1.2" />
+	
+    <!-- additional tasks - mxmlc tag -->
+    <path id="flexTasks.path">
+        <fileset dir="${FLEX_HOME}">
+            <include name="lib/flexTasks.jar" />
+            <include name="ant/lib/flexTasks.jar" />
+        </fileset>
+    </path>
+    <taskdef resource="flexTasks.tasks" classpathref="flexTasks.path"/>
+   
+    <macrodef name="compile-mxml">
+    	 <attribute name="example"/>
+        
+        <sequential>
+   			<mxmlc file="${basedir}/src/@{example}.mxml"
+            	output="${basedir}/src/@{example}.swf" fork="true" failonerror="true">
+				<load-config filename="${FLEX_HOME}/frameworks/flex-config.xml"/>
+			</mxmlc>
+		</sequential>
+	</macrodef>	
+	
+    <macrodef name="compile-mxml-locales">
+    	 <attribute name="example"/>
+    	 <attribute name="locales" default="en_US"/>
+        
+        <sequential>
+   			<mxmlc file="${basedir}/src/@{example}.mxml"
+            	output="${basedir}/src/@{example}.swf" fork="true" failonerror="true">
+   				<locale>en_US</locale>
+   				<locale>en_AU</locale>
+   				<locale>en_GB</locale>
+   				<locale>en_CA</locale>
+   				<locale>el_GR</locale>
+   				<locale>de_CH</locale>
+   				<locale>pt_PT</locale>
+				<load-config filename="${FLEX_HOME}/frameworks/flex-config.xml"/>
+			</mxmlc>
+		</sequential>
+	</macrodef>
+	
+	<target name="compile" description="compile all examples and the explorer shell" depends="compile-shell,compile-mx,compile-spark,compile-spark2,compile-spark3,compile-apache">
+	</target>
+	
+	<target name="compile-shell" description="compile explorer shell">
+		<compile-mxml example="/explorer"/>
+		<compile-mxml-locales example="/loaderPanel"/>
+		<compile-mxml example="/SourceTab"/>
+		<compile-mxml example="/Welcome"/>
+	</target>
+	
+	<target name="compile-mx" description="compile mx examples">
+		<compile-mxml example="/mx/charts/BubbleChartExample"/>
+		<compile-mxml example="/mx/charts/CandlestickChartExample"/>
+		<compile-mxml example="/mx/charts/Column_BarChartExample"/>
+		<compile-mxml example="/mx/charts/DateTimeAxisExample"/>
+		<compile-mxml example="/mx/charts/GridLinesExample"/>
+		<compile-mxml example="/mx/charts/HLOCChartExample"/>
+		<compile-mxml example="/mx/charts/Line_AreaChartExample"/>
+		<compile-mxml example="/mx/charts/LogAxisExample"/>
+		<compile-mxml example="/mx/charts/PieChartExample"/>
+		<compile-mxml example="/mx/charts/PlotChartExample"/>
+		<compile-mxml example="/mx/charts/SeriesInterpolateExample"/>
+		<compile-mxml example="/mx/charts/SeriesSlideExample"/>
+		<compile-mxml example="/mx/charts/SeriesZoomExample"/>
+		<compile-mxml example="/mx/containers/AccordionExample"/>
+		<compile-mxml example="/mx/containers/DividedBoxExample"/>
+		<compile-mxml example="/mx/containers/FormExample"/>
+		<compile-mxml example="/mx/containers/GridLayoutExample"/>
+		<compile-mxml example="/mx/containers/HBoxExample"/>
+		<compile-mxml example="/mx/containers/HDividedBoxExample"/>
+		<compile-mxml example="/mx/containers/SimpleApplicationControlBarExample"/>
+		<compile-mxml example="/mx/containers/SimpleBoxExample"/>
+		<compile-mxml example="/mx/containers/SimpleCanvasExample"/>
+		<compile-mxml example="/mx/containers/SimpleControlBarExample"/>
+		<compile-mxml example="/mx/containers/SimplePanelExample"/>
+		<compile-mxml example="/mx/containers/SimpleTitleWindowExample"/>
+		<compile-mxml example="/mx/containers/TabNavigatorExample"/>
+		<compile-mxml example="/mx/containers/TileLayoutExample"/>
+		<compile-mxml example="/mx/containers/TitleWindowApp"/>
+		<compile-mxml example="/mx/containers/VBoxExample"/>
+		<compile-mxml example="/mx/containers/VDividedBoxExample"/>
+		<compile-mxml example="/mx/containers/ViewStackExample"/>
+		<compile-mxml example="/mx/controls/AdvancedDataGridExample"/>
+		<compile-mxml example="/mx/controls/ButtonBarExample"/>
+		<compile-mxml example="/mx/controls/ButtonExample"/>
+		<compile-mxml example="/mx/controls/CheckBoxExample"/>
+		<compile-mxml example="/mx/controls/ColorPickerExample"/>
+		<compile-mxml example="/mx/controls/DateChooserExample"/>
+		<compile-mxml example="/mx/controls/DateFieldExample"/>
+		<compile-mxml example="/mx/controls/HorizontalListExample"/>
+		<compile-mxml example="/mx/controls/HScrollBarExample"/>
+		<compile-mxml example="/mx/controls/LabelExample"/>
+		<compile-mxml example="/mx/controls/LinkBarExample"/>
+		<compile-mxml example="/mx/controls/LinkButtonExample"/>
+		<compile-mxml example="/mx/controls/Local"/>
+		<compile-mxml example="/mx/controls/MenuBarExample"/>
+		<compile-mxml example="/mx/controls/NumericStepperExample"/>
+		<compile-mxml example="/mx/controls/OLAPDataGridExample"/>
+		<compile-mxml example="/mx/controls/PopUpButtonExample"/>
+		<compile-mxml example="/mx/controls/PopUpButtonMenuExample"/>
+		<compile-mxml example="/mx/controls/RadioButtonExample"/>
+		<compile-mxml example="/mx/controls/RadioButtonGroupExample"/>
+		<compile-mxml example="/mx/controls/RichTextEditorExample"/>
+		<compile-mxml example="/mx/controls/SimpleAlert"/>
+		<compile-mxml example="/mx/controls/SimpleComboBox"/>
+		<compile-mxml example="/mx/controls/SimpleDataGrid"/>
+		<compile-mxml example="/mx/controls/SimpleHRule"/>
+		<compile-mxml example="/mx/controls/SimpleImage"/>
+		<compile-mxml example="/mx/controls/SimpleImageHSlider"/>
+		<compile-mxml example="/mx/controls/SimpleImageVSlider"/>
+		<compile-mxml example="/mx/controls/SimpleList"/>
+		<compile-mxml example="/mx/controls/SimpleLoader"/>
+		<compile-mxml example="/mx/controls/SimpleMenuExample"/>
+		<compile-mxml example="/mx/controls/SimpleProgressBar"/>
+		<compile-mxml example="/mx/controls/SimpleVRule"/>
+		<compile-mxml example="/mx/controls/SpacerExample"/>
+		<compile-mxml example="/mx/controls/TabBarExample"/>
+		<compile-mxml example="/mx/controls/TextAreaExample"/>
+		<compile-mxml example="/mx/controls/TextExample"/>
+		<compile-mxml example="/mx/controls/TextInputExample"/>
+		<compile-mxml example="/mx/controls/TileListExample"/>
+		<compile-mxml example="/mx/controls/ToggleButtonBarExample"/>
+		<compile-mxml example="/mx/controls/TreeExample"/>
+		<compile-mxml example="/mx/controls/VideoDisplayExample"/>
+		<compile-mxml example="/mx/controls/VScrollBarExample"/>
+		<compile-mxml example="/mx/core/RepeaterExample"/>
+		<compile-mxml example="/mx/core/SimpleApplicationExample"/>
+		<compile-mxml example="/mx/effects/AddItemActionEffectExample"/>
+		<compile-mxml example="/mx/effects/AnimatePropertyEffectExample"/>
+		<compile-mxml example="/mx/effects/BlurEffectExample"/>
+		<compile-mxml example="/mx/effects/CompositeEffectExample"/>
+		<compile-mxml example="/mx/effects/DefaultListEffectExample"/>
+		<compile-mxml example="/mx/effects/DefaultTileListEffectExample"/>
+		<compile-mxml example="/mx/effects/DissolveEffectExample"/>
+		<compile-mxml example="/mx/effects/FadeEffectExample"/>
+		<compile-mxml example="/mx/effects/GlowEffectExample"/>
+		<compile-mxml example="/mx/effects/IrisEffectExample"/>
+		<compile-mxml example="/mx/effects/MoveEffectExample"/>
+		<compile-mxml example="/mx/effects/ParallelEffectExample"/>
+		<compile-mxml example="/mx/effects/PauseEffectExample"/>
+		<compile-mxml example="/mx/effects/ResizeEffectExample"/>
+		<compile-mxml example="/mx/effects/RotateEffectExample"/>
+		<compile-mxml example="/mx/effects/SequenceEffectExample"/>
+		<compile-mxml example="/mx/effects/SimpleEffectExample"/>
+		<compile-mxml example="/mx/effects/SimpleTweenEffectExample"/>
+		<compile-mxml example="/mx/effects/SoundEffectExample"/>
+		<compile-mxml example="/mx/effects/WipeDownExample"/>
+		<compile-mxml example="/mx/effects/WipeLeftExample"/>
+		<compile-mxml example="/mx/effects/WipeRightExample"/>
+		<compile-mxml example="/mx/effects/WipeUpExample"/>
+		<compile-mxml example="/mx/effects/ZoomEffectExample"/>
+		<compile-mxml example="/mx/formatters/CurrencyFormatterExample"/>
+		<compile-mxml example="/mx/formatters/DateFormatterExample"/>
+		<compile-mxml example="/mx/formatters/NumberFormatterExample"/>
+		<compile-mxml example="/mx/formatters/PhoneFormatterExample"/>
+		<compile-mxml example="/mx/formatters/SimpleFormatterExample"/>
+		<compile-mxml example="/mx/formatters/SwitchSymbolFormatterExample"/>
+		<compile-mxml example="/mx/formatters/ZipCodeFormatterExample"/>
+		<compile-mxml example="/mx/printing/AdvancedPrintDataGridExample"/>
+		<compile-mxml example="/mx/printing/FormPrintFooter"/>
+		<compile-mxml example="/mx/printing/FormPrintHeader"/>
+		<compile-mxml example="/mx/printing/FormPrintView"/>
+		<compile-mxml example="/mx/printing/PrintDataGridExample"/>
+		<compile-mxml example="/mx/states/StatesExample"/>
+		<compile-mxml example="/mx/states/TransitionExample"/>
+		<compile-mxml example="/mx/validators/CreditCardValidatorExample"/>
+		<compile-mxml example="/mx/validators/CurrencyValidatorExample"/>
+		<compile-mxml example="/mx/validators/DateValidatorExample"/>
+		<compile-mxml example="/mx/validators/EmailValidatorExample"/>
+		<compile-mxml example="/mx/validators/NumberValidatorExample"/>
+		<compile-mxml example="/mx/validators/PhoneNumberValidatorExample"/>
+		<compile-mxml example="/mx/validators/RegExValidatorExample"/>
+		<compile-mxml example="/mx/validators/SimpleValidatorExample"/>
+		<compile-mxml example="/mx/validators/SocialSecurityValidatorExample"/>
+		<compile-mxml example="/mx/validators/StringValidatorExample"/>
+		<compile-mxml example="/mx/validators/ZipCodeValidatorExample"/>
+	</target>
+		
+	<target name="compile-spark" description="compile first set of spark examples">
+		<compile-mxml example="/spark/controls/AccordionExample"/>
+		<compile-mxml example="/spark/controls/AdvancedDatagridExample"/>
+		<compile-mxml example="/spark/controls/ColorPickerExample"/>
+		<compile-mxml example="/spark/controls/ComboBoxExample"/>
+		<compile-mxml example="/spark/controls/DataGridExample"/>
+		<compile-mxml example="/spark/controls/DataGroupExample"/>
+		<compile-mxml example="/spark/controls/MenuExample"/>
+		<compile-mxml example="/spark/controls/RichEditableTextExample"/>
+		<compile-mxml example="/spark/controls/DateChooserExample"/>
+		<compile-mxml example="/spark/controls/DateFieldExample"/>
+		<compile-mxml example="/spark/controls/FormExample"/>
+		<compile-mxml example="/spark/controls/ImageExample"/>
+		<compile-mxml example="/spark/controls/LinkBarExample"/>
+		<compile-mxml example="/spark/controls/LinkButtonExample"/>
+		<compile-mxml example="/spark/controls/OLAPDataGridExample"/>
+		<compile-mxml example="/spark/controls/PopupButtonExample"/>
+		<compile-mxml example="/spark/controls/ProgressBarExample"/>
+		<!-- Currently broken <compile-mxml example="/spark/controls/SWFLoaderExample"/> -->
+		<compile-mxml example="/spark/controls/TitleWindowExample"/>
+		<compile-mxml example="/spark/controls/ToggleButtonBarExample"/>
+		<compile-mxml example="/spark/controls/ToolTipExample"/>
+		<compile-mxml example="/spark/controls/TreeExample"/>
+		<compile-mxml example="/spark/controls/ViewStackExample"/>
+		<compile-mxml example="/spark/controls/TextAreaExample"/>
+		<compile-mxml example="/spark/controls/TextInputExample"/>
+		<compile-mxml example="/spark/controls/TextLayout1Example"/>
+		<compile-mxml example="/spark/controls/TextLayout2Example"/>
+		<compile-mxml example="/spark/controls/TextLayout3Example"/>
+		<compile-mxml example="/spark/controls/TextLayout4Example"/>
+		<compile-mxml example="/spark/controls/VideoDisplayExample"/>
+		
+		<compile-mxml example="/spark/css/CSSDescendantSelectorExample"/>
+		<compile-mxml example="/spark/css/CSSTypeClassSelectorExample"/>
+		
+		<compile-mxml example="/spark/layouts/CustomLayoutAnimatedExample"/>
+		<compile-mxml example="/spark/layouts/CustomLayoutFlickrWheelExample"/>
+		<compile-mxml example="/spark/layouts/CustomLayoutFlowExample"/>
+		<compile-mxml example="/spark/layouts/CustomLayoutHBaselineExample"/>
+		
+		<compile-mxml example="/spark/itemRenderers/ItemRenderer1Example"/>
+		<compile-mxml example="/spark/itemRenderers/ItemRenderer2Example"/>
+		
+		<compile-mxml example="/spark/fxg/BitmapImageExample"/>
+		<compile-mxml example="/spark/fxg/EclipseExample"/>
+		<compile-mxml example="/spark/fxg/LineExample"/>
+		<compile-mxml example="/spark/fxg/RectExample"/>
+		<compile-mxml example="/spark/fxg/RichTextExample"/>
+		
+		<compile-mxml example="/spark/containers/SampleHGroup"/>
+		<compile-mxml example="/spark/containers/SampleVGroup"/>
+		<compile-mxml example="/spark/containers/SampleVerticalHorizontalAlign"/>
+		<compile-mxml example="/spark/containers/SkinnableDataContainerExample"/>
+		<compile-mxml example="/spark/containers/TileGroupExample"/>
+		
+		<compile-mxml example="/spark/effects/Move3DExample"/>
+		<compile-mxml example="/spark/effects/WipeExample"/>
+		
+		<compile-mxml example="/spark/charts/AreaChartExample"/>
+		<compile-mxml example="/spark/charts/BarChartExample"/>
+		<compile-mxml example="/spark/charts/BubbleChartExample"/>
+		<compile-mxml example="/spark/charts/CandleStickChartExample"/>
+		<compile-mxml example="/spark/charts/ColumnChartExample"/>
+		<compile-mxml example="/spark/charts/HLOCChartExample"/>
+		<compile-mxml example="/spark/charts/LineChartExample"/>
+		<compile-mxml example="/spark/charts/PieChartExample"/>
+		<compile-mxml example="/spark/charts/PlotChartExample"/>
+		<compile-mxml example="/spark/charts/SeriesInterpolateExample"/>
+		<compile-mxml example="/spark/charts/SeriesSlideExample"/>
+		<compile-mxml example="/spark/charts/SeriesZoomExample"/>
+			
+		<compile-mxml example="/spark/components/SearchExample"/>
+		<compile-mxml example="/spark/components/VideoPlayerExample"/>
+		
+		<compile-mxml example="/spark/validators/CreditCardValidatorExample"/>
+		<compile-mxml example="/spark/validators/CurrencyValidatorExample"/>
+		<compile-mxml example="/spark/validators/DateValidatorExample"/>
+		<compile-mxml example="/spark/validators/EmailValidatorExample"/>
+		<compile-mxml example="/spark/validators/NumberValidatorExample"/>
+		<compile-mxml example="/spark/validators/RegExpValidatorExample"/>
+		<compile-mxml example="/spark/validators/SocialSecurityValidatorExample"/>
+		<compile-mxml example="/spark/validators/StringValidatorExample"/>
+		<compile-mxml example="/spark/validators/FormValidatorExample"/>
+		<compile-mxml example="/spark/validators/ZipCodeValidatorExample"/>
+		
+		<compile-mxml example="/spark/formatters/CurrencyFormatterExample"/>
+		<compile-mxml example="/spark/formatters/DateFormatterExample"/>
+		<compile-mxml example="/spark/formatters/NumberFormatterExample"/>
+		<compile-mxml example="/spark/formatters/PhoneFormatterExample"/>
+		<compile-mxml example="/spark/formatters/SwitchFormatterExample"/>
+		<compile-mxml example="/spark/formatters/ZipCodeFormatterExample"/>
+		
+		<compile-mxml example="/spark/other/Cursor1Example"/>
+		<compile-mxml example="/spark/other/Cursor2Example"/>
+		<compile-mxml example="/spark/other/DragAndDrop1Example"/>
+		<compile-mxml example="/spark/other/DragAndDrop2Example"/>
+		<compile-mxml example="/spark/other/FilterExample"/>
+		<compile-mxml example="/spark/other/RepeaterExample"/>
+		<compile-mxml example="/spark/other/ScrollBarsExample"/>
+		
+		<compile-mxml example="/spark/events/EventExample1"/>
+		<compile-mxml example="/spark/events/EventExample2"/>
+		<compile-mxml example="/spark/events/EventExample3"/>
+		<compile-mxml example="/spark/events/EventExample4"/>
+		<compile-mxml example="/spark/events/EventExample5"/>
+		<compile-mxml example="/spark/events/EventExample6"/>
+		
+		<compile-mxml example="/spark/modules/ModuleExample"/>
+		<compile-mxml example="/spark/modules/Module1"/>
+		<compile-mxml example="/spark/modules/Module2"/>
+
+		<!-- currently broken <compile-mxml example="/spark/tlf/TextLayoutEditorSample"/> -->
+	</target>
+	
+	<target name="compile-spark2" description="compile second set of spark examples">
+		<compile-mxml example="/spark/i18n/SparkCollatorExample"/>
+		<compile-mxml example="/spark/i18n/SparkCollator2Example"/>
+		<compile-mxml example="/spark/i18n/SparkCurrencyValidatorExample"/>
+		<compile-mxml example="/spark/i18n/SparkCurrencyValidator2Example"/>
+		<compile-mxml example="/spark/i18n/SparkNumberValidatorExample"/>
+		<compile-mxml example="/spark/i18n/SparkNumberValidator2Example"/>
+		<compile-mxml example="/spark/i18n/SparkDateTimeFormatterExample"/>
+		<compile-mxml example="/spark/i18n/SparkDateTimeFormatter2Example"/>
+		<compile-mxml example="/spark/i18n/SparkCurrencyFormatterExample"/>
+		<compile-mxml example="/spark/i18n/SparkCurrencyFormatter2Example"/>
+		<compile-mxml example="/spark/i18n/SparkNumberFormatterExample"/>
+		<compile-mxml example="/spark/i18n/SparkNumberFormatter2Example"/>
+		<compile-mxml example="/spark/i18n/SparkSortandSortFieldExample"/>
+		<compile-mxml example="/spark/i18n/SparkSortandSortField2Example"/>
+		<compile-mxml example="/spark/i18n/SparkStringToolsExample"/>
+		<compile-mxml example="/spark/i18n/SparkFormatterExample"/>
+		
+		<compile-mxml example="/spark/controls/DataGridCustomRendererExample"/>
+		<compile-mxml example="/spark/controls/DataGridCustomRendererPrepareExample"/>
+		<compile-mxml example="/spark/controls/DataGridCustomSkinExample"/>
+		<compile-mxml example="/spark/controls/DataGridExample2"/>
+		<compile-mxml example="/spark/controls/DataGridSimpleColumnsExample"/>
+		<compile-mxml example="/spark/controls/DataGridSimpleNoWrapExample"/>
+		<compile-mxml example="/spark/controls/DataGridSizingExample"/>
+		
+		<compile-mxml example="/spark/controls/ListDataPagingExample"/>
+				
+		<compile-mxml example="/spark/controls/SampleHelpFormExample"/>
+		<compile-mxml example="/spark/controls/SampleSequenceFormExample"/>
+		<compile-mxml example="/spark/controls/SampleSimpleFormExample"/>
+		<compile-mxml example="/spark/controls/SampleStackedFormExample"/>
+		
+		<compile-mxml example="/spark/controls/OSMFExample"/>
+	</target>
+	
+	<target name="compile-spark3" description="compile third set of spark examples">
+		<compile-mxml example="/spark/other/BidirectionalBinding1Example"/>
+		<compile-mxml example="/spark/other/BidirectionalBinding2Example"/>
+		<compile-mxml example="/spark/other/ControllingViewportExample"/>
+		<compile-mxml example="/spark/itemRenderers/ListItemRendererExample"/>
+		<compile-mxml example="/spark/effects/AnimatePropertiesExample"/>
+		<compile-mxml example="/spark/effects/AnimateTransformExample"/>
+		<compile-mxml example="/spark/effects/CrossFadeExample"/>
+		<compile-mxml example="/spark/effects/FadeExample"/>
+		<compile-mxml example="/spark/effects/Rotate3DExample"/>
+		<compile-mxml example="/spark/effects/Scale3DExample"/>
+		<compile-mxml example="/spark/fxg/EllipseTransformExample"/>
+		<compile-mxml example="/spark/fxg/DropShadowGraphicExample"/>
+		<compile-mxml example="/spark/fxg/LinearGradientsSpreadMethodExample"/>
+		<compile-mxml example="/spark/fxg/StaticFXGExample"/>
+		<compile-mxml example="/spark/containers/BorderExample"/>
+		<compile-mxml example="/spark/containers/GroupExample"/>
+		<compile-mxml example="/spark/containers/PanelExample"/>
+		<compile-mxml example="/spark/containers/TabNavigator1Example"/>
+		<compile-mxml example="/spark/containers/TabNavigator2Example"/>
+		<compile-mxml example="/spark/skinning/ButtonWithIconExample"/>
+		<compile-mxml example="/spark/skinning/SkinningApplication1Example"/>
+		<compile-mxml example="/spark/skinning/SkinningApplication2Example"/>
+		<compile-mxml example="/spark/skinning/SkinningApplication3Example"/>
+		<compile-mxml example="/spark/skinning/SkinningContainerExample"/>
+		<compile-mxml example="/spark/css/CSSIDSelectorExample"/>
+		<compile-mxml example="/spark/controls/ButtonExample"/>
+		<compile-mxml example="/spark/controls/ButtonBarExample"/>
+		<compile-mxml example="/spark/controls/PopUpAnchor1Example"/>
+		<compile-mxml example="/spark/controls/PopUpAnchor2Example"/>
+		<compile-mxml example="/spark/controls/ToggleButtonExample"/>
+		<compile-mxml example="/spark/controls/CheckboxExample"/>
+		<compile-mxml example="/spark/controls/DropdownExample"/>
+		<compile-mxml example="/spark/controls/NumericStepperExample"/>
+		<compile-mxml example="/spark/controls/RadioButtonExample"/>
+		<compile-mxml example="/spark/controls/ToggleButton2Example"/>
+		<compile-mxml example="/spark/controls/ScrollBarExample"/>
+		<compile-mxml example="/spark/controls/Scroller1Example"/>
+		<compile-mxml example="/spark/controls/Scroller2Example"/>
+		<compile-mxml example="/spark/controls/SliderExample"/>
+		<compile-mxml example="/spark/controls/SpinnerExample"/>
+		<compile-mxml example="/spark/controls/VideoPlayerExample"/>
+		<compile-mxml example="/spark/controls/ListExample"/>
+	</target>
+	
+	<target name="compile-apache" description="compile apache examples">
+		<compile-mxml example="/apache/ApacheFlex4_8_0"/>
+		<compile-mxml example="/apache/ApacheFlex4_9_0"/>
+		<compile-mxml example="/apache/ApacheFlex4_10_0"/>
+		<compile-mxml example="/apache/ApacheFlex4_11_0"/>
+		<compile-mxml example="/apache/ApacheFlex4_12_1"/>
+		<compile-mxml example="/apache/ApacheFlex4_13_0"/>
+		<!-- <compile-mxml example="/apache/ApacheFlex4_13_0"/> -->
+		
+		<compile-mxml example="/apache/formatters/PostCodeFormatterExample"/>
+		<compile-mxml example="/apache/validators/PostCodeValidatorExample"/>
+		<compile-mxml-locales example="/apache/i18n/LocaleExample"/>
+		<compile-mxml example="/apache/i18n/DateExample"/>
+		<compile-mxml example="/apache/i18n/TimeZoneExample"/>
+		<compile-mxml example="/apache/i18n/MillisecondExample"/>
+		<compile-mxml example="/apache/i18n/ScientificExample"/>
+		<compile-mxml example="/apache/i18n/NumericStepperExample"/>
+		<compile-mxml example="/apache/containers/CalloutExample"/>
+		<compile-mxml example="/apache/controls/MaskedTextInputExample"/>
+		
+		<!-- Uncomment when Flex 4.14 is released -->
+		<!-- compile-mxml example="/apache/controls/SparkRichTextEditorExample"/-->
+	</target>
+	
+    <!--- don't worry about squiggly for now -->
+		
+	<target name="package" description="package up all source files" depends="package-dir,package-tar,package-zip">
+	</target>
+	
+	<target name="package-dir">
+		<delete dir="${basedir}/out"/>  
+		<mkdir dir="${basedir}/out"/> 
+	</target>
+		
+	<target name="package-tar" description="tar up all source files">     
+        <tar destfile="${basedir}/out/apache-flex-tour-de-flex-component-explorer-${version}-src.tar.gz" 
+         	compression="gzip"
+            longfile="gnu">
+            <tarfileset dir="${basedir}/..">
+                <include name="LICENSE" />
+            	<include name="NOTICE" />
+            	<include name="CONTRIB*" />
+            </tarfileset>
+            <tarfileset dir="${basedir}">
+                <include name="README" />
+                <include name="RELEASE_NOTES" />
+                <include name="build.xml" />
+            	<include name="src/favicon.ico" />
+                <include name="src/index.html" />
+                <include name="src/explorer.xml" />
+                <include name="src/swfobject.js" />
+                <include name="**/*.mxml" />
+                <include name="**/*.as" />
+                <include name="**/*.jpg" />
+                <include name="**/*.png" />
+                <include name="**/*.gif" />
+                <include name="**/*.ttf" />
+                <include name="**/*.mp4" />
+                <include name="**/*.mp3" />
+                <include name="**/*.fxg" />
+                <include name="**/*.xml" />
+            	<exclude name="**/*.swf" />
+            	<exclude name="installer.xml" />
+            	<exclude name="squiggly" />
+                <exclude name="dictionaries" />
+            	<exclude name="src/dictionaries" />
+            	<exclude name="src/apache/squiggly/dictionaries" />
+             </tarfileset>
+         </tar>
+	</target>
+	
+	<target name="package-zip" description="zip up all source files">    
+        <zip destfile="${basedir}/out/apache-flex-tour-de-flex-component-explorer-${version}-src.zip">
+            <fileset dir="${basedir}/..">
+                <include name="LICENSE" />
+                <include name="NOTICE" />
+            	<include name="CONTRIB*" />
+            </fileset>
+            <fileset dir="${basedir}">
+                <include name="README" />
+                <include name="RELEASE_NOTES" />
+                <include name="build.xml" />
+            	<include name="src/favicon.ico" />
+                <include name="src/index.html" />
+                <include name="src/explorer.xml" />
+                <include name="src/swfobject.js" />
+                <include name="**/*.mxml" />
+                <include name="**/*.as" />
+                <include name="**/*.jpg" />
+                <include name="**/*.png" />
+                <include name="**/*.gif" />
+                <include name="**/*.ttf" />
+                <include name="**/*.mp4" />
+                <include name="**/*.mp3" />
+                <include name="**/*.fxg" />
+                <include name="**/*.xml" />
+                <exclude name="**/*.swf" />
+            	<exclude name="installer.xml" />
+            	<exclude name="squiggly" />
+            	<exclude name="dictionaries" />
+                <exclude name="src/dictionaries" />
+            	<exclude name="src/apache/squiggly/dictionaries" />
+             </fileset>
+         </zip>
+	</target>
+   
+   <target name="create-md5" >
+       <echo message="Generating MD5 hashes for release artifacts"/>
+       <checksum algorithm="md5" file="${basedir}/out/apache-flex-tour-de-flex-component-explorer-${version}-src.tar.gz" forceOverwrite="yes"/>
+       <checksum algorithm="md5" file="${basedir}/out/apache-flex-tour-de-flex-component-explorer-${version}-src.zip" forceOverwrite="yes"/>
+   </target>
+
+    <target name="clean" description="clean up">
+    	<delete>
+    		<fileset dir="${basedir}" includes="**/*.swf" />
+    	</delete>
+    	<delete dir="${basedir}/squiggly" />
+    	<delete dir="${basedir}/dictionaries" />
+        <delete dir="${basedir}/src/dictionaries" />
+    	<delete dir="${basedir}/src/apache/squiggly/dictionaries" />
+    </target>
+</project>
diff --git a/tourdeflexmodules/html-template/history/history.css b/tourdeflexmodules/html-template/history/history.css
new file mode 100755
index 0000000..822d47e
--- /dev/null
+++ b/tourdeflexmodules/html-template/history/history.css
@@ -0,0 +1,22 @@
+/*
+ * 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.
+ */
+/* This CSS stylesheet defines styles used by required elements in a flex application page that supports browser history */
+
+#ie_historyFrame { width: 0px; height: 0px; display:none }
+#firefox_anchorDiv { width: 0px; height: 0px; display:none }
+#safari_formDiv { width: 0px; height: 0px; display:none }
+#safari_rememberDiv { width: 0px; height: 0px; display:none }
diff --git a/tourdeflexmodules/html-template/history/history.js b/tourdeflexmodules/html-template/history/history.js
new file mode 100755
index 0000000..1f41c7f
--- /dev/null
+++ b/tourdeflexmodules/html-template/history/history.js
@@ -0,0 +1,694 @@
+/*
+ * 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.
+ */
+BrowserHistoryUtils = {
+    addEvent: function(elm, evType, fn, useCapture) {
+        useCapture = useCapture || false;
+        if (elm.addEventListener) {
+            elm.addEventListener(evType, fn, useCapture);
+            return true;
+        }
+        else if (elm.attachEvent) {
+            var r = elm.attachEvent('on' + evType, fn);
+            return r;
+        }
+        else {
+            elm['on' + evType] = fn;
+        }
+    }
+}
+
+BrowserHistory = (function() {
+    // type of browser
+    var browser = {
+        ie: false, 
+        ie8: false, 
+        firefox: false, 
+        safari: false, 
+        opera: false, 
+        version: -1
+    };
+
+    // Default app state URL to use when no fragment ID present
+    var defaultHash = '';
+
+    // Last-known app state URL
+    var currentHref = document.location.href;
+
+    // Initial URL (used only by IE)
+    var initialHref = document.location.href;
+
+    // Initial URL (used only by IE)
+    var initialHash = document.location.hash;
+
+    // History frame source URL prefix (used only by IE)
+    var historyFrameSourcePrefix = 'history/historyFrame.html?';
+
+    // History maintenance (used only by Safari)
+    var currentHistoryLength = -1;
+    
+    // Flag to denote the existence of onhashchange
+    var browserHasHashChange = false;
+
+    var historyHash = [];
+
+    var initialState = createState(initialHref, initialHref + '#' + initialHash, initialHash);
+
+    var backStack = [];
+    var forwardStack = [];
+
+    var currentObjectId = null;
+
+    //UserAgent detection
+    var useragent = navigator.userAgent.toLowerCase();
+
+    if (useragent.indexOf("opera") != -1) {
+        browser.opera = true;
+    } else if (useragent.indexOf("msie") != -1) {
+        browser.ie = true;
+        browser.version = parseFloat(useragent.substring(useragent.indexOf('msie') + 4));
+        if (browser.version == 8)
+        {
+            browser.ie = false;
+            browser.ie8 = true;
+        }
+    } else if (useragent.indexOf("safari") != -1) {
+        browser.safari = true;
+        browser.version = parseFloat(useragent.substring(useragent.indexOf('safari') + 7));
+    } else if (useragent.indexOf("gecko") != -1) {
+        browser.firefox = true;
+    }
+
+    if (browser.ie == true && browser.version == 7) {
+        window["_ie_firstload"] = false;
+    }
+
+    function hashChangeHandler()
+    {
+        currentHref = document.location.href;
+        var flexAppUrl = getHash();
+        //ADR: to fix multiple
+        if (typeof BrowserHistory_multiple != "undefined" && BrowserHistory_multiple == true) {
+            var pl = getPlayers();
+            for (var i = 0; i < pl.length; i++) {
+                pl[i].browserURLChange(flexAppUrl);
+            }
+        } else {
+            getPlayer().browserURLChange(flexAppUrl);
+        }
+    }
+
+    // Accessor functions for obtaining specific elements of the page.
+    function getHistoryFrame()
+    {
+        return document.getElementById('ie_historyFrame');
+    }
+
+    function getFormElement()
+    {
+        return document.getElementById('safari_formDiv');
+    }
+
+    function getRememberElement()
+    {
+        return document.getElementById("safari_remember_field");
+    }
+
+    // Get the Flash player object for performing ExternalInterface callbacks.
+    // Updated for changes to SWFObject2.
+    function getPlayer(id) {
+        var i;
+
+		if (id && document.getElementById(id)) {
+			var r = document.getElementById(id);
+			if (typeof r.SetVariable != "undefined") {
+				return r;
+			}
+			else {
+				var o = r.getElementsByTagName("object");
+				var e = r.getElementsByTagName("embed");
+                for (i = 0; i < o.length; i++) {
+                    if (typeof o[i].browserURLChange != "undefined")
+                        return o[i];
+                }
+                for (i = 0; i < e.length; i++) {
+                    if (typeof e[i].browserURLChange != "undefined")
+                        return e[i];
+                }
+			}
+		}
+		else {
+			var o = document.getElementsByTagName("object");
+			var e = document.getElementsByTagName("embed");
+            for (i = 0; i < e.length; i++) {
+                if (typeof e[i].browserURLChange != "undefined")
+                {
+                    return e[i];
+                }
+            }
+            for (i = 0; i < o.length; i++) {
+                if (typeof o[i].browserURLChange != "undefined")
+                {
+                    return o[i];
+                }
+            }
+		}
+		return undefined;
+	}
+    
+    function getPlayers() {
+        var i;
+        var players = [];
+        if (players.length == 0) {
+            var tmp = document.getElementsByTagName('object');
+            for (i = 0; i < tmp.length; i++)
+            {
+                if (typeof tmp[i].browserURLChange != "undefined")
+                    players.push(tmp[i]);
+            }
+        }
+        if (players.length == 0 || players[0].object == null) {
+            var tmp = document.getElementsByTagName('embed');
+            for (i = 0; i < tmp.length; i++)
+            {
+                if (typeof tmp[i].browserURLChange != "undefined")
+                    players.push(tmp[i]);
+            }
+        }
+        return players;
+    }
+
+	function getIframeHash() {
+		var doc = getHistoryFrame().contentWindow.document;
+		var hash = String(doc.location.search);
+		if (hash.length == 1 && hash.charAt(0) == "?") {
+			hash = "";
+		}
+		else if (hash.length >= 2 && hash.charAt(0) == "?") {
+			hash = hash.substring(1);
+		}
+		return hash;
+	}
+
+    /* Get the current location hash excluding the '#' symbol. */
+    function getHash() {
+       // It would be nice if we could use document.location.hash here,
+       // but it's faulty sometimes.
+       var idx = document.location.href.indexOf('#');
+       return (idx >= 0) ? document.location.href.substr(idx+1) : '';
+    }
+
+    /* Get the current location hash excluding the '#' symbol. */
+    function setHash(hash) {
+       // It would be nice if we could use document.location.hash here,
+       // but it's faulty sometimes.
+       if (hash == '') hash = '#'
+       document.location.hash = hash;
+    }
+
+    function createState(baseUrl, newUrl, flexAppUrl) {
+        return { 'baseUrl': baseUrl, 'newUrl': newUrl, 'flexAppUrl': flexAppUrl, 'title': null };
+    }
+
+    /* Add a history entry to the browser.
+     *   baseUrl: the portion of the location prior to the '#'
+     *   newUrl: the entire new URL, including '#' and following fragment
+     *   flexAppUrl: the portion of the location following the '#' only
+     */
+    function addHistoryEntry(baseUrl, newUrl, flexAppUrl) {
+
+        //delete all the history entries
+        forwardStack = [];
+
+        if (browser.ie) {
+            //Check to see if we are being asked to do a navigate for the first
+            //history entry, and if so ignore, because it's coming from the creation
+            //of the history iframe
+            if (flexAppUrl == defaultHash && document.location.href == initialHref && window['_ie_firstload']) {
+                currentHref = initialHref;
+                return;
+            }
+            if ((!flexAppUrl || flexAppUrl == defaultHash) && window['_ie_firstload']) {
+                newUrl = baseUrl + '#' + defaultHash;
+                flexAppUrl = defaultHash;
+            } else {
+                // for IE, tell the history frame to go somewhere without a '#'
+                // in order to get this entry into the browser history.
+                getHistoryFrame().src = historyFrameSourcePrefix + flexAppUrl;
+            }
+            setHash(flexAppUrl);
+        } else {
+
+            //ADR
+            if (backStack.length == 0 && initialState.flexAppUrl == flexAppUrl) {
+                initialState = createState(baseUrl, newUrl, flexAppUrl);
+            } else if(backStack.length > 0 && backStack[backStack.length - 1].flexAppUrl == flexAppUrl) {
+                backStack[backStack.length - 1] = createState(baseUrl, newUrl, flexAppUrl);
+            }
+
+            if (browser.safari && !browserHasHashChange) {
+                // for Safari, submit a form whose action points to the desired URL
+                if (browser.version <= 419.3) {
+                    var file = window.location.pathname.toString();
+                    file = file.substring(file.lastIndexOf("/")+1);
+                    getFormElement().innerHTML = '<form name="historyForm" action="'+file+'#' + flexAppUrl + '" method="GET"></form>';
+                    //get the current elements and add them to the form
+                    var qs = window.location.search.substring(1);
+                    var qs_arr = qs.split("&");
+                    for (var i = 0; i < qs_arr.length; i++) {
+                        var tmp = qs_arr[i].split("=");
+                        var elem = document.createElement("input");
+                        elem.type = "hidden";
+                        elem.name = tmp[0];
+                        elem.value = tmp[1];
+                        document.forms.historyForm.appendChild(elem);
+                    }
+                    document.forms.historyForm.submit();
+                } else {
+                    top.location.hash = flexAppUrl;
+                }
+                // We also have to maintain the history by hand for Safari
+                historyHash[history.length] = flexAppUrl;
+                _storeStates();
+            } else {
+                // Otherwise, just tell the browser to go there
+                setHash(flexAppUrl);
+            }
+        }
+        backStack.push(createState(baseUrl, newUrl, flexAppUrl));
+    }
+
+    function _storeStates() {
+        if (browser.safari) {
+            getRememberElement().value = historyHash.join(",");
+        }
+    }
+
+    function handleBackButton() {
+        //The "current" page is always at the top of the history stack.
+        var current = backStack.pop();
+        if (!current) { return; }
+        var last = backStack[backStack.length - 1];
+        if (!last && backStack.length == 0){
+            last = initialState;
+        }
+        forwardStack.push(current);
+    }
+
+    function handleForwardButton() {
+        //summary: private method. Do not call this directly.
+
+        var last = forwardStack.pop();
+        if (!last) { return; }
+        backStack.push(last);
+    }
+
+    function handleArbitraryUrl() {
+        //delete all the history entries
+        forwardStack = [];
+    }
+
+    /* Called periodically to poll to see if we need to detect navigation that has occurred */
+    function checkForUrlChange() {
+
+        if (browser.ie) {
+            if (currentHref != document.location.href && currentHref + '#' != document.location.href) {
+                //This occurs when the user has navigated to a specific URL
+                //within the app, and didn't use browser back/forward
+                //IE seems to have a bug where it stops updating the URL it
+                //shows the end-user at this point, but programatically it
+                //appears to be correct.  Do a full app reload to get around
+                //this issue.
+                if (browser.version < 7) {
+                    currentHref = document.location.href;
+                    document.location.reload();
+                } else {
+					if (getHash() != getIframeHash()) {
+						// this.iframe.src = this.blankURL + hash;
+						var sourceToSet = historyFrameSourcePrefix + getHash();
+						getHistoryFrame().src = sourceToSet;
+                        currentHref = document.location.href;
+					}
+                }
+            }
+        }
+
+        if (browser.safari && !browserHasHashChange) {
+            // For Safari, we have to check to see if history.length changed.
+            if (currentHistoryLength >= 0 && history.length != currentHistoryLength) {
+                //alert("did change: " + history.length + ", " + historyHash.length + "|" + historyHash[history.length] + "|>" + historyHash.join("|"));
+                var flexAppUrl = getHash();
+                if (browser.version < 528.16 /* Anything earlier than Safari 4.0 */)
+                {    
+                    // If it did change and we're running Safari 3.x or earlier, 
+                    // then we have to look the old state up in our hand-maintained 
+                    // array since document.location.hash won't have changed, 
+                    // then call back into BrowserManager.
+                currentHistoryLength = history.length;
+                    flexAppUrl = historyHash[currentHistoryLength];
+                }
+
+                //ADR: to fix multiple
+                if (typeof BrowserHistory_multiple != "undefined" && BrowserHistory_multiple == true) {
+                    var pl = getPlayers();
+                    for (var i = 0; i < pl.length; i++) {
+                        pl[i].browserURLChange(flexAppUrl);
+                    }
+                } else {
+                    getPlayer().browserURLChange(flexAppUrl);
+                }
+                _storeStates();
+            }
+        }
+        if (browser.firefox && !browserHasHashChange) {
+            if (currentHref != document.location.href) {
+                var bsl = backStack.length;
+
+                var urlActions = {
+                    back: false, 
+                    forward: false, 
+                    set: false
+                }
+
+                if ((window.location.hash == initialHash || window.location.href == initialHref) && (bsl == 1)) {
+                    urlActions.back = true;
+                    // FIXME: could this ever be a forward button?
+                    // we can't clear it because we still need to check for forwards. Ugg.
+                    // clearInterval(this.locationTimer);
+                    handleBackButton();
+                }
+                
+                // first check to see if we could have gone forward. We always halt on
+                // a no-hash item.
+                if (forwardStack.length > 0) {
+                    if (forwardStack[forwardStack.length-1].flexAppUrl == getHash()) {
+                        urlActions.forward = true;
+                        handleForwardButton();
+                    }
+                }
+
+                // ok, that didn't work, try someplace back in the history stack
+                if ((bsl >= 2) && (backStack[bsl - 2])) {
+                    if (backStack[bsl - 2].flexAppUrl == getHash()) {
+                        urlActions.back = true;
+                        handleBackButton();
+                    }
+                }
+                
+                if (!urlActions.back && !urlActions.forward) {
+                    var foundInStacks = {
+                        back: -1, 
+                        forward: -1
+                    }
+
+                    for (var i = 0; i < backStack.length; i++) {
+                        if (backStack[i].flexAppUrl == getHash() && i != (bsl - 2)) {
+                            arbitraryUrl = true;
+                            foundInStacks.back = i;
+                        }
+                    }
+                    for (var i = 0; i < forwardStack.length; i++) {
+                        if (forwardStack[i].flexAppUrl == getHash() && i != (bsl - 2)) {
+                            arbitraryUrl = true;
+                            foundInStacks.forward = i;
+                        }
+                    }
+                    handleArbitraryUrl();
+                }
+
+                // Firefox changed; do a callback into BrowserManager to tell it.
+                currentHref = document.location.href;
+                var flexAppUrl = getHash();
+                //ADR: to fix multiple
+                if (typeof BrowserHistory_multiple != "undefined" && BrowserHistory_multiple == true) {
+                    var pl = getPlayers();
+                    for (var i = 0; i < pl.length; i++) {
+                        pl[i].browserURLChange(flexAppUrl);
+                    }
+                } else {
+                    getPlayer().browserURLChange(flexAppUrl);
+                }
+            }
+        }
+    }
+
+    var _initialize = function () {
+        
+        browserHasHashChange = ("onhashchange" in document.body);
+        
+        if (browser.ie)
+        {
+            var scripts = document.getElementsByTagName('script');
+            for (var i = 0, s; s = scripts[i]; i++) {
+                if (s.src.indexOf("history.js") > -1) {
+                    var iframe_location = (new String(s.src)).replace("history.js", "historyFrame.html");
+                }
+            }
+            historyFrameSourcePrefix = iframe_location + "?";
+            var src = historyFrameSourcePrefix;
+
+            var iframe = document.createElement("iframe");
+            iframe.id = 'ie_historyFrame';
+            iframe.name = 'ie_historyFrame';
+            iframe.src = 'javascript:false;'; 
+
+            try {
+                document.body.appendChild(iframe);
+            } catch(e) {
+                setTimeout(function() {
+                    document.body.appendChild(iframe);
+                }, 0);
+            }
+        }
+
+        if (browser.safari && !browserHasHashChange)
+        {
+            var rememberDiv = document.createElement("div");
+            rememberDiv.id = 'safari_rememberDiv';
+            document.body.appendChild(rememberDiv);
+            rememberDiv.innerHTML = '<input type="text" id="safari_remember_field" style="width: 500px;">';
+
+            var formDiv = document.createElement("div");
+            formDiv.id = 'safari_formDiv';
+            document.body.appendChild(formDiv);
+
+            var reloader_content = document.createElement('div');
+            reloader_content.id = 'safarireloader';
+            var scripts = document.getElementsByTagName('script');
+            for (var i = 0, s; s = scripts[i]; i++) {
+                if (s.src.indexOf("history.js") > -1) {
+                    html = (new String(s.src)).replace(".js", ".html");
+                }
+            }
+            reloader_content.innerHTML = '<iframe id="safarireloader-iframe" src="about:blank" frameborder="no" scrolling="no"></iframe>';
+            document.body.appendChild(reloader_content);
+            reloader_content.style.position = 'absolute';
+            reloader_content.style.left = reloader_content.style.top = '-9999px';
+            iframe = reloader_content.getElementsByTagName('iframe')[0];
+
+            if (document.getElementById("safari_remember_field").value != "" ) {
+                historyHash = document.getElementById("safari_remember_field").value.split(",");
+            }
+        }
+
+        if (browserHasHashChange)        
+            document.body.onhashchange = hashChangeHandler;
+    }
+
+    return {
+        historyHash: historyHash, 
+        backStack: function() { return backStack; }, 
+        forwardStack: function() { return forwardStack }, 
+        getPlayer: getPlayer, 
+        initialize: function(src) {
+            _initialize(src);
+        }, 
+        setURL: function(url) {
+            document.location.href = url;
+        }, 
+        getURL: function() {
+            return document.location.href;
+        }, 
+        getTitle: function() {
+            return document.title;
+        }, 
+        setTitle: function(title) {
+            try {
+                backStack[backStack.length - 1].title = title;
+            } catch(e) { }
+            //if on safari, set the title to be the empty string. 
+            if (browser.safari) {
+                if (title == "") {
+                    try {
+                    var tmp = window.location.href.toString();
+                    title = tmp.substring((tmp.lastIndexOf("/")+1), tmp.lastIndexOf("#"));
+                    } catch(e) {
+                        title = "";
+                    }
+                }
+            }
+            document.title = title;
+        }, 
+        setDefaultURL: function(def)
+        {
+            defaultHash = def;
+            def = getHash();
+            //trailing ? is important else an extra frame gets added to the history
+            //when navigating back to the first page.  Alternatively could check
+            //in history frame navigation to compare # and ?.
+            if (browser.ie)
+            {
+                window['_ie_firstload'] = true;
+                var sourceToSet = historyFrameSourcePrefix + def;
+                var func = function() {
+                    getHistoryFrame().src = sourceToSet;
+                    window.location.replace("#" + def);
+                    setInterval(checkForUrlChange, 50);
+                }
+                try {
+                    func();
+                } catch(e) {
+                    window.setTimeout(function() { func(); }, 0);
+                }
+            }
+
+            if (browser.safari)
+            {
+                currentHistoryLength = history.length;
+                if (historyHash.length == 0) {
+                    historyHash[currentHistoryLength] = def;
+                    var newloc = "#" + def;
+                    window.location.replace(newloc);
+                } else {
+                    //alert(historyHash[historyHash.length-1]);
+                }
+                setInterval(checkForUrlChange, 50);
+            }
+            
+            
+            if (browser.firefox || browser.opera)
+            {
+                var reg = new RegExp("#" + def + "$");
+                if (window.location.toString().match(reg)) {
+                } else {
+                    var newloc ="#" + def;
+                    window.location.replace(newloc);
+                }
+                setInterval(checkForUrlChange, 50);
+            }
+
+        }, 
+
+        /* Set the current browser URL; called from inside BrowserManager to propagate
+         * the application state out to the container.
+         */
+        setBrowserURL: function(flexAppUrl, objectId) {
+            if (browser.ie && typeof objectId != "undefined") {
+                currentObjectId = objectId;
+            }
+           //fromIframe = fromIframe || false;
+           //fromFlex = fromFlex || false;
+           //alert("setBrowserURL: " + flexAppUrl);
+           //flexAppUrl = (flexAppUrl == "") ? defaultHash : flexAppUrl ;
+
+           var pos = document.location.href.indexOf('#');
+           var baseUrl = pos != -1 ? document.location.href.substr(0, pos) : document.location.href;
+           var newUrl = baseUrl + '#' + flexAppUrl;
+
+           if (document.location.href != newUrl && document.location.href + '#' != newUrl) {
+               currentHref = newUrl;
+               addHistoryEntry(baseUrl, newUrl, flexAppUrl);
+               currentHistoryLength = history.length;
+           }
+        }, 
+
+        browserURLChange: function(flexAppUrl) {
+            var objectId = null;
+            if (browser.ie && currentObjectId != null) {
+                objectId = currentObjectId;
+            }
+            
+            if (typeof BrowserHistory_multiple != "undefined" && BrowserHistory_multiple == true) {
+                var pl = getPlayers();
+                for (var i = 0; i < pl.length; i++) {
+                    try {
+                        pl[i].browserURLChange(flexAppUrl);
+                    } catch(e) { }
+                }
+            } else {
+                try {
+                    getPlayer(objectId).browserURLChange(flexAppUrl);
+                } catch(e) { }
+            }
+
+            currentObjectId = null;
+        },
+        getUserAgent: function() {
+            return navigator.userAgent;
+        },
+        getPlatform: function() {
+            return navigator.platform;
+        }
+
+    }
+
+})();
+
+// Initialization
+
+// Automated unit testing and other diagnostics
+
+function setURL(url)
+{
+    document.location.href = url;
+}
+
+function backButton()
+{
+    history.back();
+}
+
+function forwardButton()
+{
+    history.forward();
+}
+
+function goForwardOrBackInHistory(step)
+{
+    history.go(step);
+}
+
+//BrowserHistoryUtils.addEvent(window, "load", function() { BrowserHistory.initialize(); });
+(function(i) {
+    var u =navigator.userAgent;var e=/*@cc_on!@*/false; 
+    var st = setTimeout;
+    if(/webkit/i.test(u)){
+        st(function(){
+            var dr=document.readyState;
+            if(dr=="loaded"||dr=="complete"){i()}
+            else{st(arguments.callee,10);}},10);
+    } else if((/mozilla/i.test(u)&&!/(compati)/.test(u)) || (/opera/i.test(u))){
+        document.addEventListener("DOMContentLoaded",i,false);
+    } else if(e){
+    (function(){
+        var t=document.createElement('doc:rdy');
+        try{t.doScroll('left');
+            i();t=null;
+        }catch(e){st(arguments.callee,0);}})();
+    } else{
+        window.onload=i;
+    }
+})( function() {BrowserHistory.initialize();} );
diff --git a/tourdeflexmodules/html-template/history/historyFrame.html b/tourdeflexmodules/html-template/history/historyFrame.html
new file mode 100755
index 0000000..255339f
--- /dev/null
+++ b/tourdeflexmodules/html-template/history/historyFrame.html
@@ -0,0 +1,45 @@
+<!--
+  ~ 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.
+  -->
+<html>
+    <head>
+        <META HTTP-EQUIV="Pragma" CONTENT="no-cache"> 
+        <META HTTP-EQUIV="Expires" CONTENT="-1"> 
+    </head>
+    <body>
+    <script>
+        function processUrl()
+        {
+
+            var pos = url.indexOf("?");
+            url = pos != -1 ? url.substr(pos + 1) : "";
+            if (!parent._ie_firstload) {
+                parent.BrowserHistory.setBrowserURL(url);
+                try {
+                    parent.BrowserHistory.browserURLChange(url);
+                } catch(e) { }
+            } else {
+                parent._ie_firstload = false;
+            }
+        }
+
+        var url = document.location.href;
+        processUrl();
+        document.write(encodeURIComponent(url));
+    </script>
+    Hidden frame for Browser History support.
+    </body>
+</html>
diff --git a/tourdeflexmodules/html-template/index.template.html b/tourdeflexmodules/html-template/index.template.html
new file mode 100755
index 0000000..b064431
--- /dev/null
+++ b/tourdeflexmodules/html-template/index.template.html
@@ -0,0 +1,124 @@
+<!--
+  ~ 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.
+  -->
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<!-- saved from url=(0014)about:internet -->
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
+    <!-- 
+    Smart developers always View Source. 
+    
+    This application was built using Apache Flex, an open source framework
+    for building rich Internet applications that get delivered via the
+    Flash Player or to desktops via Adobe AIR. 
+    
+    Learn more about Flex at http://flex.org 
+    // -->
+    <head>
+        <title>${title}</title>
+        <meta name="google" value="notranslate" />         
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+        <!-- Include CSS to eliminate any default margins/padding and set the height of the html element and 
+             the body element to 100%, because Firefox, or any Gecko based browser, interprets percentage as 
+             the percentage of the height of its parent container, which has to be set explicitly.  Fix for
+             Firefox 3.6 focus border issues.  Initially, don't display flashContent div so it won't show 
+             if JavaScript disabled.
+        -->
+        <style type="text/css" media="screen"> 
+            html, body  { height:100%; }
+            body { margin:0; padding:0; overflow:auto; text-align:center; 
+                   background-color: ${bgcolor}; }   
+            object:focus { outline:none; }
+            #flashContent { display:none; }
+        </style>
+        
+        <!-- Enable Browser History by replacing useBrowserHistory tokens with two hyphens -->
+        <!-- BEGIN Browser History required section -->
+        <link rel="stylesheet" type="text/css" href="history/history.css" />
+        <script type="text/javascript" src="history/history.js"></script>
+        <!-- END Browser History required section -->  
+            
+        <script type="text/javascript" src="swfobject.js"></script>
+        <script type="text/javascript">
+            // For version detection, set to min. required Flash Player version, or 0 (or 0.0.0), for no version detection. 
+            var swfVersionStr = "${version_major}.${version_minor}.${version_revision}";
+            // To use express install, set to playerProductInstall.swf, otherwise the empty string. 
+            var xiSwfUrlStr = "playerProductInstall.swf";
+            var flashvars = {};
+            var params = {};
+            params.quality = "high";
+            params.bgcolor = "${bgcolor}";
+            params.allowscriptaccess = "sameDomain";
+            params.allowfullscreen = "true";
+            var attributes = {};
+            attributes.id = "${application}";
+            attributes.name = "${application}";
+            attributes.align = "middle";
+            swfobject.embedSWF(
+                "${swf}.swf", "flashContent", 
+                "${width}", "${height}", 
+                swfVersionStr, xiSwfUrlStr, 
+                flashvars, params, attributes);
+            // JavaScript enabled so display the flashContent div in case it is not replaced with a swf object.
+            swfobject.createCSS("#flashContent", "display:block;text-align:left;");
+        </script>
+    </head>
+    <body>
+        <!-- SWFObject's dynamic embed method replaces this alternative HTML content with Flash content when enough 
+             JavaScript and Flash plug-in support is available. The div is initially hidden so that it doesn't show
+             when JavaScript is disabled.
+        -->
+        <div id="flashContent">
+            <p>
+                To view this page ensure that Adobe Flash Player version 
+                ${version_major}.${version_minor}.${version_revision} or greater is installed. 
+            </p>
+            <script type="text/javascript"> 
+                var pageHost = ((document.location.protocol == "https:") ? "https://" : "http://"); 
+                document.write("<a href='http://www.adobe.com/go/getflashplayer'><img src='" 
+                                + pageHost + "www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' /></a>" ); 
+            </script> 
+        </div>
+        
+        <noscript>
+            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="${width}" height="${height}" id="${application}">
+                <param name="movie" value="${swf}.swf" />
+                <param name="quality" value="high" />
+                <param name="bgcolor" value="${bgcolor}" />
+                <param name="allowScriptAccess" value="sameDomain" />
+                <param name="allowFullScreen" value="true" />
+                <!--[if !IE]>-->
+                <object type="application/x-shockwave-flash" data="${swf}.swf" width="${width}" height="${height}">
+                    <param name="quality" value="high" />
+                    <param name="bgcolor" value="${bgcolor}" />
+                    <param name="allowScriptAccess" value="sameDomain" />
+                    <param name="allowFullScreen" value="true" />
+                <!--<![endif]-->
+                <!--[if gte IE 6]>-->
+                    <p> 
+                        Either scripts and active content are not permitted to run or Adobe Flash Player version
+                        ${version_major}.${version_minor}.${version_revision} or greater is not installed.
+                    </p>
+                <!--<![endif]-->
+                    <a href="http://www.adobe.com/go/getflashplayer">
+                        <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash Player" />
+                    </a>
+                <!--[if !IE]>-->
+                </object>
+                <!--<![endif]-->
+            </object>
+        </noscript>     
+   </body>
+</html>
diff --git a/tourdeflexmodules/installer.xml b/tourdeflexmodules/installer.xml
new file mode 100644
index 0000000..02a26a6
--- /dev/null
+++ b/tourdeflexmodules/installer.xml
@@ -0,0 +1,127 @@
+<?xml version="1.0"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+
+<project name="tour-de-flex_install" default="install" basedir=".">
+    
+    <!-- Required for OSX 10.6 / Snow Leopard Performance. -->
+    <!-- Java 7 on Mac requires OSX 10.7.3 or higher and is 64-bit only -->
+    <!-- local.d32 is set/used in build.properties so this needs to be done first. -->
+    <condition property="local.d32" value="-d32">
+        <and>
+            <os family="windows"/>
+            <equals arg1="${sun.arch.data.model}" arg2="64"/>
+            <equals arg1="${os.arch}" arg2="x86_64"/>
+            <equals arg1="${ant.java.version}" arg2="1.6"/>
+        </and>
+    </condition>
+    	
+    <condition property="isMacOrLinux" value="mac">
+    	<or>
+    		<os family="mac" />
+    		<os family="unix" />
+    	</or>
+    </condition>
+    <condition property="isWindows" value="windows">
+        <os family="windows" />
+    </condition>
+        	
+	<property environment="env"/>
+    <condition property="FLEX_HOME" value="${env.FLEX_HOME}">
+        <isset property="env.FLEX_HOME" />
+    </condition>
+
+    <property file="${FLEX_HOME}/local.properties"/>
+    <property file="${FLEX_HOME}/build.properties"/>
+    <property file="${basedir}/${bundle}.properties"/>
+
+	<property name="download.dir" value="${FLEX_HOME}/in"/>
+	<property name="unpack.dir" value="${FLEX_HOME}/tour-de-flex"/>
+	<property name="mirror.url" value="http://flex.apache.org/single-mirror-url.cgi" />
+	
+    <property name="tour-de-flex.url.folder" value="flex/tourdeflex/1.1" />
+   
+    <target name="file-setup-win" if="isWindows">
+    	<property name="tour-de-flex.url.file" value="apache-flex-tour-de-flex-component-explorer-1.1-src.zip" />
+    	<property name="tour-de-flex.url.md5" value="95b9895120eebac1f2cd09929629ba2c" />
+    </target>
+	
+    <target name="file-setup-unix" if="isMacOrLinux">
+    	<property name="tour-de-flex.url.file" value="apache-flex-tour-de-flex-component-explorer-1.1-src.tar.gz" />
+    	<property name="tour-de-flex.url.md5" value="95b9895120eebac1f2cd09929629ba2c" />
+    </target>
+
+    <target name="install" depends="file-setup-win,file-setup-unix,tour-de-flex-download-unpack" description="Adds tour-de-flex to an Apache Flex SDK">
+        <delete dir="${download.dir}" />
+        <echo>Tour De Flex installed</echo>
+    </target>
+    
+    <target name="tour-de-flex-download-unpack" description="Downloads tour-de-flex and copies into the Apache Flex SDK">
+        <mkdir dir="${download.dir}"/>
+    	
+    	<get src="${mirror.url}" dest="${download.dir}/mirror.txt" />
+    	<replace file="${download.dir}/mirror.txt" token="&lt;p&gt;" />
+    	<replace file="${download.dir}/mirror.txt" token="&lt;/p&gt;" />
+    	<loadfile property="tour-de-flex.url.server" srcFile="${download.dir}/mirror.txt" />
+    	
+    	<echo>Downloading ${tour-de-flex.url.server}/${tour-de-flex.url.folder}/${tour-de-flex.url.file}</echo>
+        
+    	<antcall target="download-check-md5">
+            <param name="domain" value="${tour-de-flex.url.server}" />
+            <param name="folder" value="${tour-de-flex.url.folder}" />
+            <param name="file" value="${tour-de-flex.url.file}" />
+            <param name="dest" value="${download.dir}/${tour-de-flex.url.file}"/>
+			<param name="failmessage" value="Tour De Flex download failed" />
+			<param name="md5" value="${tour-de-flex.url.md5}" />
+        </antcall>
+    	
+    	<mkdir dir="${unpack.dir}"/>
+    	<antcall target="files-unzip" />
+    	<antcall target="files-untar" />
+    </target>
+			
+    <target name="files-unzip" if="isWindows">
+    	<unzip dest="${unpack.dir}">
+    		<fileset file="${download.dir}/${tour-de-flex.url.file}" />
+    	</unzip>
+    </target>
+	
+    <target name="files-untar" if="isMacOrLinux">
+    	<untar dest="${unpack.dir}" compression="gzip">
+    		<fileset file="${download.dir}/${tour-de-flex.url.file}" />
+    	</untar>
+    </target>
+
+    <target name="download-check-md5" description="Downloads file, and verifies checksum.">     
+    	<tstamp />
+    	<property name="ts" value="${DSTAMP}${TSTAMP}" />
+        <get src="${domain}/${folder}/${file}?ts=${ts}" dest="${dest}" verbose="true" />
+        <antcall target="check-md5" />
+    </target>
+
+    <target name="check-md5" description="Verifies MD5 checksum, and fails if checksum doesn't match">
+        <echo>Checking ${dest} matches ${md5}</echo>
+        <checksum file="${dest}" algorithm="MD5" verifyproperty="md5.failed" property="${md5}" />
+        <fail message="${failmessage}">
+            <condition>
+                <equals arg1="${md5.failed}" arg2="false" />
+            </condition>
+        </fail>
+    </target>
+</project>
diff --git a/tourdeflexmodules/src/3rdparty.xml b/tourdeflexmodules/src/3rdparty.xml
new file mode 100755
index 0000000..93078e4
--- /dev/null
+++ b/tourdeflexmodules/src/3rdparty.xml
@@ -0,0 +1,30 @@
+<?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.
+  -->
+
+<compTree>
+	<node label="3rd Party Components">
+		<node label="Ardisia">
+			<node thirdParty="true" label="Ardisia Component Library" app="http://www.ardisialabs.com/tourDeFlex/tour-de-flex.jpg" src="" link="http://www.ardisialabs.com/tour-de-flex" />
+		</node>
+		<node label="Flexicious">
+			<node thirdParty="true" label="Dashboard Framework" app="http://www.flexicious.com/dashboard.jpg" src="" link="http://www.flexicious.com/Home/Dashboard"/>
+			<node thirdParty="true" label="Ultimate DataGrid" app="http://www.flexicious.com/ultimate.jpg" src="" link="http://www.flexicious.com/Home/Ultimate" />
+			<node thirdParty="true" label="Classic DataGrid" app="http://www.flexicious.com/classic.jpg" src="" link="http://www.flexicious.com/Home/DemoFlex4"/>
+		</node>
+	</node>
+</compTree>
diff --git a/tourdeflexmodules/src/SourceTab.mxml b/tourdeflexmodules/src/SourceTab.mxml
new file mode 100755
index 0000000..874ed18
--- /dev/null
+++ b/tourdeflexmodules/src/SourceTab.mxml
@@ -0,0 +1,87 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<mx:VBox xmlns:fx="http://ns.adobe.com/mxml/2009"
+		 xmlns:mx="library://ns.adobe.com/flex/mx"
+		 width="100%" height="100%">
+
+    <fx:Script>
+        <![CDATA[
+
+        import mx.rpc.events.ResultEvent;
+        import mx.rpc.events.FaultEvent;
+        import mx.controls.Alert;
+
+		public var app:String;
+			
+        public function set source(file:String):void
+        {
+            label = file.substring(file.lastIndexOf("/")+1);
+            srv.url = file;
+            srv.send();
+			ta.verticalScrollPosition = 19; // at end of header
+        }
+
+        private function resultHandler(event:ResultEvent):void
+        {
+            var str:String = String(event.result);
+            var r:RegExp = new RegExp("\r\n", "gs");
+            str = str.replace(r, "\r");
+            ta.text = str;
+        }
+
+        private function faultHandler(event:FaultEvent):void
+        {
+            Alert.show("Error loading source file");
+        }
+			
+		private function copyCode():void
+        {
+        	System.setClipboard(ta.text);
+        }
+		
+		private function copyLink():void
+        {
+			var linkText:String = "http://flex.apache.org/tourdeflex/?app=" + app;
+			
+        	System.setClipboard(linkText);
+        }
+			
+		private function viewInGitHub():void
+		{
+			var gitHubLink:String = "https://github.com/apache/flex-utilities/tree/master/TourDeFlex/TourDeFlex3/src/" + srv.url;
+			var urlRequest:URLRequest = new URLRequest(gitHubLink);
+			navigateToURL(urlRequest, "_blank");
+		}
+
+        ]]>
+    </fx:Script>
+
+	<fx:Declarations>
+    	<mx:HTTPService id="srv" useProxy="false" resultFormat="text" result="resultHandler(event)" fault="faultHandler(event)"/>
+	</fx:Declarations>
+	
+    <mx:TextArea id="ta" color="#0000A0" fontFamily="Courier" editable="false" wordWrap="false" width="100%" height="100%"/>
+	<mx:HBox width="100%" paddingBottom="5" paddingRight="20">
+		<mx:Spacer width="100%" />
+		<mx:Button label="Copy" click="copyCode()" />
+		<mx:Button label="Copy Link" click="copyLink()" />
+		<mx:Button label="GitHub" click="viewInGitHub()" />
+	</mx:HBox>
+</mx:VBox>
diff --git a/tourdeflexmodules/src/SpellingConfig.xml b/tourdeflexmodules/src/SpellingConfig.xml
new file mode 100644
index 0000000..dfae724
--- /dev/null
+++ b/tourdeflexmodules/src/SpellingConfig.xml
@@ -0,0 +1,23 @@
+<?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.
+
+-->
+<SpellingConfig>
+  <LanguageResource language="English (British)" languageCode="en_GB" ruleFile="./dictionaries/en_GB/en_GB.aff" dictionaryFile="./dictionaries/en_GB/en_GB.dic"/>
+  <LanguageResource language="English (US)" languageCode="en_US" ruleFile="./dictionaries/en_US/en_US.aff" dictionaryFile="./dictionaries/en_US/en_US.dic"/>
+</SpellingConfig>
diff --git a/tourdeflexmodules/src/ThirdPartyTab.mxml b/tourdeflexmodules/src/ThirdPartyTab.mxml
new file mode 100644
index 0000000..29f7860
--- /dev/null
+++ b/tourdeflexmodules/src/ThirdPartyTab.mxml
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<mx:VBox xmlns:fx="http://ns.adobe.com/mxml/2009"
+		 xmlns:mx="library://ns.adobe.com/flex/mx"
+		 xmlns:s="library://ns.adobe.com/flex/spark"
+		 label="3rd Party Example"
+		 paddingTop="10" paddingBottom="10" paddingLeft="20" paddingRight="20"
+		 borderStyle="solid"
+		 width="100%" height="100%">
+
+ 	<s:RichText width="100%" height="100%">
+		<s:p>This example or component has been developed by a 3rd party and is hosted outside of the Tour De Flex site and may contain links to non ASF sites. It's code may not be Open Source or may be under a license other than the Apache license so please check carefully before using it. Neither the ASF or the Apache Flex PMC can endorse or recommend using this example but you may still find it useful.</s:p>
+	</s:RichText>
+</mx:VBox>
diff --git a/tourdeflexmodules/src/Welcome.mxml b/tourdeflexmodules/src/Welcome.mxml
new file mode 100644
index 0000000..6b86e04
--- /dev/null
+++ b/tourdeflexmodules/src/Welcome.mxml
@@ -0,0 +1,52 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009"
+				xmlns:mx="library://ns.adobe.com/flex/mx"
+				xmlns:s="library://ns.adobe.com/flex/spark"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+    <mx:Panel title="Welcome to Tour De Flex"
+			  paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+			  height="100%" width="100%">
+		<s:HGroup>
+			<s:Image source="@Embed('/apache/assets/ApacheFlexLogo.png')" width="50" height="50" />
+			<s:VGroup height="100%" verticalAlign="middle">
+				<s:Label text="Apache Tour De Flex" fontSize="20" fontWeight="bold" />
+			</s:VGroup>	
+		</s:HGroup>
+			
+		<s:RichText width="100%" height="100%">
+			<s:p />
+			<s:p>The Apache Flex Tour De Flex component explorer provides a sample set of working
+	  Apache Flex examples.</s:p>
+			<s:p />
+			<s:p>New in this version:</s:p>
+			<s:list>
+				<s:li>Added this welcome page</s:li>
+				<s:li>Changed examples look and feel to be more consistent</s:li>
+				<s:li>Added support for 3rd party examples</s:li>
+				<s:li>Added Squiggly spelling engine examples</s:li>
+			</s:list>
+			<s:p />
+			<s:p>For a full list of changes please see the README.</s:p>
+			<s:p />
+		</s:RichText>
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/apache/ApacheFlex4_10_0.mxml b/tourdeflexmodules/src/apache/ApacheFlex4_10_0.mxml
new file mode 100644
index 0000000..18e90e8
--- /dev/null
+++ b/tourdeflexmodules/src/apache/ApacheFlex4_10_0.mxml
@@ -0,0 +1,55 @@
+<?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">
+
+	<s:Panel title="Apache Flex 4.10" width="100%" height="100%">		
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		<s:HGroup>
+			<s:Image source="@Embed('/assets/ApacheFlexLogo.png')" width="50" height="50" />
+			<s:VGroup height="100%" verticalAlign="middle">
+				<s:Label text="Apache Flex 4.10" fontSize="20" fontWeight="bold" />
+				<s:Label text="Released Aug 6, 2013" />	
+			</s:VGroup>	
+		</s:HGroup>
+		<s:RichText width="100%">
+			<s:p />
+			<s:p>Apache Flex community releases Flex 4.10.0.</s:p>
+			<s:p />
+			<s:p>Differences and highlights include:</s:p>
+			<s:list>
+				<s:li>Support for latest versions of Flash Player (up to 11.8) and AIR runtimes (up to 3.8)</s:li>
+				<s:li>Improved support for older Flash Player versions (down to 10.2)</s:li>
+				<s:li>Linux support</s:li>
+				<s:li>15 new Spark components</s:li>
+				<s:li>Advanced telemetry support</s:li>
+				<s:li>480 dpi mobile skins</s:li>
+				<s:li>Over 200 bugs fixeds</s:li>
+			</s:list>
+			<s:p />
+			<s:p>For a full list of changes please see the README.</s:p>
+			<s:p />
+		</s:RichText>
+		<s:Label text="Content from Wikipedia licenced under a Creative Commons Attribution-ShareAlike 3.0 Unported License" fontSize="9" />
+	</s:Panel>
+</s:Module>
diff --git a/tourdeflexmodules/src/apache/ApacheFlex4_11_0.mxml b/tourdeflexmodules/src/apache/ApacheFlex4_11_0.mxml
new file mode 100644
index 0000000..e462b72
--- /dev/null
+++ b/tourdeflexmodules/src/apache/ApacheFlex4_11_0.mxml
@@ -0,0 +1,55 @@
+<?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">
+
+	<s:Panel title="Apache Flex 4.11" width="100%" height="100%">	
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		<s:HGroup>
+			<s:Image source="@Embed('/assets/ApacheFlexLogo.png')" width="50" height="50" />
+			<s:VGroup height="100%" verticalAlign="middle">
+				<s:Label text="Apache Flex 4.11" fontSize="20" fontWeight="bold" />
+				<s:Label text="Released Oct 28, 2013" />
+			</s:VGroup>	
+		</s:HGroup>	
+		<s:RichText width="100%">
+			<s:p />
+			<s:p>Apache Flex community releases Flex 4.11.0.</s:p>
+			<s:p />
+			<s:p>Differences and highlights include:</s:p>
+			<s:list>
+				<s:li>Support for Flash Player 11.9 and AIR runtime 3.9</s:li>
+				<s:li>mx:AdvancedDataGrid and mx:DataGrid speed improvements</s:li>
+				<s:li>Updated OSMF to latest version</s:li>
+				<s:li>Mobile datagrid component</s:li>
+				<s:li>120 and 640 dpi mobile skins</s:li>
+				<s:li>Desktop callout component</s:li>
+				<s:li>Over 50 bugs fixed</s:li>
+			</s:list>
+			<s:p />
+			<s:p>For a full list of changes please see the README.</s:p>
+			<s:p />
+		</s:RichText>
+		<s:Label text="Content from Wikipedia licenced under a Creative Commons Attribution-ShareAlike 3.0 Unported License" fontSize="9" />
+	</s:Panel>
+</s:Module>
diff --git a/tourdeflexmodules/src/apache/ApacheFlex4_12_1.mxml b/tourdeflexmodules/src/apache/ApacheFlex4_12_1.mxml
new file mode 100644
index 0000000..275e910
--- /dev/null
+++ b/tourdeflexmodules/src/apache/ApacheFlex4_12_1.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">
+
+	<s:Panel title="Apache Flex 4.12" width="100%" height="100%">	
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		<s:HGroup>
+			<s:Image source="@Embed('/assets/ApacheFlexLogo.png')" width="50" height="50" />
+			<s:VGroup height="100%" verticalAlign="middle">
+				<s:Label text="Apache Flex 4.12" fontSize="20" fontWeight="bold" />
+				<s:Label text="Released May 3, 2014" />
+			</s:VGroup>	
+		</s:HGroup>	
+		<s:RichText width="100%">
+			<s:p />
+			<s:p>Apache Flex community releases Flex 4.12.1.</s:p>
+			<s:p />
+			<s:p>Differences and highlights in 4.12.0 and 4.12.1 include:</s:p>
+			<s:list>
+				<s:li>Support for Flash Player 12.0 and 13.0 and AIR runtime 4.0 and 13.0</s:li>
+				<s:li>Fixed Adobe Flash Builder bug, which inserts a incorrect attribute while creating a new project that uses Apache Flex SDK</s:li>
+				<s:li>Extended mobile media query support</s:li>
+				<s:li>Improved mobile memory usage/performance</s:li>
+				<s:li>Improved iPad and iOS7 support</s:li>
+				<s:li>mx:AdvancedDataGrid and mx:DataGrid performance improvements</s:li>
+				<s:li>New MaskedTextinput component</s:li>
+				<s:li>JSON support for ArrayCollection and ArrayList</s:li>
+				<s:li>Over 100 bugs fixed</s:li>
+			</s:list>
+			<s:p />
+			<s:p>For a full list of changes please see the README.</s:p>
+			<s:p />
+		</s:RichText>
+		<s:Label text="Content from Wikipedia licenced under a Creative Commons Attribution-ShareAlike 3.0 Unported License" fontSize="9" />
+	</s:Panel>
+</s:Module>
diff --git a/tourdeflexmodules/src/apache/ApacheFlex4_13_0.mxml b/tourdeflexmodules/src/apache/ApacheFlex4_13_0.mxml
new file mode 100644
index 0000000..047d6b5
--- /dev/null
+++ b/tourdeflexmodules/src/apache/ApacheFlex4_13_0.mxml
@@ -0,0 +1,53 @@
+<?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">
+
+	<s:Panel title="Apache Flex 4.13" width="100%" height="100%">	
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		<s:HGroup>
+			<s:Image source="@Embed('/assets/ApacheFlexLogo.png')" width="50" height="50" />
+			<s:VGroup height="100%" verticalAlign="middle">
+				<s:Label text="Apache Flex 4.13" fontSize="20" fontWeight="bold" />
+				<s:Label text="Released Jul 28, 2014" />
+			</s:VGroup>	
+		</s:HGroup>
+		<s:RichText width="100%">
+			<s:p />
+			<s:p>Apache Flex community releases Flex 4.13.0.</s:p>
+			<s:p />
+			<s:p>Differences and highlights include:</s:p>
+			<s:list>
+				<s:li>Support for Flash Player 14.0 and AIR runtime 14.0</s:li>
+				<s:li>FDB supports debugging ActionScript Workers</s:li>
+				<s:li>percentWidth for GridColumn</s:li>
+				<s:li>Add Chinese translations for all the installers of Flex</s:li>
+				<s:li>Over 30 bugs fixed</s:li>
+			</s:list>
+			<s:p />
+			<s:p>For a full list of changes please see the README.</s:p>
+			<s:p />
+		</s:RichText>
+		<s:Label text="Content from Wikipedia licenced under a Creative Commons Attribution-ShareAlike 3.0 Unported License" fontSize="9" />
+	</s:Panel>
+</s:Module>
diff --git a/tourdeflexmodules/src/apache/ApacheFlex4_14_0.mxml b/tourdeflexmodules/src/apache/ApacheFlex4_14_0.mxml
new file mode 100644
index 0000000..4571431
--- /dev/null
+++ b/tourdeflexmodules/src/apache/ApacheFlex4_14_0.mxml
@@ -0,0 +1,53 @@
+<?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">
+
+	<s:Panel title="Apache Flex 4.14" width="100%" height="100%">	
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		<s:HGroup>
+			<s:Image source="@Embed('/assets/ApacheFlexLogo.png')" width="50" height="50" />
+			<s:VGroup height="100%" verticalAlign="middle">
+				<s:Label text="Apache Flex 4.14" fontSize="20" fontWeight="bold" />
+				<s:Label text="Released Feb 03, 2014" />
+			</s:VGroup>	
+		</s:HGroup>
+		<s:RichText width="100%">
+			<s:p />
+			<s:p>Apache Flex community releases Flex 4.14.0.</s:p>
+			<s:p />
+			<s:p>Differences and highlights include:</s:p>
+			<s:list>
+				<s:li>Support for Flash Player 15.0, 16.0 and AIR runtime 15.0, 16.0</s:li>
+				<s:li>iOS7 and Android 4.x mobile themess</s:li>
+				<s:li>FlatSpark skins and components</s:li>
+				<s:li>Native support for tables in TLF</s:li>
+				<s:li>New spark RichTextEditor component</s:li>
+				<s:li>Over 50 bugs fixed</s:li>
+			</s:list>
+			<s:p />
+			<s:p>For a full list of changes please see the README.</s:p>
+			<s:p />
+		</s:RichText>
+	</s:Panel>
+</s:Module>
diff --git a/tourdeflexmodules/src/apache/ApacheFlex4_8_0.mxml b/tourdeflexmodules/src/apache/ApacheFlex4_8_0.mxml
new file mode 100644
index 0000000..2850eac
--- /dev/null
+++ b/tourdeflexmodules/src/apache/ApacheFlex4_8_0.mxml
@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s: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">
+
+	<s:Panel title="Apache Flex 4.8 (incubating)" width="100%" height="100%">
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		<s:HGroup>
+			<s:Image source="@Embed('/assets/ApacheFlexLogo.png')" width="50" height="50" />
+			<s:VGroup height="100%" verticalAlign="middle">
+				<s:Label text="Apache Flex 4.8 (incubating)" fontSize="20" fontWeight="bold" />
+				<s:Label text="Released Jul 25, 2012" />
+			</s:VGroup>	
+		</s:HGroup>
+		<s:RichText width="100%">
+			<s:p />
+			<s:p>Apache Flex community releases Flex 4.8.0 incubating and it as a parity release with Adobe Flex 4.6.0. This is the first release under the incubator of the Apache Software Foundation and represents the initial donation of Adobe Flex 4.6 by Adobe System Inc.</s:p>
+			<s:p />
+			<s:p>Differences and highlights include:</s:p>
+			<s:list>
+				<s:li>Flex trademark issues are largely cleared up</s:li>
+				<s:li>Bug-tracking / issue-tracking system (JIRA) transferred from the Adobe bug tracker to Apache bug tracker</s:li>
+				<s:li>Mustela test suite is donated to Apache</s:li>
+			</s:list>
+			<s:p />
+			<s:p>For a full list of changes please see the README.</s:p>
+			<s:p />
+		</s:RichText>
+		<s:Label text="Content from Wikipedia licenced under a Creative Commons Attribution-ShareAlike 3.0 Unported License" fontSize="9" />	
+	</s:Panel>
+</s:Module>
diff --git a/tourdeflexmodules/src/apache/ApacheFlex4_9_0.mxml b/tourdeflexmodules/src/apache/ApacheFlex4_9_0.mxml
new file mode 100644
index 0000000..2113db3
--- /dev/null
+++ b/tourdeflexmodules/src/apache/ApacheFlex4_9_0.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">
+
+	<s:Panel title="Apache Flex 4.9" width="100%" height="100%">
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		<s:HGroup>
+			<s:Image source="@Embed('/assets/ApacheFlexLogo.png')" width="50" height="50" />
+			<s:VGroup height="100%" verticalAlign="middle">
+				<s:Label text="Apache Flex 4.9" fontSize="20" fontWeight="bold" />
+				<s:Label text="Released Jan 11, 2013" />
+			</s:VGroup>	
+		</s:HGroup>
+		<s:RichText width="100%">
+			<s:p />
+			<s:p>Apache Flex community releases Flex 4.9.0. This is the first release since Apache Flex became a top level project of the Apache Software Foundation.</s:p>
+			<s:p />
+			<s:p>Differences and highlights include:</s:p>
+			<s:list>
+				<s:li>New locales for Apache Flex including Australian, British, Canadian, Greek, Switzerland (German) and Portuguese</s:li>
+				<s:li>Apache Flex SDK can be compiled for any version of the Flash Player from 10.2 to 11.5</s:li>
+				<s:li>New PostCodeFormatter and PostCodeValidator classes for international postcode formatting and validation</s:li>
+				<s:li>New VectorList and VectorCollection classes for lists and collections of vectors</s:li>
+				<s:li>New version of the TLF (Text Layout Framework), the TLF 3.0.33 source code is now included as it is now part of the Apache Flex donation</s:li>
+				<s:li>Can use Java 7 to compile SDK (see README for instructions)</s:li>
+				<s:li>Many improvements and updates to Mustella tests</s:li>
+				<s:li>An SDK installer has also been created and is the recommended way of installing the Apache Flex SDK in an IDE</s:li>
+				<s:li>Various important bug fixes</s:li>
+			</s:list>
+			<s:p />
+			<s:p>For a full list of changes please see the README.</s:p>
+			<s:p />
+		</s:RichText>
+		<s:Label text="Content from Wikipedia licenced under a Creative Commons Attribution-ShareAlike 3.0 Unported License" fontSize="9" />
+	</s:Panel>
+</s:Module>
diff --git a/tourdeflexmodules/src/apache/Squiggly1_1.mxml b/tourdeflexmodules/src/apache/Squiggly1_1.mxml
new file mode 100644
index 0000000..3184711
--- /dev/null
+++ b/tourdeflexmodules/src/apache/Squiggly1_1.mxml
@@ -0,0 +1,50 @@
+<?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">
+
+	<s:Panel title="Apache Squiggly 1.1" width="100%" height="100%">		
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		<s:HGroup>
+			<s:Image source="@Embed('/assets/ApacheFlexLogo.png')" width="50" height="50" />
+			<s:VGroup height="100%" verticalAlign="middle">
+				<s:Label text="Apache Flex Squiggly 1.1" fontSize="20" fontWeight="bold" />
+				<s:Label text="Released Oct 28, 2014" />	
+			</s:VGroup>	
+		</s:HGroup>
+		<s:RichText width="100%">
+			<s:p />
+			<s:p>Apache Flex community releases Squiggly 1.1</s:p>
+			<s:p />
+			<s:p>Apache Flex Squiggly is a ActionScript spell checking library.</s:p>
+			<s:p />
+			<s:p>Differences and highlights from 1.0 include:</s:p>
+			<s:list>
+				<s:li>Mavenized version of Squiggly</s:li>
+				<s:li>Added installer ant file</s:li>
+				<s:li>Added en_US and en_GB dictionaries</s:li>
+				<s:li>Now works with both halo and spark components</s:li>
+			</s:list>
+		</s:RichText>
+	</s:Panel>
+</s:Module>
diff --git a/tourdeflexmodules/src/apache/assets/ApacheFlexLogo.png b/tourdeflexmodules/src/apache/assets/ApacheFlexLogo.png
new file mode 100644
index 0000000..4ff037f
--- /dev/null
+++ b/tourdeflexmodules/src/apache/assets/ApacheFlexLogo.png
Binary files differ
diff --git a/tourdeflexmodules/src/apache/containers/CalloutExample.mxml b/tourdeflexmodules/src/apache/containers/CalloutExample.mxml
new file mode 100644
index 0000000..fa34ae2
--- /dev/null
+++ b/tourdeflexmodules/src/apache/containers/CalloutExample.mxml
@@ -0,0 +1,41 @@
+<?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:Declarations>
+		<s:Callout id="callout">
+			<s:VGroup horizontalAlign="center">
+				<s:Label text="Callout - click close" />
+				<s:Button label="Close" click="callout.close()" />
+			</s:VGroup>
+		</s:Callout>
+	</fx:Declarations>
+	
+	<s:Panel title="Callout Example" width="100%" height="100%">
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		<s:HGroup>
+			<s:Button id="show" label="Show Callout" click="callout.open(show)" />
+		</s:HGroup>
+	</s:Panel>
+</s:Module>
diff --git a/tourdeflexmodules/src/apache/controls/MaskedTextInputExample.mxml b/tourdeflexmodules/src/apache/controls/MaskedTextInputExample.mxml
new file mode 100644
index 0000000..cbf5d50
--- /dev/null
+++ b/tourdeflexmodules/src/apache/controls/MaskedTextInputExample.mxml
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s: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:x="http://flex.apache.org/experimental/ns">
+	
+	<s:Panel title="Masked TextInput Example" width="100%" height="100%">
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		<s:HGroup verticalAlign="bottom">
+			<s:Label text="Phone Number:" />
+			<x:MaskedTextInput maskText="####-####" />
+		</s:HGroup>
+	</s:Panel>
+</s:Module>
diff --git a/tourdeflexmodules/src/apache/controls/SparkRichTextEditorExample.mxml b/tourdeflexmodules/src/apache/controls/SparkRichTextEditorExample.mxml
new file mode 100644
index 0000000..78cab09
--- /dev/null
+++ b/tourdeflexmodules/src/apache/controls/SparkRichTextEditorExample.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">
+	<fx:Script>
+		<![CDATA[
+			import spark.components.RichTextEditor;
+			import spark.events.TextOperationEvent;
+
+			private var rte:RichTextEditor;
+
+			protected override function createChildren():void
+			{
+				super.createChildren();
+				rte = new RichTextEditor();
+				rte.htmlText = '<b>This is great!</b><br/><font color="#FF0000">Another Line.</font>';
+				rte.addEventListener(TextOperationEvent.CHANGE, handleChange);
+				container.addElementAt(rte, 0);
+				handleChange();
+			}
+
+			private function handleChange(e:TextOperationEvent = null):void
+			{
+				richTextEditorOutput.text = rte.htmlText;
+			}
+		]]>
+	</fx:Script>
+
+	<s:Panel title="RichTextEditor Sample" width="100%" height="100%">
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+
+		<s:VGroup id="container" width="600" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10">
+			<s:Label text="HTML Output:" fontSize="20"/>
+			<s:Label id="richTextEditorOutput" width="100%"/>
+		</s:VGroup>
+	</s:Panel>
+</s:Module>
diff --git a/tourdeflexmodules/src/apache/formatters/PostCodeFormatterExample.mxml b/tourdeflexmodules/src/apache/formatters/PostCodeFormatterExample.mxml
new file mode 100644
index 0000000..00ef002
--- /dev/null
+++ b/tourdeflexmodules/src/apache/formatters/PostCodeFormatterExample.mxml
@@ -0,0 +1,88 @@
+<?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">
+	<s:layout>
+		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
+	</s:layout>
+	
+	<fx:Script>
+		<![CDATA[	
+			import org.apache.flex.formatters.PostCodeFormatter;
+			
+			private var formatter:PostCodeFormatter;
+			
+			protected function formatPostCode(event:MouseEvent):void
+			{
+				formatter = new PostCodeFormatter();
+				
+				if (aust.selected) {
+					formatted.text = checkAustralianPostCode(postcode.text);
+				}
+				else if (uk.selected) {
+					formatted.text = checkUKPostCode(postcode.text);
+				}
+				else if (can.selected) {
+					formatted.text = checkCanadianPostCode(postcode.text);
+				}			
+			}
+			
+			public function checkAustralianPostCode(postcode:String):String {
+				formatter.formats = ["NNNN"];
+				
+				return formatter.format(postcode);
+			}
+				
+			public function checkUKPostCode(postcode:String):String {
+				formatter.formats = ["AN NAA", "ANN NAA", "AAN NAA", "ANA NAA", "AANN NAA", "AANA NAA"];
+				
+				return formatter.format(postcode);
+			}
+			
+			public function checkCanadianPostCode(postcode:String):String {
+				formatter.formatString = "ANA NAN";
+	
+				return formatter.format(postcode);
+			}
+		]]>
+	</fx:Script>
+	
+	<s:Panel title="Postcode Formatter Example" width="100%" height="100%">		
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		<s:HGroup verticalAlign="middle">
+			<s:Label text="Postcode" />
+			<s:TextInput id="postcode" text=""/>
+		</s:HGroup>
+		<s:HGroup verticalAlign="middle">
+			<s:Label text="Country" />
+			<s:RadioButton id="aust" label="Australia" selected="true" />	
+			<s:RadioButton id="uk" label="UK" />	
+			<s:RadioButton id="can" label="Canada" />	
+		</s:HGroup>
+		<s:Button label="Show Formatted Postcode" click="formatPostCode(event)" />
+		<s:HGroup>
+			<s:Label text="Formatted Postcode" />
+			<s:Label id="formatted" />
+		</s:HGroup>
+	</s:Panel>
+</s:Module>
diff --git a/tourdeflexmodules/src/apache/i18n/DateExample.mxml b/tourdeflexmodules/src/apache/i18n/DateExample.mxml
new file mode 100644
index 0000000..12d2559
--- /dev/null
+++ b/tourdeflexmodules/src/apache/i18n/DateExample.mxml
@@ -0,0 +1,84 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s: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.formatters.DateFormatter;
+			
+			private var formatter:DateFormatter;
+			
+			protected function formatDate(event:Event):void
+			{
+				formatter = new DateFormatter();
+				
+				if (int1.selected) {
+					formatter.formatString = "DD/MM/YYYY";
+				}
+				else if (int2.selected) {
+					formatter.formatString = "D/M/YYYY";
+				}
+				else if (int3.selected) {
+					formatter.formatString = "D.M.YYYY";
+				}
+				else if (jap.selected) {
+					formatter.formatString = "YYYY年MM月DD日";
+				}
+				else if (chi.selected) {
+					formatter.formatString = "YYYY年MM月DD日";
+				}
+				else if (kor.selected) {
+					formatter.formatString = "YYYY년 MM월 DD일";
+				}
+				
+				formatted.text = formatter.format(date.selectedDate);
+				parsed.text = DateFormatter.parseDateString(formatted.text, formatter.formatString).toString();
+			}
+		]]>
+	</fx:Script>
+	
+	<s:Panel title="International Date Formating Example" width="100%" height="100%">	
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		<s:HGroup verticalAlign="middle">
+			<s:Label text="Date" />
+			<mx:DateField id="date" change="formatDate(event)" />
+		</s:HGroup>
+		<s:HGroup verticalAlign="middle">
+			<s:Label text="Date Format" />
+			<s:RadioButton id="int1" label="DD/MM/YYYY" selected="true" click="formatDate(event)" />	
+			<s:RadioButton id="int2" label="D/M/YYYY" click="formatDate(event)" />	
+			<s:RadioButton id="int3" label="D.M.YYYY" click="formatDate(event)" />
+			<s:RadioButton id="jap" label="Japanese" click="formatDate(event)" />	
+			<s:RadioButton id="chi" label="Chinese" click="formatDate(event)" />	
+			<s:RadioButton id="kor" label="Korean" click="formatDate(event)" />	
+		</s:HGroup>
+		<s:HGroup>
+			<s:Label text="Formatted Date" />
+			<s:Label id="formatted" />
+		</s:HGroup>
+		<s:HGroup>
+			<s:Label text="Parsed Date String" />
+			<s:Label id="parsed" />
+		</s:HGroup>
+	</s:Panel>
+</s:Module>
diff --git a/tourdeflexmodules/src/apache/i18n/LocaleExample.mxml b/tourdeflexmodules/src/apache/i18n/LocaleExample.mxml
new file mode 100644
index 0000000..2435237
--- /dev/null
+++ b/tourdeflexmodules/src/apache/i18n/LocaleExample.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">
+
+	<fx:Script>
+		<![CDATA[
+			import mx.collections.ArrayList;
+			import mx.events.FlexEvent;
+			import mx.resources.IResourceBundle;
+			import mx.resources.ResourceManager;
+			
+			import spark.events.IndexChangeEvent;
+			
+			[Bindable]
+			protected var langauges:ArrayList = new ArrayList(["USA", "Australian", "British", "Canadian", "Greek", "Switzerland (German)", "Portuguese"]);
+			protected var locales:Array = ["en_US", "en_AU", "en_GB", "en_CA", "el_GR", "de_CH", "pt_PT"];
+			
+			protected function changeLocale(event:IndexChangeEvent):void
+			{
+				var newLocale:String = locales[locale.selectedIndex];				
+				var bundle:IResourceBundle = ResourceManager.getInstance().getResourceBundle(newLocale, "validators");
+				var message:String = bundle.content["missingPeriodInDomainError"];
+
+				error.text = message;
+			}
+			
+		]]>
+	</fx:Script>
+	
+	<fx:Declarations>
+		<!-- so validators resource bundle is included -->
+		<mx:EmailValidator />
+	</fx:Declarations>
+
+	<s:Panel title="SDK Locale Example" width="100%" height="100%">
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>	
+		<s:HGroup verticalAlign="middle">
+			<s:Label text="Select Lanagage" />
+			<s:ComboBox id="locale" dataProvider="{langauges}" change="changeLocale(event)" />
+		</s:HGroup>
+		<s:HGroup verticalAlign="middle">
+			<s:Label text="Error message" />
+			<s:Label id="error" />
+		</s:HGroup>
+	</s:Panel>
+</s:Module>
diff --git a/tourdeflexmodules/src/apache/i18n/MillisecondExample.mxml b/tourdeflexmodules/src/apache/i18n/MillisecondExample.mxml
new file mode 100644
index 0000000..bd3118a
--- /dev/null
+++ b/tourdeflexmodules/src/apache/i18n/MillisecondExample.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"
+			   initialize="init(event)">
+	<fx:Script>
+		<![CDATA[	
+			import mx.events.FlexEvent;
+			import mx.formatters.DateFormatter;
+			
+			private var formatter:DateFormatter;
+			private var timer:Timer = new Timer(20);
+			
+			protected function formatDate(event:TimerEvent):void
+			{
+				formatted.text = formatter.format(new Date());
+			}
+			
+			protected function init(event:FlexEvent):void
+			{
+				formatter = new DateFormatter();
+				formatter.formatString = "DD/MM/YYYY H:NN:SS QQQ";
+				
+				timer.addEventListener(TimerEvent.TIMER, formatDate);
+				timer.start();
+			}
+		]]>
+	</fx:Script>
+	
+	<s:Panel title="Millisecond Format Example" width="100%" height="100%">
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>	
+		<s:HGroup>
+			<s:Label text="Formatted Date" />
+			<s:Label id="formatted" />
+		</s:HGroup>
+	</s:Panel>
+</s:Module>
diff --git a/tourdeflexmodules/src/apache/i18n/NumericStepperExample.mxml b/tourdeflexmodules/src/apache/i18n/NumericStepperExample.mxml
new file mode 100644
index 0000000..223a416
--- /dev/null
+++ b/tourdeflexmodules/src/apache/i18n/NumericStepperExample.mxml
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s: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="en_ES">
+	
+	<s:Panel title="European Numeric Stepper Example" width="100%" height="100%">
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>	
+		<s:HGroup verticalAlign="middle">
+			<s:Label text="Number" />
+			<s:NumericStepper maximum="10" snapInterval="0.05" stepSize="0.05" />
+		</s:HGroup>
+</s:Panel>
+</s:Module>
diff --git a/tourdeflexmodules/src/apache/i18n/ScientificExample.mxml b/tourdeflexmodules/src/apache/i18n/ScientificExample.mxml
new file mode 100644
index 0000000..64175be
--- /dev/null
+++ b/tourdeflexmodules/src/apache/i18n/ScientificExample.mxml
@@ -0,0 +1,44 @@
+<?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:Declarations>
+		<mx:CurrencyFormatter id="amount" />
+	</fx:Declarations>
+	
+	<s:Panel title="Scientific Notation Example" width="100%" height="100%">
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>	
+		<s:HGroup verticalAlign="middle">
+			<s:Label text="Number" />
+			<s:Label text="1.23e02" />
+			<s:Label text="Formatted" />
+			<s:Label text="{amount.format('1.23e2')}" />
+		</s:HGroup>
+		<s:HGroup verticalAlign="middle">
+			<s:Label text="Number" />
+			<s:Label text="1.23e-1" />
+			<s:Label text="Formatted" />
+			<s:Label text="{amount.format('1.23e-2')}" />
+		</s:HGroup>
+</s:Panel>
+</s:Module>
diff --git a/tourdeflexmodules/src/apache/i18n/TimeZoneExample.mxml b/tourdeflexmodules/src/apache/i18n/TimeZoneExample.mxml
new file mode 100644
index 0000000..37ae6aa
--- /dev/null
+++ b/tourdeflexmodules/src/apache/i18n/TimeZoneExample.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">
+	<fx:Script>
+		<![CDATA[	
+			import mx.formatters.DateFormatter;
+			
+			private var formatter:DateFormatter;
+			
+			protected function formatDate(event:Event):void
+			{
+				formatter = new DateFormatter();
+				
+				if (format1.selected) {
+					formatter.formatString = "DD/MM/YYYY ZO";
+				}
+				else if (format2.selected) {
+					formatter.formatString = "DD/MM/YYYY ZOO";
+				}
+				else if (format3.selected) {
+					formatter.formatString = "DD/MM/YYYY ZOOO";
+				}
+				
+				formatted.text = formatter.format(date.selectedDate);
+			}
+		]]>
+	</fx:Script>
+	
+	<s:Panel title="Timezone Formating Example" width="100%" height="100%">
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>	
+		<s:HGroup verticalAlign="middle">
+			<s:Label text="Date" />
+			<mx:DateField id="date" change="formatDate(event)" />
+		</s:HGroup>
+		<s:HGroup verticalAlign="middle">
+			<s:Label text="Date Format" />
+			<s:RadioButton id="format1" label="DD/MM/YYYY ZO" selected="true" click="formatDate(event)" />	
+			<s:RadioButton id="format2" label="DD/MM/YYYY ZOO" click="formatDate(event)"/>	
+			<s:RadioButton id="format3" label="DD/MM/YYYY ZOOO" click="formatDate(event)"/>
+		</s:HGroup>
+		<s:HGroup>
+			<s:Label text="Formatted Date" />
+			<s:Label id="formatted" />
+		</s:HGroup>
+	</s:Panel>
+</s:Module>
diff --git a/tourdeflexmodules/src/apache/squiggly/SpellingConfig.xml b/tourdeflexmodules/src/apache/squiggly/SpellingConfig.xml
new file mode 100644
index 0000000..dfae724
--- /dev/null
+++ b/tourdeflexmodules/src/apache/squiggly/SpellingConfig.xml
@@ -0,0 +1,23 @@
+<?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.
+
+-->
+<SpellingConfig>
+  <LanguageResource language="English (British)" languageCode="en_GB" ruleFile="./dictionaries/en_GB/en_GB.aff" dictionaryFile="./dictionaries/en_GB/en_GB.dic"/>
+  <LanguageResource language="English (US)" languageCode="en_US" ruleFile="./dictionaries/en_US/en_US.aff" dictionaryFile="./dictionaries/en_US/en_US.dic"/>
+</SpellingConfig>
diff --git a/tourdeflexmodules/src/apache/squiggly/SpellingExExample.mxml b/tourdeflexmodules/src/apache/squiggly/SpellingExExample.mxml
new file mode 100644
index 0000000..bccd7fb
--- /dev/null
+++ b/tourdeflexmodules/src/apache/squiggly/SpellingExExample.mxml
@@ -0,0 +1,44 @@
+<?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 com.adobe.linguistics.spelling.SpellUI;	
+				
+				private function enableSpelling():void {
+					SpellUI.enableSpelling(textArea, "en_US");
+				}
+		]]>
+	</fx:Script>
+
+	<s:Panel title="Spell Check" width="100%" height="100%">
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		<s:Group width="100%" height="100%">
+			<s:TextArea id="textArea" width="50%" height="50%"
+						text="I know Enlish. Use the context menu to see the suggestions of the missbelled word." />					
+		</s:Group>
+		<s:Button label="Check Spelling" click="enableSpelling()" /> 
+	</s:Panel>
+
+</s:Module>
diff --git a/tourdeflexmodules/src/apache/squiggly/SpellingExample.mxml b/tourdeflexmodules/src/apache/squiggly/SpellingExample.mxml
new file mode 100644
index 0000000..05c7e0e
--- /dev/null
+++ b/tourdeflexmodules/src/apache/squiggly/SpellingExample.mxml
@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+-->
+<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml"
+				xmlns:s="library://ns.adobe.com/flex/spark"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">		
+<mx:Script>
+	<![CDATA[
+			import com.adobe.linguistics.spelling.SpellUI;	
+			
+			private function enableUS():void {
+				SpellUI.enableSpelling(textArea, "en_US");
+			}
+
+			private function enableGB():void {
+				SpellUI.enableSpelling(textArea, "en_GB");
+			}
+	]]>
+</mx:Script>
+	<s:Panel title="Spell Check" width="100%" height="100%">
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		<s:VGroup width="100%" height="100%">
+			<mx:TextArea id="textArea" width="50%" height="50%" text="Spell cheecking in TextArea"/>
+			<mx:Button label="Check British English" click="enableGB()" /> 
+			<mx:Button label="Check American English" click="enableUS()" />			
+		</s:VGroup>
+	</s:Panel>
+	
+</mx:Module>
+
diff --git a/tourdeflexmodules/src/apache/validators/PostCodeValidatorExample.mxml b/tourdeflexmodules/src/apache/validators/PostCodeValidatorExample.mxml
new file mode 100644
index 0000000..eebaac4
--- /dev/null
+++ b/tourdeflexmodules/src/apache/validators/PostCodeValidatorExample.mxml
@@ -0,0 +1,85 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s: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:a="http://flex.apache.org/ns">
+	<s:layout>
+		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
+	</s:layout>
+	
+	<fx:Script>
+		<![CDATA[	
+			import org.apache.flex.validators.PostCodeValidator;
+			
+			import mx.controls.Alert;
+			
+			protected function validatePostCode(event:MouseEvent):void
+			{
+				if (aust.selected) {
+					checkAustralianPostCode(postcode.text);
+				}
+				else if (uk.selected) {
+					checkUKPostCode(postcode.text);
+				}
+				else if (can.selected) {
+					checkCanadianPostCode(postcode.text);
+				}
+			}
+			
+			public function checkAustralianPostCode(postcode:String):void {
+				validator.formats = ["NNNN"];
+			}
+				
+			public function checkUKPostCode(postcode:String):void {
+				validator.formats = ["AN NAA", "ANN NAA", "AAN NAA", "ANA NAA", "AANN NAA", "AANA NAA"];
+			}
+			
+			public function checkCanadianPostCode(postcode:String):void {
+				validator.format = "ANA NAN";
+			}
+		]]>
+	</fx:Script>
+	
+	
+	<fx:Declarations>
+		<a:PostCodeValidator id="validator" source="{postcode}" property="text" 
+					   trigger="{checkPostcode}" triggerEvent="click"
+					   invalid="Alert.show('Postcode incorrect format!', 'Postcode')"/>
+	</fx:Declarations>
+		
+	
+	<s:Panel title="Postcode Validator Example" width="100%" height="100%">		
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		<s:HGroup verticalAlign="middle">
+			<s:Label text="Postcode" />
+			<s:TextInput id="postcode" text=""/>
+		</s:HGroup>
+		<s:HGroup verticalAlign="middle">
+			<s:Label text="Country" />
+			<s:RadioButton id="aust" label="Australia" selected="true" />	
+			<s:RadioButton id="uk" label="UK" />	
+			<s:RadioButton id="can" label="Canada" />
+		</s:HGroup>
+		<s:Button id="checkPostcode" label="Validate Postcode" click="validatePostCode(event)" />
+	</s:Panel>
+</s:Module>
diff --git a/tourdeflexmodules/src/explorer.mxml b/tourdeflexmodules/src/explorer.mxml
new file mode 100755
index 0000000..51b6dea
--- /dev/null
+++ b/tourdeflexmodules/src/explorer.mxml
@@ -0,0 +1,232 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:explorer="*"
+				pageTitle="{TITLE}" layout="vertical" width="100%" height="100%"
+				paddingBottom="2" paddingTop="2" paddingLeft="2" paddingRight="2"
+			    initialize="init()" creationComplete="checkParameters()">
+
+     <fx:Script>
+        <![CDATA[
+		import mx.core.FlexGlobals;
+
+		static protected const VERSION:String = "1.2";	
+		static protected const TITLE:String = "Tour De Flex Component Explorer";
+		static protected const FULL_TITLE:String = "Apache Flex® Tour De Flex Component Explorer " + VERSION;
+
+		[Embed(source="explorer.xml", mimeType="application/octet-stream")]
+		private var XMLData:Class;
+			
+		[Bindable]
+		protected var noExamples:int = 0;
+			
+		private function init():void
+		{
+			var data:XML = XML(new XMLData());
+			
+            explorerTree = XML(data.node);
+            compLibTree.dataProvider = explorerTree;
+			
+			noExamples = (explorerTree..node.(hasOwnProperty("@app") && @app.length() > 0)).length();
+			
+			var loader:URLLoader = new URLLoader();
+			var request:URLRequest = new URLRequest("3rdparty.xml");
+			loader.addEventListener(Event.COMPLETE, load3rdParty);
+			loader.load(request);
+		}
+			
+		protected function load3rdParty(event:Event):void
+		{
+		  var loader:URLLoader = URLLoader(event.target);
+		  var newNode:XML = new XML(loader.data);
+		  
+		  if (newNode..node.length() > 0) {
+			  explorerTree.appendChild(newNode.node);
+              compLibTree.dataProvider = explorerTree;
+			  noExamples += (newNode..node.(hasOwnProperty("@app") && @app.length() > 0)).length();
+		  }
+		}
+					
+		protected function checkParameters():void
+		{		
+			var parameters:Object = FlexGlobals.topLevelApplication.parameters;
+			
+			if (parameters.hasOwnProperty("app")) {
+				var application:String = parameters.app;
+				var source:String = explorerTree..node.(hasOwnProperty("@app") && @app == application).@src;
+				loadApp(application, source, false);
+				openNode(application);
+			}
+            else if (parameters.hasOwnProperty("module")) {
+                var module:String = parameters.module;
+                var moduleSource:String = explorerTree..node.(hasOwnProperty("@module") && @module == application).@src;
+                loadModule(module, moduleSource, false);
+                openModuleNode(module);
+            }
+			else {
+				loadModule("Welcome", null, false);
+			}
+		}
+
+        private function treeChanged(event:Event):void
+        {
+            var nodeApp:String = compLibTree.selectedItem.@app;
+            var nodeModule:String = compLibTree.selectedItem.@module;
+			var link:String = compLibTree.selectedItem.hasOwnProperty("@link") ? compLibTree.selectedItem.@link : "";
+			var thirdParty:Boolean = compLibTree.selectedItem.hasOwnProperty("@thirdParty")
+				&& compLibTree.selectedItem.@thirdParty == "true";
+			
+            if (nodeApp != null && nodeApp != "")
+            {
+				loadApp(nodeApp, compLibTree.selectedItem.@src, thirdParty, link);
+            }
+            else if (nodeModule != null && nodeModule != "")
+            {
+                loadModule(nodeModule, compLibTree.selectedItem.@src, thirdParty, link);
+            }
+            else
+            {
+                compLibTree.expandItem(compLibTree.selectedItem, true, true);
+            }
+        }
+			
+		private function loadApp(application:String, source:String, thirdParty:Boolean, link:String=""):void
+		{
+			if (application.indexOf(".swf") > 0) {
+				swfLoader.loadApp(application);
+			}
+			else if(application.indexOf(".jpg") > 0 || application.indexOf(".png") > 0)
+			{
+				swfLoader.loadApp(application,link);
+			}
+			else {
+				swfLoader.loadApp(application + ".swf");
+			}
+			if (thirdParty) {
+				vs.thirdPartyWarning();
+			}
+			else {
+            	vs.loadSource(application, source);
+			}
+		}
+            
+        private function loadModule(application:String, source:String, thirdParty:Boolean, link:String=""):void
+        {
+            if (application.indexOf(".swf") > 0) {
+                swfLoader.loadModule(application);
+            }
+            else {
+                swfLoader.loadModule(application + ".swf");
+            }
+            if (thirdParty) {
+                vs.thirdPartyWarning();
+            }
+            else {
+                vs.loadSource(application, source);
+            }
+        }
+			
+		private function gotoHome(event:Event):void
+		{
+			var urlRequest:URLRequest = new URLRequest("http://flex.apache.org/download-tourdeflex.html");
+			navigateToURL(urlRequest);
+		}
+		
+		private function openNode(application:String):void
+		{
+			var node:XML = explorerTree..node.(hasOwnProperty("@app") && @app == application)[0];
+			var parent:XML;
+			var nodes:Array = [];
+			 
+			if (!node) {
+				return;
+			}
+			
+			parent = node.parent();
+			 
+			while (parent != null) {
+			    if (!compLibTree.isItemOpen(parent)) {
+			        nodes.push(parent);
+			    }
+			    parent = parent.parent();
+			}
+			 
+			for each (var expand:XML in nodes) {
+			    compLibTree.expandItem(expand, true);
+			}
+			 
+			compLibTree.selectedIndex = compLibTree.getItemIndex(node);
+			compLibTree.scrollToIndex(explorerTree.selectedIndex);
+		}
+            
+        private function openModuleNode(application:String):void
+        {
+            var node:XML = explorerTree..node.(hasOwnProperty("@module") && @module == application)[0];
+            var parent:XML;
+            var nodes:Array = [];
+            
+            if (!node) {
+                return;
+            }
+            
+            parent = node.parent();
+            
+            while (parent != null) {
+                if (!compLibTree.isItemOpen(parent)) {
+                    nodes.push(parent);
+                }
+                parent = parent.parent();
+            }
+            
+            for each (var expand:XML in nodes) {
+                compLibTree.expandItem(expand, true);
+            }
+            
+            compLibTree.selectedIndex = compLibTree.getItemIndex(node);
+            compLibTree.scrollToIndex(explorerTree.selectedIndex);
+        }
+	
+		]]>
+    </fx:Script>
+
+	<fx:Declarations>
+    	<fx:XML id="explorerTree"/>
+	</fx:Declarations>
+	
+	<mx:HBox width="100%">
+		<mx:Image source="./mx/controls/assets/ApacheFlexIcon.png" useHandCursor="true" buttonMode="true" click="gotoHome(event)" />
+		<mx:Label text="{FULL_TITLE}" fontSize="20" fontWeight="bold" />
+		<mx:Spacer width="100%" />
+		<mx:Label text="{noExamples} examples" />
+	</mx:HBox>
+    <mx:HDividedBox width="100%" height="100%">
+        <mx:Panel width="30%" height="100%" title="{TITLE}" dropShadowVisible="false">
+            <mx:Tree id="compLibTree" width="100%" height="100%" showRoot="false" labelField="@label" borderStyle="none"
+                     change="treeChanged(event)"/>
+        </mx:Panel>
+        <mx:VDividedBox width="100%" height="100%">
+            <explorer:loaderPanel id="swfLoader" width="100%" height="50%"/>
+            <mx:VBox width="100%" height="50%" backgroundColor="#FFFFFF">
+                <explorer:viewsource id="vs" width="100%" height="100%"/>
+            </mx:VBox>
+        </mx:VDividedBox>
+    </mx:HDividedBox>
+	<mx:HBox width="100%">
+		<mx:Label fontSize="9" width="100%" text="Copyright © 2014 The Apache Software Foundation, Licensed under the Apache License, Version 2.0. Apache Flex is trademark of The Apache Software Foundation." />
+	</mx:HBox>
+</mx:Application>
diff --git a/tourdeflexmodules/src/explorer.xml b/tourdeflexmodules/src/explorer.xml
new file mode 100755
index 0000000..3fcd6ed
--- /dev/null
+++ b/tourdeflexmodules/src/explorer.xml
@@ -0,0 +1,486 @@
+<?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.
+  -->
+
+<compTree>
+	<node>
+		<node label="MX Framework Components">
+			<node label="Visual Components">
+				<node label="General Controls">
+					<node label="Alert" module="mx/controls/SimpleAlert" />
+					<node label="ColorPicker" module="mx/controls/ColorPickerExample" />
+					<node label="ComboBox" module="mx/controls/SimpleComboBox" />
+					<node label="DataGrid" module="mx/controls/SimpleDataGrid" />
+					<node label="HorizontalList" module="mx/controls/HorizontalListExample" />
+					<node label="HRule" module="mx/controls/SimpleHRule" />
+					<node label="HScrollBar" module="mx/controls/HScrollBarExample" />
+					<node label="HSlider" module="mx/controls/SimpleImageHSlider" />
+					<node label="List" module="mx/controls/SimpleList" />
+					<node label="NumericStepper" module="mx/controls/NumericStepperExample" />
+					<node label="ProgressBar" module="mx/controls/SimpleProgressBar" />
+					<node label="Spacer" module="mx/controls/SpacerExample" />
+					<node label="TabBar" module="mx/controls/TabBarExample" />
+					<node label="TileList" module="mx/controls/TileListExample" />
+					<node label="Tree" module="mx/controls/TreeExample" />
+					<node label="VRule" module="mx/controls/SimpleVRule" />
+					<node label="VScrollBar" module="mx/controls/VScrollBarExample" />
+					<node label="VSlider" module="mx/controls/SimpleImageVSlider" />
+				</node>
+				<node label="Button Controls">
+					<node label="Button" module="mx/controls/ButtonExample" />
+					<node label="ButtonBar" module="mx/controls/ButtonBarExample" />
+					<node label="CheckBox" module="mx/controls/CheckBoxExample" />
+					<node label="LinkBar" module="mx/controls/LinkBarExample" />
+					<node label="LinkButton" module="mx/controls/LinkButtonExample" />
+					<node label="PopUpButton" module="mx/controls/PopUpButtonExample" />
+					<node label="RadioButton" module="mx/controls/RadioButtonExample" />
+					<node label="RadioButtonGroup" module="mx/controls/RadioButtonGroupExample" />
+					<node label="ToggleButtonBar" module="mx/controls/ToggleButtonBarExample" />
+				</node>
+				<node label="Date Controls">
+					<node label="DateChooser" module="mx/controls/DateChooserExample" />
+					<node label="DateField" module="mx/controls/DateFieldExample" />
+				</node>
+				<node label="Loader Controls">
+					<node label="Image" module="mx/controls/SimpleImage" />
+					<node label="SWFLoader" module="mx/controls/SimpleLoader" src="mx/controls/Local.mxml" />
+					<node label="VideoDisplay" module="mx/controls/VideoDisplayExample" />
+				</node>
+				<node label="Menu Controls">
+					<node label="Menu" module="mx/controls/SimpleMenuExample" />
+					<node label="MenuBar" module="mx/controls/MenuBarExample" />
+					<node label="PopUpMenuButton" module="mx/controls/PopUpButtonMenuExample" />
+				</node>
+				<node label="Text Controls">
+					<node label="Label" module="mx/controls/LabelExample" />
+					<node label="RichTextEditor" module="mx/controls/RichTextEditorExample" />
+					<node label="Text" module="mx/controls/TextExample" />
+					<node label="TextArea" module="mx/controls/TextAreaExample" />
+					<node label="TextInput" module="mx/controls/TextInputExample" />
+				</node>
+				<node label="Containers">
+                    <!-- not needed yet
+					<node label="Application" app="mx/core/SimpleApplicationExample" />
+                     -->
+					<node label="Accordion" module="mx/containers/AccordionExample" />
+					<!-- not needed yet
+                    <node label="ApplicationControlBar" app="mx/containers/SimpleApplicationControlBarExample" />
+                     -->
+					<node label="Box" module="mx/containers/SimpleBoxExample" />
+					<node label="Canvas" module="mx/containers/SimpleCanvasExample" />
+					<node label="ControlBar" module="mx/containers/SimpleControlBarExample" />
+					<node label="DividedBox" module="mx/containers/DividedBoxExample" />
+					<node label="Form, FormHeading, FormItem" module="mx/containers/FormExample" />
+					<node label="Grid, GridItem, GridRow" module="mx/containers/GridLayoutExample" />
+					<node label="HBox" module="mx/containers/HBoxExample" />
+					<node label="HDividedBox" module="mx/containers/HDividedBoxExample" />
+					<node label="Panel" module="mx/containers/SimplePanelExample" />
+					<node label="TabNavigator" module="mx/containers/TabNavigatorExample" />
+					<node label="Tile" module="mx/containers/TileLayoutExample" />
+					<node label="TitleWindow" module="mx/containers/TitleWindowApp"
+						src="mx/containers/SimpleTitleWindowExample.mxml" />
+					<node label="VBox" module="mx/containers/VBoxExample" />
+					<node label="VDividedBox" module="mx/containers/VDividedBoxExample" />
+					<node label="ViewStack" module="mx/containers/ViewStackExample" />
+				</node>
+				<node label="Repeater Control">
+					<node label="Repeater" module="mx/core/RepeaterExample" />
+				</node>
+			</node>
+			<node label="Print Controls">
+				<node label="FlexPrintJob, PrintDataGrid" module="mx/printing/PrintDataGridExample"
+					src="mx/printing/FormPrintView.mxml&amp;mx/printing/FormPrintHeader.mxml&amp;mx/printing/FormPrintFooter.mxml" />
+			</node>
+			<node label="Validators and Formatters">
+				<node label="Validators">
+					<node label="CreditCardValidator" module="mx/validators/CreditCardValidatorExample" />
+					<node label="CurrencyValidator" module="mx/validators/CurrencyValidatorExample" />
+					<node label="DateValidator" module="mx/validators/DateValidatorExample" />
+					<node label="EmailValidator" module="mx/validators/EmailValidatorExample" />
+					<node label="NumberValidator" module="mx/validators/NumberValidatorExample" />
+					<node label="PhoneNumberValidator" module="mx/validators/PhoneNumberValidatorExample" />
+					<node label="RegExpValidator" module="mx/validators/RegExValidatorExample" />
+					<node label="SocialSecurityValidator" module="mx/validators/SocialSecurityValidatorExample" />
+					<node label="StringValidator" module="mx/validators/StringValidatorExample" />
+					<node label="Validator" module="mx/validators/SimpleValidatorExample" />
+					<node label="ZipCodeValidator" module="mx/validators/ZipCodeValidatorExample" />
+				</node>
+				<node label="Formatters">
+					<node label="CurrencyFormatter" module="mx/formatters/CurrencyFormatterExample" />
+					<node label="DateFormatter" module="mx/formatters/DateFormatterExample" />
+					<node label="Formatter" module="mx/formatters/SimpleFormatterExample" />
+					<node label="NumberFormatter" module="mx/formatters/NumberFormatterExample" />
+					<node label="PhoneFormatter" module="mx/formatters/PhoneFormatterExample" />
+					<node label="SwitchSymbolFormatter" module="mx/formatters/SwitchSymbolFormatterExample" />
+					<node label="ZipCodeFormatter" module="mx/formatters/ZipCodeFormatterExample" />
+				</node>
+			</node>
+			<node label="Effects, View States, and Transitions">
+				<node label="Effects">
+					<node label="AddItemActionEffect" module="mx/effects/AddItemActionEffectExample" />
+					<node label="AnimateProperty" module="mx/effects/AnimatePropertyEffectExample" />
+					<node label="Blur" module="mx/effects/BlurEffectExample" />
+					<node label="Dissolve" module="mx/effects/DissolveEffectExample" />
+					<node label="Effect" module="mx/effects/SimpleEffectExample" />
+					<node label="Fade" module="mx/effects/FadeEffectExample" />
+					<node label="Glow" module="mx/effects/GlowEffectExample" />
+					<node label="Iris" module="mx/effects/IrisEffectExample" />
+					<node label="Move" module="mx/effects/MoveEffectExample" />
+					<node label="Parallel" module="mx/effects/ParallelEffectExample" />
+					<node label="Pause" module="mx/effects/PauseEffectExample" />
+					<node label="RemoveItemActionEffect" module="mx/effects/AddItemActionEffectExample" />
+					<node label="Resize" module="mx/effects/ResizeEffectExample" />
+					<node label="Rotate" module="mx/effects/RotateEffectExample" />
+					<node label="Sequence" module="mx/effects/SequenceEffectExample" />
+					<node label="SoundEffect" module="mx/effects/SoundEffectExample" />
+					<node label="WipeDown" module="mx/effects/WipeDownExample" />
+					<node label="WipeLeft" module="mx/effects/WipeLeftExample" />
+					<node label="WipeRight" module="mx/effects/WipeRightExample" />
+					<node label="WipeUp" module="mx/effects/WipeUpExample" />
+					<node label="Zoom" module="mx/effects/ZoomEffectExample" />
+				</node>
+				<node label="View States">
+					<node label="State" module="mx/states/StatesExample" />
+				</node>
+				<node label="Transitions">
+					<node label="Transition" module="mx/states/TransitionExample" />
+				</node>
+			</node>
+			<node label="Datavisualization Components">
+				<node label="Charts">
+					<node label="Chart Controls">
+						<node label="AreaChart" module="mx/charts/Line_AreaChartExample" />
+						<node label="AxisRenderer" module="mx/charts/HLOCChartExample" />
+						<node label="BarChart" module="mx/charts/Column_BarChartExample" />
+						<node label="BubbleChart" module="mx/charts/BubbleChartExample" />
+						<node label="CandlestickChart" module="mx/charts/CandlestickChartExample" />
+						<node label="CategoryAxis" module="mx/charts/HLOCChartExample" />
+						<node label="ColumnChart" module="mx/charts/Column_BarChartExample" />
+						<node label="DateTimeAxis" module="mx/charts/DateTimeAxisExample" />
+						<node label="GridLines" module="mx/charts/GridLinesExample" />
+						<node label="HLOCChart" module="mx/charts/HLOCChartExample" />
+						<node label="Legend" module="mx/charts/PlotChartExample" />
+						<node label="LinearAxis" module="mx/charts/HLOCChartExample" />
+						<node label="LineChart" module="mx/charts/Line_AreaChartExample" />
+						<node label="LogAxis" module="mx/charts/LogAxisExample" />
+						<node label="PieChart" module="mx/charts/PieChartExample" />
+						<node label="PlotChart" module="mx/charts/PlotChartExample" />
+					</node>
+					<node label="Chart Series">
+						<node label="AreaSeries" module="mx/charts/Line_AreaChartExample" />
+						<node label="BarSeries" module="mx/charts/Column_BarChartExample" />
+						<node label="BubbleSeries" module="mx/charts/BubbleChartExample" />
+						<node label="CandlestickSeries" module="mx/charts/CandlestickChartExample" />
+						<node label="ColumnSeries" module="mx/charts/Column_BarChartExample" />
+						<node label="HLOCSeries" module="mx/charts/HLOCChartExample" />
+						<node label="LineSeries" module="mx/charts/Line_AreaChartExample" />
+						<node label="PieSeries" module="mx/charts/PieChartExample" />
+						<node label="PlotSeries" module="mx/charts/PlotChartExample" />
+					</node>
+					<node label="Chart Effects">
+						<node label="SeriesInterpolate" module="mx/charts/SeriesInterpolateExample" />
+						<node label="SeriesSlide" module="mx/charts/SeriesSlideExample" />
+						<node label="SeriesZoom" module="mx/charts/SeriesZoomExample" />
+					</node>
+				</node>
+				<node label="AdancedDataGrid">
+					<node label="AdvancedDataGrid" module="mx/controls/AdvancedDataGridExample" />
+				</node>
+				<node label="OLAPDataGrid">
+					<node label="OLAPDataGrid" module="mx/controls/OLAPDataGridExample" />
+				</node>
+				<node label="Printing">
+					<node label="ADG Printing" module="mx/printing/AdvancedPrintDataGridExample" />
+				</node>
+			</node>
+		</node>
+		<node label="Spark Framework Components">
+			<node label="Techniques and Examples">
+				<node label="Advanced CSS">
+					<node label="Descendant Selector" module="spark/css/CSSDescendantSelectorExample" />
+					<node label="ID Selector" module="spark/css/CSSIDSelectorExample" />
+					<node label="Type + Class Selector" module="spark/css/CSSTypeClassSelectorExample" />
+				</node>
+				<node label="Binding">
+					<node label="Bidirectional Binding 1" module="spark/other/BidirectionalBinding1Example" />
+					<node label="Bidirectional Binding 2" module="spark/other/BidirectionalBinding2Example" />
+				</node>
+				<node label="Cursors">
+					<node label="Busy Cursor" module="spark/other/Cursor1Example" />
+					<node label="Custom Cursor" module="spark/other/Cursor2Example" />
+				</node>
+				<!-- Require remote service to work
+				<node label="DataGrid">
+					<node label="DataGrid" module="spark/controls/DataGridExample2"/>
+					<node label="Custom Renderer" module="spark/controls/DataGridCustomRendererExample"/>
+					<node label="Custom Renderer" module="spark/controls/DataGridCustomRendererPrepareExample"/>
+					<node label="Custom Skin" module="spark/controls/DataGridCustomSkinExample"/>
+					<node label="Columns" module="spark/controls/DataGridSimpleColumnsExample"/>
+					<node label="No wrap" module="spark/controls/DataGridSimpleNoWrapExample"/>
+					<node label="Sizing" module="spark/controls/DataGridSizingExample"/>
+				</node>
+				<node label="Data Paging">
+					<node label="Data Paging" module="spark/controls/ListDataPagingExample" />
+				</node>
+				-->
+				<node label="Drag and Drop">
+					<node label="List to List" module="spark/other/DragAndDrop1Example" />
+					<node label="List to Panel" module="spark/other/DragAndDrop2Example" />
+				</node>
+				<node label="Custom Components">
+					<node label="Search" module="spark/components/SearchExample" src="spark/components/SearchBox.as" />
+					<node label="Video Player" module="spark/components/VideoPlayerExample" src="spark/components/VideoPlayer.mxml" />
+				</node>
+				<node label="i18n">
+					<node label="Collator" module="spark/i18n/SparkCollatorExample"/>
+					<node label="Basic Collator" module="spark/i18n/SparkCollator2Example"/>
+					<node label="Currency Validator" module="spark/i18n/SparkCurrencyValidatorExample"/>
+					<node label="Basic Currency Validator" module="spark/i18n/SparkCurrencyValidator2Example"/>
+					<node label="Number Validator" module="spark/i18n/SparkNumberValidatorExample"/>
+					<node label="Basic Number Validator" module="spark/i18n/SparkNumberValidator2Example"/>
+					<node label="Date Time Formatter" module="spark/i18n/SparkDateTimeFormatterExample"/>
+					<node label="Basic Date Time Formatter" module="spark/i18n/SparkDateTimeFormatter2Example"/>
+					<node label="Currency Formatter" module="spark/i18n/SparkCurrencyFormatterExample"/>
+					<node label="Basic Currency Formatter" module="spark/i18n/SparkCurrencyFormatter2Example"/>
+					<node label="Number Formatter" module="spark/i18n/SparkNumberFormatterExample"/>
+					<node label="Basic Number Formatter" module="spark/i18n/SparkNumberFormatter2Example"/>
+					<node label="Sort" module="spark/i18n/SparkSortandSortFieldExample"/>
+					<node label="Basic Sort" module="spark/i18n/SparkSortandSortField2Example"/>
+					<node label="String Tools" module="spark/i18n/SparkStringToolsExample"/>
+					<node label="Formatters" module="spark/i18n/SparkFormatterExample"/>
+				</node>	
+				<node label="Item Renderers">
+					<node label="List" module="spark/itemRenderers/ListItemRendererExample" src="spark/itemRenderers/MyListItemRenderer.mxml"/>
+					<node label="Scale Image" module="spark/itemRenderers/ItemRenderer1Example" src="spark/itemRenderers/renderers/ImageRenderer1.mxml" />
+					<node label="3D Rotate" module="spark/itemRenderers/ItemRenderer2Example" src="spark/itemRenderers/renderers/ImageRenderer2.mxml" />
+				</node>
+				<node label="Events">
+					<node label="Inline property" module="spark/events/EventExample1" />
+					<node label="Inline block" module="spark/events/EventExample2" />
+					<node label="Function" module="spark/events/EventExample3" />
+					<node label="addEventListener" module="spark/events/EventExample4" />
+					<node label="Dispatch" module="spark/events/EventExample5" />
+					<node label="Custom" module="spark/events/EventExample6" />
+				</node>
+				<node label="Forms">
+					<node label="Help Form" module="spark/controls/SampleHelpFormExample"/>
+					<node label="Sequence Form" module="spark/controls/SampleSequenceFormExample"/>
+					<node label="Simple Form" module="spark/controls/SampleSimpleFormExample"/>
+					<node label="Stacked Form" module="spark/controls/SampleStackedFormExample"/>
+				</node>
+				<node label="Modules">
+					<node label="Load" module="spark/modules/ModuleExample" />
+				</node>
+				<node label="Repeater">
+					<node label="Repeater" module="spark/other/RepeaterExample" />
+				</node>
+				<node label="ScrollBars">
+					<node label="ScrollBars" module="spark/other/ScrollBarsExample" />
+				</node>
+				<node label="Skinning">
+					<node label="Button With Icon" module="spark/skinning/ButtonWithIconExample" src="spark/skinning/skins/CloseButtonSkin.mxml&amp;spark/skinning/skins/AddButtonSkin.mxml&amp;spark/skinning/skins/IconTextButtonSkin.mxml" />
+					<node label="Gradient Skin" module="spark/skinning/SkinningApplication1Example" src="spark/skinning/skins/GradientBackgroundAppSkin.mxml"/>
+					<node label="Background Image Skin" module="spark/skinning/SkinningApplication2Example" src="spark/skinning/skins/BackgroundImageAppSkin.mxml" />
+					<node label="Control Bar Skin" app="spark/skinning/SkinningApplication3Example" src="spark/skinning/skins/CustomControlBarAppSkin.mxml" />
+					<node label="Container Skin" module="spark/skinning/SkinningContainerExample" src="spark/skinning/skins/CustomSkinnableContainerSkin.mxml" />
+				</node>
+				<node label="Viewport">
+					<node label="Controlling Viewport" module="spark/other/ControllingViewportExample" />
+				</node>
+			</node>
+			<node label="Effects and Filters">
+				<node label="Move 3D" module="spark/effects/Move3DExample" />
+				<node label="Filter" module="spark/other/FilterExample" />
+				<node label="Wipe" module="spark/effects/WipeExample" />
+				<node label="Animate Property" module="spark/effects/AnimatePropertiesExample" />
+				<node label="Animate Transform" module="spark/effects/AnimateTransformExample" />
+				<!-- not working
+				<node label="Cross Fade" module="spark/effects/CrossFadeExample" />
+				 -->
+				<node label="Fade" module="spark/effects/FadeExample" />
+				<node label="Rotate 3D" module="spark/effects/Rotate3DExample" />
+				<node label="Scale 3D" module="spark/effects/Scale3DExample" />
+			</node>
+			<node label="Visual Components">
+				<node label="Containers">
+					<node label="Accordion" module="spark/controls/AccordionExample" />
+					<node label="Border" module="spark/containers/BorderExample"/>
+					<node label="DataGroup" module="spark/controls/DataGroupExample" />
+					<node label="Form" module="spark/controls/FormExample" />
+					<node label="HGroup" module="spark/containers/SampleHGroup" />
+					<node label="Group" module="spark/containers/GroupExample"/>
+					<node label="Panel" module="spark/containers/PanelExample"/>
+					<node label="SkinnableDataContainer" module="spark/containers/SkinnableDataContainerExample" />
+					<node label="TabNavigator" module="spark/containers/TabNavigator1Example" />
+					<node label="TabNavigator" module="spark/containers/TabNavigator2Example" />
+					<node label="TileGroup" module="spark/containers/TileGroupExample" />
+					<node label="TitleWindow" module="spark/controls/TitleWindowExample" />
+					<node label="ViewStack" module="spark/controls/ViewStackExample" />
+					<node label="VGroup" module="spark/containers/SampleVGroup" />
+					<node label="Vertical Horizontal Align" module="spark/containers/SampleVerticalHorizontalAlign" />
+				</node>
+				<node label="Graphics and FXG">
+					<node label="Drop Shadow" module="spark/fxg/DropShadowGraphicExample" />
+					<node label="Image" module="spark/fxg/BitmapImageExample" />
+					<node label="Eclipse" module="spark/fxg/EclipseExample" />
+					<node label="Ellipse Transform" module="spark/fxg/EllipseTransformExample" />
+					<node label="Line" module="spark/fxg/LineExample" />
+					<node label="Linear Gradient" module="spark/fxg/LinearGradientsSpreadMethodExample" />
+					<node label="Rectangle" module="spark/fxg/RectExample" />
+					<node label="RichText" module="spark/fxg/RichTextExample" />
+					<node label="Static FXG" module="spark/fxg/StaticFXGExample" />
+				</node>
+				<node label="General Controls">
+					<node label="AdvancedDataGrid" module="spark/controls/AdvancedDatagridExample" />
+					<node label="Checkbox" module="spark/controls/CheckboxExample"/>
+					<node label="ColorPicker" module="spark/controls/ColorPickerExample" />
+					<node label="ComboBox" module="spark/controls/ComboBoxExample" />
+					<node label="DropDown" module="spark/controls/DropdownExample"/>
+					<node label="DataGrid" module="spark/controls/DataGridExample" />
+					<node label="Image" module="spark/controls/ImageExample" />
+					<node label="List" module="spark/controls/ListExample" />
+					<node label="Menu" module="spark/controls/MenuExample" />
+					<node label="NumericStepper" module="spark/controls/NumericStepperExample"/>
+					<node label="OLAPDataGrid" module="spark/controls/OLAPDataGridExample" />
+					<node label="ProgressBar" module="spark/controls/ProgressBarExample" />
+					<node label="RadioButton" module="spark/controls/RadioButtonExample"/>
+					<node label="ScrollBar" module="spark/controls/ScrollBarExample" />
+					<node label="Scroller" module="spark/controls/Scroller1Example"/>
+					<node label="Scroller and Tabbing" module="spark/controls/Scroller2Example"/>
+					<node label="Slider" module="spark/controls/SliderExample"/>
+					<node label="Spinner" module="spark/controls/SpinnerExample"/>
+					<!--  Removed to avoid putting swf in repo
+					<node label="SWFloader" module="spark/controls/SWFLoaderExample" />
+					-->
+					<node label="ToolTip" module="spark/controls/ToolTipExample" />
+					<node label="Tree" module="spark/controls/TreeExample" />
+					<node label="VideoDisplay" module="spark/controls/VideoDisplayExample" />
+					<!-- Removed  as it's using an external asset they may not work any more
+					<node label="VideoDisplay" module="spark/controls/OSMFExample" />
+					 -->
+					<node label="VideoPlayer" module="spark/controls/VideoPlayerExample" />
+				</node>	
+				<node label="Button Controls">
+					<node label="Button" module="spark/controls/ButtonExample"/>
+					<node label="ButtonBar" module="spark/controls/ButtonBarExample"/>
+					<node label="LinkBar" module="spark/controls/LinkBarExample" />
+					<node label="LinkButton" module="spark/controls/LinkButtonExample" />
+					<node label="PopUpButton" module="spark/controls/PopupButtonExample" />
+					<node label="PopUpAnchor" module="spark/controls/PopUpAnchor1Example"/>
+					<node label="PopUpAnchor" module="spark/controls/PopUpAnchor2Example"/>
+					<node label="ToggleButton" module="spark/controls/ToggleButtonExample"/>
+					<node label="ToggleButtonBar" module="spark/controls/ToggleButtonBarExample" />
+				</node>
+				<node label="Date Controls">
+					<node label="DateChooser" module="spark/controls/DateChooserExample" />
+					<node label="DateField" module="spark/controls/DateFieldExample" />
+				</node>
+				<node label="Text Controls">
+					<node label="RichEditableText" module="spark/controls/RichEditableTextExample" />
+					<node label="TextArea" module="spark/controls/TextAreaExample" />
+					<node label="TextInput" module="spark/controls/TextInputExample" />
+					<node label="Sample Layout" module="spark/controls/TextLayout1Example" />
+					<node label="News Layout" module="spark/controls/TextLayout2Example" />
+					<node label="Text Controls" module="spark/controls/TextLayout3Example" />
+					<node label="Import Format Types" module="spark/controls/TextLayout4Example" />
+					<!--  Doesn't comile with current version of TLF
+					<node label="Text Layout Editor" module="spark/tlf/TextLayoutEditorSample" />
+					-->
+				</node>
+				<node label="Layouts">
+					<node label="Animated" module="spark/layouts/CustomLayoutAnimatedExample" />
+					<node label="Baseline" module="spark/layouts/CustomLayoutHBaselineExample" />
+					<node label="Image Wheel" module="spark/layouts/CustomLayoutFlickrWheelExample" />
+					<node label="Text Flow" module="spark/layouts/CustomLayoutFlowExample" />
+				</node>
+			</node>
+			<node label="Charts">
+				<node label="AreaChart" module="spark/charts/AreaChartExample" />
+				<node label="BarChart" module="spark/charts/BarChartExample" />
+				<node label="BubbleChart" module="spark/charts/BubbleChartExample" />
+				<node label="CandleStickChart" module="spark/charts/CandleStickChartExample" />
+				<node label="ColumnChart" module="spark/charts/ColumnChartExample" />
+				<node label="HLOCChart" module="spark/charts/HLOCChartExample" />
+				<node label="LineChart" module="spark/charts/LineChartExample" />
+				<node label="PieChart" module="spark/charts/PieChartExample" />
+				<node label="PlotChart" module="spark/charts/PlotChartExample" />
+				<node label="SeriesInterpolate" module="spark/charts/SeriesInterpolateExample" />
+				<node label="SeriesSlide" module="spark/charts/SeriesSlideExample" />
+				<node label="SeriesZoom" module="spark/charts/SeriesZoomExample" />
+			</node>
+			<node label="Validators and Formatters">
+				<node label="Validators">
+					<node label="CreditCardValidator" module="spark/validators/CreditCardValidatorExample" />
+					<node label="CurrencyValidator" module="spark/validators/CurrencyValidatorExample" />
+					<node label="DateValidator" module="spark/validators/DateValidatorExample" />
+					<node label="EmailValidator" module="spark/validators/EmailValidatorExample" />
+					<node label="NumberValidator" module="spark/validators/NumberValidatorExample" />
+					<node label="RegExpValidator" module="spark/validators/RegExpValidatorExample" />
+					<node label="SocialSecurityValidator" module="spark/validators/SocialSecurityValidatorExample" />
+					<node label="StringValidator" module="spark/validators/StringValidatorExample" />
+					<node label="Validator" module="spark/validators/FormValidatorExample" />
+					<node label="ZipCodeValidator" module="spark/validators/ZipCodeValidatorExample" />
+				</node>
+				<node label="Formatters">
+					<node label="CurrencyFormatter" module="spark/formatters/CurrencyFormatterExample" />
+					<node label="DateFormatter" module="spark/formatters/DateFormatterExample" />
+					<node label="NumberFormatter" module="spark/formatters/NumberFormatterExample" />
+					<node label="PhoneFormatter" module="spark/formatters/PhoneFormatterExample" />
+					<node label="SwitchFormatter" module="spark/formatters/SwitchFormatterExample" />
+					<node label="ZipCodeFormatter" module="spark/formatters/ZipCodeFormatterExample" />
+				</node>
+			</node>
+		</node>
+		<node label="Apache Flex Components and Features">
+			<node label="Apache Flex 4.8" module="apache/ApacheFlex4_8_0">
+				<!--  Do we habe any examples here? -->
+			</node>
+			<node label="Apache Flex 4.9" module="apache/ApacheFlex4_9_0">
+				<!--  Add more examples here -->
+				<node label="PostCodeFormatter" module="apache/formatters/PostCodeFormatterExample"/>
+				<node label="PostCodeValidator" module="apache/validators/PostCodeValidatorExample"/>
+				<node label="New SDK locales" module="apache/i18n/LocaleExample"/>
+			</node>
+			<node label="Apache Flex 4.10" module="apache/ApacheFlex4_10_0">
+				<!--  Add more examples here -->
+				<node label="International Dates" module="apache/i18n/DateExample"/>
+				<node label="Millisecond Formatting" module="apache/i18n/MillisecondExample"/>
+				<node label="NumberStepper" module="apache/i18n/NumericStepperExample"/>
+				<node label="Scientific Notation Formatting" module="apache/i18n/ScientificExample"/>
+				<node label="Timezone Formatting" module="apache/i18n/TimeZoneExample"/>
+			</node>
+			<node label="Apache Flex 4.11" module="apache/ApacheFlex4_11_0">
+				<!--  Add more examples here -->
+				<node label="Callout" module="apache/containers/CalloutExample"/>
+			</node>
+			<node label="Apache Flex 4.12" module="apache/ApacheFlex4_12_1">
+				<!--  Add more examples here -->
+				<node label="MaskedTextInput" module="apache/controls/MaskedTextInputExample"/>
+			</node>
+			<node label="Apache Flex 4.13" module="apache/ApacheFlex4_13_0">
+				<!--  Add examples here -->
+			</node>
+			<node label="Apache Flex 4.14" module="apache/ApacheFlex4_14_0">
+				<node label="MaskedTextInput" module="apache/controls/SparkRichTextEditorExample"/>
+			</node>
+			<node label="Apache Flex Squiggly" module="apache/Squiggly1_1">
+				<node label="MX Spelling Example" module="apache/squiggly/SpellingExample"/>
+				<node label="Spark Spelling Example" module="apache/squiggly/SpellingExExample"/>
+			</node>
+		</node>
+	</node>
+</compTree>
diff --git a/tourdeflexmodules/src/favicon.ico b/tourdeflexmodules/src/favicon.ico
new file mode 100644
index 0000000..d2be817
--- /dev/null
+++ b/tourdeflexmodules/src/favicon.ico
Binary files differ
diff --git a/tourdeflexmodules/src/index.html b/tourdeflexmodules/src/index.html
new file mode 100755
index 0000000..75e06d9
--- /dev/null
+++ b/tourdeflexmodules/src/index.html
@@ -0,0 +1,79 @@
+<!--
+  ~ 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.
+  -->
+<html lang="en">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<title>Apache Flex® Tour De Flex Component Explorer</title>
+<script src="AC_OETags.js" language="javascript"></script>
+<style type="text/css" media="screen"> 
+    html, body  { height:100%; }
+    body { margin:0; padding:0; overflow:auto; text-align:center; 
+           background-color: #ffffff; }   
+    object:focus { outline:none; }
+    #flashContent { display:none; }
+</style>
+<script type="text/javascript" src="swfobject.js"></script>
+<script type="text/javascript">
+    var swfVersionStr = "11.1.0";
+    var xiSwfUrlStr = "";
+    var flashvars = {};
+    if (swfobject.getQueryParamValue("app") && swfobject.getQueryParamValue("app")) {
+ 		flashvars.app = swfobject.getQueryParamValue("app");
+	}
+    var params = {};
+    params.quality = "high";
+    params.bgcolor = "#ffffff";
+    params.allowscriptaccess = "sameDomain";
+    params.allowfullscreen = "true";
+    var attributes = {};
+    attributes.id = "TourDeFlex";
+    attributes.name = "TourDeFlex";
+    attributes.align = "middle";
+    swfobject.embedSWF(
+        "explorer.swf", "flashContent", 
+        "100%", "100%", 
+        swfVersionStr, xiSwfUrlStr, 
+        flashvars, params, attributes);
+    swfobject.createCSS("#flashContent", "display:block;text-align:left;");
+</script>
+<!-- Google Analytics -->
+<script type="text/javascript">
+	var _gaq = _gaq || [];
+	_gaq.push(['_setAccount', 'UA-37926454-1']);
+	_gaq.push(['_trackPageview']);
+
+	(function() {
+		var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+		ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+		var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+	})();
+</script>
+</head>
+
+<body scroll='no'>
+<div id="flashContent">
+    <p>
+        To view this page ensure that Adobe Flash Player is installed. 
+    </p>
+    <script type="text/javascript"> 
+        var pageHost = ((document.location.protocol == "https:") ? "https://" : "http://"); 
+        document.write("<a href='http://www.adobe.com/go/getflashplayer'><img src='" 
+                        + pageHost + "www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' /></a>" ); 
+    </script> 
+</div>
+</body>
+</html>
diff --git a/tourdeflexmodules/src/loaderPanel.mxml b/tourdeflexmodules/src/loaderPanel.mxml
new file mode 100755
index 0000000..1c1653d
--- /dev/null
+++ b/tourdeflexmodules/src/loaderPanel.mxml
@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<mx:Box xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+		  width="100%" height="100%">
+    <fx:Script>
+     <![CDATA[
+		 import flash.net.navigateToURL;
+    private var _link:String;
+	//For third party components, we are loading an image.  Clicking on the image 
+	//would take the user to the demo app on the third party website
+	public function loadApp(swfApp:String, link:String=""):void
+    {
+    	myLoader.source = swfApp;
+        myLoader.visible = true;
+        myLoader.includeInLayout = true;
+        myModuleLoader.visible = false;
+        myModuleLoader.includeInLayout = false;
+		if(link != "")
+		{
+			_link = link;
+			myLoader.addEventListener(MouseEvent.CLICK, handleClick);
+			myLoader.buttonMode = myLoader.useHandCursor = true;
+		}
+		else
+		{
+			myLoader.removeEventListener(MouseEvent.CLICK, handleClick);
+			myLoader.buttonMode = myLoader.useHandCursor = false;
+		}
+		
+    }
+         
+     //For third party components, we are loading an image.  Clicking on the image 
+     //would take the user to the demo app on the third party website
+     public function loadModule(swfApp:String, link:String=""):void
+     {
+         myModuleLoader.url = swfApp;
+         myModuleLoader.visible = true;
+         myModuleLoader.includeInLayout = true;
+         myLoader.visible = false;
+         myLoader.includeInLayout = false;         
+     }
+		 
+	private function handleClick(event:MouseEvent):void
+	{
+		navigateToURL(new URLRequest(_link),"_blank");
+	}
+    
+    ]]>
+  </fx:Script>
+
+<mx:SWFLoader id="myLoader" width="100%" height="100%"  horizontalAlign="center" verticalAlign="middle" />
+<mx:ModuleLoader id="myModuleLoader" width="100%" height="100%"  horizontalAlign="center" verticalAlign="middle" />
+
+</mx:Box>
diff --git a/tourdeflexmodules/src/mx/charts/BubbleChartExample.mxml b/tourdeflexmodules/src/mx/charts/BubbleChartExample.mxml
new file mode 100755
index 0000000..5e6cd2d
--- /dev/null
+++ b/tourdeflexmodules/src/mx/charts/BubbleChartExample.mxml
@@ -0,0 +1,64 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the BubbleChart control. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
+        <![CDATA[        
+        import mx.collections.ArrayCollection;
+
+        [Bindable]
+        private var expensesAC:ArrayCollection = new ArrayCollection( [
+            { Month: "Jan", Profit: 2000, Expenses: 1500, Amount: 450 },
+            { Month: "Feb", Profit: 1000, Expenses: 200, Amount: 600 },
+            { Month: "Mar", Profit: 1500, Expenses: 500, Amount: 300 },
+            { Month: "Apr", Profit: 1800, Expenses: 1200, Amount: 900 },
+            { Month: "May", Profit: 2400, Expenses: 575, Amount: 500 } ]);
+        ]]>
+    </fx:Script>
+
+	<fx:Declarations>
+		<!-- Define custom color and line style for the bubbles. -->
+    	<mx:SolidColor id="sc1" alpha=".3"/>
+    	<mx:SolidColorStroke id="stroke1" weight="1"/>
+	</fx:Declarations>
+
+    <mx:Panel title="BubbleChart Control Example"
+			  paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+			  height="100%" width="100%">
+        <mx:BubbleChart id="bubblechart" 
+            height="100%" width="100%"
+            paddingRight="5" paddingLeft="5" 
+            showDataTips="true" maxRadius="20"
+            dataProvider="{expensesAC}">
+            <mx:series>
+                <mx:BubbleSeries 
+                    displayName="Profit/Expenses/Amount" 
+                    xField="Profit" 
+                    yField="Expenses" 
+                    radiusField="Amount"
+                    fill="{sc1}"
+                    stroke="{stroke1}" />
+            </mx:series>            
+        </mx:BubbleChart>            
+        <mx:Legend dataProvider="{bubblechart}"/>            
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/charts/CandlestickChartExample.mxml b/tourdeflexmodules/src/mx/charts/CandlestickChartExample.mxml
new file mode 100755
index 0000000..e2c277e
--- /dev/null
+++ b/tourdeflexmodules/src/mx/charts/CandlestickChartExample.mxml
@@ -0,0 +1,90 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the CandlestickChart control. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
+        <![CDATA[          
+        import mx.collections.ArrayCollection;
+
+        [Bindable]
+        private var expensesAC:ArrayCollection = new ArrayCollection( [
+            { Date: "25-Jul", Open: 40.75,  High: 40.75, Low: 40.24, Close:40.31},
+            { Date: "26-Jul", Open: 39.98,  High: 40.78, Low: 39.97, Close:40.34},
+            { Date: "27-Jul", Open: 40.38,  High: 40.66, Low: 40, Close:40.63},
+            { Date: "28-Jul", Open: 40.49,  High: 40.99, Low: 40.3, Close:40.98},
+            { Date: "29-Jul", Open: 40.13,  High: 40.4, Low: 39.65, Close:39.95},
+            { Date: "1-Aug", Open: 39.00,  High: 39.50, Low: 38.7, Close:38.6}, 
+            { Date: "2-Aug", Open: 38.68,  High: 39.34, Low: 37.75, Close:38.84}, 
+            { Date: "3-Aug", Open: 38.76,  High: 38.76, Low: 38.03, Close:38.12}, 
+            { Date: "4-Aug", Open: 37.98,  High: 37.98, Low: 36.56, Close:36.69},                       
+            { Date: "5-Aug", Open: 36.61,  High: 37, Low: 36.48, Close:36.86} ]);
+        ]]>
+    </fx:Script>
+
+	<fx:Declarations>
+	    <!-- Define custom colors for the candles. -->
+	    <mx:SolidColor id="up" color="green" alpha=".8"/>
+	    <mx:SolidColor id="down" color="red" alpha=".8"/>
+	
+	    <!-- Define custom Stroke for the candle wick. -->
+	    <mx:SolidColorStroke id="wick" color="black" weight="2"/>
+	
+	    <!-- Define custom Stroke for the candle box. -->
+	    <mx:SolidColorStroke id="box" color="black" weight="1"/>
+	</fx:Declarations>
+
+    <mx:Panel title="CandlestickChart Control Example"
+			  paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+			  height="100%" width="100%">
+        <mx:CandlestickChart id="candlestickchart" 
+            height="100%" 
+            width="100%"
+            paddingRight="5" 
+            paddingLeft="5" 
+            showDataTips="true"
+            dataProvider="{expensesAC}">            
+            <mx:verticalAxis>
+                <mx:LinearAxis id="vaxis" baseAtZero="false" title="Price"/>
+            </mx:verticalAxis>
+
+            <mx:horizontalAxis>
+                <mx:CategoryAxis id="haxis" categoryField="Date" title="Date"/>
+            </mx:horizontalAxis>
+
+            <mx:horizontalAxisRenderers>
+                <mx:AxisRenderer axis="{haxis}" canDropLabels="true"/>
+            </mx:horizontalAxisRenderers>
+
+            <mx:series>
+                <mx:CandlestickSeries 
+                    openField="Open" 
+                    highField="High" 
+                    lowField="Low" 
+                    closeField="Close"
+                    fill="{up}"
+                    declineFill="{down}"
+                    stroke="{wick}"
+                    boxStroke="{box}" />
+            </mx:series>
+        </mx:CandlestickChart>
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/charts/Column_BarChartExample.mxml b/tourdeflexmodules/src/mx/charts/Column_BarChartExample.mxml
new file mode 100755
index 0000000..b787d38
--- /dev/null
+++ b/tourdeflexmodules/src/mx/charts/Column_BarChartExample.mxml
@@ -0,0 +1,119 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the ColumnChart and BarChart controls. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
+        <![CDATA[          
+        import mx.collections.ArrayCollection;
+
+        [Bindable]
+        private var medalsAC:ArrayCollection = new ArrayCollection( [
+            { Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
+            { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
+            { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 } ]);
+        ]]>
+    </fx:Script>
+
+	<fx:Declarations>
+	    <!-- Define custom colors for use as fills. -->
+	    <mx:SolidColor id="sc1" color="yellow" alpha=".8"/>
+	    <mx:SolidColor id="sc2" color="0xCCCCCC" alpha=".6"/>
+	    <mx:SolidColor id="sc3" color="0xFFCC66" alpha=".6"/>
+	
+	    <!-- Define custom Strokes for the columns. -->
+	    <mx:SolidColorStroke id="s1" color="yellow" weight="2"/>
+	    <mx:SolidColorStroke id="s2" color="0xCCCCCC" weight="2"/>
+	    <mx:SolidColorStroke id="s3" color="0xFFCC66" weight="2"/>
+	</fx:Declarations>
+
+    <mx:Panel title="ColumnChart and BarChart Controls Example"
+			  paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+			  layout="horizontal" height="100%" width="100%">
+        <mx:ColumnChart id="column" 
+            height="100%" 
+            width="45%" 
+            paddingLeft="5" 
+            paddingRight="5" 
+            showDataTips="true" 
+            dataProvider="{medalsAC}">                
+            <mx:horizontalAxis>
+                <mx:CategoryAxis categoryField="Country"/>
+            </mx:horizontalAxis>
+                
+            <mx:series>
+                <mx:ColumnSeries 
+                    xField="Country" 
+                    yField="Gold" 
+                    displayName="Gold"
+                    fill="{sc1}"
+                    stroke="{s1}" />
+                <mx:ColumnSeries 
+                    xField="Country" 
+                    yField="Silver" 
+                    displayName="Silver"
+                    fill="{sc2}"
+                    stroke="{s2}" />
+                <mx:ColumnSeries 
+                    xField="Country" 
+                    yField="Bronze" 
+                    displayName="Bronze"
+                    fill="{sc3}"
+                    stroke="{s3}" />
+            </mx:series>
+        </mx:ColumnChart>
+
+        <mx:Legend dataProvider="{column}"/>
+
+         <mx:BarChart id="bar" height="100%" width="45%" 
+            paddingLeft="5" paddingRight="5" 
+            showDataTips="true" dataProvider="{medalsAC}">
+                
+            <mx:verticalAxis>
+                <mx:CategoryAxis categoryField="Country"/>
+            </mx:verticalAxis>
+                
+            <mx:series>
+                <mx:BarSeries 
+                    yField="Country" 
+                    xField="Gold" 
+                    displayName="Gold"
+                    fill="{sc1}"
+                    stroke="{s1}" />
+                <mx:BarSeries 
+                    yField="Country" 
+                    xField="Silver" 
+                    displayName="Silver"
+                    fill="{sc2}"
+                    stroke="{s2}" />
+                <mx:BarSeries 
+                    yField="Country" 
+                    xField="Bronze" 
+                    displayName="Bronze"
+                    fill="{sc3}"
+                    stroke="{s3}" />
+            </mx:series>
+        </mx:BarChart>
+
+        <mx:Legend dataProvider="{bar}"/>
+
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/charts/DateTimeAxisExample.mxml b/tourdeflexmodules/src/mx/charts/DateTimeAxisExample.mxml
new file mode 100755
index 0000000..53de874
--- /dev/null
+++ b/tourdeflexmodules/src/mx/charts/DateTimeAxisExample.mxml
@@ -0,0 +1,72 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the DateTimeAxis class. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
+        <![CDATA[
+
+            import mx.collections.ArrayCollection;
+
+            [Bindable] 
+            public var stockDataAC:ArrayCollection = new ArrayCollection( [
+                {date: "2005, 7, 27", close: 41.71},
+                {date: "2005, 7, 28", close: 42.21},
+                {date: "2005, 7, 29", close: 42.11},
+                {date: "2005, 8, 1", close: 42.71},
+                {date: "2005, 8, 2", close: 42.99},
+                {date: "2005, 8, 3", close: 44} ]);
+    
+            public function myParseFunction(s:String):Date { 
+                // Get an array of Strings from the comma-separated String passed in.
+                var a:Array = s.split(",");
+                // Create the new Date object. Subtract one from 
+                // the month property because months are zero-based in 
+                // the Date constructor.
+                var newDate:Date = new Date(a[0],a[1]-1,a[2]);
+                return newDate;
+            }
+        ]]>
+    </fx:Script>
+
+    <mx:Panel title="DateTimeAxis Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <mx:LineChart id="mychart" height="100%" width="100%"
+            paddingRight="5" paddingLeft="5" 
+            showDataTips="true" dataProvider="{stockDataAC}">
+            
+            <mx:horizontalAxis>
+                <mx:DateTimeAxis dataUnits="days" parseFunction="myParseFunction"/>
+            </mx:horizontalAxis>
+
+            <mx:verticalAxis>
+                <mx:LinearAxis baseAtZero="false" />
+            </mx:verticalAxis>
+
+            <mx:series>
+                <mx:LineSeries yField="close" xField="date" displayName="AAPL"/>
+            </mx:series>
+        </mx:LineChart>
+        
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/charts/GridLinesExample.mxml b/tourdeflexmodules/src/mx/charts/GridLinesExample.mxml
new file mode 100755
index 0000000..95b15ca
--- /dev/null
+++ b/tourdeflexmodules/src/mx/charts/GridLinesExample.mxml
@@ -0,0 +1,71 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the GridLines class. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
+        <![CDATA[
+
+        import mx.collections.ArrayCollection;
+
+        [Bindable]
+        private var expensesAC:ArrayCollection = new ArrayCollection( [
+            { Month: "Jan", Profit: 2000, Expenses: 1500, Amount: 450 },
+            { Month: "Feb", Profit: 1000, Expenses: 200, Amount: 600 },
+            { Month: "Mar", Profit: 1500, Expenses: 500, Amount: 300 },
+            { Month: "Apr", Profit: 1800, Expenses: 1200, Amount: 900 },
+            { Month: "May", Profit: 2400, Expenses: 575, Amount: 500 } ]);
+        ]]>
+    </fx:Script>
+
+    <mx:Panel title="GridLines Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+        <mx:LineChart id="linechart" height="100%" width="100%"
+            paddingLeft="5" paddingRight="5" 
+            showDataTips="true" dataProvider="{expensesAC}">
+                
+            <mx:horizontalAxis>
+                <mx:CategoryAxis categoryField="Month"/>
+            </mx:horizontalAxis>
+                
+            <mx:backgroundElements>
+               <mx:GridLines gridDirection="horizontal">
+                    <mx:horizontalStroke>
+                        <mx:SolidColorStroke weight="1"/>
+                    </mx:horizontalStroke>
+                    <mx:horizontalFill>
+                        <mx:SolidColor color="0xCCCCCC" alpha=".66"/>
+                    </mx:horizontalFill>
+                </mx:GridLines>
+            </mx:backgroundElements>
+
+            <mx:series>
+                <mx:LineSeries yField="Profit" form="curve" displayName="Profit"/>
+                <mx:LineSeries yField="Expenses" form="curve" displayName="Expenses"/>
+                <mx:LineSeries yField="Amount" form="curve" displayName="Amount"/>
+            </mx:series>
+        </mx:LineChart>
+
+        <mx:Legend dataProvider="{linechart}"/>
+
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/charts/HLOCChartExample.mxml b/tourdeflexmodules/src/mx/charts/HLOCChartExample.mxml
new file mode 100755
index 0000000..8580b3c
--- /dev/null
+++ b/tourdeflexmodules/src/mx/charts/HLOCChartExample.mxml
@@ -0,0 +1,81 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the HLOCChart control. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
+        <![CDATA[          
+        import mx.collections.ArrayCollection;
+
+        [Bindable]
+        private var stockDataAC:ArrayCollection = new ArrayCollection( [
+            { Date: "25-Jul", Open: 40.55,  High: 40.75, Low: 40.24, Close:40.31},
+            { Date: "26-Jul", Open: 40.15,  High: 40.78, Low: 39.97, Close:40.34},
+            { Date: "27-Jul", Open: 40.38,  High: 40.66, Low: 40, Close:40.63},
+            { Date: "28-Jul", Open: 40.49,  High: 40.99, Low: 40.3, Close:40.98},
+            { Date: "29-Jul", Open: 40.13,  High: 40.4, Low: 39.65, Close:39.95},
+            { Date: "1-Aug", Open: 39.00,  High: 39.50, Low: 38.7, Close:38.6}, 
+            { Date: "2-Aug", Open: 38.68,  High: 39.34, Low: 37.75, Close:38.84}, 
+            { Date: "3-Aug", Open: 38.76,  High: 38.76, Low: 38.03, Close:38.12}, 
+            { Date: "4-Aug", Open: 37.98,  High: 37.98, Low: 36.56, Close:36.69},                       
+            { Date: "5-Aug", Open: 36.61,  High: 37, Low: 36.48, Close:36.86} ]); 
+        ]]>
+    </fx:Script>
+
+	<fx:Declarations>
+    	<!-- Define custom Stroke for the wick and ticks. -->
+   		<mx:SolidColorStroke id="s1" color="0x000000" weight="5" joints="bevel" caps="square"/>
+	</fx:Declarations>
+
+    <mx:Panel title="HLOCChart Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+        <mx:HLOCChart id="hlocchart" height="100%" width="100%"
+            paddingRight="5" paddingLeft="5" 
+            showDataTips="true" dataProvider="{stockDataAC}">
+            
+            <mx:verticalAxis>
+                <mx:LinearAxis id="vaxis" baseAtZero="false" title="Price"/>
+            </mx:verticalAxis>
+
+            <mx:horizontalAxis>
+                <mx:CategoryAxis id="haxis" categoryField="Date" title="Date"/>
+            </mx:horizontalAxis>
+
+            <mx:horizontalAxisRenderers>
+                <mx:AxisRenderer axis="{haxis}" canDropLabels="true"/>
+            </mx:horizontalAxisRenderers>
+
+            <mx:series>
+                <mx:HLOCSeries 
+                    openField="Open" 
+                    highField="High" 
+                    lowField="Low" 
+                    closeField="Close"
+                    stroke="{s1}"
+                    openTickStroke="{s1}"
+                    closeTickStroke="{s1}"
+                    openTickLength="7"
+                    closeTickLength="7" />
+            </mx:series>
+        </mx:HLOCChart>
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/charts/Line_AreaChartExample.mxml b/tourdeflexmodules/src/mx/charts/Line_AreaChartExample.mxml
new file mode 100755
index 0000000..4327376
--- /dev/null
+++ b/tourdeflexmodules/src/mx/charts/Line_AreaChartExample.mxml
@@ -0,0 +1,91 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the LineChart and AreaChart controls. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
+        <![CDATA[
+
+        import mx.collections.ArrayCollection;
+
+        [Bindable]
+        private var expensesAC:ArrayCollection = new ArrayCollection( [
+            { Month: "Jan", Profit: 2000, Expenses: 1500, Amount: 450 },
+            { Month: "Feb", Profit: 1000, Expenses: 200, Amount: 600 },
+            { Month: "Mar", Profit: 1500, Expenses: 500, Amount: 300 },
+            { Month: "Apr", Profit: 1800, Expenses: 1200, Amount: 900 },
+            { Month: "May", Profit: 2400, Expenses: 575, Amount: 500 } ]);
+        ]]>
+    </fx:Script>
+
+	<fx:Declarations>
+	    <!-- Define custom colors for use as fills in the AreaChart control. -->
+	    <mx:SolidColor id="sc1" alpha=".3"/>
+	    <mx:SolidColor id="sc2" color="red" alpha=".3"/>
+	    <mx:SolidColor id="sc3" color="green" alpha=".3"/>
+	
+	    <!-- Define custom Strokes. -->
+	    <mx:SolidColorStroke id = "s1" weight="2"/>
+	    <mx:SolidColorStroke id = "s2" color="red" weight="2"/>
+	    <mx:SolidColorStroke id = "s3" color="green" weight="2"/>
+	</fx:Declarations>
+
+    <mx:Panel title="LineChart and AreaChart Controls Example" 
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				layout="horizontal" height="100%" width="100%">
+
+
+        <mx:LineChart id="linechart" height="100%" width="45%"
+            paddingLeft="5" paddingRight="5" 
+            showDataTips="true" dataProvider="{expensesAC}">
+                
+            <mx:horizontalAxis>
+                <mx:CategoryAxis categoryField="Month"/>
+            </mx:horizontalAxis>
+
+            <mx:series>
+                <mx:LineSeries yField="Profit" form="curve" displayName="Profit" lineStroke="{s1}"/>
+                <mx:LineSeries yField="Expenses" form="curve" displayName="Expenses" lineStroke="{s2}"/>
+                <mx:LineSeries yField="Amount" form="curve" displayName="Amount" lineStroke="{s3}"/>
+            </mx:series>
+        </mx:LineChart>
+
+        <mx:Legend dataProvider="{linechart}"/>
+
+        <mx:AreaChart id="Areachart" height="100%" width="45%"
+             paddingLeft="5" paddingRight="5" 
+             showDataTips="true" dataProvider="{expensesAC}">
+                 
+            <mx:horizontalAxis>
+                <mx:CategoryAxis categoryField="Month"/>
+            </mx:horizontalAxis>
+
+            <mx:series>
+                <mx:AreaSeries yField="Profit" form="curve" displayName="Profit" areaStroke="{s1}" areaFill="{sc1}"/>
+                <mx:AreaSeries yField="Expenses" form="curve" displayName="Expenses" areaStroke="{s2}" areaFill="{sc2}"/>
+                <mx:AreaSeries yField="Amount" form="curve" displayName="Amount" areaStroke="{s3}" areaFill="{sc3}"/>
+            </mx:series>
+        </mx:AreaChart>
+            
+        <mx:Legend dataProvider="{Areachart}"/>
+
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/charts/LogAxisExample.mxml b/tourdeflexmodules/src/mx/charts/LogAxisExample.mxml
new file mode 100755
index 0000000..f52d06b
--- /dev/null
+++ b/tourdeflexmodules/src/mx/charts/LogAxisExample.mxml
@@ -0,0 +1,65 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the LogAxis class. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
+        <![CDATA[
+
+        import mx.collections.ArrayCollection;
+
+        [Bindable]
+        private var expensesAC:ArrayCollection = new ArrayCollection( [
+            { Month: "Jan", Profit: 20000, Expenses: 1500, Amount: 450 },
+            { Month: "Feb", Profit: 1000, Expenses: 15000, Amount: 600 },
+            { Month: "Mar", Profit: 15000, Expenses: 5000, Amount: 300 },
+            { Month: "Apr", Profit: 1800, Expenses: 1200, Amount: 900 },
+            { Month: "May", Profit: 2400, Expenses: 575, Amount: 500 } ]);
+        ]]>
+    </fx:Script>
+
+    <mx:Panel title="LogAxis Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <mx:LineChart id="linechart" height="100%" width="100%"
+            paddingLeft="5" paddingRight="5" 
+            showDataTips="true" dataProvider="{expensesAC}">
+                
+            <mx:horizontalAxis>
+                <mx:CategoryAxis categoryField="Month"/>
+            </mx:horizontalAxis>
+                
+            <mx:verticalAxis>
+                <mx:LogAxis interval="10"/>
+            </mx:verticalAxis>
+                
+            <mx:series>
+                <mx:LineSeries yField="Profit" form="curve" displayName="Profit"/>
+                <mx:LineSeries yField="Expenses" form="curve" displayName="Expenses"/>
+                <mx:LineSeries yField="Amount" form="curve" displayName="Amount"/>
+            </mx:series>
+        </mx:LineChart>
+
+        <mx:Legend dataProvider="{linechart}"/>
+
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/charts/PieChartExample.mxml b/tourdeflexmodules/src/mx/charts/PieChartExample.mxml
new file mode 100755
index 0000000..54a8f04
--- /dev/null
+++ b/tourdeflexmodules/src/mx/charts/PieChartExample.mxml
@@ -0,0 +1,86 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the PieChart control. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
+        <![CDATA[          
+        import mx.collections.ArrayCollection;
+
+        [Bindable]
+        private var medalsAC:ArrayCollection = new ArrayCollection( [
+            { Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
+            { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
+            { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 } ]);
+    
+        private function displayGold(data:Object, field:String, index:Number, percentValue:Number):String {
+            var temp:String= (" " + percentValue).substr(0,6);
+            return data.Country + ": " + '\n' + "Total Gold: " + data.Gold + '\n' + temp + "%";
+        }
+        ]]>
+    </fx:Script>
+
+	<fx:Declarations>
+	    <!-- Define custom colors for use as pie wedge fills. -->
+	    <mx:SolidColor id="sc1" alpha=".6"/>
+	    <mx:SolidColor id="sc2" color="red" alpha=".6"/>
+	    <mx:SolidColor id="sc3" color="0x663300" alpha=".6"/>
+	
+	    <!-- This Stroke is used for the callout lines. -->
+	    <mx:SolidColorStroke id="callouts" weight="2" color="0x999999" alpha=".8" caps="square"/>
+	    
+	    <!-- This Stroke is used to separate the wedges in the pie. -->
+	    <mx:SolidColorStroke id="radial" weight="1" color="0xFFFFCC" alpha=".3"/>
+	
+	    <!-- This Stroke is used for the outer border of the pie. -->
+	    <mx:SolidColorStroke id="pieborder" color="0x000000" weight="2" alpha=".5"/>
+	</fx:Declarations>
+
+    <mx:Panel title="Olympics 2004 Medals Tally Panel"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+        <mx:PieChart id="chart" 
+            height="100%" 
+            width="100%"
+            paddingRight="5" 
+            paddingLeft="5" 
+            showDataTips="true" 
+            dataProvider="{medalsAC}">          
+            <mx:series>
+                <mx:PieSeries 
+                    nameField="Country"
+                    labelPosition="callout" 
+                    field="Gold" 
+                    labelFunction="displayGold" 
+                    calloutStroke="{callouts}" 
+                    radialStroke="{radial}" 
+                    stroke="{pieborder}"
+                    fills="{[sc1, sc2, sc3]}">
+                    <!-- Clear the drop shadow filters from the chart. -->
+                    <mx:filters>
+                        <fx:Array/>
+                    </mx:filters>
+                </mx:PieSeries>
+            </mx:series>
+        </mx:PieChart>  
+        <mx:Legend dataProvider="{chart}"/>
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/charts/PlotChartExample.mxml b/tourdeflexmodules/src/mx/charts/PlotChartExample.mxml
new file mode 100755
index 0000000..e08ead0
--- /dev/null
+++ b/tourdeflexmodules/src/mx/charts/PlotChartExample.mxml
@@ -0,0 +1,81 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the PlotChart control. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
+        <![CDATA[
+        import mx.collections.ArrayCollection;
+
+        [Bindable]
+        private var expensesAC:ArrayCollection = new ArrayCollection( [
+            { Month: "Jan", Profit: 2000, Expenses: 1500, Amount: 450 },
+            { Month: "Feb", Profit: 1000, Expenses: 200, Amount: 600 },
+            { Month: "Mar", Profit: 1500, Expenses: 500, Amount: 300 } ]);
+        ]]>
+    </fx:Script>
+
+	<fx:Declarations>
+	    <!-- Define custom colors for use as plot point fills. -->
+	    <mx:SolidColor id="sc1" alpha=".3"/>
+	    <mx:SolidColor id="sc2" color="red" alpha=".3"/>
+	    <mx:SolidColor id="sc3" color="green" alpha=".3"/>
+	
+	    <!-- Define custom Strokes. -->
+	    <mx:SolidColorStroke id="s1" weight="1"/>
+	    <mx:SolidColorStroke id="s2" color="red" weight="1"/>
+	    <mx:SolidColorStroke id="s3" color="green" weight="1"/>
+	</fx:Declarations>
+
+    <mx:Panel title="PlotChart Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+        <mx:PlotChart id="plot" 
+            height="100%" 
+            width="100%"
+            paddingLeft="5" 
+            paddingRight="5" 
+            showDataTips="true" 
+            dataProvider="{expensesAC}">                
+            <mx:series>
+                <mx:PlotSeries
+                    xField="Expenses"
+                    yField="Profit"
+                    displayName="Plot 1"
+                    fill="{sc1}"
+                    stroke="{s1}" />
+                <mx:PlotSeries
+                    xField="Amount"
+                    yField="Expenses"
+                    displayName="Plot 2"
+                    fill="{sc2}"
+                    stroke="{s2}" />
+                <mx:PlotSeries
+                    xField="Profit"
+                    yField="Amount"
+                    displayName="Plot 3"
+                    fill="{sc3}"
+                    stroke="{s3}" />
+            </mx:series>
+        </mx:PlotChart>
+        <mx:Legend dataProvider="{plot}"/>
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/charts/SeriesInterpolateExample.mxml b/tourdeflexmodules/src/mx/charts/SeriesInterpolateExample.mxml
new file mode 100755
index 0000000..152c2c6
--- /dev/null
+++ b/tourdeflexmodules/src/mx/charts/SeriesInterpolateExample.mxml
@@ -0,0 +1,99 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the CandlestickChart control. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
+        <![CDATA[
+          
+        import mx.collections.ArrayCollection;
+
+        [Bindable]
+        private var companyAAC:ArrayCollection = new ArrayCollection( [
+            { Date: "25-Jul", Open: 40.75,  High: 40.75, Low: 40.24, Close:40.31},
+            { Date: "26-Jul", Open: 39.98,  High: 40.78, Low: 39.97, Close:40.34},
+            { Date: "27-Jul", Open: 40.38,  High: 40.66, Low: 40, Close:40.63},
+            { Date: "28-Jul", Open: 40.49,  High: 40.99, Low: 40.3, Close:40.98},
+            { Date: "29-Jul", Open: 40.13,  High: 40.4, Low: 39.65, Close:39.95},
+            { Date: "1-Aug", Open: 39.00,  High: 39.50, Low: 38.7, Close:38.6}, 
+            { Date: "2-Aug", Open: 38.68,  High: 39.34, Low: 37.75, Close:38.84}, 
+            { Date: "3-Aug", Open: 38.76,  High: 38.76, Low: 38.03, Close:38.12}, 
+            { Date: "4-Aug", Open: 37.98,  High: 37.98, Low: 36.56, Close:36.69},                       
+            { Date: "5-Aug", Open: 36.61,  High: 37, Low: 36.48, Close:36.86} ]);
+
+        [Bindable]
+        private var companyBAC:ArrayCollection = new ArrayCollection( [
+            { Date: "25-Jul", Open: 18.50,  High: 19, Low: 18.48, Close:18.86},
+            { Date: "26-Jul", Open: 19.56,  High: 19.98, Low: 18.6, Close:18.69},                       
+            { Date: "27-Jul", Open: 20.81,  High: 20.99, Low: 20.03, Close:20.12}, 
+            { Date: "28-Jul", Open: 20.70,  High: 21.00, Low: 19.5, Close:20.84}, 
+            { Date: "29-Jul", Open: 21.7,  High: 21.79, Low: 20.45, Close:20.6}, 
+            { Date: "1-Aug", Open: 22.45,  High: 22.65, Low: 21.65, Close:21.95},
+            { Date: "2-Aug", Open: 22.56,  High: 22.6, Low: 22.05, Close:22.98},
+            { Date: "3-Aug", Open: 22.42,  High: 22.70, Low: 22.1, Close:22.63},
+            { Date: "4-Aug", Open: 21.67,  High: 22.82, Low: 21.67, Close:22.34},
+            { Date: "5-Aug", Open: 22.44,  High: 22.85, Low: 22.12, Close:22.31} ]);
+        ]]>
+    </fx:Script>
+
+	<fx:Declarations>
+    	<mx:SeriesInterpolate id="interpolateIn" duration="1000"/>
+	</fx:Declarations>
+	
+    <mx:Panel title="CandlestickChart Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <mx:CandlestickChart id="candlestickchart" height="100%" width="100%"
+            paddingRight="5" paddingLeft="5" 
+            showDataTips="true" dataProvider="{companyAAC}">
+            
+            <mx:verticalAxis>
+                <mx:LinearAxis id="vaxis" baseAtZero="false" title="Price"/>
+            </mx:verticalAxis>
+
+            <mx:horizontalAxis>
+                <mx:CategoryAxis id="haxis" categoryField="Date" title="Date"/>
+            </mx:horizontalAxis>
+
+            <mx:horizontalAxisRenderers>
+                <mx:AxisRenderer axis="{haxis}" canDropLabels="true"/>
+            </mx:horizontalAxisRenderers>
+
+            <mx:series>
+                <mx:CandlestickSeries  
+                    openField="Open" highField="High" 
+                    lowField="Low" closeField="Close"
+                    showDataEffect="{interpolateIn}"/>
+            </mx:series>
+        </mx:CandlestickChart>
+        
+        <mx:Label width="100%"
+            text="Choose a company to view recent stock data."/>
+
+        <mx:HBox>
+            <mx:RadioButton groupName="stocks" label="View Company A"
+                selected="true" click="candlestickchart.dataProvider=companyAAC"/>
+            <mx:RadioButton groupName="stocks" label="View Company B"
+                click="candlestickchart.dataProvider=companyBAC"/>
+        </mx:HBox>
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/charts/SeriesSlideExample.mxml b/tourdeflexmodules/src/mx/charts/SeriesSlideExample.mxml
new file mode 100755
index 0000000..b94872c
--- /dev/null
+++ b/tourdeflexmodules/src/mx/charts/SeriesSlideExample.mxml
@@ -0,0 +1,101 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the CandlestickChart control. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
+        <![CDATA[
+          
+        import mx.collections.ArrayCollection;
+
+        [Bindable]
+        private var companyAAC:ArrayCollection = new ArrayCollection( [
+            { Date: "25-Jul", Open: 40.75,  High: 40.75, Low: 40.24, Close:40.31},
+            { Date: "26-Jul", Open: 39.98,  High: 40.78, Low: 39.97, Close:40.34},
+            { Date: "27-Jul", Open: 40.38,  High: 40.66, Low: 40, Close:40.63},
+            { Date: "28-Jul", Open: 40.49,  High: 40.99, Low: 40.3, Close:40.98},
+            { Date: "29-Jul", Open: 40.13,  High: 40.4, Low: 39.65, Close:39.95},
+            { Date: "1-Aug", Open: 39.00,  High: 39.50, Low: 38.7, Close:38.6}, 
+            { Date: "2-Aug", Open: 38.68,  High: 39.34, Low: 37.75, Close:38.84}, 
+            { Date: "3-Aug", Open: 38.76,  High: 38.76, Low: 38.03, Close:38.12}, 
+            { Date: "4-Aug", Open: 37.98,  High: 37.98, Low: 36.56, Close:36.69},                       
+            { Date: "5-Aug", Open: 36.61,  High: 37, Low: 36.48, Close:36.86} ]);
+
+        [Bindable]
+        private var companyBAC:ArrayCollection = new ArrayCollection( [
+            { Date: "25-Jul", Open: 18.50,  High: 19, Low: 18.48, Close:18.86},
+            { Date: "26-Jul", Open: 19.56,  High: 19.98, Low: 18.6, Close:18.69},                       
+            { Date: "27-Jul", Open: 20.81,  High: 20.99, Low: 20.03, Close:20.12}, 
+            { Date: "28-Jul", Open: 20.70,  High: 21.00, Low: 19.5, Close:20.84}, 
+            { Date: "29-Jul", Open: 21.7,  High: 21.79, Low: 20.45, Close:20.6}, 
+            { Date: "1-Aug", Open: 22.45,  High: 22.65, Low: 21.65, Close:21.95},
+            { Date: "2-Aug", Open: 22.56,  High: 22.6, Low: 22.05, Close:22.98},
+            { Date: "3-Aug", Open: 22.42,  High: 22.70, Low: 22.1, Close:22.63},
+            { Date: "4-Aug", Open: 21.67,  High: 22.82, Low: 21.67, Close:22.34},
+            { Date: "5-Aug", Open: 22.44,  High: 22.85, Low: 22.12, Close:22.31} ]);
+        ]]>
+    </fx:Script>
+    
+	<fx:Declarations>
+    	<mx:SeriesSlide id="slideIn" duration="1000" direction="up"/>
+    	<mx:SeriesSlide id="slideOut" duration="1000" direction="down"/>
+	</fx:Declarations>
+
+    <mx:Panel title="CandlestickChart Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <mx:CandlestickChart id="candlestickchart" height="100%" width="100%"
+            paddingRight="5" paddingLeft="5" 
+            showDataTips="true" dataProvider="{companyAAC}">
+            
+            <mx:verticalAxis>
+                <mx:LinearAxis id="vaxis" baseAtZero="false" title="Price"/>
+            </mx:verticalAxis>
+
+            <mx:horizontalAxis>
+                <mx:CategoryAxis id="haxis" categoryField="Date" title="Date"/>
+            </mx:horizontalAxis>
+
+            <mx:horizontalAxisRenderers>
+                <mx:AxisRenderer axis="{haxis}" canDropLabels="true"/>
+            </mx:horizontalAxisRenderers>
+
+            <mx:series>
+                <mx:CandlestickSeries  
+                    openField="Open" highField="High" 
+                    lowField="Low" closeField="Close"
+                    showDataEffect="{slideIn}" 
+                    hideDataEffect="{slideOut}"/>
+            </mx:series>
+        </mx:CandlestickChart>
+        
+        <mx:Label width="100%"
+            text="Choose a company to view recent stock data."/>
+
+        <mx:HBox>
+            <mx:RadioButton groupName="stocks" label="View Company A"
+                selected="true" click="candlestickchart.dataProvider=companyAAC"/>
+            <mx:RadioButton groupName="stocks" label="View Company B"
+                click="candlestickchart.dataProvider=companyBAC"/>
+        </mx:HBox>
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/charts/SeriesZoomExample.mxml b/tourdeflexmodules/src/mx/charts/SeriesZoomExample.mxml
new file mode 100755
index 0000000..c993970
--- /dev/null
+++ b/tourdeflexmodules/src/mx/charts/SeriesZoomExample.mxml
@@ -0,0 +1,101 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the CandlestickChart control. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
+        <![CDATA[
+          
+        import mx.collections.ArrayCollection;
+
+        [Bindable]
+        private var companyAAC:ArrayCollection = new ArrayCollection( [
+            { Date: "25-Jul", Open: 40.75,  High: 40.75, Low: 40.24, Close:40.31},
+            { Date: "26-Jul", Open: 39.98,  High: 40.78, Low: 39.97, Close:40.34},
+            { Date: "27-Jul", Open: 40.38,  High: 40.66, Low: 40, Close:40.63},
+            { Date: "28-Jul", Open: 40.49,  High: 40.99, Low: 40.3, Close:40.98},
+            { Date: "29-Jul", Open: 40.13,  High: 40.4, Low: 39.65, Close:39.95},
+            { Date: "1-Aug", Open: 39.00,  High: 39.50, Low: 38.7, Close:38.6}, 
+            { Date: "2-Aug", Open: 38.68,  High: 39.34, Low: 37.75, Close:38.84}, 
+            { Date: "3-Aug", Open: 38.76,  High: 38.76, Low: 38.03, Close:38.12}, 
+            { Date: "4-Aug", Open: 37.98,  High: 37.98, Low: 36.56, Close:36.69},                       
+            { Date: "5-Aug", Open: 36.61,  High: 37, Low: 36.48, Close:36.86} ]);
+
+        [Bindable]
+        private var companyBAC:ArrayCollection = new ArrayCollection( [
+            { Date: "25-Jul", Open: 18.50,  High: 19, Low: 18.48, Close:18.86},
+            { Date: "26-Jul", Open: 19.56,  High: 19.98, Low: 18.6, Close:18.69},                       
+            { Date: "27-Jul", Open: 20.81,  High: 20.99, Low: 20.03, Close:20.12}, 
+            { Date: "28-Jul", Open: 20.70,  High: 21.00, Low: 19.5, Close:20.84}, 
+            { Date: "29-Jul", Open: 21.7,  High: 21.79, Low: 20.45, Close:20.6}, 
+            { Date: "1-Aug", Open: 22.45,  High: 22.65, Low: 21.65, Close:21.95},
+            { Date: "2-Aug", Open: 22.56,  High: 22.6, Low: 22.05, Close:22.98},
+            { Date: "3-Aug", Open: 22.42,  High: 22.70, Low: 22.1, Close:22.63},
+            { Date: "4-Aug", Open: 21.67,  High: 22.82, Low: 21.67, Close:22.34},
+            { Date: "5-Aug", Open: 22.44,  High: 22.85, Low: 22.12, Close:22.31} ]);
+        ]]>
+    </fx:Script>
+    
+	<fx:Declarations>
+    	<mx:SeriesZoom id="zoomIn" duration="1000"/>
+    	<mx:SeriesZoom id="zoomOut" duration="1000"/>
+	</fx:Declarations>
+
+    <mx:Panel title="CandlestickChart Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <mx:CandlestickChart id="candlestickchart" height="100%" width="100%"
+            paddingRight="5" paddingLeft="5" 
+            showDataTips="true" dataProvider="{companyAAC}">
+            
+            <mx:verticalAxis>
+                <mx:LinearAxis id="vaxis" baseAtZero="false" title="Price"/>
+            </mx:verticalAxis>
+
+            <mx:horizontalAxis>
+                <mx:CategoryAxis id="haxis" categoryField="Date" title="Date"/>
+            </mx:horizontalAxis>
+
+            <mx:horizontalAxisRenderers>
+                <mx:AxisRenderer axis="{haxis}" canDropLabels="true"/>
+            </mx:horizontalAxisRenderers>
+
+            <mx:series>
+                <mx:CandlestickSeries  
+                    openField="Open" highField="High" 
+                    lowField="Low" closeField="Close"
+                    showDataEffect="{zoomIn}" 
+                    hideDataEffect="{zoomOut}"/>
+            </mx:series>
+        </mx:CandlestickChart>
+        
+        <mx:Label width="100%"
+            text="Choose a company to view recent stock data."/>
+
+        <mx:HBox>
+            <mx:RadioButton groupName="stocks" label="View Company A"
+                selected="true" click="candlestickchart.dataProvider=companyAAC"/>
+            <mx:RadioButton groupName="stocks" label="View Company B"
+                click="candlestickchart.dataProvider=companyBAC"/>
+        </mx:HBox>
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/containers/AccordionExample.mxml b/tourdeflexmodules/src/mx/containers/AccordionExample.mxml
new file mode 100755
index 0000000..edf480d
--- /dev/null
+++ b/tourdeflexmodules/src/mx/containers/AccordionExample.mxml
@@ -0,0 +1,56 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the Accordion layout container. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+    <mx:Panel title="Accordion Container Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <mx:Label width="100%"
+            text="Select an Accordion navigator button to change the panel."/>
+
+        <mx:Accordion id="accordion" width="100%" height="100%">
+            <!-- Define each panel using a VBox container. -->
+            <mx:VBox label="Accordion Button for Panel 1">
+                <mx:Label text="Accordion container panel 1"/>
+            </mx:VBox>
+
+            <mx:VBox label="Accordion Button for Panel 2">
+                <mx:Label text="Accordion container panel 2"/>
+            </mx:VBox>
+
+            <mx:VBox label="Accordion Button for Panel 3">
+                <mx:Label text="Accordion container panel 3"/>
+            </mx:VBox>
+        </mx:Accordion>
+
+        <mx:Label width="100%"
+            text="Programmatically select the panel using a Button control."/>
+
+        <mx:HBox>
+            <mx:Button label="Select Panel 1" click="accordion.selectedIndex=0"/>
+            <mx:Button label="Select Panel 2" click="accordion.selectedIndex=1"/>
+            <mx:Button label="Select Panel 3" click="accordion.selectedIndex=2"/>
+        </mx:HBox>
+    
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/containers/DividedBoxExample.mxml b/tourdeflexmodules/src/mx/containers/DividedBoxExample.mxml
new file mode 100755
index 0000000..836c6f3
--- /dev/null
+++ b/tourdeflexmodules/src/mx/containers/DividedBoxExample.mxml
@@ -0,0 +1,42 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the DividedBox layout container. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+    <mx:Panel title="DividedBox Container Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <mx:Text width="100%"
+            text="A horizontal DividedBox container. Drag the divider side to side to resize the children."/>
+
+        <mx:DividedBox direction="horizontal" width="100%" height="100%">
+
+            <mx:Panel title="Panel 1" width="25%" height="100%" backgroundColor="0xCCCCCC">
+            </mx:Panel>
+            
+            <mx:Panel title="Panel 2" width="25%" height="100%" backgroundColor="0xCCCCCC">
+            </mx:Panel>
+
+        </mx:DividedBox>
+
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/containers/FormExample.mxml b/tourdeflexmodules/src/mx/containers/FormExample.mxml
new file mode 100755
index 0000000..471e7dc
--- /dev/null
+++ b/tourdeflexmodules/src/mx/containers/FormExample.mxml
@@ -0,0 +1,88 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate Form layout container. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+	<fx:Declarations>
+	    <fx:Model id="checkModel">
+	        <User>
+	            <FirstName>{fname.text}</FirstName>
+	            <DOB>{dob.text}</DOB>
+	            <Email>{email.text}</Email>
+	            <Age>{age.text}</Age>
+	            <SSN>{ssn.text}</SSN>
+	            <Zip>{zip.text}</Zip>
+	            <Phone>{phone.text}</Phone>
+	        </User>
+	    </fx:Model>
+		
+	    <mx:StringValidator source="{fname}" property="text" minLength="4" maxLength="12"/>
+	    <mx:PhoneNumberValidator source="{phone}" property="text"/>
+	    <mx:DateValidator source="{dob}" property="text"/>
+	    <mx:EmailValidator source="{email}" property="text"/>
+	    <mx:NumberValidator source="{age}" property="text" integerError="Enter Integer value"
+	        minValue="18" maxValue="100" domain="int"/>
+	    <mx:SocialSecurityValidator source="{ssn}" property="text"/>
+	    <mx:ZipCodeValidator source="{zip}" property="text"/>
+	</fx:Declarations>
+	
+    <mx:Panel title="Form Container Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <mx:Text width="100%"
+            text="Moving from one form field to another triggers the validator."/>
+
+        <mx:Form width="100%" height="100%">
+            <mx:FormHeading label="Enter values into the form."/>
+
+            <mx:FormItem label="First name">
+                <mx:TextInput id="fname" width="200"/>
+            </mx:FormItem>
+
+            <mx:FormItem label="Date of birth (mm/dd/yyyy)">
+                <mx:TextInput id="dob" width="200"/>
+            </mx:FormItem>
+
+            <mx:FormItem label="E-mail address">
+                <mx:TextInput id="email" width="200"/>
+            </mx:FormItem>
+
+            <mx:FormItem label="Age">
+                <mx:TextInput id="age" width="200"/>
+            </mx:FormItem>
+
+            <mx:FormItem label="SSN">
+                <mx:TextInput id="ssn" width="200"/>
+            </mx:FormItem>
+
+            <mx:FormItem label="Zip">
+                <mx:TextInput id="zip" width="200"/>
+            </mx:FormItem>
+
+            <mx:FormItem label="Phone">
+                <mx:TextInput id="phone" width="200"/>
+            </mx:FormItem>
+        </mx:Form>
+
+    </mx:Panel>
+
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/containers/GridLayoutExample.mxml b/tourdeflexmodules/src/mx/containers/GridLayoutExample.mxml
new file mode 100755
index 0000000..2b293eb
--- /dev/null
+++ b/tourdeflexmodules/src/mx/containers/GridLayoutExample.mxml
@@ -0,0 +1,70 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the Grid layout container.-->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+    <mx:Panel title="Grid Container Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <mx:Label width="100%" 
+            text="A 3 by 3 Grid container of Button controls."/>
+
+        <mx:Grid>
+            <mx:GridRow>
+                <mx:GridItem>
+                    <mx:Button label="Row 1 Col 1" width="100"/>
+                </mx:GridItem>
+                <mx:GridItem>
+                    <mx:Button label="Row 1 Col 2" width="100"/>
+                </mx:GridItem>
+                <mx:GridItem>
+                    <mx:Button label="Row 1 Col 3" width="100"/>
+                </mx:GridItem>
+            </mx:GridRow>
+
+            <mx:GridRow>
+                <mx:GridItem>
+                    <mx:Button label="Row 2 Col 1" width="100"/>
+                </mx:GridItem>
+                <mx:GridItem>
+                    <mx:Button label="Row 2 Col 2" width="100"/>
+                </mx:GridItem>
+                <mx:GridItem>
+                    <mx:Button label="Row 2 Col 3" width="100"/>
+                </mx:GridItem>
+            </mx:GridRow>
+
+            <mx:GridRow>
+                <mx:GridItem>
+                    <mx:Button label="Row 3 Col 1" width="100"/>
+                </mx:GridItem>
+                <mx:GridItem>
+                    <mx:Button label="Row 3 Col 2" width="100"/>
+                </mx:GridItem>
+                <mx:GridItem>
+                    <mx:Button label="Row 3 Col 3" width="100"/>
+                </mx:GridItem>
+            </mx:GridRow>
+        </mx:Grid>
+
+    </mx:Panel>		
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/containers/HBoxExample.mxml b/tourdeflexmodules/src/mx/containers/HBoxExample.mxml
new file mode 100755
index 0000000..44db7cc
--- /dev/null
+++ b/tourdeflexmodules/src/mx/containers/HBoxExample.mxml
@@ -0,0 +1,42 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the HBox layout container. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+    <mx:Panel title="HBox Container Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+       <mx:Label width="100%"
+           text="An HBox container with horizontally aligned children."/>
+           
+       <mx:HBox borderStyle="solid" paddingTop="10" paddingBottom="10" 
+               paddingLeft="10" paddingRight="10">
+
+            <mx:Button label="Button 1"/>
+            <mx:Button label="Button 2"/>
+            <mx:Button label="Button 3"/>
+            <mx:ComboBox/>
+
+        </mx:HBox>
+
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/containers/HDividedBoxExample.mxml b/tourdeflexmodules/src/mx/containers/HDividedBoxExample.mxml
new file mode 100755
index 0000000..d5a2e75
--- /dev/null
+++ b/tourdeflexmodules/src/mx/containers/HDividedBoxExample.mxml
@@ -0,0 +1,44 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the HDividedBox layout -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+    <mx:Panel title="HDividedBox Container Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <mx:Text width="100%"
+            text="Drag the divider side to side to resize the children."/>
+
+        <mx:HDividedBox width="100%" height="100%">
+
+            <mx:Canvas label="Canvas 1" width="100%" height="100%" backgroundColor="#FFFFCC">
+                <mx:Label text="Add components here" fontWeight="bold"/>
+            </mx:Canvas>
+
+            <mx:Canvas label="Canvas 2" width="100%" height="100%" backgroundColor="#99CCFF">
+                <mx:Label text="Add components here" fontWeight="bold"/>
+            </mx:Canvas>
+
+        </mx:HDividedBox>
+
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/containers/SimpleApplicationControlBarExample.mxml b/tourdeflexmodules/src/mx/containers/SimpleApplicationControlBarExample.mxml
new file mode 100755
index 0000000..b04e80a
--- /dev/null
+++ b/tourdeflexmodules/src/mx/containers/SimpleApplicationControlBarExample.mxml
@@ -0,0 +1,58 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the ApplicationControlBar container. -->
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				borderStyle="solid"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+    <mx:ApplicationControlBar dock="true" paddingTop="0" paddingBottom="0">
+        <mx:Label text="Docked"/>
+
+        <mx:MenuBar id="myMenuBar" labelField="@label">
+            <fx:XMLList>
+                <menuitem label="MenuItem A" >
+                    <menuitem label="SubMenuItem A-1" type="check"/>
+                    <menuitem label="SubMenuItem A-2" type="check"/>
+                </menuitem>
+                <menuitem label="MenuItem B"/>
+                <menuitem label="MenuItem C"/>
+                <menuitem label="MenuItem D" >
+                    <menuitem label="SubMenuItem D-1" type="radio" groupName="one"/>
+                    <menuitem label="SubMenuItem D-2" type="radio" groupName="one"/>
+                    <menuitem label="SubMenuItem D-3" type="radio" groupName="one"/>
+                </menuitem>
+            </fx:XMLList>
+        </mx:MenuBar>
+    </mx:ApplicationControlBar>
+	
+    <mx:Label text="A docked ApplicationControlBar appears at the top of the application window."/>
+    <mx:Spacer height="100%" />
+
+    <mx:ApplicationControlBar width="80%">
+        <mx:Label text="Normal"/>
+        <mx:Label text="Search:" />
+        <mx:TextInput width="100%" maxWidth="200" />
+        <mx:Spacer width="100%" />
+        <mx:Button label="Go flex.apache.org" />
+    </mx:ApplicationControlBar>
+
+    <mx:Label text="A normal ApplicationControlBar can appear anywhere in the application."/>
+
+</mx:Application>
diff --git a/tourdeflexmodules/src/mx/containers/SimpleBoxExample.mxml b/tourdeflexmodules/src/mx/containers/SimpleBoxExample.mxml
new file mode 100755
index 0000000..b45c8b4
--- /dev/null
+++ b/tourdeflexmodules/src/mx/containers/SimpleBoxExample.mxml
@@ -0,0 +1,49 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the Box layout container. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+    <mx:Panel title="Box Container Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <mx:Label width="100%"
+            text="A Box container with vertically aligned children."/>
+        <mx:Box direction="vertical" borderStyle="solid" 
+                paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
+            <mx:Button label="Button 1"/>
+            <mx:Button label="Button 2"/>
+            <mx:Button label="Button 3"/>
+            <mx:ComboBox/>
+        </mx:Box>
+
+        <mx:Label width="100%"
+            text="A Box container with horizontally aligned children."/>
+        <mx:Box direction="horizontal" borderStyle="solid" 
+                paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
+            <mx:Button label="Button 1"/>
+            <mx:Button label="Button 2"/>
+            <mx:Button label="Button 3"/>
+            <mx:ComboBox/>
+        </mx:Box>
+
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/containers/SimpleCanvasExample.mxml b/tourdeflexmodules/src/mx/containers/SimpleCanvasExample.mxml
new file mode 100755
index 0000000..a2bef7a
--- /dev/null
+++ b/tourdeflexmodules/src/mx/containers/SimpleCanvasExample.mxml
@@ -0,0 +1,48 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the Canvas layout container.-->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+    <mx:Panel title="Canvas Container Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <mx:Label width="100%" 
+            text="Use absolute positioning to place the children of a Canvas container."/>
+
+        <mx:Canvas borderStyle="solid" height="200" width="100%">
+
+            <!-- Stagger the position of the TextInput controls using absolute positioning.-->
+            <mx:TextInput width="100" x="50" y="5"/>
+            <mx:TextInput width="100" x="100" y="30"/>
+            <mx:TextInput width="100" x="150" y="55"/>
+
+            <!-- Overlap the VBox containers using layout constraints.-->
+            <mx:VBox right="115" bottom="50" width="75" height="75" backgroundColor="#0080C0"/>
+            <mx:VBox right="70" bottom="30" width="75" height="75" backgroundColor="#FFFF80"/>
+            <mx:VBox right="25" bottom="10" width="75" height="75" backgroundColor="#8080C0" alpha="0.8"/>
+
+            <mx:Text right="25" y="110"
+                text="The Canvas container lets you place components on top of each other."/>
+        </mx:Canvas>
+    
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/containers/SimpleControlBarExample.mxml b/tourdeflexmodules/src/mx/containers/SimpleControlBarExample.mxml
new file mode 100755
index 0000000..8498ff4
--- /dev/null
+++ b/tourdeflexmodules/src/mx/containers/SimpleControlBarExample.mxml
@@ -0,0 +1,44 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the ControlBar container. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+    <mx:Panel title="ControlBar Container Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <mx:HBox width="100%" height="100%">
+            <!-- Area for your catalog. -->
+            <mx:Image source="@Embed(source='assets/ApacheFlexLogo.png')" width="50%" height="100%"/>
+			<mx:Text width="50%"
+                text="The ControlBar container in this example adds a Label, NumericStepper, Spacer, and Button control to the bottom of the Panel container."/>
+        </mx:HBox>
+
+        <mx:ControlBar>
+            <mx:Label text="Quantity"/>
+            <mx:NumericStepper/>
+            <!-- Use Spacer to push Button control to the right. -->
+            <mx:Spacer width="100%"/>
+            <mx:Button label="Add to Cart"/>
+        </mx:ControlBar>
+
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/containers/SimplePanelExample.mxml b/tourdeflexmodules/src/mx/containers/SimplePanelExample.mxml
new file mode 100755
index 0000000..75aa93f
--- /dev/null
+++ b/tourdeflexmodules/src/mx/containers/SimplePanelExample.mxml
@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate Panel layout container. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
+        <![CDATA[
+       
+            private function showProperties():void  {
+	            panelPropertyArea.text= "Status: " + panel.status + '\n' +
+				  "Title: " + panel.title + '\n' +
+				  "Width: " + panel.width + '\n' +
+				  "Height: " + panel.height ;
+	        }
+        ]]>
+    </fx:Script>
+
+    <mx:Panel id="panel" title="Panel Container Example" status="Active"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <mx:Label width="100%"
+            text="Click the Button control to see panel properties."/>
+
+        <mx:TextArea id="panelPropertyArea" width="100%" height="100%"/>
+        <mx:Button label="Click to view Panel properties" click="showProperties()"/>
+
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/containers/SimpleTitleWindowExample.mxml b/tourdeflexmodules/src/mx/containers/SimpleTitleWindowExample.mxml
new file mode 100755
index 0000000..2616d8f
--- /dev/null
+++ b/tourdeflexmodules/src/mx/containers/SimpleTitleWindowExample.mxml
@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple custom MXML TitleWindow component.
+     The TitleWindowApp application displays this component. 
+     You cannot run it independently. -->
+     
+<mx:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+    title="Title Window" x="168" y="86">
+
+     <fx:Script>
+        <![CDATA[       
+            import mx.managers.PopUpManager;
+            import mx.controls.Text;
+	       
+            // A reference to the TextInput control in which to put the result.
+            public var loginName:Text;
+		   
+            // Event handler for the OK button.
+            private function returnName():void {
+                loginName.text="Name entered: " + userName.text; 
+                PopUpManager.removePopUp(this);
+            }
+        ]]>
+    </fx:Script>
+
+    <mx:HBox>
+        <mx:Label text="Enter Name: "/>
+        <mx:TextInput id="userName" width="100%"/>
+    </mx:HBox>
+
+    <mx:HBox>
+        <mx:Button label="OK" click="returnName()"/>
+        <mx:Button label="Cancel" click="PopUpManager.removePopUp(this)"/>
+    </mx:HBox>
+
+</mx:TitleWindow>  
diff --git a/tourdeflexmodules/src/mx/containers/TabNavigatorExample.mxml b/tourdeflexmodules/src/mx/containers/TabNavigatorExample.mxml
new file mode 100755
index 0000000..55fad20
--- /dev/null
+++ b/tourdeflexmodules/src/mx/containers/TabNavigatorExample.mxml
@@ -0,0 +1,57 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the TabNavigator layout container. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+    <mx:Panel title="TabNavigator Container Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <mx:Label width="100%"
+            text="Select the tabs to change the panel."/>
+
+        <mx:TabNavigator id="tn"  width="100%" height="100%">
+            <!-- Define each panel using a VBox container. -->
+
+            <mx:VBox label="Panel 1">
+                <mx:Label text="TabNavigator container panel 1"/>
+            </mx:VBox>
+
+            <mx:VBox label="Panel 2">
+                <mx:Label text="TabNavigator container panel 2"/>
+            </mx:VBox>
+
+            <mx:VBox label="Panel 3">
+                <mx:Label text="TabNavigator container panel 3"/>
+            </mx:VBox>
+        </mx:TabNavigator>
+
+        <mx:Label width="100%"
+            text="Programmatically select the panel using a Button control."/>
+
+        <mx:HBox>
+            <mx:Button label="Select Tab 1" click="tn.selectedIndex=0"/>
+            <mx:Button label="Select Tab 2" click="tn.selectedIndex=1"/>
+            <mx:Button label="Select Tab 3" click="tn.selectedIndex=2"/>
+        </mx:HBox>
+    
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/containers/TileLayoutExample.mxml b/tourdeflexmodules/src/mx/containers/TileLayoutExample.mxml
new file mode 100755
index 0000000..5cc8179
--- /dev/null
+++ b/tourdeflexmodules/src/mx/containers/TileLayoutExample.mxml
@@ -0,0 +1,45 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the Tile layout container. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+    <mx:Panel title="Tile Container Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <mx:Label width="100%"
+            text="A Tile container lays out its children in a grid of equal-sized cells."/>
+
+        <mx:Tile direction="horizontal" borderStyle="inset" 
+                horizontalGap="10" verticalGap="15" 
+                paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
+
+            <mx:Button label="1" height="50" width="75"/>
+            <mx:Button label="2" height="50" width="75"/>
+            <mx:Button label="3" height="50" width="75"/>
+            <mx:Button label="4" height="50" width="75"/>
+            <mx:Button label="5" height="50" width="75"/>
+            <mx:Button label="6" height="50" width="75"/>
+
+        </mx:Tile>
+
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/containers/TitleWindowApp.mxml b/tourdeflexmodules/src/mx/containers/TitleWindowApp.mxml
new file mode 100755
index 0000000..430d613
--- /dev/null
+++ b/tourdeflexmodules/src/mx/containers/TitleWindowApp.mxml
@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Main application to demonstrate TitleWindow layout container. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
+        <![CDATA[
+       
+            import mx.managers.PopUpManager;
+            import mx.containers.TitleWindow;
+             import flash.geom.Point;
+
+            private var point1:Point = new Point();
+      
+            // Open the TitleWindow container.
+            // Cast the return value of the createPopUp() method
+            // to SimpleTitleWindowExample, the name of the 
+            // component containing the TitleWindow container.
+            private function showWindow():void {
+                var login:SimpleTitleWindowExample=SimpleTitleWindowExample(PopUpManager.createPopUp( this, SimpleTitleWindowExample , true));
+
+                // Calculate position of TitleWindow in Application's coordinates.
+                // Position it 25 pixels down and to the right of the Button control.
+                point1.x=0;
+                point1.y=0;                
+                point1=myButton.localToGlobal(point1);
+                login.x=point1.x+25;
+                login.y=point1.y+25;
+             
+                // Pass a reference to the TextInput control
+                // to the TitleWindow container so that the 
+                // TitleWindow container can return data to the main application.
+                login.loginName=returnedName;
+            }
+        ]]>
+    </fx:Script>
+
+    <mx:Panel title="TitleWindow Container Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <mx:Button id="myButton" label="Click to open the TitleWindow container" 
+            click="showWindow()"/>
+        
+        <mx:Text id="returnedName" text="" width="100%"/>
+
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/containers/VBoxExample.mxml b/tourdeflexmodules/src/mx/containers/VBoxExample.mxml
new file mode 100755
index 0000000..99adac2
--- /dev/null
+++ b/tourdeflexmodules/src/mx/containers/VBoxExample.mxml
@@ -0,0 +1,42 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the VBox layout container. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+    <mx:Panel title="VBox Container Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+       <mx:Label width="100%" 
+           text="A VBox container with vertically aligned children."/>
+           
+       <mx:VBox borderStyle="solid" paddingTop="10" paddingBottom="10" 
+               paddingLeft="10" paddingRight="10">
+
+            <mx:Button label="Button 1"/>
+            <mx:Button label="Button 2"/>
+            <mx:Button label="Button 3"/>
+            <mx:ComboBox/>
+
+        </mx:VBox>
+
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/containers/VDividedBoxExample.mxml b/tourdeflexmodules/src/mx/containers/VDividedBoxExample.mxml
new file mode 100755
index 0000000..2c08bf4
--- /dev/null
+++ b/tourdeflexmodules/src/mx/containers/VDividedBoxExample.mxml
@@ -0,0 +1,44 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the VDividedBox layout -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+    <mx:Panel title="VDividedBox Container Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <mx:Text width="100%"
+            text="Drag the divider up and down to resize the children."/>
+
+        <mx:VDividedBox width="100%" height="100%">
+
+            <mx:Canvas label="Canvas 1" width="100%" height="100%" backgroundColor="#FFFFCC">
+                <mx:Label text="Add components here" fontWeight="bold"/>
+            </mx:Canvas>
+
+            <mx:Canvas label="Canvas 2" width="100%" height="100%" backgroundColor="#99CCFF">
+                <mx:Label text="Add components here" fontWeight="bold"/>
+            </mx:Canvas>
+
+        </mx:VDividedBox>
+
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/containers/ViewStackExample.mxml b/tourdeflexmodules/src/mx/containers/ViewStackExample.mxml
new file mode 100755
index 0000000..3f2a063
--- /dev/null
+++ b/tourdeflexmodules/src/mx/containers/ViewStackExample.mxml
@@ -0,0 +1,60 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the ViewStack layout container. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <mx:Panel title="ViewStack Container Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <mx:Text width="100%"
+            text="Use the Button controls to change panels of the ViewStack container."/>
+
+        <mx:HBox borderStyle="solid" width="100%"
+            paddingTop="5" paddingLeft="5" paddingRight="5" paddingBottom="5">
+            
+            <mx:Button id="searchButton" label="Search Panel"
+                click="myViewStack.selectedChild=search"/>
+            <mx:Button id="cInfoButton" label="Customer Info Panel"
+                click="myViewStack.selectedChild=custInfo"/>
+            <mx:Button id="aInfoButton" label="Account Panel"
+                click="myViewStack.selectedChild=accountInfo"/>
+        </mx:HBox>
+
+        <!-- Define the ViewStack and the three child containers and have it
+        resize up to the size of the container for the buttons. -->
+        <mx:ViewStack id="myViewStack" borderStyle="solid" width="100%" height="80%">
+
+            <mx:Canvas id="search" backgroundColor="#FFFFCC" label="Search" width="100%" height="100%">
+                <mx:Label text="Search Screen" color="#000000"/>
+            </mx:Canvas>
+
+            <mx:Canvas id="custInfo" backgroundColor="#CCFFFF" label="Customer Info" width="100%" height="100%">
+                <mx:Label text="Customer Info" color="#000000"/>
+            </mx:Canvas>
+
+            <mx:Canvas id="accountInfo" backgroundColor="#FFCCFF" label="Account Info" width="100%" height="100%">
+                <mx:Label text="Account Info" color="#000000"/>
+            </mx:Canvas>
+        </mx:ViewStack>
+
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/containers/assets/ApacheFlexLogo.png b/tourdeflexmodules/src/mx/containers/assets/ApacheFlexLogo.png
new file mode 100644
index 0000000..4ff037f
--- /dev/null
+++ b/tourdeflexmodules/src/mx/containers/assets/ApacheFlexLogo.png
Binary files differ
diff --git a/tourdeflexmodules/src/mx/controls/AdvancedDataGridExample.mxml b/tourdeflexmodules/src/mx/controls/AdvancedDataGridExample.mxml
new file mode 100755
index 0000000..f1c8e64
--- /dev/null
+++ b/tourdeflexmodules/src/mx/controls/AdvancedDataGridExample.mxml
@@ -0,0 +1,78 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
+        <![CDATA[
+            import mx.collections.ArrayCollection;
+                  
+            [Bindable]
+            private var dpFlat:ArrayCollection = new ArrayCollection([
+              {Region:"Southwest", Territory:"Arizona", 
+                  Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000}, 
+              {Region:"Southwest", Territory:"Arizona", 
+                  Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000},  
+              {Region:"Southwest", Territory:"Central California", 
+                  Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000},  
+              {Region:"Southwest", Territory:"Nevada", 
+                  Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000},  
+              {Region:"Southwest", Territory:"Northern California", 
+                  Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000}, 
+              {Region:"Southwest", Territory:"Northern California", 
+                  Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000},  
+              {Region:"Southwest", Territory:"Southern California", 
+                  Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000}, 
+              {Region:"Southwest", Territory:"Southern California", 
+                  Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}
+            ]);
+        ]]>
+    </fx:Script>
+
+    <mx:Panel title="AdvancedDataGrid Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <mx:AdvancedDataGrid id="myADG" 
+            width="100%" height="100%" 
+            initialize="gc.refresh()">        
+            <mx:dataProvider>
+                <mx:GroupingCollection2 id="gc" source="{dpFlat}">
+                    <mx:grouping>
+                        <mx:Grouping>
+                            <mx:GroupingField name="Region"/>
+                            <mx:GroupingField name="Territory"/>
+                        </mx:Grouping>
+                    </mx:grouping>
+                </mx:GroupingCollection2>
+            </mx:dataProvider>        
+            
+            <mx:columns>
+                <mx:AdvancedDataGridColumn dataField="Region"/>
+                <mx:AdvancedDataGridColumn dataField="Territory"/>
+                <mx:AdvancedDataGridColumn dataField="Territory_Rep"
+                    headerText="Territory Rep"/>
+                <mx:AdvancedDataGridColumn dataField="Actual"/>
+                <mx:AdvancedDataGridColumn dataField="Estimate"/>
+            </mx:columns>
+       </mx:AdvancedDataGrid>
+    </mx:Panel>
+    
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/controls/ButtonBarExample.mxml b/tourdeflexmodules/src/mx/controls/ButtonBarExample.mxml
new file mode 100755
index 0000000..6920666
--- /dev/null
+++ b/tourdeflexmodules/src/mx/controls/ButtonBarExample.mxml
@@ -0,0 +1,58 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the ButtonBar control. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
+        <![CDATA[
+
+            import mx.events.ItemClickEvent;
+
+            // Event handler function to print a message
+            // describing the selected Button control.
+    		private function clickHandler(event:ItemClickEvent):void {
+    		    myTA.text="Selected button index: " + String(event.index) +
+    		        "\n" + "Selected button label: " + event.label;
+            }
+        ]]>
+    </fx:Script>
+
+    <mx:Panel title="ButtonBar Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+       <mx:Label width="100%"
+           text="Select a button in the ButtonBar control."/>
+
+        <mx:TextArea id="myTA" width="100%" height="100%"/>
+
+        <mx:ButtonBar itemClick="clickHandler(event)">
+            <mx:dataProvider>
+                <fx:Array>
+                    <fx:String>Flex SDK</fx:String>
+                    <fx:String>Flex JS</fx:String>
+                    <fx:String>Falcon</fx:String>
+                    <fx:String>Falcon JX</fx:String>
+                </fx:Array>
+            </mx:dataProvider>
+        </mx:ButtonBar>
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/controls/ButtonExample.mxml b/tourdeflexmodules/src/mx/controls/ButtonExample.mxml
new file mode 100755
index 0000000..588eef9
--- /dev/null
+++ b/tourdeflexmodules/src/mx/controls/ButtonExample.mxml
@@ -0,0 +1,65 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the Button control. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
+        <![CDATA[
+
+            import flash.events.Event;
+
+            // Event handler function to print a message
+            // describing the selected Button control.
+            private function printMessage(event:Event):void  {
+              message.text += event.target.label + " pressed" + "\n";
+            }
+
+      ]]>
+    </fx:Script>
+
+    <mx:Panel title="Button Control Example" layout="horizontal"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+		
+		<mx:VBox>
+            <mx:Label width="100%"
+                text="Select a Button control."/>
+
+             <!-- The button can contain an image, as in the "Button with Icon" button -->
+             <!-- The button can contain an image, as in the "Button with Icon" button -->
+			 <mx:Button id="iconButton" icon="@Embed('assets/ApacheFlexIcon.png')" label="Button with Icon"
+			     paddingLeft="12" paddingRight="18" labelPlacement="right" color="#993300" click="printMessage(event)"/>
+
+             <!-- The size of the button and the label attributes can be customized -->
+             <mx:Button label="Customized Button" color="#993300" toggle="true" selected="true"
+                 textAlign="left" fontStyle="italic" fontSize="13" width="{iconButton.width}"
+                 click="printMessage(event)"/>
+
+             <!-- By default, the look and feel of the customized button is
+                 similar to the Default Button.  -->
+             <mx:Button label="Default Button" click="printMessage(event)"/>
+        </mx:VBox>
+
+         <mx:TextArea id="message" text="" editable="false" height="100%" width="100%"
+             color="#0000FF"/>
+
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/controls/CheckBoxExample.mxml b/tourdeflexmodules/src/mx/controls/CheckBoxExample.mxml
new file mode 100755
index 0000000..116e652
--- /dev/null
+++ b/tourdeflexmodules/src/mx/controls/CheckBoxExample.mxml
@@ -0,0 +1,78 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the CheckBox control -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
+        <![CDATA[
+
+           import mx.controls.Alert;         
+         
+           // This event handler adds and deletes items from the shopping cart.
+           private function modifyCart():void 
+           {
+                cartItems.text = "";
+	    	
+    	    	if(milkCB.selected == true) {	    	  
+    	    	    cartItems.text += "milk" + '\n' ;
+	    	    }
+	   	
+	   	        if(eggsCB.selected == true) {
+    	    	    cartItems.text += "eggs" + '\n';
+	    	    }
+	    	
+	    	    if(breadCB.selected == true) { 
+    	    	    cartItems.text +="bread" + '\n';
+	    	    }
+      	    }
+      	   
+           // This event handler opens the Alert control.
+	       private function sendMessage():void 
+	       {
+                if(couponCB.selected == true) {
+		          Alert.show('You will receive coupons.');
+		        }
+		        else {
+		            Alert.show('You will not receive any coupons.');
+		        }
+	       }    
+        ]]>
+    </fx:Script>
+
+    <mx:Panel title="CheckBox Control Example" layout="horizontal"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <mx:VBox>
+            <mx:CheckBox id="milkCB" label="milk" click="modifyCart()"/>
+            <mx:CheckBox id="eggsCB" label="eggs" click="modifyCart()"/>
+            <mx:CheckBox id="breadCB" label="bread" click="modifyCart()"/>
+        </mx:VBox>
+
+        <mx:VBox>
+            <mx:Label text="Items in my cart "/>
+            <mx:TextArea id="cartItems" width="300" height="50" verticalScrollPolicy="off"/>
+            <!-- Event handler sendMessages() is used to handle event click -->
+            <mx:CheckBox id="couponCB" label="Send me coupons for items in my cart"
+                click="sendMessage()" selected="true"/>
+        </mx:VBox>
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/controls/ColorPickerExample.mxml b/tourdeflexmodules/src/mx/controls/ColorPickerExample.mxml
new file mode 100755
index 0000000..34e4b33
--- /dev/null
+++ b/tourdeflexmodules/src/mx/controls/ColorPickerExample.mxml
@@ -0,0 +1,35 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the ColorPicker control. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+    <mx:Panel title="ColorPicker Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+        
+        <mx:Label width="100%"
+           text="Select the background color of the VBox container."/>
+        <mx:ColorPicker id="cp" showTextField="true" selectedColor="0xFFFFFF"/>
+    
+        <mx:VBox width="100%" height="100%" backgroundColor="{cp.selectedColor}" borderStyle="solid"/>
+        <mx:Label text="selectedColor: 0x{cp.selectedColor.toString(16)}"/> 
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/controls/DateChooserExample.mxml b/tourdeflexmodules/src/mx/controls/DateChooserExample.mxml
new file mode 100755
index 0000000..9492913
--- /dev/null
+++ b/tourdeflexmodules/src/mx/controls/DateChooserExample.mxml
@@ -0,0 +1,70 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate DateChooser control. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
+        <![CDATA[
+
+            // Event handler function to write the selected
+            // date to the Label control.        
+            private function displayDate(date:Date):void {
+                if (date == null)
+                    selection.text = "Date selected: ";
+                else
+                    selection.text = "Date selected: " + date.getFullYear().toString() +
+                        '/' + (date.getMonth()+1).toString() + '/' + date.getDate();
+            }
+        ]]>
+    </fx:Script>
+
+	<fx:Declarations>
+    	<mx:DateFormatter id="df"/>
+	</fx:Declarations>
+    
+    <mx:Panel title="DateChooser Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <mx:Label width="100%"
+            text="Select a date in the DateChooser control."/>
+        <mx:Label width="100%"
+            text="Select it again while holding down the Control key to clear it."/>
+            
+        <mx:HBox horizontalGap="25">
+          <mx:VBox>
+              <mx:Label text="Simple DateChooser control."/>
+              <mx:DateChooser id="dateChooser1" yearNavigationEnabled="true"    
+                  change="displayDate(DateChooser(event.target).selectedDate)"/>
+              <mx:Label id="selection"  text="Date selected:"/>
+          </mx:VBox>
+
+          <mx:VBox>
+              <mx:Label text="Disable dates before June 1, 2006."/>
+              <mx:DateChooser id="dateChooser2" yearNavigationEnabled="true"
+                  disabledRanges="{[ {rangeEnd: new Date(2006, 5, 1)} ]}"/>
+              <mx:Label  text="Date selected: {df.format(dateChooser2.selectedDate)}"/>
+          </mx:VBox>
+        </mx:HBox>
+        
+    </mx:Panel>    
+</mx:Module>
+
diff --git a/tourdeflexmodules/src/mx/controls/DateFieldExample.mxml b/tourdeflexmodules/src/mx/controls/DateFieldExample.mxml
new file mode 100755
index 0000000..77d9ff0
--- /dev/null
+++ b/tourdeflexmodules/src/mx/controls/DateFieldExample.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.
+  -->
+
+<!-- Simple example to demonstrate the DateField control. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
+      <![CDATA[
+
+         // Event handler for the DateField change event.
+         private function dateChanged(date:Date):void {
+            if (date == null)
+                selection.text = "Date selected: ";                
+            else
+                selection.text = "Date selected: " + date.getFullYear().toString() + 
+                    '/' + (date.getMonth()+1).toString() + '/' + date.getDate();
+         }
+      ]]>
+    </fx:Script>
+ 
+	<fx:Declarations>
+ 		<mx:DateFormatter id="df"/>
+	</fx:Declarations>
+
+    <mx:Panel title="DateField Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <mx:Label width="100%" 
+            text="Select a date in the DateField control. Select it again to clear it."/>
+
+        <mx:Label text="Basic DateField:"/>
+        <mx:DateField id="dateField1" yearNavigationEnabled="true" 
+            change="dateChanged(DateField(event.target).selectedDate)" />
+        <mx:Label id="selection"  text="Date selected:" />
+
+        <mx:Label text="Disable dates on or before June 1, 2006."/>
+        <mx:DateField id="dateField2" yearNavigationEnabled="true" 
+            disabledRanges="{[ {rangeEnd: new Date(2006, 5, 1)} ]}" />
+        <mx:Label  text="Date selected: {df.format(dateField2.selectedDate)}"/>
+
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/controls/HScrollBarExample.mxml b/tourdeflexmodules/src/mx/controls/HScrollBarExample.mxml
new file mode 100755
index 0000000..609e3c6
--- /dev/null
+++ b/tourdeflexmodules/src/mx/controls/HScrollBarExample.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.
+  -->
+
+<!-- Simple example to demonstrate the HScrollBar control. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+      <fx:Script>
+        <![CDATA[
+    
+            import mx.events.ScrollEvent;
+    
+            // Event handler function to display the scroll location
+            // as you move the scroll thumb.
+            private function myScroll(event:ScrollEvent):void
+            {
+                showPosition.text = "HScrollBar properties summary:" + '\n' +
+                    "------------------------------------" + '\n' +
+                    "Current scroll position: " + event.currentTarget.scrollPosition  + '\n' +
+                    "The maximum scroll position: " + event.currentTarget.maxScrollPosition + '\n' +
+                    "The minimum scroll position: " + event.currentTarget.minScrollPosition ;
+            }
+        ]]>
+    </fx:Script> 
+  
+    <mx:Panel id="panel" title="HScrollBar Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+        
+        <mx:Label width="100%"
+           text="Click on the scroll bar to view its properties."/> 
+        
+        <mx:HScrollBar id="bar" width="100%" 
+            minScrollPosition="0" maxScrollPosition="{panel.width - 20}" 
+            lineScrollSize="50" pageScrollSize="100" 
+            scroll="myScroll(event)" 
+            repeatDelay="1000" repeatInterval="500" />
+          
+        <mx:TextArea height="100%" width="100%" id="showPosition" />
+  
+    </mx:Panel>  
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/controls/HorizontalListExample.mxml b/tourdeflexmodules/src/mx/controls/HorizontalListExample.mxml
new file mode 100755
index 0000000..06d9eba
--- /dev/null
+++ b/tourdeflexmodules/src/mx/controls/HorizontalListExample.mxml
@@ -0,0 +1,70 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the HorizontalList Control. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
+        <![CDATA[
+             
+             [Bindable]
+             [Embed(source="assets/ApacheFlexLogo.png")]
+             public var logo1:Class;
+             
+             [Bindable]
+             [Embed(source="assets/ApacheFlexLogo.png")]
+             public var logo2:Class;
+             
+             [Bindable]
+             [Embed(source="assets/ApacheFlexLogo.png")]
+             public var logo3:Class;
+	     
+             [Bindable]
+	         [Embed(source="assets/ApacheFlexLogo.png")]
+             public var logo4:Class;
+
+             [Bindable]
+	         [Embed(source="assets/ApacheFlexLogo.png")]
+             public var logo5:Class;
+        ]]>
+    </fx:Script>
+
+    <mx:Panel title="HorizontalList Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <mx:Label width="100%"
+           text="A HorizontalList control displays items in a single row."/>
+
+        <mx:HorizontalList id="CameraSelection" height="250" columnCount="3" columnWidth="125">
+            <mx:dataProvider>
+                <fx:Array>
+                    <fx:Object label="Logo 1" icon="{logo1}"/>
+                    <fx:Object label="Logo 2" icon="{logo2}"/>
+                    <fx:Object label="Logo 3" icon="{logo3}"/>
+                    <fx:Object label="Logo 4" icon="{logo4}"/>
+                    <fx:Object label="Logo 5" icon="{logo5}"/>
+                </fx:Array>
+            </mx:dataProvider>
+        </mx:HorizontalList>
+        
+    </mx:Panel>
+</mx:Module>
+       
diff --git a/tourdeflexmodules/src/mx/controls/LabelExample.mxml b/tourdeflexmodules/src/mx/controls/LabelExample.mxml
new file mode 100755
index 0000000..9ca5f4e
--- /dev/null
+++ b/tourdeflexmodules/src/mx/controls/LabelExample.mxml
@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the Label control -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
+        <![CDATA[
+      
+            private var htmlData:String="<br>This label displays <b>bold</b> and <i>italic</i> HTML-formatted text.";
+                                         
+            // Event handler function to change the image size.
+            private function displayHTML():void {
+                simpleLabel.htmlText= htmlData;
+            }
+          
+            // Event handler function to change the image size.
+            private function displayText():void {
+                simpleLabel.text="This Label displays plain text.";
+            }         
+        ]]>
+    </fx:Script>
+
+  <mx:Panel title="Label Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+    
+      <mx:Label id="simpleLabel" text="This Label displays plain text."/>
+      <mx:Button id="Display" label="Click to display HTML Text" click="displayHTML()"/>
+      <mx:Button id="Clear" label="Click to display plain text" click="displayText()"/>
+  
+  </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/controls/LinkBarExample.mxml b/tourdeflexmodules/src/mx/controls/LinkBarExample.mxml
new file mode 100755
index 0000000..0b9ef07
--- /dev/null
+++ b/tourdeflexmodules/src/mx/controls/LinkBarExample.mxml
@@ -0,0 +1,50 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the LinkBar control. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+    <mx:Panel title="LinkBar Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+   
+        <mx:Text width="100%" 
+            text="Select a link in the LinkBar control to set the active child of the ViewStack container."/>
+
+        <mx:LinkBar color="#0000FF" fontWeight="bold" dataProvider="{myViewStack}"/>        
+        
+        <!-- Define the ViewStack and the three child containers. -->
+        <mx:ViewStack id="myViewStack" borderStyle="solid" width="100%" height="80%">
+
+            <mx:Canvas id="search" backgroundColor="#FFFFCC" label="Search" width="100%" height="100%">
+                <mx:Label text="Search Screen" color="#000000"/>
+            </mx:Canvas>
+
+            <mx:Canvas id="custInfo" backgroundColor="#CCFFFF" label="Customer Info" width="100%" height="100%">
+                <mx:Label text="Customer Info" color="#000000"/>
+            </mx:Canvas>
+
+            <mx:Canvas id="accountInfo" backgroundColor="#FFCCFF" label="Account Info" width="100%" height="100%">
+                <mx:Label text="Account Info" color="#000000"/>
+            </mx:Canvas>
+        </mx:ViewStack>
+        
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/controls/LinkButtonExample.mxml b/tourdeflexmodules/src/mx/controls/LinkButtonExample.mxml
new file mode 100755
index 0000000..346bf89
--- /dev/null
+++ b/tourdeflexmodules/src/mx/controls/LinkButtonExample.mxml
@@ -0,0 +1,40 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the LinkButton control. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
+        import mx.controls.Alert;
+    </fx:Script>
+
+    <mx:Panel title="LinkButton Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+       
+        <mx:Label width="100%" 
+            text="Select the LinkButton control to open the Alert control."/>
+
+        <mx:LinkButton label="LinkButton control" color="#0000FF" fontWeight="bold" 
+            click="Alert.show('LinkButton selected!')"/>
+
+    </mx:Panel>
+</mx:Module>   
+       
diff --git a/tourdeflexmodules/src/mx/controls/Local.mxml b/tourdeflexmodules/src/mx/controls/Local.mxml
new file mode 100755
index 0000000..f416e38
--- /dev/null
+++ b/tourdeflexmodules/src/mx/controls/Local.mxml
@@ -0,0 +1,26 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Flex application loaded by the SWFLoader control. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				width="100%" height="100%">
+
+    <mx:Label text="The Label control of the embedded application."/>
+
+</mx:Module>
+       
diff --git a/tourdeflexmodules/src/mx/controls/MenuBarExample.mxml b/tourdeflexmodules/src/mx/controls/MenuBarExample.mxml
new file mode 100755
index 0000000..118e506
--- /dev/null
+++ b/tourdeflexmodules/src/mx/controls/MenuBarExample.mxml
@@ -0,0 +1,81 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the MenuBar control. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%"
+				creationComplete="initCollections()">
+
+     <fx:Script>
+        <![CDATA[
+
+            import mx.events.MenuEvent;
+            import mx.controls.Alert;
+            import mx.collections.*;
+
+            [Bindable]
+            public var menuBarCollection:XMLListCollection;
+    
+            private var menubarXML:XMLList =
+                <>
+                    <menuitem label="Menu1" data="top">
+                        <menuitem label="MenuItem 1-A" data="1A"/>
+                        <menuitem label="MenuItem 1-B" data="1B"/>
+                    </menuitem>
+                    <menuitem label="Menu2" data="top">
+                        <menuitem label="MenuItem 2-A" type="check"  data="2A"/>
+                        <menuitem type="separator"/>
+                        <menuitem label="MenuItem 2-B" >
+                            <menuitem label="SubMenuItem 3-A" type="radio"
+                                groupName="one" data="3A"/>
+                            <menuitem label="SubMenuItem 3-B" type="radio"
+                                groupName="one" data="3B"/>
+                        </menuitem>
+                    </menuitem>
+                </>;
+
+            // Event handler to initialize the MenuBar control.
+            private function initCollections():void {
+                menuBarCollection = new XMLListCollection(menubarXML);
+            }
+
+            // Event handler for the MenuBar control's itemClick event.
+            private function menuHandler(event:MenuEvent):void  {
+                // Don't open the Alert for a menu bar item that 
+                // opens a popup submenu.
+                if (event.item.@data != "top") {
+                    Alert.show("Label: " + event.item.@label + "\n" + 
+                        "Data: " + event.item.@data, "Clicked menu item");
+                }        
+            }
+         ]]>
+    </fx:Script>
+
+    <mx:Panel title="MenuBar Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <mx:Label width="100%"
+           text="Select a menu item."/>
+
+        <mx:MenuBar labelField="@label" itemClick="menuHandler(event)" 
+            dataProvider="{menuBarCollection}" />
+            
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/controls/NumericStepperExample.mxml b/tourdeflexmodules/src/mx/controls/NumericStepperExample.mxml
new file mode 100755
index 0000000..4dc5947
--- /dev/null
+++ b/tourdeflexmodules/src/mx/controls/NumericStepperExample.mxml
@@ -0,0 +1,45 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the NumericStepper control. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+    <mx:Panel title="NumericStepper Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <mx:Text width="100%"
+            text="Default NumericStepper control with a minimum=0, maximum=10, and stepSize=1."/>
+        <mx:NumericStepper/>
+
+        <mx:Text width="100%" 
+            text="NumericStepper control with a minimum=10, maximum=40, stepSize=0.01, and starting value of 20."/>
+
+        <mx:NumericStepper id="ns" 
+            minimum="10.00" maximum="40.00" 
+            stepSize="0.01" 
+            value="20.00" 
+            width="65"/>
+
+        <mx:Label  text="You selected {ns.value}"/>
+
+    </mx:Panel>
+</mx:Module>
+       
diff --git a/tourdeflexmodules/src/mx/controls/OLAPDataGridExample.mxml b/tourdeflexmodules/src/mx/controls/OLAPDataGridExample.mxml
new file mode 100755
index 0000000..9e8a5e6
--- /dev/null
+++ b/tourdeflexmodules/src/mx/controls/OLAPDataGridExample.mxml
@@ -0,0 +1,208 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%"
+				creationComplete="creationCompleteHandler()">
+
+     <fx:Script>
+      <![CDATA[
+        import mx.rpc.AsyncResponder;
+        import mx.rpc.AsyncToken;
+        import mx.olap.OLAPQuery;
+        import mx.olap.OLAPSet;
+        import mx.olap.IOLAPQuery;
+        import mx.olap.IOLAPQueryAxis;
+        import mx.olap.IOLAPCube;
+        import mx.olap.OLAPResult;
+        import mx.events.CubeEvent;
+        import mx.controls.Alert;
+        import mx.collections.ArrayCollection;
+        
+        
+        [Bindable]
+        private var flatData:ArrayCollection = new ArrayCollection(
+        [
+         {customer:"AAA", product:"Flex SDK", quarter:"Q1", revenue:210, cost:25},
+         {customer:"AAA", product:"Flex JS", quarter:"Q2", revenue:210, cost:25},
+         {customer:"AAA", product:"Falcon", quarter:"Q3", revenue:250, cost:125},
+         {customer:"AAA", product:"Falcon JX", quarter:"Q4", revenue:430, cost:75},
+
+         {customer:"BBB", product:"Flex SDK", quarter:"Q2", revenue:125, cost:20},
+         {customer:"BBB", product:"Flex JS", quarter:"Q3", revenue:210, cost:20},
+         {customer:"BBB", product:"Falcon", quarter:"Q4", revenue:320, cost:120},
+         {customer:"BBB", product:"Falcon JX", quarter:"Q1", revenue:280, cost:70},
+
+         {customer:"CCC", product:"Flex SDK", quarter:"Q3", revenue:375, cost:120},
+         {customer:"CCC", product:"Flex JS", quarter:"Q4", revenue:430, cost:120},
+         {customer:"CCC", product:"Falcon", quarter:"Q1", revenue:470, cost:220},
+         {customer:"CCC", product:"Falcon JX", quarter:"Q2", revenue:570, cost:170},
+    
+         {customer:"AAA", product:"Flex SDK", quarter:"Q4", revenue:215, cost:90},
+         {customer:"AAA", product:"Flex JS", quarter:"Q1", revenue:210, cost:90},
+         {customer:"AAA", product:"Falcon", quarter:"Q2", revenue:175, cost:190},
+         {customer:"AAA", product:"Falcon JX", quarter:"Q3", revenue:670, cost:75},
+    
+         {customer:"BBB", product:"Flex SDK", quarter:"Q1", revenue:175, cost:20},
+         {customer:"BBB", product:"Flex JS", quarter:"Q2", revenue:210, cost:20},
+         {customer:"BBB", product:"Falcon",quarter:"Q3", revenue:120, cost:120},
+         {customer:"BBB", product:"Falcon JX", quarter:"Q4", revenue:310, cost:70},
+    
+         {customer:"CCC", product:"Flex SDK", quarter:"Q1", revenue:385, cost:120},
+         {customer:"CCC", product:"Flex JS", quarter:"Q2", revenue:340, cost:120},
+         {customer:"CCC", product:"Falcon", quarter:"Q3", revenue:470, cost:220},
+         {customer:"CCC", product:"Falcon JX", quarter:"Q4", revenue:270, cost:170},
+    
+         {customer:"AAA", product:"Flex SDK", quarter:"Q1", revenue:100, cost:25},
+         {customer:"AAA", product:"Flex JS", quarter:"Q2", revenue:150, cost:25},
+         {customer:"AAA", product:"Falcon", quarter:"Q3", revenue:200, cost:125},
+         {customer:"AAA", product:"Falcon JX", quarter:"Q4", revenue:300, cost:75},
+    
+         {customer:"BBB", product:"Flex SDK", quarter:"Q2", revenue:175, cost:20},
+         {customer:"BBB", product:"Flex JS", quarter:"Q3", revenue:100, cost:20},
+         {customer:"BBB", product:"Falcon", quarter:"Q4", revenue:270, cost:120},
+         {customer:"BBB", product:"Falcon JX", quarter:"Q1", revenue:370, cost:70},
+    
+         {customer:"CCC", product:"Flex SDK", quarter:"Q3", revenue:410, cost:120},
+         {customer:"CCC", product:"Flex JS", quarter:"Q4", revenue:300, cost:320},
+         {customer:"CCC", product:"Falcon", quarter:"Q1", revenue:510, cost:220},
+         {customer:"CCC", product:"Falcon JX", quarter:"Q2", revenue:620, cost:170},
+    
+         {customer:"AAA", product:"Flex SDK", quarter:"Q4", revenue:215, cost:90},
+         {customer:"AAA", product:"Flex JS", quarter:"Q1", revenue:210, cost:90},
+         {customer:"AAA", product:"Falcon", quarter:"Q2", revenue:175, cost:190},
+         {customer:"AAA", product:"Falcon JX", quarter:"Q3", revenue:420, cost:75},
+    
+         {customer:"BBB", product:"Flex SDK", quarter:"Q1", revenue:240, cost:20},
+         {customer:"BBB", product:"Flex JS", quarter:"Q2", revenue:100, cost:20},
+         {customer:"BBB", product:"Falcon", quarter:"Q3", revenue:270, cost:120},
+         {customer:"BBB", product:"Falcon JX", quarter:"Q4", revenue:370, cost:70},
+    
+         {customer:"CCC", product:"Flex SDK", quarter:"Q1", revenue:375, cost:120},
+         {customer:"CCC", product:"Flex JS", quarter:"Q2", revenue:420, cost:120},
+         {customer:"CCC", product:"Falcon", quarter:"Q3", revenue:680, cost:220},
+         {customer:"CCC", product:"Falcon JX", quarter:"Q4", revenue:570, cost:170}         
+        ]);
+    
+        private function creationCompleteHandler():void {
+            // You must initialize the cube before you 
+            // can execute a query on it.
+            myMXMLCube.refresh();
+        }
+
+        // Create the OLAP query.
+        private function getQuery(cube:IOLAPCube):IOLAPQuery {
+            // Create an instance of OLAPQuery to represent the query. 
+            var query:OLAPQuery = new OLAPQuery;
+            
+            // Get the row axis from the query instance.
+            var rowQueryAxis:IOLAPQueryAxis = 
+                query.getAxis(OLAPQuery.ROW_AXIS);
+            // Create an OLAPSet instance to configure the axis.
+            var productSet:OLAPSet = new OLAPSet;
+            // Add the Product to the row to aggregate data 
+            // by the Product dimension.
+            productSet.addElements(
+                cube.findDimension("ProductDim").findAttribute("Product").children);
+            // Add the OLAPSet instance to the axis.
+            rowQueryAxis.addSet(productSet);
+            
+            // Get the column axis from the query instance, and configure it
+            // to aggregate the columns by the Quarter dimension. 
+            var colQueryAxis:IOLAPQueryAxis = 
+                query.getAxis(OLAPQuery.COLUMN_AXIS);         
+            var quarterSet:OLAPSet= new OLAPSet;
+            quarterSet.addElements(
+                cube.findDimension("QuarterDim").findAttribute("Quarter").children);
+            colQueryAxis.addSet(quarterSet);
+            
+            return query;       
+        }
+
+        // Event handler to execute the OLAP query 
+        // after the cube completes initialization.
+        private function runQuery(event:CubeEvent):void {
+            // Get cube.
+            var cube:IOLAPCube = IOLAPCube(event.currentTarget);
+            // Create a query instance.
+            var query:IOLAPQuery = getQuery(cube);
+            // Execute the query.
+            var token:AsyncToken = cube.execute(query);
+            // Setup handlers for the query results.
+            token.addResponder(new AsyncResponder(showResult, showFault));
+        }
+
+        // Handle a query fault.
+        private function showFault(result:Object, token:Object):void {
+            Alert.show("Error in query.");
+        }
+
+        // Handle a successful query by passing the query results to 
+        // the OLAPDataGrid control..
+        private function showResult(result:Object, token:Object):void {
+            if (!result) {
+                Alert.show("No results from query.");
+                return;
+            }
+            myOLAPDG.dataProvider= result as OLAPResult;            
+        }        
+      ]]>
+    </fx:Script>
+
+	<fx:Declarations>
+	    <mx:OLAPCube name="FlatSchemaCube" 
+	        dataProvider="{flatData}" 
+	        id="myMXMLCube"
+	        complete="runQuery(event)">
+	         
+	        <mx:OLAPDimension name="CustomerDim">
+	            <mx:OLAPAttribute name="Customer" dataField="customer"/>
+	            <mx:OLAPHierarchy name="CustomerHier" hasAll="true">
+	                <mx:OLAPLevel attributeName="Customer"/>
+	            </mx:OLAPHierarchy>
+	        </mx:OLAPDimension>
+	        
+	        <mx:OLAPDimension name="ProductDim">
+	            <mx:OLAPAttribute name="Product" dataField="product"/>
+	            <mx:OLAPHierarchy name="ProductHier" hasAll="true">
+	                <mx:OLAPLevel attributeName="Product"/>
+	            </mx:OLAPHierarchy>
+	        </mx:OLAPDimension>
+	    
+	        <mx:OLAPDimension name="QuarterDim">
+	            <mx:OLAPAttribute name="Quarter" dataField="quarter"/>
+	            <mx:OLAPHierarchy name="QuarterHier" hasAll="true">
+	                <mx:OLAPLevel attributeName="Quarter"/>
+	            </mx:OLAPHierarchy> 
+	        </mx:OLAPDimension>
+	        
+	        <mx:OLAPMeasure name="Revenue" 
+	            dataField="revenue" 
+	            aggregator="SUM"/>
+	    </mx:OLAPCube>
+    </fx:Declarations>
+		
+    <mx:Panel title="OLAPCube Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <mx:OLAPDataGrid id="myOLAPDG" width="100%" height="100%"/>
+		
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/controls/PopUpButtonExample.mxml b/tourdeflexmodules/src/mx/controls/PopUpButtonExample.mxml
new file mode 100755
index 0000000..d24fd98
--- /dev/null
+++ b/tourdeflexmodules/src/mx/controls/PopUpButtonExample.mxml
@@ -0,0 +1,68 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the PopUpButton control. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+	
+	<fx:Script>
+		<![CDATA[
+
+			import mx.controls.*;
+			import mx.events.*;
+
+			private var myMenu:Menu;
+
+			// Initialize the Menu control, and specify it as the pop up object
+			// of the PopUpButton control. 
+			private function initMenu():void {
+				myMenu = new Menu();
+				var dp:Object = [{label: "New Folder"}, {label: "Sent Items"}, {label: "Inbox"}];        
+				myMenu.dataProvider = dp;
+				myMenu.selectedIndex = 0;       
+				myMenu.addEventListener("itemClick", itemClickHandler);
+				popB.popUp = myMenu;
+				popB.label = "Put in: " + myMenu.dataProvider[myMenu.selectedIndex].label;
+			}
+
+			// Define the event listener for the Menu control's itemClick event. 
+			private function itemClickHandler(event:MenuEvent):void {
+				var label:String = event.item.label;        
+				popTypeB.text=String("Moved to " + label);
+				popB.label = "Put in: " + label;
+				popB.close();
+				myMenu.selectedIndex = event.index;
+			}
+
+		]]>
+	</fx:Script>
+
+    <mx:Panel title="PopUpButton Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <mx:Label width="100%"
+            text="Button label contains the name of the last selected menu item." />
+        <mx:PopUpButton id="popB" label="Edit" creationComplete="initMenu()" width="135" />
+		
+        <mx:Spacer height="50" />
+        <mx:TextInput id="popTypeB" />
+		
+    </mx:Panel>		
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/controls/PopUpButtonMenuExample.mxml b/tourdeflexmodules/src/mx/controls/PopUpButtonMenuExample.mxml
new file mode 100755
index 0000000..96b91a1
--- /dev/null
+++ b/tourdeflexmodules/src/mx/controls/PopUpButtonMenuExample.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.
+  -->
+
+<!-- PopUpMenuButton control example. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
+        <![CDATA[
+            import mx.events.*;
+            import mx.controls.*;
+			
+            //Event handler, invoked when you select from the menu.
+            public function itemClickHandler(event:MenuEvent):void {
+                Alert.show("Menu label: " + event.label
+                    + "  \n menu item index within parent menu: " + event.index);
+            }
+        ]]>
+    </fx:Script>
+	
+	<fx:Declarations>
+	    <!-- A an data provider in E4X format. -->
+	    <fx:XMLList id="treeDP2">
+	        <node label="Inbox"/>
+	        <node label="Calendar"/>
+	        <node label="Deleted Items"/>
+	    </fx:XMLList>
+	</fx:Declarations>
+
+    <mx:Panel title="PopUpMenuButton Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+		<mx:Label width="100%"
+		    text="Click the down arrow to open the menu."/>
+
+        <mx:PopUpMenuButton id="p2" 
+            dataProvider="{treeDP2}" 
+            labelField="@label"
+            itemClick="itemClickHandler(event)"/>
+
+	</mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/controls/RadioButtonExample.mxml b/tourdeflexmodules/src/mx/controls/RadioButtonExample.mxml
new file mode 100755
index 0000000..dc9940b
--- /dev/null
+++ b/tourdeflexmodules/src/mx/controls/RadioButtonExample.mxml
@@ -0,0 +1,44 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate RadioButton control. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
+        import mx.controls.Alert;
+    </fx:Script>
+
+    <mx:Panel title="RadioButton Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+       <mx:Label width="100%"
+           text="What year were women first allowed to compete in the Boston Marathon?"/>
+
+        <mx:RadioButton groupName="year" id="option1" label="1942"/>
+        <mx:RadioButton groupName="year" id="option2" label="1952"/>
+        <mx:RadioButton groupName="year" id="option3" label="1962"/>
+        <mx:RadioButton groupName="year" id="option4" label="1972"/>
+
+        <mx:Button label="Check Answer" 
+            click="Alert.show(option4.selected?'Correct Answer!':'Wrong Answer', 'Result')"/>
+    
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/controls/RadioButtonGroupExample.mxml b/tourdeflexmodules/src/mx/controls/RadioButtonGroupExample.mxml
new file mode 100755
index 0000000..0d9101e
--- /dev/null
+++ b/tourdeflexmodules/src/mx/controls/RadioButtonGroupExample.mxml
@@ -0,0 +1,64 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate RadioButtonGroup control. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
+	    <![CDATA[
+	
+	    import mx.controls.Alert;
+	    import  mx.events.ItemClickEvent;
+	
+        // Event handler function to display the selected button
+        // in an Alert control.
+		private function handleCard(event:ItemClickEvent):void {
+			if (event.currentTarget.selectedValue == "AmEx") {
+					Alert.show("You selected American Express") 
+			} 
+			else {
+				if (event.currentTarget.selectedValue == "MC") {
+					Alert.show("You selected MasterCard") 
+				} 
+				else {
+					Alert.show("You selected Visa") 
+				}
+			} 
+		}
+	    ]]>
+    </fx:Script>
+
+    <mx:Panel title="RadioButtonGroup Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+    
+        <mx:Label width="100%" 
+            text="Select a type of credit card."/>
+
+        <mx:RadioButtonGroup id="cardtype" itemClick="handleCard(event)"/>
+        <mx:RadioButton groupName="cardtype" id="americanExpress" value="AmEx" 
+            label="American Express" width="150" />
+        <mx:RadioButton groupName="cardtype" id="masterCard" value="MC" 
+            label="MasterCard" width="150" />
+        <mx:RadioButton groupName="cardtype" id="visa" value="Visa" 
+            label="Visa" width="150" />
+		
+    </mx:Panel>		
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/controls/RichTextEditorExample.mxml b/tourdeflexmodules/src/mx/controls/RichTextEditorExample.mxml
new file mode 100755
index 0000000..54703e5
--- /dev/null
+++ b/tourdeflexmodules/src/mx/controls/RichTextEditorExample.mxml
@@ -0,0 +1,39 @@
+<?xml version="1.0" ?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the RichTextEditor control. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+    <mx:Panel title="Rich Text Editor Control Example" horizontalAlign="center"
+			paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+			height="100%" width="100%">
+		
+	    <mx:RichTextEditor id="rte" title="RichTextEditor" height="75%"
+						   text="Enter text into the RichTextEditor control, then click a button to display your text as plain text, or as HTML-formatted text."/>
+	
+	    <mx:TextArea id="rteText" width="80%" height="25%"/>
+	
+	    <mx:HBox>
+	        <mx:Button label="Show Plain Text" click="rteText.text=rte.text"/>
+	        <mx:Button label="Show HTML Markup" click="rteText.text=rte.htmlText"/>
+	    </mx:HBox>
+	</mx:Panel>
+
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/controls/SimpleAlert.mxml b/tourdeflexmodules/src/mx/controls/SimpleAlert.mxml
new file mode 100755
index 0000000..4a64025
--- /dev/null
+++ b/tourdeflexmodules/src/mx/controls/SimpleAlert.mxml
@@ -0,0 +1,78 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the Alert control. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
+        <![CDATA[
+            import mx.controls.Alert;
+            import mx.events.CloseEvent;
+        
+            // Event handler function uses a static method to show
+            // a pop-up window with the title, message, and requested buttons.        
+            private function clickHandler(event:Event):void {
+                Alert.show("Do you want to save your changes?", "Save Changes", 3, this, alertClickHandler);
+            }
+        
+            // Event handler function for displaying the selected Alert button.
+            private function alertClickHandler(event:CloseEvent):void {
+                if (event.detail==Alert.YES)
+                    status.text="You answered Yes";
+                else
+                    status.text="You answered No";
+            }
+
+            // Event handler function changes the default Button labels and sets the
+            // Button widths. If you later use an Alert with the default Buttons, 
+            // you must reset these values.
+            private function secondClickHandler(event:Event):void {
+                Alert.buttonWidth = 100;
+                Alert.yesLabel = "Magenta";
+                Alert.noLabel = "Blue";
+                Alert.cancelLabel = "Green";
+
+                Alert.show("Select a color:","Color Selection",1|2|8,this);
+                
+                // Set the labels back to normal:
+                Alert.yesLabel = "Yes";
+                Alert.noLabel = "No";                
+            }
+        ]]>
+    </fx:Script>
+
+    <mx:Panel title="Alert Control Example" horizontalAlign="center"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+      <mx:Text width="100%" textAlign="center"
+          text="Click the button below to display a simple Alert window."/>
+      <mx:Button label="Click Me" click="Alert.show('Hello World!', 'Message')"/>
+
+      <mx:Text width="100%" textAlign="center"
+          text="Click the button below to display an Alert window and capture the button pressed by the user."/>
+      <mx:Button label="Click Me" click="clickHandler(event)"/>
+      <mx:Label id="status" fontWeight="bold"/>
+
+      <mx:Text width="100%" textAlign="center"
+          text="Click the button below to display an Alert window that uses custom Button labels."/>
+      <mx:Button label="Click Me" click="secondClickHandler(event)"/>
+    </mx:Panel>
+
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/controls/SimpleComboBox.mxml b/tourdeflexmodules/src/mx/controls/SimpleComboBox.mxml
new file mode 100755
index 0000000..353e72c
--- /dev/null
+++ b/tourdeflexmodules/src/mx/controls/SimpleComboBox.mxml
@@ -0,0 +1,55 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the ComboBox control. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
+        <![CDATA[
+            import mx.collections.ArrayCollection;
+
+            [Bindable]
+            public var cards:ArrayCollection = new ArrayCollection(
+                [ {label:"Visa", data:1}, 
+                  {label:"MasterCard", data:2}, 
+                  {label:"American Express", data:3} ]);
+        
+            private function closeHandler(event:Event):void {
+                myLabel.text = "You selected: " +  ComboBox(event.target).selectedItem.label;
+                myData.text = "Data: " +  ComboBox(event.target).selectedItem.data;
+            }     
+        ]]>
+    </fx:Script>
+
+    <mx:Panel title="ComboBox Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <mx:ComboBox dataProvider="{cards}" width="150" 
+            close="closeHandler(event)"/>
+
+        <mx:VBox width="250">
+            <mx:Text  width="200" text="Select a type of credit card."/>
+            <mx:Label id="myLabel" text="You selected:"/>
+            <mx:Label id="myData" text="Data:"/>
+        </mx:VBox>         
+
+    </mx:Panel>    
+</mx:Module>       
diff --git a/tourdeflexmodules/src/mx/controls/SimpleDataGrid.mxml b/tourdeflexmodules/src/mx/controls/SimpleDataGrid.mxml
new file mode 100755
index 0000000..7624a9c
--- /dev/null
+++ b/tourdeflexmodules/src/mx/controls/SimpleDataGrid.mxml
@@ -0,0 +1,81 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- DataGrid control example. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+	<fx:Declarations>
+	    <fx:XMLList id="employees">
+	        <employee>
+	            <name>Christina Coenraets</name>
+	            <phone>555-219-2270</phone>
+	            <email>ccoenraets@fictitious.com</email>
+	            <active>true</active>
+	        </employee>
+	        <employee>
+	            <name>Joanne Wall</name>
+	            <phone>555-219-2012</phone>
+	            <email>jwall@fictitious.com</email>
+	            <active>true</active>
+	        </employee>
+	        <employee>
+	            <name>Maurice Smith</name>
+	            <phone>555-219-2012</phone>
+	            <email>maurice@fictitious.com</email>
+	            <active>false</active>
+	        </employee>
+	        <employee>
+	            <name>Mary Jones</name>
+	            <phone>555-219-2000</phone>
+	            <email>mjones@fictitious.com</email>
+	            <active>true</active>
+	        </employee>
+	    </fx:XMLList>
+	</fx:Declarations>
+
+    <mx:Panel title="DataGrid Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <mx:Label width="100%"
+            text="Select a row in the DataGrid control."/>
+
+        <mx:DataGrid id="dg" width="100%" height="100%" rowCount="5" dataProvider="{employees}">
+            <mx:columns>
+                <mx:DataGridColumn dataField="name" headerText="Name"/>
+                <mx:DataGridColumn dataField="phone" headerText="Phone"/>
+                <mx:DataGridColumn dataField="email" headerText="Email"/>
+            </mx:columns>
+        </mx:DataGrid>
+
+        <mx:Form width="100%" height="100%">
+            <mx:FormItem label="Name">
+                <mx:Label text="{dg.selectedItem.name}"/>
+            </mx:FormItem>
+            <mx:FormItem label="Email">
+                <mx:Label text="{dg.selectedItem.email}"/>
+            </mx:FormItem>
+            <mx:FormItem label="Phone">
+                <mx:Label text="{dg.selectedItem.phone}"/>
+            </mx:FormItem>
+        </mx:Form>
+        
+    </mx:Panel>
+</mx:Module>        
diff --git a/tourdeflexmodules/src/mx/controls/SimpleHRule.mxml b/tourdeflexmodules/src/mx/controls/SimpleHRule.mxml
new file mode 100755
index 0000000..6070a3c
--- /dev/null
+++ b/tourdeflexmodules/src/mx/controls/SimpleHRule.mxml
@@ -0,0 +1,38 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the HRule control. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+	<fx:Declarations>
+		<mx:WipeLeft id="myWL"/>
+	</fx:Declarations>	
+
+    <mx:Panel title="HRule Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <mx:HRule rollOverEffect="{myWL}" width="100%" strokeWidth="1" strokeColor="red"/>
+        <mx:Label width="100%" 
+            text="Move mouse over HorizontalRule control to redraw it."/>
+
+    </mx:Panel>
+</mx:Module>
+       
diff --git a/tourdeflexmodules/src/mx/controls/SimpleImage.mxml b/tourdeflexmodules/src/mx/controls/SimpleImage.mxml
new file mode 100755
index 0000000..fe9ed5e
--- /dev/null
+++ b/tourdeflexmodules/src/mx/controls/SimpleImage.mxml
@@ -0,0 +1,32 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the Image control. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+    <mx:Panel id="myPanel" title="Image Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <mx:Label text="Image embedded in the application."/>
+        <mx:Image source="@Embed('assets/ApacheFlexLogo.png')" width="50%" height="50%" />
+
+    </mx:Panel>
+</mx:Module>          
diff --git a/tourdeflexmodules/src/mx/controls/SimpleImageHSlider.mxml b/tourdeflexmodules/src/mx/controls/SimpleImageHSlider.mxml
new file mode 100755
index 0000000..b457b22
--- /dev/null
+++ b/tourdeflexmodules/src/mx/controls/SimpleImageHSlider.mxml
@@ -0,0 +1,60 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the HSlider control. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
+        <![CDATA[
+   
+          private var imageWidth:Number = 0;
+          private var imageHeight:Number = 0;
+          
+          // Event handler function to change the image size.
+          private function changeSize():void
+	      {
+	         logo.width = uint(imageWidth*hSlider.value/100);
+	         logo.height = uint(imageHeight*hSlider.value/100);
+	      }
+        ]]>
+    </fx:Script>
+
+    <mx:Panel id="panel" title="HSlider Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <mx:HBox height="100%" width="100%">
+            <mx:Image id="logo" source="@Embed('assets/ApacheFlexLogo.png')" 
+                creationComplete="imageWidth = logo.width; imageHeight = logo.height; changeSize()" />
+        </mx:HBox>
+
+        <mx:Label text="Drag the slider to resize the image."/>
+
+        <mx:HSlider id="hSlider" minimum="0" maximum="100" value="50" 
+            dataTipPlacement="top" 
+            tickColor="black" 
+            snapInterval="1" tickInterval="10" 
+            labels="['0%','100%']" 
+            allowTrackClick="true" 
+            liveDragging="true"
+            change="changeSize()"/>
+    </mx:Panel>
+</mx:Module>   
+       
diff --git a/tourdeflexmodules/src/mx/controls/SimpleImageVSlider.mxml b/tourdeflexmodules/src/mx/controls/SimpleImageVSlider.mxml
new file mode 100755
index 0000000..64d74ff
--- /dev/null
+++ b/tourdeflexmodules/src/mx/controls/SimpleImageVSlider.mxml
@@ -0,0 +1,64 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the VSlider control. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
+        <![CDATA[
+   
+          private var imageWidth:Number = 0;
+          private var imageHeight:Number = 0;
+          
+          // Event handler function to change the image size.
+          private function changeSize():void
+	      {
+	         logo.width=uint(imageWidth*hSlider.value/100);
+	         logo.height=uint(imageHeight*hSlider.value/100);
+	      }
+        ]]>
+    </fx:Script>
+
+        <mx:Panel id="panel" title="VSlider Control Example" layout="horizontal"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+        
+            <mx:HBox width="50%">
+                <mx:Image id="logo" source="@Embed('assets/ApacheFlexLogo.png')" 
+                    creationComplete="imageWidth = logo.width; imageHeight = logo.height; changeSize()" />
+            </mx:HBox>
+
+            <mx:VBox horizontalAlign="center">
+                <mx:Label text="Drag the slider to resize the image."/>
+    
+                <mx:VSlider id="hSlider" 
+                    dataTipPlacement="top" 
+                    minimum="0" maximum="100" value="50" 
+                    tickColor="black" 
+                    snapInterval="1" tickInterval="10" 
+                    labels="['0%','100%']" 
+                    allowTrackClick="true" 
+                    liveDragging="true" 
+                    change="changeSize()"/>
+            </mx:VBox>
+            
+        </mx:Panel>
+</mx:Module>   
+       
diff --git a/tourdeflexmodules/src/mx/controls/SimpleList.mxml b/tourdeflexmodules/src/mx/controls/SimpleList.mxml
new file mode 100755
index 0000000..558bbb5
--- /dev/null
+++ b/tourdeflexmodules/src/mx/controls/SimpleList.mxml
@@ -0,0 +1,62 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the List Control -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
+        <![CDATA[
+        	[Bindable]
+            public var selectedItem:Object;
+       ]]>
+    </fx:Script>
+
+
+	<fx:Declarations>
+	    <fx:Model id="mystates">
+	      <states>
+	        <state label="Alabama" data="AL"/>
+	        <state label="Alaska" data="AK"/>
+	        <state label="Arizona" data="AZ"/>
+	        <state label="Arkansas" data="AR"/>
+	        <state label="California" data="CA"/>
+	        <state label="Colorado" data="CO"/>
+	        <state label="Connecticut" data="CT"/>
+	      </states>
+	    </fx:Model>
+	</fx:Declarations>
+	
+    <mx:Panel title="List Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <mx:Label text="Select a state to see its abbreviation."/>
+
+        <mx:List id="source" width="100%"
+            dataProvider="{mystates.state}"
+            change="this.selectedItem=List(event.target).selectedItem"/>
+
+        <mx:VBox width="100%">
+            <mx:Label text="Selected State: {selectedItem.label}"/>
+            <mx:Label text="State abbreviation: {selectedItem.data}"/>
+        </mx:VBox>
+
+    </mx:Panel>
+</mx:Module>       
diff --git a/tourdeflexmodules/src/mx/controls/SimpleLoader.mxml b/tourdeflexmodules/src/mx/controls/SimpleLoader.mxml
new file mode 100755
index 0000000..6d3b740
--- /dev/null
+++ b/tourdeflexmodules/src/mx/controls/SimpleLoader.mxml
@@ -0,0 +1,34 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the SWFLoader control. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+    <mx:Panel title="SWFLoader Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <mx:Label text="The Label control of the outer application."/>
+
+        <mx:SWFLoader id="Load" source="@Embed(source='Local.swf')" />
+
+    </mx:Panel>
+</mx:Module>
+       
diff --git a/tourdeflexmodules/src/mx/controls/SimpleMenuExample.mxml b/tourdeflexmodules/src/mx/controls/SimpleMenuExample.mxml
new file mode 100755
index 0000000..4a8836b
--- /dev/null
+++ b/tourdeflexmodules/src/mx/controls/SimpleMenuExample.mxml
@@ -0,0 +1,75 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the Menu control. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
+        <![CDATA[
+       
+            import mx.controls.Menu;
+            import mx.events.MenuEvent;
+            import mx.controls.Alert;           
+            import flash.geom.Point;
+
+            private var point1:Point = new Point();
+            private var myMenu:Menu;
+   
+            // Create and display the Menu control.
+            private function showMenu():void {
+                myMenu= Menu.createMenu(panel, myMenuData, false);
+                myMenu.labelField="@label"
+                myMenu.addEventListener("itemClick", menuHandler);
+                
+                // Calculate position of Menu in Application's coordinates. 
+                point1.x=mybutton.x;
+                point1.y=mybutton.y;                
+                point1=mybutton.localToGlobal(point1);
+
+                myMenu.show(point1.x + 25, point1.y + 25);
+            }
+       
+            // Event handler for the Menu control's change event.
+            private function menuHandler(event:MenuEvent):void  {
+                Alert.show("Label: " + event.item.@label, "Clicked menu item");
+            }    
+        ]]>
+    </fx:Script>
+
+	<fx:Declarations>
+	    <fx:XML id="myMenuData">
+	        <root>
+	            <menuitem label="MenuItem 1" eventName="copy"/>
+	            <menuitem label="MenuItem 2" eventName="paste"/>
+	        </root>
+	    </fx:XML>
+	</fx:Declarations>	
+
+    <mx:Panel id="panel" title="Menu Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <mx:Label width="100%"
+           text="Click the button to open the Menu control."/>
+
+        <mx:Button id="mybutton" label="Open Menu" click="showMenu()"/>
+
+    </mx:Panel>
+</mx:Module>          
diff --git a/tourdeflexmodules/src/mx/controls/SimpleProgressBar.mxml b/tourdeflexmodules/src/mx/controls/SimpleProgressBar.mxml
new file mode 100755
index 0000000..b43a8db
--- /dev/null
+++ b/tourdeflexmodules/src/mx/controls/SimpleProgressBar.mxml
@@ -0,0 +1,60 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the ProgressBar control. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
+        <![CDATA[
+           
+          private var j:uint=10;
+          
+          // Event handler function to set the value of the 
+          // ProgressBar control.
+          private function runit():void
+          {
+    	      if(j<=100)
+    	      {
+    	         bar.setProgress(j,100);
+        		 bar.label= "CurrentProgress" + " " + j + "%";
+        		 j+=10;
+    	      }
+    	      if(j>100)
+    	      {
+        		 j=0;
+              }
+          }
+        ]]>    
+    </fx:Script>
+
+    <mx:Panel title="ProgressBar Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <mx:Label width="100%"
+            text="Click the button to increment the progress bar." />
+        <mx:Button id="Speed" label="Run" click="runit()"/>
+            
+        <mx:ProgressBar id="bar" labelPlacement="bottom"
+            minimum="0" visible="true" maximum="100" label="CurrentProgress 0%" 
+            direction="right" mode="manual" width="100%"/>
+
+    </mx:Panel>
+</mx:Module>       
diff --git a/tourdeflexmodules/src/mx/controls/SimpleVRule.mxml b/tourdeflexmodules/src/mx/controls/SimpleVRule.mxml
new file mode 100755
index 0000000..14ef18d
--- /dev/null
+++ b/tourdeflexmodules/src/mx/controls/SimpleVRule.mxml
@@ -0,0 +1,34 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the VRule control. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+   <mx:Panel title="VRule Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+      
+      <mx:VRule rollOverEffect="WipeUp" strokeWidth="1" strokeColor="red"/>        
+      <mx:Label width="100%" 
+          text="Move mouse over VRule control to redraw it."/>
+    
+   </mx:Panel>
+</mx:Module>
+       
diff --git a/tourdeflexmodules/src/mx/controls/SpacerExample.mxml b/tourdeflexmodules/src/mx/controls/SpacerExample.mxml
new file mode 100755
index 0000000..b9324b5
--- /dev/null
+++ b/tourdeflexmodules/src/mx/controls/SpacerExample.mxml
@@ -0,0 +1,39 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the Spacer control. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+    <mx:Panel id="panel" title="Spacer Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+        
+        <mx:Text width="100%" 
+            text="The Spacer control pushes the second image to the right edge of the HBox container." />
+
+        <mx:HBox width="100%">
+            <mx:Image source="@Embed('assets/ApacheFlexLogo.png')" width="50%" height="50%" />
+            <mx:Spacer width="100%"/>
+            <mx:Image source="@Embed('assets/ApacheFlexLogo.png')" width="50%" height="50%" />
+        </mx:HBox>
+       
+    </mx:Panel>
+</mx:Module>   
+       
diff --git a/tourdeflexmodules/src/mx/controls/TabBarExample.mxml b/tourdeflexmodules/src/mx/controls/TabBarExample.mxml
new file mode 100755
index 0000000..7387eee
--- /dev/null
+++ b/tourdeflexmodules/src/mx/controls/TabBarExample.mxml
@@ -0,0 +1,60 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the TabBar control. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
+        <![CDATA[
+
+            import mx.events.ItemClickEvent;
+            import mx.controls.TabBar;
+
+            [Bindable]
+            public var STATE_ARRAY:Array = [{label:"Alabama", data:"Montgomery"},
+                {label:"Alaska", data:"Juneau"},
+                {label:"Arkansas", data:"LittleRock"}
+            ];
+            
+    		private function clickEvt(event:ItemClickEvent):void {
+    			// Access target TabBar control.
+    			var targetComp:TabBar = TabBar(event.currentTarget);
+    			forClick.text="label is: " + event.label + ", index is: " + 
+    				event.index + ", capital is: " +
+    				targetComp.dataProvider[event.index].data;
+    		}	            
+       ]]>
+    </fx:Script>
+
+    <mx:Panel title="TabBar Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <mx:Label width="100%" 
+            text="Select a tab to change the current panel."/>
+
+        <mx:TabBar itemClick="clickEvt(event)">
+            <mx:dataProvider>{STATE_ARRAY}</mx:dataProvider>
+        </mx:TabBar>
+
+        <mx:TextArea id="forClick" height="100%" width="100%"/>
+
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/controls/TextAreaExample.mxml b/tourdeflexmodules/src/mx/controls/TextAreaExample.mxml
new file mode 100755
index 0000000..ddac800
--- /dev/null
+++ b/tourdeflexmodules/src/mx/controls/TextAreaExample.mxml
@@ -0,0 +1,40 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the TextArea control. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+    <mx:Panel title="TextArea Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+        
+        <mx:TextArea width="400" height="100">
+            <mx:text>
+                This is a multiline, editable TextArea control. If you need 
+                a non-editable multiline control, use the Text control.
+            </mx:text>
+        </mx:TextArea>
+
+        <mx:TextArea width="400" height="100">
+            <mx:htmlText><![CDATA[This is <font color="#FF0000">HTML text</font> in a <b>TextArea control</b>. Use the <u>htmlText property</u> of the <font color="#008800">TextArea control</font> to include basic HTML markup in your text.]]></mx:htmlText>
+        </mx:TextArea>
+               
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/controls/TextExample.mxml b/tourdeflexmodules/src/mx/controls/TextExample.mxml
new file mode 100755
index 0000000..73cd268
--- /dev/null
+++ b/tourdeflexmodules/src/mx/controls/TextExample.mxml
@@ -0,0 +1,42 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the Text control. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+    <mx:Panel title="Text Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <mx:Text width="100%">
+            <mx:text>
+                This is a multiline, non-editable text component. 
+                If you need an editable multiline component, use TextArea.
+            </mx:text>
+        </mx:Text>
+
+        <mx:Text width="100%">
+            <mx:htmlText>
+                <![CDATA[This is <font color="#FF0000">HTML text</font> in a <b>Text component</b>. Using the <u>htmlText attribute</u> of the <font color="#008800">Text component</font> you can use basic HTML markup.]]>
+            </mx:htmlText>
+        </mx:Text>
+
+   </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/controls/TextInputExample.mxml b/tourdeflexmodules/src/mx/controls/TextInputExample.mxml
new file mode 100755
index 0000000..d78b043
--- /dev/null
+++ b/tourdeflexmodules/src/mx/controls/TextInputExample.mxml
@@ -0,0 +1,35 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the TextInput control. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+    <mx:Panel title="TextInput Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+        
+        <mx:TextInput id="src" text="Hello World!"/>
+
+        <mx:Button label="Copy Text" click="dest.text = src.text"/>
+
+        <mx:TextInput id="dest"/>
+
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/controls/TileListExample.mxml b/tourdeflexmodules/src/mx/controls/TileListExample.mxml
new file mode 100755
index 0000000..ca4ad09
--- /dev/null
+++ b/tourdeflexmodules/src/mx/controls/TileListExample.mxml
@@ -0,0 +1,71 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the TileList Control. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
+        <![CDATA[
+             
+             [Bindable]
+             [Embed(source="assets/ApacheFlexLogo.png")]
+             public var logo1:Class;
+             
+             [Bindable]
+             [Embed(source="assets/ApacheFlexLogo.png")]
+             public var logo2:Class;
+             
+             [Bindable]
+             [Embed(source="assets/ApacheFlexLogo.png")]
+             public var logo3:Class;
+	     
+             [Bindable]
+	         [Embed(source="assets/ApacheFlexLogo.png")]
+             public var logo4:Class;
+
+             [Bindable]
+	         [Embed(source="assets/ApacheFlexLogo.png")]
+             public var logo5:Class;
+        ]]>
+    </fx:Script>
+
+    <mx:Panel title="TileList Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <mx:Label width="100%" 
+            text="A TileList control displays items in rows and columns."/>
+
+        <mx:TileList id="CameraSelection" height="250" width="300" 
+            maxColumns="2" rowHeight="225" columnWidth="125">
+            <mx:dataProvider>
+                <fx:Array>
+                    <fx:Object label="Logo 1" icon="{logo1}"/>
+                    <fx:Object label="Logo 2" icon="{logo2}"/>
+                    <fx:Object label="Logo 3" icon="{logo3}"/>
+                    <fx:Object label="Logo 4" icon="{logo4}"/>
+                    <fx:Object label="Logo 5" icon="{logo5}"/>
+                </fx:Array>
+            </mx:dataProvider>
+        </mx:TileList>
+
+    </mx:Panel>
+</mx:Module>
+       
diff --git a/tourdeflexmodules/src/mx/controls/ToggleButtonBarExample.mxml b/tourdeflexmodules/src/mx/controls/ToggleButtonBarExample.mxml
new file mode 100755
index 0000000..981848f
--- /dev/null
+++ b/tourdeflexmodules/src/mx/controls/ToggleButtonBarExample.mxml
@@ -0,0 +1,58 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the ToggleButtonBar control. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
+        <![CDATA[
+
+            import mx.events.ItemClickEvent;
+
+            // Event handler function to print a message
+            // describing the selected Button control.
+    		private function clickHandler(event:ItemClickEvent):void {
+    		    myTA.text="Selected button index: " + String(event.index) +
+    		        "\n" + "Selected button label: " + event.label;
+            }
+        ]]>
+    </fx:Script>
+
+    <mx:Panel title="ToggleButtonBar Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <mx:Label width="100%"
+            text="Select a button in the ToggleButtonBar control."/>
+
+        <mx:TextArea id="myTA" width="100%" height="100%"/>
+
+        <mx:ToggleButtonBar itemClick="clickHandler(event)">
+            <mx:dataProvider>
+                <fx:Array>
+                    <fx:String>Flex SDK</fx:String>
+                    <fx:String>Flex JS</fx:String>
+                    <fx:String>Falcon</fx:String>
+                    <fx:String>Falcon JX</fx:String>
+                </fx:Array>
+            </mx:dataProvider>
+        </mx:ToggleButtonBar>
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/controls/TreeExample.mxml b/tourdeflexmodules/src/mx/controls/TreeExample.mxml
new file mode 100755
index 0000000..4ac2f7b
--- /dev/null
+++ b/tourdeflexmodules/src/mx/controls/TreeExample.mxml
@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Tree control example. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
+        <![CDATA[
+
+            [Bindable]
+            public var selectedNode:XML;
+
+            // Event handler for the Tree control change event.
+            public function treeChanged(event:Event):void {
+                selectedNode=Tree(event.target).selectedItem as XML;
+            }
+        ]]>
+    </fx:Script>
+
+	<fx:Declarations>
+	    <fx:XMLList id="treeData">
+		    <node label="Mail Box">
+		        <node label="Inbox">
+		            <node label="Marketing"/>
+		            <node label="Product Management"/>
+		            <node label="Personal"/>
+		        </node>
+		        <node label="Outbox">
+		            <node label="Professional"/>
+		            <node label="Personal"/>
+		        </node>
+		        <node label="Spam"/>
+		        <node label="Sent"/>
+			</node>	
+	    </fx:XMLList>
+	</fx:Declarations>
+
+    <mx:Panel title="Tree Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <mx:Label width="100%" 
+            text="Select a node in the Tree control."/>
+
+        <mx:HDividedBox width="100%" height="100%">
+            <mx:Tree id="myTree" width="50%" height="100%" labelField="@label"
+                showRoot="false" dataProvider="{treeData}" change="treeChanged(event)"/>
+            <mx:TextArea height="100%" width="50%"
+                text="Selected Item: {selectedNode.@label}"/>
+        </mx:HDividedBox>
+        
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/controls/VScrollBarExample.mxml b/tourdeflexmodules/src/mx/controls/VScrollBarExample.mxml
new file mode 100755
index 0000000..288dab9
--- /dev/null
+++ b/tourdeflexmodules/src/mx/controls/VScrollBarExample.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.
+  -->
+
+<!-- Simple example to demonstrate the VScrollBar control. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+      <fx:Script>
+        <![CDATA[
+    
+            import mx.events.ScrollEvent;
+    
+            // Event handler function to display the scroll location
+            // as you move the scroll thumb.
+            private function myScroll(event:ScrollEvent):void
+            {
+                showPosition.text = "VScrollBar properties summary:" + '\n' +
+                    "------------------------------------" + '\n' +
+                    "Current scroll position: " + event.currentTarget.scrollPosition  + '\n' +
+                    "The maximum scroll position: " + event.currentTarget.maxScrollPosition + '\n' +
+                    "The minimum scroll position: " + event.currentTarget.minScrollPosition ;
+            }
+        ]]>
+    </fx:Script> 
+  
+    <mx:Panel id="panel" title="VScrollBar Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+        
+        <mx:Label width="100%" 
+            text="Click on the scroll bar to view its properties."/>
+        
+        <mx:VScrollBar id="bar" height="100%" 
+            minScrollPosition="0" maxScrollPosition="{panel.width - 20}"
+            lineScrollSize="50" pageScrollSize="100"  
+            repeatDelay="1000" repeatInterval="500" 
+            scroll="myScroll(event)"/>
+          
+        <mx:TextArea height="100%" width="100%" id="showPosition"/>
+  
+    </mx:Panel>  
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/controls/VideoDisplayExample.mxml b/tourdeflexmodules/src/mx/controls/VideoDisplayExample.mxml
new file mode 100755
index 0000000..4db2057
--- /dev/null
+++ b/tourdeflexmodules/src/mx/controls/VideoDisplayExample.mxml
@@ -0,0 +1,40 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the VideoDisplay control. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+    <mx:Panel title="VideoDisplay Control Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+       <mx:Text width="75%"
+           text="Use the buttons to control the video. The Stop button resets the video to the beginning."/>
+
+		<mx:VideoDisplay id="myVid" height="158" width="211" source="assets/FlexInstaller.mp4" autoPlay="false"/>
+
+		<mx:HBox>
+		    <mx:Button label="Play" click="myVid.play()"/>
+		    <mx:Button label="Pause" click="myVid.pause()"/>
+		    <mx:Button label="Stop" click="myVid.stop()"/>
+		</mx:HBox>
+
+	</mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/controls/assets/ApacheFlexIcon.png b/tourdeflexmodules/src/mx/controls/assets/ApacheFlexIcon.png
new file mode 100644
index 0000000..e68d831
--- /dev/null
+++ b/tourdeflexmodules/src/mx/controls/assets/ApacheFlexIcon.png
Binary files differ
diff --git a/tourdeflexmodules/src/mx/controls/assets/ApacheFlexLogo.png b/tourdeflexmodules/src/mx/controls/assets/ApacheFlexLogo.png
new file mode 100644
index 0000000..4ff037f
--- /dev/null
+++ b/tourdeflexmodules/src/mx/controls/assets/ApacheFlexLogo.png
Binary files differ
diff --git a/tourdeflexmodules/src/mx/controls/assets/buttonDisabled.gif b/tourdeflexmodules/src/mx/controls/assets/buttonDisabled.gif
new file mode 100755
index 0000000..9a19d26
--- /dev/null
+++ b/tourdeflexmodules/src/mx/controls/assets/buttonDisabled.gif
Binary files differ
diff --git a/tourdeflexmodules/src/mx/controls/assets/buttonDown.gif b/tourdeflexmodules/src/mx/controls/assets/buttonDown.gif
new file mode 100755
index 0000000..18c0ea4
--- /dev/null
+++ b/tourdeflexmodules/src/mx/controls/assets/buttonDown.gif
Binary files differ
diff --git a/tourdeflexmodules/src/mx/controls/assets/buttonOver.gif b/tourdeflexmodules/src/mx/controls/assets/buttonOver.gif
new file mode 100755
index 0000000..9c66b81
--- /dev/null
+++ b/tourdeflexmodules/src/mx/controls/assets/buttonOver.gif
Binary files differ
diff --git a/tourdeflexmodules/src/mx/controls/assets/buttonUp.gif b/tourdeflexmodules/src/mx/controls/assets/buttonUp.gif
new file mode 100755
index 0000000..36dfb34
--- /dev/null
+++ b/tourdeflexmodules/src/mx/controls/assets/buttonUp.gif
Binary files differ
diff --git a/tourdeflexmodules/src/mx/controls/assets/flexinstaller.mp4 b/tourdeflexmodules/src/mx/controls/assets/flexinstaller.mp4
new file mode 100644
index 0000000..8c877c4
--- /dev/null
+++ b/tourdeflexmodules/src/mx/controls/assets/flexinstaller.mp4
Binary files differ
diff --git a/tourdeflexmodules/src/mx/core/RepeaterExample.mxml b/tourdeflexmodules/src/mx/core/RepeaterExample.mxml
new file mode 100755
index 0000000..aec6605
--- /dev/null
+++ b/tourdeflexmodules/src/mx/core/RepeaterExample.mxml
@@ -0,0 +1,54 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the Repeater class. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
+        <![CDATA[
+		
+		    import mx.controls.Alert;
+  
+			[Bindable]
+			private var dp:Array = [1, 2, 3, 4, 5, 6, 7, 8, 9];    
+			
+        ]]>
+    </fx:Script>
+
+    <mx:Panel title="Repeater Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+  
+        <mx:Text width="100%" 
+            text="Use the Repeater class to create 9 Button controls in a 3 by 3 Tile container."/>
+
+        <mx:Tile direction="horizontal" borderStyle="inset" 
+            horizontalGap="10" verticalGap="15"
+            paddingLeft="10" paddingTop="10" paddingBottom="10" paddingRight="10">
+        
+            <mx:Repeater id="rp" dataProvider="{dp}">
+                <mx:Button height="49" width="50" 
+                    label="{String(rp.currentItem)}" 
+                    click="Alert.show(String(event.currentTarget.getRepeaterItem()) + ' pressed')"/>
+            </mx:Repeater>    
+        </mx:Tile>
+  
+    </mx:Panel>  
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/core/SimpleApplicationExample.mxml b/tourdeflexmodules/src/mx/core/SimpleApplicationExample.mxml
new file mode 100755
index 0000000..8585317
--- /dev/null
+++ b/tourdeflexmodules/src/mx/core/SimpleApplicationExample.mxml
@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the Application container. -->
+
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+	paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+    backgroundColor="0xCCCCCC" borderStyle="solid"
+    horizontalAlign="center" verticalAlign="middle"
+    applicationComplete="appComplete()">
+
+     <fx:Script>
+        <![CDATA[
+            
+            // Event handlers for the components.
+            private function appComplete():void {
+                myTA.text+="Application creation complete" + "\n";
+            }
+
+            private function panelCreationComplete():void {
+                myTA.text+="Panel creation complete" + "\n";
+            }
+
+            private function textAreaCreationComplete():void {
+                myTA.text+="\n" + "TextArea creation complete" + "\n";
+            }
+        ]]>
+    </fx:Script>
+
+    <mx:ApplicationControlBar dock="true">
+        <mx:Button label="Set Grey Solid Fill" 
+            click="this.setStyle('backgroundColor', 0xCCCCCC)"/>
+        <mx:Button label="Set Blue Solid Fill" 
+            click="this.setStyle('backgroundColor', 0x66CCFF)"/>
+    </mx:ApplicationControlBar> 
+
+    <mx:Panel title="Application Container Example" backgroundColor="0x9CB0BA"
+        width="75%" height="75%" 
+        creationComplete="panelCreationComplete()">
+        
+        <mx:TextArea id="myTA" height="100%" width="100%" 
+            text="Event order: "
+            creationComplete="textAreaCreationComplete()"/>
+
+    </mx:Panel>
+</mx:Application>
diff --git a/tourdeflexmodules/src/mx/effects/AddItemActionEffectExample.mxml b/tourdeflexmodules/src/mx/effects/AddItemActionEffectExample.mxml
new file mode 100755
index 0000000..c1cbee2
--- /dev/null
+++ b/tourdeflexmodules/src/mx/effects/AddItemActionEffectExample.mxml
@@ -0,0 +1,103 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
+        <![CDATA[
+            import mx.effects.easing.Elastic;
+            import mx.collections.ArrayCollection;
+            
+            [Bindable]
+            private var myDP:ArrayCollection = new ArrayCollection(
+                ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P']);
+            
+            private function deleteItem():void {
+                // As each item is removed, the index of the other items changes.
+                // So first get the items to delete, then determine their indices
+                // as you remove them.
+                var toRemove:Array = [];
+                for (var i:int = 0; i < tlist0.selectedItems.length; i++)
+                    toRemove.push(tlist0.selectedItems[i]);
+                for (i = 0; i < toRemove.length; i++)
+                    myDP.removeItemAt(myDP.getItemIndex(toRemove[i]));
+            }
+
+            private var zcount:int = 0;
+            private function addItem():void {
+                // Always add the new item after the third item,
+                // or after the last item if the length is less than 3.
+                myDP.addItemAt("Z"+zcount++,Math.min(3,myDP.length));
+            }                        
+        ]]>
+    </fx:Script>
+
+	<fx:Declarations>
+	    <!-- Define a custom data effect as a Sequence effect. -->
+	    <mx:Sequence id="itemsChangeEffect1">
+	        <mx:Blur 
+	            blurYTo="12" blurXTo="12" 
+	            duration="300" 
+	            perElementOffset="150"
+	            filter="removeItem"/>
+	        <mx:Parallel>
+	            <mx:Move 
+	                duration="750" 
+	                easingFunction="{Elastic.easeOut}" 
+	                perElementOffset="20"/>
+	            <mx:RemoveItemAction 
+	                startDelay="400" 
+	                filter="removeItem"/>
+	            <mx:AddItemAction  
+	                startDelay="400" 
+	                filter="addItem"/>
+	            <mx:Blur 
+	                startDelay="410" 
+	                blurXFrom="18" blurYFrom="18" blurXTo="0" blurYTo="0" 
+	                duration="300" 
+	                filter="addItem"/>
+	        </mx:Parallel>
+	    </mx:Sequence>   
+	</fx:Declarations>
+
+    <mx:Panel title="AddItemEffect/RemoveItemEffect Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <!-- This TileList uses a custom data change effect -->
+        <mx:TileList id="tlist0" 
+            height="100%" width="100%" 
+            fontSize="18" fontWeight="bold"
+            columnCount="4" rowCount="4" 
+            direction="horizontal" 
+            dataProvider="{myDP}" 
+            allowMultipleSelection="true" 
+            offscreenExtraRowsOrColumns="4" 
+            itemsChangeEffect="{itemsChangeEffect1}"/>
+    
+        <mx:Button 
+            label="Delete selected item(s)" 
+            click="deleteItem()"/>
+        <mx:Button 
+            label="Add item" 
+            click="addItem()"/>
+        
+    </mx:Panel>         
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/effects/AnimatePropertyEffectExample.mxml b/tourdeflexmodules/src/mx/effects/AnimatePropertyEffectExample.mxml
new file mode 100755
index 0000000..abc7fd2
--- /dev/null
+++ b/tourdeflexmodules/src/mx/effects/AnimatePropertyEffectExample.mxml
@@ -0,0 +1,42 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the AnimateProperty effect. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+	<fx:Declarations>
+	    <mx:Sequence id="animateScaleXUpDown" >
+	        <mx:AnimateProperty property="scaleX" fromValue="1" toValue="1.5" duration="1000" />
+	        <mx:AnimateProperty property="scaleX" fromValue="1.5" toValue="1" duration="1000" />	
+	    </mx:Sequence>
+	</fx:Declarations>
+
+    <mx:Panel title="AnimateProperty Effect Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <mx:Text width="100%" 
+            text="Click on the image to use the AnimateProperty effect with the scaleX property."/>
+
+        <mx:Image id="flex" source="@Embed(source='assets/ApacheFlexLogo.png')"
+            mouseDownEffect="{animateScaleXUpDown}" width="50%" height="50%" />
+
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/effects/BlurEffectExample.mxml b/tourdeflexmodules/src/mx/effects/BlurEffectExample.mxml
new file mode 100755
index 0000000..9fd88bb
--- /dev/null
+++ b/tourdeflexmodules/src/mx/effects/BlurEffectExample.mxml
@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the Blur effect. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+	<fx:Declarations>
+	    <mx:Blur id="blurImage" duration="1000" 
+	        blurXFrom="0.0" blurXTo="10.0" 
+	        blurYFrom="0.0" blurYTo="10.0"/>
+	    <mx:Blur id="unblurImage" duration="1000" 
+	        blurXFrom="10.0" blurXTo="0.0" 
+	        blurYFrom="10.0" blurYTo="0.0"/>
+	</fx:Declarations>
+
+    <mx:Panel title="Blur Effect Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <mx:Text width="100%" 
+            text="Click and hold the mouse on the image to see blurImage effect. Release the mouse to see the unblurImage effect."/>
+
+        <mx:Image id="flex" source="@Embed(source='assets/ApacheFlexLogo.png')"
+			width="50%" height="50%"
+            mouseDownEffect="{blurImage}" 
+            mouseUpEffect="{unblurImage}"/>
+
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/effects/CompositeEffectExample.mxml b/tourdeflexmodules/src/mx/effects/CompositeEffectExample.mxml
new file mode 100755
index 0000000..a20205a
--- /dev/null
+++ b/tourdeflexmodules/src/mx/effects/CompositeEffectExample.mxml
@@ -0,0 +1,101 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the Composite effect. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
+        <![CDATA[
+
+    	import mx.effects.Move;
+    	import mx.effects.Sequence;
+    	import mx.effects.Parallel;
+	
+    	private var movesequenceA:Move;
+    	private var movesequenceB:Move;
+    	private var moveparallelbutton:Move;
+    	private var sequenceAB:Sequence;
+    	private var parallelAB:Parallel;
+
+   	private function startEffect(ax:Number, ay:Number, bx:Number, by:Number):void
+   	{
+            movesequenceA= new Move(a);
+            movesequenceB= new Move(b);
+            moveparallelbutton= new Move(button);
+            sequenceAB= new Sequence();
+            parallelAB= new Parallel();
+            
+            sequenceAB.addChild(movesequenceA);
+            sequenceAB.addChild(movesequenceB);
+            
+            parallelAB.addChild(moveparallelbutton);
+        
+            moveparallelbutton.xTo=0;
+	        moveparallelbutton.xFrom= 245;
+            moveparallelbutton.yFrom=85;
+            moveparallelbutton.duration= 4000;
+
+            movesequenceA.xTo= ax;
+            movesequenceA.xBy= 200;
+            movesequenceA.yTo= ay;
+            movesequenceA.yBy= 175;
+            movesequenceA.duration= 2000;
+            movesequenceB.yFrom =175;
+            movesequenceB.xTo= bx;
+            movesequenceB.xBy= 200;
+            movesequenceB.yTo= by;
+            movesequenceB.yBy= 200;
+            movesequenceB.duration= 2000;
+
+            sequenceAB.play();
+            parallelAB.play();
+        }
+        ]]>
+    </fx:Script>
+    
+    <mx:Panel title="Composite Effect"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+		
+	    <mx:Canvas id="canvas" width="100%" height="100%">
+	
+	        <mx:Label id="a" color="#009966" text="Sequence 1" 
+	            height="{(canvas.height-20)/2}" 
+	            width="{(canvas.width-20)/2}"
+	            effectStart=" a.text= 'sequence 1 Running'"
+	            effectEnd="a.text='sequence 1 ended!!!' "/>
+	
+	        <mx:Label id="b" x="0" y="175" color="#00CCFF"  
+	            text="Sequence 2" 
+	            height="{(canvas.height-20)/2}"
+	            width="{(canvas.width-20)/2}" 
+	            effectStart=" b.text= 'sequence 2 Running'"
+	            effectEnd="b.text='sequence 2 ended!!'" />
+	
+	        <mx:Button id="button"  x="245" y="85"
+	            label="Start effect" 
+	            click="startEffect(200,175,200,0)"
+	            effectStart="button.label='parallel effect running'"
+	            effectEnd="button.label='parallel effect ended!!'"/>
+	
+	    </mx:Canvas>
+  
+  	</mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/effects/DefaultListEffectExample.mxml b/tourdeflexmodules/src/mx/effects/DefaultListEffectExample.mxml
new file mode 100755
index 0000000..b147c00
--- /dev/null
+++ b/tourdeflexmodules/src/mx/effects/DefaultListEffectExample.mxml
@@ -0,0 +1,80 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
+        <![CDATA[
+            import mx.effects.DefaultListEffect;
+            import mx.collections.ArrayCollection;
+            
+            [Bindable]
+            private var myDP:ArrayCollection = new ArrayCollection(
+                ['A','B','C','D','E','F','G','H']);
+            
+            private function deleteItem():void {
+                // As each item is removed, the index of the other items changes.
+                // So first get the items to delete, then determine their indices
+                // as you remove them.
+                var toRemove:Array = [];
+                for (var i:int = 0; i < list0.selectedItems.length; i++)
+                    toRemove.push(list0.selectedItems[i]);
+                for (i = 0; i < toRemove.length; i++)
+                    myDP.removeItemAt(myDP.getItemIndex(toRemove[i]));
+            }
+
+            private var zcount:int = 0;
+            private function addItem():void {
+                // Always add the new item after the third item,
+                // or after the last item if the length is less than 3.
+                myDP.addItemAt("Z"+zcount++,Math.min(3,myDP.length));
+            }            
+        ]]>
+    </fx:Script>
+
+	<fx:Declarations>
+	    <!-- Define an instance of the DefaultListEffect effect, 
+	         and set its fadeOutDuration and color properties. -->
+	    <mx:DefaultListEffect id="myDLE" 
+	        fadeOutDuration="1000" 
+	        color="0x0000ff"/>
+	</fx:Declarations>
+
+    <mx:Panel title="DefaultListEffect Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <mx:List id="list0" 
+            width="150"
+            dataProvider="{myDP}" 
+            variableRowHeight="true" 
+            fontSize="18" 
+            allowMultipleSelection="true" 
+            itemsChangeEffect="{myDLE}"/>
+    
+        <mx:Button 
+            label="Delete item" 
+            click="deleteItem()"/>
+        <mx:Button 
+            label="Add item" 
+            click="addItem()"/>
+
+    </mx:Panel> 
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/effects/DefaultTileListEffectExample.mxml b/tourdeflexmodules/src/mx/effects/DefaultTileListEffectExample.mxml
new file mode 100755
index 0000000..e75b4be
--- /dev/null
+++ b/tourdeflexmodules/src/mx/effects/DefaultTileListEffectExample.mxml
@@ -0,0 +1,82 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
+        <![CDATA[
+            import mx.effects.DefaultTileListEffect;
+            import mx.effects.easing.Elastic;
+            import mx.collections.ArrayCollection;
+            import mx.effects.Move;
+            
+            [Bindable]
+            private var myDP:ArrayCollection = new ArrayCollection(
+                ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P']);
+
+            private function deleteItems():void {
+                // As each item is removed, the index of the other items changes.
+                // So first get the items to delete, then determine their indices
+                // as you remove them.
+                var toRemove:Array = [];
+                for (var i:int = 0; i < tlist0.selectedItems.length; i++)
+                    toRemove.push(tlist0.selectedItems[i]);
+                for (i = 0; i < toRemove.length; i++)
+                    myDP.removeItemAt(myDP.getItemIndex(toRemove[i]));
+            }
+
+            private var zcount:int = 0;
+            private function addItems():void {
+                myDP.addItemAt("Z"+zcount++,Math.min(2,myDP.length));
+            }            
+        ]]>
+    </fx:Script>
+    
+	<fx:Declarations>
+	    <!-- Define an instance of the DefaultTileListEffect effect, 
+	         and set its moveDuration and color properties. -->
+	    <mx:DefaultTileListEffect id="myDTLE" 
+	        moveDuration="100" 
+	        color="0x0000ff"/>
+	</fx:Declarations>
+
+    <mx:Panel title="DefaultTileListEffect Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <mx:TileList id="tlist0" 
+            height="100%" width="100%" 
+            columnCount="4" rowCount="4" 
+            fontSize="18" fontWeight="bold"
+            direction="horizontal" 
+            dataProvider="{myDP}" 
+            allowMultipleSelection="true" 
+            offscreenExtraRowsOrColumns="2" 
+            itemsChangeEffect="{myDTLE}" />
+    
+        <mx:Button 
+            label="Delete selected item(s)" 
+            click="deleteItems()"/>
+        <mx:Button 
+            label="Add item" 
+            click="addItems()"/>
+
+    </mx:Panel> 
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/effects/DissolveEffectExample.mxml b/tourdeflexmodules/src/mx/effects/DissolveEffectExample.mxml
new file mode 100755
index 0000000..aaeb4eb
--- /dev/null
+++ b/tourdeflexmodules/src/mx/effects/DissolveEffectExample.mxml
@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the Dissolve effect. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+
+	<fx:Declarations>
+	    <mx:Dissolve id="dissolveOut" duration="1000" alphaFrom="1.0" alphaTo="0.0"/>
+	    <mx:Dissolve id="dissolveIn" duration="1000" alphaFrom="0.0" alphaTo="1.0"/>
+	</fx:Declarations>
+	
+    <mx:Panel title="Dissolve Effect Example" layout="horizontal"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <mx:VBox height="100%">
+            <mx:Label text="Apache Flex"  
+                fontSize="14"
+                visible="{cb1.selected}"
+                hideEffect="{dissolveOut}" showEffect="{dissolveIn}"/>
+            
+            <mx:Image source="@Embed(source='assets/ApacheFlexLogo.png')"
+				width="50%" height="50%"
+                visible="{cb1.selected}"
+                hideEffect="{dissolveOut}" showEffect="{dissolveIn}"/>
+        </mx:VBox>
+            
+        <mx:VBox height="100%" width="100%">
+            <mx:Text width="100%" 
+                text="Use the Dissolve effect to show or hide the text, image, and button."/>
+            
+                <mx:Spacer height="100%"/>
+            
+                <mx:Button label="Purchase" 
+                    visible="{cb1.selected}"
+                    hideEffect="{dissolveOut}" showEffect="{dissolveIn}"/>            
+        </mx:VBox>
+
+        <mx:ControlBar>
+            <mx:CheckBox id="cb1" label="visible" selected="true"/>
+        </mx:ControlBar>
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/effects/FadeEffectExample.mxml b/tourdeflexmodules/src/mx/effects/FadeEffectExample.mxml
new file mode 100755
index 0000000..3604688
--- /dev/null
+++ b/tourdeflexmodules/src/mx/effects/FadeEffectExample.mxml
@@ -0,0 +1,57 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the Fade effect. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+	
+	<fx:Style>
+	     @font-face {
+	        src:url("./assets/OpenSans-Regular.ttf");
+	        fontFamily: OpenSans;
+			embedAsCFF: false;
+	     }    
+	</fx:Style>
+    
+	<fx:Declarations>
+    	<mx:Fade id="fadeOut" duration="1000" alphaFrom="1.0" alphaTo="0.0"/>
+    	<mx:Fade id="fadeIn" duration="1000" alphaFrom="0.0" alphaTo="1.0"/>
+	</fx:Declarations>
+
+    <mx:Panel title="Fade Effect Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <mx:Text width="100%" 
+            text="Use the Fade effect to show or hide the text and image. Use an embedded font when applying the Fade effect to text."/>
+
+        <mx:Label text="Apache Flex"  
+            fontFamily="OpenSans" fontSize="14"
+            visible="{cb1.selected}"
+            hideEffect="{fadeOut}" showEffect="{fadeIn}"/>
+            
+        <mx:Image source="@Embed(source='assets/ApacheFlexLogo.png')" 
+			width="50%" height="50%"
+            visible="{cb1.selected}"
+            hideEffect="{fadeOut}" showEffect="{fadeIn}"/>
+            
+        <mx:CheckBox id="cb1" label="visible" selected="true"/>
+
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/effects/GlowEffectExample.mxml b/tourdeflexmodules/src/mx/effects/GlowEffectExample.mxml
new file mode 100755
index 0000000..8c2b308
--- /dev/null
+++ b/tourdeflexmodules/src/mx/effects/GlowEffectExample.mxml
@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the Glow effect. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+	<fx:Declarations>
+	    <mx:Glow id="glowImage" duration="1000" 
+	        alphaFrom="1.0" alphaTo="0.3" 
+	        blurXFrom="0.0" blurXTo="50.0" 
+	        blurYFrom="0.0" blurYTo="50.0" 
+	        color="0x00FF00"/>
+	    <mx:Glow id="unglowImage" duration="1000" 
+	        alphaFrom="0.3" alphaTo="1.0" 
+	        blurXFrom="50.0" blurXTo="0.0" 
+	        blurYFrom="50.0" blurYTo="0.0" 
+	        color="0x0000FF"/>
+	</fx:Declarations>
+
+    <mx:Panel title="Glow Effect Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+		
+        <mx:Text width="100%"
+            text="Click and hold the mouse on the image to see glowImage effect. Release the mouse to see unglowImage effect."/>
+            
+        <mx:Image source="@Embed(source='assets/ApacheFlexLogo.png')"
+			width="50%" height="50%"
+            mouseDownEffect="{glowImage}" 
+            mouseUpEffect="{unglowImage}"/>
+        
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/effects/IrisEffectExample.mxml b/tourdeflexmodules/src/mx/effects/IrisEffectExample.mxml
new file mode 100755
index 0000000..e29ef27
--- /dev/null
+++ b/tourdeflexmodules/src/mx/effects/IrisEffectExample.mxml
@@ -0,0 +1,44 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the Iris effect. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+	<fx:Declarations>
+    	<mx:Iris id="irisOut" duration="1000" showTarget="true"/>
+    	<mx:Iris id="irisIn" duration="1000" showTarget="false"/>
+	</fx:Declarations>
+
+    <mx:Panel title="Iris Effect Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <mx:Text width="100%" 
+            text="Use the Iris effect to show or hide the logo."/>
+
+        <mx:Image id="flex" source="@Embed(source='assets/ApacheFlexLogo.png')"  
+			width="50%" height="50%"
+            visible="{cb1.selected}"
+            showEffect="{irisIn}" hideEffect="{irisOut}"/>
+
+        <mx:CheckBox id="cb1" label="visible" selected="true"/>
+
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/effects/MoveEffectExample.mxml b/tourdeflexmodules/src/mx/effects/MoveEffectExample.mxml
new file mode 100755
index 0000000..ede9fa3
--- /dev/null
+++ b/tourdeflexmodules/src/mx/effects/MoveEffectExample.mxml
@@ -0,0 +1,54 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the Move effect. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
+        <![CDATA[
+
+            private function moveImage():void {
+                myMove.end();
+                myMove.xTo=mouseX-60; 
+                myMove.play();
+            }
+      ]]>
+    </fx:Script>
+
+	<fx:Declarations>
+    	<mx:Move id="myMove" target="{img}"/>
+	</fx:Declarations>
+
+    <mx:Panel title="Move Effect Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+       <mx:Text width="100%" 
+           text="Click anywhere on the canvas to move the logo horizontally to that position"/>
+
+        <mx:Canvas id="canvas" width="100%" height="100%" mouseDown="moveImage()">
+
+            <mx:Image id="img" source="@Embed(source='assets/ApacheFlexLogo.png')"
+				width="50%" height="50%"/>
+
+        </mx:Canvas>
+    
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/effects/ParallelEffectExample.mxml b/tourdeflexmodules/src/mx/effects/ParallelEffectExample.mxml
new file mode 100755
index 0000000..3456ce4
--- /dev/null
+++ b/tourdeflexmodules/src/mx/effects/ParallelEffectExample.mxml
@@ -0,0 +1,54 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the Parallel effect. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+	<fx:Declarations>
+	   <mx:Parallel id="expand" target="{img}">
+	        <mx:Move xTo="{canvas.width/2 - 50}" yTo="{canvas.height/2 - 100}"/>
+	        <mx:Resize widthTo="100" heightTo="200"/>
+	    </mx:Parallel>
+	
+	    <mx:Parallel id="contract" target="{img}">
+	        <mx:Move xTo="20" yTo="20"/>
+	        <mx:Resize widthTo="30" heightTo="60"/>
+	    </mx:Parallel>
+	</fx:Declarations>
+
+    <mx:Panel title="Parallel Effect Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <mx:Text width="100%" 
+            text="Use the Button controls to move and resize the logo in parallel."/>
+
+        <mx:Canvas id="canvas" width="100%" height="100%">
+            <mx:Image id="img" x="20" y="20" width="30" height="60"
+                source="@Embed(source='assets/ApacheFlexLogo.png')"/>
+        </mx:Canvas>
+
+        <mx:ControlBar>
+            <mx:Button label="Expand" click="expand.end(); expand.play()"/>
+            <mx:Button label="Contract" click="contract.end(); contract.play()"/>
+        </mx:ControlBar>
+
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/effects/PauseEffectExample.mxml b/tourdeflexmodules/src/mx/effects/PauseEffectExample.mxml
new file mode 100755
index 0000000..8b12112
--- /dev/null
+++ b/tourdeflexmodules/src/mx/effects/PauseEffectExample.mxml
@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the Pause effect. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
+        <![CDATA[
+            import mx.effects.easing.*;                   
+        ]]>
+    </fx:Script>
+
+	<fx:Declarations>
+	    <mx:Sequence id="movePauseMove">
+	        <mx:Move xBy="150" duration="2000" easingFunction="Bounce.easeOut"/>
+	        <mx:Pause duration="2000"/>
+	        <mx:Move xBy="-150" duration="2000" easingFunction="Bounce.easeIn"/>
+	    </mx:Sequence>
+	</fx:Declarations>
+
+    <mx:Panel title="Pause Effect Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <mx:Text width="100%" 
+		    text="Click the logo to start the Sequence effect. The effect pauses for 2 seconds between moves."/>
+
+        <mx:Image source="@Embed(source='assets/ApacheFlexLogo.png')"
+			width="50%" height="50%"
+            mouseDownEffect="{movePauseMove}"/>
+
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/effects/ResizeEffectExample.mxml b/tourdeflexmodules/src/mx/effects/ResizeEffectExample.mxml
new file mode 100755
index 0000000..e936e6d
--- /dev/null
+++ b/tourdeflexmodules/src/mx/effects/ResizeEffectExample.mxml
@@ -0,0 +1,45 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the Resize effect. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+	<fx:Declarations>
+   		<mx:Resize id="expand" target="{img}" widthTo="100" heightTo="200"/>
+    	<mx:Resize id="contract" target="{img}" widthTo="30" heightTo="60"/>
+	</fx:Declarations>
+
+    <mx:Panel title="Resize Effect Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <mx:Text width="100%" 
+            text="Use the Button controls to resize the image."/>
+
+        <mx:Image id="img" width="30" height="60"
+            source="@Embed(source='assets/ApacheFlexLogo.png')"/>
+
+        <mx:ControlBar>
+            <mx:Button label="Expand" click="expand.end(); expand.play()"/>
+            <mx:Button label="Contract" click="contract.end(); contract.play()"/>
+        </mx:ControlBar>
+
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/effects/RotateEffectExample.mxml b/tourdeflexmodules/src/mx/effects/RotateEffectExample.mxml
new file mode 100755
index 0000000..08f2f89
--- /dev/null
+++ b/tourdeflexmodules/src/mx/effects/RotateEffectExample.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.
+  -->
+
+<!-- Simple example to demonstrate the Rotate effect. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
+        <![CDATA[
+            [Bindable]
+            public var angle:int=0;
+
+            private function rotateImage():void {
+                rotate.end();
+                angle += 45;
+                rotate.play();
+            }
+      ]]>
+    </fx:Script>
+
+	<fx:Style>
+	     @font-face {
+	        src:url("./assets/OpenSans-Regular.ttf");
+	        fontFamily: OpenSans;
+			embedAsCFF: false;
+	     }    
+	</fx:Style>
+
+	<fx:Declarations>
+    	<mx:Rotate id="rotate" angleFrom="{angle-45}" angleTo="{angle}" target="{myVB}"/>
+	</fx:Declarations>
+
+    <mx:Panel title="Rotate Effect Example" layout="horizontal"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <mx:VBox id="myVB" width="50%" horizontalAlign="center">
+            <mx:Label text="Apache Flex"  
+                fontFamily="OpenSans" fontSize="14"/>
+
+            <mx:Image id="img"
+				width="50%" height="50%"
+                source="@Embed(source='assets/ApacheFlexLogo.png')"/>
+        </mx:VBox>
+
+        <mx:Text width="50%" 
+            text="Click the button to rotate the image 45 degrees. Use an embedded font when applying the Rotate effect to text."/>
+
+        <mx:ControlBar>
+            <mx:Button label="Rotate 45 Degrees" click="rotateImage()"/>
+        </mx:ControlBar>
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/effects/SequenceEffectExample.mxml b/tourdeflexmodules/src/mx/effects/SequenceEffectExample.mxml
new file mode 100755
index 0000000..7db2617
--- /dev/null
+++ b/tourdeflexmodules/src/mx/effects/SequenceEffectExample.mxml
@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the Sequence effect. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
+        <![CDATA[
+            import mx.effects.easing.*;                   
+        ]]>
+    </fx:Script>
+
+	<fx:Declarations>
+	    <mx:Sequence id="movePauseMove">
+	        <mx:Move xBy="150" duration="2000" easingFunction="Bounce.easeOut"/>
+	        <mx:Pause duration="2000"/>
+	        <mx:Move xBy="-150" duration="2000" easingFunction="Bounce.easeIn"/>
+	    </mx:Sequence>
+	</fx:Declarations>
+
+    <mx:Panel title="Sequence Effect Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <mx:Text width="100%" 
+		    text="Click the logo to start the Sequence effect. The effect pauses for 2 seconds between moves."/>
+
+        <mx:Image source="@Embed(source='assets/ApacheFlexLogo.png')" 
+			width="50%" height="50%"
+            mouseDownEffect="{movePauseMove}"/>
+
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/effects/SimpleEffectExample.mxml b/tourdeflexmodules/src/mx/effects/SimpleEffectExample.mxml
new file mode 100755
index 0000000..811868b
--- /dev/null
+++ b/tourdeflexmodules/src/mx/effects/SimpleEffectExample.mxml
@@ -0,0 +1,70 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the Effect class. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
+        <![CDATA[
+
+            import mx.controls.Alert;
+
+            // Event handler for the effectEnd event.            
+            private function endEffectHandler():void {
+                Alert.show("Effect Ended!");
+            }
+
+            // Event handler for the reset button.            
+            private function resetHandler():void {
+                expand.end(); 
+                img.width=30; 
+                img.height=60; 
+                button1.enabled=true;
+            }
+        ]]>
+    </fx:Script>
+
+
+	<fx:Declarations>
+	    <mx:Resize id="expand" target="{img}" widthTo="100" heightTo="200" 
+	        duration="10000" effectEnd="endEffectHandler()"/>
+	</fx:Declarations>
+
+    <mx:Panel title="Resize Effect Example" 
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <mx:Text width="100%" 
+            text="Use the Button controls to control the Resize effect."/>
+
+        <mx:Image id="img" width="30" height="60"
+            source="@Embed(source='assets/ApacheFlexLogo.png')"/>
+     
+        <mx:ControlBar>
+            <mx:Button id="button1" label="Start" click="expand.play(); button1.enabled=false"/>
+            <mx:Button label="Pause" click="expand.pause()"/>
+            <mx:Button label="Resume" click="expand.resume()"/>
+            <mx:Button label="Reverse" click="expand.reverse()"/>
+            <mx:Button label="End" click="expand.end()"/>
+            <mx:Button label="Reset" click="resetHandler()"/>
+        </mx:ControlBar>
+        
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/effects/SimpleTweenEffectExample.mxml b/tourdeflexmodules/src/mx/effects/SimpleTweenEffectExample.mxml
new file mode 100755
index 0000000..55c20fc
--- /dev/null
+++ b/tourdeflexmodules/src/mx/effects/SimpleTweenEffectExample.mxml
@@ -0,0 +1,76 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the TweenEffect class. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
+        <![CDATA[
+        
+            import mx.events.TweenEvent;
+
+            // Event handler for the tweenUpdate and tweenEnd effects.            
+            private function tweenUpdateHandler(event:TweenEvent):void {
+                // Access current width of the image.
+                currentWidth.text="Current width (in pixels): " + String(event.value[0]);
+            }
+
+            // Event handler for the reset button.            
+            private function resetHandler():void {
+                expand.end(); 
+                img.width=30; 
+                currentWidth.text="Current width (in pixels): 30";                
+                img.height=60; 
+                button1.enabled=true;
+            }
+        ]]>
+    </fx:Script>
+
+	<fx:Declarations>
+	    <mx:Resize id="expand" target="{img}" widthTo="100" heightTo="200" 
+	        duration="10000" 
+	        tweenUpdate="tweenUpdateHandler(event)" 
+	        tweenEnd="tweenUpdateHandler(event)"/>
+	</fx:Declarations>
+
+    <mx:Panel title="Resize Effect Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <mx:Text width="100%" 
+            text="Use the Button controls to resize the image."/>
+
+        <mx:HBox width="100%">
+            <mx:Image id="img" width="30" height="60"
+                source="@Embed(source='assets/ApacheFlexLogo.png')"/>
+            <mx:Text id="currentWidth" height="20" width="100%"/>     
+        </mx:HBox>
+            
+        <mx:ControlBar>
+            <mx:Button id="button1" label="Start" click="expand.play(); button1.enabled=false"/>
+            <mx:Button label="Pause" click="expand.pause()"/>
+            <mx:Button label="Resume" click="expand.resume()"/>
+            <mx:Button label="Reverse" click="expand.reverse()"/>
+            <mx:Button label="End" click="expand.end()"/>
+            <mx:Button label="Reset" click="resetHandler()"/>
+        </mx:ControlBar>
+        
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/effects/SoundEffectExample.mxml b/tourdeflexmodules/src/mx/effects/SoundEffectExample.mxml
new file mode 100755
index 0000000..e93d095
--- /dev/null
+++ b/tourdeflexmodules/src/mx/effects/SoundEffectExample.mxml
@@ -0,0 +1,40 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the SoundEffect effect. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+	<fx:Declarations>
+    	<mx:SoundEffect id="mySounds" source="@Embed(source='./assets/ping.mp3')"/>
+	</fx:Declarations>
+
+    <mx:Panel title="Sound Effect Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <mx:Label width="100%" 
+            text="Click on the logo to hear the sound effect."/>
+
+        <mx:Image id="flex" source="@Embed(source='assets/ApacheFlexLogo.png')"
+			width="50%" height="50%"
+            mouseDownEffect="{mySounds}"/>
+
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/effects/WipeDownExample.mxml b/tourdeflexmodules/src/mx/effects/WipeDownExample.mxml
new file mode 100755
index 0000000..6fd93b9
--- /dev/null
+++ b/tourdeflexmodules/src/mx/effects/WipeDownExample.mxml
@@ -0,0 +1,49 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the WipeDown effect. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+	<fx:Declarations>
+	    <mx:WipeDown id="wipeOut" duration="1000"/>
+	    <mx:WipeDown id="wipeIn" duration="1000"/>
+	</fx:Declarations>
+
+    <mx:Panel title="WipeDown Effect Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <mx:Text width="100%" 
+            text="Use the WipeDown effect to show or hide the text and image."/>
+
+        <mx:Label text="Apache Flex"  
+            fontSize="14"
+            visible="{cb1.selected}"
+            hideEffect="{wipeOut}" showEffect="{wipeIn}"/>
+			
+        <mx:Image source="@Embed(source='assets/ApacheFlexLogo.png')" 
+			width="50%" height="50%"
+            visible="{cb1.selected}"
+            hideEffect="{wipeOut}" showEffect="{wipeIn}"/>
+            
+        <mx:CheckBox id="cb1" label="visible" selected="true"/>
+
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/effects/WipeLeftExample.mxml b/tourdeflexmodules/src/mx/effects/WipeLeftExample.mxml
new file mode 100755
index 0000000..3ee0bf5
--- /dev/null
+++ b/tourdeflexmodules/src/mx/effects/WipeLeftExample.mxml
@@ -0,0 +1,49 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the WipeLeft effect. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+	<fx:Declarations>
+    	<mx:WipeLeft id="wipeOut" duration="1000"/>
+    	<mx:WipeLeft id="wipeIn" duration="1000"/>
+	</fx:Declarations>
+
+    <mx:Panel title="WipeLeft Effect Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <mx:Text width="100%" 
+            text="Use the WipeLeft effect to show or hide the text and image."/>
+
+        <mx:Label text="Apache Flex"  
+            fontSize="14"
+            visible="{cb1.selected}"
+            hideEffect="{wipeOut}" showEffect="{wipeIn}"/>
+			
+        <mx:Image source="@Embed(source='assets/ApacheFlexLogo.png')"
+			width="50%" height="50%"
+            visible="{cb1.selected}"
+            hideEffect="{wipeOut}" showEffect="{wipeIn}"/>
+            
+        <mx:CheckBox id="cb1" label="visible" selected="true"/>
+
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/effects/WipeRightExample.mxml b/tourdeflexmodules/src/mx/effects/WipeRightExample.mxml
new file mode 100755
index 0000000..8dc8e72
--- /dev/null
+++ b/tourdeflexmodules/src/mx/effects/WipeRightExample.mxml
@@ -0,0 +1,49 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the WipeRight effect. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+	<fx:Declarations>
+    	<mx:WipeRight id="wipeOut" duration="1000"/>
+    	<mx:WipeRight id="wipeIn" duration="1000"/>
+	</fx:Declarations>
+
+    <mx:Panel title="WipeRight Effect Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <mx:Text width="100%" 
+            text="Use the WipeRight effect to show or hide the text and image."/>
+
+        <mx:Label text="Apache Flex"  
+            fontSize="14"
+            visible="{cb1.selected}"
+            hideEffect="{wipeOut}" showEffect="{wipeIn}"/>
+			
+        <mx:Image source="@Embed(source='assets/ApacheFlexLogo.png')"
+			width="50%" height="50%"
+            visible="{cb1.selected}"
+            hideEffect="{wipeOut}" showEffect="{wipeIn}"/>
+            
+        <mx:CheckBox id="cb1" label="visible" selected="true"/>
+
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/effects/WipeUpExample.mxml b/tourdeflexmodules/src/mx/effects/WipeUpExample.mxml
new file mode 100755
index 0000000..acc2047
--- /dev/null
+++ b/tourdeflexmodules/src/mx/effects/WipeUpExample.mxml
@@ -0,0 +1,49 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the WipeUp effect. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+	<fx:Declarations>
+    	<mx:WipeUp id="wipeOut" duration="1000"/>
+    	<mx:WipeUp id="wipeIn" duration="1000"/>
+	</fx:Declarations>
+
+    <mx:Panel title="WipeUp Effect Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <mx:Text width="100%" 
+            text="Use the WipeUp effect to show or hide the text and image."/>
+
+        <mx:Label text="Apache Flex"  
+            fontSize="14"
+            visible="{cb1.selected}"
+            hideEffect="{wipeOut}" showEffect="{wipeIn}"/>
+			
+        <mx:Image source="@Embed(source='assets/ApacheFlexLogo.png')"
+			width="50%" height="50%"
+            visible="{cb1.selected}"
+            hideEffect="{wipeOut}" showEffect="{wipeIn}"/>
+            
+        <mx:CheckBox id="cb1" label="visible" selected="true"/>
+
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/effects/ZoomEffectExample.mxml b/tourdeflexmodules/src/mx/effects/ZoomEffectExample.mxml
new file mode 100755
index 0000000..95716bf
--- /dev/null
+++ b/tourdeflexmodules/src/mx/effects/ZoomEffectExample.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.
+  -->
+
+<!-- Simple example to demonstrate the Zoom effect. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
+        <![CDATA[		
+            import flash.events.MouseEvent;
+		
+            public function doZoom(event:MouseEvent):void {
+                if (zoomAll.isPlaying) {
+                    zoomAll.reverse();
+                }
+                else {
+                    // If this is a ROLL_OUT event, play the effect backwards. 
+                    // If this is a ROLL_OVER event, play the effect forwards.
+                    zoomAll.play([event.target], event.type == MouseEvent.ROLL_OUT ? true : false);
+                }
+            }
+        ]]>	
+    </fx:Script>
+
+	<fx:Declarations>
+   		<mx:Zoom id="zoomAll" zoomWidthTo="0.5" zoomHeightTo="0.5" zoomWidthFrom="0.25" zoomHeightFrom="0.25"  />
+	</fx:Declarations>
+	
+    <mx:Panel title="Zoom Effect Example"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <mx:Text width="100%"
+            text="Move the mouse over the image to enlarge it. Move the mouse off of the image to shrink it."/>
+
+        <mx:Image id="img"
+            source="@Embed(source='assets/ApacheFlexLogo.png')"
+            scaleX="0.25" scaleY="0.25"
+            rollOver="doZoom(event)"
+            rollOut="doZoom(event)"/>
+
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/effects/assets/ApacheFlexLogo.png b/tourdeflexmodules/src/mx/effects/assets/ApacheFlexLogo.png
new file mode 100644
index 0000000..4ff037f
--- /dev/null
+++ b/tourdeflexmodules/src/mx/effects/assets/ApacheFlexLogo.png
Binary files differ
diff --git a/tourdeflexmodules/src/mx/effects/assets/OpenSans-Regular.ttf b/tourdeflexmodules/src/mx/effects/assets/OpenSans-Regular.ttf
new file mode 100644
index 0000000..db43334
--- /dev/null
+++ b/tourdeflexmodules/src/mx/effects/assets/OpenSans-Regular.ttf
Binary files differ
diff --git a/tourdeflexmodules/src/mx/effects/assets/ping.mp3 b/tourdeflexmodules/src/mx/effects/assets/ping.mp3
new file mode 100644
index 0000000..2eb90ea
--- /dev/null
+++ b/tourdeflexmodules/src/mx/effects/assets/ping.mp3
Binary files differ
diff --git a/tourdeflexmodules/src/mx/formatters/CurrencyFormatterExample.mxml b/tourdeflexmodules/src/mx/formatters/CurrencyFormatterExample.mxml
new file mode 100755
index 0000000..37a085c
--- /dev/null
+++ b/tourdeflexmodules/src/mx/formatters/CurrencyFormatterExample.mxml
@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the CurrencyFormatter. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
+        <![CDATA[
+
+              import mx.events.ValidationResultEvent;			
+              private var vResult:ValidationResultEvent;
+			
+              // Event handler to validate and format input.
+              private function Format():void {
+              
+                 	vResult = numVal.validate();
+
+    				if (vResult.type==ValidationResultEvent.VALID) {
+                        var temp:Number=Number(priceUS.text); 
+                        formattedUSPrice.text= usdFormatter.format(temp);
+                    }
+                    
+                    else {
+                       formattedUSPrice.text="";
+                    }
+              }
+        ]]>
+    </fx:Script>
+
+	<fx:Declarations>
+	    <mx:CurrencyFormatter id="usdFormatter" precision="2" 
+	        currencySymbol="$" decimalSeparatorFrom="."
+	        decimalSeparatorTo="." useNegativeSign="true" 
+	        useThousandsSeparator="true" alignSymbol="left"/>
+	
+	    <mx:NumberValidator id="numVal" source="{priceUS}" property="text" 
+	        allowNegative="true" domain="real"/>	
+	</fx:Declarations>
+
+    <mx:Panel title="CurrencyFormatter Example" height="100%" width="100%">
+
+        <mx:Form>
+            <mx:FormItem label="Enter U.S. dollar amount:">
+                <mx:TextInput id="priceUS" text="" width="50%"/>
+            </mx:FormItem>
+
+            <mx:FormItem label="Formatted amount: ">
+                <mx:TextInput id="formattedUSPrice" text="" width="50%" editable="false"/>
+            </mx:FormItem>
+
+            <mx:FormItem>
+                <mx:Button label="Validate and Format" click="Format()"/>
+            </mx:FormItem>
+        </mx:Form>
+
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/formatters/DateFormatterExample.mxml b/tourdeflexmodules/src/mx/formatters/DateFormatterExample.mxml
new file mode 100755
index 0000000..4442841
--- /dev/null
+++ b/tourdeflexmodules/src/mx/formatters/DateFormatterExample.mxml
@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the DateFormatter. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
+        <![CDATA[
+
+            import mx.events.ValidationResultEvent;			
+            private var vResult:ValidationResultEvent;
+
+            // Event handler to validate and format input.            
+            private function Format():void
+            {
+                vResult = dateVal.validate();
+                if (vResult.type==ValidationResultEvent.VALID) {
+                    formattedDate.text=dateFormatter.format(dob.text);
+                }
+              
+                else {
+                    formattedDate.text= "";
+                }
+            }
+        ]]>
+    </fx:Script>
+
+	<fx:Declarations>
+	    <mx:DateFormatter id="dateFormatter" formatString="month: MM, day: DD, year: YYYY"/>
+	
+	    <mx:DateValidator id="dateVal" source="{dob}" property="text" inputFormat="mm/dd/yyyy"/>
+	</fx:Declarations>
+	
+    <mx:Panel title="DateFormatter Example" height="100%" width="100%">
+
+        <mx:Form width="100%">
+            <mx:FormItem label="Enter date (mm/dd/yyyy):" width="100%">
+                <mx:TextInput id="dob" text=""/>
+            </mx:FormItem>
+
+            <mx:FormItem label="Formatted date: " width="100%">
+                <mx:TextInput id="formattedDate" text="" editable="false"/>
+            </mx:FormItem>
+
+            <mx:FormItem>
+                <mx:Button label="Validate and Format" click="Format()"/>
+            </mx:FormItem>
+        </mx:Form>
+
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/formatters/NumberFormatterExample.mxml b/tourdeflexmodules/src/mx/formatters/NumberFormatterExample.mxml
new file mode 100755
index 0000000..bc64f8e
--- /dev/null
+++ b/tourdeflexmodules/src/mx/formatters/NumberFormatterExample.mxml
@@ -0,0 +1,71 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate NumberFormatter. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
+        <![CDATA[
+
+          import mx.events.ValidationResultEvent;			
+          private var vResult:ValidationResultEvent;
+
+          // Event handler to validate and format input.            
+          private function Format():void
+          {
+             vResult = numVal.validate();
+			 if (vResult.type==ValidationResultEvent.VALID) {
+			 
+                formattedNumber.text= numberFormatter.format(inputVal.text);
+             }
+             
+             else {
+                formattedNumber.text= "";
+             }
+          }
+      ]]>      
+    </fx:Script>
+
+	<fx:Declarations>
+	    <mx:NumberFormatter id="numberFormatter" precision="4" 
+	        useThousandsSeparator="true" useNegativeSign="true"/>
+	
+	    <mx:NumberValidator id="numVal" source="{inputVal}" property="text" 
+	        allowNegative="true" domain="real"/>
+	</fx:Declarations>
+
+    <mx:Panel title="NumberFormatter Example" height="100%" width="100%">
+
+        <mx:Form>
+            <mx:FormItem label="Enter number:">
+                <mx:TextInput id="inputVal" text="" width="50%"/>
+            </mx:FormItem>
+
+            <mx:FormItem label="Formatted number (precision=4): ">
+                <mx:TextInput id="formattedNumber" editable="false" width="50%"/>
+            </mx:FormItem>
+
+            <mx:FormItem>
+                <mx:Button label="Validate and Format" click="Format()"/>
+            </mx:FormItem>
+        </mx:Form>
+        
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/formatters/PhoneFormatterExample.mxml b/tourdeflexmodules/src/mx/formatters/PhoneFormatterExample.mxml
new file mode 100755
index 0000000..2f7aa5b
--- /dev/null
+++ b/tourdeflexmodules/src/mx/formatters/PhoneFormatterExample.mxml
@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate PhoneFormatter. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
+        <![CDATA[
+                
+            import mx.events.ValidationResultEvent;			
+            private var vResult:ValidationResultEvent;
+
+            // Event handler to validate and format input.            
+            private function Format():void
+            {
+                vResult = pnVal.validate();
+                if (vResult.type==ValidationResultEvent.VALID) {
+                    formattedPhone.text= phoneFormatter.format(phone.text);
+                }
+              
+                else {
+                    formattedPhone.text= "";
+                }
+            }
+        ]]>
+    </fx:Script>
+
+	<fx:Declarations>
+	    <mx:PhoneFormatter id="phoneFormatter" 
+	        formatString="(###) ###-####" validPatternChars="#-() "/>
+	
+	    <mx:PhoneNumberValidator id="pnVal" source="{phone}" property="text" 
+	            allowedFormatChars=""/>
+	</fx:Declarations>
+
+    <mx:Panel title="PhoneFormatter Example" height="100%" width="100%">
+
+        <mx:Form>
+            <mx:FormItem label="Enter a 10-digit phone number:">
+                <mx:TextInput id="phone" text="" width="75%"/>
+            </mx:FormItem>
+
+            <mx:FormItem label="Formatted phone number: ">
+                <mx:TextInput id="formattedPhone" text="" width="75%" editable="false"/>
+            </mx:FormItem>
+
+            <mx:FormItem>
+                <mx:Button label="Validate and Format" click="Format()"/>
+            </mx:FormItem>
+        </mx:Form>
+
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/formatters/SimpleFormatterExample.mxml b/tourdeflexmodules/src/mx/formatters/SimpleFormatterExample.mxml
new file mode 100755
index 0000000..ea05724
--- /dev/null
+++ b/tourdeflexmodules/src/mx/formatters/SimpleFormatterExample.mxml
@@ -0,0 +1,68 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the Formatter class. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
+        <![CDATA[
+
+            // Event handler to format the input.            
+            private function Format():void
+            {
+                // The format() method returns the formatted String,
+                // or an empty String if there is an error.
+                var formattedVal:String = numberFormatter.format(inputVal.text);
+
+                if (formattedVal.length==0) {
+                    // If there is an error, the Format.error property 
+                    // contains the reason.
+                	formattedNumber.text=numberFormatter.error;
+                }
+                
+                else {
+                    formattedNumber.text=formattedVal;
+                }
+            }
+        ]]>
+    </fx:Script>
+
+	<fx:Declarations>
+    	<mx:NumberFormatter id="numberFormatter"/>
+	</fx:Declarations>
+
+    <mx:Panel title="NumberFormatter Example" height="100%" width="100%">
+
+        <mx:Form>
+            <mx:FormItem label="Enter number - a letter is invalid:">
+                <mx:TextInput id="inputVal" text="" width="75%"/>
+            </mx:FormItem>
+
+            <mx:FormItem label="Formatted number: ">
+                <mx:TextInput id="formattedNumber" editable="false" width="75%"/>
+            </mx:FormItem>
+
+            <mx:FormItem>
+                <mx:Button label="Validate and Format" click="Format()"/>
+            </mx:FormItem>
+        </mx:Form>
+  
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/formatters/SwitchSymbolFormatterExample.mxml b/tourdeflexmodules/src/mx/formatters/SwitchSymbolFormatterExample.mxml
new file mode 100755
index 0000000..fa6e6f9
--- /dev/null
+++ b/tourdeflexmodules/src/mx/formatters/SwitchSymbolFormatterExample.mxml
@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate SwitchSymbolFormatter. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
+        <![CDATA[
+        
+            import mx.formatters.SwitchSymbolFormatter;                
+            import mx.events.ValidationResultEvent;			
+            
+            private var vResult:ValidationResultEvent;
+
+            // Event handler to validate and format input.            
+            private function Format():void
+            {
+                vResult = scVal.validate();
+
+                if (vResult.type==ValidationResultEvent.VALID) {
+                    var switcher:SwitchSymbolFormatter=new SwitchSymbolFormatter('#');
+
+                    formattedSCNumber.text = 
+                        switcher.formatValue("Formatted Social Securty number: ###-##-#### ", scNum.text);
+                }
+
+                else {
+                    formattedSCNumber.text= "";
+                }
+            }
+        ]]>
+    </fx:Script>
+
+	<fx:Declarations>
+    	<mx:SocialSecurityValidator id="scVal" source="{scNum}" property="text"/>
+	</fx:Declarations>
+
+    <mx:Panel title="SwitchSymbolFormatter Example"
+			  paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+			  height="100%" width="100%">
+
+        <mx:Label text="Enter a 9 digit Social Security number with no separator characters:"/>
+        <mx:TextInput id="scNum" text="" maxChars="9" width="50%"/>
+
+        <mx:Button label="Validate and Format" click="Format()"/>
+        <mx:TextInput id="formattedSCNumber" editable="false" width="75%"/>
+
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/formatters/ZipCodeFormatterExample.mxml b/tourdeflexmodules/src/mx/formatters/ZipCodeFormatterExample.mxml
new file mode 100755
index 0000000..c38ccb6
--- /dev/null
+++ b/tourdeflexmodules/src/mx/formatters/ZipCodeFormatterExample.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.
+  -->
+
+<!-- Simple example to demonstrate ZipCodeFormatter. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
+        <![CDATA[
+
+            import mx.events.ValidationResultEvent;			
+            private var vResult:ValidationResultEvent;
+
+            // Event handler to validate and format input.
+            private function Format():void 
+            {
+                vResult = zcVal.validate();
+                
+                if (vResult.type==ValidationResultEvent.VALID) {
+                    formattedZipcode.text= zipFormatter.format(zip.text);
+                }
+                
+                else {
+                    formattedZipcode.text= "";
+                }
+            }
+        ]]>      
+    </fx:Script>
+
+	<fx:Declarations>
+    	<mx:ZipCodeFormatter id="zipFormatter" formatString="#####-####"/>
+
+    	<mx:ZipCodeValidator id="zcVal" source="{zip}" property="text" allowedFormatChars=""/>
+	</fx:Declarations>
+	
+    <mx:Panel title="ZipCodeFormatter Example" height="100%" width="100%">
+
+        <mx:Form width="100%">
+            <mx:FormItem label="Enter a 5 or 9 digit U.S. ZIP code:" width="100%">
+                <mx:TextInput id="zip" text=""/>
+            </mx:FormItem>
+
+            <mx:FormItem label="Formatted ZIP code: " width="100%">
+                <mx:TextInput id="formattedZipcode" text="" editable="false"/>
+            </mx:FormItem>
+
+            <mx:FormItem>
+                <mx:Button label="Validate and Format" click="Format()"/>
+            </mx:FormItem>
+        </mx:Form>
+
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/printing/AdvancedPrintDataGridExample.mxml b/tourdeflexmodules/src/mx/printing/AdvancedPrintDataGridExample.mxml
new file mode 100755
index 0000000..cb85d1f
--- /dev/null
+++ b/tourdeflexmodules/src/mx/printing/AdvancedPrintDataGridExample.mxml
@@ -0,0 +1,107 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- printing\ADGPrint.mxml -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
+        <![CDATA[
+            import mx.printing.*;
+            import mx.collections.ArrayCollection;
+            import mx.printing.PrintAdvancedDataGrid;
+                    
+            // Create a PrintJob instance.
+            private function doPrint():void {
+                // Create an instance of the FlexPrintJob class.
+                var printJob:FlexPrintJob = new FlexPrintJob();
+                
+                // Initialize the PrintAdvancedDataGrid control.
+                var printADG:PrintAdvancedDataGrid = 
+                    new PrintAdvancedDataGrid();
+                // Exclude the PrintAdvancedDataGrid control from layout.
+                printADG.includeInLayout = false;
+                printADG.source = adg;
+
+                // Add the print-specific control to the application.                
+                addChild(printADG);
+                
+                // Start the print job.
+                if (printJob.start() == false) {                
+                    // User cancelled print job.
+                    // Remove the print-specific control to free memory.                
+                    removeChild(printADG);
+                    return;
+                }
+
+                // Add the object to print. Do not scale it.
+                printJob.addObject(printADG, FlexPrintJobScaleType.NONE);
+
+                // Send the job to the printer.
+                printJob.send();
+
+                // Remove the print-specific control to free memory.                
+                removeChild(printADG);
+            }
+            
+            [Bindable]
+            private var dpHierarchy:ArrayCollection = new ArrayCollection([
+              {Region:"Southwest", children: [
+                 {Region:"Arizona", children: [ 
+                    {Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000}, 
+                    {Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000}]},  
+                 {Region:"Central California", children: [ 
+                    {Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000}]},  
+                 {Region:"Nevada", children: [ 
+                    {Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000}]},  
+                 {Region:"Northern California", children: [ 
+                    {Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000}, 
+                    {Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000}]},  
+                 {Region:"Southern California", children: [ 
+                    {Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000}, 
+                    {Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}]}
+              ]}
+            ]);
+            
+        ]]>
+    </fx:Script>
+
+    <mx:Panel title="PrintAdvancedDataGrid Control Example"
+			  paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+			  height="100%" width="100%">
+
+        <mx:AdvancedDataGrid id="adg"
+            width="100%" height="100%">
+            <mx:dataProvider>
+                <mx:HierarchicalData source="{dpHierarchy}"/>
+            </mx:dataProvider>
+            <mx:columns>
+                <mx:AdvancedDataGridColumn dataField="Region"/>
+                <mx:AdvancedDataGridColumn dataField="Territory_Rep"
+                    headerText="Territory Rep"/>
+                <mx:AdvancedDataGridColumn dataField="Actual"/>
+                <mx:AdvancedDataGridColumn dataField="Estimate"/>
+            </mx:columns>
+        </mx:AdvancedDataGrid>    
+
+        <mx:Button id="myButton" 
+            label="Print" 
+            click="doPrint()"/>
+    </mx:Panel>    
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/printing/FormPrintFooter.mxml b/tourdeflexmodules/src/mx/printing/FormPrintFooter.mxml
new file mode 100755
index 0000000..853f59f
--- /dev/null
+++ b/tourdeflexmodules/src/mx/printing/FormPrintFooter.mxml
@@ -0,0 +1,34 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Custom control for the footer area of the printed page. -->
+
+<mx:VBox xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+	width="60%" horizontalAlign="right">
+	
+    <!-- Declare and initialize the product total variable. -->
+     <fx:Script>
+        <![CDATA[
+            [Bindable]
+            public var pTotal:Number = 0;
+        ]]>
+    </fx:Script>
+	
+    <mx:Label text="Product Total: {pTotal}"/>
+	
+</mx:VBox>
diff --git a/tourdeflexmodules/src/mx/printing/FormPrintHeader.mxml b/tourdeflexmodules/src/mx/printing/FormPrintHeader.mxml
new file mode 100755
index 0000000..5285a93
--- /dev/null
+++ b/tourdeflexmodules/src/mx/printing/FormPrintHeader.mxml
@@ -0,0 +1,25 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Custom control for the header area of the printed page. -->
+
+<mx:VBox xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+	width="60%" horizontalAlign="right">
+
+    <mx:Label text="This is a placeholder for first page contents"/>
+</mx:VBox>
diff --git a/tourdeflexmodules/src/mx/printing/FormPrintView.mxml b/tourdeflexmodules/src/mx/printing/FormPrintView.mxml
new file mode 100755
index 0000000..4701121
--- /dev/null
+++ b/tourdeflexmodules/src/mx/printing/FormPrintView.mxml
@@ -0,0 +1,77 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Custom control to print the DataGrid control on multiple pages. -->
+
+<mx:VBox xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+	xmlns="*" backgroundColor="#FFFFFF" paddingTop="50" paddingBottom="50" paddingLeft="50">
+
+     <fx:Script>
+        <![CDATA[
+            import mx.core.*
+            // Declare and initialize the variables used in the component.
+            // The application sets the actual prodTotal value.
+            [Bindable]
+            public var pageNumber:Number = 1;
+            [Bindable]
+            public var prodTotal:Number = 0;
+
+            // Control the page contents by selectively hiding the header and
+            // footer based on the page type.
+            public function showPage(pageType:String):void {
+                if(pageType == "first" || pageType == "middle") {
+                    // Hide the footer.
+                    footer.includeInLayout=false;
+                    footer.visible = false;
+                }
+                if(pageType == "middle" || pageType == "last") {
+                    // The header won't be used again; hide it.
+                    header.includeInLayout=false;
+                    header.visible = false;
+                }
+                if(pageType == "last") {
+                    // Show the footer.
+                    footer.includeInLayout=true;
+                    footer.visible = true;
+                }
+                //Update the DataGrid layout to reflect the results.
+                validateNow();
+            }        
+        ]]>
+    </fx:Script>
+
+    <!-- The template for the printed page, with the contents for all pages. -->
+    <mx:VBox width="80%" horizontalAlign="left">
+        <mx:Label text="Page {pageNumber}"/>
+    </mx:VBox>
+
+    <FormPrintHeader id="header" />
+    <!-- The data grid. The sizeToPage property is true by default, so the last
+        page has only as many grid rows as are needed for the data. -->
+    <mx:PrintDataGrid id="myDataGrid" width="60%" height="100%">
+    <!-- Specify the columns to ensure that their order is correct. -->
+        <mx:columns>
+            <mx:DataGridColumn dataField="Index" />
+            <mx:DataGridColumn dataField="Qty" />
+        </mx:columns>
+    </mx:PrintDataGrid>
+
+    <!-- Create a FormPrintFooter control and set its prodTotal variable. -->
+    <FormPrintFooter id="footer" pTotal="{prodTotal}" />
+
+</mx:VBox>
diff --git a/tourdeflexmodules/src/mx/printing/PrintDataGridExample.mxml b/tourdeflexmodules/src/mx/printing/PrintDataGridExample.mxml
new file mode 100755
index 0000000..94ce408
--- /dev/null
+++ b/tourdeflexmodules/src/mx/printing/PrintDataGridExample.mxml
@@ -0,0 +1,145 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Main application to print a DataGrid control on multiple pages. -->
+
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0" initialize="initData()">
+
+     <fx:Script>
+        <![CDATA[
+
+		import mx.core.FlexGlobals;
+        import mx.printing.*;
+        import mx.collections.ArrayCollection;
+        import FormPrintView;
+
+        // Declare variables and initialize simple variables.
+        [Bindable]
+        public var dgProvider:ArrayCollection;
+        public var footerHeight:Number = 20;
+        public var prodIndex:Number;
+        public var prodTotal:Number = 0;
+
+        // Data initialization.
+        public function initData():void {
+            // Create the data provider for the DataGrid control.
+            dgProvider = new ArrayCollection;
+        }
+
+        // Fill the dgProvider ArrayCollection with the specified items.
+        public function setdgProvider(items:int):void {
+
+            prodIndex=1;
+            dgProvider.removeAll();
+            for (var z:int=0; z<items; z++)
+            {
+                var prod1:Object = {};
+                prod1.Qty = prodIndex * 7;
+                prod1.Index = prodIndex++;
+                prodTotal += prod1.Qty;
+                dgProvider.addItem(prod1);
+            }
+        }
+
+        // The function to print the output.
+        public function doPrint():void {
+
+            var printJob:FlexPrintJob = new FlexPrintJob();
+            if (printJob.start()) {
+                // Create a FormPrintView control as a child of the current view.
+                var thePrintView:FormPrintView = new FormPrintView();
+               FlexGlobals.topLevelApplication.addChild(thePrintView);
+
+                //Set the print view properties.
+                thePrintView.width=printJob.pageWidth;
+                thePrintView.height=printJob.pageHeight;
+                thePrintView.prodTotal = prodTotal;
+                // Set the data provider of the FormPrintView component's data grid
+                // to be the data provider of the displayed data grid.
+                thePrintView.myDataGrid.dataProvider = myDataGrid.dataProvider;
+                // Create a single-page image.
+                thePrintView.showPage("single");
+                // If the print image's data grid can hold all the provider's rows,
+                // add the page to the print job.
+                if(!thePrintView.myDataGrid.validNextPage)
+                {
+                    printJob.addObject(thePrintView);
+                }
+                // Otherwise, the job requires multiple pages.
+                else
+                {
+                    // Create the first page and add it to the print job.
+                    thePrintView.showPage("first");
+                    printJob.addObject(thePrintView);
+                    thePrintView.pageNumber++;
+                    // Loop through the following code until all pages are queued.
+                    while(true)
+                    {
+                        // Move the next page of data to the top of the print grid.
+                        thePrintView.myDataGrid.nextPage();
+                        thePrintView.showPage("last");
+                        // If the page holds the remaining data, or if the last page
+                        // was completely filled by the last grid data, queue it for printing.
+                        // Test if there is data for another PrintDataGrid page.
+                        if(!thePrintView.myDataGrid.validNextPage)
+                        {
+                            // This is the last page; queue it and exit the print loop.
+                            printJob.addObject(thePrintView);
+                            break;
+                        }
+                        else
+                        // This is not the last page. Queue a middle page.
+                        {
+                            thePrintView.showPage("middle");
+                            printJob.addObject(thePrintView);
+                            thePrintView.pageNumber++;
+                        }
+                    }
+                }
+                // All pages are queued; remove the FormPrintView control to free memory.
+                FlexGlobals.topLevelApplication.removeChild(thePrintView);
+            }
+            // Send the job to the printer.
+            printJob.send();
+        }
+        ]]>
+    </fx:Script>
+
+    <mx:Panel title="DataGrid Printing Example"
+			  paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+			  height="100%" width="100%">
+
+        <mx:DataGrid id="myDataGrid" dataProvider="{dgProvider}">
+            <mx:columns>
+                <mx:DataGridColumn dataField="Index"/>
+                <mx:DataGridColumn dataField="Qty"/>
+            </mx:columns>
+        </mx:DataGrid>
+
+        <mx:Text width="100%"
+            text="Specify the number of lines and click Fill Grid first. Then you can click Print."/>
+
+        <mx:TextInput id="dataItems" text="35"/>
+
+        <mx:HBox>
+            <mx:Button id="setDP" label="Fill Grid" click="setdgProvider(int(dataItems.text))"/>
+            <mx:Button id="printDG" label="Print" click="doPrint()"/>
+        </mx:HBox>
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/states/StatesExample.mxml b/tourdeflexmodules/src/mx/states/StatesExample.mxml
new file mode 100755
index 0000000..04b5fc4
--- /dev/null
+++ b/tourdeflexmodules/src/mx/states/StatesExample.mxml
@@ -0,0 +1,59 @@
+<?xml version="1.0" ?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the States class. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+    <!-- Define one view state, in addition to the base state.-->
+    <mx:states>
+		<mx:State name="default" />
+        <mx:State name="register" />
+    </mx:states>
+
+    <!-- Define a Panel container that defines the login form.-->
+    <mx:Panel title="Login" title.register="Register" id="loginPanel" 
+        		horizontalScrollPolicy="off" verticalScrollPolicy="off"	
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <mx:Text width="100%"
+            text="Click the 'Need to Register?' link to change state. Click the 'Return to Login' link to return to the base state."/>
+
+        <mx:Form id="loginForm">
+            <mx:FormItem label="Username:">
+                <mx:TextInput/>
+            </mx:FormItem>
+            <mx:FormItem label="Password:">
+                <mx:TextInput/>
+            </mx:FormItem>
+			<mx:FormItem id="confirm" label="Confirm:" includeIn="register">
+            	<mx:TextInput/>
+             </mx:FormItem>
+        </mx:Form>
+        <mx:ControlBar>
+            <mx:LinkButton id="registerLink"  label="Need to Register?"
+                click="currentState='register'" excludeFrom="register"/>
+			<mx:LinkButton id="loginLink" label="Return to Login" click="currentState='default'"
+				includeIn="register" />
+            <mx:Spacer width="100%" id="spacer1"/>
+            <mx:Button label="Login" label.register="register" color.register="blue" id="loginButton" />
+        </mx:ControlBar>
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/states/TransitionExample.mxml b/tourdeflexmodules/src/mx/states/TransitionExample.mxml
new file mode 100755
index 0000000..e93ada5
--- /dev/null
+++ b/tourdeflexmodules/src/mx/states/TransitionExample.mxml
@@ -0,0 +1,85 @@
+<?xml version="1.0" ?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the Transition class. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+    <!-- Define one view state, in addition to the base state.-->
+    <mx:states>
+		<mx:State name="default" />
+        <mx:State name="register" />
+    </mx:states>
+
+    <mx:transitions>
+        <!-- Define the transition from the base state to the Register state.-->
+        <mx:Transition id="toRegister" fromState="default" toState="register">
+            <mx:Sequence targets="{[loginPanel, registerLink, confirm, loginLink, spacer1]}">
+                <mx:RemoveChildAction/>
+                <mx:SetPropertyAction target="{loginPanel}" name="title"/>
+                <mx:SetPropertyAction target="{loginButton}" name="label"/>
+                <mx:SetStyleAction target="{loginButton}" name="color"/>
+                <mx:Resize target="{loginPanel}"/>
+                <mx:AddChildAction/>
+            </mx:Sequence>
+        </mx:Transition>
+
+        <!-- Define the transition from the Register state to the base state.-->
+        <mx:Transition id="toDefault" fromState="register" toState="default">
+            <mx:Sequence targets="{[loginPanel, registerLink, confirm, loginLink, spacer1]}">
+                <mx:RemoveChildAction/>
+                <mx:SetPropertyAction target="{loginPanel}" name="title"/>
+                <mx:SetPropertyAction  target="{loginButton}" name="label"/>
+                <mx:SetStyleAction target="{loginButton}" name="color"/>
+                <mx:Resize target="{loginPanel}"/>
+                <mx:AddChildAction/>
+            </mx:Sequence>
+        </mx:Transition>
+	</mx:transitions>
+
+    <!-- Define a Panel container that defines the login form.-->
+    <mx:Panel title="Login" title.register="Register" id="loginPanel" 
+       			horizontalScrollPolicy="off" verticalScrollPolicy="off"
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+	
+        <mx:Text width="100%"
+            text="Click the 'Need to Register?' link to change state. Click the 'Return to Login' link to return to the base state."/>
+
+        <mx:Form id="loginForm">
+            <mx:FormItem label="Username:">
+                <mx:TextInput/>
+            </mx:FormItem>
+            <mx:FormItem label="Password:">
+                <mx:TextInput/>
+            </mx:FormItem>
+			<mx:FormItem id="confirm" label="Confirm:" includeIn="register">
+            	<mx:TextInput/>
+             </mx:FormItem>
+        </mx:Form>
+        <mx:ControlBar>
+            <mx:LinkButton id="registerLink"  label="Need to Register?"
+                click="currentState='register'" excludeFrom="register"/>
+			<mx:LinkButton id="loginLink" label="Return to Login" click="currentState='default'"
+				includeIn="register" />
+            <mx:Spacer width="100%" id="spacer1"/>
+            <mx:Button label="Login" label.register="register" color.register="blue" id="loginButton" />
+        </mx:ControlBar>
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/validators/CreditCardValidatorExample.mxml b/tourdeflexmodules/src/mx/validators/CreditCardValidatorExample.mxml
new file mode 100755
index 0000000..161ccec
--- /dev/null
+++ b/tourdeflexmodules/src/mx/validators/CreditCardValidatorExample.mxml
@@ -0,0 +1,71 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the CreditCardValidator. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+	
+     <fx:Script>
+        import mx.controls.Alert;
+    </fx:Script>
+
+	<fx:Declarations>	
+		<!-- Define model for the credit card data. -->
+	    <fx:Model id="creditcard">
+	        <card>	
+	            <cardType>{cardTypeCombo.selectedItem.data}</cardType>
+	            <cardNumber>{cardNumberInput.text}</cardNumber>
+	        </card>
+	    </fx:Model>
+		
+	    <mx:CreditCardValidator id="ccV" 
+	        cardTypeSource="{creditcard}" cardTypeProperty="cardType"
+	        cardNumberSource="{creditcard}" cardNumberProperty="cardNumber"
+	        trigger="{myButton}" triggerEvent="click"
+	        cardTypeListener="{cardTypeCombo}"
+	        cardNumberListener="{cardNumberInput}"
+	        valid="Alert.show('Validation Succeeded!')"/>
+	</fx:Declarations>
+  
+    <mx:Panel title="CreditCardValidator Example"	
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+		
+        <mx:Form id="creditCardForm">
+            <mx:FormItem label="Card Type">    
+                <mx:ComboBox id="cardTypeCombo">
+                    <mx:dataProvider>
+                        <fx:Object label="American Express" data="American Express"/>
+                        <fx:Object label="Diners Club" data="Diners Club"/>
+                        <fx:Object label="Discover" data="Discover"/>
+                        <fx:Object label="MasterCard" data="MasterCard"/>
+                        <fx:Object label="Visa" data="Visa"/>
+                    </mx:dataProvider>
+                </mx:ComboBox>
+            </mx:FormItem>
+            <mx:FormItem label="Credit Card Number">
+                <mx:TextInput id="cardNumberInput"/>
+            </mx:FormItem>
+            <mx:FormItem>
+                <mx:Button id="myButton" label="Check Credit"/>
+            </mx:FormItem>
+        </mx:Form> 	
+		
+    </mx:Panel>	
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/validators/CurrencyValidatorExample.mxml b/tourdeflexmodules/src/mx/validators/CurrencyValidatorExample.mxml
new file mode 100755
index 0000000..0dbe21c
--- /dev/null
+++ b/tourdeflexmodules/src/mx/validators/CurrencyValidatorExample.mxml
@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the CurrencyValidator. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
+        import mx.controls.Alert;
+    </fx:Script>
+
+	<fx:Declarations>
+	    <mx:CurrencyValidator source="{priceUS}" property="text" precision="2" 
+	        trigger="{myButton}" triggerEvent="click" 
+	        valid="Alert.show('Validation Succeeded!')"/>
+	</fx:Declarations>
+
+    <mx:Panel title="CurrencyValidator Example"	
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+        
+        <mx:Form>
+            <mx:FormItem label="Enter a U.S. dollar amount: ">
+                 <mx:TextInput id="priceUS" width="100%"/>
+            </mx:FormItem>
+
+            <mx:FormItem >
+                <mx:Button id="myButton" label="Validate"/>
+            </mx:FormItem>
+        </mx:Form>            
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/validators/DateValidatorExample.mxml b/tourdeflexmodules/src/mx/validators/DateValidatorExample.mxml
new file mode 100755
index 0000000..8d1bbb3
--- /dev/null
+++ b/tourdeflexmodules/src/mx/validators/DateValidatorExample.mxml
@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the DateValidator. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
+        import mx.controls.Alert;
+    </fx:Script>
+
+	<fx:Declarations>
+	    <fx:Model id="CheckModel">
+	        <dateInfo>
+	            <DOB>{dob.text}</DOB>
+	        </dateInfo>
+	    </fx:Model>
+	
+	    <mx:DateValidator source="{dob}" property="text" allowedFormatChars="/" 
+	        trigger="{myButton}" triggerEvent="click" 
+	        valid="Alert.show('Validation Succeeded!')"/>
+	</fx:Declarations>
+	
+    <mx:Panel title="DateValidator Example"	
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <mx:Form>
+            <mx:FormItem label="Enter date of birth (mm/dd/yyyy): ">
+                <mx:TextInput id="dob" width="100%"/>
+            </mx:FormItem>
+
+            <mx:FormItem >
+                <mx:Button id="myButton" label="Validate" />
+            </mx:FormItem>
+        </mx:Form>
+
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/validators/EmailValidatorExample.mxml b/tourdeflexmodules/src/mx/validators/EmailValidatorExample.mxml
new file mode 100755
index 0000000..4b104b6
--- /dev/null
+++ b/tourdeflexmodules/src/mx/validators/EmailValidatorExample.mxml
@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the EmailValidator. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
+        import mx.controls.Alert;
+    </fx:Script>
+
+	<fx:Declarations>
+	   <mx:EmailValidator source="{email}" property="text" 
+	       trigger="{myButton}" triggerEvent="click"
+	       valid="Alert.show('Validation Succeeded!')"/>
+	</fx:Declarations>
+
+   <mx:Panel title="EmailValidator Example"	
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <mx:Form>
+            <mx:FormItem label="Enter an e-mail address: ">
+                <mx:TextInput id="email" width="100%"/>
+            </mx:FormItem>
+
+            <mx:FormItem >
+                <mx:Button id="myButton" label="Validate" />
+            </mx:FormItem>
+        </mx:Form>
+    </mx:Panel>
+ </mx:Module>
diff --git a/tourdeflexmodules/src/mx/validators/NumberValidatorExample.mxml b/tourdeflexmodules/src/mx/validators/NumberValidatorExample.mxml
new file mode 100755
index 0000000..49a03ac
--- /dev/null
+++ b/tourdeflexmodules/src/mx/validators/NumberValidatorExample.mxml
@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the NumberValidator. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
+        import mx.controls.Alert;
+    </fx:Script>
+
+	<fx:Declarations>
+	    <mx:NumberValidator source="{age}" property="text" integerError="Enter Integer value"
+	        minValue="18" maxValue="50" domain="int" 
+	        trigger="{myButton}" triggerEvent="click"
+	        valid="Alert.show('Validation Succeeded!')"/>
+	</fx:Declarations>
+
+    <mx:Panel title="NumberValidator Example"	
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <mx:Form>
+            <mx:FormItem label="Enter an age between 18 and 50: ">
+                <mx:TextInput id="age" width="100%"/>
+            </mx:FormItem>
+
+            <mx:FormItem >
+                <mx:Button id="myButton" label="Validate" />
+            </mx:FormItem>
+        </mx:Form>
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/validators/PhoneNumberValidatorExample.mxml b/tourdeflexmodules/src/mx/validators/PhoneNumberValidatorExample.mxml
new file mode 100755
index 0000000..11b3a5c
--- /dev/null
+++ b/tourdeflexmodules/src/mx/validators/PhoneNumberValidatorExample.mxml
@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the PhoneNumberValidator. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
+        import mx.controls.Alert;
+    </fx:Script>
+
+	<fx:Declarations>
+	    <mx:PhoneNumberValidator source="{phone}" property="text" 
+	        trigger="{myButton}" triggerEvent="click"
+	        valid="Alert.show('Validation Succeeded!')" />
+	</fx:Declarations>
+
+    <mx:Panel title="Phone Number Validator Panel"
+			  paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+			  height="100%" width="100%">
+
+        <mx:Form>
+            <mx:FormItem label="Enter 10-digit phone number: ">
+                <mx:TextInput id="phone" width="100%" />
+            </mx:FormItem>
+
+            <mx:FormItem >
+                <mx:Button id="myButton" label="Validate" />
+            </mx:FormItem>
+        </mx:Form>
+     </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/validators/RegExValidatorExample.mxml b/tourdeflexmodules/src/mx/validators/RegExValidatorExample.mxml
new file mode 100755
index 0000000..c306b27
--- /dev/null
+++ b/tourdeflexmodules/src/mx/validators/RegExValidatorExample.mxml
@@ -0,0 +1,88 @@
+<?xml version="1.0"?> 
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the RegExpValidator. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+	<fx:Script>
+		<![CDATA[
+			import mx.events.ValidationResultEvent;
+			import mx.validators.*;
+	
+            // Write the results to the 
+			private function handleResult(eventObj:ValidationResultEvent):void {
+				if (eventObj.type == ValidationResultEvent.VALID)
+				{
+					// For valid events, the results Array contains
+					// RegExpValidationResult objects.
+					var xResult:RegExpValidationResult;
+					reResults.text="";
+					for (var i:uint = 0; i < eventObj.results.length; i++)
+					{
+						xResult = eventObj.results[i];
+						reResults.text=reResults.text + xResult.matchedIndex + " " +
+							xResult.matchedString + "\n";
+					}
+				}
+				else
+				{
+					reResults.text="";			
+				}		
+			}
+		]]>
+	</fx:Script>
+
+	<fx:Declarations>
+		<mx:RegExpValidator id="regExpV" 
+			source="{regex_text}" property="text" 
+			flags="g" expression="{regex.text}" 
+			valid="handleResult(event)" invalid="handleResult(event)"
+			trigger="{myButton}" triggerEvent="click"/>
+	</fx:Declarations>
+	
+   <mx:Panel title="RegExpValidator Example"	
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+   
+        <mx:Text width="100%" text="Instructions:"/>
+        <mx:Text width="100%" text="1. Enter text to search. By default, enter  a string containing the letters ABC in sequence followed by any digit."/>
+        <mx:Text width="100%" text="2. Enter the regular expression. By default, enter ABC\d."/>
+        <mx:Text width="100%" text="3. Click the Button control to trigger the validation."/>
+        <mx:Text width="100%" text="4. The results show the index in the text where the matching pattern begins, and the matching pattern. "/>
+   
+        <mx:Form>
+            <mx:FormItem label="Enter text: ">
+                <mx:TextInput id="regex_text" text="xxxxABC4xxx" width="100%"/>
+            </mx:FormItem>
+
+            <mx:FormItem label="Enter regular expression: ">
+                <mx:TextInput id="regex" text="ABC\d" width="100%"/>
+            </mx:FormItem>
+
+            <mx:FormItem label="Results: ">
+                <mx:TextInput id="reResults" width="100%"/>
+            </mx:FormItem>
+
+            <mx:FormItem >
+                <mx:Button id="myButton" label="Validate"/>
+            </mx:FormItem>
+        </mx:Form>
+	</mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/validators/SimpleValidatorExample.mxml b/tourdeflexmodules/src/mx/validators/SimpleValidatorExample.mxml
new file mode 100755
index 0000000..010bc72
--- /dev/null
+++ b/tourdeflexmodules/src/mx/validators/SimpleValidatorExample.mxml
@@ -0,0 +1,79 @@
+<?xml version="1.0"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the Validator class. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
+        <![CDATA[
+
+			// Import necessary classes.
+            import mx.controls.Alert;
+			import mx.events.ValidationResultEvent;
+			
+			// Event listener for the valid and invalid events.
+			private function handleValid(eventObj:ValidationResultEvent):void {
+				if(eventObj.type==ValidationResultEvent.VALID)	
+				    // Enable Submit button.
+					submitButton.enabled = true;
+				else
+					submitButton.enabled = false;
+			}
+
+			// Submit form is everything is valid. 
+			private function submitForm():void {
+				Alert.show("Form Submitted!");
+			}
+
+        ]]>
+    </fx:Script>
+
+    <!-- The Validator class defines the required property and the validator events
+         used by all validator subclasses. -->
+	<fx:Declarations>
+	    <mx:Validator id="reqValid" required="true"
+	        source="{fname}" property="text" 
+	        valid="handleValid(event)" invalid="handleValid(event)"/>
+	</fx:Declarations>
+        
+    <mx:Panel title="Validator Example"	
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <mx:Form>
+            <mx:Text width="100%"
+                text="Enter a value in the Name field before you can submit. The E-mail field is optional."/>
+
+            <mx:FormItem label="Name: " required="true">
+                <mx:TextInput id="fname" width="100%"/>
+            </mx:FormItem>
+
+            <mx:FormItem label="E-mail address: " required="false">
+                <mx:TextInput id="email" width="100%"/>
+            </mx:FormItem>
+            
+            <mx:FormItem>
+                <mx:Button id="submitButton" enabled="false" 
+                    label="Submit" click="submitForm()"/>
+            </mx:FormItem>
+        </mx:Form>
+
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/validators/SocialSecurityValidatorExample.mxml b/tourdeflexmodules/src/mx/validators/SocialSecurityValidatorExample.mxml
new file mode 100755
index 0000000..e2f8e8a
--- /dev/null
+++ b/tourdeflexmodules/src/mx/validators/SocialSecurityValidatorExample.mxml
@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate SocialSecurityValidator. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
+        import mx.controls.Alert;
+    </fx:Script>
+
+	<fx:Declarations>
+	    <mx:SocialSecurityValidator source="{ssn}" property="text" 
+	        trigger="{myButton}" triggerEvent="click"
+	        valid="Alert.show('Validation Succeeded!')"/>
+	</fx:Declarations>
+
+    <mx:Panel title="Social Security Validator Panel"	
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+        
+        <mx:Form>
+            <mx:FormItem label="Enter Social Security number: ">
+                <mx:TextInput id="ssn" width="100%"/>
+            </mx:FormItem>
+
+            <mx:FormItem >
+                <mx:Button id="myButton" label="Validate" />
+            </mx:FormItem>
+        </mx:Form>
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/validators/StringValidatorExample.mxml b/tourdeflexmodules/src/mx/validators/StringValidatorExample.mxml
new file mode 100755
index 0000000..833e00f
--- /dev/null
+++ b/tourdeflexmodules/src/mx/validators/StringValidatorExample.mxml
@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate StringValidator. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
+        import mx.controls.Alert;
+    </fx:Script>
+
+	<fx:Declarations>
+	    <mx:StringValidator source="{fname}" property="text" 
+	    	tooShortError="This string is shorter than the minimum allowed length of 4. " 
+	    	tooLongError="This string is longer than the maximum allowed length of 20." 
+	    	minLength="4" maxLength="20"  
+	    	trigger="{myButton}" triggerEvent="click" 
+	    	valid="Alert.show('Validation Succeeded!')"/>
+	</fx:Declarations>
+
+    <mx:Panel title="StringValidator Example"	
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+            <mx:Form>               
+			    <mx:FormItem label="Enter a name between 4 and 20 characters: ">
+                    <mx:TextInput id="fname" width="100%"/>
+                </mx:FormItem>
+
+                <mx:FormItem >
+                    <mx:Button id="myButton" label="Validate" />
+                </mx:FormItem>
+            </mx:Form>	
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/mx/validators/ZipCodeValidatorExample.mxml b/tourdeflexmodules/src/mx/validators/ZipCodeValidatorExample.mxml
new file mode 100755
index 0000000..af5678a
--- /dev/null
+++ b/tourdeflexmodules/src/mx/validators/ZipCodeValidatorExample.mxml
@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<!-- Simple example to demonstrate the ZipCodeValidator. -->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+				paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
+				height="100%" width="100%">
+
+     <fx:Script>
+        import mx.controls.Alert;
+    </fx:Script>
+
+	<fx:Declarations>
+	    <mx:ZipCodeValidator source="{zip}" property="text" 
+	        trigger="{myButton}" triggerEvent="click"  
+	        valid="Alert.show('Validation Succeeded!')"/>
+	</fx:Declarations>
+
+    <mx:Panel title="ZipcodeValidator Example"	
+				paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
+				height="100%" width="100%">
+
+        <mx:Form>
+            <mx:FormItem label="Enter a 5 or 9 digit U.S. Zip code: ">
+                <mx:TextInput id="zip" width="100%"/>
+            </mx:FormItem>
+
+            <mx:FormItem >
+                <mx:Button id="myButton" label="Validate" />
+            </mx:FormItem>
+        </mx:Form>
+    </mx:Panel>
+</mx:Module>
diff --git a/tourdeflexmodules/src/spark/charts/AreaChartExample.mxml b/tourdeflexmodules/src/spark/charts/AreaChartExample.mxml
new file mode 100644
index 0000000..017514e
--- /dev/null
+++ b/tourdeflexmodules/src/spark/charts/AreaChartExample.mxml
@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s: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 expensesAC:ArrayCollection = new ArrayCollection( [
+				{ Month: "Jan", Profit: 2000, Expenses: 1500, Amount: 450 },
+				{ Month: "Feb", Profit: 1000, Expenses: 200, Amount: 600 },
+				{ Month: "Mar", Profit: 1500, Expenses: 500, Amount: 300 },
+				{ Month: "Apr", Profit: 1800, Expenses: 1200, Amount: 900 },
+				{ Month: "May", Profit: 2400, Expenses: 575, Amount: 500 } ]);
+		]]>
+	</fx:Script>
+	
+	<s:Panel title="AreaChart Control" width="100%" height="100%">
+		
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<mx:AreaChart id="Areachart" color="0x323232" height="100%"
+					  showDataTips="true" dataProvider="{expensesAC}">
+			
+			<mx:horizontalAxis>
+				<mx:CategoryAxis categoryField="Month"/>
+			</mx:horizontalAxis>
+			
+			<mx:series>
+				<mx:AreaSeries yField="Profit" form="curve" displayName="Profit"/>
+				<mx:AreaSeries yField="Expenses" form="curve" displayName="Expenses"/>
+				<mx:AreaSeries yField="Amount" form="curve" displayName="Amount"/>
+			</mx:series>
+		</mx:AreaChart>
+		
+		<mx:Legend dataProvider="{Areachart}" color="0x323232"/>
+		
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/charts/BarChartExample.mxml b/tourdeflexmodules/src/spark/charts/BarChartExample.mxml
new file mode 100644
index 0000000..89e7fef
--- /dev/null
+++ b/tourdeflexmodules/src/spark/charts/BarChartExample.mxml
@@ -0,0 +1,61 @@
+<?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 medalsAC:ArrayCollection = new ArrayCollection( [
+            { Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
+            { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
+            { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 } ]);
+        ]]>
+    </fx:Script>
+    
+	<s:Panel title="BarChart Control" width="100%" height="100%">
+		
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+         
+         <mx:BarChart id="bar" height="100%" color="0x323232" 
+         	showDataTips="true" dataProvider="{medalsAC}">
+                
+            <mx:verticalAxis>
+                <mx:CategoryAxis categoryField="Country"/>
+            </mx:verticalAxis>
+                
+            <mx:series>
+                <mx:BarSeries yField="Country" xField="Gold" displayName="Gold"/>
+                <mx:BarSeries yField="Country" xField="Silver" displayName="Silver"/>
+                <mx:BarSeries yField="Country" xField="Bronze" displayName="Bronze"/>
+            </mx:series>
+        </mx:BarChart>
+
+        <mx:Legend dataProvider="{bar}" color="0x323232"/>
+        
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/charts/BubbleChartExample.mxml b/tourdeflexmodules/src/spark/charts/BubbleChartExample.mxml
new file mode 100644
index 0000000..fad0fd0
--- /dev/null
+++ b/tourdeflexmodules/src/spark/charts/BubbleChartExample.mxml
@@ -0,0 +1,64 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s: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 expensesAC:ArrayCollection = new ArrayCollection( [
+				{ Month: "Jan", Profit: 2000, Expenses: 1500, Amount: 450 },
+				{ Month: "Feb", Profit: 1000, Expenses: 200, Amount: 600 },
+				{ Month: "Mar", Profit: 1500, Expenses: 500, Amount: 300 },
+				{ Month: "Apr", Profit: 1800, Expenses: 1200, Amount: 900 },
+				{ Month: "May", Profit: 2400, Expenses: 575, Amount: 500 } ]);
+		]]>
+	</fx:Script>
+	
+	<fx:Style>  
+		@namespace mx "library://ns.adobe.com/flex/mx";
+		
+		mx|BubbleChart { color:#000099; }
+	</fx:Style>
+	
+	<s:Panel title="BubbleChart Control" width="100%" height="100%">
+		
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<mx:BubbleChart id="bubblechart" height="100%" width="100%" paddingRight="5" paddingLeft="5" color="0x323232"
+						showDataTips="true" maxRadius="20" dataProvider="{expensesAC}">
+			
+			<mx:series>
+				<mx:BubbleSeries displayName="Profit/Expenses/Amount" 
+								 xField="Profit" yField="Expenses" radiusField="Amount"/>
+			</mx:series>            
+		</mx:BubbleChart>
+		
+		<mx:Legend dataProvider="{bubblechart}" color="0x323232"/>
+		
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/charts/CandleStickChartExample.mxml b/tourdeflexmodules/src/spark/charts/CandleStickChartExample.mxml
new file mode 100644
index 0000000..3a0307a
--- /dev/null
+++ b/tourdeflexmodules/src/spark/charts/CandleStickChartExample.mxml
@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s: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 expensesAC:ArrayCollection = new ArrayCollection( [
+            { Date: "25-Jul", Open: 40.75,  High: 40.75, Low: 40.24, Close:40.31},
+            { Date: "26-Jul", Open: 39.98,  High: 40.78, Low: 39.97, Close:40.34},
+            { Date: "27-Jul", Open: 40.38,  High: 40.66, Low: 40, Close:40.63},
+            { Date: "28-Jul", Open: 40.49,  High: 40.99, Low: 40.3, Close:40.98},
+            { Date: "29-Jul", Open: 40.13,  High: 40.4, Low: 39.65, Close:39.95},
+            { Date: "1-Aug", Open: 39.00,  High: 39.50, Low: 38.7, Close:38.6}, 
+            { Date: "2-Aug", Open: 38.68,  High: 39.34, Low: 37.75, Close:38.84}, 
+            { Date: "3-Aug", Open: 38.76,  High: 38.76, Low: 38.03, Close:38.12}, 
+            { Date: "4-Aug", Open: 37.98,  High: 37.98, Low: 36.56, Close:36.69},                       
+            { Date: "5-Aug", Open: 36.61,  High: 37, Low: 36.48, Close:36.86} ]);
+        ]]>
+    </fx:Script>
+	
+	<s:Panel title="CandlestickChart Control" width="100%" height="100%">
+		
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+         
+         <mx:CandlestickChart id="candlestickchart" height="100%" width="100%" paddingRight="5" paddingLeft="5" 
+            color="0x323232" showDataTips="true" dataProvider="{expensesAC}">
+            
+            <mx:verticalAxis>
+                <mx:LinearAxis baseAtZero="false" />
+            </mx:verticalAxis>
+
+            <mx:horizontalAxis>
+                <mx:CategoryAxis categoryField="Date" title="Date"/>
+            </mx:horizontalAxis>
+
+            <mx:series>
+                <mx:CandlestickSeries openField="Open" highField="High" 
+                    lowField="Low" closeField="Close"/>
+            </mx:series>
+
+        </mx:CandlestickChart>
+        
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/charts/ColumnChartExample.mxml b/tourdeflexmodules/src/spark/charts/ColumnChartExample.mxml
new file mode 100644
index 0000000..e9415f8
--- /dev/null
+++ b/tourdeflexmodules/src/spark/charts/ColumnChartExample.mxml
@@ -0,0 +1,61 @@
+<?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 medalsAC:ArrayCollection = new ArrayCollection( [
+            { Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
+            { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
+            { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 } ]);
+        ]]>
+    </fx:Script>
+
+	<s:Panel title="ColumnChart Control" width="100%" height="100%">
+		
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+         
+         <mx:ColumnChart id="column" height="100%" color="0x323232"
+            showDataTips="true" dataProvider="{medalsAC}">
+                
+            <mx:horizontalAxis>
+                <mx:CategoryAxis categoryField="Country"/>
+            </mx:horizontalAxis>
+                
+            <mx:series>
+                <mx:ColumnSeries xField="Country" yField="Gold" displayName="Gold"/>
+                <mx:ColumnSeries xField="Country" yField="Silver" displayName="Silver"/>
+                <mx:ColumnSeries xField="Country" yField="Bronze" displayName="Bronze"/>
+            </mx:series>
+        </mx:ColumnChart>
+
+        <mx:Legend dataProvider="{column}" color="0x323232"/>
+        
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/charts/HLOCChartExample.mxml b/tourdeflexmodules/src/spark/charts/HLOCChartExample.mxml
new file mode 100644
index 0000000..d67dec7
--- /dev/null
+++ b/tourdeflexmodules/src/spark/charts/HLOCChartExample.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">
+	
+	<fx:Script>
+		<![CDATA[
+			
+			import mx.collections.ArrayCollection;
+			
+			[Bindable]
+			private var stockDataAC:ArrayCollection = new ArrayCollection( [
+				{ Date: "25-Jul", Open: 40.55,  High: 40.75, Low: 40.24, Close:40.31},
+				{ Date: "26-Jul", Open: 40.15,  High: 40.78, Low: 39.97, Close:40.34},
+				{ Date: "27-Jul", Open: 40.38,  High: 40.66, Low: 40, Close:40.63},
+				{ Date: "28-Jul", Open: 40.49,  High: 40.99, Low: 40.3, Close:40.98},
+				{ Date: "29-Jul", Open: 40.13,  High: 40.4, Low: 39.65, Close:39.95},
+				{ Date: "1-Aug", Open: 39.00,  High: 39.50, Low: 38.7, Close:38.6}, 
+				{ Date: "2-Aug", Open: 38.68,  High: 39.34, Low: 37.75, Close:38.84}, 
+				{ Date: "3-Aug", Open: 38.76,  High: 38.76, Low: 38.03, Close:38.12}, 
+				{ Date: "4-Aug", Open: 37.98,  High: 37.98, Low: 36.56, Close:36.69},                       
+				{ Date: "5-Aug", Open: 36.61,  High: 37, Low: 36.48, Close:36.86} ]); 
+		]]>
+	</fx:Script>
+	
+	<s:Panel title="HLOCChart Control" width="100%" height="100%">
+		
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<mx:HLOCChart id="hlocchart" height="100%" width="100%" paddingRight="5" paddingLeft="5"
+					  color="0x323232" showDataTips="true" dataProvider="{stockDataAC}">
+			
+			<mx:verticalAxis>
+				<mx:LinearAxis baseAtZero="false" />
+			</mx:verticalAxis>
+			
+			<mx:horizontalAxis>
+				<mx:CategoryAxis categoryField="Date" title="Date" />
+			</mx:horizontalAxis>
+			
+			<mx:series>
+				<mx:HLOCSeries openField="Open" highField="High" 
+							   lowField="Low" closeField="Close"/>
+			</mx:series>
+		</mx:HLOCChart>
+		
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/charts/LineChartExample.mxml b/tourdeflexmodules/src/spark/charts/LineChartExample.mxml
new file mode 100644
index 0000000..b6077da
--- /dev/null
+++ b/tourdeflexmodules/src/spark/charts/LineChartExample.mxml
@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s: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 expensesAC:ArrayCollection = new ArrayCollection( [
+				{ Month: "Jan", Profit: 2000, Expenses: 1500, Amount: 450 },
+				{ Month: "Feb", Profit: 1000, Expenses: 200, Amount: 600 },
+				{ Month: "Mar", Profit: 1500, Expenses: 500, Amount: 300 },
+				{ Month: "Apr", Profit: 1800, Expenses: 1200, Amount: 900 },
+				{ Month: "May", Profit: 2400, Expenses: 575, Amount: 500 } ]);
+		]]>
+	</fx:Script>
+	
+	<s:Panel title="LineChart Control" width="100%" height="100%">
+		
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<mx:LineChart id="linechart" color="0x323232" height="100%"
+					  showDataTips="true" dataProvider="{expensesAC}">
+			
+			<mx:horizontalAxis>
+				<mx:CategoryAxis categoryField="Month"/>
+			</mx:horizontalAxis>
+			
+			<mx:series>
+				<mx:LineSeries yField="Profit" form="curve" displayName="Profit"/>
+				<mx:LineSeries yField="Expenses" form="curve" displayName="Expenses"/>
+				<mx:LineSeries yField="Amount" form="curve" displayName="Amount"/>
+			</mx:series>
+		</mx:LineChart>
+		
+		<mx:Legend dataProvider="{linechart}" color="0x323232"/>
+		
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/charts/PieChartExample.mxml b/tourdeflexmodules/src/spark/charts/PieChartExample.mxml
new file mode 100644
index 0000000..df83fc1
--- /dev/null
+++ b/tourdeflexmodules/src/spark/charts/PieChartExample.mxml
@@ -0,0 +1,68 @@
+<?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 medalsAC:ArrayCollection = new ArrayCollection( [
+				{ Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
+				{ Country: "China", Gold: 32, Silver:17, Bronze: 14 },
+				{ Country: "Russia", Gold: 27, Silver:27, Bronze: 38 } ]);
+			
+			private function displayGold(data:Object, field:String, index:Number, percentValue:Number):String {
+				var temp:String= (" " + percentValue).substr(0,6);
+				return data.Country + ": " + '\n' + "Total Gold: " + data.Gold + '\n' + temp + "%";
+			}
+		]]>
+	</fx:Script>
+	
+	<s:Panel title="PieChart Control" width="100%" height="100%">
+		
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<mx:PieChart id="chart" height="100%" width="100%" paddingRight="5" paddingLeft="5" color="0x323232"
+					 showDataTips="true" dataProvider="{medalsAC}" >
+			
+			<mx:series>
+				<mx:PieSeries labelPosition="callout" field="Gold" labelFunction="displayGold">
+					<mx:calloutStroke>
+						<s:SolidColorStroke weight="0" color="0x888888" alpha="1.0"/>
+					</mx:calloutStroke>
+					<mx:radialStroke>
+						<s:SolidColorStroke weight="0" color="#FFFFFF" alpha="0.20"/>
+					</mx:radialStroke>
+					<mx:stroke>
+						<s:SolidColorStroke color="0" alpha="0.20" weight="2"/>
+					</mx:stroke>
+				</mx:PieSeries>
+			</mx:series>
+		</mx:PieChart>
+		
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/charts/PlotChartExample.mxml b/tourdeflexmodules/src/spark/charts/PlotChartExample.mxml
new file mode 100644
index 0000000..87cc9a8
--- /dev/null
+++ b/tourdeflexmodules/src/spark/charts/PlotChartExample.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">
+	
+	<fx:Script>
+		<![CDATA[
+			
+			import mx.collections.ArrayCollection;
+			
+			[Bindable]
+			private var expensesAC:ArrayCollection = new ArrayCollection( [
+				{ Month: "Jan", Profit: 2000, Expenses: 1500, Amount: 450 },
+				{ Month: "Feb", Profit: 1000, Expenses: 200, Amount: 600 },
+				{ Month: "Mar", Profit: 1500, Expenses: 500, Amount: 300 } ]);
+		]]>
+	</fx:Script>
+	
+	<s:Panel title="PlotChart Control" width="100%" height="100%">
+		
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<mx:PlotChart id="plot" height="100%" paddingLeft="5" paddingRight="5"  color="0x323232"
+					  showDataTips="true" dataProvider="{expensesAC}">
+			
+			<mx:series>
+				<mx:PlotSeries xField="Expenses" yField="Profit" displayName="Expenses/Profit"/>
+				<mx:PlotSeries xField="Amount" yField="Expenses" displayName="Amount/Expenses"/>
+				<mx:PlotSeries xField="Profit" yField="Amount" displayName="Profit/Amount"/>
+			</mx:series>
+		</mx:PlotChart>
+		
+		<mx:Legend dataProvider="{plot}" color="0x323232"/>
+		
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/charts/SeriesInterpolateExample.mxml b/tourdeflexmodules/src/spark/charts/SeriesInterpolateExample.mxml
new file mode 100644
index 0000000..4a2e059
--- /dev/null
+++ b/tourdeflexmodules/src/spark/charts/SeriesInterpolateExample.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">
+	
+	<fx:Script>
+		<![CDATA[
+			
+			import mx.collections.ArrayCollection;
+			
+			[Bindable]
+			private var companyAAC:ArrayCollection = new ArrayCollection( [
+				{ Date: "25-Jul", Open: 40.75,  High: 40.75, Low: 40.24, Close:40.31},
+				{ Date: "26-Jul", Open: 39.98,  High: 40.78, Low: 39.97, Close:40.34},
+				{ Date: "27-Jul", Open: 40.38,  High: 40.66, Low: 40, Close:40.63},
+				{ Date: "28-Jul", Open: 40.49,  High: 40.99, Low: 40.3, Close:40.98},
+				{ Date: "29-Jul", Open: 40.13,  High: 40.4, Low: 39.65, Close:39.95},
+				{ Date: "1-Aug", Open: 39.00,  High: 39.50, Low: 38.7, Close:38.6}, 
+				{ Date: "2-Aug", Open: 38.68,  High: 39.34, Low: 37.75, Close:38.84}, 
+				{ Date: "3-Aug", Open: 38.76,  High: 38.76, Low: 38.03, Close:38.12}, 
+				{ Date: "4-Aug", Open: 37.98,  High: 37.98, Low: 36.56, Close:36.69},                       
+				{ Date: "5-Aug", Open: 36.61,  High: 37, Low: 36.48, Close:36.86} ]);
+			
+			[Bindable]
+			private var companyBAC:ArrayCollection = new ArrayCollection( [
+				{ Date: "25-Jul", Open: 18.50,  High: 19, Low: 18.48, Close:18.86},
+				{ Date: "26-Jul", Open: 19.56,  High: 19.98, Low: 18.6, Close:18.69},                       
+				{ Date: "27-Jul", Open: 20.81,  High: 20.99, Low: 20.03, Close:20.12}, 
+				{ Date: "28-Jul", Open: 20.70,  High: 21.00, Low: 19.5, Close:20.84}, 
+				{ Date: "29-Jul", Open: 21.7,  High: 21.79, Low: 20.45, Close:20.6}, 
+				{ Date: "1-Aug", Open: 22.45,  High: 22.65, Low: 21.65, Close:21.95},
+				{ Date: "2-Aug", Open: 22.56,  High: 22.6, Low: 22.05, Close:22.98},
+				{ Date: "3-Aug", Open: 22.42,  High: 22.70, Low: 22.1, Close:22.63},
+				{ Date: "4-Aug", Open: 21.67,  High: 22.82, Low: 21.67, Close:22.34},
+				{ Date: "5-Aug", Open: 22.44,  High: 22.85, Low: 22.12, Close:22.31} ]);
+			
+		]]>
+	</fx:Script>
+	
+	<fx:Declarations>
+		<mx:SeriesInterpolate id="interpolateIn" duration="1000"/>
+	</fx:Declarations>
+	
+	<s:Panel title="Interpolate Effect" width="100%" height="100%">
+		
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<mx:CandlestickChart id="candlestickchart" height="100%" paddingRight="5" paddingLeft="5" color="0x323232"
+							 showDataTips="true" dataProvider="{companyAAC}">
+			
+			<mx:verticalAxis>
+				<mx:LinearAxis baseAtZero="false" />
+			</mx:verticalAxis>
+			
+			<mx:horizontalAxis>
+				<mx:CategoryAxis categoryField="Date" title="Date"/>
+			</mx:horizontalAxis>
+			
+			<mx:series>
+				<mx:CandlestickSeries  
+					openField="Open" highField="High" 
+					lowField="Low" closeField="Close"
+					showDataEffect="{interpolateIn}"/>
+			</mx:series>
+		</mx:CandlestickChart>
+		
+		
+		<s:BorderContainer color="0x323232" width="30%" borderColor="0xDCDCDC" borderStyle="solid" height="100%">
+			
+			<s:layout>
+				<s:VerticalLayout paddingLeft="5" paddingRight="0" paddingTop="5" />
+			</s:layout>
+			
+			<s:Label color="0x0050AA" width="100%"
+					 text="Choose a company to view recent stock data."/>
+			
+			<s:RadioButton groupName="stocks" label="View Company A"
+						   selected="true" click="candlestickchart.dataProvider=companyAAC"/>
+			<s:RadioButton groupName="stocks" label="View Company B"
+						   click="candlestickchart.dataProvider=companyBAC"/>
+		</s:BorderContainer>
+		
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/charts/SeriesSlideExample.mxml b/tourdeflexmodules/src/spark/charts/SeriesSlideExample.mxml
new file mode 100644
index 0000000..d7783e7
--- /dev/null
+++ b/tourdeflexmodules/src/spark/charts/SeriesSlideExample.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">
+	
+	<fx:Script>
+		<![CDATA[
+			
+			import mx.collections.ArrayCollection;
+			
+			[Bindable]
+			private var companyAAC:ArrayCollection = new ArrayCollection( [
+				{ Date: "25-Jul", Open: 40.75,  High: 40.75, Low: 40.24, Close:40.31},
+				{ Date: "26-Jul", Open: 39.98,  High: 40.78, Low: 39.97, Close:40.34},
+				{ Date: "27-Jul", Open: 40.38,  High: 40.66, Low: 40, Close:40.63},
+				{ Date: "28-Jul", Open: 40.49,  High: 40.99, Low: 40.3, Close:40.98},
+				{ Date: "29-Jul", Open: 40.13,  High: 40.4, Low: 39.65, Close:39.95},
+				{ Date: "1-Aug", Open: 39.00,  High: 39.50, Low: 38.7, Close:38.6}, 
+				{ Date: "2-Aug", Open: 38.68,  High: 39.34, Low: 37.75, Close:38.84}, 
+				{ Date: "3-Aug", Open: 38.76,  High: 38.76, Low: 38.03, Close:38.12}, 
+				{ Date: "4-Aug", Open: 37.98,  High: 37.98, Low: 36.56, Close:36.69},                       
+				{ Date: "5-Aug", Open: 36.61,  High: 37, Low: 36.48, Close:36.86} ]);
+			
+			[Bindable]
+			private var companyBAC:ArrayCollection = new ArrayCollection( [
+				{ Date: "25-Jul", Open: 18.50,  High: 19, Low: 18.48, Close:18.86},
+				{ Date: "26-Jul", Open: 19.56,  High: 19.98, Low: 18.6, Close:18.69},                       
+				{ Date: "27-Jul", Open: 20.81,  High: 20.99, Low: 20.03, Close:20.12}, 
+				{ Date: "28-Jul", Open: 20.70,  High: 21.00, Low: 19.5, Close:20.84}, 
+				{ Date: "29-Jul", Open: 21.7,  High: 21.79, Low: 20.45, Close:20.6}, 
+				{ Date: "1-Aug", Open: 22.45,  High: 22.65, Low: 21.65, Close:21.95},
+				{ Date: "2-Aug", Open: 22.56,  High: 22.6, Low: 22.05, Close:22.98},
+				{ Date: "3-Aug", Open: 22.42,  High: 22.70, Low: 22.1, Close:22.63},
+				{ Date: "4-Aug", Open: 21.67,  High: 22.82, Low: 21.67, Close:22.34},
+				{ Date: "5-Aug", Open: 22.44,  High: 22.85, Low: 22.12, Close:22.31} ]);
+			
+		]]>
+	</fx:Script>
+	
+	<fx:Declarations>
+		<mx:SeriesSlide id="slideIn" duration="1000" direction="up"/>
+		<mx:SeriesSlide id="slideOut" duration="1000" direction="down"/>
+	</fx:Declarations>
+	
+	
+	<s:Panel title="Slide Effect" width="100%" height="100%">
+		
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<mx:CandlestickChart id="candlestickchart" height="100%" paddingRight="5" paddingLeft="5" color="0x323232"
+							 showDataTips="true" dataProvider="{companyAAC}">
+			
+			<mx:verticalAxis>
+				<mx:LinearAxis baseAtZero="false" />
+			</mx:verticalAxis>
+			
+			<mx:horizontalAxis>
+				<mx:CategoryAxis categoryField="Date" title="Date"/>
+			</mx:horizontalAxis>
+			
+			<mx:series>
+				<mx:CandlestickSeries  
+					openField="Open" highField="High" 
+					lowField="Low" closeField="Close"
+					showDataEffect="{slideIn}" 
+					hideDataEffect="{slideOut}"/>
+			</mx:series>
+		</mx:CandlestickChart>
+		
+		<s:BorderContainer color="0x323232" width="30%" borderColor="0xDCDCDC" borderStyle="solid" height="100%">
+			
+			<s:layout>
+				<s:VerticalLayout paddingLeft="5" paddingRight="0" paddingTop="5" />
+			</s:layout>
+			
+			<s:Label color="0x0050AA" width="100%"
+					 text="Choose a company to view recent stock data."/>
+			
+			<s:RadioButton groupName="stocks" label="View Company A"
+						   selected="true" click="candlestickchart.dataProvider=companyAAC"/>
+			<s:RadioButton groupName="stocks" label="View Company B"
+						   click="candlestickchart.dataProvider=companyBAC"/>
+		</s:BorderContainer>
+		
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/charts/SeriesZoomExample.mxml b/tourdeflexmodules/src/spark/charts/SeriesZoomExample.mxml
new file mode 100644
index 0000000..1be8888
--- /dev/null
+++ b/tourdeflexmodules/src/spark/charts/SeriesZoomExample.mxml
@@ -0,0 +1,106 @@
+<?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 companyAAC:ArrayCollection = new ArrayCollection( [
+				{ Date: "25-Jul", Open: 40.75,  High: 40.75, Low: 40.24, Close:40.31},
+				{ Date: "26-Jul", Open: 39.98,  High: 40.78, Low: 39.97, Close:40.34},
+				{ Date: "27-Jul", Open: 40.38,  High: 40.66, Low: 40, Close:40.63},
+				{ Date: "28-Jul", Open: 40.49,  High: 40.99, Low: 40.3, Close:40.98},
+				{ Date: "29-Jul", Open: 40.13,  High: 40.4, Low: 39.65, Close:39.95},
+				{ Date: "1-Aug", Open: 39.00,  High: 39.50, Low: 38.7, Close:38.6}, 
+				{ Date: "2-Aug", Open: 38.68,  High: 39.34, Low: 37.75, Close:38.84}, 
+				{ Date: "3-Aug", Open: 38.76,  High: 38.76, Low: 38.03, Close:38.12}, 
+				{ Date: "4-Aug", Open: 37.98,  High: 37.98, Low: 36.56, Close:36.69},                       
+				{ Date: "5-Aug", Open: 36.61,  High: 37, Low: 36.48, Close:36.86} ]);
+			
+			[Bindable]
+			private var companyBAC:ArrayCollection = new ArrayCollection( [
+				{ Date: "25-Jul", Open: 18.50,  High: 19, Low: 18.48, Close:18.86},
+				{ Date: "26-Jul", Open: 19.56,  High: 19.98, Low: 18.6, Close:18.69},                       
+				{ Date: "27-Jul", Open: 20.81,  High: 20.99, Low: 20.03, Close:20.12}, 
+				{ Date: "28-Jul", Open: 20.70,  High: 21.00, Low: 19.5, Close:20.84}, 
+				{ Date: "29-Jul", Open: 21.7,  High: 21.79, Low: 20.45, Close:20.6}, 
+				{ Date: "1-Aug", Open: 22.45,  High: 22.65, Low: 21.65, Close:21.95},
+				{ Date: "2-Aug", Open: 22.56,  High: 22.6, Low: 22.05, Close:22.98},
+				{ Date: "3-Aug", Open: 22.42,  High: 22.70, Low: 22.1, Close:22.63},
+				{ Date: "4-Aug", Open: 21.67,  High: 22.82, Low: 21.67, Close:22.34},
+				{ Date: "5-Aug", Open: 22.44,  High: 22.85, Low: 22.12, Close:22.31} ]);
+			
+		]]>
+	</fx:Script>
+	
+	<fx:Declarations>
+		<mx:SeriesZoom id="zoomIn" duration="1000"/>
+		<mx:SeriesZoom id="zoomOut" duration="1000"/>
+	</fx:Declarations>
+	
+	
+	<s:Panel title="Zoom Effect" width="100%" height="100%">
+		
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<mx:CandlestickChart id="candlestickchart" height="100%" paddingRight="5" paddingLeft="5" color="0x323232"
+							 showDataTips="true" dataProvider="{companyAAC}">
+			
+			<mx:verticalAxis>
+				<mx:LinearAxis baseAtZero="false" />
+			</mx:verticalAxis>
+			
+			<mx:horizontalAxis>
+				<mx:CategoryAxis categoryField="Date" title="Date"/>
+			</mx:horizontalAxis>
+			
+			<mx:series>
+				<mx:CandlestickSeries  
+					openField="Open" highField="High" 
+					lowField="Low" closeField="Close"
+					showDataEffect="{zoomIn}" 
+					hideDataEffect="{zoomOut}"/>
+			</mx:series>
+		</mx:CandlestickChart>
+		
+		<s:BorderContainer color="0x323232" width="30%" borderColor="0xDCDCDC" borderStyle="solid" height="100%">
+			<s:layout>
+				<s:VerticalLayout paddingLeft="5" paddingRight="0" paddingTop="5" />
+			</s:layout>
+			
+			<s:Label color="0x0050AA" width="100%"
+					 text="Choose a company to view recent stock data."/>
+			
+			<s:RadioButton groupName="stocks" label="View Company A"
+						   selected="true" click="candlestickchart.dataProvider=companyAAC"/>
+			<s:RadioButton groupName="stocks" label="View Company B"
+						   click="candlestickchart.dataProvider=companyBAC"/>
+		</s:BorderContainer>
+		
+	</s:Panel>
+</s:Module>
+
diff --git a/tourdeflexmodules/src/spark/components/SearchBox.as b/tourdeflexmodules/src/spark/components/SearchBox.as
new file mode 100644
index 0000000..e263c2c
--- /dev/null
+++ b/tourdeflexmodules/src/spark/components/SearchBox.as
@@ -0,0 +1,176 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package
+{
+	import flash.events.Event;
+	import flash.events.KeyboardEvent;
+	import flash.events.MouseEvent;
+	import flash.geom.Point;
+	import flash.ui.Keyboard;
+	
+	import mx.collections.ArrayCollection;
+	import mx.controls.Button;
+	import mx.controls.List;
+	import mx.controls.TextInput;
+	import mx.core.UIComponent;
+	import mx.events.FlexEvent;
+	import mx.events.FlexMouseEvent;
+	import mx.events.ListEvent;
+	import mx.managers.PopUpManager;
+	
+	[Event(name="textChange", type="flash.events.Event")]
+	[Event(name="itemSelected", type="SearchBoxEvent")]
+	
+	public class SearchBox extends UIComponent
+	{
+		[Embed("assets/icon_close.png")]
+		private var closeIcon:Class;
+		
+		private var textInput:TextInput;
+		private var closeButton:Button;
+		private var list:List;
+		
+		private var isListVisible:Boolean = false;
+		
+		public var text:String;
+		
+		public function set dataProvider(dp:ArrayCollection):void
+		{
+			list.dataProvider = dp;
+			if (dp != null && dp.length > 0)
+			{
+				 if (!isListVisible) popup();
+				 list.selectedIndex = 0;
+			}
+			else
+			{
+				 if (isListVisible) removePopup();
+			}
+		}
+		
+		override protected function createChildren():void
+		{
+			super.createChildren();
+
+            textInput = new TextInput();
+			textInput.addEventListener(Event.CHANGE, textInput_changeHandler);
+			textInput.addEventListener(KeyboardEvent.KEY_DOWN, textInput_keyDownHandler);
+            addChild(textInput);
+            
+            closeButton = new Button();
+            closeButton.setStyle("icon", closeIcon)
+            closeButton.setStyle("skin", null)
+            closeButton.addEventListener(MouseEvent.CLICK, closeHandler);
+			closeButton.width = 20;
+            addChild(closeButton);
+			
+			list = new List();
+			list.setStyle("dropShadowEnabled", true);
+			list.addEventListener(ListEvent.ITEM_CLICK, selectItem);
+            systemManager.addEventListener(Event.RESIZE, removePopup, false, 0, true);
+		}
+	   	
+		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
+		{
+			super.updateDisplayList(unscaledWidth, unscaledHeight);
+
+			textInput.width = unscaledWidth - closeButton.width;
+			textInput.height = unscaledHeight;
+			
+			closeButton.height = unscaledHeight;
+			closeButton.move(unscaledWidth - closeButton.width, 0);
+		}
+		
+        override protected function measure():void 
+        {
+            super.measure();
+            this.measuredWidth = 160;
+            this.measuredHeight = textInput.measuredHeight;
+        }
+
+		private function textInput_keyDownHandler(event:KeyboardEvent):void
+		{
+			switch (event.keyCode) 
+			{
+				case Keyboard.DOWN:
+					if (isListVisible)
+						list.selectedIndex++;
+					else
+						popup();					
+    				break;
+				case Keyboard.UP:
+					if (isListVisible && list.selectedIndex > 0)
+					{
+						list.selectedIndex--;
+					}
+					textInput.setSelection(textInput.text.length, textInput.text.length);
+    				break;
+				case Keyboard.ENTER:
+					if (isListVisible) selectItem();
+    				break;
+				case Keyboard.ESCAPE:
+					if (isListVisible) removePopup();
+    				break;
+			}
+		}
+
+	    private function textInput_changeHandler(event:Event):void
+	    {
+	    	text = textInput.text;
+	    	dispatchEvent(new Event("textChange"));	
+	    }
+
+	    private function list_mouseDownOutsideHandler(event:MouseEvent):void
+	    {
+    		removePopup();
+	    }
+
+	    private function selectItem(event:ListEvent = null):void
+	    {
+	    	dispatchEvent(new SearchBoxEvent(SearchBoxEvent.ITEM_SELECTED, list.selectedItem));	
+	    	removePopup();
+	    }
+
+		private function popup():void
+		{
+			PopUpManager.addPopUp(list, this);
+        	isListVisible = true;
+			list.width = textInput.width;
+	        var point:Point = new Point(0, unscaledHeight);
+    	    point = localToGlobal(point);
+    	    point = list.parent.globalToLocal(point);
+        	list.move(point.x, point.y);
+            list.addEventListener(FlexMouseEvent.MOUSE_DOWN_OUTSIDE, list_mouseDownOutsideHandler);
+		}
+
+		private function removePopup(event:Event=null):void
+		{
+			PopUpManager.removePopUp(list);
+            list.removeEventListener(FlexMouseEvent.MOUSE_DOWN_OUTSIDE, list_mouseDownOutsideHandler);
+			isListVisible = false;	
+		}
+		
+		private function closeHandler(event:MouseEvent):void
+		{
+			textInput.text = "";
+			textInput.setFocus();
+		}
+		
+	}
+}
\ No newline at end of file
diff --git a/tourdeflexmodules/src/spark/components/SearchBoxEvent.as b/tourdeflexmodules/src/spark/components/SearchBoxEvent.as
new file mode 100644
index 0000000..28e744f
--- /dev/null
+++ b/tourdeflexmodules/src/spark/components/SearchBoxEvent.as
@@ -0,0 +1,35 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package
+{
+	import flash.events.Event;
+
+	public class SearchBoxEvent extends Event
+	{
+		public static const ITEM_SELECTED:String = "itemSelected";
+	
+		public var item:Object;
+		
+		public function SearchBoxEvent(type:String, item:Object, bubbles:Boolean = true, cancelable:Boolean = false)
+   		{
+   			this.item = item;
+			super(type, bubbles, cancelable);
+		}
+	}
+}
\ No newline at end of file
diff --git a/tourdeflexmodules/src/spark/components/SearchExample.mxml b/tourdeflexmodules/src/spark/components/SearchExample.mxml
new file mode 100644
index 0000000..f6a8d06
--- /dev/null
+++ b/tourdeflexmodules/src/spark/components/SearchExample.mxml
@@ -0,0 +1,81 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s: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:Style>
+		@namespace s "library://ns.adobe.com/flex/spark";
+		@namespace mx "library://ns.adobe.com/flex/mx";
+		@namespace local "*";
+		
+		s|Label {
+			color: #000000;
+		}
+		
+	</fx:Style>
+	
+	<fx:Script>
+		<![CDATA[
+			
+			import mx.collections.ArrayCollection;
+			
+			private var names:ArrayCollection = new ArrayCollection( 
+				["John Smith", "Jane Doe", "Paul Dupont", "Liz Jones", "Marie Taylor"]);
+			
+			private function searchName(item:Object):Boolean
+			{
+				return item.toLowerCase().search(searchBox.text) != -1;
+			}
+			
+			private function textChangeHandler():void
+			{
+				names.filterFunction = searchName;
+				names.refresh();
+				searchBox.dataProvider = names;
+			}
+			
+			private function itemSelectedHandler(event:SearchBoxEvent):void
+			{
+				fullName.text = event.item as String;	
+			}
+			
+		]]>
+	</fx:Script>
+	
+	<s:Panel title="Components Samples" width="100%" height="100%">
+		
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<s:HGroup >
+			<s:Label text="Type a few characters to search:" />
+			<local:SearchBox id="searchBox" textChange="textChangeHandler()" itemSelected="itemSelectedHandler(event)"/>
+		</s:HGroup>
+		
+		<mx:FormItem label="You selected:" >
+			<s:TextInput id="fullName"/>
+		</mx:FormItem>
+		
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/components/VideoPlayer.mxml b/tourdeflexmodules/src/spark/components/VideoPlayer.mxml
new file mode 100644
index 0000000..b4797ff
--- /dev/null
+++ b/tourdeflexmodules/src/spark/components/VideoPlayer.mxml
@@ -0,0 +1,96 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009"  
+				   xmlns:s="library://ns.adobe.com/flex/spark" 
+				   xmlns:mx="library://ns.adobe.com/flex/mx" 
+				   borderStyle="solid" 
+				   backgroundColor="#333333"
+				   initialize="init(event)">
+	
+	<fx:Metadata>
+		[Event(name="complete", type="mx.events.VideoEvent")]
+		[Event(name="mediaPlayerStateChange", type="org.osmf.events.MediaPlayerStateChangeEvent")]
+	</fx:Metadata>
+	
+	<fx:Script>
+		<![CDATA[
+			import mx.events.ItemClickEvent;
+			import mx.events.FlexEvent;
+			import mx.events.VideoEvent;
+			
+			import org.osmf.events.MediaPlayerStateChangeEvent;
+			import org.osmf.events.TimeEvent;
+			import org.osmf.utils.OSMFSettings;
+			
+			[Bindable] public var videoWidth:int = 240;
+			[Bindable] public var videoHeight:int = 180;
+			[Bindable] public var source:String; 
+			
+			protected function init(event:FlexEvent):void {
+				OSMFSettings.enableStageVideo = false;
+			}	
+			
+			private function buttonBarClick(event:ItemClickEvent):void
+			{
+				switch (event.index)
+				{
+					case 0:
+						videoDisplay.play();
+						break;
+					case 1:
+						videoDisplay.pause();
+						break;
+					case 2:
+						videoDisplay.stop();
+						break;
+				}
+			}
+			
+			private function playHeadUpdateHandler(event:TimeEvent):void
+			{
+				progressBar.setProgress(event.time, videoDisplay.duration);
+			}
+			
+		]]>
+	</fx:Script>
+	
+	<s:layout>
+		<s:VerticalLayout verticalAlign="middle" horizontalAlign="center" />
+	</s:layout>
+	
+	<s:VideoDisplay id="videoDisplay" width="{videoWidth}" height="{videoHeight}" autoPlay="false"
+					currentTimeChange="playHeadUpdateHandler(event)"
+					source="{source}"
+					complete="dispatchEvent(event)"
+					mediaPlayerStateChange="dispatchEvent(event)"/>
+	
+	<mx:ProgressBar id="progressBar" mode="manual" minimum="0" maximum="{videoDisplay.duration}" 
+					label="" top="{videoHeight + 8}" left="4" right="4"/>
+	
+	<mx:ButtonBar id="bb" itemClick="buttonBarClick(event)" top="{videoHeight + 20}" bottom="4" 
+				  horizontalCenter="0" toolTipField="toolTip">
+		<mx:dataProvider>
+			<fx:Object icon="@Embed('assets/control_play_blue.png')" toolTip="Play"/>
+			<fx:Object icon="@Embed('assets/control_pause_blue.png')" toolTip="Pause"/>
+			<fx:Object icon="@Embed('assets/control_stop_blue.png')" toolTip="Stop"/>
+		</mx:dataProvider>
+	</mx:ButtonBar>
+	
+</s:BorderContainer>
diff --git a/tourdeflexmodules/src/spark/components/VideoPlayerExample.mxml b/tourdeflexmodules/src/spark/components/VideoPlayerExample.mxml
new file mode 100644
index 0000000..4ecf77b
--- /dev/null
+++ b/tourdeflexmodules/src/spark/components/VideoPlayerExample.mxml
@@ -0,0 +1,39 @@
+<?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="*">
+	
+	<s:Panel title="Components Samples" width="100%" height="100%">
+		
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<local:VideoPlayer source="assets/FlexInstaller.mp4"
+						   complete="log.text += 'complete\n'"
+						   mediaPlayerStateChange="log.text += event.state.toString() + '\n'"/>
+		
+		<s:TextArea id="log" height="220"/>
+		
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/components/VideoPlayerModule.mxml b/tourdeflexmodules/src/spark/components/VideoPlayerModule.mxml
new file mode 100644
index 0000000..6ec18a7
--- /dev/null
+++ b/tourdeflexmodules/src/spark/components/VideoPlayerModule.mxml
@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009"  
+		   xmlns:s="library://ns.adobe.com/flex/spark" 
+		   xmlns:mx="library://ns.adobe.com/flex/mx"  
+		   xmlns="*"
+		   layout="horizontal" 
+		   paddingTop="8"
+		   initialize="init(event)">
+	
+	<fx:Script>
+		<![CDATA[
+			import mx.events.FlexEvent;
+			
+			import org.osmf.utils.OSMFSettings;
+			
+			protected function init(event:FlexEvent):void {
+				OSMFSettings.enableStageVideo = false;
+			}	
+		]]>
+	</fx:Script>	
+	
+	<VideoPlayer source="assets/FlexInstaller.mp4"
+				 complete="log.text += 'complete\n'"
+				 mediaPlayerStateChange="log.text += event.state + '\n'"/>
+	
+	<s:TextArea id="log" height="220"/>
+	
+</mx:Module>
diff --git a/tourdeflexmodules/src/spark/components/VideoPlayerModuleLoader.mxml b/tourdeflexmodules/src/spark/components/VideoPlayerModuleLoader.mxml
new file mode 100644
index 0000000..f52e4e9
--- /dev/null
+++ b/tourdeflexmodules/src/spark/components/VideoPlayerModuleLoader.mxml
@@ -0,0 +1,35 @@
+<?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.controls.Alert;
+		]]>
+	</fx:Script>
+
+	<mx:ModuleLoader url="VideoPlayerModule.swf" width="100%" height="100%" error="Alert.show(event.errorText)"/>
+	
+	<s:VideoDisplay/>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/components/assets/FlexInstaller.mp4 b/tourdeflexmodules/src/spark/components/assets/FlexInstaller.mp4
new file mode 100644
index 0000000..8c877c4
--- /dev/null
+++ b/tourdeflexmodules/src/spark/components/assets/FlexInstaller.mp4
Binary files differ
diff --git a/tourdeflexmodules/src/spark/components/assets/control_pause_blue.png b/tourdeflexmodules/src/spark/components/assets/control_pause_blue.png
new file mode 100644
index 0000000..ec61099
--- /dev/null
+++ b/tourdeflexmodules/src/spark/components/assets/control_pause_blue.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/components/assets/control_play_blue.png b/tourdeflexmodules/src/spark/components/assets/control_play_blue.png
new file mode 100644
index 0000000..f8c8ec6
--- /dev/null
+++ b/tourdeflexmodules/src/spark/components/assets/control_play_blue.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/components/assets/control_stop_blue.png b/tourdeflexmodules/src/spark/components/assets/control_stop_blue.png
new file mode 100644
index 0000000..e6f75d2
--- /dev/null
+++ b/tourdeflexmodules/src/spark/components/assets/control_stop_blue.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/components/assets/icon_close.png b/tourdeflexmodules/src/spark/components/assets/icon_close.png
new file mode 100644
index 0000000..bf9be79
--- /dev/null
+++ b/tourdeflexmodules/src/spark/components/assets/icon_close.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/containers/BorderExample.mxml b/tourdeflexmodules/src/spark/containers/BorderExample.mxml
new file mode 100644
index 0000000..2a4c65c
--- /dev/null
+++ b/tourdeflexmodules/src/spark/containers/BorderExample.mxml
@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<!-- http://blog.flexexamples.com/2009/09/04/setting-the-corner-radius-on-a-spark-border-container-in-flex-4/ -->
+<s:Module name="Spark_Border_cornerRadius_test"
+			   xmlns:fx="http://ns.adobe.com/mxml/2009"
+			   xmlns:mx="library://ns.adobe.com/flex/mx"
+			   xmlns:s="library://ns.adobe.com/flex/spark">
+	
+	<s:Panel title="BorderContainer Sample" width="100%" height="100%">
+		
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<s:VGroup id="mainGroup" width="100%" 
+				  horizontalCenter="50" top="10">
+			<s:HGroup gap="50" paddingBottom="15">
+				<s:VGroup>
+					<s:HGroup verticalAlign="middle">
+						<s:Label text="Corner Radius:"/>
+						<s:HSlider id="slider"
+								   minimum="0"
+								   maximum="100"
+								   value="2" />
+					</s:HGroup>
+					<s:HGroup verticalAlign="middle">
+						<s:Label text="Border Weight:"/>
+						<s:NumericStepper id="weight" value="3"/>
+					</s:HGroup>
+					<s:HGroup verticalAlign="middle">
+						<s:Label text="Border Color:"/>
+						<mx:ColorPicker id="color" color="0x000000"/>
+					</s:HGroup>
+					<s:HGroup verticalAlign="middle">
+						<s:Label text="Drop Shadow:"/>
+						<s:CheckBox id="chkShadow" selected="true"/>
+					</s:HGroup>	
+				</s:VGroup>
+				
+				<s:BorderContainer id="brdr" width="200"
+						  cornerRadius="{slider.value}" borderWeight="{weight.value}" 
+						  borderColor="{color.selectedColor}" dropShadowVisible="{chkShadow.selected}"
+						  backgroundColor="0x3399ff">
+				</s:BorderContainer>	
+			</s:HGroup>
+			
+			<s:Label bottom="10" horizontalCenter="0" width="95%" verticalAlign="justify" 
+					 text="The Border class provides a container class that can be styled with a border and
+a background fill or image. It has many of the same styles as HaloBorder and is used in a similar way to the
+Halo container classes such as Box and Canvas. Examples of styles that are supported are borderWeight, borderColor, 
+backgroundColor, backgroundImage, cornerRadius and dropShadowVisible."/>
+		</s:VGroup>
+		
+	</s:Panel>
+	
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/containers/Contact.as b/tourdeflexmodules/src/spark/containers/Contact.as
new file mode 100644
index 0000000..838a300
--- /dev/null
+++ b/tourdeflexmodules/src/spark/containers/Contact.as
@@ -0,0 +1,34 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 Contact
+	{
+		public var name:String;
+		public var address:String;
+		public var city:String;
+		public var state:String;
+		public var zip:String;
+		
+		public function Contact()
+		{
+		}
+	}
+}
\ No newline at end of file
diff --git a/tourdeflexmodules/src/spark/containers/GroupExample.mxml b/tourdeflexmodules/src/spark/containers/GroupExample.mxml
new file mode 100644
index 0000000..abe90d5
--- /dev/null
+++ b/tourdeflexmodules/src/spark/containers/GroupExample.mxml
@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009" 
+			   xmlns:s="library://ns.adobe.com/flex/spark" 
+			   xmlns:mx="library://ns.adobe.com/flex/halo">
+	
+	<s:layout>
+		<s:BasicLayout id="bl"/>
+	</s:layout>
+	
+	<s:Panel id="mainPanel" title="Group Sample" width="100%" height="100%">
+		
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+		</s:layout>
+		
+		<s:HGroup>
+			<s:Group>
+				<!-- Default layout is basic, therefore constraints are used for placement -->
+				<s:Label text="Apples" top="0"/>
+				<s:Label text="Oranges" top="13"/>
+				<s:Label text="Bananas" top="26"/>		
+			</s:Group>
+			
+			<s:Group id="horizontalPanel">
+				<s:layout>
+					<s:HorizontalLayout/>
+				</s:layout>
+				<s:Label text="Apples" />
+				<s:Label text="Oranges" />
+				<s:Label text="Bananas" />	
+			</s:Group>
+			
+			<s:Group id="vericalPanel">
+				<s:layout>
+					<s:VerticalLayout/>
+				</s:layout>
+				<s:Label text="Apples" />
+				<s:Label text="Oranges" />
+				<s:Label text="Bananas" />	
+			</s:Group>
+		</s:HGroup>
+		
+		<s:Label verticalAlign="justify" 
+				 left="3" bottom="30" width="100%" 
+				 text="The Group class defines a container that includes a content area for its children.
+The Group has a basic layout by default, which means it lays out elements within the group by 
+their individual constraints. You can specify a different layout to use within the group such 
+as shown in the inner groups (basic, horizontal and vertical layout groups)."/>
+			
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/containers/PanelExample.mxml b/tourdeflexmodules/src/spark/containers/PanelExample.mxml
new file mode 100644
index 0000000..f712fc0
--- /dev/null
+++ b/tourdeflexmodules/src/spark/containers/PanelExample.mxml
@@ -0,0 +1,65 @@
+<?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">
+	
+	<s:Panel id="mainPanel" title="Panel Sample" width="100%" height="100%">
+
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+		</s:layout>
+			
+		<s:HGroup>
+			<s:Panel title="Basic Layout Panel">
+				<!-- Default layout is basic, therefore constraints are used for placement -->
+				<s:Label text="Apples" top="0"/>
+				<s:Label text="Oranges" top="13"/>
+				<s:Label text="Bananas" top="26"/>		
+			</s:Panel>
+			
+			<s:Panel id="horizontalPanel" title="Horizontal Layout Panel">
+				<s:layout>
+					<s:HorizontalLayout/>
+				</s:layout>
+				<s:Label text="Apples" />
+				<s:Label text="Oranges" />
+				<s:Label text="Bananas" />	
+			</s:Panel>
+			
+			<s:Panel id="vericalPanel" title="Vertical Layout Panel">
+				<s:layout>
+					<s:VerticalLayout/>
+				</s:layout>
+				<s:Label text="Apples" />
+				<s:Label text="Oranges" />
+				<s:Label text="Bananas" />	
+			</s:Panel>
+		</s:HGroup>
+			
+		<s:Label verticalAlign="justify" 
+				 left="5" bottom="15" width="95%" 
+				 text="The Panel class defines a container that includes a title bar, a caption, a border, and a content area for its children.
+The Panel has a basic layout by default, which means it lays out elements within the panel by their individual constraints. You can specify a different layout to use within the panel such 
+as shown in the inner panels (basic, horizontal and vertical layout) panels." />
+		
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/containers/SampleHGroup.mxml b/tourdeflexmodules/src/spark/containers/SampleHGroup.mxml
new file mode 100644
index 0000000..8f9ae0d
--- /dev/null
+++ b/tourdeflexmodules/src/spark/containers/SampleHGroup.mxml
@@ -0,0 +1,92 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s: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[
+			private function applyProperties():void
+			{
+				this.mainHGroup.paddingTop = this.padTop.value;
+				this.mainHGroup.paddingLeft = this.padLeft.value;
+				this.mainHGroup.paddingRight = this.padRight.value;
+				this.mainHGroup.paddingBottom = this.padBottom.value;
+				this.mainHGroup.gap = this.gap.value;
+			}
+		]]>
+	</fx:Script>
+	
+	<s:Panel title="HGroup" width="100%" height="100%">
+		
+		<s:HGroup left="300" top="25" id="mainHGroup">
+			<s:Rect width="100" height="75">
+				<s:fill>
+					<s:SolidColor color="0xd54f4f"/>
+				</s:fill>
+			</s:Rect>
+			<s:Rect width="100" height="75">
+				<s:fill>
+					<s:SolidColor color="0x2f977d"/>
+				</s:fill>
+			</s:Rect>
+			<s:Rect width="100" height="75">
+				<s:fill>
+					<s:SolidColor color="0xfffca2"/>
+				</s:fill>
+			</s:Rect>
+		</s:HGroup>    
+		
+		<s:VGroup top="10" left="15">
+			<s:HGroup verticalAlign="middle">
+				<s:Label text="Gap:"/>
+				<s:NumericStepper id="gap" maximum="400"/>
+			</s:HGroup>    
+			
+			<s:HGroup verticalAlign="middle">
+				<s:Label text="Padding Top:"/>
+				<s:NumericStepper id="padTop" maximum="400"/>
+			</s:HGroup>
+			
+			<s:HGroup verticalAlign="middle">
+				<s:Label text="Padding Left:"/>
+				<s:NumericStepper id="padLeft" maximum="400"/>
+			</s:HGroup>
+			
+			<s:HGroup verticalAlign="middle">
+				<s:Label text="Padding Right:"/>
+				<s:NumericStepper id="padRight" maximum="400"/>
+			</s:HGroup>
+			
+			<s:HGroup verticalAlign="middle">
+				<s:Label text="Padding Bottom:"/>
+				<s:NumericStepper id="padBottom" maximum="400"/>
+			</s:HGroup>    
+			
+			<s:Button label="Apply Properties" click="this.applyProperties()"/>
+			<s:Label width="75%" horizontalCenter="0"
+					 text="The HGroup container is an instance of the Group container that uses the HorizontalLayout class. You can use
+					 the properties of the HGroup class to modify the characteristics of the HorizontalLayout class."/>
+		</s:VGroup>
+		
+		
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/containers/SampleVGroup.mxml b/tourdeflexmodules/src/spark/containers/SampleVGroup.mxml
new file mode 100644
index 0000000..5831423
--- /dev/null
+++ b/tourdeflexmodules/src/spark/containers/SampleVGroup.mxml
@@ -0,0 +1,92 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s: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[
+			private function applyProperties():void
+			{
+				this.mainVGroup.paddingTop = this.padTop.value;
+				this.mainVGroup.paddingLeft = this.padLeft.value;
+				this.mainVGroup.paddingRight = this.padRight.value;
+				this.mainVGroup.paddingBottom = this.padBottom.value;
+				this.mainVGroup.gap = this.gap.value;
+			}
+		]]>
+	</fx:Script>
+	
+	<s:Panel title="VGroup Sample" width="100%" height="100%">
+		
+		<s:HGroup width="100%" height="100%" top="10" left="10">
+			<s:VGroup top="10" left="10" width="172">
+				<s:HGroup verticalAlign="middle">
+					<s:Label text="Gap:"/>
+					<s:NumericStepper id="gap" maximum="400"/>
+				</s:HGroup>	
+				
+				<s:HGroup verticalAlign="middle">
+					<s:Label text="Padding Top:"/>
+					<s:NumericStepper id="padTop" maximum="400"/>
+				</s:HGroup>
+				
+				<s:HGroup verticalAlign="middle">
+					<s:Label text="Padding Left:"/>
+					<s:NumericStepper id="padLeft" maximum="400"/>
+				</s:HGroup>
+				
+				<s:HGroup verticalAlign="middle">
+					<s:Label text="Padding Right:"/>
+					<s:NumericStepper id="padRight" maximum="400"/>
+				</s:HGroup>
+				
+				<s:HGroup verticalAlign="middle">
+					<s:Label text="Padding Bottom:"/>
+					<s:NumericStepper id="padBottom" maximum="400"/>
+				</s:HGroup>	
+				
+				<s:Button label="Apply Properties" click="this.applyProperties()"/>
+			</s:VGroup>
+			<s:VGroup left="300" top="10" id="mainVGroup">
+				<s:Rect width="100" height="75">
+					<s:fill>
+						<s:SolidColor color="0xd54f4f"/>
+					</s:fill>
+				</s:Rect>
+				<s:Rect width="100" height="75">
+					<s:fill>
+						<s:SolidColor color="0x2f977d"/>
+					</s:fill>
+				</s:Rect>
+				<s:Rect width="100" height="75">
+					<s:fill>
+						<s:SolidColor color="0xfffca2"/>
+					</s:fill>
+				</s:Rect>
+			</s:VGroup>	
+			<mx:Spacer width="10"/>
+			<s:Label width="40%" horizontalCenter="0" 
+					 text="The VGroup container is an instance of the Group container that uses the VerticalLayout class. You can use the properties of the VGroup class to modify the characteristics of the VerticalLayout class." height="100%"/>
+				
+		</s:HGroup>
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/containers/SampleVerticalHorizontalAlign.mxml b/tourdeflexmodules/src/spark/containers/SampleVerticalHorizontalAlign.mxml
new file mode 100644
index 0000000..06512e3
--- /dev/null
+++ b/tourdeflexmodules/src/spark/containers/SampleVerticalHorizontalAlign.mxml
@@ -0,0 +1,87 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<!-- http://evtimmy.com/2010/01/verticalalign-for-vgroup-and-horizontalalign-for-hgroup/ -->
+<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">
+	
+	<s:Panel id="mainPanel" title="Panel Sample" width="100%" height="100%">
+
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+		</s:layout>
+			
+		<s:HGroup verticalAlign="middle" height="100%" >
+			<s:Label text="VGroup" rotation="-90" />
+			<s:BorderContainer minWidth="0" minHeight="0">
+				<s:VGroup height="{heightSlider.value}"
+						  verticalAlign="{verticalAlignChoice.selectedItem}"
+						  gap="0">
+					<s:Label text="Lorem ipsum dolor sit amet, " height="22" verticalAlign="middle"/>
+					<s:Label text="consectetur adipiscing elit." height="22" verticalAlign="middle"/>
+				</s:VGroup>
+			</s:BorderContainer>
+			
+			<s:Label text="VGroup in Scroller" rotation="-90" />
+			<s:BorderContainer minWidth="0" minHeight="0">
+				<s:Scroller height="{heightSlider.value}">
+					<s:VGroup verticalAlign="{verticalAlignChoice.selectedItem}"
+							  gap="0">
+						<s:Label text="Lorem ipsum dolor sit amet, " height="22" verticalAlign="middle"/>
+						<s:Label text="consectetur adipiscing elit." height="22" verticalAlign="middle"/>
+					</s:VGroup>
+				</s:Scroller>
+			</s:BorderContainer>
+			
+			<s:Label text="List" rotation="-90" />
+			
+			<s:List minWidth="0" minHeight="0" height="{heightSlider.value+2}">
+				<s:layout>
+					<s:VerticalLayout requestedMinRowCount="0"
+									  verticalAlign="{verticalAlignChoice.selectedItem}"
+									  gap="0"/>
+				</s:layout>
+				<s:ArrayCollection>
+					<fx:String>Lorem ipsum dolor sit amet, </fx:String>
+					<fx:String>consectetur adipiscing elit.</fx:String>					
+				</s:ArrayCollection>
+			</s:List>
+		</s:HGroup>
+
+		<s:HGroup paddingTop="10" paddingLeft="10">
+			<s:HGroup>
+				<s:Label text="VerticalAlign:"/>
+				<s:DropDownList id="verticalAlignChoice" requireSelection="true" color="0x000000">
+					<s:dataProvider>
+						<s:ArrayCollection source="{'top bottom middle'.split(' ')}"/>
+					</s:dataProvider>
+				</s:DropDownList>
+			</s:HGroup>
+			<s:HGroup>
+				<s:Label text="Height:"/>
+				<s:HSlider id="heightSlider" minimum="0" maximum="425" value="100" width="300"/>
+			</s:HGroup>
+		</s:HGroup>	
+			
+		<s:Label text="This sample show the use of the verticalAlign and horizontalAlign properties for use with a VGroup and
+	HGroup accordingly."/>
+		
+	</s:Panel>
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/containers/SkinnableDataContainerExample.mxml b/tourdeflexmodules/src/spark/containers/SkinnableDataContainerExample.mxml
new file mode 100644
index 0000000..1fc5aec
--- /dev/null
+++ b/tourdeflexmodules/src/spark/containers/SkinnableDataContainerExample.mxml
@@ -0,0 +1,65 @@
+<?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">
+	
+	<s:Panel title="SkinnableDataContainer" width="100%" height="100%" >
+
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<s:VGroup>
+			<s:Label text="Famous Astronauts" fontWeight="bold" fontSize="14"/>
+			<s:SkinnableDataContainer horizontalCenter="-66" verticalCenter="0" width="301">
+				<s:layout>
+					<s:VerticalLayout/>
+				</s:layout>
+				<s:itemRenderer>
+					<fx:Component>
+						<s:ItemRenderer>
+							<s:VGroup horizontalCenter="0" verticalCenter="0">
+								<s:HGroup verticalAlign="middle">
+									<s:Label text="{data.firstName}"/>
+									<s:Label text="{data.lastName}"/>
+									<s:Label text="{data.phoneNumber}"/>
+									<mx:LinkButton label="{data.college}" color="0x3380DD" click="navigateToURL(new URLRequest(data.url), '_blank')"
+												   textDecoration="underline" fontWeight="normal" icon="@Embed('assets/arrow_icon_sm.png')" />
+								</s:HGroup>
+							</s:VGroup>
+						</s:ItemRenderer>
+					</fx:Component>
+				</s:itemRenderer>
+				
+				<s:ArrayCollection>
+					<fx:Object firstName="John" lastName="Glenn" phoneNumber="888-555-1111" college="West Point" url="http://www.usma.edu/"/>
+					<fx:Object firstName="Neil" lastName="Armstrong" phoneNumber="888-555-2222" college="Purdue" url="http://www.purdue.edu/"/>
+					<fx:Object firstName="Buzz" lastName="Aldrin" phoneNumber="888-555-3333" college="Muskingum" url="http://www.muskingum.edu/"/>
+					<fx:Object firstName="James" lastName="Lovell" phoneNumber="888-555-4444" college="US Naval Academy" url="http://www.usna.edu/"/>
+				</s:ArrayCollection>
+			</s:SkinnableDataContainer>
+		</s:VGroup>
+		<s:Label width="200" text="The SkinnableDataContainer is the skinnable version of the DataGroup and
+while it can hold visual elements, they are often used only to hold data items as children. Data items can be simple data items 
+such String and Number objects, and more complicated data items such as Object and XMLNode objects."/>
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/containers/TabNavigator1Example.mxml b/tourdeflexmodules/src/spark/containers/TabNavigator1Example.mxml
new file mode 100644
index 0000000..782b243
--- /dev/null
+++ b/tourdeflexmodules/src/spark/containers/TabNavigator1Example.mxml
@@ -0,0 +1,103 @@
+<?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 mx.events.ListEvent;
+			
+			[Bindable]
+			private var contact:Contact = new Contact();
+			
+			protected function submitBtn_clickHandler(event:MouseEvent):void
+			{
+				contact.name = nameTxt.text;
+				contact.address = address.text;
+				contact.city = city.text;
+				contact.state = state.text;
+				contact.zip = zip.text;
+				trace(contacts.contains(contact));
+				
+				if (!contacts.contains(contact))
+					contacts.addItem(contact);
+				contact = new Contact();
+			}
+			
+			protected function dg_itemClickHandler(event:ListEvent):void
+			{
+				contact = dg.selectedItem as Contact;
+			}
+			
+		]]>
+	</fx:Script>
+	
+	<fx:Declarations>
+		<s:ArrayCollection id="contacts"/>
+	</fx:Declarations>
+	
+	<s:Panel title="TabBar Sample" width="100%" height="100%">
+		<s:TabBar id="tabs" left="8" y="2" dataProvider="{vs}"/>
+		<mx:ViewStack id="vs" width="95%" height="85%" left="8" y="23">
+			<s:NavigatorContent label="Contact Info"  width="100%" height="100%">
+				<s:BorderContainer width="100%" height="100%" dropShadowVisible="false">
+					<mx:Form id="contactForm" defaultButton="{submitBtn}" width="100%" height="100%">
+						<mx:FormItem label="Name:">
+							<s:TextInput id="nameTxt" text="{contact.name}"/>
+						</mx:FormItem>
+						<mx:FormItem label="Address:">
+							<s:TextInput id="address" text="{contact.address}"/>
+						</mx:FormItem>
+						<mx:FormItem label="City:">
+							<s:TextInput id="city" text="{contact.city}"/>
+						</mx:FormItem>
+						<mx:FormItem label="State:">
+							<s:TextInput id="state" text="{contact.state}"/>
+						</mx:FormItem>
+						<mx:FormItem label="Zip:">
+							<s:TextInput id="zip" text="{contact.zip}" maxChars="5"/>
+						</mx:FormItem>
+						<mx:FormItem>
+							<s:Button id="submitBtn" label="Submit" click="submitBtn_clickHandler(event)"/>
+						</mx:FormItem>
+					</mx:Form>
+				</s:BorderContainer>
+			</s:NavigatorContent>
+			<s:NavigatorContent label="Contact List" width="100%" height="100%" >
+				<s:BorderContainer width="100%" height="100%" dropShadowVisible="false">
+					<mx:DataGrid id="dg" dataProvider="{contacts}" x="5" y="5"  doubleClickEnabled="true" 
+								 doubleClick="{tabs.selectedIndex=0}" itemClick="dg_itemClickHandler(event)">
+						<mx:columns>
+							<mx:DataGridColumn headerText="Name" dataField="name"/>
+							<mx:DataGridColumn headerText="Address" dataField="address"/>
+							<mx:DataGridColumn headerText="City" dataField="city"/>
+							<mx:DataGridColumn headerText="State" dataField="state"/>
+							<mx:DataGridColumn headerText="Zip" dataField="zip"/>
+						</mx:columns>
+					</mx:DataGrid>
+				</s:BorderContainer>
+				
+			</s:NavigatorContent>
+			
+		</mx:ViewStack>
+		
+	</s:Panel>
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/containers/TabNavigator2Example.mxml b/tourdeflexmodules/src/spark/containers/TabNavigator2Example.mxml
new file mode 100644
index 0000000..d6413f6
--- /dev/null
+++ b/tourdeflexmodules/src/spark/containers/TabNavigator2Example.mxml
@@ -0,0 +1,110 @@
+<?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 mx.events.ListEvent;
+			
+			[Bindable]
+			private var contact:Contact = new Contact();
+			
+			protected function submitBtn_clickHandler(event:MouseEvent):void
+			{
+				// Note: this sample uses bidirectional data binding, so we do not have to 
+				// explicitly set the contact fields to save them! 
+				if (!contacts.contains(contact))
+					contacts.addItem(contact);
+				contact = new Contact();
+			}
+
+			protected function dg_itemClickHandler(event:ListEvent):void
+			{
+				contact = dg.selectedItem as Contact;
+			}
+
+		]]>
+	</fx:Script>
+
+	<fx:Declarations>
+		<s:ArrayCollection id="contacts"/>
+	</fx:Declarations>
+	
+	<s:Panel title="TabBar Sample with Custom Skin and Bidirectional Binding" width="100%" height="100%">
+		<s:TabBar id="tabs" left="8" y="2" dataProvider="{vs}" skinClass="skins.CustomTabBarSkin" cornerRadius="4"/>
+		<mx:ViewStack id="vs" width="95%" height="85%" left="8" y="23">
+			<s:NavigatorContent label="Contact Info"  width="100%" height="100%">
+				<s:BorderContainer borderColor="0xCC0000" width="100%" height="100%" borderWeight="2" cornerRadius="3" 
+						  dropShadowVisible="true">
+					<!-- This background fill could also be specified in a custom skin to apply to other containers as well -->
+					<s:backgroundFill>
+						<s:LinearGradient rotation="90">
+							<s:GradientEntry color="0xE2E2E2"/>
+							<s:GradientEntry color="0xCC0000" alpha=".5" />
+						</s:LinearGradient>
+					</s:backgroundFill>
+					<mx:Form id="contactForm" defaultButton="{submitBtn}" width="100%" height="100%">
+						<mx:FormItem label="Name:">
+							<s:TextInput id="nameTxt" text="@{contact.name}"/>
+						</mx:FormItem>
+						<mx:FormItem label="Address:">
+							<s:TextInput id="address" text="@{contact.address}"/>
+						</mx:FormItem>
+						<mx:FormItem label="City:">
+							<s:TextInput id="city" text="@{contact.city}"/>
+						</mx:FormItem>
+						<mx:FormItem label="State:">
+							<s:TextInput id="state" text="@{contact.state}"/>
+						</mx:FormItem>
+						<mx:FormItem label="Zip:">
+							<s:TextInput id="zip" text="@{contact.zip}" maxChars="5"/>
+						</mx:FormItem>
+						<mx:FormItem>
+							<s:Button id="submitBtn" label="Submit" click="submitBtn_clickHandler(event)"/>
+						</mx:FormItem>
+					</mx:Form>
+				</s:BorderContainer>
+			</s:NavigatorContent>
+			<s:NavigatorContent label="Contact List" width="100%" height="100%" >
+				<s:BorderContainer borderColor="0xCC0000" width="100%" height="100%" borderWeight="2" cornerRadius="3" 
+						  dropShadowVisible="true">
+					<s:backgroundFill>
+						<s:LinearGradient rotation="90">
+							<s:GradientEntry color="0xCC0000" />
+							<s:GradientEntry color="0xE2E2E2" />
+						</s:LinearGradient>
+					</s:backgroundFill>
+					<mx:DataGrid id="dg" dataProvider="{contacts}" x="5" y="5"  doubleClickEnabled="true" 
+								 doubleClick="{tabs.selectedIndex=0}" itemClick="dg_itemClickHandler(event)">
+						<mx:columns>
+							<mx:DataGridColumn headerText="Name" dataField="name"/>
+							<mx:DataGridColumn headerText="Address" dataField="address"/>
+							<mx:DataGridColumn headerText="City" dataField="city"/>
+							<mx:DataGridColumn headerText="State" dataField="state"/>
+							<mx:DataGridColumn headerText="Zip" dataField="zip"/>
+						</mx:columns>
+					</mx:DataGrid>
+				</s:BorderContainer>
+			</s:NavigatorContent>
+		</mx:ViewStack>
+	</s:Panel>
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/containers/TileGroupExample.mxml b/tourdeflexmodules/src/spark/containers/TileGroupExample.mxml
new file mode 100644
index 0000000..7b4fc45
--- /dev/null
+++ b/tourdeflexmodules/src/spark/containers/TileGroupExample.mxml
@@ -0,0 +1,100 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s: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:Declarations>
+		<fx:Array id="orientArray">
+			<fx:String>Rows</fx:String>
+			<fx:String>Columns</fx:String>
+		</fx:Array>
+	</fx:Declarations>
+	
+	<fx:Script>
+		<![CDATA[
+			import mx.collections.ArrayList;
+			
+			private function applyProperties():void
+			{
+				this.mainGroup.orientation = this.orientation.selectedItem;
+				this.mainGroup.horizontalGap = this.hgap.value;
+				this.mainGroup.verticalGap = this.vgap.value;
+				this.mainGroup.requestedColumnCount = this.colCount.value;
+				this.mainGroup.requestedRowCount = this.rowCount.value;
+			}
+		]]>
+	</fx:Script>
+	
+	<s:Panel title="TileGroup Sample" width="100%" height="100%">
+		<s:TileGroup left="300" top="10" id="mainGroup">
+			<s:Rect width="100" height="75">
+				<s:fill>
+					<s:SolidColor color="0xd54f4f"/>
+				</s:fill>
+			</s:Rect>
+			<s:Rect width="100" height="75">
+				<s:fill>
+					<s:SolidColor color="0x2f977d"/>
+				</s:fill>
+			</s:Rect>
+			<s:Rect width="100" height="75">
+				<s:fill>
+					<s:SolidColor color="0xfffca2"/>
+				</s:fill>
+			</s:Rect>
+		</s:TileGroup>	
+		
+		<s:VGroup top="10" left="10">
+			<s:HGroup verticalAlign="middle">
+				<s:Label text="Orientation:"/>
+				<s:DropDownList id="orientation" dataProvider="{new ArrayList(orientArray)}" prompt="columns"/>
+			</s:HGroup>
+			
+			<s:HGroup verticalAlign="middle">
+				<s:Label text="Horizontal Gap:"/>
+				<s:NumericStepper id="hgap" maximum="400"/>
+			</s:HGroup>	
+			
+			<s:HGroup verticalAlign="middle">
+				<s:Label text="Vertical Gap:"/>
+				<s:NumericStepper id="vgap" maximum="400"/>
+			</s:HGroup>	
+			
+			<s:HGroup verticalAlign="middle">
+				<s:Label text="Requested Column Count:"/>
+				<s:NumericStepper id="colCount"/>
+			</s:HGroup>
+			
+			<s:HGroup verticalAlign="middle">
+				<s:Label text="Requested Row Count:"/>
+				<s:NumericStepper id="rowCount"/>
+			</s:HGroup>
+			<s:Button label="Apply Properties" click="this.applyProperties()"/>
+			<mx:Spacer height="10"/>
+			<s:Label width="85%" horizontalCenter="0" 
+					 text="The TileGroup container is an instance of the Group container that uses the TileLayout class. You can use the properties of the 
+					 TileGroup class to modify the characteristics of the TileLayout class."/>
+
+		</s:VGroup>
+		
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/containers/assets/arrow_icon_sm.png b/tourdeflexmodules/src/spark/containers/assets/arrow_icon_sm.png
new file mode 100644
index 0000000..33debc8
--- /dev/null
+++ b/tourdeflexmodules/src/spark/containers/assets/arrow_icon_sm.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/containers/personIcon.png b/tourdeflexmodules/src/spark/containers/personIcon.png
new file mode 100644
index 0000000..f9d76c6
--- /dev/null
+++ b/tourdeflexmodules/src/spark/containers/personIcon.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/containers/skins/CustomTabBarButtonSkin.mxml b/tourdeflexmodules/src/spark/containers/skins/CustomTabBarButtonSkin.mxml
new file mode 100644
index 0000000..b226383
--- /dev/null
+++ b/tourdeflexmodules/src/spark/containers/skins/CustomTabBarButtonSkin.mxml
@@ -0,0 +1,264 @@
+<?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.
+
+-->
+
+
+<!--- 
+The default skin class for Spark TabBar buttons.  
+
+@langversion 3.0
+@playerversion Flash 10
+@playerversion AIR 1.5
+@productversion Flex 4
+-->
+
+<s:SparkSkin 
+	xmlns:fx="http://ns.adobe.com/mxml/2009" 
+	xmlns:s="library://ns.adobe.com/flex/spark" 
+	xmlns:fb="http://ns.adobe.com/flashbuilder/2009" 
+	minWidth="21" minHeight="21" alpha.disabledStates="0.5">
+	
+	<!-- host component -->
+	<fx:Metadata>
+		<![CDATA[ 
+		/** 
+		* @copy spark.skins.spark.ApplicationSkin#hostComponent
+		*/
+		[HostComponent("spark.components.ButtonBarButton")]
+		]]>
+	</fx:Metadata>
+	
+	<fx:Script fb:purpose="styling" >
+        
+		import spark.components.TabBar;
+		
+		static private const exclusions:Array = ["labelDisplay"];
+		
+		/** 
+		 * @private
+		 */     
+		override public function get colorizeExclusions():Array {return exclusions;}
+		
+		/**
+		 * @private
+		 */
+		override protected function initializationComplete():void
+		{
+			//useBaseColor = true;
+			super.initializationComplete();
+		}
+		
+		private var cornerRadius:Number = 4
+		
+		/**
+		 *  @private
+		 *  The borderTop s:Path is just a s:Rect with the bottom edge left out.
+		 *  Given the rounded corners per the cornerRadius style, the result is 
+		 *  roughly an inverted U with the specified width, height, and cornerRadius.
+		 * 
+		 *  Circular arcs are drawn with two curves per flash.display.Graphics.GraphicsUtil.
+		 */        
+		private function updateBorderTop(width:Number, height:Number):void
+		{
+			var left:Number = -0.5;
+			var right:Number = width - 0.5;
+			var top:Number = 0.5;
+			var bottom:Number = height;
+			
+			var a:Number = cornerRadius * 0.292893218813453;
+			var s:Number = cornerRadius * 0.585786437626905;
+			
+			var path:String = "";
+			path +=  "M " + left + " " + bottom;
+			path += " L " + left + " " + (top + cornerRadius);
+			path += " Q " + left + " " + (top + s) + " " + (left + a) + " " + (top + a);
+			path += " Q " + (left + s) + " " + top + " " + (left + cornerRadius) + " " + top;
+			path += " L " + (right - cornerRadius) + " " + top;
+			path += " Q " + (right - s) + " " + top + " " + (right - a) + " " + (top + a);
+			path += " Q " + right + " " + (top + s) + " " + right + " " + (top + cornerRadius);
+			path += " L " + right + " " + bottom;
+			borderTop.data = path;
+		}
+		
+		/**
+		 *  @private
+		 *  The cornerRadius style is specified by the TabBar, not the button itself.   
+		 * 
+		 *  Rather than bind the corner radius properties of the s:Rect's in the markup 
+		 *  below to hostComponent.owner.getStyle("cornerRadius"), we reset them here, 
+		 *  each time a change in the value of the style is detected.  Note that each 
+		 *  corner radius property is explicitly initialized to the default value of 
+		 *  the style; the initial value of the private cornerRadius property.
+		 */
+		private function updateCornerRadius():void
+		{
+			var cr:Number = getStyle("cornerRadius");
+			if (cornerRadius != cr)
+			{
+				cornerRadius = cr;
+				fill.topLeftRadiusX = cornerRadius;
+				fill.topRightRadiusX = cornerRadius;
+				lowlight.radiusX = cornerRadius;
+				highlight.radiusX = cornerRadius;
+				highlightStroke.topLeftRadiusX = cornerRadius;
+				highlightStroke.topRightRadiusX = cornerRadius;
+			}
+		}
+		
+		/**
+		 *  @private
+		 */
+		override protected function updateDisplayList(unscaledWidth:Number, unscaleHeight:Number):void
+		{
+			updateCornerRadius();
+			updateBorderTop(unscaledWidth, unscaledHeight);
+			super.updateDisplayList(unscaledWidth, unscaledHeight);
+		}
+	</fx:Script>
+	
+	<!-- states -->
+	<s:states>
+		<s:State name="up" />
+		<s:State name="over" stateGroups="overStates" />
+		<s:State name="down" stateGroups="downStates" />
+		<s:State name="disabled" stateGroups="disabledStates" />
+		<s:State name="upAndSelected" stateGroups="selectedStates, selectedUpStates" />
+		<s:State name="overAndSelected" stateGroups="overStates, selectedStates" />
+		<s:State name="downAndSelected" stateGroups="downStates, selectedStates" />
+		<s:State name="disabledAndSelected" stateGroups="selectedUpStates, disabledStates, selectedStates" />
+	</s:states>
+	
+	<s:Group left="-1" right="0" top="-1" bottom="-1">
+		
+		<!-- layer 2: fill -->
+		<s:Rect id="fill" left="2" right="1" top="2" bottom="2" topLeftRadiusX="4" topRightRadiusX="4" width="69" height="21">
+			<s:fill>
+				<s:LinearGradient rotation="90">
+					<s:GradientEntry color="0xFFFFFF" 
+									 color.selectedUpStates="0xFFFFFF"
+									 color.overStates="0xCC0000"
+									 color.downStates="0xCC0000" 
+									 alpha="0.85" 
+									 alpha.overAndSelected="1" />
+					<s:GradientEntry color="0xCCCCCC" 
+									 color.selectedUpStates="0x9FA0A1"
+									 color.over="0xCC0000" 
+									 color.overAndSelected="0xFFFFFF"
+									 color.downStates="0xCC0000" 
+									 alpha="0.85"
+									 alpha.overAndSelected="1" />
+				</s:LinearGradient>
+			</s:fill>
+		</s:Rect>
+		
+		<!-- layer 3: fill lowlight -->
+		<s:Rect id="lowlight" left="2" right="1" bottom="2" height="9" radiusX="4">
+			<s:fill>
+				<s:LinearGradient rotation="90">
+					<s:GradientEntry color="0xCC0000" alpha="0.0099" />
+					<s:GradientEntry color="0xCC0000" alpha="0.0627" />
+				</s:LinearGradient>
+			</s:fill>
+		</s:Rect>
+		
+		<!-- layer 4: fill highlight -->
+		<s:Rect id="highlight" left="2" right="1" top="2" height="9" radiusX="4">
+			<s:fill>
+				<s:SolidColor color="0xCC0000" 
+							  alpha="0.33" 
+							  alpha.selectedUpStates="0.22"
+							  alpha.overStates="0.22" 
+							  alpha.downStates="0.12" />
+			</s:fill>
+		</s:Rect>
+		
+		<!-- layer 5: highlight stroke (all states except down) -->
+		<s:Rect id="highlightStroke" left="2" right="1" top="2" bottom="2" topLeftRadiusX="4" topRightRadiusX="4">
+			<s:stroke>
+				<s:LinearGradientStroke rotation="90" weight="1">
+					<s:GradientEntry color="0xCC0000" alpha.overStates="0.22" alpha.selectedUpStates="0.33" />
+				</s:LinearGradientStroke>
+			</s:stroke>
+		</s:Rect>
+		
+		<!-- layer 6: highlight stroke (down state only) -->
+		<s:Rect left="2" top="2" bottom="2" width="1" includeIn="downStates, selectedUpStates, overAndSelected">
+			<s:fill>
+				<s:SolidColor color="0xCC0000" alpha="0.07" />
+			</s:fill>
+		</s:Rect>
+		<s:Rect right="1" top="2" bottom="2" width="1" includeIn="downStates, selectedUpStates, overAndSelected">
+			<s:fill>
+				<s:SolidColor color="0xCC0000" alpha="0.07" />
+			</s:fill>
+		</s:Rect>
+		<s:Rect left="3" top="2" right="1" height="1" includeIn="downStates, selectedUpStates, overAndSelected">
+			<s:fill>
+				<s:SolidColor color="0xCC0000" alpha="0.25" />
+			</s:fill>
+		</s:Rect>
+		<s:Rect left="2" top="3" right="1" height="1" includeIn="downStates, selectedUpStates, overAndSelected">
+			<s:fill>
+				<s:SolidColor color="0xCC0000" alpha="0.09" />
+			</s:fill>
+		</s:Rect>
+		
+		<!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 -->
+		<s:Line id="borderBottom" left="1" right="0" bottom="1">
+			<s:stroke>
+				<s:SolidColorStroke weight="1" 
+									color="0xCC0000" 
+									color.selectedStates="0x434343"
+									alpha="0.75" 
+									alpha.down="0.85"
+									alpha.selectedStates="0.5" />
+			</s:stroke>
+		</s:Line>
+		<s:Path id="borderTop" left="1" right="0" top="1" bottom="1" width="69" height="21">
+			<s:stroke>
+				<s:LinearGradientStroke rotation="90" weight="1">
+					<s:GradientEntry color="0xCC0000" 
+									 alpha="0.5625"
+									 />
+					<s:GradientEntry color="0xFFFFFF" 
+									 color.selectedUpStates="0xFFFFFF"
+									 color.overStates="0xFFFFFF" 
+									 color.downStates="0xCC0000" 
+									 alpha="0.85" 
+									 alpha.overAndSelected="1" />					
+				</s:LinearGradientStroke>
+			</s:stroke>
+		</s:Path>
+	</s:Group>
+	
+	<!-- layer 8: text -->
+	<!--- The defines the appearance of the label for the first button in the ButtonBar component. -->
+	<s:Group left="2" top="2">
+		<s:BitmapImage source="@Embed('../personIcon.png')" width="16" height="16"/>		 
+				 
+		<s:Label id="labelDisplay"
+				 textAlign="right"
+				 verticalAlign="middle"
+				 maxDisplayedLines="1"
+				 horizontalCenter="7" verticalCenter="1" 
+				 left="10" right="10" top="2" bottom="2" color.down="#FFFFFF">
+		</s:Label>
+	</s:Group>
+	
+</s:SparkSkin>
diff --git a/tourdeflexmodules/src/spark/containers/skins/CustomTabBarSkin.mxml b/tourdeflexmodules/src/spark/containers/skins/CustomTabBarSkin.mxml
new file mode 100644
index 0000000..e81ff4d
--- /dev/null
+++ b/tourdeflexmodules/src/spark/containers/skins/CustomTabBarSkin.mxml
@@ -0,0 +1,97 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+
+
+<!--- 
+
+The default skin class for the Spark TabBar component. The ButtonBarButtons 
+created by the TabBar component use the TabBarButtonSkin class.  
+
+@see spark.components.TabBar
+@see spark.components.ButtonBarButton
+
+@langversion 3.0
+@playerversion Flash 10
+@playerversion AIR 1.5
+@productversion Flex 4
+
+-->
+
+<s:Skin 
+	xmlns:fx="http://ns.adobe.com/mxml/2009" 
+	xmlns:s="library://ns.adobe.com/flex/spark"
+	xmlns:fb="http://ns.adobe.com/flashbuilder/2009"     
+	alpha.disabled="0.5">
+	
+	<fx:Metadata>
+		<![CDATA[ 
+		/** 
+		* @copy spark.skins.spark.ApplicationSkin#hostComponent
+		*/
+		[HostComponent("spark.components.TabBar")]
+		]]>
+	</fx:Metadata> 
+	
+	<fx:Script  fb:purpose="styling" >
+		<![CDATA[ 
+			
+			import mx.core.UIComponent;
+			
+			/**
+			 *  @private
+			 *  Push the cornerRadius style to the item renderers.
+			 */
+			override protected function updateDisplayList(unscaledWidth:Number, unscaleHeight:Number):void
+			{
+				const numElements:int = dataGroup.numElements;
+				const cornerRadius:int = hostComponent.getStyle("cornerRadius");
+				for (var i:int = 0; i < numElements; i++)
+				{
+					var elt:UIComponent = dataGroup.getElementAt(i) as UIComponent;
+					if (elt)
+						elt.setStyle("cornerRadius", cornerRadius);
+				}
+				
+				super.updateDisplayList(unscaledWidth, unscaledHeight);
+			}
+			
+		]]>            
+	</fx:Script>
+	
+	<s:states>
+		<s:State name="normal" />
+		<s:State name="disabled" />
+	</s:states>
+	
+	<!--- 
+	@copy spark.components.SkinnableDataContainer#dataGroup
+	-->
+	<s:DataGroup id="dataGroup" width="100%" height="100%">
+		<s:layout>
+			<s:ButtonBarHorizontalLayout gap="-1"/>
+		</s:layout>
+		<s:itemRenderer>
+			<fx:Component>
+				<s:ButtonBarButton skinClass="skins.CustomTabBarButtonSkin" />
+			</fx:Component>
+		</s:itemRenderer>
+	</s:DataGroup>
+	
+</s:Skin>
diff --git a/tourdeflexmodules/src/spark/controls/AccordionExample.mxml b/tourdeflexmodules/src/spark/controls/AccordionExample.mxml
new file mode 100644
index 0000000..449ce58
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/AccordionExample.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">
+	
+	<s:Panel title="Accordion Container" width="100%" height="100%">
+		
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<s:Label width="100%"
+				 text="Select an Accordion navigator button to change the panel."/>
+		
+		<mx:Accordion id="accordion" width="100%" height="100%">
+			<!-- Define each panel using a VBox container. -->
+			<s:NavigatorContent label="Accordion Button for Panel 1">
+				<mx:Label text="Accordion container panel 1"/>
+			</s:NavigatorContent>
+			
+			<s:NavigatorContent label="Accordion Button for Panel 2">
+				<mx:Label text="Accordion container panel 2"/>
+			</s:NavigatorContent>
+			
+			<s:NavigatorContent label="Accordion Button for Panel 3">
+				<mx:Label text="Accordion container panel 3"/>
+			</s:NavigatorContent>
+		</mx:Accordion>
+		
+		<s:Label width="100%" color="0x323232"
+				 text="Programmatically select the panel using a Button control."/>
+		
+		<s:HGroup color="0x323232">
+			<s:Button label="Select Panel 1" click="accordion.selectedIndex=0"/>
+			<s:Button label="Select Panel 2" click="accordion.selectedIndex=1"/>
+			<s:Button label="Select Panel 3" click="accordion.selectedIndex=2"/>
+		</s:HGroup>
+		
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/controls/AdvancedDatagridExample.mxml b/tourdeflexmodules/src/spark/controls/AdvancedDatagridExample.mxml
new file mode 100644
index 0000000..0d7ab9e
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/AdvancedDatagridExample.mxml
@@ -0,0 +1,87 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s: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 dpFlat:ArrayCollection = new ArrayCollection([
+				{Region:"Southwest", Territory:"Arizona", 
+					Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000}, 
+				{Region:"Southwest", Territory:"Arizona", 
+					Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000},  
+				{Region:"Southwest", Territory:"Central California", 
+					Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000},  
+				{Region:"Southwest", Territory:"Nevada", 
+					Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000},  
+				{Region:"Southwest", Territory:"Northern California", 
+					Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000}, 
+				{Region:"Southwest", Territory:"Northern California", 
+					Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000},  
+				{Region:"Southwest", Territory:"Southern California", 
+					Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000}, 
+				{Region:"Southwest", Territory:"Southern California", 
+					Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000},
+				{Region:"NorthEast", Territory:"New York", 
+					Territory_Rep:"Jose Rodriguez", Actual:26992, Estimate:30000}, 
+				{Region:"NorthEast", Territory:"New York", 
+					Territory_Rep:"lisa Sims", Actual:47885, Estimate:50000},  
+				{Region:"NorthEast", Territory:"Massachusetts", 
+					Territory_Rep:"kelly o'connell", Actual:172911, Estimate:20000}, 
+				{Region:"NorthEast", Territory:"Pennsylvania", 
+					Territory_Rep:"John Barnes", Actual:32105, Estimate:30000},
+				{Region:"MidWest", Territory:"Illinois", 
+					Territory_Rep:"Seth Brown", Actual:42511, Estimate:40000}
+			]);
+		]]>
+	</fx:Script>
+	
+	<s:Panel title="AdvancedDataGrid Control" width="100%" height="100%">
+		
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<mx:AdvancedDataGrid id="myADG" 
+							 width="100%" height="100%"
+							 dataProvider="{dpFlat}">
+			
+			<mx:groupedColumns>
+				
+				<mx:AdvancedDataGridColumn dataField="Region" />
+				<mx:AdvancedDataGridColumn dataField="Territory" />
+				<mx:AdvancedDataGridColumn dataField="Territory_Rep"
+										   headerText="Territory Rep"/>
+				<mx:AdvancedDataGridColumnGroup headerText="Revenues">    
+					<mx:AdvancedDataGridColumn dataField="Actual"/>
+					<mx:AdvancedDataGridColumn dataField="Estimate"/>
+				</mx:AdvancedDataGridColumnGroup>    
+
+			</mx:groupedColumns>
+			
+		</mx:AdvancedDataGrid>
+		
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/controls/ButtonBarExample.mxml b/tourdeflexmodules/src/spark/controls/ButtonBarExample.mxml
new file mode 100644
index 0000000..a70dde1
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/ButtonBarExample.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">
+
+	<fx:Style>
+		@namespace "library://ns.adobe.com/flex/spark";
+		
+		ButtonBar ToggleButton:upAndSelected,
+		ButtonBar ToggleButton:overAndSelected,
+		ButtonBar ToggleButton:downAndSelected,
+		ButtonBar ToggleButton:disabledAndSelected {
+			baseColor: #FFFFFF;
+			color: #323232;
+		}
+		ButtonBar {
+			baseColor: #000000;
+			color: #FFFFFF;
+		}
+	</fx:Style>
+	
+	<fx:Script>
+		<![CDATA[
+			import spark.events.IndexChangeEvent;
+			
+			/**
+			 * Index change handler will be called each time a button is clicked
+			 * and the event will provide information needed such as the previous
+			 * index clicked.
+			 **/
+			protected function indexChangeHandler(event:IndexChangeEvent):void
+			{
+				myTextArea.text = "Button Bar index clicked = " + event.newIndex
+				myTextArea.text = myTextArea.text + "\nButton Bar previous index = " + event.oldIndex;
+				myTextArea.text = myTextArea.text + "\nButton Bar label clicked = " + myButtonBar.selectedItem;
+				if (myButtonBar.selectedItem=="Red") {
+					txtColor.setStyle("color","red");
+					txtColor.text="Red selected!";
+				}
+				else if (myButtonBar.selectedItem=="Green") {
+					txtColor.setStyle("color","green");
+					txtColor.text="Green selected!";
+				}
+				else if (myButtonBar.selectedItem=="Blue") {
+					txtColor.setStyle("color","blue");
+					txtColor.text="Blue selected!";
+				}
+				else {
+					txtColor.setStyle("color","yellow");
+					txtColor.text="Yellow selected!";
+				}
+			}
+			protected function resetButtonBar(event:MouseEvent):void
+			{
+				myButtonBar.selectedIndex = -1;
+				myTextArea.text = "";
+			}
+		]]>
+	</fx:Script>
+	
+	<s:Panel title="ButtonBar Sample" width="100%" height="100%">
+		
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+			
+			<s:HGroup width="100%" height="100%">
+				<s:Label width="50%" verticalAlign="justify"
+						 text="The ButtonBar component behaves like a series of toggle buttons, where one button remains selected
+and only one button in the ButtonBar control can be in the selected state. That means when you select a button in a ButtonBar
+control, the button stays in the selected state until you select a different button."/>	
+				<s:VGroup left="10" top="5" color="0x000000" horizontalAlign="center">
+					<s:ButtonBar id="myButtonBar" change="indexChangeHandler(event)"> 
+						<mx:ArrayCollection> 
+							<fx:String>Red</fx:String> 
+							<fx:String>Green</fx:String> 
+							<fx:String>Blue</fx:String> 
+							<fx:String>Yellow</fx:String> 
+						</mx:ArrayCollection> 
+					</s:ButtonBar> 
+					<s:TextArea id="myTextArea" width="{myButtonBar.width}" height="150"/>
+					<s:Button id="myButton" label="Reset Selection" click="resetButtonBar(event)"/>	
+					<s:Label id="txtColor" fontSize="16"/>	
+				</s:VGroup>
+			</s:HGroup>
+	</s:Panel>
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/controls/ButtonExample.mxml b/tourdeflexmodules/src/spark/controls/ButtonExample.mxml
new file mode 100644
index 0000000..615aa88
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/ButtonExample.mxml
@@ -0,0 +1,61 @@
+<?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 flash.events.Event;
+			
+			protected function buttonClickHandler(event:Event):void
+			{
+				repeatText.text += event.target.label + " pressed!" + "\n";
+			}
+		]]>
+	</fx:Script>
+
+	<s:Panel title="Button Sample" height="100%" width="100%">
+		
+		<s:layout>
+            <s:HorizontalLayout paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10" />
+        </s:layout>
+		
+		<s:Label width="50%" verticalAlign="justify"
+				 text="The Button component is a commonly used rectangular button. The Button
+component looks like it can be pressed. The default skin has a text label."/>
+					  	
+		<s:VGroup right="10" bottom="5" color="0x000000" horizontalAlign="center">
+			<s:Label text="Output"/>
+			<s:TextArea id="repeatText" top="5" right="50" width="180" height="100"/>
+			<s:Button id="standardBtn" label="Standard Button" 
+					  click="buttonClickHandler(event)" 
+					  fontWeight="normal"/>
+			<s:Button id="disabledBtn" label="Disabled Button" enabled="false"/>
+			<s:Button id="repeatBtn" label="Repeat Button" 
+					  buttonDown="buttonClickHandler(event)"  
+					  autoRepeat="true"/>
+			<s:Label verticalAlign="justify" 
+						  text="Hold down on repeat button to see autoRepeat behavior."/>
+			
+		</s:VGroup>
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/controls/CheckboxExample.mxml b/tourdeflexmodules/src/spark/controls/CheckboxExample.mxml
new file mode 100644
index 0000000..5cea28c
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/CheckboxExample.mxml
@@ -0,0 +1,76 @@
+<?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[
+			[Bindable]
+			public var totalCost:Number = 4.50;
+			
+			// This event handler adds/removes the cost of condiments to/from the total cost.
+			private function modifyBurger(evt:MouseEvent):void {
+				// Add 0.25 to the total cost for every condiment. Delete 0.25 for
+				// every condiment removed.
+				if(CheckBox(evt.target).selected) {
+					totalCost += 0.25;
+				} else {
+					totalCost -= 0.25;
+				}
+				// Format the totalCost and then display it in a label.
+				totalString.text = usdFormatter.format(totalCost);
+			}
+		]]>
+	</fx:Script>
+	<fx:Declarations>
+		<mx:CurrencyFormatter id="usdFormatter" precision="2" currencySymbol="$"
+							  decimalSeparatorFrom="." decimalSeparatorTo="." 
+							  useNegativeSign="true"
+							  useThousandsSeparator="true" alignSymbol="left"/>
+	</fx:Declarations>
+
+	<s:Panel title="CheckBox Sample" width="100%" height="100%">
+		
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+
+		<s:Label text="Hamburger Base Price: $4.50" />
+		<s:Label text="Select condiments for your hamburger (0.25 each):" />
+		
+		<s:CheckBox id="lettuceCB" label="Pickles" click="modifyBurger(event)"/>
+		<s:CheckBox id="tomatoCB" label="Tomato" click="modifyBurger(event)"/>
+		<s:CheckBox id="pickleCB" label="Lettuce" click="modifyBurger(event)"/>
+		<s:CheckBox id="mayoCB" label="Mayonnaise" click="modifyBurger(event)"/>
+		
+		<mx:Spacer height="10" />
+		<s:HGroup>
+			<s:Label text="Total Price: " color="0x336699" fontWeight="bold"/>
+			<s:Label id="totalString" text="$4.50" color="0x336699" fontWeight="bold"/>
+		</s:HGroup>
+		<s:Label top="10" right="10" width="250" verticalAlign="justify"
+				 text="The CheckBox control is a commonly used graphical control that can
+contain a check mark or not. You can use CheckBox controls to gather a 
+set of true or false values that aren’t mutually exclusive."/>
+	</s:Panel>
+	
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/controls/ColorPickerExample.mxml b/tourdeflexmodules/src/spark/controls/ColorPickerExample.mxml
new file mode 100644
index 0000000..eb1318d
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/ColorPickerExample.mxml
@@ -0,0 +1,41 @@
+<?xml version="1.0"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<!-- Simple example to demonstrate the ColorPicker control. -->
+<s: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">
+
+    <s:Panel title="ColorPicker Control Example" width="100%" height="100%">
+		
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+
+        <s:Label width="100%" color="0x000000"
+           text="Select the background color of the Skinnable container."/>
+		
+        <mx:ColorPicker id="cp" showTextField="true" selectedColor="0xFFFFFF"/>
+		
+		<s:SkinnableContainer width="100%" height="100%" backgroundColor="{cp.selectedColor}" />
+		
+        <s:Label color="0x000000" text="selectedColor: 0x{cp.selectedColor.toString(16)}"/> 
+    </s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/controls/ComboBoxExample.mxml b/tourdeflexmodules/src/spark/controls/ComboBoxExample.mxml
new file mode 100644
index 0000000..bcfa757
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/ComboBoxExample.mxml
@@ -0,0 +1,61 @@
+<?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]
+		public var cards:ArrayCollection = new ArrayCollection(
+			[ {label:"Visa", data:1}, 
+			{label:"MasterCard", data:2}, 
+			{label:"American Express", data:3} ]);
+		
+		private function changeHandler(event:Event):void {
+		
+			myLabel.text = "You selected: " +  ComboBox(event.target).selectedItem.label;
+			myData.text = "Data: " +  ComboBox(event.target).selectedItem.data;
+		}     
+		]]>
+	</fx:Script>
+	
+	<s:Panel title="ComboBox Sample" width="100%" height="100%">
+		
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<s:VGroup>
+			<s:Label  width="200" color="0x336699" text="Select credit card type:"/>
+			<s:ComboBox dataProvider="{cards}" width="150" color="0x000000"
+						change="changeHandler(event)" selectedIndex="0"/>
+			<s:Label id="myLabel" text="You selected:" fontWeight="bold"/>
+			<s:Label id="myData" text="Data:" fontWeight="bold"/>	
+		</s:VGroup>
+
+		<s:Label width="75%" bottom="20" horizontalCenter="0"
+				 text="The ComboBox component is similar to a DropDownList but includes a TextInput instead of a Label. A user can type into the TextInput and the drop-down will scroll to and highlight the closest match.
+Users are allowed to type in an item not found in the dataProvider. With this behavior, a ComboBox acts as a list of suggested values, while a DropDownList acts as a list of possible values.  "/>
+			
+	</s:Panel>    
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/controls/CustomDataGridSkin.mxml b/tourdeflexmodules/src/spark/controls/CustomDataGridSkin.mxml
new file mode 100644
index 0000000..10402da
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/CustomDataGridSkin.mxml
@@ -0,0 +1,375 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+
+<s:SparkSkin 
+    xmlns:fx="http://ns.adobe.com/mxml/2009" 
+    xmlns:s="library://ns.adobe.com/flex/spark" 
+    xmlns:mx="library://ns.adobe.com/flex/mx"
+    xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
+    alpha.disabled="0.5" minWidth="89" minHeight="84">
+    
+    <fx:Metadata>
+    <![CDATA[
+        /** 
+        * @copy spark.skins.spark.ApplicationSkin#hostComponent
+          @langversion 3.0
+          @playerversion Flash 10
+          @playerversion AIR 1.5
+          @productversion Flex 4
+         */
+        [HostComponent("spark.components.DataGrid")]
+    ]]>
+    </fx:Metadata>
+    
+    <s:states>
+        <s:State name="normal" />
+        <s:State name="disabled" />
+    </s:states>
+    
+    <fx:Declarations>
+        <!--- @private -->        
+        <fx:Component id="alternatingRowColorsBackground">
+            <s:Rect implements="spark.components.gridClasses.IGridVisualElement">
+                 <fx:Script>
+                    <![CDATA[
+                        import spark.components.DataGrid;
+                        import spark.components.Grid;
+                        
+                        /**
+                         * @private
+                         */
+                        public function prepareGridVisualElement(grid:Grid, rowIndex:int, columnIndex:int):void
+                        {
+                            const dataGrid:DataGrid = grid.dataGrid;
+                            if (!dataGrid)
+                                return;
+                            
+                            const colors:Array = dataGrid.getStyle("alternatingRowColors");
+                            if (colors && (colors.length > 0))
+                            {
+                                dataGrid.styleManager.getColorNames(colors); // lazily replace color names with ints
+                                rowBackgroundFillColor.color = colors[rowIndex % colors.length];
+                            }
+                            else
+                            {          
+                                // This should be the same as bgFill.color.
+                                rowBackgroundFillColor.color = 0xFFFFFF;
+                            }
+                        }
+                    ]]>
+                </fx:Script>  
+                <s:fill>
+                    <!--- @private -->   
+                    <s:SolidColor id="rowBackgroundFillColor" color="0xFFFFFF"/>
+                </s:fill>
+            </s:Rect>
+        </fx:Component>
+        
+        <!--- @private -->        
+        <fx:Component id="caretIndicator">
+            <s:Rect implements="spark.components.gridClasses.IGridVisualElement">
+                 <fx:Script>
+                    <![CDATA[
+                        import spark.components.DataGrid;
+                        import spark.components.Grid;
+                        
+                        /**
+                         * @private
+                         */
+                        public function prepareGridVisualElement(grid:Grid, rowIndex:int, columnIndex:int):void
+                        {
+                            const dataGrid:DataGrid = grid.dataGrid;
+                            if (!dataGrid)
+                                return;
+                            
+                            const color:uint = dataGrid.getStyle("caretColor");
+                            caretIndicatorFill.color = color;
+                        }
+                    ]]>
+                </fx:Script>
+                
+                <s:stroke>
+                    <!--- @private -->
+                    <s:SolidColorStroke id="caretIndicatorFill" color="0x0167FF" weight="1"/>
+                </s:stroke>
+            </s:Rect>
+        </fx:Component>
+        
+        <!--- @private -->
+        <fx:Component id="columnSeparator">
+            <s:Line>
+                <s:stroke>
+                    <s:SolidColorStroke color="0xE6E6E6" weight="1" caps="square"/>
+                </s:stroke>
+            </s:Line>
+        </fx:Component>
+        
+        <!--- Defines the value of the columnSeparator property for the columnHeaderGroup. -->
+        <fx:Component id="headerColumnSeparator">
+            <s:Line>
+                <s:stroke>
+                    <s:SolidColorStroke color="0x696969" weight="1" caps="square"/>
+                </s:stroke>
+            </s:Line>
+        </fx:Component>
+        
+        <!--- Defines the value of the headerRenderer property for the columnHeaderGroup. 
+              The default is spark.skins.spark.DefaultGridHeaderRenderer -->
+        <fx:Component id="headerRenderer">
+            <s:DefaultGridHeaderRenderer />
+        </fx:Component>
+        
+        <!--- @private -->
+        <fx:Component id="hoverIndicator">
+            <s:Rect implements="spark.components.gridClasses.IGridVisualElement">
+                 <fx:Script>
+                    <![CDATA[
+                        import spark.components.DataGrid;
+                        import spark.components.Grid;
+                        
+                        /**
+                         * @private
+                         */
+                        public function prepareGridVisualElement(grid:Grid, rowIndex:int, columnIndex:int):void
+                        {
+                            const dataGrid:DataGrid = grid.dataGrid;
+                            if (!dataGrid)
+                                return;
+                            
+                            const color:uint = dataGrid.getStyle("rollOverColor");
+                            hoverIndicatorFill.color = color;
+                        }
+                    ]]>
+                </fx:Script>
+                
+                <s:fill>
+                    <!--- @private -->
+                    <s:SolidColor id="hoverIndicatorFill" color="0xCEDBEF"/>
+                </s:fill>
+            </s:Rect>
+        </fx:Component>
+        
+        <!--- @private -->
+        <fx:Component id="rowSeparator">
+            <s:Line>
+                <s:stroke>
+                    <s:SolidColorStroke color="0xE6E6E6" weight="1" caps="square"/>
+                </s:stroke>
+            </s:Line>
+        </fx:Component>
+        
+        <!--- @private -->
+        <fx:Component id="selectionIndicator">
+            <s:Rect implements="spark.components.gridClasses.IGridVisualElement">
+                 <fx:Script>
+                    <![CDATA[
+                        import spark.components.DataGrid;
+                        import spark.components.Grid;
+                        
+                        /**
+                         * @private
+                         */
+                        public function prepareGridVisualElement(grid:Grid, rowIndex:int, columnIndex:int):void
+                        {
+                            const dataGrid:DataGrid = grid.dataGrid;
+                            if (!dataGrid)
+                                return;
+                            
+                            const color:uint = dataGrid.getStyle("selectionColor");
+                            selectionIndicatorFill.color = color;
+                        }
+                    ]]>
+                </fx:Script>
+                
+                <s:fill>
+                    <!--- @private -->
+                    <s:SolidColor id="selectionIndicatorFill" color="0xA8C6EE"/>
+                </s:fill>                
+            </s:Rect>
+        </fx:Component>
+        
+        <!--- @private -->
+        <fx:Component id="editorIndicator">
+            <s:Rect>
+                <s:fill>
+                    <s:SolidColor color="0xFFFFFF"/>
+                </s:fill>                
+            </s:Rect>
+        </fx:Component>                    
+        
+    </fx:Declarations>
+    
+    <fx:Script fb:purpose="styling">
+    <![CDATA[
+        static private const exclusions:Array = ["scroller", "background", "columnHeaderGroup"];
+        static private const contentFill:Array = ["bgFill"];
+        
+        /**
+         * @private
+         */
+        override public function get colorizeExclusions():Array {return exclusions;}
+        
+        /**
+         * @private
+         */
+        override public function get contentItems():Array {return contentFill};
+        
+        /**
+         * @private
+         */
+        override protected function initializationComplete():void
+        {
+            useChromeColor = true;
+            super.initializationComplete();
+        }
+        
+        /**
+         * @private
+         */
+        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
+        {
+            if (getStyle("borderVisible") == true)
+            {
+                border.visible = true;
+                background.left = background.top = background.right = background.bottom = 1;
+                scroller.minViewportInset = 1;
+            }
+            else
+            {
+                border.visible = false;
+                background.left = background.top = background.right = background.bottom = 0;
+                scroller.minViewportInset = 0;
+            }
+            
+            borderStroke.color = getStyle("borderColor");
+            borderStroke.alpha = getStyle("borderAlpha");
+            
+            super.updateDisplayList(unscaledWidth, unscaledHeight);
+        }
+    ]]>
+    </fx:Script>
+    
+    <!-- column header, content -->
+    <s:VGroup horizontalAlign="justify" gap="0" left="0" right="0" top="0" bottom="0">
+        
+        <!--- @private -->
+        <s:GridColumnHeaderGroup id="columnHeaderGroup"
+            paddingLeft="1" paddingTop="1" paddingRight="1" minHeight="21" 
+            columnSeparator="{headerColumnSeparator}"
+            headerRenderer="{headerRenderer}"/>
+
+        <s:Group height="100%">
+            
+            <!--- @private -->
+            <s:Rect id="background" left="1" right="1" top="1" bottom="1" >
+                <s:fill>
+                    <!--- Defines the color of the background. The default color is 0xFFFFFF. -->
+                    <s:SolidColor id="bgFill" color="0xFFFFFF" />
+                </s:fill>
+            </s:Rect>
+            
+            <!-- header separator, scroller and grid -->
+            <s:VGroup horizontalAlign="justify" height="100%" width="100%" gap="-1">
+                <!--- @private -->
+                <s:Line id="headerSeparator">
+                    <s:stroke>
+                        <s:SolidColorStroke color="0x696969" weight="1" caps="square"/>
+                    </s:stroke>
+                </s:Line>          
+                
+                <!--- @private -->
+                <s:Scroller id="scroller" minViewportInset="1" hasFocusableChildren="false" height="100%">
+		            <s:Grid id="grid" itemRenderer="spark.skins.spark.DefaultGridItemRenderer"> 
+		                <!--
+		                <s:itemRenderer>
+		                    <fx:Component>
+		                        <s:GridItemRenderer>
+		                            <s:Label id="labelDisplay" paddingLeft="7" paddingRight="7" paddingBottom="5" paddingTop="9" width="100%" height="100%"/> 
+		                        </s:GridItemRenderer>
+		                    </fx:Component>
+		                </s:itemRenderer>
+		                -->
+		                
+		                <s:caretIndicator>
+		                    <fx:Component>
+		                        <s:Rect>
+		                            <s:stroke>
+		                                <s:SolidColorStroke color="0xff0000" weight="1"/>
+		                            </s:stroke>
+		                        </s:Rect>
+		                    </fx:Component>
+		                </s:caretIndicator>
+		                
+		                <s:selectionIndicator>
+		                    <fx:Component>
+		                        <s:Rect>
+		                            <s:fill>
+		                                <s:SolidColor color="0x00ff00"/>
+		                            </s:fill>                
+		                        </s:Rect>
+		                    </fx:Component>           
+		                </s:selectionIndicator>
+		               
+		                <s:columnSeparator>
+		                    <fx:Component>
+		                        <s:Line>
+		                            <s:stroke>
+		                                <s:SolidColorStroke color="0xE6E6E6" weight="1"/>
+		                            </s:stroke>
+		                        </s:Line>
+		                    </fx:Component>
+		                </s:columnSeparator>
+		                <s:rowSeparator>
+		                    <fx:Component>
+		                        <s:Line>
+		                            <s:stroke>
+		                                <s:SolidColorStroke color="0xE6E6E6" weight="1"/>
+		                            </s:stroke>
+		                        </s:Line>
+		                    </fx:Component>
+		                </s:rowSeparator>
+		                
+		                <s:hoverIndicator>
+		                    <fx:Component>
+		                        <s:Rect>
+		                            <s:fill>
+		                                <s:SolidColor color="0x0000ff"/>
+		                            </s:fill>
+		                        </s:Rect>
+		                    </fx:Component>            
+		                </s:hoverIndicator>
+		            </s:Grid>                  
+                </s:Scroller>
+            </s:VGroup>
+            
+        </s:Group>
+        
+    </s:VGroup>
+    
+    <!-- border -->
+    <!--- @private -->
+    <s:Rect left="0" right="0" top="0" bottom="0" id="border">
+        <s:stroke>
+            <!--- @private -->
+            <s:SolidColorStroke id="borderStroke" weight="1"/>
+        </s:stroke>
+    </s:Rect>    
+
+</s:SparkSkin>
diff --git a/tourdeflexmodules/src/spark/controls/DataGridCustomRendererExample.mxml b/tourdeflexmodules/src/spark/controls/DataGridCustomRendererExample.mxml
new file mode 100644
index 0000000..8de56c0
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/DataGridCustomRendererExample.mxml
@@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s: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>
+		import mx.collections.ArrayList;
+	</fx:Script>
+	
+	<fx:Declarations>
+		<s:RemoteObject id="ro" endpoint="http://www.jamesward.com/census2-tests/messagebroker/amf" destination="census"/>
+	</fx:Declarations>
+	
+	<s:creationComplete>
+		ro.getElements(0, 500);
+	</s:creationComplete>
+	
+	<s:DataGrid width="100%" height="100%" dataProvider="{new ArrayList(ro.getElements.lastResult)}">
+		<s:columns>
+			<s:ArrayList>
+				<s:GridColumn dataField="id"/>
+				<s:GridColumn dataField="age">
+					<s:itemRenderer>
+						<fx:Component>
+							<s:GridItemRenderer>
+								<s:Rect percentWidth="{data.age}" top="3" bottom="3">
+									<s:fill>
+										<s:SolidColor color="#0000ff"/>
+									</s:fill>
+								</s:Rect>
+							</s:GridItemRenderer>
+						</fx:Component>
+					</s:itemRenderer>
+				</s:GridColumn>
+				<s:GridColumn dataField="classOfWorker"/>
+				<s:GridColumn dataField="education"/>
+				<s:GridColumn dataField="maritalStatus"/>
+				<s:GridColumn dataField="race"/>
+				<s:GridColumn dataField="sex"/>
+			</s:ArrayList>
+		</s:columns>
+	</s:DataGrid>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/controls/DataGridCustomRendererPrepareExample.mxml b/tourdeflexmodules/src/spark/controls/DataGridCustomRendererPrepareExample.mxml
new file mode 100644
index 0000000..841fea5
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/DataGridCustomRendererPrepareExample.mxml
@@ -0,0 +1,68 @@
+<?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>
+		import mx.collections.ArrayList;
+	</fx:Script>
+	
+	<fx:Declarations>
+		<s:RemoteObject id="ro" endpoint="http://www.jamesward.com/census2-tests/messagebroker/amf" destination="census"/>
+	</fx:Declarations>
+	
+	<s:creationComplete>
+		ro.getElements(0, 500);
+	</s:creationComplete>
+	
+	<s:DataGrid width="100%" height="100%" dataProvider="{new ArrayList(ro.getElements.lastResult)}">
+		<s:columns>
+			<s:ArrayList>
+				<s:GridColumn dataField="id"/>
+				<s:GridColumn dataField="age">
+					<s:itemRenderer>
+						<fx:Component>
+							<s:GridItemRenderer>
+								<fx:Script>
+									override public function prepare(hasBeenRecycled:Boolean):void
+									{
+										r.percentWidth = data.age;
+									}
+								</fx:Script>
+								<s:Rect id="r" top="3" bottom="3">
+									<s:fill>
+										<s:SolidColor color="#0000ff"/>
+									</s:fill>
+								</s:Rect>
+							</s:GridItemRenderer>
+						</fx:Component>
+					</s:itemRenderer>
+				</s:GridColumn>
+				<s:GridColumn dataField="classOfWorker"/>
+				<s:GridColumn dataField="education"/>
+				<s:GridColumn dataField="maritalStatus"/>
+				<s:GridColumn dataField="race"/>
+				<s:GridColumn dataField="sex"/>
+			</s:ArrayList>
+		</s:columns>
+	</s:DataGrid>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/controls/DataGridCustomSkinExample.mxml b/tourdeflexmodules/src/spark/controls/DataGridCustomSkinExample.mxml
new file mode 100644
index 0000000..8c66a44
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/DataGridCustomSkinExample.mxml
@@ -0,0 +1,39 @@
+<?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">
+	
+	<fx:Script>
+		import mx.collections.ArrayList;
+	</fx:Script>
+	
+	<fx:Declarations>
+		<s:RemoteObject id="ro" endpoint="http://www.jamesward.com/census2-tests/messagebroker/amf" destination="census"/>
+	</fx:Declarations>
+	
+	<s:creationComplete>
+		ro.getElements(0, 500);
+	</s:creationComplete>
+	
+	<s:DataGrid width="100%" height="100%"
+				dataProvider="{new ArrayList(ro.getElements.lastResult)}"
+				skinClass="CustomDataGridSkin"/>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/controls/DataGridExample.mxml b/tourdeflexmodules/src/spark/controls/DataGridExample.mxml
new file mode 100644
index 0000000..c879d6b
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/DataGridExample.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">
+	
+	<fx:Declarations>
+		<fx:XMLList id="employees">
+			<employee>
+				<name>Christina Coenraets</name>
+				<phone>555-219-2270</phone>
+				<email>ccoenraets@fictitious.com</email>
+				<active>true</active>
+				<image>images/arrow_icon_sm.png</image>
+			</employee>
+			<employee>
+				<name>Joanne Wall</name>
+				<phone>555-219-2012</phone>
+				<email>jwall@fictitious.com</email>
+				<active>true</active>
+			</employee>
+			<employee>
+				<name>Maurice Smith</name>
+				<phone>555-219-2012</phone>
+				<email>maurice@fictitious.com</email>
+				<active>false</active>
+			</employee>
+			<employee>
+				<name>Mary Jones</name>
+				<phone>555-219-2000</phone>
+				<email>mjones@fictitious.com</email>
+				<active>true</active>
+			</employee>
+		</fx:XMLList>
+	</fx:Declarations>
+	
+	<s:Panel title="DataGrid Control" width="100%" height="100%">
+		
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<s:Label width="100%" text="Select a row in the DataGrid control."/>
+		
+		<mx:DataGrid id="dg" width="100%" rowCount="3" dataProvider="{employees}">
+			<mx:columns>
+				<mx:DataGridColumn dataField="name" headerText="Name"/>
+				<mx:DataGridColumn dataField="phone" headerText="Phone"/>
+				<mx:DataGridColumn dataField="email" headerText="Email"/>
+			</mx:columns>
+		</mx:DataGrid>
+		
+		<mx:Form width="100%" height="100%" paddingTop="0" paddingBottom="0"  >
+			
+			<mx:FormItem label="Name" paddingTop="0" paddingBottom="0">
+				<s:Label text="{dg.selectedItem.name}"/>
+			</mx:FormItem>
+			<mx:FormItem label="Email" paddingTop="0" paddingBottom="0">
+				<s:Label text="{dg.selectedItem.email}"/>
+			</mx:FormItem>
+			<mx:FormItem label="Phone" paddingTop="0" paddingBottom="0">
+				<s:Label text="{dg.selectedItem.phone}"/>
+			</mx:FormItem>
+			
+		</mx:Form>
+		
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/controls/DataGridExample2.mxml b/tourdeflexmodules/src/spark/controls/DataGridExample2.mxml
new file mode 100644
index 0000000..82a0ef3
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/DataGridExample2.mxml
@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009"
+			   xmlns:s="library://ns.adobe.com/flex/spark"
+			   creationComplete="creationCompleteHandler(event)">
+	
+	<fx:Script>
+		<![CDATA[
+			import mx.collections.ArrayList;
+			import mx.events.FlexEvent;	
+
+			protected function creationCompleteHandler(event:FlexEvent):void
+			{
+				ro.getElements(0, 500);
+			}
+		]]>
+	</fx:Script>
+	<s:creationComplete>
+		Security.loadPolicyFile("http://www.jamesward.com/census2-tests/crossdomain.xml");
+		ro.getElements(0, 500);
+	</s:creationComplete>
+
+	
+	<fx:Declarations>
+		<s:RemoteObject id="ro" endpoint="http://www.jamesward.com/census2-tests/messagebroker/amf" destination="census"/>
+	</fx:Declarations>
+	
+	<s:DataGrid width="100%" height="100%" dataProvider="{new ArrayList(ro.getElements.lastResult)}"/>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/controls/DataGridSimpleColumnsExample.mxml b/tourdeflexmodules/src/spark/controls/DataGridSimpleColumnsExample.mxml
new file mode 100644
index 0000000..8e6cd83
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/DataGridSimpleColumnsExample.mxml
@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009" 
+			   xmlns:s="library://ns.adobe.com/flex/spark">
+	
+	<fx:Script>
+		import mx.collections.ArrayList;
+	</fx:Script>
+	
+	<fx:Declarations>
+		<s:RemoteObject id="ro" endpoint="http://www.jamesward.com/census2-tests/messagebroker/amf" destination="census"/>
+	</fx:Declarations>
+	
+	<s:creationComplete>
+		ro.getElements(0, 500);
+	</s:creationComplete>
+	
+	<s:DataGrid width="100%" height="100%" dataProvider="{new ArrayList(ro.getElements.lastResult)}">
+		<s:columns>
+			<s:ArrayList id="columns">
+				<s:GridColumn dataField="id"/>
+				<s:GridColumn dataField="age" minWidth="45"/>
+				<s:GridColumn dataField="classOfWorker" minWidth="100"/>
+				<s:GridColumn dataField="education" minWidth="100"/>
+				<s:GridColumn dataField="maritalStatus" minWidth="100"/>
+				<s:GridColumn dataField="race" minWidth="100"/>
+				<s:GridColumn dataField="sex" minWidth="60"/>
+			</s:ArrayList>
+		</s:columns>
+	</s:DataGrid>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/controls/DataGridSimpleNoWrapExample.mxml b/tourdeflexmodules/src/spark/controls/DataGridSimpleNoWrapExample.mxml
new file mode 100644
index 0000000..78a0eb5
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/DataGridSimpleNoWrapExample.mxml
@@ -0,0 +1,37 @@
+<?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">
+	
+	<fx:Script>
+		import mx.collections.ArrayList;
+	</fx:Script>
+	
+	<fx:Declarations>
+		<s:RemoteObject id="ro" endpoint="http://www.jamesward.com/census2-tests/messagebroker/amf" destination="census" />
+	</fx:Declarations>
+	
+	<s:creationComplete>
+		ro.getElements(0, 500);
+	</s:creationComplete>
+	
+	<s:DataGrid width="100%" height="100%" dataProvider="{new ArrayList(ro.getElements.lastResult)}" />
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/controls/DataGridSizingExample.mxml b/tourdeflexmodules/src/spark/controls/DataGridSizingExample.mxml
new file mode 100644
index 0000000..b1cb185
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/DataGridSizingExample.mxml
@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009" 
+			   xmlns:s="library://ns.adobe.com/flex/spark"
+			   xmlns="*">
+
+	<fx:Declarations>
+		<s:RemoteObject id="ro" endpoint="http://www.jamesward.com/census2-tests/messagebroker/amf" destination="census"/>
+		<s:ArrayList id="columns">
+			<s:GridColumn dataField="id" minWidth="30"/>
+			<s:GridColumn dataField="age" minWidth="45"/>
+			<s:GridColumn dataField="classOfWorker" minWidth="100"/>
+			<s:GridColumn dataField="education" minWidth="100"/>
+			<s:GridColumn dataField="maritalStatus" minWidth="100"/>
+			<s:GridColumn dataField="race" minWidth="100"/>
+			<s:GridColumn dataField="sex" minWidth="60"/>
+		</s:ArrayList>
+	</fx:Declarations>
+	
+	<s:creationComplete>
+		ro.getElements(0, 500);
+	</s:creationComplete>
+	
+	<s:HGroup width="100%">
+		<s:DataGrid requestedRowCount="5" width="100%" dataProvider="{new ArrayList(ro.getElements.lastResult)}" columns="{columns}" />
+		<s:DataGrid requestedRowCount="7" width="100%" dataProvider="{new ArrayList(ro.getElements.lastResult)}" columns="{columns}" />
+		<s:DataGrid requestedRowCount="9" width="100%" dataProvider="{new ArrayList(ro.getElements.lastResult)}" columns="{columns}" />
+	</s:HGroup>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/controls/DataGroupExample.mxml b/tourdeflexmodules/src/spark/controls/DataGroupExample.mxml
new file mode 100644
index 0000000..e047e6a
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/DataGroupExample.mxml
@@ -0,0 +1,134 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<!-- Simple example to demonstrate a DataGroup with a virtualized layout. 
+     Written by Flex 4 Team
+-->
+<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009"
+			   xmlns:mx="library://ns.adobe.com/flex/mx"
+			   xmlns:s="library://ns.adobe.com/flex/spark">
+	
+	<fx:Script>
+		<![CDATA[
+			import mx.collections.ArrayCollection;
+			
+			public function generateDataProvider(nItems:int = 10000):ArrayCollection {
+				var ac:ArrayCollection = new ArrayCollection();
+				
+				var sources:Array = ['San Francisco', 'New York', 'Vancouver', 'Denver', 'Hong Kong'];
+				var destinations:Array = ['London', 'Houston', 'Orlando', 'Los Angeles', 'Seattle'];
+				var airlines:Array = ['Green Jet', 'Orange Jet', 'Yellow Jet', 'Blue Jet', 'Red Jet'];
+				var dates:Array = ['March 23-29', 'April 23-29', 'May 1-3', 'May 10-13', 'June 6'];
+				
+				// create a collection of random flights
+				for (var i:int = 0; i < nItems; i++){
+					var temp:Object = new Object();
+					var random:int = Math.random() * 5;
+					
+					temp.start = sources[random];
+					temp.end = destinations[random];
+					temp.details = dates[random] + ', ' + airlines[random] + " (Flight " + i + ")";
+					ac.addItem(temp);
+				}
+				
+				return ac;
+				
+			}
+		]]>
+	</fx:Script>
+	
+	<s:Panel title="DataGroup with Virtual Layout" width="100%" height="100%">
+		
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<s:Scroller horizontalCenter="0" top="10">
+			<s:DataGroup width="600" height="123" clipAndEnableScrolling="true" dataProvider="{generateDataProvider(9000)}">
+				<s:layout>
+					<s:VerticalLayout gap="1" useVirtualLayout="true" />
+				</s:layout>
+				<s:itemRenderer>
+					<fx:Component>
+						<s:ItemRenderer width="600" height="20">
+							<s:states>
+								<s:State name="normal" />
+								<s:State name="hovered" />
+								<s:State name="selected" />
+							</s:states>
+							
+							<fx:Script>
+								<![CDATA[
+									override public function set data(value:Object):void {
+										super.data = value;
+										
+										if (data == null) // a renderer's data is set to null when it goes out of view
+											return;
+										
+										txtStart.text = data.start;
+										txtEnd.text = data.end;
+										txtDetails.text = data.details;
+									}
+								]]>
+							</fx:Script>
+							
+							<s:transitions>
+								<mx:Transition fromState="normal" toState="hovered">
+									<s:Animate target="{flightPlan}" duration="200">
+										<s:SimpleMotionPath property="width" />
+									</s:Animate>
+								</mx:Transition>
+								<mx:Transition fromState="hovered" toState="normal">
+									<s:Animate target="{flightPlan}" duration="200" >
+										<s:SimpleMotionPath property="width" />
+									</s:Animate>
+								</mx:Transition>
+							</s:transitions>
+							
+							<s:Rect left="0" right="0" top="0" bottom="0" radiusX="5" radiusY="5">
+								<s:fill>
+									<s:SolidColor color="#E1ECF4" />
+								</s:fill>
+							</s:Rect>
+							
+							<s:HGroup verticalAlign="middle">
+								<s:Group id="flightPlan" height="20" width="300" width.hovered="330">
+									<s:Rect left="0" right="0" top="0" bottom="0" radiusX="5" radiusY="5">
+										<s:fill>
+											<s:SolidColor color="#65A3CE" color.hovered="#65A3FF" />
+										</s:fill>
+									</s:Rect>
+									<s:Label id="txtStart" color="#FFFFFF" fontWeight="bold" left="20" verticalCenter="2" />
+									<s:Label id="txtEnd" color="#FFFFFF" fontWeight="bold" right="20" verticalCenter="2" textAlign="right" />
+								</s:Group>
+								<s:Label id="txtDetails" color="#32353f" fontSize="11" />
+							</s:HGroup>
+						</s:ItemRenderer>
+					</fx:Component>
+				</s:itemRenderer>
+			</s:DataGroup>
+		</s:Scroller>	
+		<s:Label width="90%" horizontalCenter="0" bottom="40"
+				 text="Apache Flex DataGroups support virtualization. Virtualization is an optimization for layout and rendering 
+that reduces the footprint and startup time for containers with large numbers of items. This sample shows how
+virtualization can be achieved by only creating enough objects for the items currently being displayed. The 
+useVirtualLayout property should be set on the layout object to achieve virtualization."/>
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/controls/DateChooserExample.mxml b/tourdeflexmodules/src/spark/controls/DateChooserExample.mxml
new file mode 100644
index 0000000..c184ba3
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/DateChooserExample.mxml
@@ -0,0 +1,71 @@
+<?xml version="1.0"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<!-- Simple example to demonstrate DateChooser control. -->
+<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[
+		
+			// Event handler function to write the selected
+			// date to the Label control.        
+			private function displayDate(date:Date):void {
+				if (date == null)
+					selection.text = "Date selected: ";
+				else
+					selection.text = "Date selected: " + date.getFullYear().toString() +
+										'/' + (date.getMonth()+1).toString() + '/' + date.getDate();
+			}
+		]]>
+	</fx:Script>
+	
+	<fx:Declarations>
+		<mx:DateFormatter id="df"/>
+	</fx:Declarations>
+
+	<s:Panel title="DateChooser Control Example" width="100%" height="100%">
+
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<s:VGroup>
+			<s:Label width="100%" color="0x000000" text="Simple DateChooser Control"/>
+			<mx:DateChooser id="dateChooser1" yearNavigationEnabled="true"  height="145"   
+							change="displayDate(DateChooser(event.target).selectedDate)" color="0x000000"/>
+			<s:Label id="selection" text="Date selected:"/>
+		</s:VGroup>
+		
+		<s:VGroup>
+			<s:Label width="100%" color="0x000000" text="Disable dates before Oct 31st, 2008"/>
+			<mx:DateChooser id="dateChooser2" yearNavigationEnabled="true" width="175" height="145"
+							disabledRanges="{[ {rangeEnd: new Date(2008, 9, 31)} ]}" color="0x000000"/>
+			<s:Label text="Date selected: {df.format(dateChooser2.selectedDate)}"/>
+		</s:VGroup>
+		
+		<s:VGroup width="30%">
+			<mx:Text width="100%" text="Select a date in the DateChooser control."/>
+			<mx:Text width="100%" text="Select it again while holding down the Control key to clear it."/>
+		</s:VGroup>
+		
+	</s:Panel>    
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/controls/DateFieldExample.mxml b/tourdeflexmodules/src/spark/controls/DateFieldExample.mxml
new file mode 100644
index 0000000..6b544cd
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/DateFieldExample.mxml
@@ -0,0 +1,85 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<!-- Simple example to demonstrate the DateField control. -->
+<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[
+			
+			// Event handler for the DateField change event.
+			private function dateChanged(date:Date):void {
+				if (date == null)
+					selection.text = "Date selected: ";                
+				else
+					selection.text = "Date selected: " + date.getFullYear().toString() + 
+						'/' + (date.getMonth()+1).toString() + '/' + date.getDate();
+			}
+		]]>
+	</fx:Script>
+	
+	<fx:Declarations>
+		<mx:DateFormatter id="df"/>
+	</fx:Declarations>
+	
+	<s:Panel title="DateField Control Example" width="100%" height="100%">
+
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<s:BorderContainer width="50%" borderColor="0xDCDCDC" height="100%" borderStyle="solid">
+			
+			<s:layout>
+				<s:VerticalLayout paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5"/>
+			</s:layout>
+			
+			<s:Label id="selection" text="Date selected:" />
+			
+			<mx:DateField id="dateField1" yearNavigationEnabled="true"
+						  change="dateChanged(DateField(event.target).selectedDate)" color="0x000000"/>
+			
+			<s:Label text="Basic DateField:"/>
+			
+			
+			<s:Label width="100%"
+					 text="Select a date in the DateField control. Select it again while holding down the Control key to clear it."/>
+			
+		</s:BorderContainer>
+		
+		<s:BorderContainer width="50%" borderColor="0xDCDCDC" height="100%" borderStyle="solid">
+			
+			<s:layout>
+				<s:VerticalLayout paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5"/>
+			</s:layout>
+			
+			<s:Label text="Date selected: {df.format(dateField2.selectedDate)}"/>
+			
+			<mx:DateField id="dateField2" yearNavigationEnabled="true" 
+						  disabledRanges="{[ {rangeEnd: new Date(2008, 9, 31)} ]}" color="0x000000"/>
+			
+			<s:Label text="Disable dates on or before Oct 31, 2008."/>
+			
+		</s:BorderContainer>
+		
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/controls/DropdownExample.mxml b/tourdeflexmodules/src/spark/controls/DropdownExample.mxml
new file mode 100644
index 0000000..389c8b9
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/DropdownExample.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">
+	
+	<fx:Script>
+		<![CDATA[
+			import spark.events.IndexChangeEvent;
+			import mx.collections.ArrayCollection;
+			
+			[Bindable]
+			public var depts:ArrayCollection = new ArrayCollection([
+				{label:"Electronics", data:1}, 
+				{label:"Home Goods", data:2}, 
+				{label:"Toys", data:3} ]);
+			
+			[Bindable]
+			public var elecItems:ArrayCollection = new ArrayCollection([
+				{label:"Samsung 25in TV", data:299}, 
+				{label:"Panasonic Plasma", data:999}, 
+				{label:"Sony LCD", data:899} ]);
+			
+			[Bindable]
+			public var homeItems:ArrayCollection = new ArrayCollection([
+				{label:"Blendtec Blender", data:399}, 
+				{label:"Hoover Vaccuum", data:599}, 
+				{label:"Black & Decker Toaster", data:99} ]);
+			
+			[Bindable]
+			public var toyItems:ArrayCollection = new ArrayCollection([
+				{label:"Nintendo DS", data:120}, 
+				{label:"Lego's Star Wars Set", data:50}, 
+				{label:"Leapfrog Leapster", data:30} ]);
+			
+			private function handleDepartmentSelected(event:IndexChangeEvent):void
+			{
+				list2.prompt="Select Item";
+				list2.selectedIndex=-1; // reset so prompt shows
+				if (list1.selectedIndex==0)
+					list2.dataProvider=elecItems;
+				else if (list1.selectedIndex==1)
+					list2.dataProvider=homeItems;
+				else if (list1.selectedIndex==2)
+					list2.dataProvider=toyItems;
+				
+			}
+			
+		]]>
+	</fx:Script>
+	
+	<s:Panel title="DropDownList Sample" width="100%" height="100%">
+		
+		<s:VGroup width="100%" height="100%" left="120" top="5">
+			<s:Label text="RJ's Warehouse Price Checker" fontSize="18" />
+			<s:DropDownList id="list1" width="50%" dataProvider="{depts}" labelField="label" 
+							prompt="Select Category"
+							change="handleDepartmentSelected(event)"/>
+			<s:Label id="text2"/>
+			<s:DropDownList id="list2" width="50%" labelField="label" prompt="None"/>
+			<mx:Spacer height="10"/>
+			<s:Label fontSize="14" color="0x336699" text="The price of item: {list2.selectedItem.label} is: ${list1.selectedItem.data}" verticalAlign="bottom"/>
+		</s:VGroup>
+		<s:Label top="10" right="10" width="250" verticalAlign="justify" 
+					  text="The DropDownList control contains a drop-down list from which the user can select a single value. Its functionality is very similar to that of the SELECT form element in HTML.
+The DropDownList control consists of the anchor button, prompt area, and drop-down-list, Use the anchor button to open and close the drop-down-list. The prompt area displays a prompt String, or the selected item in the drop-down-list."/>
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/controls/FormExample.mxml b/tourdeflexmodules/src/spark/controls/FormExample.mxml
new file mode 100644
index 0000000..a3afe0f
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/FormExample.mxml
@@ -0,0 +1,82 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s: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:Declarations>
+		<fx:Model id="checkModel">
+			<User>
+				<FirstName>{fname.text}</FirstName>
+				<DOB>{dob.text}</DOB>
+				<Email>{email.text}</Email>
+				<Age>{age.text}</Age>
+				<Zip>{zip.text}</Zip>
+				<Phone>{phone.text}</Phone>
+			</User>
+		</fx:Model>
+		
+		<mx:StringValidator source="{fname}" property="text" minLength="4" maxLength="12"/>
+		<mx:PhoneNumberValidator source="{phone}" property="text"/>
+		<mx:DateValidator source="{dob}" property="text"/>
+		<mx:EmailValidator source="{email}" property="text"/>
+		<mx:NumberValidator source="{age}" property="text" integerError="Enter Integer value"
+							minValue="18" maxValue="100" domain="int"/>
+		<mx:ZipCodeValidator source="{zip}" property="text"/>
+		
+	</fx:Declarations>
+	
+	<s:Panel title="Form Container: Moving from one form field to another triggers the validator" width="100%" height="100%">
+		
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+
+        <mx:Form width="100%" paddingTop="0">
+            <mx:FormHeading fontSize="10"  label="Enter values into the form." paddingTop="0" />
+
+            <mx:FormItem label="First name">
+                <s:TextInput id="fname" width="200"/>
+            </mx:FormItem>
+
+            <mx:FormItem label="Date of birth (mm/dd/yyyy)">
+                <s:TextInput id="dob" width="200"/>
+            </mx:FormItem>
+
+            <mx:FormItem label="E-mail address">
+                <s:TextInput id="email" width="200"/>
+            </mx:FormItem>
+
+            <mx:FormItem label="Age">
+                <s:TextInput id="age" width="200"/>
+            </mx:FormItem>
+
+            <mx:FormItem label="Zip">
+                <s:TextInput id="zip" width="200"/>
+            </mx:FormItem>
+
+            <mx:FormItem label="Phone">
+                <s:TextInput id="phone" width="200"/>
+            </mx:FormItem>
+        </mx:Form>
+        
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/controls/ImageExample.mxml b/tourdeflexmodules/src/spark/controls/ImageExample.mxml
new file mode 100644
index 0000000..fb45115
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/ImageExample.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">
+	
+	<fx:Script>
+		<![CDATA[
+			private function smoothImage(ev:Event):void{
+            	//set image smoothing so image looks better when transformed.
+				var bmp:Bitmap = ev.target.content as Bitmap;
+				bmp.smoothing = true;
+			}
+		]]>
+	</fx:Script>
+	
+	<s:Panel title="Image Samples" width="100%" height="100%">
+
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<s:BorderContainer width="50%" height="100%">
+			<s:layout>
+				<s:VerticalLayout paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5"/>
+			</s:layout>
+			<s:Label text="Sample of image embeded at compile time." />
+			<mx:Image id="embededImage" width="50%" height="50%" source="@Embed('assets/ApacheFlexLogo.png')" creationComplete="smoothImage(event)"/>
+		</s:BorderContainer>
+		
+		<s:BorderContainer width="50%" height="100%">
+			<s:layout>
+				<s:VerticalLayout paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5"/>
+			</s:layout>
+			<s:Label text="Sample of image loaded at run-time." />
+			<mx:Image id="loadedImage" width="50%" height="50%" source="assets/ApacheFlexLogo.png" creationComplete="smoothImage(event)"/>
+		</s:BorderContainer>
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/controls/Item.as b/tourdeflexmodules/src/spark/controls/Item.as
new file mode 100644
index 0000000..f5f0a30
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/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
diff --git a/tourdeflexmodules/src/spark/controls/LinkBarExample.mxml b/tourdeflexmodules/src/spark/controls/LinkBarExample.mxml
new file mode 100644
index 0000000..72259c6
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/LinkBarExample.mxml
@@ -0,0 +1,82 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s: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">
+	
+	<s:Panel title="LinkBar Control" width="100%" height="100%">
+		
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<s:Label width="100%" textAlign="center"
+				 text="Select a link in the LinkBar control to set the active child of the ViewStack container."/>
+		
+		<mx:LinkBar color="0x0050AA" horizontalAlign="center" width="100%" fontWeight="bold" dataProvider="{myViewStack}" borderColor="0xACACAC" borderStyle="solid"/>
+		
+		<!-- Define the ViewStack and the three child containers -->
+		<mx:ViewStack id="myViewStack" borderStyle="solid" width="100%" height="80%">
+			
+			<s:NavigatorContent id="search" label="Customer Info" backgroundColor="0xDCDCDC" fontWeight="bold">
+				<s:layout>
+					<s:VerticalLayout horizontalAlign="center" />
+				</s:layout>
+				
+				<s:Label text="Search Panel" width="100%" textAlign="center" paddingTop="10" />
+				<s:HGroup>
+					<s:TextInput id="Searchtxt" width="200" />
+					<s:Button label="search" click="Searchtxt.text=''" />
+				</s:HGroup>
+			</s:NavigatorContent>
+			
+			<s:NavigatorContent id="custInfo" label="Customer Info" backgroundColor="0xDCDCDC" width="100%" height="100%">
+				
+				<s:layout>
+					<s:VerticalLayout horizontalAlign="center" />
+				</s:layout>
+				
+				<s:Label text="Customer Info" width="100%" textAlign="center" paddingTop="10" />
+				<s:HGroup>
+					<s:Label text="Email Address"/>
+					<s:TextInput id="email" width="200"/>
+					<s:Button label="Submit" click="email.text=''" />
+				</s:HGroup>
+				
+			</s:NavigatorContent>
+			
+			<s:NavigatorContent id="accountInfo" label="Account Info" backgroundColor="0xDCDCDC" width="100%" height="100%" fontWeight="bold" >
+				
+				<s:layout>
+					<s:VerticalLayout horizontalAlign="center" />
+				</s:layout>
+				
+				<s:Label text="Account Info" width="100%" textAlign="center" paddingTop="10" />
+				<s:HGroup>
+					<mx:Button label="Purchases" />
+					<mx:Button label="Sales" />
+					<mx:Button label="Reports" />
+				</s:HGroup>
+			</s:NavigatorContent>
+			
+		</mx:ViewStack>
+		
+	</s:Panel>
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/controls/LinkButtonExample.mxml b/tourdeflexmodules/src/spark/controls/LinkButtonExample.mxml
new file mode 100644
index 0000000..42b1224
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/LinkButtonExample.mxml
@@ -0,0 +1,41 @@
+<?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.controls.Alert;
+		]]>
+	</fx:Script>
+	
+	<s:Panel title="LinkButton Sample" width="100%" height="100%">
+
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<s:Label text="Sample of image embeded at compile time." />
+		<mx:LinkButton label="LinkButton Control" color="0x3380DD" click="{Alert.show('LinkButton Pressed');}"
+			 textDecoration="underline" fontWeight="normal" icon="@Embed('assets/arrow_icon.png')" />
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/controls/ListDataPagingExample.mxml b/tourdeflexmodules/src/spark/controls/ListDataPagingExample.mxml
new file mode 100644
index 0000000..848ed96
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/ListDataPagingExample.mxml
@@ -0,0 +1,80 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009"
+			   xmlns:s="library://ns.adobe.com/flex/spark"
+			   xmlns:local="*"
+			   initialize="loadSecurity()">
+	
+	<fx:Script>
+		<![CDATA[
+			import mx.collections.IList;
+			import mx.collections.errors.ItemPendingError;
+			import mx.rpc.AsyncResponder;
+			import mx.rpc.AsyncToken;
+			import mx.rpc.events.FaultEvent;
+			import mx.rpc.events.ResultEvent;
+			
+			private function loadSecurity():void 
+			{
+				Security.loadPolicyFile("http://www.jamesward.com/census2-tests/crossdomain.xml");
+			}
+			
+			private function handleCreatePendingItemFunction(index:int, ipe:ItemPendingError):Object {
+				return {};
+			}
+			
+			private function loadItems(list:IList, start:uint, count:uint):void
+			{
+				var asyncToken:AsyncToken = ro.getElements(start, count);
+				asyncToken.addResponder(new AsyncResponder(function result(event:ResultEvent, token:Object = null):void {
+					var v:Vector.<Object> = new Vector.<Object>();
+					for each (var i:Object in event.result)
+					{
+						v.push(i);
+					}
+					pagedList.storeItemsAt(v, token as int);
+				}, function fault(event:FaultEvent, token:Object = null):void {
+					trace(event.fault.faultString);
+				}, start));
+			}
+		]]>
+	</fx:Script>
+	
+	<fx:Declarations>
+		<local:PagedList id="pagedList" pageSize="100" length="100000" loadItemsFunction="loadItems"/>
+		<s:AsyncListView id="asyncListView" list="{pagedList}" createPendingItemFunction="handleCreatePendingItemFunction"/>
+		<s:RemoteObject id="ro" destination="census" endpoint="http://www.jamesward.com/census2-tests/messagebroker/amf"/>
+	</fx:Declarations>
+	
+	<s:DataGrid dataProvider="{asyncListView}" width="100%" height="100%">
+		<s:columns>
+			<s:ArrayList>
+				<s:GridColumn dataField="id"/>
+				<s:GridColumn dataField="age"/>
+				<s:GridColumn dataField="classOfWorker"/>
+				<s:GridColumn dataField="education"/>
+				<s:GridColumn dataField="maritalStatus"/>
+				<s:GridColumn dataField="race"/>
+				<s:GridColumn dataField="sex"/>
+			</s:ArrayList>
+		</s:columns>
+	</s:DataGrid>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/controls/ListExample.mxml b/tourdeflexmodules/src/spark/controls/ListExample.mxml
new file mode 100644
index 0000000..69c416d
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/ListExample.mxml
@@ -0,0 +1,103 @@
+<?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:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+
+		<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/ApacheFlexLogo.png" price="29.99"/>
+						<local:Item name="Boots" photo="assets/ApacheFlexLogo.png" price="69.99"/>
+						<local:Item name="Compass" photo="assets/ApacheFlexLogo.png" price="12.99"/>
+						<local:Item name="Goggles" photo="assets/ApacheFlexLogo.png" price="14.99"/>
+						<local:Item name="Helmet" photo="assets/ApacheFlexLogo.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: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>
diff --git a/tourdeflexmodules/src/spark/controls/MenuExample.mxml b/tourdeflexmodules/src/spark/controls/MenuExample.mxml
new file mode 100644
index 0000000..c86913e
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/MenuExample.mxml
@@ -0,0 +1,93 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s: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.controls.Menu;
+			import mx.events.FlexEvent;
+			import mx.events.MenuEvent;
+			
+			protected var myMenu:Menu; 
+			
+			protected function showHandler(event:MouseEvent):void
+			{
+				myMenu = Menu.createMenu(null, myMenuData, false);
+				myMenu.labelField="@label";
+				myMenu.show(90, 35);
+				myMenu.addEventListener(MenuEvent.CHANGE,onMenuChange);
+			}
+
+			protected function hideHandler(event:MouseEvent):void
+			{
+				myMenu.hide();
+			}
+			
+			protected function onMenuChange(event:MenuEvent):void
+			{
+				lblSelected.text =  event.label;
+			}
+
+		]]>
+	</fx:Script>
+	
+
+	<fx:Declarations>
+		<fx:XML format="e4x" id="myMenuData">
+			<root>
+				<menuitem label="MenuItem A" >
+					<menuitem label="SubMenuItem A-1" enabled="false"/>
+					<menuitem label="SubMenuItem A-2"/>
+				</menuitem>
+				<menuitem label="MenuItem B" type="check" toggled="true"/>
+				<menuitem label="MenuItem C" type="check" toggled="false"/>
+				<menuitem type="separator"/>     
+				<menuitem label="MenuItem D" >
+					<menuitem label="SubMenuItem D-1" type="radio" 
+							  groupName="one"/>
+					<menuitem label="SubMenuItem D-2" type="radio" 
+							  groupName="one" toggled="true"/>
+					<menuitem label="SubMenuItem D-3" type="radio" 
+							  groupName="one"/>
+				</menuitem>
+			</root>
+		</fx:XML>
+	</fx:Declarations>
+	
+	<s:Panel title="Menu Sample" width="100%" height="100%">
+		
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<s:HGroup bottom="15" horizontalCenter="0" verticalAlign="middle">
+			<s:Button label="Show Menu" click="showHandler(event)" />
+			<s:Button label="Hide Menu" click="hideHandler(event)" />
+			<s:Label text="Menu Item Selected:" fontWeight="bold" />
+			<s:Label id="lblSelected" />
+		</s:HGroup>
+		<s:Label width="220" top="15" right="50"
+				 text="The Menu control is a pop-up control that contains a menu of individually selectable choices. You use ActionScript 
+				 to create a Menu control that pops up in response to a user action, typically as part of an event listener."/>	
+
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/controls/MyListItemRenderer.mxml b/tourdeflexmodules/src/spark/controls/MyListItemRenderer.mxml
new file mode 100644
index 0000000..1f00f1d
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/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>
diff --git a/tourdeflexmodules/src/spark/controls/MyTextFlow.xml b/tourdeflexmodules/src/spark/controls/MyTextFlow.xml
new file mode 100644
index 0000000..8b787ea
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/MyTextFlow.xml
@@ -0,0 +1,23 @@
+<?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.
+
+-->
+<!-- http://blog.flexexamples.com/2009/08/11/setting-text-in-a-spark-richtext-control-in-flex-4/ -->
+<TextFlow xmlns="http://ns.adobe.com/textLayout/2008" whiteSpaceCollapse="preserve">
+    <p><span>This is an example of external text being included that is using the </span> <span fontWeight="bold">Text Layout Framework </span> <span> markup.</span></p>
+</TextFlow>
\ No newline at end of file
diff --git a/tourdeflexmodules/src/spark/controls/NumericStepperExample.mxml b/tourdeflexmodules/src/spark/controls/NumericStepperExample.mxml
new file mode 100644
index 0000000..79f9856
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/NumericStepperExample.mxml
@@ -0,0 +1,87 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s: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[
+			protected function clickHandler(event:MouseEvent):void
+			{
+				responseText.text = "Thank you for your purchase of " +this.numStepper.value + " tickets!";
+			}
+		]]>
+	</fx:Script>
+
+	<fx:Style>
+		@namespace "library://ns.adobe.com/flex/spark";
+		@namespace mx "library://ns.adobe.com/flex/mx";
+		#formHead { 
+			fontSize: 18;
+			fontFamily: Arial;
+			fontWeight: bold;
+		}
+		mx|FormItem { 
+			fontSize: 12;
+			fontFamily: Arial;
+			fontWeight: bold;
+		}	
+			
+	</fx:Style>
+	
+	<s:Panel title="NumericStepper Sample" width="100%" height="100%">
+		
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+			
+		<s:Label width="250" verticalAlign="justify" 
+				 text="The NumericStepper control allows you to select a number from an
+ordered set. The NumericStepper control consists of a single-line input text field and a pair of arrow buttons
+for stepping through the valid values. You can use the Up Arrow and Down arrow keys to cycle through the values."/>
+		
+		<mx:Form>
+			<mx:FormHeading id="formHead" label="Welcome to Ticket Grabber!"/>
+			<mx:FormItem label="Name:">
+				<s:TextInput id="nameTxt" widthInChars="20"/>
+			</mx:FormItem>
+			<mx:FormItem label="Address:">
+				<s:TextArea widthInChars="20" heightInLines="2"/>
+			</mx:FormItem>
+			<mx:FormItem label="Phone:">
+				<s:TextInput id="phoneTxt" widthInChars="20"/>	
+			</mx:FormItem>
+			<mx:FormItem label="Select # of tickets:">
+				<s:NumericStepper id="numStepper" width="55" 
+								  value="0" snapInterval="2"/>
+			</mx:FormItem>
+			<mx:FormItem>
+				<s:Button label="Buy Now!" click="clickHandler(event)"/>
+			</mx:FormItem>
+			<mx:FormItem>
+				<s:Group>
+					<s:Label id="responseText"/>	
+				</s:Group>
+			</mx:FormItem>
+		</mx:Form>
+		
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/controls/OLAPDataGridExample.mxml b/tourdeflexmodules/src/spark/controls/OLAPDataGridExample.mxml
new file mode 100644
index 0000000..1d72c5e
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/OLAPDataGridExample.mxml
@@ -0,0 +1,223 @@
+<?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"
+			   creationComplete="creationCompleteHandler()">
+	
+	<fx:Script>
+		<![CDATA[
+			import mx.rpc.AsyncResponder;
+			import mx.rpc.AsyncToken;
+			import mx.olap.OLAPQuery;
+			import mx.olap.OLAPSet;
+			import mx.olap.IOLAPQuery;
+			import mx.olap.IOLAPQueryAxis;
+			import mx.olap.IOLAPCube;
+			import mx.olap.OLAPResult;
+			import mx.events.CubeEvent;
+			import mx.controls.Alert;
+			import mx.collections.ArrayCollection;
+			
+			
+			//
+			// Format of Objects in the ArrayCollection:
+			//
+			//  data:Object = {
+			//    customer:"AAA", 
+			//    product:"ColdFusion",
+			//    quarter:"Q1"
+			//    revenue: "100.00" 
+			//  }
+			//
+			
+			[Bindable]
+			private var flatData:ArrayCollection = new ArrayCollection(
+			[
+			{customer:"AAA", product:"ColdFusion", quarter:"Q1", revenue:210, cost:25},
+			{customer:"AAA", product:"Flex", quarter:"Q2", revenue:210, cost:25},
+			{customer:"AAA", product:"Dreamweaver", quarter:"Q3", revenue:250, cost:125},
+			{customer:"AAA", product:"Flash", quarter:"Q4", revenue:430, cost:75},
+			
+			{customer:"BBB", product:"ColdFusion", quarter:"Q2", revenue:125, cost:20},
+			{customer:"BBB", product:"Flex", quarter:"Q3", revenue:210, cost:20},
+			{customer:"BBB", product:"Dreamweaver", quarter:"Q4", revenue:320, cost:120},
+			{customer:"BBB", product:"Flash", quarter:"Q1", revenue:280, cost:70},
+			
+			{customer:"CCC", product:"ColdFusion", quarter:"Q3", revenue:375, cost:120},
+			{customer:"CCC", product:"Flex", quarter:"Q4", revenue:430, cost:120},
+			{customer:"CCC", product:"Dreamweaver", quarter:"Q1", revenue:470, cost:220},
+			{customer:"CCC", product:"Flash", quarter:"Q2", revenue:570, cost:170},
+			
+			{customer:"AAA", product:"ColdFusion", quarter:"Q4", revenue:215, cost:90},
+			{customer:"AAA", product:"Flex", quarter:"Q1", revenue:210, cost:90},
+			{customer:"AAA", product:"Dreamweaver", quarter:"Q2", revenue:175, cost:190},
+			{customer:"AAA", product:"Flash", quarter:"Q3", revenue:670, cost:75},
+			
+			{customer:"BBB", product:"ColdFusion", quarter:"Q1", revenue:175, cost:20},
+			{customer:"BBB", product:"Flex", quarter:"Q2", revenue:210, cost:20},
+			{customer:"BBB", product:"Dreamweaver",quarter:"Q3", revenue:120, cost:120},
+			{customer:"BBB", product:"Flash", quarter:"Q4", revenue:310, cost:70},
+			
+			{customer:"CCC", product:"ColdFusion", quarter:"Q1", revenue:385, cost:120},
+			{customer:"CCC", product:"Flex", quarter:"Q2", revenue:340, cost:120},
+			{customer:"CCC", product:"Dreamweaver", quarter:"Q3", revenue:470, cost:220},
+			{customer:"CCC", product:"Flash", quarter:"Q4", revenue:270, cost:170},
+			
+			{customer:"AAA", product:"ColdFusion", quarter:"Q1", revenue:100, cost:25},
+			{customer:"AAA", product:"Flex", quarter:"Q2", revenue:150, cost:25},
+			{customer:"AAA", product:"Dreamweaver", quarter:"Q3", revenue:200, cost:125},
+			{customer:"AAA", product:"Flash", quarter:"Q4", revenue:300, cost:75},
+			
+			{customer:"BBB", product:"ColdFusion", quarter:"Q2", revenue:175, cost:20},
+			{customer:"BBB", product:"Flex", quarter:"Q3", revenue:100, cost:20},
+			{customer:"BBB", product:"Dreamweaver", quarter:"Q4", revenue:270, cost:120},
+			{customer:"BBB", product:"Flash", quarter:"Q1", revenue:370, cost:70},
+			
+			{customer:"CCC", product:"ColdFusion", quarter:"Q3", revenue:410, cost:120},
+			{customer:"CCC", product:"Flex", quarter:"Q4", revenue:300, cost:320},
+			{customer:"CCC", product:"Dreamweaver", quarter:"Q1", revenue:510, cost:220},
+			{customer:"CCC", product:"Flash", quarter:"Q2", revenue:620, cost:170},
+			
+			{customer:"AAA", product:"ColdFusion", quarter:"Q4", revenue:215, cost:90},
+			{customer:"AAA", product:"Flex", quarter:"Q1", revenue:210, cost:90},
+			{customer:"AAA", product:"Dreamweaver", quarter:"Q2", revenue:175, cost:190},
+			{customer:"AAA", product:"Flash", quarter:"Q3", revenue:420, cost:75},
+			
+			{customer:"BBB", product:"ColdFusion", quarter:"Q1", revenue:240, cost:20},
+			{customer:"BBB", product:"Flex", quarter:"Q2", revenue:100, cost:20},
+			{customer:"BBB", product:"Dreamweaver", quarter:"Q3", revenue:270, cost:120},
+			{customer:"BBB", product:"Flash", quarter:"Q4", revenue:370, cost:70},
+			
+			{customer:"CCC", product:"ColdFusion", quarter:"Q1", revenue:375, cost:120},
+			{customer:"CCC", product:"Flex", quarter:"Q2", revenue:420, cost:120},
+			{customer:"CCC", product:"Dreamweaver", quarter:"Q3", revenue:680, cost:220},
+			{customer:"CCC", product:"Flash", quarter:"Q4", revenue:570, cost:170}         
+			]);
+			
+			private function creationCompleteHandler():void {
+				// You must initialize the cube before you 
+				// can execute a query on it.
+				myMXMLCube.refresh();
+			}
+			
+			// Create the OLAP query.
+			private function getQuery(cube:IOLAPCube):IOLAPQuery {
+				// Create an instance of OLAPQuery to represent the query. 
+				var query:OLAPQuery = new OLAPQuery;
+				
+				// Get the row axis from the query instance.
+				var rowQueryAxis:IOLAPQueryAxis = 
+				query.getAxis(OLAPQuery.ROW_AXIS);
+				// Create an OLAPSet instance to configure the axis.
+				var productSet:OLAPSet = new OLAPSet;
+				// Add the Product to the row to aggregate data 
+				// by the Product dimension.
+				productSet.addElements(
+				cube.findDimension("ProductDim").findAttribute("Product").children);
+				// Add the OLAPSet instance to the axis.
+				rowQueryAxis.addSet(productSet);
+				
+				// Get the column axis from the query instance, and configure it
+				// to aggregate the columns by the Quarter dimension. 
+				var colQueryAxis:IOLAPQueryAxis = 
+				query.getAxis(OLAPQuery.COLUMN_AXIS);         
+				var quarterSet:OLAPSet= new OLAPSet;
+				quarterSet.addElements(
+				cube.findDimension("QuarterDim").findAttribute("Quarter").children);
+				colQueryAxis.addSet(quarterSet);
+				
+				return query;       
+			}
+			
+			// Event handler to execute the OLAP query 
+			// after the cube completes initialization.
+			private function runQuery(event:CubeEvent):void {
+				// Get cube.
+				var cube:IOLAPCube = IOLAPCube(event.currentTarget);
+				// Create a query instance.
+				var query:IOLAPQuery = getQuery(cube);
+				// Execute the query.
+				var token:AsyncToken = cube.execute(query);
+				// Setup handlers for the query results.
+				token.addResponder(new AsyncResponder(showResult, showFault));
+			}
+			
+			// Handle a query fault.
+			private function showFault(result:Object, token:Object):void {
+				Alert.show("Error in query.");
+			}
+			
+			// Handle a successful query by passing the query results to 
+			// the OLAPDataGrid control..
+			private function showResult(result:Object, token:Object):void {
+				if (!result) {
+					Alert.show("No results from query.");
+					return;
+				}
+				myOLAPDG.dataProvider= result as OLAPResult;            
+			}        
+		]]>
+	</fx:Script>
+	
+	<fx:Declarations>
+		<mx:OLAPCube name="FlatSchemaCube" dataProvider="{flatData}" id="myMXMLCube" complete="runQuery(event)">
+			<mx:OLAPDimension name="CustomerDim">
+				<mx:OLAPAttribute name="Customer" dataField="customer"/>
+				<mx:OLAPHierarchy name="CustomerHier" hasAll="true">
+					<mx:OLAPLevel attributeName="Customer"/>
+				</mx:OLAPHierarchy>
+			</mx:OLAPDimension>
+			
+			<mx:OLAPDimension name="ProductDim">
+				<mx:OLAPAttribute name="Product" dataField="product"/>
+				<mx:OLAPHierarchy name="ProductHier" hasAll="true">
+					<mx:OLAPLevel attributeName="Product"/>
+				</mx:OLAPHierarchy>
+			</mx:OLAPDimension>
+			
+			<mx:OLAPDimension name="QuarterDim">
+				<mx:OLAPAttribute name="Quarter" dataField="quarter"/>
+				<mx:OLAPHierarchy name="QuarterHier" hasAll="true">
+					<mx:OLAPLevel attributeName="Quarter"/>
+				</mx:OLAPHierarchy> 
+			</mx:OLAPDimension>
+			
+			<mx:OLAPMeasure name="Revenue" 
+							dataField="revenue" 
+							aggregator="SUM"/>
+		</mx:OLAPCube>
+	</fx:Declarations>
+	
+	
+	
+	<s:Panel title="OLAPDataGrid Control" width="100%" height="100%">
+
+		<s:layout>
+			<s:HorizontalLayout horizontalAlign="center" 
+								paddingLeft="10" paddingRight="10" 
+								paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<mx:OLAPDataGrid id="myOLAPDG" width="100%" height="100%"/>
+		
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/controls/OSMFExample.mxml b/tourdeflexmodules/src/spark/controls/OSMFExample.mxml
new file mode 100644
index 0000000..642ea3f
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/OSMFExample.mxml
@@ -0,0 +1,27 @@
+<?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">
+	
+	<s:VideoPlayer horizontalCenter="0" verticalCenter="0"
+		source="http://mediapm.edgesuite.net/osmf/content/test/manifest-files/dynamic_Streaming.f4m" 
+		autoPlay="true"/>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/controls/PagedList.as b/tourdeflexmodules/src/spark/controls/PagedList.as
new file mode 100644
index 0000000..19e87df
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/PagedList.as
@@ -0,0 +1,510 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package  
+{
+	import flash.events.Event;
+	import flash.events.EventDispatcher;
+	
+	import mx.collections.IList;
+	import mx.collections.errors.ItemPendingError;
+	import mx.events.CollectionEvent;
+	import mx.events.CollectionEventKind;
+	import mx.events.PropertyChangeEvent;
+	import mx.events.PropertyChangeEventKind;
+	import mx.resources.IResourceManager;
+	import mx.resources.ResourceManager;
+	import mx.rpc.IResponder;
+	
+	[Event(name="collectionChange", type="mx.events.CollectionEvent")]
+	
+	/**
+	 *  An IList whose items are fetched asynchronously by a user provided function.   The 
+	 *  loadItemsFunction initiates an asynchronous request for a pageSize block items, typically
+	 *  from a web service.  When the request sucessfully completes, the storeItemsAt() method
+	 *  must be called. If the request fails, then failItemsAt().
+	 * 
+	 *  <p>PagedList divides its <code>length</code> items into <code>pageSize</code> blocks or 
+	 *  "pages".  It tracks which items exist locally, typically because they've been stored with
+	 *  storeItemsAt().  When an item that does not exist locally is requested with getItemAt(),
+	 *  the loadItemsFunction is called and then an IPE is thrown.  When the loadItemsFunction
+	 *  either completes or fails, it must call storeItemsAt() or failItemsAt() which causes
+	 *  the IPE's responders to run and a "replace" CollectionEvent to be dispatched for the 
+	 *  updated page.  The failItemsAt() method resets the corresponding items to undefined, 
+	 *  which means that subsequent calls to getItemAt() will cause an IPE to be thrown.</p>
+	 * 
+	 *  <p>Unlike some other IList implementations, the only method here that can thrown an
+	 *  IPE is getItemAt().   Methods like getItemIndex() and toArray() just report items
+	 *  that aren't local as null.</p>
+	 * 
+	 *  <p>This class is intended to be used as the "list" source for an ASyncListView.</p>
+	 */
+	public class PagedList  extends EventDispatcher implements IList
+	{
+		/**
+		 *  @private
+		 */
+		private static function get resourceManager():IResourceManager
+		{
+			return ResourceManager.getInstance();
+		}
+		
+		/**
+		 *  @private
+		 */    
+		private static function checkItemIndex(index:int, listLength:int):void
+		{
+			if (index < 0 || (index >= listLength)) 
+			{
+				const message:String = resourceManager.getString("collections", "outOfBounds", [ index ]);
+				throw new RangeError(message);
+			}
+		}
+		
+		/**
+		 *  @private
+		 *  The IList's items.
+		 */
+		private const data:Vector.<*> = new Vector.<*>();
+		
+		/**
+		 *  Construct a PagedList with the specified length and pageSize.
+		 */    
+		public function PagedList(length:int=1000, pageSize:int=10)
+		{
+			this.data.length = length;
+			this.pageSize = pageSize;
+			
+			for (var i:int = 0; i < data.length; i++)
+				data[i] = undefined;
+		}
+		
+		//----------------------------------
+		//  loadItemsFunction
+		//---------------------------------- 
+		
+		private var _loadItemsFunction:Function = null;
+		
+		/**
+		 *  The value of this property must be a function that loads a contiguous 
+		 *  block of items and then calls <code>storeItemsAt()</code> or 
+		 *  <code>failItemsAt()</code>.  A loadItemsFunction must be defined as follows:
+		 *  <pre>
+		 *  myLoadItems(list:PagedList, index:int, count:int):void 
+		 *  </pre>
+		 *  
+		 *  <p>Typically the loadItemsFunction will make one or more network requests
+		 *  to retrieve the items.   It must do all of its work asynchronously to avoid
+		 *  blocking the application's GUI.
+		 *  
+		 */
+		public function get loadItemsFunction():Function
+		{
+			return _loadItemsFunction;
+		}
+		
+		/**
+		 *  @private
+		 */
+		public function set loadItemsFunction(value:Function):void
+		{
+			_loadItemsFunction = value;
+		}
+		
+		//----------------------------------
+		//  length
+		//---------------------------------- 
+		
+		[Bindable("collectionChange")]    
+		
+		/**
+		 *  The number of items in the list.
+		 *  
+		 *  <p>The length of the list can be changed directly however the "-1" indeterminate 
+		 *  length value is not supported.</p>
+		 */
+		public function get length():int
+		{
+			return data.length;
+		}
+		
+		/**
+		 *  @private
+		 */
+		public function set length(value:int):void
+		{
+			const oldLength:int = data.length;
+			const newLength:int = value;
+			
+			if (oldLength == newLength)
+				return;
+			
+			var ce:CollectionEvent = null;
+			if (hasEventListener(CollectionEvent.COLLECTION_CHANGE))
+				ce = new CollectionEvent(CollectionEvent.COLLECTION_CHANGE);
+			
+			if (oldLength < newLength)
+			{
+				if (ce)
+				{
+					ce.location = Math.max(oldLength - 1, 0);
+					ce.kind = CollectionEventKind.ADD;
+					const itemsLength:int = newLength - oldLength;
+					for (var i:int = 0; i < itemsLength; i++)
+						ce.items.push(undefined);
+				}
+				
+				data.length = newLength;
+				for (var newIndex:int = Math.max(oldLength - 1, 0); newIndex < newLength; newIndex++)
+					data[newIndex] = undefined;
+			}
+			else // oldLength > newLength
+			{
+				if (ce)
+				{
+					ce.location = Math.max(newLength - 1, 0);
+					ce.kind = CollectionEventKind.REMOVE;
+					for (var oldIndex:int = Math.max(newLength - 1, 0); oldIndex < oldLength; oldIndex++)
+						ce.items.push(data[oldIndex]);
+				}
+				
+				data.length = newLength; 
+			}
+			
+			if (ce)
+				dispatchEvent(ce);
+		}
+		
+		//----------------------------------
+		//  pageSize
+		//---------------------------------- 
+		
+		private var _pageSize:int = 10;
+		
+		/** 
+		 *  Items are loaded in contiguous pageSize blocks.  The value of this property should be greater than  
+		 *  zero, smaller than the PageList's length, and a reasonable working size for the loadItemsFunction.   
+		 */
+		public function get pageSize():int
+		{
+			return _pageSize;
+		}
+		
+		/**
+		 *  @private
+		 */
+		public function set pageSize(value:int):void
+		{
+			_pageSize = value;    
+		}
+		
+		/**
+		 *  Resets the entire list to its initial state.  All local and pending items are 
+		 *  cleared.
+		 */
+		public function clearItems():void
+		{
+			var index:int = 0;
+			for each (var item:Object in data)
+			data[index++] = undefined;
+			
+			if (hasEventListener(CollectionEvent.COLLECTION_CHANGE))
+			{
+				var ce:CollectionEvent = new CollectionEvent(CollectionEvent.COLLECTION_CHANGE);
+				ce.kind = CollectionEventKind.RESET;
+				dispatchEvent(ce);
+			}            
+		}
+		
+		/**
+		 *  @private
+		 */
+		private static function createUpdatePCE(itemIndex:Object, oldValue:Object, newValue:Object):PropertyChangeEvent
+		{
+			const pce:PropertyChangeEvent = new PropertyChangeEvent(PropertyChangeEvent.PROPERTY_CHANGE);
+			pce.kind = PropertyChangeEventKind.UPDATE;
+			pce.property = itemIndex;
+			pce.oldValue = oldValue;
+			pce.newValue = newValue;
+			return pce;
+		}
+		
+		/**
+		 *  @private
+		 */    
+		private static function createCE(kind:String, location:int, item:Object):CollectionEvent
+		{
+			const ce:CollectionEvent = new CollectionEvent(CollectionEvent.COLLECTION_CHANGE);
+			ce.kind = kind;
+			ce.location = location;
+			
+			if (item is Array)
+				ce.items = item as Array;
+			else
+				ce.items.push(item);
+			
+			return ce;
+		}
+		
+		/**
+		 *  This method must be called by the loadItemsFunction after a block of requested
+		 *  items have been successfully retrieved.  It stores the specified items in the 
+		 *  internal data vector and clears the "pending" state associated with the original
+		 *  request.
+		 */
+		public function storeItemsAt(items:Vector.<Object>, index:int):void
+		{
+			if (index < 0 || (index + items.length) > length) 
+			{
+				const message:String = resourceManager.getString("collections", "outOfBounds", [ index ]);
+				throw new RangeError(message);
+			}
+			
+			var item:Object;
+			var itemIndex:int;
+			var pce:PropertyChangeEvent;
+			
+			// copy the new items into the internal items vector and run the IPE responders
+			
+			itemIndex = index;
+			for each (item in items)
+			{
+				var ipe:ItemPendingError = data[itemIndex] as ItemPendingError;
+				if (ipe && ipe.responders)
+				{
+					for each (var responder:IResponder in ipe.responders)
+					responder.result(null);
+				}
+				
+				data[itemIndex++] = item;
+			}
+			
+			// dispatch collection and property change events
+			
+			const hasCollectionListener:Boolean = hasEventListener(CollectionEvent.COLLECTION_CHANGE);
+			const hasPropertyListener:Boolean = hasEventListener(PropertyChangeEvent.PROPERTY_CHANGE);
+			var propertyChangeEvents:Array = new Array();  // Array of PropertyChangeEvents; 
+			
+			if (hasCollectionListener || hasPropertyListener)
+			{   
+				itemIndex = index;
+				for each (item in items)
+				propertyChangeEvents.push(createUpdatePCE(itemIndex++, null, item));
+			}
+			
+			if (hasCollectionListener)
+				dispatchEvent(createCE(CollectionEventKind.REPLACE, index, propertyChangeEvents));
+			
+			if (hasPropertyListener)
+			{
+				for each (pce in propertyChangeEvents)
+				dispatchEvent(pce);
+			}
+		}
+		
+		public function failItemsAt(index:int, count:int):void
+		{
+			if (index < 0 || (index + count) > length) 
+			{
+				const message:String = resourceManager.getString("collections", "outOfBounds", [ index ]);
+				throw new RangeError(message);
+			}
+			
+			for (var i:int = 0; i < count; i++)
+			{
+				var itemIndex:int = i + index;
+				var ipe:ItemPendingError = data[itemIndex] as ItemPendingError;
+				if (ipe && ipe.responders)
+				{
+					for each (var responder:IResponder in ipe.responders)
+					responder.fault(null);
+				}
+				data[itemIndex] = undefined;
+			}        
+			
+			
+			
+		}
+		
+		//--------------------------------------------------------------------------
+		//
+		//  IList Implementation (length appears above)
+		//
+		//--------------------------------------------------------------------------
+		
+		/**
+		 *  @inheritDoc
+		 */    
+		public function addItem(item:Object):void
+		{
+			addItemAt(item, length);        
+		}
+		
+		/**
+		 *  @inheritDoc
+		 */   
+		public function addItemAt(item:Object, index:int):void
+		{
+			checkItemIndex(index, length + 1);
+			data.splice(index, index, item);
+			
+			if (hasEventListener(CollectionEvent.COLLECTION_CHANGE))
+				dispatchEvent(createCE(CollectionEventKind.ADD, index, item));
+		}
+		
+		/**
+		 *  @inheritDoc
+		 */   
+		public function getItemAt(index:int, prefetch:int=0):Object
+		{
+			checkItemIndex(index, length);
+			
+			var item:* = data[index];
+			if (item is ItemPendingError)
+			{
+				throw item as ItemPendingError;
+			}
+			else if (item === undefined)
+			{
+				const ipe:ItemPendingError = new ItemPendingError(String(index));
+				const pageStartIndex:int = Math.floor(index / pageSize) * pageSize;
+				const count:int = Math.min(pageSize, data.length - pageStartIndex);
+				
+				for (var i:int = 0; i < count; i++)
+					data[pageStartIndex + i] = ipe;
+				
+				if (loadItemsFunction !== null)
+					loadItemsFunction(this, pageStartIndex, count);
+				
+				// Allow for the possibility that loadItemsFunction has synchronously
+				// loaded the requested data item.
+				
+				if (data[index] == ipe)
+					throw ipe;
+				else
+					item = data[index];
+			}
+			
+			return item;
+		}
+		
+		/**
+		 *  Return the index of of the specified item, if it currently exists in the list.
+		 *  This method does not cause additional items to be loaded.
+		 */   
+		public function getItemIndex(item:Object):int
+		{
+			return data.indexOf(item);
+		}
+		
+		/**
+		 *  @inheritDoc
+		 */   
+		public function itemUpdated(item:Object, property:Object=null, oldValue:Object=null, newValue:Object=null):void
+		{
+			const hasCollectionListener:Boolean = hasEventListener(CollectionEvent.COLLECTION_CHANGE);
+			const hasPropertyListener:Boolean = hasEventListener(PropertyChangeEvent.PROPERTY_CHANGE);
+			var pce:PropertyChangeEvent = null;
+			
+			if (hasCollectionListener || hasPropertyListener)
+				pce = createUpdatePCE(property, oldValue, newValue);
+			
+			if (hasCollectionListener)
+				dispatchEvent(createCE(CollectionEventKind.UPDATE, -1, pce));
+			
+			if (hasPropertyListener)
+				dispatchEvent(pce);
+		}
+		
+		/**
+		 *  @inheritDoc
+		 */   
+		public function removeAll():void
+		{
+			length = 0;
+			
+			if (hasEventListener(CollectionEvent.COLLECTION_CHANGE))
+			{
+				const ce:CollectionEvent = new CollectionEvent(CollectionEvent.COLLECTION_CHANGE);
+				ce.kind = CollectionEventKind.RESET;
+				dispatchEvent(ce);
+			}
+		}
+		
+		/**
+		 *  @inheritDoc
+		 */   
+		public function removeItemAt(index:int):Object
+		{
+			checkItemIndex(index, length);
+			
+			const item:Object = data[index];
+			
+			data.splice(index, 1);
+			if (hasEventListener(CollectionEvent.COLLECTION_CHANGE))
+				dispatchEvent(createCE(CollectionEventKind.REMOVE, index, item));    
+			
+			return item;
+		}
+		
+		/**
+		 *  @inheritDoc
+		 */   
+		public function setItemAt(item:Object, index:int):Object
+		{
+			checkItemIndex(index, length);
+			
+			const oldItem:Object = data[index];
+			
+			if (item !== oldItem)
+			{
+				const hasCollectionListener:Boolean = hasEventListener(CollectionEvent.COLLECTION_CHANGE);
+				const hasPropertyListener:Boolean = hasEventListener(PropertyChangeEvent.PROPERTY_CHANGE);
+				var pce:PropertyChangeEvent = null;
+				
+				if (hasCollectionListener || hasPropertyListener)
+					pce = createUpdatePCE(index, oldItem, item);
+				
+				if (hasCollectionListener)
+					dispatchEvent(createCE(CollectionEventKind.REPLACE, index, pce));
+				
+				if (hasPropertyListener)
+					dispatchEvent(pce);
+			}
+			
+			return oldItem;
+		}
+		
+		/**
+		 *  Returns an array with the same length as this list, that contains all of
+		 *  the items successfully loaded so far.  
+		 * 
+		 *  <p>Calling this method does not force additional items to be loaded.</p>
+		 */   
+		public function toArray():Array
+		{
+			const rv:Array = new Array(data.length);
+			
+			var index:int = 0;
+			for each (var item:* in data)
+			rv[index++] = (item is ItemPendingError) ? undefined : item;
+			
+			return rv;
+		}
+	}
+}
diff --git a/tourdeflexmodules/src/spark/controls/PopUpAnchor1Example.mxml b/tourdeflexmodules/src/spark/controls/PopUpAnchor1Example.mxml
new file mode 100644
index 0000000..da653cf
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/PopUpAnchor1Example.mxml
@@ -0,0 +1,85 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s: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.controls.Alert;
+			protected function handleClose(event:MouseEvent):void
+			{
+				Alert.show("TEST");
+				this.currentState="normal";
+			}
+		]]>
+	</fx:Script>
+	
+	<s:states>
+		<s:State name="normal" />
+		<s:State name="infoOpen" />
+	</s:states>
+	
+	<s:transitions>
+		<mx:Transition fromState="*" toState="*">
+			<mx:Sequence>
+				<s:Fade target="{infoPopUp.popUp}" duration="1500"/>
+			</mx:Sequence>
+		</mx:Transition> 
+	</s:transitions>
+	
+	<fx:Declarations>
+		<s:LinearGradient rotation="90" id="fill1">
+			<s:GradientEntry color="0xFFFFFF" />
+			<s:GradientEntry color="0x336699" />
+		</s:LinearGradient>
+	</fx:Declarations>
+	
+	<s:Panel title="PopUpAnchor Sample" width="100%" height="100%">
+		
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<s:VGroup top="0">
+			<s:Label width="200" height="200"
+					 text="The PopUpAnchor control displays a pop-up component in a layout. It has 
+					 no visual appearance, but it has dimensions. The PopUpAnchor control is used in the DropDownList and VolumeBar controls. The PopUpAnchor displays the pop-up component by adding it to the PopUpManager, and then sizes and positions the pop-up component relative to itself."/>
+			<s:Label text=" Click the Information icon to see the PopUpAnchor in action."/>
+			<mx:Spacer width="60"/>	
+		</s:VGroup>
+		<s:VGroup>
+			<mx:LinkButton label="Information" click="currentState = 'infoOpen'" icon="@Embed('iconinfo.gif')"/>
+			<s:PopUpAnchor id="infoPopUp" left="0" bottom="0" popUpPosition="below"  
+						   includeIn="infoOpen" displayPopUp.normal="false" 
+						   displayPopUp.infoOpen="true">
+				<s:BorderContainer cornerRadius="5" backgroundFill="{fill1}" height="160" width="180" 
+						  dropShadowVisible="true">
+					<s:Label horizontalCenter="0" top="20" width="170" height="155"
+							 text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam laoreet urna fringilla risus fermentum sed aliquam lorem aliquam. Maecenas egestas, risus at adipiscing faucibus, nisl dui dignissim turpis, at consectetur magna erat in ligula."/>
+					
+					<s:Button top="2" right="2" width="16" height="16" skinClass="skins.CloseButtonSkin" click="handleClose(event)"/>
+				</s:BorderContainer>
+			</s:PopUpAnchor>
+		</s:VGroup>
+
+	</s:Panel>
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/controls/PopUpAnchor2Example.mxml b/tourdeflexmodules/src/spark/controls/PopUpAnchor2Example.mxml
new file mode 100644
index 0000000..9878c45
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/PopUpAnchor2Example.mxml
@@ -0,0 +1,80 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s: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">
+	
+	<s:states>
+		<s:State name="normal" />
+		<s:State name="emailOpen" />
+		<s:State name="aboutOpen" />
+		<s:State name="infoOpen" />
+	</s:states>
+	
+	<s:transitions>
+		<mx:Transition fromState="*" toState="*">
+			<mx:Sequence>
+				<s:Fade target="{emailPopUp.popUp}" duration="1000"/>
+			</mx:Sequence>
+		</mx:Transition> 
+	</s:transitions>
+	
+	<s:Panel title="PopUpAnchor with Form" width="100%" height="100%">
+		
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+
+		<s:HGroup>
+			<mx:LinkButton label="Home" color="0x336699" click="currentState = 'normal'"/>
+			<mx:LinkButton label="About" color="0x336699" click="currentState = 'aboutOpen'"/>
+			<mx:LinkButton label="Information" color="0x336699" click="currentState = 'infoOpen'"/>
+			<mx:LinkButton label="Contact Us" color="0x336699" click="currentState = 'emailOpen'"/>
+		</s:HGroup>
+		<s:BorderContainer id="border1" excludeFrom="emailOpen" width="290" height="200" 
+				  backgroundColor="0x000000" color="0xFFFFFF" cornerRadius="7">
+			<s:Label width="200" height="200" top="20" left="5" 
+					 text.normal="Welcome to Tour de Flex!" 
+					 text.aboutOpen="Tour de Flex is constantly being updated with more cool samples!" 
+					 text.infoOpen="Check back for more Flex 4 samples weekly!"/>
+		</s:BorderContainer>
+		<s:PopUpAnchor id="emailPopUp" left="0" bottom="0" popUpPosition="below"  
+					   includeIn="emailOpen" displayPopUp.normal="false" displayPopUp.emailOpen="true">
+			<mx:Form id="form1" backgroundColor="0x000000" color="0xFFFFFF">
+				<mx:FormItem label="From :">
+					<s:TextInput/>
+				</mx:FormItem>
+				<mx:FormItem label="To :">
+					<s:TextInput/>
+				</mx:FormItem>
+				<mx:FormItem label="Subject :">
+					<s:TextInput/>
+				</mx:FormItem>
+				<mx:FormItem label="Message :">
+					<s:TextArea width="100%" height="60" maxChars="60"/>
+				</mx:FormItem>
+				<mx:FormItem direction="horizontal">
+					<s:Button label="Send" click="currentState = 'normal'" color="0x000000"/>  
+					<s:Button label="Cancel" click="currentState = 'normal'" color="0x000000"/>
+				</mx:FormItem>
+			</mx:Form>
+		</s:PopUpAnchor>
+	</s:Panel>
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/controls/PopupButtonExample.mxml b/tourdeflexmodules/src/spark/controls/PopupButtonExample.mxml
new file mode 100644
index 0000000..a8bbe24
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/PopupButtonExample.mxml
@@ -0,0 +1,75 @@
+<?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.controls.*;
+			import mx.events.*;
+			import mx.controls.Alert;
+
+			private var myMenu:Menu;
+
+			// Initialize the Menu control, and specify it as the pop up object
+			// of the PopUpButton control. 
+			private function initMenu():void {
+				myMenu = new Menu();
+				var dp:Object = [{label: "New Folder"}, {label: "Sent Items"}, {label: "Inbox"}];        
+				myMenu.dataProvider = dp;
+				myMenu.selectedIndex = 0;       
+				myMenu.addEventListener("itemClick", itemClickHandler);
+				popB.popUp = myMenu;
+				popB.label = "Put in: " + myMenu.dataProvider[myMenu.selectedIndex].label;
+			}
+
+			// Define the event listener for the Menu control's itemClick event. 
+			private function itemClickHandler(event:MenuEvent):void {
+				var label:String = event.item.label;        
+				popTypeB.text=String("Moved to " + label);
+				popB.label = "Put in: " + label;
+				popB.close();
+				myMenu.selectedIndex = event.index;
+			}
+
+		]]>
+	</fx:Script>
+	
+	<s:Panel title="PopUpButton Control" width="100%" height="100%">
+		
+		<s:layout>
+			<s:VerticalLayout horizontalAlign="center" 
+							  paddingLeft="10" paddingRight="10" 
+							  paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+         
+         <s:Label width="100%"
+            text="Button label contains the name of the last selected menu item." />
+        <mx:PopUpButton id="popB" label="Edit" creationComplete="initMenu()" width="140" click="{Alert.show('Action: ' + popB.label);}" />
+		
+        <mx:Spacer height="65" />
+		
+        <s:TextInput id="popTypeB" text="...waiting" />
+        
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/controls/ProgressBarExample.mxml b/tourdeflexmodules/src/spark/controls/ProgressBarExample.mxml
new file mode 100644
index 0000000..1b714f2
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/ProgressBarExample.mxml
@@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s: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[
+           
+          private var j:uint=10;
+          
+          // Event handler function to set the value of the 
+          // ProgressBar control.
+          private function runit():void
+          {
+    	      if(j<=100)
+    	      {
+    	         bar.setProgress(j,100);
+        		 bar.label= "CurrentProgress" + " " + j + "%";
+        		 j+=10;
+    	      }
+    	      if(j>100)
+    	      {
+        		 j=0;
+              }
+          }
+        ]]>    
+    </fx:Script>
+    
+	<s:Panel title="ProgressBar Control" width="100%" height="100%">
+		
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+         
+         <s:Label width="100%"
+            text="Click the button to increment the progress bar." />
+        <s:Button id="Speed" label="Run" click="runit()"/>
+            
+        <mx:ProgressBar id="bar" labelPlacement="bottom" minimum="0" visible="true" maximum="100"
+         	label="CurrentProgress 0%" direction="right" mode="manual" width="100%"/>
+            
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/controls/RadioButtonExample.mxml b/tourdeflexmodules/src/spark/controls/RadioButtonExample.mxml
new file mode 100644
index 0000000..aca4e33
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/RadioButtonExample.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">
+
+	<fx:Script>
+		<![CDATA[
+			protected function scoreClickHandler(event:MouseEvent):void
+			{
+				var score:Number = 0.0;
+				
+				if (group1.selectedValue=="True")
+					score=33.34;
+				if (group2.selectedValue=="South Africa")
+					score=score+33.34;
+				if (group3.selectedValue=="False")
+					score=score+33.34;
+				scoreText.text = "You scored " + numberFormatter.format(score).toString()+"%";
+			}
+		]]>
+	</fx:Script>
+	<fx:Declarations>
+		<s:RadioButtonGroup id="group1"/>
+		<s:RadioButtonGroup id="group2"/>
+		<s:RadioButtonGroup id="group3"/>
+		<mx:NumberFormatter id="numberFormatter"
+							precision="0"
+							rounding="nearest"/>
+	</fx:Declarations>
+	<fx:Style>
+		@namespace "library://ns.adobe.com/flex/spark";
+		
+		RadioButton{ 
+			baseColor: #FFFFFF; 
+		}
+		
+	</fx:Style>
+	
+	<s:Panel title="RadioButton Sample" width="100%" height="100%">
+		
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<s:HGroup>
+			<s:VGroup>
+				<s:Label text="1) The sky is blue:"/>
+				<s:RadioButton id="trueRadioBtn" label="True" groupName="group1"/>
+				<s:RadioButton id="falseRadioBtn" label="False" groupName="group1"/>
+			</s:VGroup>	
+			<s:VGroup paddingLeft="20">
+				<s:Label text="2) Which of the following is not a continent?"/>
+				<s:RadioButton id="multiRadioBtnA" label="North America" groupName="group2"/>
+				<s:RadioButton id="multiRadioBtnB" label="Europe" groupName="group2"/>
+				<s:RadioButton id="multiRadioBtnC" label="Asia" groupName="group2"/>
+				<s:RadioButton id="multiRadioBtnD" label="South Africa" groupName="group2"/>
+			</s:VGroup>
+			<s:VGroup paddingLeft="20">
+				<s:Label text="3) Tallahasee is the capital of Alabama:"/>
+				<s:RadioButton id="trueRadioBtn3" label="True" groupName="group3" />
+				<s:RadioButton id="falseRadioBtn3" label="False" groupName="group3"/>
+			</s:VGroup>
+			<s:VGroup horizontalAlign="contentJustify">
+				<s:Button id="scoreBtn" label="Score Me!" click="scoreClickHandler(event)"/>
+				<s:Label id="scoreText"/>
+			</s:VGroup>
+		</s:HGroup>
+		
+		<s:Label width="100%" verticalAlign="justify"
+				 text="The RadioButton control is a single choice in a set of mutually 
+exclusive choices. A RadioButton group is composed of two or more RadioButton controls with
+the same group name. Only one member of the group can be selected at any given time." />
+	</s:Panel>
+	
+		
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/controls/RichEditableTextExample.mxml b/tourdeflexmodules/src/spark/controls/RichEditableTextExample.mxml
new file mode 100644
index 0000000..9b0ac38
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/RichEditableTextExample.mxml
@@ -0,0 +1,95 @@
+<?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" 
+			   preinitialize="init()">
+	
+	<!-- Based on samples from Peter DeHaan's blog: http://blog.flexexamples.com/ --> 
+	
+	<fx:Script>
+		import flashx.textLayout.elements.Configuration;
+		import flashx.textLayout.elements.TextFlow;
+		import flashx.textLayout.formats.TextDecoration;
+		import flashx.textLayout.formats.TextLayoutFormat;
+		
+		import spark.events.TextOperationEvent;
+		
+		[Bindable]
+		protected static var lineCount:uint = 0;
+		
+		protected function richEdTxt_changeHandler(evt:TextOperationEvent):void {
+			lineCount = richEdTxt.mx_internal::textContainerManager.numLines;
+			lineCnt.text = lineCount.toString();
+		}
+		
+		protected function init():void {
+			var cfg:Configuration = TextFlow.defaultConfiguration;
+			
+			var normalTLF:TextLayoutFormat = new TextLayoutFormat(cfg.defaultLinkNormalFormat);
+			normalTLF.color = 0xFF0000;
+			
+			var hoverTLF:TextLayoutFormat = new TextLayoutFormat(cfg.defaultLinkHoverFormat);
+			hoverTLF.color = 0xFF00FF;
+			hoverTLF.textDecoration = TextDecoration.NONE;
+			
+			var activeTLF:TextLayoutFormat = new TextLayoutFormat(cfg.defaultLinkActiveFormat);
+			activeTLF.color = 0x00FF00;
+			
+			cfg.defaultLinkNormalFormat = normalTLF;
+			cfg.defaultLinkHoverFormat = hoverTLF;
+			cfg.defaultLinkActiveFormat = activeTLF;
+			TextFlow.defaultConfiguration = cfg;
+		}
+	</fx:Script>
+	
+	<s:Panel title="RichEditableText Sample" width="100%" height="100%">
+		
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<s:VGroup id="vgrp" width="100%" height="100%" top="10" left="15">
+			<s:HGroup>
+				<s:Label text="Uneditable text with formatted link:"/>
+				<s:RichEditableText editable="false">
+					<s:content>
+						<s:p>The quick brown <s:a href="http://www.adobe.com/">fox</s:a> jumps over the lazy dog.</s:p>
+					</s:content>
+				</s:RichEditableText>
+			</s:HGroup>
+			<s:HGroup>
+				<s:Label text="Editable text:"/>
+				<s:RichEditableText id="richEdTxt" widthInChars="20" heightInLines="10" 
+									change="richEdTxt_changeHandler(event)" backgroundColor="0xCCCCCC" text="Hello world!">
+				</s:RichEditableText>	
+			</s:HGroup>
+			<s:HGroup>
+				<s:Label text="Line Count of editable text:"/>
+				<s:Label id="lineCnt"/>	
+			</s:HGroup>
+			
+		</s:VGroup>
+		<s:Label width="266" height="180" right="10" top="38" text="RichEditableText is a low-level UIComponent for displaying, scrolling, selecting, and editing richly-formatted text.
+The rich text can contain clickable hyperlinks and inline graphics that are either embedded or loaded from URLs. RichEditableText does not have scrollbars, but it implements 
+the IViewport interface for programmatic scrolling so that it can be controlled by a Scroller, which does provide scrollbars. It also supports vertical scrolling with the mouse wheel." />
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/controls/SWFLoaderExample.mxml b/tourdeflexmodules/src/spark/controls/SWFLoaderExample.mxml
new file mode 100644
index 0000000..769e703
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/SWFLoaderExample.mxml
@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<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"
+			   creationComplete="init()">
+	
+	<fx:Script>
+		<![CDATA[
+			private function init():void{
+				swfObj.content.addEventListener("SWF_EVENT",ballHandler);
+			}
+			private function ballHandler(ev:Event):void{
+				txt.text = "Flash content embedded at compile time | " + ev.target.ballCnt + " gumballs left";
+			}
+		]]>
+	</fx:Script>
+	
+	<s:Panel title="SWFLoader Control" width="100%" height="100%">
+
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<s:Label id="txt" fontWeight="bold" text="Flash content embedded at compile time | 10 gumballs left" />
+		
+		<mx:SWFLoader id="swfObj" source="@Embed('assets/swf_sample.swf')"  />
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/controls/SampleHelpFormExample.mxml b/tourdeflexmodules/src/spark/controls/SampleHelpFormExample.mxml
new file mode 100644
index 0000000..7449c5d
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/SampleHelpFormExample.mxml
@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s: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">
+	
+	<s:Panel title="Form Sample" width="100%" height="100%">
+
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+		</s:layout>
+			
+		<s:Form>
+			<s:FormItem label="Enter some text">
+				<s:TextInput/>
+				<s:helpContent>
+					<s:Label text="I've fallen and I can't get up!"/>
+				</s:helpContent>
+			</s:FormItem>
+			<s:FormItem label="Check a box">
+				<s:CheckBox label="option 1"/>
+				<s:CheckBox label="option 2"/>
+				<s:helpContent>
+					<s:Label text="What does it mean?"/>
+					<s:Button label="?" width="30" x="120"/>
+				</s:helpContent>
+			</s:FormItem>
+			<s:FormItem>
+				<s:Button label="Submit!"/>
+			</s:FormItem>
+		</s:Form>
+
+	</s:Panel>
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/controls/SampleSequenceFormExample.mxml b/tourdeflexmodules/src/spark/controls/SampleSequenceFormExample.mxml
new file mode 100644
index 0000000..a38aee1
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/SampleSequenceFormExample.mxml
@@ -0,0 +1,44 @@
+<?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">
+
+	<s:Panel title="Form Sequence Sample" width="100%" height="100%">
+
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+		</s:layout>
+			
+		<s:Form>
+			<s:FormItem sequenceLabel="1." label="Enter some text">
+				<s:TextInput/>
+			</s:FormItem>
+			<s:FormItem sequenceLabel="2." label="Check a box">
+				<s:CheckBox label="option 1"/>
+				<s:CheckBox label="option 2"/>
+			</s:FormItem>
+			<s:FormItem>
+				<s:Button label="Submit it!"/>
+			</s:FormItem>
+		</s:Form>
+		
+	</s:Panel>
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/controls/SampleSimpleFormExample.mxml b/tourdeflexmodules/src/spark/controls/SampleSimpleFormExample.mxml
new file mode 100644
index 0000000..c2c8965
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/SampleSimpleFormExample.mxml
@@ -0,0 +1,44 @@
+<?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">
+
+	<s:Panel title="Form Simple Sample" width="100%" height="100%">
+
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+		</s:layout>
+			
+		<s:Form>
+			<s:FormItem label="Enter some text">
+				<s:TextInput/>
+			</s:FormItem>
+			<s:FormItem label="Check a box">
+				<s:CheckBox label="option 1"/>
+				<s:CheckBox label="option 2"/>
+			</s:FormItem>
+			<s:FormItem>
+				<s:Button label="Submit it!"/>
+			</s:FormItem>
+		</s:Form>
+		
+	</s:Panel>
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/controls/SampleStackedFormExample.mxml b/tourdeflexmodules/src/spark/controls/SampleStackedFormExample.mxml
new file mode 100644
index 0000000..fa0702e
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/SampleStackedFormExample.mxml
@@ -0,0 +1,45 @@
+<?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">
+
+	<s:Panel title="Form Stacked Sample" width="100%" height="100%">
+
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+		</s:layout>
+		
+		<s:Form skinClass="spark.skins.spark.StackedFormSkin" horizontalCenter="0">
+			<s:FormHeading label="Do some data entry" skinClass="spark.skins.spark.StackedFormHeadingSkin"/>
+			<s:FormItem label="Enter some text" skinClass="spark.skins.spark.StackedFormItemSkin">
+				<s:TextInput/>
+			</s:FormItem>
+			<s:FormItem label="Check a box" skinClass="spark.skins.spark.StackedFormItemSkin">
+				<s:CheckBox label="option 1"/>
+				<s:CheckBox label="option 2"/>
+			</s:FormItem>
+			<s:FormItem skinClass="spark.skins.spark.StackedFormItemSkin">
+				<s:Button label="Submit it!"/>
+			</s:FormItem>
+		</s:Form>
+		
+	</s:Panel>
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/controls/ScrollBarExample.mxml b/tourdeflexmodules/src/spark/controls/ScrollBarExample.mxml
new file mode 100644
index 0000000..2877fa4
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/ScrollBarExample.mxml
@@ -0,0 +1,81 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+
+<s:Module 
+	xmlns:fx="http://ns.adobe.com/mxml/2009"
+	xmlns:mx="library://ns.adobe.com/flex/mx"
+	xmlns:s="library://ns.adobe.com/flex/spark">
+	
+	<s:Panel title="ScrollBar Sample" width="100%" height="100%">
+		
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+
+		<mx:Box borderStyle="solid">
+			<s:HGroup>
+				<s:DataGroup id="vertView" left="10" top="20"
+							 clipAndEnableScrolling="true"
+							 itemRenderer="spark.skins.spark.DefaultItemRenderer">
+					<s:layout> 
+						<s:VerticalLayout requestedRowCount="3"/> 
+					</s:layout> 
+					<s:dataProvider> 
+						<s:ArrayCollection> 
+							<fx:String>Flex</fx:String>                
+							<fx:String>Flex JS</fx:String>   
+							<fx:String>Falcon</fx:String>
+							<fx:String>Falcon FX</fx:String>
+						</s:ArrayCollection>
+					</s:dataProvider> 
+				</s:DataGroup> 
+				<s:VScrollBar viewport="{vertView}" 
+							  top="10" 
+							  left="{vertView.x + vertView.width + 10}" 
+							  height="{vertView.height}"/>
+			</s:HGroup>
+		</mx:Box> 
+		<mx:Box borderStyle="solid">
+			<s:HGroup>
+				<s:DataGroup id="horizView" right="200" top="10"
+							 clipAndEnableScrolling="true"
+							 itemRenderer="spark.skins.spark.DefaultItemRenderer">
+					<s:layout> 
+						<s:HorizontalLayout requestedColumnCount="3"/> 
+					</s:layout> 
+					<s:dataProvider> 
+						<s:ArrayCollection> 
+							<fx:String>Flex</fx:String>                
+							<fx:String>Flex JS</fx:String>   
+							<fx:String>Falcon</fx:String>
+							<fx:String>Falcon FX</fx:String>   
+						</s:ArrayCollection>
+					</s:dataProvider> 
+				</s:DataGroup> 
+				
+			</s:HGroup>
+			<s:HScrollBar viewport="{horizView}" width ="{horizView.width}"/>
+		</mx:Box>
+		
+		<s:Label paddingLeft="15" width="199" verticalAlign="justify"
+				 text="You can add scrollbars to any component to give scrolling capability. This sample shows
+how you can use both a vertical and horizontal ScrollBar. Also see the Scroller sample for more information."/>	
+	</s:Panel>
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/controls/Scroller1Example.mxml b/tourdeflexmodules/src/spark/controls/Scroller1Example.mxml
new file mode 100644
index 0000000..f999d4a
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/Scroller1Example.mxml
@@ -0,0 +1,77 @@
+<?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">
+	
+		
+	<s:Panel title="Scroller Sample" width="100%" height="100%">
+
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<s:VGroup horizontalCenter="0">
+			<s:HGroup>
+				<s:Label text="Min Viewport Inset:"/>
+				<s:HSlider id="slider1"
+						   maximum="50"
+						   liveDragging="true" />
+				<s:Label text="Viewport Width:"/>
+				<s:HSlider id="slider2"
+						   minimum="100"
+						   maximum="550"
+						   value="300"
+						   liveDragging="true" />
+				<s:Label text="Viewport Height:"/>
+				<s:HSlider id="slider3"
+						   minimum="100"
+						   maximum="550"
+						   value="200"
+						   liveDragging="true" />
+			</s:HGroup>
+			<s:HGroup>
+			<s:Scroller id="scroller"
+						minViewportInset="{slider1.value}"
+						width="300" height="200">
+				<s:Group>
+					<s:Rect id="rect"
+							width="{slider2.value}"
+							height="{slider3.value}">
+						<s:fill>
+							<s:LinearGradient rotation="45">
+								<s:GradientEntry color="red" />
+								<s:GradientEntry color="yellow" />
+								<s:GradientEntry color="haloBlue" />
+							</s:LinearGradient>
+						</s:fill>
+					</s:Rect>
+				</s:Group>
+			</s:Scroller>
+			<s:Label textAlign="justify" width="280" verticalAlign="justify"
+						  text="The Scroller control contains a pair of scroll bars and a viewport. A viewport displays a rectangular subset of the area of
+a component, rather than displaying the entire component. You can use the Scroller control to make any container that implements the IViewport interface,
+such as Group, scrollable. The Scroller's horizontal and vertical scroll policies are set to auto which indicates that scroll bars are displayed when the
+content within a viewport is larger than the actual size of the viewport."/>
+			</s:HGroup>
+		</s:VGroup>
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/controls/Scroller2Example.mxml b/tourdeflexmodules/src/spark/controls/Scroller2Example.mxml
new file mode 100644
index 0000000..bbd1771
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/Scroller2Example.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.
+
+-->
+<!-- Also see http://blog.flexexamples.com/2009/07/29/enabling-tabbing-on-spark-scroller-children/ -->
+<s:Module name="Spark_Scroller_hasFocusableChildren_test"
+			   xmlns:fx="http://ns.adobe.com/mxml/2009"
+			   xmlns:mx="library://ns.adobe.com/flex/mx"
+			   xmlns:s="library://ns.adobe.com/flex/spark">
+	
+	
+	<fx:Script>
+		<![CDATA[
+			import spark.events.TextOperationEvent;
+			
+			private function txtChangeHandler(event:TextOperationEvent):void
+			{
+				if (event.target is TextInput)
+				{
+					var textInput:TextInput = event.target as TextInput;
+					textInput.clearStyle("color");
+				}	
+			}
+		]]>
+	</fx:Script>
+	<!-- you want to mark the children of the viewport as focusable so you're able to tab to them, 
+	but if you don't want the container itself to be focusable then you must turn tabEnabled off on it -->
+	
+	<s:Panel title="Scrollers and Tabbing" width="100%" height="100%">
+
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<!-- The fields are tab-able within the VGroup container -->
+		<s:VGroup left="0" horizontalAlign="center" width="20%">
+			<s:BitmapImage id="img" width="200" height="200" source="@Embed(source='assets/ApacheFlexLogo.png')"/>
+			<s:Label text="Item For Sale"/>
+		</s:VGroup>
+		<s:Scroller tabEnabled="true" hasFocusableChildren="true">
+			<s:VGroup>
+				<s:Label text="First Name:"/>
+				<s:TextInput id="firstName" text="firstname" color="#959494" change="txtChangeHandler(event)"/>
+				<s:Label text="Last Name:"/>
+				<s:TextInput id="lastName" text="lastname" color="#959494" change="txtChangeHandler(event)"/>
+				<s:Label text="Email:"/>
+				<s:TextInput id="emailAdd" text="email" color="#959494" change="txtChangeHandler(event)"/>
+			</s:VGroup>
+		</s:Scroller>
+		
+		<!-- Note: The scroller container automatically sets the clipAndEnableScrolling to false for
+		containers within it. See 'Controlling Viewport' sample under 'Coding Techniques' --> 
+		
+		<s:Scroller hasFocusableChildren="true" tabEnabled="false">
+			<s:VGroup width="200" height="200"> 
+				<s:Label text="Enter item name:"/>
+				<s:TextInput id="itemNameTxt" text="image-name" width="100%" color="#959494" change="txtChangeHandler(event)"/>
+				<s:Label text="Enter description of your item:"/>
+				<s:TextArea id="itemDescTxt" text="title" color="#959494" change="txtChangeHandler(event)"/>
+			</s:VGroup>
+		</s:Scroller>	
+		<s:Label right="10" width="180" verticalAlign="justify"
+					  text="If you have items within a Scroller that need to be tabbed to, you can
+need to set hasFocusableChildren to true. If you do not want the container itself to be tab enabled, 
+then you must set tabEnabled to false, such as shown here."/>
+	</s:Panel>
+</s:Module>
+
diff --git a/tourdeflexmodules/src/spark/controls/SimpleTitleWindowExample.mxml b/tourdeflexmodules/src/spark/controls/SimpleTitleWindowExample.mxml
new file mode 100644
index 0000000..23ca3f3
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/SimpleTitleWindowExample.mxml
@@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<!-- Simple custom MXML TitleWindow component.
+     The TitleWindowApp application displays this component. 
+     You cannot run it independently. -->
+     
+<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"  
+				xmlns:s="library://ns.adobe.com/flex/spark" 
+				xmlns:mx="library://ns.adobe.com/flex/mx"  
+    			title="Title Window"
+				close="PopUpManager.removePopUp(this)" >
+
+     <fx:Script>
+        <![CDATA[       
+			import mx.managers.PopUpManager;
+			
+			import spark.components.RichText;
+	       
+            // A reference to the TextInput control in which to put the result.
+            public var loginName:RichText;
+		   
+            // Event handler for the OK button.
+            private function returnName():void {
+                loginName.text="Name entered: " + userName.text; 
+                PopUpManager.removePopUp(this);
+            }
+        ]]>
+    </fx:Script>
+	
+	<s:layout>
+		<s:VerticalLayout horizontalAlign="center" 
+						  paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" />
+	</s:layout>
+
+    <s:HGroup>
+		<s:Label text="Enter Name: "/>
+		<s:TextInput id="userName" width="100%"/>
+	</s:HGroup>
+   
+	<s:HGroup>
+        <s:Button label="OK" click="returnName()"/>
+        <s:Button label="Cancel" click="PopUpManager.removePopUp(this)"/>
+	</s:HGroup>
+
+</s:TitleWindow>  
diff --git a/tourdeflexmodules/src/spark/controls/SliderExample.mxml b/tourdeflexmodules/src/spark/controls/SliderExample.mxml
new file mode 100644
index 0000000..a80fa8a
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/SliderExample.mxml
@@ -0,0 +1,72 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<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">
+	
+	<s:Panel title="HSlider/VSlider Sample" width="100%" height="100%">
+		
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+	
+				
+		<s:HGroup>
+			<s:Label text="Width:"/>
+			<s:HSlider id="slider2"
+					   minimum="50"
+					   maximum="250"
+					   value="200"
+					   liveDragging="true" />	
+			
+		</s:HGroup>
+		
+		<s:HGroup>
+			<s:VGroup>
+				<s:Label text="Height:"/>
+				<s:VSlider id="slider3"
+						   minimum="50"
+						   maximum="180"
+						   value="160"
+						   liveDragging="true"/>
+			</s:VGroup>
+			
+			<s:Group width="200">
+				<s:Ellipse id="rect"
+						   width="{slider2.value}"
+						   height="{slider3.value}">
+					<s:fill>
+						<s:LinearGradient rotation="45">
+							<s:GradientEntry color="0x5008f3" />
+							<s:GradientEntry color="0x7a2a84" />
+							<s:GradientEntry color="0xfe08a4" />
+						</s:LinearGradient>
+					</s:fill>
+				</s:Ellipse>
+			</s:Group>
+		</s:HGroup>
+		
+		<s:Label verticalAlign="justify"
+				 text="The slider controls can be used to select a value by moving a slider thumb between 
+the end points of the slider track. The current value of the slider is determined by the relative location 
+of the thumb between the end points of the slider. The slider end points correspond to the slider’s minimum and maximum values."/>
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/controls/SpinnerExample.mxml b/tourdeflexmodules/src/spark/controls/SpinnerExample.mxml
new file mode 100644
index 0000000..0ad792d
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/SpinnerExample.mxml
@@ -0,0 +1,52 @@
+<?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">
+	
+	<s:Panel title="Spinner Control Example" width="100%" height="100%">
+		
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<s:HGroup>
+			<mx:Text text="Use the arrows to change tabs:"/>            
+			<s:Spinner id="mySpinner" maximum="3"/>                    
+		</s:HGroup>
+			
+		<!-- Two way binding is being used so that changes to the tab navigator remain synced with Spinner value -->
+		<mx:TabNavigator id="myTabNav" width="75%" height="75%" selectedIndex="@{mySpinner.value}">
+			<mx:HBox label="Tab 1">
+				<mx:Text text="Text on Tab 1 " fontSize="14" color="red"/>
+			</mx:HBox>    	
+			<mx:HBox label="Tab 2">
+				<mx:Text text="Text on Tab 2" fontSize="16"/>
+			</mx:HBox>    	    
+			<mx:HBox label="Tab 3">
+				<mx:Text text="Text on Tab 3" fontSize="18" color="green"/>
+			</mx:HBox>    	    
+			<mx:HBox label="Tab 4">
+				<mx:Text text="Text on Tab 4" fontSize="20" color="purple"/>
+			</mx:HBox>    
+		</mx:TabNavigator>
+		
+	</s:Panel>          
+</s:Module> 
diff --git a/tourdeflexmodules/src/spark/controls/TDFGradientBackgroundSkin.mxml b/tourdeflexmodules/src/spark/controls/TDFGradientBackgroundSkin.mxml
new file mode 100644
index 0000000..fe2a943
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/TDFGradientBackgroundSkin.mxml
@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
+			 xmlns:mx="library://ns.adobe.com/flex/mx" 
+			 xmlns:s="library://ns.adobe.com/flex/spark">
+	
+	<fx:Metadata>
+		[HostComponent("spark.components.Application")]
+	</fx:Metadata> 
+	
+	<s:states>
+		<s:State name="normal" />
+		<s:State name="disabled" />
+	</s:states>
+	
+	<s:layout>
+		<s:BasicLayout />
+	</s:layout>
+	
+	<s:Rect id="bg" width="100%" height="100%">
+		<s:fill>
+			<s:LinearGradient rotation="90">
+				<s:entries>
+					<s:GradientEntry color="0x000000" ratio="0.00" />
+					<s:GradientEntry color="0x323232" ratio="1.0" />
+				</s:entries>
+			</s:LinearGradient>    
+		</s:fill>
+	</s:Rect>
+	
+	<s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" />
+</s:SparkSkin>
diff --git a/tourdeflexmodules/src/spark/controls/TabNavigatorExample.mxml b/tourdeflexmodules/src/spark/controls/TabNavigatorExample.mxml
new file mode 100644
index 0000000..9e168be
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/TabNavigatorExample.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">
+	
+	<s:Panel title="TabNavigator Container" width="100%" height="100%">
+		
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<s:Label width="100%" fontWeight="bold"
+				 text="Select the tabs to change the panel."/>
+		
+		<mx:TabNavigator id="tn"  width="100%" height="100%">
+			<!-- Define each panel using a VBox container. -->
+			
+			<s:NavigatorContent label="Panel 1">
+				<s:Label text="TabNavigator container panel 1"/>
+			</s:NavigatorContent>
+			
+			<s:NavigatorContent label="Panel 2">
+				<s:Label text="TabNavigator container panel 2"/>
+			</s:NavigatorContent>
+			
+			<s:NavigatorContent label="Panel 3">
+				<s:Label text="TabNavigator container panel 3"/>
+			</s:NavigatorContent>
+		</mx:TabNavigator>
+		
+		<s:Label width="100%"
+				 text="Programmatically select the panel using a Button control."/>
+		
+		<s:HGroup>
+			<s:Button label="Select Tab 1" click="tn.selectedIndex=0" color="0x545454" />
+			<s:Button label="Select Tab 2" click="tn.selectedIndex=1" color="0x545454" />
+			<s:Button label="Select Tab 3" click="tn.selectedIndex=2" color="0x545454" />
+		</s:HGroup>
+		
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/controls/TextAreaExample.mxml b/tourdeflexmodules/src/spark/controls/TextAreaExample.mxml
new file mode 100644
index 0000000..4048b37
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/TextAreaExample.mxml
@@ -0,0 +1,89 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s: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[
+			protected function changeHandler():void
+			{
+				txt.maxChars = this.maxChars.value;
+				txt.restrict = this.restrictStr.text;
+				txt.textFlow.textAlign = alignVal.selectedItem;
+				txt.textFlow.direction = direction.selectedItem;
+			}
+		]]>
+	</fx:Script>
+	
+	<s:Panel title="TextArea Sample" width="100%" height="100%">
+		
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<s:VGroup>
+			<s:HGroup verticalAlign="middle">
+				<s:Label text="Specify Max Character Input:"/>
+				<s:NumericStepper id="maxChars" maximum="200" value="100" stepSize="2" change="this.changeHandler()"/>
+			</s:HGroup>
+			<s:HGroup verticalAlign="middle">
+				<s:Label text="Specify Text Alignment:"/>
+				<s:DropDownList id="alignVal" prompt="left" change="this.changeHandler()">
+					<s:dataProvider>
+						<mx:ArrayList>
+							<fx:String>left</fx:String>
+							<fx:String>right</fx:String>
+							<fx:String>center</fx:String>
+							<fx:String>justify</fx:String>
+							<fx:String>start</fx:String>
+							<fx:String>end</fx:String>
+						</mx:ArrayList>
+					</s:dataProvider>
+				</s:DropDownList>
+			</s:HGroup>
+			<s:HGroup verticalAlign="middle">
+				<s:Label text="Direction:"/>
+				<s:DropDownList id="direction" prompt="ltr" change="this.changeHandler()">
+					<s:dataProvider>
+						<mx:ArrayList>
+							<fx:String>ltr</fx:String>
+							<fx:String>rtl</fx:String>
+						</mx:ArrayList>
+					</s:dataProvider>
+				</s:DropDownList>
+			</s:HGroup>
+			<s:HGroup verticalAlign="middle">
+				<s:Label text="Specify characters to restrict (use - for range):"/>
+				<s:TextInput id="restrictStr" change="this.changeHandler()" text="a-z 1-9"/> 
+			</s:HGroup>
+			<s:VGroup>
+				<s:Label text="Text:"/>
+				<s:TextArea id="txt" width="300" height="70" color="0x323232" horizontalCenter="0" verticalCenter="0" restrict="a-z 1-9"
+							change="this.changeHandler()"/>
+			</s:VGroup>
+		</s:VGroup>	
+		<s:Label width="200" top="20" right="80"
+				 text="TextArea is a text-entry control that lets users enter and edit multiple lines of richly formatted text. 
+It can display horizontal and vertical scrollbars for scrolling through the text and supports vertical scrolling with the mouse wheel. This sample also shows
+how you can restrict character input on the text area. The default when this is run will not allow the number 0 or caps based on the restrict range shown. The
+sample also shows how you can specify a direction on the text."/>
+		
+	</s:Panel>
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/controls/TextInputExample.mxml b/tourdeflexmodules/src/spark/controls/TextInputExample.mxml
new file mode 100644
index 0000000..0da6911
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/TextInputExample.mxml
@@ -0,0 +1,100 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s: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 spark.events.TextOperationEvent;
+			import spark.components.RichEditableText;
+			
+			private function txtChangeHandler(event:TextOperationEvent):void
+			{
+				var textInput:TextInput = event.target as TextInput;
+				textInput.clearStyle("color");
+			}
+			
+
+			protected function changeHandler(event:MouseEvent):void
+			{
+				txt.maxChars = this.maxChars.value;
+				txt.restrict = this.restrictStr.text;
+				RichEditableText(txt.textDisplay).textFlow.textAlign = alignVal.selectedItem;
+				RichEditableText(txt.textDisplay).textFlow.direction = direction.selectedItem;
+			}
+
+		]]>
+	</fx:Script>
+	 
+	<s:Panel title="TextInput Sample" width="100%" height="100%">
+		
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<s:HGroup verticalAlign="middle">
+			<s:Label text="Specify Max Character Input:"/>
+			<s:NumericStepper id="maxChars" value="30" stepSize="2" change="this.changeHandler(null)"/>
+		</s:HGroup>
+		<s:HGroup verticalAlign="middle">
+			<s:Label text="Specify Text Alignment:"/>
+			<s:DropDownList id="alignVal" prompt="left" change="this.changeHandler(null)">
+				<s:dataProvider>
+					<mx:ArrayList>
+						<fx:String>left</fx:String>
+						<fx:String>right</fx:String>
+						<fx:String>center</fx:String>
+						<fx:String>justify</fx:String>
+						<fx:String>start</fx:String>
+						<fx:String>end</fx:String>
+					</mx:ArrayList>
+				</s:dataProvider>
+			</s:DropDownList>
+		</s:HGroup>
+		<s:HGroup verticalAlign="middle">
+			<s:Label text="Direction:"/>
+			<s:DropDownList id="direction" prompt="ltr" change="this.changeHandler(null)">
+				<s:dataProvider>
+					<mx:ArrayList>
+						<fx:String>rtl</fx:String>
+						<fx:String>ltr</fx:String>
+					</mx:ArrayList>
+				</s:dataProvider>
+			</s:DropDownList>
+		</s:HGroup>
+		<s:HGroup verticalAlign="middle">
+			<s:Label text="Specify characters to restrict (use - for range):"/>
+			<s:TextInput id="restrictStr" change="this.changeHandler(null)"/> 
+		</s:HGroup>
+		<s:HGroup verticalAlign="middle">
+			<s:Label text="Text Input:"/>
+			<s:TextInput id="txt" maxChars="{maxChars.value}" maxWidth="150" 
+						 change="txtChangeHandler(event)" textAlign="{alignVal.selectedItem}"/>	
+		</s:HGroup>
+		<mx:Spacer height="10"/>
+		<s:Label width="85%" horizontalCenter="0"
+				 text="TextInput is a text-entry control that lets users enter and edit a single line of uniformly-formatted text.
+This Spark version of TextInput makes use of the Text Layout Framework (TLF). Numerous properties are available to be set using the 
+textFlow object from the TLF framework. Uses of some are shown above."/>
+		
+	</s:Panel>
+	
+
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/controls/TextLayout1Example.mxml b/tourdeflexmodules/src/spark/controls/TextLayout1Example.mxml
new file mode 100644
index 0000000..e0ea3b4
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/TextLayout1Example.mxml
@@ -0,0 +1,163 @@
+<?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="*" creationComplete="init()">
+	
+	<!-- Based on original code from here and updated and enhanced for Flex 4:
+		http://www.adobe.com/devnet/flex/articles/text_layout_framework_04.html
+	-->
+	
+	<fx:Script>
+		<![CDATA[
+			import flashx.textLayout.container.ContainerController;
+			import flashx.textLayout.conversion.ITextImporter;
+			import flashx.textLayout.conversion.TextConverter;
+			import flashx.textLayout.edit.EditManager;
+			import flashx.textLayout.edit.ISelectionManager;
+			import flashx.textLayout.edit.SelectionState;
+			import flashx.textLayout.elements.InlineGraphicElement;
+			import flashx.textLayout.elements.ParagraphElement;
+			import flashx.textLayout.elements.TextFlow;
+			import flashx.textLayout.events.SelectionEvent;
+			import flashx.textLayout.events.StatusChangeEvent;
+			import flashx.textLayout.formats.Direction;
+			import flashx.textLayout.formats.TextLayoutFormat;
+			import flashx.undo.UndoManager;
+			
+			import mx.collections.ArrayCollection;
+			import mx.controls.CheckBox;
+			import mx.events.FlexEvent;
+			import mx.events.SliderEvent;
+			
+			import spark.components.Group;
+			import spark.core.SpriteVisualElement;
+			
+			[Bindable]
+			public var directions:ArrayCollection = new ArrayCollection(
+				[
+					{label:"Left-to-Right", data:Direction.LTR},
+					{label:"Right-to-Left", data:Direction.RTL}
+				]
+			);
+			
+			[Embed(source="assets/ApacheFlexLogo.png")]
+			[Bindable]
+			static public var imgClass:Class;
+			
+			private var _textContainer:SpriteVisualElement = null;
+			
+			private static const textInput:XML = <TextFlow xmlns="http://ns.adobe.com/textLayout/2008">
+				<div>
+					<p><span>The Text Layout Framework is an extensible library, built on the new text engine in Adobe Flash Player 10, which delivers advanced, easy-to-integrate typographic and text layout features for rich, sophisticated and innovative typography on the web. 
+				Some benefits provided by this framework include: 1) rich typographical controls, including kerning, ligatures, typographic case, digit case, digit width and discretionary hyphens
+				2) cut, copy, paste, undo and standard keyboard and mouse gestures for editing 3) selection, editing and flowing text across multiple columns and linked containers 
+				4) bidirectional text, vertical text and over 30 writing scripts including Arabic, Hebrew, Chinese, Japanese, Korean, Thai, Lao, Vietnamese, and others
+				5) vertical text, Tate-Chu-Yoko (horizontal within vertical text) and justifier for East Asian typography. Try editing this text and playing with the options below! Notice an inline image is also included.</span></p>
+				</div>
+				</TextFlow>;
+			
+			private var _textFlow:TextFlow;
+			
+			private function init():void {
+				
+				_textContainer = new SpriteVisualElement();
+				
+				canvas.addElement(_textContainer);
+				var importer:ITextImporter = TextConverter.getImporter(TextConverter.TEXT_LAYOUT_FORMAT);
+				importer.throwOnError = true; // will throw exception if parsing error occurs on import
+
+				_textFlow = importer.importToFlow(textInput);
+				_textFlow.flowComposer.addController(new ContainerController(_textContainer, canvas.width-40, canvas.height));
+				
+				// add the graphic
+				var p:ParagraphElement = new ParagraphElement();
+				var inlineGraphicElement:InlineGraphicElement = new InlineGraphicElement();
+				inlineGraphicElement.source = imgClass;
+				inlineGraphicElement.width=32;
+				inlineGraphicElement.height=32;
+				p.addChild(inlineGraphicElement);
+				_textFlow.addChild(p);
+				
+				//adding Select/Edit/Copy/Paste/Undo features
+				_textFlow.interactionManager = new EditManager(new UndoManager());
+				
+				// initialize with a selection before the first character
+				_textFlow.interactionManager.selectRange(0,0);
+				_textFlow.flowComposer.updateAllControllers();
+			}
+			
+			private function changeFontSize(event:Event):void {
+				_textFlow.fontSize = fontSize.value;
+				_textFlow.direction = direction.selectedItem.data;
+				_textFlow.flowComposer.updateAllControllers();
+			}
+			
+			private function changeNoColumns(event:Event):void {
+				var tlf:TextLayoutFormat = new TextLayoutFormat();
+				tlf.columnCount = cols.value;
+				tlf.columnGap = 15;
+				tlf.direction = direction.selectedItem.data;
+				_textFlow.format = tlf;
+				_textFlow.flowComposer.updateAllControllers();
+			}
+			
+			private function changeTextDirection(event:Event):void {
+				_textFlow.direction = (event.target as DropDownList).selectedItem.data;
+				_textFlow.flowComposer.updateAllControllers();
+			}
+			
+			protected function undo_clickHandler(event:MouseEvent):void
+			{
+				var em:EditManager = _textFlow.interactionManager as EditManager;
+				trace("Can undo " + em.undoManager.canUndo() + " can redo " + em.undoManager.canRedo());
+				em.undoManager.undo();
+			}
+			protected function redo_clickHandler(event:MouseEvent):void
+			{
+				var em:EditManager = _textFlow.interactionManager as EditManager;
+				em.undoManager.redo();
+			}
+
+		]]>
+	</fx:Script>
+	<s:Panel title="Text Layout Framework Sample" width="100%" height="100%">
+		<s:layout>
+			<s:VerticalLayout paddingTop="8" paddingLeft="8"/>
+		</s:layout>
+		
+		<s:VGroup>
+			<s:Group id="canvas" width="600" height="200" />
+			<s:HGroup width="100%" verticalAlign="middle">
+				<s:Label text="Font Size:"/>
+				<s:NumericStepper id="fontSize" minimum="6" maximum="22" snapInterval="1" change="changeFontSize(event)" value="12" />
+				<s:Label text="# Columns:"/>
+				<s:NumericStepper id="cols"  minimum="1" maximum="20" snapInterval="1" change="changeNoColumns(event)" />
+				<s:Label text="Text Direction:"/>
+				<s:DropDownList id="direction" change="changeTextDirection(event)" dataProvider="{directions}" 
+								selectedItem="{directions.getItemAt(0)}"/>
+				<s:Button label="Undo" click="undo_clickHandler(event)"/>
+				<s:Button label="Redo" click="redo_clickHandler(event)"/>
+			</s:HGroup>
+		</s:VGroup>
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/controls/TextLayout2Example.mxml b/tourdeflexmodules/src/spark/controls/TextLayout2Example.mxml
new file mode 100644
index 0000000..9254dc0
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/TextLayout2Example.mxml
@@ -0,0 +1,143 @@
+<?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"
+			   creationComplete="init()">
+	
+<!-- This sample is based on this page: http://help.adobe.com/en_US/ActionScript/3.0_ProgrammingAS3_Flex/WS0d70b2a8565d75766ba6608d121cc29f375-8000.html -->
+	
+	<fx:Script>
+		<![CDATA[
+			import flash.display.StageAlign; 
+			import flash.display.StageScaleMode; 
+			import flash.events.Event; 
+			import flash.geom.Rectangle; 
+			
+			import flashx.textLayout.compose.StandardFlowComposer; 
+			import flashx.textLayout.container.ContainerController; 
+			import flashx.textLayout.container.ScrollPolicy; 
+			import flashx.textLayout.conversion.TextConverter; 
+			import flashx.textLayout.elements.TextFlow; 
+			import flashx.textLayout.formats.TextLayoutFormat; 
+			
+			import spark.core.SpriteVisualElement;
+			
+			private var hTextFlow:TextFlow; 
+			private var headContainer:SpriteVisualElement; 
+			private var headlineController:ContainerController; 
+			private var hContainerFormat:TextLayoutFormat; 
+			
+			private var bTextFlow:TextFlow; 
+			private var bodyTextContainer:SpriteVisualElement; 
+			private var bodyController:ContainerController; 
+			private var bodyTextContainerFormat:TextLayoutFormat; 
+			
+			private const headlineMarkup:String = "<flow:TextFlow xmlns:flow='http://ns.adobe.com/textLayout/2008'><flow:p textAlign='center'><flow:span fontFamily='Helvetica' fontSize='18'>TLF News Layout Example</flow:span><flow:br/><flow:span fontFamily='Helvetica' fontSize='14'>This example formats text like a newspaper page with a headline, a subtitle, and multiple columns</flow:span></flow:p></flow:TextFlow>"; 
+			
+			private const bodyMarkup:String = "<flow:TextFlow xmlns:flow='http://ns.adobe.com/textLayout/2008' fontSize='12' textIndent='10' marginBottom='15' paddingTop='4' paddingLeft='4'><flow:p marginBottom='inherit'><flow:span>There are many </flow:span><flow:span fontStyle='italic'>such</flow:span><flow:span> lime-kilns in that tract of country, for the purpose of burning the white marble which composes a large part of the substance of the hills. Some of them, built years ago, and long deserted, with weeds growing in the vacant round of the interior, which is open to the sky, and grass and wild-flowers rooting themselves into the chinks of the stones, look already like relics of antiquity, and may yet be overspread with the lichens of centuries to come. Others, where the lime-burner still feeds his daily and nightlong fire, afford points of interest to the wanderer among the hills, who seats himself on a log of wood or a fragment of marble, to hold a chat with the solitary man. It is a lonesome, and, when the character is inclined to thought, may be an intensely thoughtful occupation; as it proved in the case of Ethan Brand, who had mused to such strange purpose, in days gone by, while the fire in this very kiln was burning.</flow:span></flow:p><flow:p marginBottom='inherit'><flow:span>The man who now watched the fire was of a different order, and troubled himself with no thoughts save the very few that were requisite to his business. At frequent intervals, he flung back the clashing weight of the iron door, and, turning his face from the insufferable glare, thrust in huge logs of oak, or stirred the immense brands with a long pole.</flow:span></flow:p></flow:TextFlow>"; 
+			
+			public function init():void
+			{ 
+				// Headline text flow and flow composer 
+				hTextFlow = TextConverter.importToFlow(headlineMarkup, TextConverter.TEXT_LAYOUT_FORMAT); 
+				hTextFlow.flowComposer = new StandardFlowComposer(); 
+				
+				// initialize the headline container and controller objects 
+				headContainer = new SpriteVisualElement(); 
+				headlineController = new ContainerController(headContainer); 
+				headlineController.verticalScrollPolicy = ScrollPolicy.OFF; 
+				hContainerFormat = new TextLayoutFormat(); 
+				hContainerFormat.paddingTop = 4; 
+				hContainerFormat.paddingRight = 4; 
+				hContainerFormat.paddingBottom = 4; 
+				hContainerFormat.paddingLeft = 4; 
+				
+				headlineController.format = hContainerFormat; 
+				hTextFlow.flowComposer.addController(headlineController); 
+				panel.addElement(headContainer); 
+				this.addEventListener(flash.events.Event.RESIZE, resizeHandler); 
+				
+				// Body text TextFlow and flow composer 
+				bTextFlow = TextConverter.importToFlow(bodyMarkup, TextConverter.TEXT_LAYOUT_FORMAT); 
+				bTextFlow.flowComposer = new StandardFlowComposer(); 
+				
+				// The body text container is below, and has three columns 
+				bodyTextContainer = new SpriteVisualElement(); 
+				bodyController = new ContainerController(bodyTextContainer); 
+				bodyTextContainerFormat = new TextLayoutFormat(); 
+				bodyTextContainerFormat.columnCount = 4; 
+				bodyTextContainerFormat.columnGap = 30; 
+				
+				bodyController.format = bodyTextContainerFormat; 
+				bTextFlow.flowComposer.addController(bodyController); 
+				panel.addElement(bodyTextContainer); 
+				resizeHandler(null);
+			} 
+			
+			private function resizeHandler(event:Event):void 
+			{ 
+				trace("Resizing!");
+				const verticalGap:Number = 25; 
+				const stagePadding:Number = 16; 
+				var stageWidth:Number = this.width - stagePadding; 
+				var stageHeight:Number = this.height - stagePadding; 
+				var headlineWidth:Number = stageWidth; 
+				var headlineContainerHeight:Number = stageHeight; 
+				
+				// Initial compose to get height of headline after resize 
+				headlineController.setCompositionSize(headlineWidth, headlineContainerHeight); 
+				hTextFlow.flowComposer.compose(); 
+				var rect:Rectangle = headlineController.getContentBounds(); 
+				headlineContainerHeight = rect.height; 
+				
+				// Initial compose to get height of headline after resize 
+				headlineController.setCompositionSize(headlineWidth, headlineContainerHeight); 
+				hTextFlow.flowComposer.compose(); 
+				rect = headlineController.getContentBounds(); 
+				headlineContainerHeight = rect.height; 
+				
+				// Resize and place headline text container 
+				// Call setCompositionSize() again with updated headline height 
+				headlineController.setCompositionSize(headlineWidth, headlineContainerHeight ); 
+				headlineController.container.x = stagePadding / 2; 
+				headlineController.container.y = stagePadding / 2; 
+				hTextFlow.flowComposer.updateAllControllers(); 
+				
+				// Resize and place body text container 
+				var bodyContainerHeight:Number = (stageHeight - verticalGap - headlineContainerHeight); 
+				bodyController.format = bodyTextContainerFormat; 
+				bodyController.setCompositionSize(stageWidth, bodyContainerHeight ); 
+				bodyController.container.x = (stagePadding/2); 
+				bodyController.container.y = (stagePadding/2) + headlineContainerHeight + verticalGap; 
+				bTextFlow.flowComposer.updateAllControllers(); 
+			} 
+		]]>
+	</fx:Script>
+	
+	<s:Panel title="News Layout Sample" width="100%" height="100%">
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<s:Group id="panel" width="100%" height="100%" />
+	</s:Panel>
+
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/controls/TextLayout3Example.mxml b/tourdeflexmodules/src/spark/controls/TextLayout3Example.mxml
new file mode 100644
index 0000000..81a8423
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/TextLayout3Example.mxml
@@ -0,0 +1,91 @@
+<?xml version="1.0"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s:Module 
+	xmlns:fx="http://ns.adobe.com/mxml/2009"    
+	xmlns:mx="library://ns.adobe.com/flex/mx"     
+	xmlns:s="library://ns.adobe.com/flex/spark"
+	creationComplete="init()">
+	
+	<fx:Declarations>
+		<fx:XML id="textFlowAsXML" source="MyTextFlow.xml" />
+	</fx:Declarations>
+	
+	<fx:Style>
+		@namespace "library://ns.adobe.com/flex/spark";
+		Label { 
+			baseColor: #000000; 
+			fontFamily: "Verdana";
+			fontSize: "12";
+			advancedAntiAliasing: true;
+		}
+		
+	</fx:Style>
+	<fx:Script><![CDATA[
+		import flashx.textLayout.conversion.TextConverter;
+		import flashx.textLayout.elements.TextFlow;
+		import spark.components.RichEditableText;
+		import spark.utils.TextFlowUtil;
+		
+		XML.ignoreWhitespace = false; 
+		
+		private function init():void {
+			// Creates a TextFlow by importing a String containing the markup language used by the Text Layout Framework.
+			// If you specify it, don't forget the namespace -> xmlns="http://ns.adobe.com/textLayout/2008"
+			var markup:String = "<TextFlow xmlns='http://ns.adobe.com/textLayout/2008'><p fontFamily='Arial'>This is TLF markup with paragraphs.</p><p color='0x663399'>The root TextFlow tag is inlcuded.</p></TextFlow>"; 
+			rt1.textFlow = TextFlowUtil.importFromString(markup);
+			
+			// This next string shows that if the root TextFlow tag is omitted, it will be added for you. 
+			markup = "<p color='0xCE267D'>This is TLF markup with paragraphs.</p><p fontSize='10' fontWeight='bold' fontFamily='Arial'>The root TextFlow tag is omitted and therefore created automatically.</p>"; 
+			rt2.textFlow = TextFlowUtil.importFromString(markup);
+			
+			// This line shows how you would import plain text with no paragraph spacing
+			var autoMarkup:String = "This is just a plain old string that has no markup within it."; 
+			RichEditableText(rt3.textDisplay).textFlow = TextFlowUtil.importFromString(autoMarkup);
+			
+			// This example shows how you can use the TextConverter class from TLF to import HTML formatted text
+			// See the docs for the subset of HTML that is supported: 
+			//		http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flashx/textLayout/conversion/TextConverter.html#TEXT_FIELD_HTML_FORMAT
+			var myHTML:String = "<p>This is <i>HTML</i> markup.<br><b>Hello Tour de Flex Users!</b></p>";
+			rt4.textFlow = TextConverter.importToFlow(myHTML,TextConverter.TEXT_FIELD_HTML_FORMAT);
+		}
+	]]></fx:Script>
+	
+	<s:Panel title="Importing Text using TLF and Flex 4" width="100%" height="100%">
+		
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<s:VGroup>
+			<s:RichText id="rt1" width="200"/>
+			<s:TextArea id="rt2" width="300" height="50"/>
+			<s:TextInput id="rt3" width="260"/>
+			<s:RichEditableText id="rt4" width="200"/>
+			
+			<s:RichText id="rt5" width="280"
+						textFlow="{TextFlowUtil.importFromXML(textFlowAsXML)}"
+						horizontalCenter="0" verticalCenter="0" />
+		</s:VGroup>
+		<s:Label width="200" verticalAlign="justify" text="This sample shows how you can use different types of text markup within
+the Flex 4 components that are based on TLF through an import. This can be especially useful for dynamically loading text
+that is returned from an HTTPService call at runtime for instance."/>
+		
+	</s:Panel>
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/controls/TextLayout4Example.mxml b/tourdeflexmodules/src/spark/controls/TextLayout4Example.mxml
new file mode 100644
index 0000000..3bf453e
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/TextLayout4Example.mxml
@@ -0,0 +1,78 @@
+<?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.
+
+-->
+<!-- Sample derived from: http://help.adobe.com/en_US/Flex/4.0/UsingSDK/WS02f7d8d4857b1677-165a04e1126951a2d98-7ff8.html --> 
+<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 flashx.textLayout.conversion.TextConverter; 
+			
+			XML.ignoreWhitespace = false; 
+		]]> 
+	</fx:Script> 
+	<fx:Style>
+		@namespace "library://ns.adobe.com/flex/spark";
+		Label { 
+			baseColor: #000000; 
+			fontFamily: "Verdana";
+			fontSize: "12";
+			advancedAntiAliasing: true;
+		}
+	</fx:Style>
+	<fx:Declarations> 
+		<!-- Define a String to use with HTML and plain text format. --> 
+		<fx:String id="htmlTextAsHTML"><![CDATA[<p>Text containing <b>HTML</b> markup</p>]]></fx:String> 
+		
+		<!-- Define an XML object to use with TLF format. --> 
+		<fx:XML id="tfTextAsTextFlow"> 
+			<TextFlow xmlns="http://ns.adobe.com/textLayout/2008"> 
+				<p>Text Using  <span fontWeight="bold">Text Layout Framework</span> Markup</p> 
+			</TextFlow> 
+		</fx:XML> 
+	</fx:Declarations> 
+	
+	<s:Panel title="Text Import Format Types Sample" width="100%" height="100%">
+		
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<s:Label verticalAlign="justify" width="200" text="This example shows how you can use different format types for importing text
+and what the result will be in the Flex 4 component shown."/>
+		<s:VGroup>
+			<s:TextArea id="txt1" width="200" height="50"
+						textFlow="{TextConverter.importToFlow(htmlTextAsHTML, TextConverter.TEXT_FIELD_HTML_FORMAT)}" 
+						horizontalCenter="0" verticalCenter="0" /> 
+			
+				<s:Label text="Same marked up text with plain format specified:"/>
+				<s:TextArea id="txt2" height="50" width="200"
+							textFlow="{TextConverter.importToFlow(htmlTextAsHTML, TextConverter.PLAIN_TEXT_FORMAT)}" 
+							horizontalCenter="0" verticalCenter="0" /> 
+			
+			<s:TextArea id="txt3" width="200" height="50"
+						textFlow="{TextConverter.importToFlow(tfTextAsTextFlow, TextConverter.TEXT_LAYOUT_FORMAT)}" 
+						horizontalCenter="0" verticalCenter="0" /> 
+		</s:VGroup>
+		
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/controls/TitleWindowExample.mxml b/tourdeflexmodules/src/spark/controls/TitleWindowExample.mxml
new file mode 100644
index 0000000..66a6dfb
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/TitleWindowExample.mxml
@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s: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 flash.geom.Point;
+			
+			import mx.containers.TitleWindow;
+			import mx.managers.PopUpManager;
+			
+			import spark.components.TitleWindow;
+			
+			private var point1:Point = new Point();
+			
+			// Open the TitleWindow container.
+			// Cast the return value of the createPopUp() method
+			// to SimpleTitleWindowExample, the name of the 
+			// component containing the TitleWindow container.
+			private function showWindow():void {
+				var login:SimpleTitleWindowExample=SimpleTitleWindowExample(PopUpManager.createPopUp( 
+					this, SimpleTitleWindowExample , true) as spark.components.TitleWindow);
+				
+				// Calculate position of TitleWindow in Application's coordinates. 
+				point1.x=myButton.x;
+				point1.y=myButton.y;                
+				point1=myButton.localToGlobal(point1);
+				login.x=point1.x+25;
+				login.y=point1.y+25;
+				
+				// Pass a reference to the TextInput control
+				// to the TitleWindow container so that the 
+				// TitleWindow container can return data to the main application.
+				login.loginName=returnedName;
+			}
+		]]>
+	</fx:Script>
+	
+	<s:Panel title="TitleWindow Container" width="100%" height="100%">
+		
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<s:Button id="myButton" height="32" label="Click to open the TitleWindow container" 
+				  click="showWindow()"/>
+		
+		<s:RichText id="returnedName" width="100%" text="Waiting..."/>
+		
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/controls/ToggleButton2Example.mxml b/tourdeflexmodules/src/spark/controls/ToggleButton2Example.mxml
new file mode 100644
index 0000000..0f66e4e
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/ToggleButton2Example.mxml
@@ -0,0 +1,144 @@
+<?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"
+			   currentState="hide">
+	
+	<fx:Script>
+		<![CDATA[
+			import mx.collections.ArrayCollection;
+			
+			[Bindable]
+			public var items:ArrayCollection = new ArrayCollection([
+				{label:"Medium Pink V-Neck T", itemNum:1932823474, price:"$24.00"}, 
+				{label:"Small Red Polo", itemNum:2022144432, price:"$40.00"}, 
+				{label:"X-Large Sweatshirt", itemNum:3769034827, price:"$50.00"} ]);
+
+			protected function myBtn_clickHandler(event:MouseEvent):void
+			{
+				if (showBtn.selected) 
+					this.currentState="show";
+				else this.currentState="hide";
+			}
+		]]>
+	</fx:Script>
+	<fx:Style>
+		@namespace "library://ns.adobe.com/flex/spark";
+		
+		ToggleButton:upAndSelected,
+		ToggleButton:overAndSelected {
+			baseColor: #000000;
+			color: #FFFFFF;
+		}
+		ToggleButton:downAndSelected {
+			baseColor: #336699;
+			color: #FFFFFF;
+		}
+		ToggleButton:disabledAndSelected {
+			baseColor: #E2E2E2;
+			color: #212799;
+		}
+		ToggleButton:up {
+			baseColor: #C0C0C0;
+			color: #323232;
+		}
+		ToggleButton:over {
+			baseColor: #FFFFFF;
+			color: #000000;
+		}
+		ToggleButton:down {
+			baseColor: #014f9f;
+			color: #FFFFFF;
+		}
+	</fx:Style>
+	
+	<s:states> 
+		<s:State name="show"/>    
+		<s:State name="hide"/> 
+	</s:states> 
+	
+	<s:Panel title="ToggleButton Sample" width="100%" height="100%">
+		
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+
+		<s:VGroup color="0x000000">
+			<s:Label text="The Outfitters Clothing Store" fontSize="18" color="0x014f9f"/>
+			<s:Label text="Order Number: 904234113441-2342"/>
+			<s:VGroup width="80%"  horizontalCenter="0">
+				<s:Label text="Purchaser: Anna Thomas"/>
+				<s:Label text="Date: 7/20/2009"/>
+				<s:Label text="Order Total: $114.00"/>
+				<s:ToggleButton id="showBtn" label.hide="Show Details" label.show="Hide Details"
+								click="myBtn_clickHandler(event)"/>
+			</s:VGroup>
+		</s:VGroup>
+		<s:HGroup right="50" top="5">
+			<s:Panel title="Details" horizontalCenter="0" top="300" width="350" height="170"  
+					color="#FFFFFF" includeIn="show">
+				<mx:DataGrid dataProvider="{items}" width="100%" height="100%" color="0x000000"/>
+			</s:Panel>
+		</s:HGroup>
+		<s:HGroup horizontalCenter="0" bottom="15"  verticalAlign="middle" width="88%">
+			<s:Label verticalAlign="justify" width="100%"
+					 text="Clicking the button toggles it between the up and down states. If you click the button while it is in the up state, it toggles to the down state. You must click the button again to toggle it back to the up state."/>
+		</s:HGroup>
+
+	</s:Panel>	
+	
+	
+	<!--
+	<s:Group width="100%" height="100%">
+		<s:Rect left="0" right="0" bottom="0" top="0">
+			<s:fill>
+				<s:LinearGradient rotation="90" >
+					<s:GradientEntry color="0xE2E2E2" />
+					<s:GradientEntry color="0x000000" />
+				</s:LinearGradient>
+			</s:fill>
+		</s:Rect>
+		<s:VGroup left="15" top="5" color="0x000000">
+			<s:Label text="The Outfitters Clothing Store" fontSize="18" color="0x014f9f"/>
+			<s:Label text="Order Number: 904234113441-2342"/>
+			<s:VGroup width="80%"  horizontalCenter="0">
+				<s:Label text="Purchaser: Anna Thomas"/>
+				<s:Label text="Date: 7/20/2009"/>
+				<s:Label text="Order Total: $114.00"/>
+				<s:ToggleButton id="showBtn" label.hide="Show Details" label.show="Hide Details"
+								click="myBtn_clickHandler(event)"/>
+				<mx:Spacer height="40"/>
+				<s:Label color="#FFFFFF" width="199" 
+							  verticalAlign="justify"
+							  text="Clicking the button toggles it between the up and an down states. If you click the button while it is in the up state, it toggles to the down state. You must click the button again to toggle it back to the up state."/>
+			</s:VGroup>
+		</s:VGroup>
+		<s:HGroup right="50" top="5">
+			<s:Panel title="Details" horizontalCenter="0" top="300" width="350" height="200"  
+					 color="#FFFFFF"  includeIn="show" baseColor="#000000">
+				<mx:DataGrid dataProvider="{items}" width="100%" height="100%" color="0x000000"/>
+			</s:Panel>
+		</s:HGroup>
+		
+	</s:Group>
+	-->
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/controls/ToggleButtonBarExample.mxml b/tourdeflexmodules/src/spark/controls/ToggleButtonBarExample.mxml
new file mode 100644
index 0000000..e02c956
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/ToggleButtonBarExample.mxml
@@ -0,0 +1,64 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s: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.events.ItemClickEvent;	
+			
+			// Event handler function to print a message
+			// describing the selected Button control.        
+			private function clickHandler(event:ItemClickEvent):void {
+				tgPanel.title = "ToggleButtonBar: " + event.label;
+				myTA.text="Selected button index: " + String(event.index) + 
+					"\n" + "Selected button label: " + event.label;
+			}
+		]]>
+	</fx:Script>
+	
+	<fx:Declarations>
+		
+		<fx:Array id="dp">
+			<fx:String>Flex</fx:String>
+			<fx:String>Flex JS</fx:String>
+			<fx:String>Falcon</fx:String>
+			<fx:String>Falcon JX</fx:String>
+		</fx:Array>
+		
+	</fx:Declarations>
+	
+	<s:Panel id="tgPanel" title="ToggleButtonBar: Flash" width="100%" height="100%">
+		
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<mx:ToggleButtonBar horizontalGap="5" itemClick="clickHandler(event)" dataProvider="{dp}" />
+		
+		<s:Label width="100%" textAlign="center"
+				 text="Select a button in the ToggleButtonBar control."/>
+		
+		<s:TextArea id="myTA" width="100%" height="100%" text="{'Selected button index: 0' + '\n' +'Selected button label: Flash'}"/>
+		
+	</s:Panel>
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/controls/ToggleButtonExample.mxml b/tourdeflexmodules/src/spark/controls/ToggleButtonExample.mxml
new file mode 100644
index 0000000..80b98fb
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/ToggleButtonExample.mxml
@@ -0,0 +1,78 @@
+<?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" 
+			   currentState="hide">
+	
+
+	<fx:Script>
+		<![CDATA[
+			import mx.collections.ArrayCollection;
+			
+			[Bindable]
+			public var items:ArrayCollection = new ArrayCollection([
+				{label:"Medium Pink V-Neck T", itemNum:1932823474, price:"$24.00"}, 
+				{label:"Small Red Polo", itemNum:2022144432, price:"$40.00"}, 
+				{label:"X-Large Sweatshirt", itemNum:3769034827, price:"$50.00"} ]);
+
+			protected function myBtn_clickHandler(event:MouseEvent):void
+			{
+				if (showBtn.selected) 
+					this.currentState="show";
+				else this.currentState="hide";
+			}
+		]]>
+	</fx:Script>
+
+	<s:states> 
+		<s:State name="show"/>    
+		<s:State name="hide"/> 
+	</s:states> 
+	
+	<s:Panel title="ToggleButton Sample" width="100%" height="100%">
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<s:HGroup>			
+			<s:VGroup>
+					<s:Label text="The Outfitters Clothing Store" fontSize="18" />
+					<s:Label text="Order Number: 904234113441-2342"/>
+					<s:VGroup width="80%"  horizontalCenter="0">
+						<s:Label text="Purchaser: Anna Thomas"/>
+						<s:Label text="Date: 7/20/2009"/>
+						<s:Label text="Order Total: $114.00"/>
+						<s:ToggleButton id="showBtn" label.hide="Show Details" label.show="Hide Details"
+										click="myBtn_clickHandler(event)"/>
+					</s:VGroup>
+			</s:VGroup>
+			<s:HGroup right="50" top="5">
+				<s:Panel title="Details" horizontalCenter="0" top="300" width="350" height="170" includeIn="show">
+					<mx:DataGrid dataProvider="{items}" width="100%" height="100%"/>
+				</s:Panel>
+			</s:HGroup>
+		</s:HGroup>
+		
+		<s:Label width="100%"
+				 text="Clicking the button toggles it between the up and down states. If you click the button while it is in the up state, it toggles to the down state. You must click
+		the button again to toggle it back to the up state."/>
+	</s:Panel>	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/controls/ToolTipExample.mxml b/tourdeflexmodules/src/spark/controls/ToolTipExample.mxml
new file mode 100644
index 0000000..ac5911a
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/ToolTipExample.mxml
@@ -0,0 +1,38 @@
+<?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">
+
+	<s:Panel title="ToolTip Samples" width="100%" height="100%">
+		
+		<s:layout>
+			<s:VerticalLayout horizontalAlign="center" 
+							  paddingLeft="10" paddingRight="10" 
+							  paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<s:Button label="Roll over me!" toolTip="This button doesn't do anything &#13;This tip could provide more instructions" />        
+		<s:TextInput toolTip="Enter some data here"/>
+		
+	</s:Panel>
+	
+</s:Module>
+
diff --git a/tourdeflexmodules/src/spark/controls/TreeExample.mxml b/tourdeflexmodules/src/spark/controls/TreeExample.mxml
new file mode 100644
index 0000000..bb6d1bf
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/TreeExample.mxml
@@ -0,0 +1,78 @@
+<?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[
+
+            [Bindable]
+            public var selectedNode:XML;
+
+            // Event handler for the Tree control change event.
+            public function treeChanged(event:Event):void {
+                selectedNode=Tree(event.target).selectedItem as XML;
+            }
+        ]]>
+    </fx:Script>
+    
+	<fx:Declarations>
+		<fx:XMLList id="treeData">
+			<node label="Mail Box">
+				<node label="Inbox">
+					<node label="Marketing"/>
+					<node label="Product Management"/>
+					<node label="Personal"/>
+				</node>
+				<node label="Outbox">
+					<node label="Professional"/>
+					<node label="Personal"/>
+				</node>
+				<node label="Spam"/>
+				<node label="Sent"/>
+			</node>	
+		</fx:XMLList>
+	</fx:Declarations>
+	
+	<s:layout>
+		<s:VerticalLayout horizontalAlign="center" />
+	</s:layout>
+    
+	<s:Panel title="Tree Control" width="100%" height="100%">
+
+		<s:layout>
+			<s:VerticalLayout horizontalAlign="center" 
+							  paddingLeft="10" paddingRight="10" 
+							  paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+         
+         <s:Label width="100%"
+            text="Select a node in the Tree control."/>
+
+        <mx:HDividedBox width="100%" height="100%">
+            <mx:Tree id="myTree" width="50%" height="100%" labelField="@label"
+                showRoot="false" dataProvider="{treeData}" change="treeChanged(event)"/>
+            <s:TextArea height="100%" width="50%"
+                text="Selected Item: {selectedNode.@label}"/>
+        </mx:HDividedBox>
+        
+	</s:Panel>
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/controls/VideoDisplayExample.mxml b/tourdeflexmodules/src/spark/controls/VideoDisplayExample.mxml
new file mode 100644
index 0000000..117365b
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/VideoDisplayExample.mxml
@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s: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(event)">
+
+	<fx:Script>
+		<![CDATA[
+			import flashx.textLayout.conversion.TextConverter;
+			
+			import mx.events.FlexEvent;
+			
+			import org.osmf.utils.OSMFSettings;
+			
+			protected function init(event:FlexEvent):void {
+				OSMFSettings.enableStageVideo = false;
+			}	
+		]]>
+	</fx:Script>
+	
+	<fx:Declarations>
+		<fx:String id="TitleText"><![CDATA[<b>VideoDisplay Control:</b><br />Use the buttons to control the video.]]></fx:String>
+	</fx:Declarations>
+	
+	<s:Panel title="Video Display Sample" width="100%" height="100%">
+		
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<s:RichText width="75%" color="0xffffff" textAlign="center"
+					textFlow="{TextConverter.importToFlow(TitleText, TextConverter.TEXT_FIELD_HTML_FORMAT)}"
+					horizontalCenter="0" verticalCenter="0" />
+		
+		<s:VideoDisplay id="myVid" width="66%" height="66%" source="./spark/controls/assets/FlexInstaller.mp4" autoPlay="false"/>
+		
+		<s:HGroup>
+			<s:Button label="Play" color="0x00000" click="myVid.play()"/>
+			<s:Button label="Pause" color="0x00000" click="myVid.pause()"/>
+			<s:Button label="Stop" color="0x00000" click="myVid.stop()"/>
+		</s:HGroup>
+		
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/controls/VideoPlayerExample.mxml b/tourdeflexmodules/src/spark/controls/VideoPlayerExample.mxml
new file mode 100644
index 0000000..d3fff02
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/VideoPlayerExample.mxml
@@ -0,0 +1,73 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s: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(event)">
+	
+	<fx:Script>
+		<![CDATA[
+			import flashx.textLayout.conversion.TextConverter;
+			
+			import mx.events.ItemClickEvent;
+			import mx.events.FlexEvent;
+			import mx.collections.ArrayCollection;
+			
+			import org.osmf.utils.OSMFSettings;
+			
+			protected function init(event:FlexEvent):void {
+				OSMFSettings.enableStageVideo = false;
+			}	
+			
+			private function playPauseChange(event:Event):void 
+			{
+				videoPlayer.playPauseButton.enabled = checkPlay.selected;
+			}
+		]]>
+	</fx:Script>
+	
+	<s:Panel title="VideoPlayer Sample" width="100%" height="100%">
+		
+		<s:Label top="10" right="10" width="250" verticalAlign="justify" 
+					  text="The VideoPlayer control lets you play progressively downloaded or streaming
+video, live or recorded video. It supports multi-bit rate streaming when used with a server that supports
+multi-bit rate streaming, such as Flash Media Server 3.5. The VideoPlayer control contains a full UI 
+to let users control playback of video. It contains a play/pause toggle button; a scrub bar to let 
+users seek through video; a volume bar; a timer; and a button to toggle in and out of fullscreen mode."/>
+		
+		<!-- note: source can point to a server location or URL -->
+		<s:VGroup left="10">
+			<s:HGroup width="35%">
+				<s:CheckBox id="checkRewind"
+							label="Auto-Rewind"
+							selected="true" />
+				<s:CheckBox id="checkPlay"
+							label="Play/Pause Button"
+							selected="true"
+							change="playPauseChange(event)" />	
+			</s:HGroup>
+			<s:VideoPlayer id="videoPlayer" width="66%" height="66%" y="50"
+						   source="./spark/controls/assets/FlexInstaller.mp4"
+						   autoPlay="false"
+						   autoRewind="{checkRewind.selected}"/>	
+			</s:VGroup>
+		</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/controls/ViewStackExample.mxml b/tourdeflexmodules/src/spark/controls/ViewStackExample.mxml
new file mode 100644
index 0000000..1b5ffed
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/ViewStackExample.mxml
@@ -0,0 +1,103 @@
+<?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">
+	
+	<s:Panel title="ViewStack Container" width="100%" height="100%">
+		
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<s:Label width="100%" textAlign="center"
+				 text="Use the Button controls to change panels of the ViewStack container."/>
+		
+		<s:BorderContainer borderStyle="solid" width="100%">
+			
+			<s:layout>
+				<s:HorizontalLayout paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10" />
+			</s:layout>
+			
+			<s:Button id="searchButton" label="Search Panel"
+					  click="myViewStack.selectedChild=search"/>
+			<s:Button id="cInfoButton" label="Customer Info Panel"
+					  click="myViewStack.selectedChild=custInfo"/>
+			<s:Button id="aInfoButton" label="Account Panel"
+					  click="myViewStack.selectedChild=accountInfo"/>
+		</s:BorderContainer>
+		
+		<!-- Define the ViewStack and the three child containers and have it
+		resize up to the size of the container for the buttons. -->
+		<mx:ViewStack id="myViewStack" borderStyle="solid" width="100%" height="80%">
+			
+			<s:NavigatorContent id="search" label="Search" backgroundColor="0xDCDCDC" width="100%" height="100%" fontWeight="bold" >
+				
+				<s:layout>
+					<s:VerticalLayout horizontalAlign="center"  
+										paddingTop="5" paddingLeft="5" 
+										paddingRight="5" paddingBottom="5" />
+				</s:layout>
+				
+				<s:Label text="Search Panel" />
+				<s:HGroup >
+					<s:TextInput id="Searchtxt" width="200" />
+					<mx:Button label="search" click="Searchtxt.text=''" />
+				</s:HGroup>
+			</s:NavigatorContent>
+			
+			<s:NavigatorContent id="custInfo" label="Customer Info" backgroundColor="0xDCDCDC" 
+								width="100%" height="100%" fontWeight="bold" >
+				
+				<s:layout>
+					<s:VerticalLayout horizontalAlign="center"  
+										paddingTop="5" paddingLeft="5" 
+										paddingRight="5" paddingBottom="5" />
+				</s:layout>
+				
+				<s:Label text="Customer Info" />
+				<s:HGroup>
+					<s:Label text="Email Address"/>
+					<s:TextInput id="email" width="200"/>
+					<s:Button label="Submit" click="email.text=''" />
+				</s:HGroup>
+			</s:NavigatorContent>
+			
+			<s:NavigatorContent id="accountInfo" label="Account Info" backgroundColor="0xDCDCDC" width="100%" height="100%" fontWeight="bold" >
+				
+				<s:layout>
+					<s:VerticalLayout horizontalAlign="center"  
+										paddingTop="5" paddingLeft="5" 
+										paddingRight="5" paddingBottom="5" />
+				</s:layout>
+				
+				<s:Label text="Account Info" />
+				<s:HGroup>
+					<s:Button label="Purchases" />
+					<s:Button label="Sales" />
+					<s:Button label="Reports" />
+				</s:HGroup>
+			</s:NavigatorContent>
+			
+		</mx:ViewStack>
+		
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/controls/assets/ApacheFlexLogo.png b/tourdeflexmodules/src/spark/controls/assets/ApacheFlexLogo.png
new file mode 100644
index 0000000..4ff037f
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/assets/ApacheFlexLogo.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/controls/assets/FlexInstaller.mp4 b/tourdeflexmodules/src/spark/controls/assets/FlexInstaller.mp4
new file mode 100644
index 0000000..8c877c4
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/assets/FlexInstaller.mp4
Binary files differ
diff --git a/tourdeflexmodules/src/spark/controls/assets/arrow_icon.png b/tourdeflexmodules/src/spark/controls/assets/arrow_icon.png
new file mode 100644
index 0000000..9ac6331
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/assets/arrow_icon.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/controls/assets/arrow_icon_sm.png b/tourdeflexmodules/src/spark/controls/assets/arrow_icon_sm.png
new file mode 100644
index 0000000..33debc8
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/assets/arrow_icon_sm.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/controls/assets/control_pause_blue.png b/tourdeflexmodules/src/spark/controls/assets/control_pause_blue.png
new file mode 100644
index 0000000..ec61099
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/assets/control_pause_blue.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/controls/assets/control_play_blue.png b/tourdeflexmodules/src/spark/controls/assets/control_play_blue.png
new file mode 100644
index 0000000..f8c8ec6
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/assets/control_play_blue.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/controls/assets/control_stop_blue.png b/tourdeflexmodules/src/spark/controls/assets/control_stop_blue.png
new file mode 100644
index 0000000..e6f75d2
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/assets/control_stop_blue.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/controls/assets/icon_close.png b/tourdeflexmodules/src/spark/controls/assets/icon_close.png
new file mode 100644
index 0000000..bf9be79
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/assets/icon_close.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/controls/iconclose.gif b/tourdeflexmodules/src/spark/controls/iconclose.gif
new file mode 100644
index 0000000..9bcda93
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/iconclose.gif
Binary files differ
diff --git a/tourdeflexmodules/src/spark/controls/iconinfo.gif b/tourdeflexmodules/src/spark/controls/iconinfo.gif
new file mode 100644
index 0000000..fb181ab
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/iconinfo.gif
Binary files differ
diff --git a/tourdeflexmodules/src/spark/controls/images/arrow_icon_sm.png b/tourdeflexmodules/src/spark/controls/images/arrow_icon_sm.png
new file mode 100644
index 0000000..33debc8
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/images/arrow_icon_sm.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/controls/skins/CloseButtonSkin.mxml b/tourdeflexmodules/src/spark/controls/skins/CloseButtonSkin.mxml
new file mode 100644
index 0000000..ba2a47a
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/skins/CloseButtonSkin.mxml
@@ -0,0 +1,184 @@
+<?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.
+
+-->
+<!--
+@langversion 3.0
+@playerversion Flash 10
+@playerversion AIR 1.5
+@productversion Flex 4
+-->
+<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
+			 minWidth="21" minHeight="21"
+			 alpha.disabled="0.5">
+	
+	<!-- host component -->
+	<fx:Metadata>
+		<![CDATA[ 
+		/** 
+		* @copy spark.skins.spark.ApplicationSkin#hostComponent
+		*/
+		[HostComponent("spark.components.Button")]
+		]]>
+	</fx:Metadata>
+	
+	<fx:Script>
+		<![CDATA[         
+			/* Define the skin elements that should not be colorized. 
+			For button, the graphics are colorized but the label is not. */
+			static private const exclusions:Array = ["labelDisplay"];
+			
+			
+			/** 
+			 * @copy spark.skins.SparkSkin#colorizeExclusions
+			 */     
+			override public function get colorizeExclusions():Array {return exclusions;}
+			
+		]]>        
+		
+	</fx:Script>
+	
+	<!-- states -->
+	<s:states>
+		<s:State name="up" />
+		<s:State name="over" />
+		<s:State name="down" />
+		<s:State name="disabled" />
+	</s:states>
+	
+	<!-- layer 1: shadow -->
+	<s:Rect left="-1" right="-1" top="-1" bottom="-1" radiusX="2" radiusY="2">
+		<s:fill>
+			<s:LinearGradient rotation="90">
+				<s:GradientEntry color="0x000000" 
+								 color.down="0xFFFFFF"
+								 alpha="0.01"
+								 alpha.down="0" />
+				<s:GradientEntry color="0x000000" 
+								 color.down="0xFFFFFF" 
+								 alpha="0.07"
+								 alpha.down="0.5" />
+			</s:LinearGradient>
+		</s:fill>
+	</s:Rect>
+	
+	<!-- layer 2: fill -->
+	<s:Rect left="1" right="1" top="1" bottom="1" radiusX="2" radiusY="2">
+		<s:fill>
+			<s:LinearGradient rotation="90">
+				<s:GradientEntry color="0xFFFFFF" 
+								 color.over="0xBBBDBD" 
+								 color.down="0xAAAAAA" 
+								 alpha="0.85" />
+				<s:GradientEntry color="0xD8D8D8" 
+								 color.over="0x9FA0A1" 
+								 color.down="0x929496" 
+								 alpha="0.85" />
+			</s:LinearGradient>
+		</s:fill>
+	</s:Rect>
+	
+	<!-- layer 3: fill lowlight -->
+	<s:Rect left="1" right="1" bottom="1" height="9" radiusX="2" radiusY="2">
+		<s:fill>
+			<s:LinearGradient rotation="90">
+				<s:GradientEntry color="0x000000" alpha="0.0099" />
+				<s:GradientEntry color="0x000000" alpha="0.0627" />
+			</s:LinearGradient>
+		</s:fill>
+	</s:Rect>
+	
+	<!-- layer 4: fill highlight -->
+	<s:Rect left="1" right="1" top="1" height="9" radiusX="2" radiusY="2">
+		<s:fill>
+			<s:SolidColor color="0xFFFFFF" 
+						  alpha="0.33" 
+						  alpha.over="0.22" 
+						  alpha.down="0.12" />
+		</s:fill>
+	</s:Rect>
+	
+	
+	<!-- layer 5: highlight stroke (all states except down) -->
+	<s:Rect left="1" right="1" top="1" bottom="1" radiusX="2" radiusY="2" excludeFrom="down">
+		<s:stroke>
+			<s:LinearGradientStroke rotation="90" weight="1">
+				<s:GradientEntry color="0xFFFFFF" alpha.over="0.22" />
+				<s:GradientEntry color="0xD8D8D8" alpha.over="0.22" />
+			</s:LinearGradientStroke>
+		</s:stroke>
+	</s:Rect>
+	
+	
+	<!-- layer 6: highlight stroke (down state only) -->
+	<s:Rect left="1" top="1" bottom="1" width="1" includeIn="down">
+		<s:fill>
+			<s:SolidColor color="0x000000" alpha="0.07" />
+		</s:fill>
+	</s:Rect>
+	
+	<s:Rect right="1" top="1" bottom="1" width="1" includeIn="down">
+		<s:fill>
+			<s:SolidColor color="0x000000" alpha="0.07" />
+		</s:fill>
+	</s:Rect>
+	
+	<s:Rect left="2" top="1" right="2" height="1" includeIn="down">
+		<s:fill>
+			<s:SolidColor color="0x000000" alpha="0.25" />
+		</s:fill>
+	</s:Rect>
+	
+	<s:Rect left="1" top="2" right="1" height="1" includeIn="down">
+		<s:fill>
+			<s:SolidColor color="0x000000" alpha="0.09" />
+		</s:fill>
+	</s:Rect>
+	
+	<!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 -->
+	<s:Rect left="0" right="0" top="0" bottom="0" width="69" height="20" radiusX="2" radiusY="2">
+		<s:stroke>
+			<s:LinearGradientStroke rotation="90" weight="1">
+				<s:GradientEntry color="0x000000" 
+								 alpha="0.5625"
+								 alpha.down="0.6375" />
+				<s:GradientEntry color="0x000000" 
+								 alpha="0.75" 
+								 alpha.down="0.85" />
+			</s:LinearGradientStroke>
+		</s:stroke>
+	</s:Rect>
+	
+	<!-- layer 8: text -->
+	<!--- 
+	@copy spark.components.supportClasses.ButtonBase#labelDisplay
+	-->
+	<s:Rect left="0" top="0" right="0" bottom="0" >
+		<s:fill>
+			<s:BitmapFill source="@Embed('../iconclose.gif')"/>
+		</s:fill>
+	</s:Rect>
+	 
+	<s:Label id="labelDisplay"
+				  textAlign="center"
+				  verticalAlign="middle"
+				  maxDisplayedLines="1"
+				  horizontalCenter="0" verticalCenter="1"
+				  left="10" right="10" top="2" bottom="2">
+	</s:Label>
+</s:SparkSkin>
diff --git a/tourdeflexmodules/src/spark/controls/skins/MyPanelSkin.mxml b/tourdeflexmodules/src/spark/controls/skins/MyPanelSkin.mxml
new file mode 100644
index 0000000..edd44e5
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/skins/MyPanelSkin.mxml
@@ -0,0 +1,101 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+
+
+<!--- The default skin class for a Spark Panel container.  
+
+@langversion 3.0
+@playerversion Flash 10
+@playerversion AIR 1.5
+@productversion Flex 4
+-->
+<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled="0.5" blendMode="normal">
+	
+	<fx:Metadata>
+		<![CDATA[ 
+		/** 
+		* @copy spark.skins.spark.ApplicationSkin#hostComponent
+		*/
+		[HostComponent("spark.components.Panel")]
+		]]>
+	</fx:Metadata> 
+	
+	<fx:Script>
+		/* Define the skin elements that should not be colorized. 
+		For panel, border and title backround are skinned, but the content area and title text are not. */
+		static private const exclusions:Array = ["background", "titleDisplay", "contentGroup", "bgfill"];
+		
+		/** 
+		 * @copy spark.skins.SparkSkin#colorizeExclusions
+		 */     
+		override public function get colorizeExclusions():Array {return exclusions;}
+		
+		/* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
+		static private const contentFill:Array = [];
+		
+		/**
+		 * @inheritDoc
+		 */
+		override public function get contentItems():Array {return contentFill};
+	</fx:Script>
+	
+	<s:states>
+		<s:State name="normal" />
+		<s:State name="disabled" />
+		<s:State name="normalWithControlBar" stateGroups="withControls" />
+        <s:State name="disabledWithControlBar" stateGroups="withControls" />
+	</s:states>
+	
+	<!-- background fill -->
+	<s:Rect left="0" right="0" bottom="0" top="0" >
+		<s:fill>
+			<s:LinearGradient rotation="90" >
+				<s:GradientEntry color="0xFFFFFF" />
+				<s:GradientEntry color="0x1a1919" />
+			</s:LinearGradient>
+		</s:fill>
+	</s:Rect>
+	<!-- title bar fill -->
+	<s:Rect left="0" right="0" top="0" height="30">
+		<s:fill>
+			<s:LinearGradient rotation="90">
+				<s:GradientEntry color="0x000000" />
+				<s:GradientEntry color="0xC0C0C0" />
+			</s:LinearGradient>
+		</s:fill>
+	</s:Rect>
+	
+	
+	<!-- text layer -->
+	<!--- Defines the appearance of the PanelSkin class's title bar. -->
+	<s:Label id="titleDisplay" lineBreak="explicit"
+				  right="4" top="2" height="30"
+				  verticalAlign="middle" fontWeight="bold" 
+				  color="0xE2E2E2">
+	</s:Label>
+	
+	<!--
+	Note: setting the minimum size to 0 here so that changes to the host component's
+	size will not be thwarted by this skin part's minimum size.   This is a compromise,
+	more about it here: http://bugs.adobe.com/jira/browse/SDK-21143
+	-->
+	<s:Group id="contentGroup" left="1" right="1" top="32" bottom="1" minWidth="0" minHeight="0"/>
+	
+</s:SparkSkin>
diff --git a/tourdeflexmodules/src/spark/css/CSSDescendantSelectorExample.mxml b/tourdeflexmodules/src/spark/css/CSSDescendantSelectorExample.mxml
new file mode 100644
index 0000000..d3ad013
--- /dev/null
+++ b/tourdeflexmodules/src/spark/css/CSSDescendantSelectorExample.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">
+	
+	<fx:Style>
+		@namespace s "library://ns.adobe.com/flex/spark";
+		@namespace mx "library://ns.adobe.com/flex/mx";
+		
+		s|ButtonBar s|ToggleButton:upAndSelected,
+		s|ButtonBar s|ToggleButton:overAndSelected,
+		s|ButtonBar s|ToggleButton:downAndSelected,
+		
+		s|ButtonBar s|ToggleButton:disabledAndSelected {
+			baseColor: #FF6633;
+			color: #FFFFCC;
+		}
+		
+		s|ButtonBar {
+			baseColor: #FFFFCC;
+		}
+		
+		s|Button {
+			baseColor: #000000;
+			color: #269d6c;
+		}
+		
+		s|VGroup s|Label {
+			fontWeight: "bold";
+			color: #336699;
+		}
+		
+		s|VGroup mx|Text {
+			color: #0A436B;
+			fontWeight: "bold";
+		}
+	</fx:Style>
+	
+	<s:Panel title="Advanced CSS: Descendant Selector Example" height="100%" width="100%">
+		
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<s:Group width="50%" height="50%">
+			<s:ButtonBar id="viewMenu" requireSelection="true" x="10" y="10">
+				<s:dataProvider>
+					<mx:ArrayCollection source="['Home', 'Events', 'Rooms', 'Dining']" />
+				</s:dataProvider>
+			</s:ButtonBar>
+			<s:Button label="Click Me!" x="12" y="48"/>
+			<s:Label x="10" y="90" text="Only text in the VGroup below has bold content." />
+			<s:VGroup x="10" y="109">
+				<s:Label text="This text component has the style setting referring to the Spark Label component." />
+				<mx:Text text="This text component has a style setting with a reference to a Halo Text component."/>
+			</s:VGroup>
+		</s:Group>
+		<s:Label width="200" text="Descendant selectors can be used to specifically qualify the component you 
+want to style via the namespace and component. See the Style settings in the code for reference." x="440" y="10"/>
+	</s:Panel>
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/css/CSSIDSelectorExample.mxml b/tourdeflexmodules/src/spark/css/CSSIDSelectorExample.mxml
new file mode 100644
index 0000000..b4d557e
--- /dev/null
+++ b/tourdeflexmodules/src/spark/css/CSSIDSelectorExample.mxml
@@ -0,0 +1,72 @@
+<?xml version="1.0"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<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:Style>
+		#submitButton {
+			baseColor: #1E407E;
+			color: #003399;
+		}
+		
+	</fx:Style>
+	<fx:Script>
+		<![CDATA[
+			private function clickHandler():void
+			{
+				text1.text = "Thank you " + firstName.text + " " + lastName.text;
+			}
+			private function resetClickHandler():void
+			{
+				firstName.text = "";
+				lastName.text = "";
+			}
+		]]>
+	</fx:Script>
+	
+	<s:Panel height="100%" width="100%"
+			 horizontalCenter="0" verticalCenter="0"
+			 title="Advanced CSS: ID Selector Example">
+
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<s:Label verticalAlign="justify" 
+					  text="Only the Button with the id 'submitButton' will have custom colors."/>
+		
+		<s:VGroup>
+				<s:HGroup verticalAlign="middle">
+					<s:Label text="First Name:"/>
+					<s:TextInput id="firstName" width="100"/>
+				</s:HGroup>
+				<s:HGroup verticalAlign="middle">
+					<s:Label text="Last Name:"/>
+					<s:TextInput id="lastName" width="100"/>
+				</s:HGroup>
+			<s:HGroup>
+				<s:Button id="submitButton" label="Submit Form" click="clickHandler()"/>
+				<s:Button id="resetButton" label="Reset" click="resetClickHandler()"/>
+			</s:HGroup>
+			<s:Label id="text1"/>
+		</s:VGroup>
+		
+	</s:Panel>
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/css/CSSTypeClassSelectorExample.mxml b/tourdeflexmodules/src/spark/css/CSSTypeClassSelectorExample.mxml
new file mode 100644
index 0000000..26ac8c6
--- /dev/null
+++ b/tourdeflexmodules/src/spark/css/CSSTypeClassSelectorExample.mxml
@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s: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:Style>
+		@namespace "library://ns.adobe.com/flex/spark";
+		
+		List.blueTheme {
+			selectionColor: #7FACF6;
+		}
+		
+		List.greenTheme {
+			selectionColor: #00CF3F;
+		}
+		
+		Panel.blueTheme {
+			contentBackgroundColor: #9abbdc;
+			
+		}
+		
+		.blueTheme {
+			focusColor: #3D73EF;
+			symbolColor: #2A3982;
+			
+		}
+	</fx:Style>
+	
+	<s:Panel title="Advanced CSS: Type+Class Selector Sample" height="100%" width="100%" styleName="blueTheme">
+		
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<s:Label width="270" text="This Panel has a styleName, but the Lists and Panel have some different styles defined in a Type+Class selector. See the style section for the styles applied."/>
+		<s:ComboBox selectedIndex="0">
+			<s:ArrayCollection source="[Monday,Tuesday,Wednesday,Thursday,Friday]"/>
+		</s:ComboBox>		
+		<s:VGroup horizontalCenter="0" top="8">
+			<s:Label text="Text:"/>
+			<s:TextInput text="some text" styleName="blueTheme"/>
+			<s:Label text="Units:"/>
+			<s:NumericStepper styleName="blueTheme"/>
+			<s:List id="carList" selectedIndex="2" styleName="blueTheme">
+				<s:dataProvider>
+					<mx:ArrayCollection source="[Civic, M3, Prius, Blazer, Tahoe]" />
+				</s:dataProvider>
+			</s:List>
+		</s:VGroup>
+		<s:List id="fruitList" selectedIndex="2" styleName="greenTheme">
+			<s:dataProvider>
+				<mx:ArrayCollection source="[Apples,Bananas,Grapes]" />
+			</s:dataProvider>
+		</s:List>
+	</s:Panel>
+
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/effects/AnimatePropertiesExample.mxml b/tourdeflexmodules/src/spark/effects/AnimatePropertiesExample.mxml
new file mode 100644
index 0000000..9d313a7
--- /dev/null
+++ b/tourdeflexmodules/src/spark/effects/AnimatePropertiesExample.mxml
@@ -0,0 +1,80 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s: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">
+	
+	<!-- NOTE: This sample was compiled with Flex SDK version 4.0.0.13875 -->
+	
+	<fx:Declarations>
+		<s:Animate id="a" 
+				   duration="750" 
+				   target="{tileGroup}" 
+				   repeatBehavior="reverse" 
+				   repeatCount="2">
+			<s:SimpleMotionPath valueFrom="1"
+								valueTo="15"
+								property="horizontalGap" />
+			<s:SimpleMotionPath valueFrom="1"
+								valueTo="15"
+								property="verticalGap" />
+			<s:SimpleMotionPath valueFrom="0"
+								valueTo="-50"
+								property="z" />
+		</s:Animate>
+	</fx:Declarations>
+	
+	<s:Panel title="Animate Properties Effect Sample" width="100%" height="100%" >
+		
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+		</s:layout>
+		
+		<s:TileGroup id="tileGroup" 
+					 horizontalGap="1" 
+					 verticalGap="1" 
+					 direction="ltr" 
+					 columnWidth="50"
+					 rowHeight="50" 
+					 useHandCursor="true" 
+					 buttonMode="true">
+			
+			<mx:Image source="@Embed('assets/images/2.jpg')" click="a.play()" />
+			<mx:Image source="@Embed('assets/images/3.jpg')" click="a.play()" />
+			<mx:Image source="@Embed('assets/images/4.jpg')" click="a.play()" />
+			<mx:Image source="@Embed('assets/images/5.jpg')" click="a.play()" />
+			<mx:Image source="@Embed('assets/images/6.jpg')" click="a.play()" />
+			<mx:Image source="@Embed('assets/images/7.jpg')" click="a.play()" />
+			<mx:Image source="@Embed('assets/images/8.jpg')" click="a.play()" />
+			<mx:Image source="@Embed('assets/images/9.jpg')" click="a.play()" />
+			
+		</s:TileGroup>
+		
+		<s:VGroup width="100%">
+			<s:Label width="250" 
+					 verticalAlign="justify"
+					 text="With the Spark Animate class, you can animate any arbitrary property of an object by using MotionPaths or SimpleMotionPaths. In this sample, the horizontalGap, verticalGap, and z properties of the TileGroup are being incremented over the course of the animation."/>
+			
+			<s:Label text="{'horizontalGap = ' + tileGroup.horizontalGap}"/>
+			<s:Label text="{'verticalGap = ' + tileGroup.verticalGap}" />
+		</s:VGroup>
+		
+	</s:Panel>
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/effects/AnimateTransformExample.mxml b/tourdeflexmodules/src/spark/effects/AnimateTransformExample.mxml
new file mode 100644
index 0000000..09d32cc
--- /dev/null
+++ b/tourdeflexmodules/src/spark/effects/AnimateTransformExample.mxml
@@ -0,0 +1,79 @@
+<?xml version="1.0"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009" 
+			   xmlns:mx="library://ns.adobe.com/flex/mx" 
+			   xmlns:s="library://ns.adobe.com/flex/spark">
+	
+	<fx:Declarations>
+			<s:AnimateTransform id="bounceEffect"
+							target="{myImage}">
+				
+				<s:motionPaths>
+					<s:MotionPath property="translationX" >
+						<s:keyframes>
+							<s:Keyframe time="250" value="20"/>
+							<s:Keyframe time="550" value="80"/>
+							<s:Keyframe time="850" value="120"/>
+							<s:Keyframe time="1150" value="160"/>
+							<s:Keyframe time="1450" value="200"/>
+							<s:Keyframe time="1750" value="240"/>
+							<s:Keyframe time="2050" value="160"/>
+							<s:Keyframe time="2350" value="120"/>
+							<s:Keyframe time="2650" value="80"/>
+							<s:Keyframe time="2950" value="20"/>
+						</s:keyframes>
+					</s:MotionPath>
+				
+					<s:MotionPath property="translationY" >
+						<s:keyframes>
+							<s:Keyframe time="250" value="160"/>
+							<s:Keyframe time="550" value="60"/>
+							<s:Keyframe time="850" value="160"/>
+							<s:Keyframe time="1150" value="60"/>
+							<s:Keyframe time="1450" value="160"/>
+							<s:Keyframe time="1750" value="60"/>
+							<s:Keyframe time="2050" value="160"/>
+							<s:Keyframe time="2350" value="60"/>
+							<s:Keyframe time="2650" value="160"/>
+							<s:Keyframe time="2950" value="60"/>
+						</s:keyframes>
+					</s:MotionPath>
+				</s:motionPaths>
+		</s:AnimateTransform>
+	</fx:Declarations>
+	
+	<s:Panel title="AnimateTransform Effect Sample (Bounce)" width="100%" height="100%">
+		
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+		</s:layout>
+		
+		<s:Label text="Click the Apache Flex logo to bounce it!" />
+		
+		<s:Label width="250" verticalAlign="justify" 
+					  text="Unlike the Animate class, which you can use to animate any target property, the AnimateTransform effect only supports the animation of certain properties on the target. To use keyframes and motion paths with the AnimateTransform effect, use the MotionPath class to specify keyframes for one or more of the following properties of the AnimateTransform class:
+					  movement (translationX, translationY, and translationZ), rotation (rotationX, rotationY, and rotationZ), scale (scaleX, scaleY, and scaleZ)."/>
+	</s:Panel>
+		
+	<mx:Image x="20" y="60" id="myImage" 
+			  source="@Embed(source='assets/ApacheFlexIcon.png')"
+			  click="bounceEffect.end();bounceEffect.play()"/>	
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/effects/CrossFadeExample.mxml b/tourdeflexmodules/src/spark/effects/CrossFadeExample.mxml
new file mode 100644
index 0000000..785d30b
--- /dev/null
+++ b/tourdeflexmodules/src/spark/effects/CrossFadeExample.mxml
@@ -0,0 +1,66 @@
+<?xml version="1.0"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+
+<s:Module
+	xmlns:fx="http://ns.adobe.com/mxml/2009"
+	xmlns:mx="library://ns.adobe.com/flex/mx"
+	xmlns:s="library://ns.adobe.com/flex/spark">
+	
+	<s:states>
+		<s:State name="default"/>
+		<s:State name="flipped"/>
+	</s:states>
+	
+	<s:transitions>
+		<s:Transition id="t1" autoReverse="true">
+			<s:CrossFade
+				target="{holder}" 
+				duration="1000" />
+		</s:Transition>
+	</s:transitions>
+	
+	<s:Panel title="CrossFade Effect Sample with Transition" width="100%" height="100%">
+		
+		<s:HGroup verticalCenter="0" horizontalCenter="0">
+			<s:VGroup>
+				<s:Group id="holder">
+					<s:BitmapImage
+						source="@Embed('assets/ApacheFlexLogo.png')"
+						visible="true" visible.flipped="false"/>
+					<s:BitmapImage
+						source="@Embed('assets/ApacheFlexLogo.png')"
+						visible="false" visible.flipped="true"/>
+	
+				</s:Group>
+				<s:Button id="playButton" left="264" bottom="174"
+						  label="Cross Fade"
+						  click="currentState = (currentState == 'flipped') ? 'default' : 'flipped'" y.default="-33"/>
+			</s:VGroup>
+			<mx:Spacer width="50"/>
+			<s:VGroup width="100%" >
+				<s:Label text="Cross Fade Sample" fontSize="18"/>
+				<s:Label width="250" verticalAlign="justify" 
+						 text="The CrossFade effect performs a bitmap transition effect by running a crossfade between the first and second bitmaps. 
+						 The crossfade blends the two bitmaps over the duration of the animation."/>
+			</s:VGroup>
+		</s:HGroup>
+		
+	</s:Panel>	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/effects/FadeExample.mxml b/tourdeflexmodules/src/spark/effects/FadeExample.mxml
new file mode 100644
index 0000000..43db833
--- /dev/null
+++ b/tourdeflexmodules/src/spark/effects/FadeExample.mxml
@@ -0,0 +1,57 @@
+<?xml version="1.0"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s:Module
+	xmlns:fx="http://ns.adobe.com/mxml/2009"
+	xmlns:mx="library://ns.adobe.com/flex/mx"
+	xmlns:s="library://ns.adobe.com/flex/spark">	
+	
+	<fx:Declarations>
+		<s:Fade id="fadeEffect" target="{targetImg}" alphaFrom="{Number(fromVal.text)}" alphaTo="{Number(toVal.text)}"
+				repeatCount="2" repeatBehavior="reverse" effectStart="playButton.enabled=false"
+				effectEnd="playButton.enabled=true"/>
+	</fx:Declarations>
+	
+	<s:Panel title="Fade Effect Sample" width="100%" height="100%">
+		
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+		</s:layout>
+		
+		<s:VGroup>
+			<s:HGroup verticalAlign="middle">
+				<s:Label text="Fade alpha from:" verticalAlign="bottom"/>
+				<s:TextInput id="fromVal" text="1.0" widthInChars="3"/>
+			</s:HGroup>
+			<s:HGroup verticalAlign="middle">
+				<s:Label text="Fade alpha to:" verticalAlign="bottom"/>
+				<s:TextInput id="toVal" text="0.0" widthInChars="3"/>
+			</s:HGroup>
+			<s:Button id="playButton"
+					  left="5" bottom="5"
+					  label="Fade" click="fadeEffect.play()"/>
+		</s:VGroup>
+		
+		<s:BitmapImage id="targetImg" width="200" height="200" source="@Embed(source='assets/ApacheFlexLogo.png')"/>
+		
+		<s:Label width="180" verticalAlign="justify" 
+					 text="The Fade effect changes the alpha of a target using the following parameters: alphaFrom, alphaTo. Click 'Fade' to watch the effect."/>
+		
+	</s:Panel>
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/effects/Move3DExample.mxml b/tourdeflexmodules/src/spark/effects/Move3DExample.mxml
new file mode 100644
index 0000000..0165704
--- /dev/null
+++ b/tourdeflexmodules/src/spark/effects/Move3DExample.mxml
@@ -0,0 +1,95 @@
+<?xml version="1.0"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s:Module
+	xmlns:fx="http://ns.adobe.com/mxml/2009"
+	xmlns:mx="library://ns.adobe.com/flex/mx"
+	xmlns:s="library://ns.adobe.com/flex/spark">
+	
+	<fx:Style>
+		@namespace "library://ns.adobe.com/flex/spark";
+		Label { 
+			baseColor: #000000; 
+			fontFamily: "Arial";
+			fontWeight: "bold";
+			fontSize: "11";
+			advancedAntiAliasing: true;
+		}
+		
+	</fx:Style>
+	
+	<fx:Declarations>
+		<s:Move3D id="moveEffect" target="{targetImg}" 
+				   xFrom="{targetImg.x}" xBy="{Number(xVal.text)}" 
+				   yFrom="{targetImg.y}" yBy="{Number(yVal.text)}" 
+				   zFrom="{targetImg.z}" zBy="{Number(zVal.text)}"
+				   duration="{duration.value}"
+				   repeatCount="{repeatCnt.value}" repeatBehavior="{chkReverse.selected?'reverse':'loop'}"
+				   effectStart="this.targetImg.alpha=.7" effectEnd="this.targetImg.alpha=1.0"/>
+	</fx:Declarations>
+	
+	<s:Panel title="Move3D Effect Sample" width="100%" height="100%" >
+		
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+		</s:layout>
+		
+		<s:VGroup>
+		
+			<s:HGroup verticalAlign="middle">
+				<s:Label text="Move X By" verticalAlign="bottom"/>
+				<s:TextInput id="xVal" text="40" widthInChars="3"/>
+			</s:HGroup>
+			
+			<s:HGroup verticalAlign="middle">
+				<s:Label text="Move Y By" verticalAlign="bottom"/>
+				<s:TextInput id="yVal" text="40" widthInChars="3"/>
+			</s:HGroup>
+			<s:HGroup verticalAlign="middle">
+				<s:Label text="Move Z By" verticalAlign="bottom"/>
+				<s:TextInput id="zVal" text="-150" widthInChars="3"/>
+			</s:HGroup>
+			<s:HGroup verticalAlign="middle">
+				<s:Label text="Repeat Num" verticalAlign="bottom"/>
+				<s:NumericStepper id="repeatCnt" width="35" 
+								  value="2" minimum="1"/>
+			</s:HGroup>
+			<s:HGroup verticalAlign="middle">
+				<s:Label text="Duration" verticalAlign="bottom"/>
+				<s:NumericStepper id="duration" width="58" 
+								  minimum="100" maximum="9999"  
+								  value="1000"  
+								  snapInterval="100" />
+			</s:HGroup>
+			<s:CheckBox id="chkReverse" label="Repeat in Reverse?" selected="true"/>
+			<s:Button id="playButton"
+					  label="Move Image" click="moveEffect.play()"/>
+		</s:VGroup>
+		<s:HGroup>
+			<s:BitmapImage id="targetImg" width="200" height="200" source="@Embed(source='assets/ApacheFlexLogo.png')"/>				
+		</s:HGroup>
+		<s:VGroup>
+			<s:Label text="Move3D Effect Sample" fontSize="18"/>
+			<s:Label width="200" verticalAlign="justify"
+					 text="The Move3D class moves a target object in three dimensions around the transform center. A scale of 
+2.0 means the object has been magnified by a factor of 2, and a scale of 0.5 means the object has been 
+reduced by a factor of 2. A scale value of 0.0 is invalid."/>
+		</s:VGroup>
+	</s:Panel>
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/effects/Rotate3DExample.mxml b/tourdeflexmodules/src/spark/effects/Rotate3DExample.mxml
new file mode 100644
index 0000000..46c6e72
--- /dev/null
+++ b/tourdeflexmodules/src/spark/effects/Rotate3DExample.mxml
@@ -0,0 +1,76 @@
+<?xml version="1.0"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s:Module
+	xmlns:fx="http://ns.adobe.com/mxml/2009"
+	xmlns:mx="library://ns.adobe.com/flex/mx"
+	xmlns:s="library://ns.adobe.com/flex/spark">
+
+	<fx:Declarations>
+		<s:Rotate3D id="rotateEffect" target="{targetImg}"  
+				    angleXFrom="0.0" angleXTo="{Number(xVal.text)}" 
+					angleYFrom="0.0" angleYTo="{Number(yVal.text)}" 
+					angleZFrom="0.0" angleZTo="{Number(zVal.text)}"
+					duration="{duration.value}"
+					repeatCount="{repeatCnt.value}" repeatBehavior="{chkReverse.selected?'reverse':'loop'}"
+				   	effectStart="this.targetImg.alpha=.8" effectEnd="this.targetImg.alpha=1.0"/>
+	</fx:Declarations>
+	
+	<s:Panel title="Rotate3D Effect Sample" width="100%" height="100%">
+		
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+		</s:layout>
+		
+		<s:VGroup>
+			<s:HGroup verticalAlign="middle">
+				<s:Label text="Rotate X To" verticalAlign="bottom"/>
+				<s:TextInput id="xVal" text="0.0" widthInChars="3"/>
+			</s:HGroup>
+			<s:HGroup verticalAlign="middle">
+				<s:Label text="Rotate Y By" verticalAlign="bottom"/>
+				<s:TextInput id="yVal" text="360.0" widthInChars="3"/>
+			</s:HGroup>
+			<s:HGroup verticalAlign="middle">
+				<s:Label text="Rotate Z To" verticalAlign="bottom"/>
+				<s:TextInput id="zVal" text="0.0" widthInChars="3"/>
+			</s:HGroup>
+			<s:HGroup verticalAlign="middle">
+				<s:Label text="Repeat Num" verticalAlign="bottom"/>
+				<s:NumericStepper id="repeatCnt" value="2" width="35" minimum="1"/>
+			</s:HGroup>
+			<s:HGroup verticalAlign="middle">
+				<s:Label text="Duration" verticalAlign="bottom"/>
+				<s:NumericStepper id="duration" width="58" 
+								  minimum="100" maximum="9999"  
+								  value="1000"  
+								  snapInterval="100" />
+			</s:HGroup>
+			<s:CheckBox id="chkReverse" label="Repeat in Reverse?" selected="true"/>
+			<s:Button id="playButton"
+					  label="Rotate Image" click="rotateEffect.play()"/>
+		</s:VGroup>
+		
+		<s:BitmapImage id="targetImg" width="200" height="200" source="@Embed(source='assets/ApacheFlexLogo.png')"/>
+
+		<s:Label width="200" verticalAlign="justify"
+				 text="The Rotate3D class rotates a target object in three dimensions around the x, y, or z
+axes. The rotation occurs around the transform center of the target." textAlign="left"/>		
+	</s:Panel>
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/effects/Scale3DExample.mxml b/tourdeflexmodules/src/spark/effects/Scale3DExample.mxml
new file mode 100644
index 0000000..9f4b3e3
--- /dev/null
+++ b/tourdeflexmodules/src/spark/effects/Scale3DExample.mxml
@@ -0,0 +1,79 @@
+<?xml version="1.0"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s:Module
+	xmlns:fx="http://ns.adobe.com/mxml/2009"
+	xmlns:mx="library://ns.adobe.com/flex/mx"
+	xmlns:s="library://ns.adobe.com/flex/spark">
+
+	<fx:Declarations>
+		<s:Scale3D id="scaleEffect" target="{targetImg}" 
+				   scaleXFrom="1.0" scaleXTo="{Number(xVal.text)}" 
+				   scaleYFrom="1.0" scaleYTo="{Number(yVal.text)}" 
+				   scaleZFrom="1.0" scaleZTo="{Number(zVal.text)}"
+				   duration="{duration.value}"
+				   repeatCount="{repeatCnt.value}" repeatBehavior="{chkReverse.selected?'reverse':'loop'}"
+				   effectStart="this.targetImg.alpha=.7" effectEnd="this.targetImg.alpha=1.0"/>
+	</fx:Declarations>
+	
+	<s:Panel title="Scale3D Effect Sample" width="100%" height="100%">
+		
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+		</s:layout>
+
+		<s:VGroup>
+			<s:HGroup verticalAlign="middle">
+				<s:Label text="Scale X To" verticalAlign="bottom"/>
+				<s:TextInput id="xVal" text="0.5" widthInChars="3"/>
+			</s:HGroup>
+			<s:HGroup verticalAlign="middle">
+				<s:Label text="Scale Y To" verticalAlign="bottom"/>
+				<s:TextInput id="yVal" text="0.5" widthInChars="3"/>
+			</s:HGroup>
+			<s:HGroup verticalAlign="middle">
+				<s:Label text="Scale Z To" verticalAlign="bottom"/>
+				<s:TextInput id="zVal" text="1.0" widthInChars="3"/>
+			</s:HGroup>
+			<s:HGroup verticalAlign="middle">
+				<s:Label text="Repeat Num" verticalAlign="bottom"/>
+				<s:NumericStepper id="repeatCnt" width="35" 
+								  value="2" minimum="1"/>
+			</s:HGroup>
+			<s:HGroup verticalAlign="middle">
+				<s:Label text="Duration" verticalAlign="bottom"/>
+				<s:NumericStepper id="duration" width="58" 
+								  minimum="100" maximum="9999"  
+								  value="1000"  
+								  snapInterval="100" />
+			</s:HGroup>
+			<s:CheckBox id="chkReverse" label="Repeat in Reverse?" selected="true"/>
+			<s:Button id="playButton"
+					  label="Scale Image" click="scaleEffect.play()"/>
+		</s:VGroup>
+		
+		<s:BitmapImage id="targetImg" width="50%" height="50%" source="@Embed(source='assets/ApacheFlexLogo.png')"/>
+		
+		<s:Label width="200" verticalAlign="justify"
+				 text="The Scale3D class scales a target object in three dimensions around the transform center. A scale of 
+2.0 means the object has been magnified by a factor of 2, and a scale of 0.5 means the object has been 
+reduced by a factor of 2. A scale value of 0.0 is invalid."/>	
+		
+	</s:Panel>
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/effects/WipeExample.mxml b/tourdeflexmodules/src/spark/effects/WipeExample.mxml
new file mode 100644
index 0000000..c6eb544
--- /dev/null
+++ b/tourdeflexmodules/src/spark/effects/WipeExample.mxml
@@ -0,0 +1,72 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s:Module
+	xmlns:fx="http://ns.adobe.com/mxml/2009"
+	xmlns:mx="library://ns.adobe.com/flex/mx"
+	xmlns:s="library://ns.adobe.com/flex/spark">
+	
+	<s:states>
+		<s:State name="default"/>
+		<s:State name="flipped"/>
+	</s:states>
+	
+	<s:transitions>
+		<s:Transition id="t1">
+			<s:Wipe id="wipe"
+					direction="right"
+					target="{holder}"
+					duration="1000" />
+		</s:Transition>
+	</s:transitions>
+	
+	<s:Panel title="Wipe Effect Example" 
+			 width="100%" height="100%">
+		
+		<s:HGroup horizontalCenter="0" top="15" >
+			<s:VGroup width="100%" height="100%">
+				<s:Group id="holder">
+					<s:BitmapImage
+						source="@Embed('assets/back.png')"
+						visible="true" visible.flipped="false"/>
+					<s:BitmapImage width="200" height="200" 
+						source="@Embed('assets/ApacheFlexLogo.png')"
+						visible="false" visible.flipped="true"/>
+					
+				</s:Group>
+				<s:Button 
+					label="Wipe Right"
+					click="currentState = (currentState == 'flipped') ? 'default' : 'flipped'" />
+			</s:VGroup>
+			
+			
+			<!-- Directions -->
+			<s:VGroup id="detailsBox"
+					  width="400"
+					  left="0">
+				<s:Label
+					width="400"
+					color="#323232"
+					text="The Wipe effect wipes from bitmapFrom to the bitmapTo image in the given direction. Click the 'Wipe Right' button to see the effect."/>
+			</s:VGroup>
+		</s:HGroup>
+		
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/effects/assets/ApacheFlexIcon.png b/tourdeflexmodules/src/spark/effects/assets/ApacheFlexIcon.png
new file mode 100644
index 0000000..e68d831
--- /dev/null
+++ b/tourdeflexmodules/src/spark/effects/assets/ApacheFlexIcon.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/effects/assets/ApacheFlexLogo.png b/tourdeflexmodules/src/spark/effects/assets/ApacheFlexLogo.png
new file mode 100644
index 0000000..4ff037f
--- /dev/null
+++ b/tourdeflexmodules/src/spark/effects/assets/ApacheFlexLogo.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/effects/assets/back.png b/tourdeflexmodules/src/spark/effects/assets/back.png
new file mode 100644
index 0000000..19367fb
--- /dev/null
+++ b/tourdeflexmodules/src/spark/effects/assets/back.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/effects/assets/images/2.jpg b/tourdeflexmodules/src/spark/effects/assets/images/2.jpg
new file mode 100644
index 0000000..2533129
--- /dev/null
+++ b/tourdeflexmodules/src/spark/effects/assets/images/2.jpg
Binary files differ
diff --git a/tourdeflexmodules/src/spark/effects/assets/images/3.jpg b/tourdeflexmodules/src/spark/effects/assets/images/3.jpg
new file mode 100644
index 0000000..b98cd8a
--- /dev/null
+++ b/tourdeflexmodules/src/spark/effects/assets/images/3.jpg
Binary files differ
diff --git a/tourdeflexmodules/src/spark/effects/assets/images/4.jpg b/tourdeflexmodules/src/spark/effects/assets/images/4.jpg
new file mode 100644
index 0000000..657c12b
--- /dev/null
+++ b/tourdeflexmodules/src/spark/effects/assets/images/4.jpg
Binary files differ
diff --git a/tourdeflexmodules/src/spark/effects/assets/images/5.jpg b/tourdeflexmodules/src/spark/effects/assets/images/5.jpg
new file mode 100644
index 0000000..e296f9c
--- /dev/null
+++ b/tourdeflexmodules/src/spark/effects/assets/images/5.jpg
Binary files differ
diff --git a/tourdeflexmodules/src/spark/effects/assets/images/6.jpg b/tourdeflexmodules/src/spark/effects/assets/images/6.jpg
new file mode 100644
index 0000000..5ebc534
--- /dev/null
+++ b/tourdeflexmodules/src/spark/effects/assets/images/6.jpg
Binary files differ
diff --git a/tourdeflexmodules/src/spark/effects/assets/images/7.jpg b/tourdeflexmodules/src/spark/effects/assets/images/7.jpg
new file mode 100644
index 0000000..3047de0
--- /dev/null
+++ b/tourdeflexmodules/src/spark/effects/assets/images/7.jpg
Binary files differ
diff --git a/tourdeflexmodules/src/spark/effects/assets/images/8.jpg b/tourdeflexmodules/src/spark/effects/assets/images/8.jpg
new file mode 100644
index 0000000..4e3f9ca
--- /dev/null
+++ b/tourdeflexmodules/src/spark/effects/assets/images/8.jpg
Binary files differ
diff --git a/tourdeflexmodules/src/spark/effects/assets/images/9.jpg b/tourdeflexmodules/src/spark/effects/assets/images/9.jpg
new file mode 100644
index 0000000..ed4e5fe
--- /dev/null
+++ b/tourdeflexmodules/src/spark/effects/assets/images/9.jpg
Binary files differ
diff --git a/tourdeflexmodules/src/spark/events/EventExample1.mxml b/tourdeflexmodules/src/spark/events/EventExample1.mxml
new file mode 100644
index 0000000..50c3ca7
--- /dev/null
+++ b/tourdeflexmodules/src/spark/events/EventExample1.mxml
@@ -0,0 +1,45 @@
+<?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.controls.Alert;
+		]]>
+	</fx:Script>
+	
+	<s:Panel title="Handling Events - Inline property Sample"
+			 width="100%" height="100%">
+		
+		<s:layout>
+			<s:VerticalLayout horizontalAlign="center" 
+							  paddingLeft="10" paddingRight="10" 
+							  paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<!-- Handling Events - Inline Property -->
+		
+		<s:Button label="click me" click="Alert.show('clicked!')"/>    
+		
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/events/EventExample2.mxml b/tourdeflexmodules/src/spark/events/EventExample2.mxml
new file mode 100644
index 0000000..5205adc
--- /dev/null
+++ b/tourdeflexmodules/src/spark/events/EventExample2.mxml
@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s: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.controls.Alert;
+		]]>
+	</fx:Script>
+	
+	<s:Panel title="Handling Events - Inline Block Sample"
+			 width="100%" height="100%">
+		
+		<s:layout>
+			<s:VerticalLayout horizontalAlign="center" 
+							  paddingLeft="10" paddingRight="10" 
+							  paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<!-- Handling Events - Inline Block -->
+		
+		<s:Button id="b" label="click me once">
+			<s:click>
+				b.enabled = false;
+				mx.controls.Alert.show('clicked!');
+			</s:click>
+		</s:Button>
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/events/EventExample3.mxml b/tourdeflexmodules/src/spark/events/EventExample3.mxml
new file mode 100644
index 0000000..d6663e1
--- /dev/null
+++ b/tourdeflexmodules/src/spark/events/EventExample3.mxml
@@ -0,0 +1,50 @@
+<?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.controls.Alert;
+			
+			private function handleClick(event:MouseEvent):void
+			{
+				b.enabled = false;
+				mx.controls.Alert.show('clicked!');
+			}
+		]]>
+	</fx:Script>
+	
+	<s:Panel title="Handling Events - Function Sample"
+			 width="100%" height="100%">
+		
+		<s:layout>
+			<s:VerticalLayout horizontalAlign="center" 
+							  paddingLeft="10" paddingRight="10" 
+							  paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<!-- Handling Events - Function -->
+		
+		<s:Button id="b" label="click me once" click="handleClick(event)"/>
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/events/EventExample4.mxml b/tourdeflexmodules/src/spark/events/EventExample4.mxml
new file mode 100644
index 0000000..4470368
--- /dev/null
+++ b/tourdeflexmodules/src/spark/events/EventExample4.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.controls.Alert;
+			
+			private function handleClick(event:MouseEvent):void
+			{
+				b.enabled = false;
+				Alert.show('clicked!');
+			}
+		]]>
+	</fx:Script>
+	
+	<s:Panel title="Handling Events - Function with addEventListener Sample"
+			 width="100%" height="100%">
+		
+		<s:layout>
+			<s:VerticalLayout horizontalAlign="center" 
+							  paddingLeft="10" paddingRight="10" 
+							  paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		
+		<!-- Handling Events - Function with addEventListener -->
+		
+		<s:Button id="b" label="click me once">
+			<s:creationComplete>
+				b.addEventListener(MouseEvent.CLICK, handleClick);
+			</s:creationComplete>
+		</s:Button>
+		
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/events/EventExample5.mxml b/tourdeflexmodules/src/spark/events/EventExample5.mxml
new file mode 100644
index 0000000..1e2f34f
--- /dev/null
+++ b/tourdeflexmodules/src/spark/events/EventExample5.mxml
@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s: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 mx.controls.Alert;
+		]]>
+	</fx:Script>
+	
+	<fx:Declarations>	
+		<!-- Dispatching an Event -->
+		<local:FiveSecondTrigger triggered="Alert.show('five second event triggered')"/>
+	</fx:Declarations>
+	
+	<s:Panel title="Dispatching Events Sample"
+			 width="100%" height="100%">
+		
+		<s:layout>
+			<s:VerticalLayout horizontalAlign="center" 
+							  paddingLeft="10" paddingRight="10" 
+							  paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<s:Label text="wait 5 seconds" color="0x000000"/>
+		
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/events/EventExample6.mxml b/tourdeflexmodules/src/spark/events/EventExample6.mxml
new file mode 100644
index 0000000..dab9d02
--- /dev/null
+++ b/tourdeflexmodules/src/spark/events/EventExample6.mxml
@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s: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.controls.Alert;
+		]]>
+	</fx:Script>
+
+	<s:Panel title="Dispatching Custom Events Sample"
+			 width="100%" height="100%">
+		
+		<s:layout>
+			<s:VerticalLayout horizontalAlign="center" 
+							  paddingLeft="10" paddingRight="10" 
+							  paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<!-- Dispatching a Custom Event -->
+		
+		<s:initialize>
+			addEventListener(MyEvent.TRIGGERED, function(event:MyEvent):void {
+				mx.controls.Alert.show('event handled!'); 
+			});
+		</s:initialize>
+		
+		<s:Button label="fire the event!" click="dispatchEvent(new MyEvent(MyEvent.TRIGGERED))"/>
+		
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/events/FiveSecondTrigger.as b/tourdeflexmodules/src/spark/events/FiveSecondTrigger.as
new file mode 100644
index 0000000..7c562d4
--- /dev/null
+++ b/tourdeflexmodules/src/spark/events/FiveSecondTrigger.as
@@ -0,0 +1,44 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package
+{
+    import flash.events.Event;
+    import flash.events.EventDispatcher;
+    import flash.events.TimerEvent;
+    import flash.utils.Timer;
+    
+    [Event(name="triggered")]
+    
+    public class FiveSecondTrigger extends EventDispatcher
+    {
+        public function FiveSecondTrigger()
+        {
+            var t:Timer = new Timer(5000, 1);
+            t.addEventListener(TimerEvent.TIMER, handleTimer);
+            t.start();
+        }
+        
+        private function handleTimer(event:TimerEvent):void
+        {
+            var e:Event = new Event("triggered");
+            dispatchEvent(e);
+        }
+
+    }
+}
\ No newline at end of file
diff --git a/tourdeflexmodules/src/spark/events/MyEvent.as b/tourdeflexmodules/src/spark/events/MyEvent.as
new file mode 100644
index 0000000..28b176c
--- /dev/null
+++ b/tourdeflexmodules/src/spark/events/MyEvent.as
@@ -0,0 +1,33 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package
+{
+    import mx.events.FlexEvent;
+
+    public class MyEvent extends FlexEvent
+    {
+        public static const TRIGGERED:String = "triggered"; 
+        
+        public function MyEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false)
+        {
+            super(type, bubbles, cancelable);
+        }
+        
+    }
+}
\ No newline at end of file
diff --git a/tourdeflexmodules/src/spark/events/TDFGradientBackgroundSkin.mxml b/tourdeflexmodules/src/spark/events/TDFGradientBackgroundSkin.mxml
new file mode 100644
index 0000000..fe2a943
--- /dev/null
+++ b/tourdeflexmodules/src/spark/events/TDFGradientBackgroundSkin.mxml
@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
+			 xmlns:mx="library://ns.adobe.com/flex/mx" 
+			 xmlns:s="library://ns.adobe.com/flex/spark">
+	
+	<fx:Metadata>
+		[HostComponent("spark.components.Application")]
+	</fx:Metadata> 
+	
+	<s:states>
+		<s:State name="normal" />
+		<s:State name="disabled" />
+	</s:states>
+	
+	<s:layout>
+		<s:BasicLayout />
+	</s:layout>
+	
+	<s:Rect id="bg" width="100%" height="100%">
+		<s:fill>
+			<s:LinearGradient rotation="90">
+				<s:entries>
+					<s:GradientEntry color="0x000000" ratio="0.00" />
+					<s:GradientEntry color="0x323232" ratio="1.0" />
+				</s:entries>
+			</s:LinearGradient>    
+		</s:fill>
+	</s:Rect>
+	
+	<s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" />
+</s:SparkSkin>
diff --git a/tourdeflexmodules/src/spark/formatters/CurrencyFormatterExample.mxml b/tourdeflexmodules/src/spark/formatters/CurrencyFormatterExample.mxml
new file mode 100644
index 0000000..bf600df
--- /dev/null
+++ b/tourdeflexmodules/src/spark/formatters/CurrencyFormatterExample.mxml
@@ -0,0 +1,77 @@
+<?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.events.ValidationResultEvent;			
+			private var vResult:ValidationResultEvent;
+			
+			// Event handler to validate and format input.
+			private function Format():void {
+				
+				vResult = numVal.validate();
+				
+				if (vResult.type==ValidationResultEvent.VALID) {
+					var temp:Number=Number(priceUS.text); 
+					formattedUSPrice.text= usdFormatter.format(temp);
+				}
+					
+				else {
+					formattedUSPrice.text="";
+				}
+			}
+		]]>
+	</fx:Script>
+
+	<fx:Declarations>
+		<mx:CurrencyFormatter id="usdFormatter" precision="2" currencySymbol="$" decimalSeparatorFrom="."  rounding="nearest"
+							  decimalSeparatorTo="." useNegativeSign="true" useThousandsSeparator="true" alignSymbol="left"/>
+		
+		<mx:NumberValidator id="numVal" source="{priceUS}" property="text" allowNegative="true" domain="real"/>
+	</fx:Declarations>
+	
+	
+	<s:Panel title="CurrencyFormatter Example" width="100%" height="100%">
+		
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<mx:Form>
+			<mx:FormItem label="Enter dollar amount:">
+				<s:TextInput id="priceUS" text="" width="50%"/>
+			</mx:FormItem>
+			
+			<mx:FormItem label="Formatted U.S. dollar amount: ">
+				<s:Label id="formattedUSPrice" text="" />
+			</mx:FormItem>
+			
+			<mx:FormItem>
+				<s:Button label="Validate and Format" click="Format()"/>
+			</mx:FormItem>
+		</mx:Form>
+		
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/formatters/DateFormatterExample.mxml b/tourdeflexmodules/src/spark/formatters/DateFormatterExample.mxml
new file mode 100644
index 0000000..6f934fe
--- /dev/null
+++ b/tourdeflexmodules/src/spark/formatters/DateFormatterExample.mxml
@@ -0,0 +1,72 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<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.events.ValidationResultEvent;			
+            private var vResult:ValidationResultEvent;
+
+            // Event handler to validate and format input.            
+            private function Format():void
+            {
+                vResult = dateVal.validate();
+                if (vResult.type==ValidationResultEvent.VALID) {
+                    formattedDate.text=dateFormatter.format(dob.text);
+                }
+              
+                else {
+                    formattedDate.text= "";
+                }
+            }
+        ]]>
+    </fx:Script>
+	
+	<fx:Declarations>
+		<mx:DateFormatter id="dateFormatter" formatString="month: MM, day: DD, year: YYYY"/>
+		
+		<mx:DateValidator id="dateVal" source="{dob}" property="text" inputFormat="mm/dd/yyyy"/>
+	</fx:Declarations>
+    
+	<s:Panel title="DateFormatter Example" width="100%" height="100%">
+		
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+         
+         <mx:Form width="100%">
+            <mx:FormItem label="Enter date (mm/dd/yyyy):" width="100%">
+                <s:TextInput id="dob" text=""/>
+            </mx:FormItem>
+
+            <mx:FormItem label="Formatted date: " width="100%">
+                <s:Label id="formattedDate" text="" />
+            </mx:FormItem>
+
+            <mx:FormItem>
+                <s:Button label="Validate and Format" click="Format()"/>
+            </mx:FormItem>
+        </mx:Form>
+        
+	</s:Panel>
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/formatters/NumberFormatterExample.mxml b/tourdeflexmodules/src/spark/formatters/NumberFormatterExample.mxml
new file mode 100644
index 0000000..da5423b
--- /dev/null
+++ b/tourdeflexmodules/src/spark/formatters/NumberFormatterExample.mxml
@@ -0,0 +1,73 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s: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[
+			
+			// Event handler to format the input.            
+			private function Format():void
+			{
+				// The format() method returns the formatted String,
+				// or an empty String if there is an error.
+				var formattedVal:String = numberFormatter.format(inputVal.text);
+				
+				if (formattedVal.length==0) {
+					// If there is an error, the Format.error property 
+					// contains the reason.
+					formattedNumber.text=numberFormatter.error;
+				}
+					
+				else {
+					formattedNumber.text=formattedVal;
+				}
+			}
+		]]>
+	</fx:Script>
+
+	<fx:Declarations>
+		<mx:NumberFormatter id="numberFormatter" />
+	</fx:Declarations>
+	
+	<s:Panel title="Formatter Example" width="100%" height="100%">
+		
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<mx:Form>
+			<mx:FormItem label="Enter number - a letter is invalid:">
+				<s:TextInput id="inputVal" text="" width="75%"/>
+			</mx:FormItem>
+			
+			<mx:FormItem label="Formatted number: ">
+				<s:Label id="formattedNumber" />
+			</mx:FormItem>
+			
+			<mx:FormItem>
+				<s:Button label="Validate and Format" click="Format()"/>
+			</mx:FormItem>
+		</mx:Form>
+		
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/formatters/PhoneFormatterExample.mxml b/tourdeflexmodules/src/spark/formatters/PhoneFormatterExample.mxml
new file mode 100644
index 0000000..d157c95
--- /dev/null
+++ b/tourdeflexmodules/src/spark/formatters/PhoneFormatterExample.mxml
@@ -0,0 +1,73 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s: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.events.ValidationResultEvent;			
+			private var vResult:ValidationResultEvent;
+			
+			// Event handler to validate and format input.            
+			private function Format():void
+			{
+				vResult = pnVal.validate();
+				if (vResult.type==ValidationResultEvent.VALID) {
+					formattedPhone.text= phoneFormatter.format(phone.text);
+				}
+					
+				else {
+					formattedPhone.text= "";
+				}
+			}
+		]]>
+	</fx:Script>
+
+	<fx:Declarations>
+		<mx:PhoneFormatter id="phoneFormatter" formatString="(###) ###-####" validPatternChars="#-() "/>
+		
+		<mx:PhoneNumberValidator id="pnVal" source="{phone}" property="text" allowedFormatChars=""/>
+	</fx:Declarations>
+	
+	<s:Panel title="PhoneNumberValidator Example" width="100%" height="100%">
+		
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<mx:Form>
+			<mx:FormItem label="Enter a 10-digit phone number:">
+				<s:TextInput id="phone" text="" width="75%"/>
+			</mx:FormItem>
+			
+			<mx:FormItem label="Formatted phone number: ">
+				<s:Label id="formattedPhone" text="" />
+			</mx:FormItem>
+			
+			<mx:FormItem>
+				<s:Button label="Validate and Format" click="Format()"/>
+			</mx:FormItem>
+		</mx:Form>
+		
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/formatters/SwitchFormatterExample.mxml b/tourdeflexmodules/src/spark/formatters/SwitchFormatterExample.mxml
new file mode 100644
index 0000000..a919d73
--- /dev/null
+++ b/tourdeflexmodules/src/spark/formatters/SwitchFormatterExample.mxml
@@ -0,0 +1,75 @@
+<?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.formatters.SwitchSymbolFormatter;                
+            import mx.events.ValidationResultEvent;			
+            
+            private var vResult:ValidationResultEvent;
+
+            // Event handler to validate and format input.            
+            private function Format():void
+            {
+                vResult = scVal.validate();
+
+                if (vResult.type==ValidationResultEvent.VALID) {
+                    var switcher:SwitchSymbolFormatter=new SwitchSymbolFormatter('#');
+
+                    formattedSCNumber.text = 
+                        switcher.formatValue("###-##-####", scNum.text);
+                }
+
+                else {
+                    formattedSCNumber.text= "";
+                }
+            }
+        ]]>
+    </fx:Script>
+    
+	<fx:Declarations>
+		<mx:SocialSecurityValidator id="scVal" source="{scNum}" property="text"/>
+	</fx:Declarations>
+   
+        
+	<s:Panel title="SwitchSymbolFormatter Example" width="100%" height="100%">
+		
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+         
+         <mx:Form width="100%">
+         	<s:Label text="Enter a 9 digit Social Security number with no separator characters:" />
+         	
+         	<s:TextInput id="scNum" text="" width="50%" maxChars="9"/>
+            <s:Button label="Validate and Format" click="Format()"/>
+			
+            <mx:FormItem label="formatted Social Security number:">
+                <s:Label id="formattedSCNumber" text="" />
+            </mx:FormItem>
+        </mx:Form>
+        
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/formatters/TDFGradientBackgroundSkin.mxml b/tourdeflexmodules/src/spark/formatters/TDFGradientBackgroundSkin.mxml
new file mode 100644
index 0000000..fe2a943
--- /dev/null
+++ b/tourdeflexmodules/src/spark/formatters/TDFGradientBackgroundSkin.mxml
@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
+			 xmlns:mx="library://ns.adobe.com/flex/mx" 
+			 xmlns:s="library://ns.adobe.com/flex/spark">
+	
+	<fx:Metadata>
+		[HostComponent("spark.components.Application")]
+	</fx:Metadata> 
+	
+	<s:states>
+		<s:State name="normal" />
+		<s:State name="disabled" />
+	</s:states>
+	
+	<s:layout>
+		<s:BasicLayout />
+	</s:layout>
+	
+	<s:Rect id="bg" width="100%" height="100%">
+		<s:fill>
+			<s:LinearGradient rotation="90">
+				<s:entries>
+					<s:GradientEntry color="0x000000" ratio="0.00" />
+					<s:GradientEntry color="0x323232" ratio="1.0" />
+				</s:entries>
+			</s:LinearGradient>    
+		</s:fill>
+	</s:Rect>
+	
+	<s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" />
+</s:SparkSkin>
diff --git a/tourdeflexmodules/src/spark/formatters/ZipCodeFormatterExample.mxml b/tourdeflexmodules/src/spark/formatters/ZipCodeFormatterExample.mxml
new file mode 100644
index 0000000..09fa73c
--- /dev/null
+++ b/tourdeflexmodules/src/spark/formatters/ZipCodeFormatterExample.mxml
@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s: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.events.ValidationResultEvent;			
+            private var vResult:ValidationResultEvent;
+
+            // Event handler to validate and format input.
+            private function Format():void 
+            {
+                vResult = zcVal.validate();
+                
+                if (vResult.type==ValidationResultEvent.VALID) {
+                    formattedZipcode.text= zipFormatter.format(zip.text);
+                }
+                
+                else {
+                    formattedZipcode.text= "";
+                }
+            }
+        ]]>      
+    </fx:Script>
+	
+	<fx:Declarations>
+		<mx:ZipCodeFormatter id="zipFormatter" formatString="#####-####"/>
+
+    <mx:ZipCodeValidator id="zcVal" source="{zip}" property="text" allowedFormatChars=""/>
+	</fx:Declarations>
+    
+	<s:Panel title="ZipCodeFormatter Example" width="100%" height="100%">
+		
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+         
+         <mx:Form width="100%">
+            <mx:FormItem label="Enter a 5 or 9 digit U.S. ZIP code:" width="100%">
+                <s:TextInput id="zip" text=""/>
+            </mx:FormItem>
+
+            <mx:FormItem label="Formatted ZIP code: " width="100%">
+                <s:Label id="formattedZipcode" text="" />
+            </mx:FormItem>
+
+            <mx:FormItem>
+                <s:Button label="Validate and Format" click="Format()"/>
+            </mx:FormItem>
+        </mx:Form>
+        
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/fxg/BitmapImageExample.mxml b/tourdeflexmodules/src/spark/fxg/BitmapImageExample.mxml
new file mode 100644
index 0000000..c355bcc
--- /dev/null
+++ b/tourdeflexmodules/src/spark/fxg/BitmapImageExample.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.
+
+-->
+<!-- BitmapGraphicExample.mxml -->
+<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark">
+	<s:Panel title="BitmapImage Sample" width="100%" height="100%">
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		<s:VGroup>
+			<s:ComboBox id="fillModes" selectedItem="repeat">
+				<s:dataProvider>
+					<s:ArrayCollection>
+						<fx:String>scale</fx:String>
+						<fx:String>clip</fx:String>
+						<fx:String>repeat</fx:String>
+					</s:ArrayCollection>
+				</s:dataProvider>
+			</s:ComboBox>
+			<s:ComboBox id="blends" selectedItem="normal">
+				<s:dataProvider>
+					<s:ArrayCollection>
+						<fx:String>add</fx:String>
+						<fx:String>alpha</fx:String>
+						<fx:String>difference</fx:String>
+						<fx:String>erase</fx:String>
+						<fx:String>hardlight</fx:String>
+						<fx:String>invert</fx:String>
+						<fx:String>layer</fx:String>
+						<fx:String>lighten</fx:String>
+						<fx:String>multiply</fx:String>
+						<fx:String>normal</fx:String>
+						<fx:String>overlay</fx:String>
+						<fx:String>screen</fx:String>
+						<fx:String>shader</fx:String>
+						<fx:String>subtract</fx:String>
+					</s:ArrayCollection>
+				</s:dataProvider>
+				</s:ComboBox>
+			<s:CheckBox id="cbSmooth" label="Smooth?"/>
+		</s:VGroup>
+			
+        <!-- Single image, scaled to fit specified dimensions. -->
+        <s:Graphic x="150" y="0">
+            <s:BitmapImage id="bg2" source="@Embed('assets/ApacheFlexLogo.png')" width="120" height="120" fillMode="{fillModes.selectedItem}"
+						   smooth="{cbSmooth.selected}" blendMode="{blends.selectedItem}"/>
+        </s:Graphic>
+
+        
+		<s:Label width="200" text="A BitmapImage element defines a rectangular region in its parent element's coordinate space, filled with bitmap data drawn from a source file."/>
+    </s:Panel>
+
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/fxg/DropShadowGraphicExample.mxml b/tourdeflexmodules/src/spark/fxg/DropShadowGraphicExample.mxml
new file mode 100644
index 0000000..977faf9
--- /dev/null
+++ b/tourdeflexmodules/src/spark/fxg/DropShadowGraphicExample.mxml
@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009" 
+			   xmlns:s="library://ns.adobe.com/flex/spark" 
+			   xmlns:mx="library://ns.adobe.com/flex/halo">
+	
+	<s:Panel width="100%" height="100%"
+			 title="DropShadows with MXML Graphics Example"
+			 x="0">
+			  
+	    <s:Group horizontalCenter="0" y="5" width="117">
+			<s:Graphic id="ellipse1">
+				<s:filters>
+					<s:DropShadowFilter color="0x6080a0" alpha="0.6" distance="5" />
+				</s:filters>
+				<s:Ellipse x="30" y="20" width="60" height="60">
+					<s:fill>
+						<s:SolidColor color="0x60a0e0" />
+					</s:fill>
+				</s:Ellipse>
+			</s:Graphic>
+			<s:Graphic id="rect1" x="47" y="0" width="100">
+				<s:filters>
+					<s:DropShadowFilter color="0x002020" alpha="0.9" distance="8" angle="10"/>
+				</s:filters>
+				<s:Rect right="15" x="120" y="100" width="90" height="90">
+					<s:fill>
+						<s:SolidColor color="0x4060c0" />
+					</s:fill>
+				</s:Rect>
+			</s:Graphic>
+			<s:Graphic id="image1">
+				<s:filters>
+					<s:DropShadowFilter color="0xFF6600" alpha="0.7" distance="10" angle="-30"/>
+				</s:filters>
+				<s:BitmapImage source="@Embed('assets/ApacheFlexIcon.png')" x="180" y="20" />
+			</s:Graphic>
+			
+		</s:Group>
+	    <s:Label width="250" verticalAlign="justify" x="10" y="30" 
+	    			  text="The DropShadowFilter class lets you add a drop shadow to display
+objects. The shadow algorithm is based on the same box filter that the blur filter uses. You have 
+several options for the style of the drop shadow, including inner or outer shadow and knockout mode. 
+You can apply the filter to any display object (that is, objects that inherit from the DisplayObject 
+class), such as MovieClip, SimpleButton, TextField, and Video objects, as well as to BitmapData objects."/>
+	    	
+	    
+	</s:Panel>
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/fxg/EclipseExample.mxml b/tourdeflexmodules/src/spark/fxg/EclipseExample.mxml
new file mode 100644
index 0000000..a040799
--- /dev/null
+++ b/tourdeflexmodules/src/spark/fxg/EclipseExample.mxml
@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s: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">
+	
+	<s:Panel title="Ellipse Graphic Sample" 
+			 width="100%" height="100%">
+		
+		<s:Graphic horizontalCenter="0" verticalCenter="0">
+			<s:Ellipse height="100" width="250">
+				<s:stroke>
+					<s:SolidColorStroke color="0x000000" weight="5"/>
+				</s:stroke>
+				<s:fill>
+					<s:RadialGradient>
+						<s:entries>
+							<s:GradientEntry color="0x336699" ratio="0.33" alpha="0.8"/>
+							<s:GradientEntry color="0x339999" ratio="0.66" alpha="0.8"/>
+							<s:GradientEntry color="0x323232" ratio="0.99" alpha="0.8"/>
+						</s:entries>
+					</s:RadialGradient>
+				</s:fill>
+			</s:Ellipse>
+		</s:Graphic>
+		<s:Label right="25" top="10" width="270" text="The Ellipse class is a filled graphic element that draws an ellipse. Graphic
+objects are placed in a Graphic tag which defines the root of an FXG document."/>
+	</s:Panel>
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/fxg/EllipseTransformExample.mxml b/tourdeflexmodules/src/spark/fxg/EllipseTransformExample.mxml
new file mode 100644
index 0000000..3dd674a
--- /dev/null
+++ b/tourdeflexmodules/src/spark/fxg/EllipseTransformExample.mxml
@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009" 
+			   xmlns:s="library://ns.adobe.com/flex/spark" 
+			   xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768">
+	<s:layout>
+		<s:BasicLayout/>
+	</s:layout>
+    
+	<fx:Script>
+		<![CDATA[
+			
+			private function addMatrix(): void
+			{
+				ellipse1.transform.matrix = rotation20Matrix;
+				descriptionText.text = "A matrix transform was applied moving the Ellipse to coordinates: 100, 310 and skewing it to a 20 degree rotation.";
+				trace(ellipse1.width);
+			}
+		]]>
+	</fx:Script>
+	<fx:Declarations>
+		<!-- This matrix should cause the rotation of the Ellipse be 20 degrees -->
+		<s:Matrix id="rotation20Matrix"
+				  a="0.939692620786"
+				  b="0.34202014332"
+				  c="0.34202014332"
+				  d="0.939692620786"
+				  tx="50"
+				  ty="210"
+				  />
+	</fx:Declarations>
+	
+	<s:Panel title="Ellipse Transform Sample" width="100%" height="100%">
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+			
+		<s:Label text="An Ellipse Using a Transform for Rotation" />
+		
+		<s:Label id="descriptionText" width="300"/>
+		<s:Button label="Apply Transform" click="addMatrix()" x="40" y="330" />
+	</s:Panel>
+	<s:Ellipse id="ellipse1" width="60" height="70" x="40" y="120">
+		<s:fill>
+			<s:LinearGradient>
+				<s:GradientEntry color="#00FF00" alpha="1" ratio="0"/>
+				<s:GradientEntry color="#000000" alpha="0" ratio="1"/>
+			</s:LinearGradient>
+		</s:fill>
+		<s:stroke>
+			<s:SolidColorStroke color="0x666666" weight="1"/>
+		</s:stroke>
+	</s:Ellipse>
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/fxg/LineExample.mxml b/tourdeflexmodules/src/spark/fxg/LineExample.mxml
new file mode 100644
index 0000000..0b855ea
--- /dev/null
+++ b/tourdeflexmodules/src/spark/fxg/LineExample.mxml
@@ -0,0 +1,96 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s: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">
+	
+	
+	<s:Panel title="Line Graphic Sample" width="100%" height="100%" >
+		<s:Group left="133" top="100">
+			
+			<s:Line xFrom="0" xTo="0" yFrom="0" yTo="100">
+				<!-- Define the border color of the line. -->
+				<s:stroke>
+					<s:SolidColorStroke color="0x000000" weight="1" joints="miter"/>
+				</s:stroke>
+			</s:Line>
+			
+			<s:Line xFrom="6" xTo="6" yFrom="0" yTo="100" >
+				<s:stroke>
+					<s:SolidColorStroke color="0x000000" weight="1" joints="miter"/>
+				</s:stroke>
+			</s:Line>
+			
+			<s:Line xFrom="12" xTo="12" yFrom="0" yTo="100">
+				<s:stroke>
+					<s:SolidColorStroke color="0x000000" weight="2" joints="miter"/>
+				</s:stroke>
+			</s:Line>
+			
+			<s:Line xFrom="20" xTo="20" yFrom="0" yTo="100">
+				<s:stroke>
+					<s:SolidColorStroke color="0x000000" weight="3" joints="miter"/>
+				</s:stroke>
+			</s:Line>
+			
+			<s:Line xFrom="30" xTo="30" yFrom="0" yTo="100">
+				<s:stroke>
+					<s:SolidColorStroke color="0x000000" weight="5" joints="miter"/>
+				</s:stroke>
+			</s:Line>
+			
+			<s:Line xFrom="43" xTo="43" yFrom="0" yTo="100">
+				<s:stroke>
+					<s:SolidColorStroke color="0x000000" weight="8" joints="miter"/>
+				</s:stroke>
+			</s:Line>
+			
+			<s:Line xFrom="58" xTo="58" yFrom="0" yTo="100">
+				<s:stroke>
+					<s:SolidColorStroke color="0x000000" weight="13" joints="miter"/>
+				</s:stroke>
+			</s:Line>
+			
+			<s:Line xFrom="84" xTo="84" yFrom="0" yTo="100">
+				<s:stroke>
+					<s:SolidColorStroke color="0x000000" weight="21" joints="miter"/>
+				</s:stroke>
+			</s:Line>
+			
+			<s:Line xFrom="123" xTo="123" yFrom="0" yTo="100" >
+				<s:stroke>
+					<s:SolidColorStroke color="0x000000" weight="34" joints="bevel" />
+				</s:stroke>
+			</s:Line>
+			<s:Line xFrom="168" xTo="168" yFrom="0" yTo="100" x="3" y="0">
+				<s:stroke>
+					<s:SolidColorStroke color="0x000000" weight="45"/>
+				</s:stroke>
+			</s:Line>
+			<s:Line xFrom="210" xTo="210" yFrom="0" yTo="100" x="19" y="0">
+				<s:stroke>
+					<s:SolidColorStroke color="0x000000" weight="60"/>
+				</s:stroke>
+			</s:Line>
+		</s:Group>
+		<s:Label right="20" top="15" width="250" text="The Line class is a graphic element that draws a line between two points.
+The default stroke for a line is undefined; therefore, if you do not specify the stroke, the line is invisible."/>
+	</s:Panel>
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/fxg/LinearGradientsSpreadMethodExample.mxml b/tourdeflexmodules/src/spark/fxg/LinearGradientsSpreadMethodExample.mxml
new file mode 100644
index 0000000..e5c60c0
--- /dev/null
+++ b/tourdeflexmodules/src/spark/fxg/LinearGradientsSpreadMethodExample.mxml
@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009" 
+			   xmlns:s="library://ns.adobe.com/flex/spark" 
+			   xmlns:mx="library://ns.adobe.com/flex/halo">
+	<fx:Script>
+		<![CDATA[
+			import mx.collections.ArrayCollection;
+		]]>
+	</fx:Script>
+	
+	<s:Panel title="LinearGradient Control" 
+			  width="100%" height="100%"
+			 >
+		
+		<s:HGroup horizontalCenter="0" top="10">
+		<s:Label verticalAlign="justify" x="10" y="30" width="200"
+					  text="The LinearGradient class lets you specify the fill of a graphical element, where a gradient specifies a gradual color transition in the fill color. You add a series of GradientEntry objects to the LinearGradient object's entries Array to define the colors that make up the gradient fill."/>	
+		<s:Rect id="rect1" height="150" width="160" >
+			<s:fill>
+				<s:LinearGradient id="gradient1" scaleX="20" x="0">
+					<s:entries>
+						<s:GradientEntry color="0xFF0000" />
+						<s:GradientEntry color="0xFFFFFF" />
+						<s:GradientEntry color="0x0000FF" />
+					</s:entries>
+				</s:LinearGradient>
+			</s:fill>
+		</s:Rect>
+		<s:VGroup>
+			
+			<s:Label text="scaleX value: " />
+			<s:HSlider id="scaleXVal" value="20" maximum="200" change="gradient1.scaleX=scaleXVal.value"/>
+			<s:Label text="x value: " />
+			<s:HSlider id="XVal" value="0" maximum="200" change="gradient1.x=XVal.value"/>
+			<s:Label text="select a spreadMethod: " />
+			<s:DropDownList id="spreadValue" selectedIndex="0" 
+						dataProvider="{new ArrayCollection(['pad', 'reflect', 'repeat'])}"  
+						change="gradient1.spreadMethod=spreadValue.selectedItem"/>	
+		</s:VGroup>
+			
+		</s:HGroup>
+		
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/fxg/OrangeCrayonStar.fxg b/tourdeflexmodules/src/spark/fxg/OrangeCrayonStar.fxg
new file mode 100644
index 0000000..601841c
--- /dev/null
+++ b/tourdeflexmodules/src/spark/fxg/OrangeCrayonStar.fxg
@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+
+Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+-->
+<Graphic version="1.0" xmlns="http://ns.adobe.com/fxg/2008" xmlns:fw="http://ns.adobe.com/fxg/2008/fireworks"  viewHeight= "134" viewWidth= "136">
+	<Library>
+	</Library>
+
+	<Group id="Page_1" fw:type="page">
+		<Group id="State_1" fw:type="state">
+			<Group id="Layer_1" fw:type="layer">
+				<Group id="undefined">
+					<Path winding="evenOdd" data="M 68 12 L 85 48 L 125 54 L 96 82 L 103 121 L 68 103 L 32 121 L 39 82 L 10 54 L 50 48 L 68 12 Z " blendMode="normal" alpha="1">
+						<fill>
+							<LinearGradient x = "67" y = "42" scaleX = "113" rotation = "70">
+								<GradientEntry color="#ff6600" ratio="0" alpha="1"/>
+								<GradientEntry color="#ff6600" ratio="0.08" alpha="1"/>
+								<GradientEntry color="#ffcc00" ratio="0.32" alpha="1"/>
+								<GradientEntry color="#ffff99" ratio="0.53" alpha="1"/>
+								<GradientEntry color="#dedede" ratio="0.99" alpha="1"/>
+								<GradientEntry color="#ffffcc" ratio="0.72" alpha="1"/>
+							</LinearGradient>
+						</fill>
+						<stroke>
+							<SolidColorStroke color="#ff6600" weight="6"/>
+						</stroke>
+					</Path>
+				</Group>
+			</Group>
+		</Group>
+	</Group>
+</Graphic>
\ No newline at end of file
diff --git a/tourdeflexmodules/src/spark/fxg/RectExample.mxml b/tourdeflexmodules/src/spark/fxg/RectExample.mxml
new file mode 100644
index 0000000..1866ca1
--- /dev/null
+++ b/tourdeflexmodules/src/spark/fxg/RectExample.mxml
@@ -0,0 +1,82 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s: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">
+	
+	<s:Panel title="Rect Graphic Sample" 
+			 width="100%" height="100%">
+		
+			 
+		<s:Group left="15" top="20">
+			<s:Graphic x="0" y="0">
+				<!-- Draw rectangle with square corners. -->
+				<s:Rect height="100" width="150">
+					<s:stroke>
+						<s:SolidColorStroke color="0x000000" weight="2"/>
+					</s:stroke>
+					<s:fill>
+						<s:SolidColor color="0x336699"/>
+					</s:fill>
+				</s:Rect>
+			</s:Graphic>
+			
+			<s:Graphic x="250" y="0">
+				<!-- Draw rectangle with rounded corners. -->
+				<s:Rect height="100" width="150" radiusX="25" radiusY="25">
+					<s:stroke>
+						<s:SolidColorStroke color="0x336699" weight="2"/>
+					</s:stroke>
+					<s:fill>
+						<s:RadialGradient>
+							<s:entries>
+								<s:GradientEntry color="0x336699"  alpha="0.5"/>
+								<s:GradientEntry color="0x323232"  alpha="0.5"/>
+								<s:GradientEntry color="0xE2E2E2"  alpha="0.5"/>
+							</s:entries>
+						</s:RadialGradient>
+					</s:fill>
+				</s:Rect>
+			</s:Graphic>
+			
+			<s:Graphic x="500" y="0">
+				<s:Rect height="100" width="150">
+					<s:stroke>
+						<s:LinearGradientStroke weight="6" rotation="90">
+							<s:GradientEntry color="0x323232" alpha="0.8"/>
+							<s:GradientEntry color="0x336699" alpha="0.8"/>
+						</s:LinearGradientStroke>
+					</s:stroke>
+					<s:fill>
+						<s:RadialGradient>
+							<s:entries>
+								<s:GradientEntry color="0x336699"/>
+								<s:GradientEntry color="0x323232"/>
+								<s:GradientEntry color="0xE2E2E2"/>
+							</s:entries>
+						</s:RadialGradient>
+					</s:fill>
+				</s:Rect>
+			</s:Graphic>
+			
+		</s:Group>
+		<s:Label top="165" horizontalCenter="0" width="40%" text="The Rect class is a filled graphic element that draws a rectangle."/>
+	</s:Panel>
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/fxg/RichTextExample.mxml b/tourdeflexmodules/src/spark/fxg/RichTextExample.mxml
new file mode 100644
index 0000000..9df7a2f
--- /dev/null
+++ b/tourdeflexmodules/src/spark/fxg/RichTextExample.mxml
@@ -0,0 +1,58 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s: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">
+	
+	<s:Panel title="RichText Sample" width="100%" height="100%" >
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="8" paddingRight="8" paddingTop="8"/>
+		</s:layout>
+		<s:Group left="10" right="10" top="10" bottom="10">
+			<s:RichText x="0" y="0" width="75" fontFamily="Times" fontSize="15" textRotation="rotate90">
+				<s:content>Hello World!</s:content>
+			</s:RichText>
+			
+			<s:Group x="100" y="0">
+				<s:RichText width="100" textAlign="justify" paddingTop="5" paddingLeft="5" paddingRight="5" paddingBottom="5">
+					<s:content>Hello World! This is a justified paragraph of text in a RichText control. It has a border around it drawn by a Rect inside a Group.</s:content>
+				</s:RichText>
+				<s:Rect width="100%" height="100%">
+					<s:stroke>
+						<s:SolidColorStroke/>
+					</s:stroke>
+				</s:Rect>
+			</s:Group>
+			
+			<s:Group x="225" y="0" >
+				<s:RichText width="140" height="120" columnCount="2" columnGap="10">
+					<s:content><s:span fontWeight="bold">Hello World!</s:span> This is a paragraph of text in 2 columns. It is about 20 words long, which should be enough to cause a few line breaks.</s:content>
+				</s:RichText>
+				<s:Rect width="100%" height="100%">
+					<s:stroke>
+						<s:SolidColorStroke/>
+					</s:stroke>
+				</s:Rect>
+			</s:Group>
+		</s:Group>
+		<s:Label width="270" text="RichText is a low-level UIComponent that can display one or more lines of richly-formatted text and embedded images. For performance reasons, it does not support scrolling, selection, editing, clickable hyperlinks, or images loaded from URLs. If you need those capabilities, see the RichEditableText class."/>
+	</s:Panel>
+
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/fxg/StaticFXGExample.mxml b/tourdeflexmodules/src/spark/fxg/StaticFXGExample.mxml
new file mode 100644
index 0000000..02a3e92
--- /dev/null
+++ b/tourdeflexmodules/src/spark/fxg/StaticFXGExample.mxml
@@ -0,0 +1,52 @@
+<?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:fxg="*">
+	
+	
+	<s:Panel title="Static FXG Sample" width="100%" height="100%">
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<s:Label verticalAlign="justify" width="200"
+					  text="You can use a static file of fxg within your MXML. You include the inline
+component as shown here."/>
+		
+		<s:VGroup>
+				<s:VGroup bottom="100">
+					<s:HSlider id="star_width" maximum="400" change="crayonStar.width=star_width.value" 
+							   horizontalCenter="-90" y="250" />
+					<s:Label horizontalCenter="-90" y="269" text="width"/>
+				</s:VGroup>
+				<s:VGroup bottom="60">
+					<s:HSlider id="star_height" maximum="400" change="crayonStar.height=star_height.value" 
+							   horizontalCenter="90" y="250" />
+					<s:Label horizontalCenter="90" y="269" text="height"/>	
+				</s:VGroup>				
+		</s:VGroup>
+		
+		<fxg:OrangeCrayonStar id="crayonStar" />
+	</s:Panel>
+	
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/fxg/assets/ApacheFlexIcon.png b/tourdeflexmodules/src/spark/fxg/assets/ApacheFlexIcon.png
new file mode 100644
index 0000000..e68d831
--- /dev/null
+++ b/tourdeflexmodules/src/spark/fxg/assets/ApacheFlexIcon.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/fxg/assets/ApacheFlexLogo.png b/tourdeflexmodules/src/spark/fxg/assets/ApacheFlexLogo.png
new file mode 100644
index 0000000..4ff037f
--- /dev/null
+++ b/tourdeflexmodules/src/spark/fxg/assets/ApacheFlexLogo.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/i18n/SparkCollator2Example.mxml b/tourdeflexmodules/src/spark/i18n/SparkCollator2Example.mxml
new file mode 100644
index 0000000..5d29531
--- /dev/null
+++ b/tourdeflexmodules/src/spark/i18n/SparkCollator2Example.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%" creationComplete="compareStrings()">
+	<fx:Script>
+		<![CDATA[
+			import mx.collections.ArrayCollection;
+			[Bindable]
+			private var _locales:ArrayCollection = new ArrayCollection(['en-US','de-DE','ja-JP','ru-RU','zh-CN','fr-FR']);
+			
+			private function compareStrings():void {
+				if(firstTI.text != '' && secondTI.text != '') {
+					switch (sortCollator.compare(firstTI.text,secondTI.text)) {
+						case 1:
+							operatorL.text = '>';
+							break;
+						case 0:
+							operatorL.text = '=';
+							break;
+						case -1:
+							operatorL.text = '<';
+							break;
+						default:
+							operatorL.text = ' ';
+					}
+				}
+			}
+		]]>
+	</fx:Script>
+	
+	<fx:Declarations>
+		<s:SortingCollator id="sortCollator" locale="{localeCB.selectedItem}"/>
+	</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 height="100%" width="100%">
+			<s:Label text="Compare two strings by using SortingCollator"/>
+			<s:Spacer height="15"/>
+			
+			<s:FormItem label="Locales:" toolTip="Select a locale for the collator instance.">
+				<s:ComboBox id="localeCB" dataProvider="{_locales}" selectedIndex="5" change="compareStrings()"/>
+			</s:FormItem>
+			<s:FormItem label="Collator Options:" toolTip="Set properties for the collator instance.">
+				<s:HGroup>
+					<s:CheckBox id="ignoreCaseCB" label="ignoreCase" change="sortCollator.ignoreCase = ignoreCaseCB.selected;compareStrings()"/>
+					<s:CheckBox id="ignDiacriticsCB" label="ignoreDiacritics" change="sortCollator.ignoreDiacritics = ignDiacriticsCB.selected;compareStrings()"/>
+					<s:CheckBox id="ignSymbolsCB" label="ignoreSymbols" change="sortCollator.ignoreSymbols = ignSymbolsCB.selected;compareStrings()"/>
+					<s:CheckBox id="ignKanaTypeCB" label="ignoreKanaType" change="sortCollator.ignoreKanaType = ignKanaTypeCB.selected;compareStrings()"/>
+					<s:CheckBox id="ignCharacterWidthCB" label="ignoreCharacterWidth" change="sortCollator.ignoreCharacterWidth = ignCharacterWidthCB.selected;compareStrings()"/>
+				</s:HGroup>
+			</s:FormItem>
+			<s:FormItem label="Strings:" toolTip="Input two strings and find out their compare result.">
+				<s:HGroup>
+					<s:TextInput id="firstTI" text="coté" change="compareStrings()"/>
+					<s:Label id="operatorL" text=" " fontSize="15"/>
+					<s:TextInput id="secondTI" text="côte" change="compareStrings()"/>
+				</s:HGroup>
+			</s:FormItem>
+		</s:Form>
+
+	</s:Panel>
+</s:Module>
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','ä','Ａ','ア','ァ','あ','中','abc','WO','ａ','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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
+
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
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>
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>
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>
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>
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
--- /dev/null
+++ b/tourdeflexmodules/src/spark/itemRenderers/assets/1.jpg
Binary files differ
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
--- /dev/null
+++ b/tourdeflexmodules/src/spark/itemRenderers/assets/2.jpg
Binary files differ
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
--- /dev/null
+++ b/tourdeflexmodules/src/spark/itemRenderers/assets/3.jpg
Binary files differ
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
--- /dev/null
+++ b/tourdeflexmodules/src/spark/itemRenderers/assets/4.jpg
Binary files differ
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
--- /dev/null
+++ b/tourdeflexmodules/src/spark/itemRenderers/assets/5.jpg
Binary files differ
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
--- /dev/null
+++ b/tourdeflexmodules/src/spark/itemRenderers/assets/6.jpg
Binary files differ
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
--- /dev/null
+++ b/tourdeflexmodules/src/spark/itemRenderers/assets/7.jpg
Binary files differ
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
--- /dev/null
+++ b/tourdeflexmodules/src/spark/itemRenderers/assets/8.jpg
Binary files differ
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
--- /dev/null
+++ b/tourdeflexmodules/src/spark/itemRenderers/assets/9.jpg
Binary files differ
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
--- /dev/null
+++ b/tourdeflexmodules/src/spark/itemRenderers/assets/ApacheFlexIcon.png
Binary files differ
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
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>
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>
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>
diff --git a/tourdeflexmodules/src/spark/layouts/CustomLayoutFlickrWheelExample.mxml b/tourdeflexmodules/src/spark/layouts/CustomLayoutFlickrWheelExample.mxml
new file mode 100644
index 0000000..238553a
--- /dev/null
+++ b/tourdeflexmodules/src/spark/layouts/CustomLayoutFlickrWheelExample.mxml
@@ -0,0 +1,84 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s: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:my="*" minWidth="600" minHeight="350" 
+				creationComplete="requestPhotos()" backgroundColor="0x323232">
+
+     <fx:Script>
+        <![CDATA[
+            import mx.collections.ArrayCollection;
+            import mx.rpc.events.ResultEvent;
+            
+            import spark.components.Group;
+            import spark.components.supportClasses.GroupBase;
+            import spark.effects.animation.MotionPath;
+
+            [Bindable]
+            private var photoFeed:ArrayCollection;
+            
+            private function requestPhotos():void {
+                var params:Object = new Object();
+                params.format = 'rss_200_enc';
+                params.tags = searchTerms.text;
+                photoService.send(params);
+            }
+
+            private function photoHandler(event:ResultEvent):void {
+                photoFeed = event.result.rss.channel.item as ArrayCollection;
+            }
+         ]]>
+    </fx:Script>
+
+    <fx:Declarations>
+        <s:HTTPService id="photoService"
+            url="http://api.flickr.com/services/feeds/photos_public.gne"
+            result="photoHandler(event)" />
+    </fx:Declarations>
+    
+	<s:Panel title="Image Wheel Sample" width="100%" height="100%">
+	    <s:layout>
+	        <s:VerticalLayout paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10"/>
+	    </s:layout>
+		
+		<s:HGroup verticalAlign="middle">
+			<s:Label text="Flickr tags or search terms:" color="0xFFFFFF"/>
+			<s:TextInput id="searchTerms"
+				enter="requestPhotos()" text="bugs" />
+			<s:Button label="Search" 
+				click="requestPhotos()" />
+			<!-- The slider to control the axis angle -->
+			<s:HSlider id="axisSlider" minimum="-90" maximum="90"
+					   value="10" liveDragging="true" width="300"/>
+		</s:HGroup>
+	
+		<s:List width="100%" height="100%"
+			dataProvider="{photoFeed}"
+			itemRenderer="FlickrThumbnail"
+	        id="theList">
+			
+			<s:layout>
+			    <my:WheelLayout gap="20" axisAngle="{axisSlider.value}"/>
+			</s:layout>
+		</s:List>
+	</s:Panel>
+   
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/layouts/CustomLayoutFlowExample.mxml b/tourdeflexmodules/src/spark/layouts/CustomLayoutFlowExample.mxml
new file mode 100644
index 0000000..52b313d
--- /dev/null
+++ b/tourdeflexmodules/src/spark/layouts/CustomLayoutFlowExample.mxml
@@ -0,0 +1,85 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s:Module  xmlns:fx="http://ns.adobe.com/mxml/2009"
+				xmlns:s="library://ns.adobe.com/flex/spark"
+				xmlns:mx="library://ns.adobe.com/flex/halo"
+				xmlns:my="*">
+	
+	<s:Panel width="100%" height="100%" title="Custom Layout - Flow Layout" >
+		<s:layout>
+			<s:VerticalLayout horizontalAlign="center"
+							  paddingTop="10" gap="10"/>
+		</s:layout>
+		
+		<!-- The drop-down to select vertical alignment -->
+		<s:HGroup verticalAlign="middle">
+			<s:Label text="Vertical align"/>
+			<s:DropDownList id="vAlign" requireSelection="true" color="0x000000">
+				<s:ArrayCollection>
+					<fx:String>bottom</fx:String>
+					<fx:String>middle</fx:String>
+					<fx:String>top</fx:String>
+				</s:ArrayCollection>
+			</s:DropDownList>                         
+		</s:HGroup>
+		
+		<!-- The drop-down to select vertical alignment -->                         
+		<s:HGroup verticalAlign="middle">
+			<s:Label text="Horizontal align"/>
+			<s:DropDownList id="hAlign" requireSelection="true">
+				<s:ArrayCollection>
+					<fx:String>left</fx:String>
+					<fx:String>center</fx:String>
+					<fx:String>right</fx:String>
+				</s:ArrayCollection>
+			</s:DropDownList>                         
+		</s:HGroup>
+		
+		<!-- The slider to control the list width -->
+		<s:HGroup verticalAlign="bottom">
+			<s:Label text="Container width"/>
+			<s:HSlider id="widthSlider" minimum="10" maximum="400"
+					   value="200" liveDragging="true"/>
+		</s:HGroup>
+		
+		<!-- The slider to control the horizontal gap -->
+		<s:HGroup verticalAlign="bottom">
+			<s:Label text="Horizontal gap"/>
+			<s:HSlider id="hGapSlider" minimum="0" maximum="50"
+					   value="10" liveDragging="true"/>
+		</s:HGroup>
+		
+		<!-- A Spark List -->
+		<s:List id="list1" width="{widthSlider.value}" height="112"
+				selectedIndex="7"
+				dataProvider="{new ArrayCollection(
+				'The quick fox jumped over the lazy sleepy\n\dog'.split(' '))}">
+			
+			<!-- Configure the layout to be the FlowLayout -->    
+			<s:layout>
+				<my:FlowLayout1 horizontalAlign="{hAlign.selectedItem}"
+								verticalAlign="{vAlign.selectedItem}"
+								horizontalGap="{hGapSlider.value}"/>
+			</s:layout>
+		</s:List>
+	</s:Panel>
+
+</s:Module>
+
diff --git a/tourdeflexmodules/src/spark/layouts/CustomLayoutHBaselineExample.mxml b/tourdeflexmodules/src/spark/layouts/CustomLayoutHBaselineExample.mxml
new file mode 100644
index 0000000..6d8ff1a
--- /dev/null
+++ b/tourdeflexmodules/src/spark/layouts/CustomLayoutHBaselineExample.mxml
@@ -0,0 +1,116 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<!-- http://evtimmy.com/2010/02/extending-horizontallayout-to-support-baseline-align-to-text/ -->
+<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 mx.events.FlexEvent;
+			
+			protected function update(event:Event):void
+			{
+				globalBaseline.top = theLayout.actualBaseline;
+				checkBoxBaseline.top = checkBox.y + checkBox.baselinePosition;
+				labelBaseline.top = label.y + label.baselinePosition;
+				labelBaseline.left = label.x;
+				buttonBaseline.top = button.y + button.baselinePosition; 
+				buttonBaseline.left = button.x;
+			}
+			
+		]]>
+	</fx:Script>
+	
+	<s:Panel width="100%" height="100%" title="CustomLayout with HBaselineLayout">
+		
+		<!-- Controls -->
+		<s:HGroup left="14" top="5">
+			<s:VGroup>
+				<s:CheckBox label="Checkbox" id="showCheckBox" selected="true"/>
+				<s:CheckBox label="Label" id="showLabel" selected="true"/>
+				<s:CheckBox label="Button " id="showButton" selected="true"/>
+				<s:CheckBox label="Layout " id="showLayout" selected="true"/>
+			</s:VGroup>
+			
+			<s:TileGroup requestedColumnCount="2">
+				<s:CheckBox id="baseline1Check" label="Offset Checkbox baseline" selected="true"/>
+				<s:HSlider id="baseline1Slider" minimum="-100" maximum="100" enabled="{baseline1Check.selected}" width="160"/>
+				<s:CheckBox id="baseline2Check" label="Offset Label baseline" selected="true"/>
+				<s:HSlider id="baseline2Slider" minimum="-100" maximum="100" enabled="{baseline2Check.selected}" width="160"/>
+				<s:CheckBox id="baseline3Check" label="Offset Button baseline" selected="true"/>
+				<s:HSlider id="baseline3Slider" minimum="-100" maximum="100" enabled="{baseline3Check.selected}" width="160"/>
+				<s:CheckBox id="baseline4Check" label="Offset Layout baseline"/>
+				<s:HSlider id="baseline4Slider" minimum="-100" maximum="100" enabled="{baseline4Check.selected}" width="160" value="15"/>
+				<s:CheckBox id="buttonHeightCheck" label="Override Button height" selected="true"/>
+				<s:HSlider id="buttonHeightSlider" minimum="21" maximum="150" enabled="{buttonHeightCheck.selected}" width="160" value="21"/>
+			</s:TileGroup>
+		</s:HGroup>
+		
+		
+		<s:Group id="container" updateComplete="update(event)" top="138" horizontalCenter="0">
+			<s:layout>
+				<local:HBaselineLayout id="theLayout" verticalAlign="baseline"
+									   globalBaseline="{baseline4Check.selected ? baseline4Slider.value : NaN}"/>
+			</s:layout>
+			<s:CheckBox id="checkBox" label="One check box" move="update(event)"
+						baseline="{baseline1Check.selected ? baseline1Slider.value : 0}"/>
+			<s:Label id="label" text="...and some random text..." move="update(event)"
+					 baseline="{baseline2Check.selected ? baseline2Slider.value : 0}"/>
+			<s:Button id="button" label="and a Button!" move="update(event)"
+					  height="{buttonHeightCheck.selected ? buttonHeightSlider.value : 21}"
+					  baseline="{baseline3Check.selected ? baseline3Slider.value : 0}"/>
+			<!-- visual guides for the baselines -->
+			<s:Group includeInLayout="false">
+				<s:Line width="{container.width}" id="globalBaseline" top="{theLayout.actualBaseline}"
+						visible="{showLayout.selected}">
+					<s:stroke>
+						<s:SolidColorStroke color="0x00FF00" weight="2"/>
+					</s:stroke>
+				</s:Line>
+				
+				<s:Line width="{checkBox.width-1}" id="checkBoxBaseline"
+						visible="{showCheckBox.selected}">
+					<s:stroke>
+						<s:SolidColorStroke color="0xFF0000" alpha="0.5" weight="2"/>
+					</s:stroke>
+				</s:Line>
+				
+				<s:Line width="{label.width-1}" id="labelBaseline"
+						visible="{showLabel.selected}">
+					<s:stroke>
+						<s:SolidColorStroke color="0x0000FF" alpha="0.5" weight="2"/>
+					</s:stroke>
+				</s:Line>
+				
+				<s:Line width="{button.width-1}" id="buttonBaseline"
+						visible="{showButton.selected}">
+					<s:stroke>
+						<s:SolidColorStroke color="0xFF00FF" alpha="0.5" weight="2"/>
+					</s:stroke>
+				</s:Line>
+			</s:Group>
+		</s:Group>
+		<s:Label right="14" top="7" color="0x323232" width="200"
+				 text="This sample shows how you can create a custom layout to extend the HorizontalLayout to provide
+				 baseline alignment functionality."/>
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/layouts/FlickrThumbnail.mxml b/tourdeflexmodules/src/spark/layouts/FlickrThumbnail.mxml
new file mode 100644
index 0000000..91c690d
--- /dev/null
+++ b/tourdeflexmodules/src/spark/layouts/FlickrThumbnail.mxml
@@ -0,0 +1,80 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s: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" click="itemrenderer1_clickHandler(event)">
+
+     <fx:Script>
+        <![CDATA[
+            import spark.components.supportClasses.GroupBase;
+            import spark.effects.Animate;
+            import spark.effects.animation.MotionPath;
+            import spark.effects.animation.SimpleMotionPath;
+            protected function itemrenderer1_clickHandler(event:MouseEvent):void
+            {
+                var g:GroupBase = parent as GroupBase;
+                var p:Point = g.layout.getScrollPositionDeltaToElement(this.itemIndex);
+                if (p)
+                {
+                    var startX:Number = g.horizontalScrollPosition;
+                    var startY:Number = g.verticalScrollPosition;
+                    var anim:Animate = new Animate();
+                    anim.motionPaths = new <MotionPath>[
+                        new SimpleMotionPath("horizontalScrollPosition", startX, startX + p.x, 500),
+                        new SimpleMotionPath("verticalScrollPosition", startY, startY + p.y, 500)
+                    ];
+                    
+                    var interpolator:NumberInterpolatorWrapping = new NumberInterpolatorWrapping(0, g.contentWidth - g.width);
+                    var scrollLength:Number = interpolator.getLength(startX, startX + p.x);
+                    anim.interpolator = interpolator;
+                    anim.duration = Math.max(550, Math.min(2500, scrollLength * 2));
+                    
+                    anim.play([g]);
+                }
+            }
+        ]]>
+    </fx:Script>
+
+	
+	<s:states>
+	    <s:State name="normal"/>
+        <s:State name="hovered"/>
+        <s:State name="selected"/>
+	</s:states>
+	
+    <s:Rect id="border" left="0" right="0" top="0" bottom="0">
+        <s:fill>
+            <s:SolidColor color="0xDFDFDF" color.hovered="0xFF0000" color.selected="0x00FF00"/>
+        </s:fill>
+    </s:Rect>
+
+	<s:Group left="1" right="1" top="1" bottom="1">
+    	<s:layout>
+    	    <s:VerticalLayout horizontalAlign="center"/>
+    	</s:layout>
+    	
+    	<mx:Image 
+    		width="75" height="75"
+    		source="{data.thumbnail.url}" />
+    	<s:Label text="{data.credit}" maxWidth="100" textAlign="center"/>
+    </s:Group>
+	
+</s:ItemRenderer>
+
diff --git a/tourdeflexmodules/src/spark/layouts/FlowLayout1.as b/tourdeflexmodules/src/spark/layouts/FlowLayout1.as
new file mode 100644
index 0000000..9462285
--- /dev/null
+++ b/tourdeflexmodules/src/spark/layouts/FlowLayout1.as
@@ -0,0 +1,195 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package
+{
+import mx.core.ILayoutElement;
+
+import spark.components.supportClasses.GroupBase;
+import spark.layouts.supportClasses.LayoutBase;
+
+public class FlowLayout1 extends LayoutBase
+{
+    
+    //---------------------------------------------------------------
+    //
+    //  Class properties
+    //
+    //---------------------------------------------------------------
+    
+    //---------------------------------------------------------------
+    //  horizontalGap
+    //---------------------------------------------------------------
+
+    private var _horizontalGap:Number = 10;
+
+    public function set horizontalGap(value:Number):void
+    {
+        _horizontalGap = value;
+        
+        // We must invalidate the layout
+        var layoutTarget:GroupBase = target;
+        if (layoutTarget)
+            layoutTarget.invalidateDisplayList();
+    }
+    
+    //---------------------------------------------------------------
+    //  verticalAlign
+    //---------------------------------------------------------------
+
+    private var _verticalAlign:String = "bottom";
+    
+    public function set verticalAlign(value:String):void
+    {
+        _verticalAlign = value;
+        
+        // We must invalidate the layout
+        var layoutTarget:GroupBase = target;
+        if (layoutTarget)
+            layoutTarget.invalidateDisplayList();
+    }
+    
+	//---------------------------------------------------------------
+	//  horizontalAlign
+	//---------------------------------------------------------------
+	
+	private var _horizontalAlign:String = "left"; // center, right
+	
+	public function set horizontalAlign(value:String):void
+	{
+		_horizontalAlign = value;
+		
+		// We must invalidate the layout
+		var layoutTarget:GroupBase = target;
+		if (layoutTarget)
+			layoutTarget.invalidateDisplayList();
+	}
+	
+    //---------------------------------------------------------------
+    //
+    //  Class methods
+    //
+    //---------------------------------------------------------------
+    
+    override public function updateDisplayList(containerWidth:Number,
+                                               containerHeight:Number):void
+    {
+        var element:ILayoutElement;
+        var layoutTarget:GroupBase = target;
+        var count:int = layoutTarget.numElements;
+        var hGap:Number = _horizontalGap;
+
+        // The position for the current element
+        var x:Number = 0;
+        var y:Number = 0;
+        var elementWidth:Number;
+        var elementHeight:Number;
+
+        var vAlign:Number = 0;
+        switch (_verticalAlign)
+        {
+            case "middle" : vAlign = 0.5; break;
+            case "bottom" : vAlign = 1; break;
+        }
+
+        // Keep track of per-row height, maximum row width
+        var maxRowWidth:Number = 0;
+
+        // loop through the elements
+        // while we can start a new row
+        var rowStart:int = 0;
+        while (rowStart < count)
+        {
+            // The row always contains the start element
+            element = useVirtualLayout ? layoutTarget.getVirtualElementAt(rowStart) :
+										 layoutTarget.getElementAt(rowStart);
+									     
+            var rowWidth:Number = element.getPreferredBoundsWidth();
+            var rowHeight:Number =  element.getPreferredBoundsHeight();
+            
+            // Find the end of the current row
+            var rowEnd:int = rowStart;
+            while (rowEnd + 1 < count)
+            {
+                element = useVirtualLayout ? layoutTarget.getVirtualElementAt(rowEnd + 1) :
+										     layoutTarget.getElementAt(rowEnd + 1);
+                
+                // Since we haven't resized the element just yet, get its preferred size
+                elementWidth = element.getPreferredBoundsWidth();
+                elementHeight = element.getPreferredBoundsHeight();
+
+                // Can we add one more element to this row?
+                if (rowWidth + hGap + elementWidth > containerWidth)
+                    break;
+
+                rowWidth += hGap + elementWidth;
+                rowHeight = Math.max(rowHeight, elementHeight);
+                rowEnd++;
+            }
+            
+			x = 0;
+			switch (_horizontalAlign)
+			{
+				case "center" : x = Math.round(containerWidth - rowWidth) / 2; break;
+				case "right" : x = containerWidth - rowWidth;
+			}
+			
+            // Keep track of the maximum row width so that we can
+            // set the correct contentSize
+            maxRowWidth = Math.max(maxRowWidth, x + rowWidth);
+
+            // Layout all the elements within the row
+            for (var i:int = rowStart; i <= rowEnd; i++) 
+            {
+                element = useVirtualLayout ? layoutTarget.getVirtualElementAt(i) : 
+											 layoutTarget.getElementAt(i);
+
+                // Resize the element to its preferred size by passing
+                // NaN for the width and height constraints
+                element.setLayoutBoundsSize(NaN, NaN);
+
+                // Find out the element's dimensions sizes.
+                // We do this after the element has been already resized
+                // to its preferred size.
+                elementWidth = element.getLayoutBoundsWidth();
+                elementHeight = element.getLayoutBoundsHeight();
+
+                // Calculate the position within the row
+                var elementY:Number = Math.round((rowHeight - elementHeight) * vAlign);
+
+                // Position the element
+                element.setLayoutBoundsPosition(x, y + elementY);
+
+                x += hGap + elementWidth;
+            }
+
+            // Next row will start with the first element after the current row's end
+            rowStart = rowEnd + 1;
+
+            // Update the position to the beginning of the row
+            x = 0;
+            y += rowHeight;
+        }
+
+        // Set the content size which determines the scrolling limits
+        // and is used by the Scroller to calculate whether to show up
+        // the scrollbars when the the scroll policy is set to "auto"
+        layoutTarget.setContentSize(maxRowWidth, y);
+    }
+}
+}
\ No newline at end of file
diff --git a/tourdeflexmodules/src/spark/layouts/HBaselineLayout.as b/tourdeflexmodules/src/spark/layouts/HBaselineLayout.as
new file mode 100644
index 0000000..5d87ce7
--- /dev/null
+++ b/tourdeflexmodules/src/spark/layouts/HBaselineLayout.as
@@ -0,0 +1,199 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package {
+
+import mx.core.ILayoutElement;
+import mx.events.PropertyChangeEvent;
+import mx.formatters.NumberBase;
+
+import spark.components.supportClasses.GroupBase;
+import spark.layouts.HorizontalLayout;
+
+public class HBaselineLayout extends HorizontalLayout
+{
+	public function HBaselineLayout()
+	{
+		super();
+	}
+
+	//----------------------------------
+	//  globalBaseline
+	//----------------------------------
+	
+	[Inspectable(category="General")]
+
+	private var _globalBaseline:Number = NaN;
+	public function get globalBaseline():Number
+	{
+		return _globalBaseline;
+	}
+
+	public function set globalBaseline(value:Number):void
+	{
+		_globalBaseline = value;
+		var target:GroupBase = this.target;
+		if (target)
+		{
+			target.invalidateSize();
+			target.invalidateDisplayList();
+		}
+	}
+
+	//----------------------------------
+	//  actualBaseline
+	//----------------------------------
+	
+	private var _actualBaseline:Number;
+	
+	[Bindable("propertyChange")]
+	[Inspectable(category="General")]
+	
+	public function get actualBaseline():Number
+	{
+		return _actualBaseline;
+	}
+	
+	private function setActualBaseline(value:Number):void
+	{
+		if (value == _actualBaseline)
+			return;
+
+		var oldValue:Number = _actualBaseline;
+		_actualBaseline = value;
+		dispatchEvent(PropertyChangeEvent.createUpdateEvent(this, "actualBaseline", oldValue, value));
+	}
+	
+	//----------------------------------
+	//  verticalAlign
+	//----------------------------------
+	
+	[Inspectable(category="General", enumeration="top,bottom,middle,justify,contentJustify,baseline", defaultValue="top")]
+	override public function get verticalAlign():String
+	{
+		return super.verticalAlign;		
+	}
+
+	/**
+	 *  @private 
+	 */
+	override public function measure():void
+	{
+		super.measure();
+		
+		var target:GroupBase = this.target;
+		if (!target || verticalAlign != "baseline")
+			return;
+		
+		measureBaseline(true /*usePreferredSize*/);
+		if (!isNaN(_globalBaseline))
+			measuredBaselineTop = _globalBaseline;
+		
+		// The measured height is the sum of the space above and below the baseline
+		if (isNaN(paddingTop))
+			measuredBaselineTop += paddingTop;
+		if (isNaN(paddingBottom))
+			measuredBaselineBottom += paddingBottom;
+		target.measuredHeight = Math.round(measuredBaselineTop + measuredBaselineBottom);
+	}
+	
+	/**
+	 *  @private 
+	 */
+	override public function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
+	{
+		super.updateDisplayList(unscaledWidth, unscaledHeight);
+		
+		var target:GroupBase = this.target;
+		if (!target || verticalAlign != "baseline")
+			return;
+
+		measureBaseline(false /*usePreferredSize*/);
+		if (!isNaN(_globalBaseline))
+			measuredBaselineTop = _globalBaseline;
+
+		if (isNaN(paddingTop))
+			measuredBaselineTop += paddingTop;
+		
+		// Adjust the position of the elements
+		var contentHeight:Number = 0;
+		var count:int = target.numElements;
+		for (var i:int = 0; i < count; i++)
+		{
+			var element:ILayoutElement = target.getElementAt(i);
+			if (!element || !element.includeInLayout)
+				continue;
+			
+			var elementBaseline:Number = element.baseline as Number;
+			if (isNaN(elementBaseline))
+				elementBaseline = 0;
+
+			var baselinePosition:Number = element.baselinePosition;
+			var y:Number = measuredBaselineTop + (elementBaseline - baselinePosition);
+			element.setLayoutBoundsPosition(element.getLayoutBoundsX(), y);
+			contentHeight = Math.max(contentHeight, element.getLayoutBoundsHeight() + y);
+		}
+
+		// Adjust the content height
+		if (isNaN(paddingBottom))
+			contentHeight += paddingBottom;
+		target.setContentSize(target.contentWidth, contentHeight);
+		
+		// Update the baseline
+		setActualBaseline(measuredBaselineTop);
+	}
+
+	private var measuredBaselineTop:Number = 0;			// How much space is needed above the baseline to fit all the elements
+	private var measuredBaselineBottom:Number = 0;		// How much space is needed below the baseline to fit all the elements
+	
+	/**
+	 *  @private 
+	 */
+	private function measureBaseline(usePreferredSize:Boolean):void
+	{
+		var elementBaseline:Number = 0; 			// The current element's explicit baseline constraint
+		var elementBaselineTop:Number = 0;			// The portiono of the current element that's above the baseline
+		var elementBaselineBottom:Number = 0;		// The portion of the current element that's below the baseline
+
+		measuredBaselineTop = 0;
+		measuredBaselineBottom = 0;
+
+		var count:int = target.numElements;
+		for (var i:int = 0; i < count; i++)
+		{
+			var element:ILayoutElement = target.getElementAt(i);
+			if (!element || !element.includeInLayout)
+				continue;
+			
+			var elementHeight:Number = usePreferredSize ? element.getPreferredBoundsHeight() :
+														  element.getLayoutBoundsHeight();
+			elementBaseline = element.baseline as Number;
+			if (isNaN(elementBaseline))
+				elementBaseline = 0;
+			
+			var baselinePosition:Number = element.baselinePosition;
+			
+			elementBaselineTop = baselinePosition - elementBaseline;
+			elementBaselineBottom = elementHeight - elementBaselineTop;
+			
+			measuredBaselineTop = Math.max(elementBaselineTop, measuredBaselineTop);
+			measuredBaselineBottom = Math.max(elementBaselineBottom, measuredBaselineBottom);
+		}
+	}
+}
+}
\ No newline at end of file
diff --git a/tourdeflexmodules/src/spark/layouts/NumberInterpolatorWrapping.as b/tourdeflexmodules/src/spark/layouts/NumberInterpolatorWrapping.as
new file mode 100644
index 0000000..8613d7b
--- /dev/null
+++ b/tourdeflexmodules/src/spark/layouts/NumberInterpolatorWrapping.as
@@ -0,0 +1,110 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package
+{
+import spark.effects.interpolation.IInterpolator;
+    
+public class NumberInterpolatorWrapping implements IInterpolator
+{
+    private var _rangeBegin:Number;
+    private var _rangeEnd:Number;
+    public function NumberInterpolatorWrapping(rangeBegin:Number, rangeEnd:Number)
+    {
+        _rangeBegin = rangeBegin;
+        _rangeEnd = rangeEnd;
+    }
+        
+    /**
+     * Returns the type that an implementor can handle
+     */
+    public function get interpolatedType():Class
+    {
+        return Number;
+    }
+    
+    /**
+     * Given an elapsed fraction of an animation between 0 and 1,
+     * and start and end values, this function returns some value
+     * based on whatever interpolation the implementor chooses to
+     * provide.
+     */
+    public function interpolate(fraction:Number, startValue:Object, endValue:Object):Object
+    {
+        if (fraction == 0)
+            return startValue;
+        else if (fraction == 1)
+            return endValue;
+        var start:Number = Number(startValue);
+        var end:Number = Number(endValue);
+
+        if (Math.abs(end - start) < Math.abs(_rangeEnd - _rangeBegin) - Math.abs(end - start))
+        {
+            return start + fraction * (end - start);
+        }
+        else
+        {
+            var result:Number;
+            if (start < end)
+            {
+                result = start - fraction * (_rangeEnd - _rangeBegin - Math.abs(start - end));
+                if (result < _rangeBegin)
+                    result += _rangeEnd - _rangeBegin;
+                return result;
+            }
+            else
+            {
+                result = start + fraction * (_rangeEnd - _rangeBegin - Math.abs(start - end));
+                if (result > _rangeEnd)
+                    result -= _rangeEnd - _rangeBegin;
+                return result;
+            }
+        }        
+    }
+    
+    public function increment(baseValue:Object, incrementValue:Object):Object
+    {
+        var result:Number = Number(baseValue) + Number(incrementValue);
+        // This won't handle situations where we're adding more than
+        // the range itself, but since this will only be called when
+        // the user submits a 'byValue' that large, it seems unlikely
+        // at the very least
+        if (result > _rangeEnd)
+            result = _rangeBegin + (result - _rangeEnd);
+        return result;
+    }
+    
+    public function decrement(baseValue:Object, decrementValue:Object):Object
+    {
+        var result:Number = Number(baseValue) - Number(decrementValue);
+        // This won't handle situations where we're subtracting more than
+        // the range itself, but since this will only be called when
+        // the user submits a 'byValue' that large, it seems unlikely
+        // at the very least
+        if (result < _rangeBegin)
+            result = _rangeEnd + (_rangeBegin - result);
+        return result;
+    }
+    
+    public function getLength(startValue:Number, endValue:Number):Number
+    {
+        return Math.min( Math.abs(startValue - endValue), Math.abs(_rangeEnd - _rangeBegin - Math.abs(startValue - endValue)));
+    }   
+
+}
+}
\ No newline at end of file
diff --git a/tourdeflexmodules/src/spark/layouts/WheelLayout.as b/tourdeflexmodules/src/spark/layouts/WheelLayout.as
new file mode 100644
index 0000000..1ce4bb6
--- /dev/null
+++ b/tourdeflexmodules/src/spark/layouts/WheelLayout.as
@@ -0,0 +1,516 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package
+{
+
+import flash.geom.Matrix;
+import flash.geom.Matrix3D;
+import flash.geom.Point;
+import flash.geom.Rectangle;
+import flash.geom.Vector3D;
+
+import mx.core.ILayoutElement;
+import mx.core.IVisualElement;
+
+import spark.components.supportClasses.GroupBase;
+import spark.core.NavigationUnit;
+import spark.layouts.supportClasses.LayoutBase;
+
+public class WheelLayout extends LayoutBase
+{
+    //--------------------------------------------------------------------------
+    //
+    //  Constructor
+    //
+    //--------------------------------------------------------------------------
+
+    public function WheelLayout()
+    {
+        super();
+    }
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Properties
+    //
+    //--------------------------------------------------------------------------
+
+    //----------------------------------
+    //  gap
+    //----------------------------------
+
+    private var _gap:Number = 0;
+
+    /**
+     *  The gap between the items
+     */
+    public function get gap():Number
+    {
+        return _gap;
+    }
+    
+    public function set gap(value:Number):void
+    {
+        _gap = value;
+        var layoutTarget:GroupBase = target;
+        if (layoutTarget)
+        {
+            layoutTarget.invalidateSize();
+            layoutTarget.invalidateDisplayList();
+        }
+    }
+    
+    //----------------------------------
+    //  axisAngle
+    //----------------------------------
+
+    /**
+     *  @private  
+     *  The total width of all items, including gap space.
+     */
+    private var _totalWidth:Number;
+
+    /**
+     *  @private  
+     *  Cache which item is currently in view, to facilitate scrollposition delta calculations
+     */
+    private var _centeredItemIndex:int = 0;
+    private var _centeredItemCircumferenceBegin:Number = 0;
+    private var _centeredItemCircumferenceEnd:Number = 0;
+    private var _centeredItemDegrees:Number = 0;
+
+    /**
+     *  The axis to tilt the 3D wheel 
+     */
+    private var _axis:Vector3D = new Vector3D(0, 1, 0.1);
+    
+    /**
+     *  The angle to tilt the axis of the wheel
+     */
+    public function set axisAngle(value:Number):void
+    {
+        _axis = new Vector3D(0, Math.cos(Math.PI * value /180), Math.sin(Math.PI * value /180));
+        var layoutTarget:GroupBase = target;
+        if (layoutTarget)
+        {
+            layoutTarget.invalidateSize();
+            layoutTarget.invalidateDisplayList();
+        }
+    }
+    
+    /**
+     *  @private 
+     *  Given the radius of the sphere, return the radius of the
+     *  projected sphere. Uses the projection matrix of the
+     *  layout target to calculate.
+     */    
+    private function projectSphere(radius:Number, radius1:Number):Number
+    {
+        var fl:Number = target.transform.perspectiveProjection.focalLength;
+        var alpha:Number = Math.asin( radius1 / (radius + fl) );
+        return fl * Math.tan(alpha) * 2;
+    }
+    
+    /**
+     *  @private
+     *  Given the totalWidth, maxHeight and maxHalfWidthDiagonal, calculate the bounds of the items
+     *  on screen.  Uses the projection matrix of the layout target to calculate. 
+     */
+    private function projectBounds(totalWidth:Number, maxWidth:Number, maxHeight:Number, maxHalfWidthDiagonal:Number):Point
+    {
+        // Use the the total width as a circumference of an imaginary circle which we will use to
+        // align the items in 3D:
+        var radius:Number = _totalWidth * 0.5 / Math.PI;
+        
+        // Now since we are going to arrange all the items along circle, middle of the item being the tangent point,
+        // we need to calculate the minimum bounding circle. It is easily calculated from the maximum width item:
+        var boundingRadius:Number = Math.sqrt(radius * radius + 0.25 * maxWidth * maxWidth);
+                                      
+        var projectedBoundsW:Number = _axis.z * _axis.z * (maxHalfWidthDiagonal + 2 * radius) + 
+                                      projectSphere(radius, boundingRadius ) * _axis.y * _axis.y;
+                                      
+        var projectedBoundsH:Number = Math.abs(_axis.z) * (maxHalfWidthDiagonal + 2 * radius) +
+                                      maxHeight * _axis.y * _axis.y;
+                                      
+        return new Point(projectedBoundsW + 10, projectedBoundsH + 10);
+    }
+
+    /**
+     *  @private 
+     *  Iterates through all the items, calculates the projected bounds on screen, updates _totalWidth member variable.
+     */    
+    private function calculateBounds():Point
+    {
+        // Calculate total width:
+        _totalWidth = 0;
+     
+        var maxHeight:Number = 0;
+        var maxWidth:Number = 0;
+        var maxD:Number = 0;
+   
+        // Add up all the widths
+        var iter:LayoutIterator = new LayoutIterator(target);
+        var el:ILayoutElement;
+        while (el = iter.nextElement())
+        {
+            var preferredWidth:Number = el.getPreferredBoundsWidth(false /*postTransform*/);
+            var preferredHeight:Number = el.getPreferredBoundsHeight(false /*postTransform*/);
+
+            // Add up item width
+            _totalWidth += preferredWidth;
+            
+            // Max up item size
+            maxWidth = Math.max(maxWidth, preferredWidth);
+            maxHeight = Math.max(maxHeight, preferredHeight);
+            
+            maxD = Math.max(maxD, Math.sqrt(preferredWidth * preferredWidth / 4 + 
+                                            preferredHeight * preferredHeight));    
+        }
+        
+        // Add up the gap
+        _totalWidth += gap * iter.numVisited;
+
+        // Project        
+        return projectBounds(_totalWidth, maxWidth, maxHeight, maxD);
+    }
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Overridden methods: LayoutBase
+    //
+    //--------------------------------------------------------------------------
+    
+    /**
+     * @private
+     */
+    override public function set target(value:GroupBase):void
+    {
+        // Make sure that if layout is swapped out, we clean up
+        if (!value && target)
+        {
+            target.maintainProjectionCenter = false;
+
+            var iter:LayoutIterator = new LayoutIterator(target);
+            var el:ILayoutElement;
+            while (el = iter.nextElement())
+            {
+                el.setLayoutMatrix(new Matrix(), false /*triggerLayout*/);
+            }
+        }
+        
+        super.target = value;
+
+        // Make sure we turn on projection the first time the layout
+        // gets assigned to the group
+        if (target)
+            target.maintainProjectionCenter = true;
+    }
+    
+    override public function measure():void
+    {
+        var bounds:Point = calculateBounds();
+        
+        target.measuredWidth = bounds.x;
+        target.measuredHeight = bounds.y;
+    }
+    
+    override public function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
+    {
+        // Get the bounds, this will also update _totalWidth
+        var bounds:Point = calculateBounds();
+
+        // Update the content size
+        target.setContentSize(_totalWidth + unscaledWidth, bounds.y); 
+        var radius:Number = _totalWidth * 0.5 / Math.PI;
+        var gap:Number = this.gap;
+        _centeredItemDegrees = Number.MAX_VALUE;
+        
+        var scrollPosition:Number = target.horizontalScrollPosition;
+        var totalWidthSoFar:Number = 0;
+        // Subtract the half width of the first element from totalWidthSoFar: 
+        var iter:LayoutIterator = new LayoutIterator(target);
+        var el:ILayoutElement = iter.nextElement();
+        if (!el)
+            return;
+        totalWidthSoFar -= el.getPreferredBoundsWidth(false /*postTransform*/) / 2;
+        
+        // Set the 3D Matrix for all the elements:
+        iter.reset();
+        while (el = iter.nextElement())
+        { 
+            // Size the item, no need to position it, since we'd set the computed matrix
+            // which defines the position.
+            el.setLayoutBoundsSize(NaN, NaN, false /*postTransform*/);
+            var elementWidth:Number = el.getLayoutBoundsWidth(false /*postTransform*/);
+            var elementHeight:Number = el.getLayoutBoundsHeight(false /*postTransform*/); 
+            var degrees:Number = 360 * (totalWidthSoFar + elementWidth/2 - scrollPosition) / _totalWidth; 
+
+            // Remember which item is centered, this is used during scrolling
+            var curDegrees:Number = degrees % 360;
+            if (Math.abs(curDegrees) < Math.abs(_centeredItemDegrees))
+            {
+                _centeredItemDegrees = curDegrees;
+                _centeredItemIndex = iter.curIndex;
+                _centeredItemCircumferenceBegin = totalWidthSoFar - gap;
+                _centeredItemCircumferenceEnd = totalWidthSoFar + elementWidth + gap;
+            }
+
+            // Calculate and set the 3D Matrix 
+            var m:Matrix3D = new Matrix3D();
+            m.appendTranslation(-elementWidth/2, -elementHeight/2 + radius * _axis.z, -radius * _axis.y );
+            m.appendRotation(-degrees, _axis);
+            m.appendTranslation(unscaledWidth/2, unscaledHeight/2, radius * _axis.y);
+            el.setLayoutMatrix3D(m, false /*triggerLayout*/);
+            
+            // Update the layer for a correct z-order
+            if (el is IVisualElement)
+                IVisualElement(el).depth = Math.abs( Math.floor(180 - Math.abs(degrees % 360)) );
+
+            // Move on to next item
+            totalWidthSoFar += elementWidth + gap;
+        }
+    }
+    
+    private function scrollPositionFromCenterToNext(next:Boolean):Number
+    {
+        var iter:LayoutIterator = new LayoutIterator(target, _centeredItemIndex);
+        var el:ILayoutElement = next ? iter.nextElementWrapped() : iter.prevElementWrapped();
+        if (!el)
+            return 0;
+        
+        var elementWidth:Number = el.getLayoutBoundsWidth(false /*postTransform*/);
+        
+        var value:Number; 
+        if (next)
+        {
+            if (_centeredItemDegrees > 0.1)
+                return (_centeredItemCircumferenceEnd + _centeredItemCircumferenceBegin) / 2;
+            
+            value = _centeredItemCircumferenceEnd + elementWidth/2;
+            if (value > _totalWidth)
+                value -= _totalWidth;
+        }
+        else
+        {
+            if (_centeredItemDegrees < -0.1)
+                return (_centeredItemCircumferenceEnd + _centeredItemCircumferenceBegin) / 2;
+
+            value = _centeredItemCircumferenceBegin - elementWidth/2;
+            if (value < 0)
+                value += _totalWidth;
+        }
+        return value;     
+    }
+    
+    override protected function scrollPositionChanged():void
+    {
+        if (target)
+            target.invalidateDisplayList();
+    }
+
+    override public function getHorizontalScrollPositionDelta(navigationUnit:uint):Number
+    {
+        var g:GroupBase = target;
+        if (!g || g.numElements == 0)
+            return 0;
+            
+        var value:Number;     
+
+        switch (navigationUnit)
+        {
+            case NavigationUnit.LEFT:
+            {
+                value = target.horizontalScrollPosition - 30;
+                if (value < 0)
+                    value += _totalWidth;
+                return value - target.horizontalScrollPosition;
+            }
+                
+            case NavigationUnit.RIGHT:
+            {
+                value = target.horizontalScrollPosition + 30;
+                if (value > _totalWidth)
+                    value -= _totalWidth;
+                return value - target.horizontalScrollPosition;
+            }
+                
+            case NavigationUnit.PAGE_LEFT:
+                return scrollPositionFromCenterToNext(false) - target.horizontalScrollPosition;
+                
+            case NavigationUnit.PAGE_RIGHT:
+                return scrollPositionFromCenterToNext(true) - target.horizontalScrollPosition;
+                
+            case NavigationUnit.HOME: 
+                return 0;
+                
+            case NavigationUnit.END: 
+                return _totalWidth;
+                
+            default:
+                return 0;
+        }       
+    }
+    
+    /**
+     *  @private
+     */ 
+    override public function getScrollPositionDeltaToElement(index:int):Point
+    {
+        var layoutTarget:GroupBase = target;
+        if (!layoutTarget)
+            return null;
+       
+        var gap:Number = this.gap;     
+        var totalWidthSoFar:Number = 0;
+        var iter:LayoutIterator = new LayoutIterator(layoutTarget);
+
+        var el:ILayoutElement = iter.nextElement();
+        if (!el)
+            return null;
+        totalWidthSoFar -= el.getLayoutBoundsWidth(false /*postTransform*/) / 2;
+
+        iter.reset();
+        while (null != (el = iter.nextElement()) && iter.curIndex <= index)
+        {    
+            var elementWidth:Number = el.getLayoutBoundsWidth(false /*postTransform*/);
+            totalWidthSoFar += gap + elementWidth;
+        }
+        return new Point(totalWidthSoFar - elementWidth / 2 -gap - layoutTarget.horizontalScrollPosition, 0);
+    }
+
+    /**
+     *  @private
+     */ 
+    override public function updateScrollRect(w:Number, h:Number):void
+    {
+        var g:GroupBase = target;
+        if (!g)
+            return;
+            
+        if (clipAndEnableScrolling)
+        {
+            // Since scroll position is reflected in our 3D calculations,
+            // always set the top-left of the srcollRect to (0,0).
+            g.scrollRect = new Rectangle(0, verticalScrollPosition, w, h);
+        }
+        else
+            g.scrollRect = null;
+    } 
+}
+}
+
+import mx.core.ILayoutElement;
+
+import spark.components.supportClasses.GroupBase;
+    
+class LayoutIterator 
+{
+    private var _curIndex:int;
+    private var _numVisited:int = 0;
+    private var totalElements:int;
+    private var _target:GroupBase;
+    private var _loopIndex:int = -1;
+	private var _useVirtual:Boolean;
+
+    public function get curIndex():int
+    {
+        return _curIndex;
+    }
+
+    public function LayoutIterator(target:GroupBase, index:int=-1):void
+    {
+        totalElements = target.numElements;
+        _target = target;
+        _curIndex = index;
+		_useVirtual = _target.layout.useVirtualLayout;
+    }
+
+    public function nextElement():ILayoutElement
+    {
+        while (_curIndex < totalElements - 1)
+        {
+            var el:ILayoutElement = _useVirtual ? _target.getVirtualElementAt(++_curIndex) :
+										 		  _target.getElementAt(++_curIndex);
+            if (el && el.includeInLayout)
+            {
+                ++_numVisited;
+                return el;
+            }
+        }
+        return null;
+    }
+    
+    public function prevElement():ILayoutElement
+    {
+        while (_curIndex > 0)
+        {
+            var el:ILayoutElement = _useVirtual ? _target.getVirtualElementAt(--_curIndex) :
+												  _target.getElementAt(--_curIndex);
+            if (el && el.includeInLayout)
+            {
+                ++_numVisited;
+                return el;
+            }
+        }
+        return null;
+    }
+
+    public function nextElementWrapped():ILayoutElement
+    {
+        if (_loopIndex == -1)
+            _loopIndex = _curIndex;
+        else if (_loopIndex == _curIndex)
+            return null;
+
+        var el:ILayoutElement = nextElement();
+        if (el)
+            return el;
+        else if (_curIndex == totalElements - 1)
+            _curIndex = -1;
+        return nextElement();
+    }
+    
+    public function prevElementWrapped():ILayoutElement
+    {
+        if (_loopIndex == -1)
+            _loopIndex = _curIndex;
+        else if (_loopIndex == _curIndex)
+            return null;
+
+        var el:ILayoutElement = prevElement();
+        if (el)
+            return el;
+        else if (_curIndex == 0)
+            _curIndex = totalElements;
+        return prevElement();
+    }
+
+    public function reset():void
+    {
+        _curIndex = -1;
+        _numVisited = 0;
+        _loopIndex = -1;
+    }
+
+    public function get numVisited():int
+    {
+        return _numVisited;
+    }
+}
+    
diff --git a/tourdeflexmodules/src/spark/layouts/assets/ApacheFlexIcon.png b/tourdeflexmodules/src/spark/layouts/assets/ApacheFlexIcon.png
new file mode 100644
index 0000000..e68d831
--- /dev/null
+++ b/tourdeflexmodules/src/spark/layouts/assets/ApacheFlexIcon.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/layouts/assets/xdslider.png b/tourdeflexmodules/src/spark/layouts/assets/xdslider.png
new file mode 100644
index 0000000..8d49a7a
--- /dev/null
+++ b/tourdeflexmodules/src/spark/layouts/assets/xdslider.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/layouts/data/catalog.xml b/tourdeflexmodules/src/spark/layouts/data/catalog.xml
new file mode 100644
index 0000000..7fbf54e
--- /dev/null
+++ b/tourdeflexmodules/src/spark/layouts/data/catalog.xml
@@ -0,0 +1,179 @@
+<?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.
+
+-->
+
+<catalog>
+
+    <product productId="1">
+        <name>Phone A</name>
+        <color></color>
+        <description>Easy to use without sacrificing style, this phone offers functional voice communication supported by text messaging, multimedia messaging, mobile internet, games and more.</description>
+        <price>99.99</price>
+        <series>6000</series>
+        <triband>false</triband>
+        <camera>false</camera>
+        <video>false</video>
+        <highlight1>MMS</highlight1>
+		<highlight2>Large color display</highlight2>
+    </product>
+
+    <product productId="2">
+        <name>Phone B</name>
+        <color>Blue</color>
+        <description>Light up the night with a glow-in-the-dark cover - when it&#39;s charged with light you can easily find your phone in the dark. When you get a call, this phone flashes in tune with your ringing tone. And when you snap on a gaming cover, you&#39;ll get luminescent light effects in time to the gaming action.</description>
+        <price>139</price>
+        <series>3000</series>
+        <triband>true</triband>
+        <camera>false</camera>
+        <video>false</video>
+        <highlight1>Glow-in-the-dark</highlight1>
+		<highlight2>Flashing lights</highlight2>
+    </product>
+
+    <product productId="3">
+        <name>Phone C</name>
+        <color>Pink</color>
+        <description>Light up the night with a glow-in-the-dark cover - when it&#39;s charged with light you can easily find your phone in the dark. When you get a call, this phone flashes in tune with your ringing tone. And when you snap on a gaming cover, you&#39;ll get luminescent light effects in time to the gaming action.</description>
+        <price>139</price>
+        <series>3000</series>
+        <triband>true</triband>
+        <camera>false</camera>
+        <video>false</video>
+        <highlight1>Glow-in-the-dark</highlight1>
+		<highlight2>Flashing lights</highlight2>
+    </product>
+
+    <product productId="4">
+        <name>Phone D</name>
+        <color></color>
+        <description>Designed for both business and pleasure, this phone offers a pleasing mix of features. Enclosed within its chic, compact body, you will discover the benefits of tri-band compatibility, a color screen, MMS, XHTML browsing, cheerful screensavers, and much more.</description>
+        <price>159.99</price>
+        <series>3000</series>
+        <triband>true</triband>
+        <camera>false</camera>
+        <video>false</video>
+        <highlight1>Multimedia messaging</highlight1>
+		<highlight2>Animated screensavers</highlight2>
+    </product>
+
+    <product productId="5">
+        <name>Phone E</name>
+        <color></color>
+        <description>This phone is a fresh new cut on some familiar ideas - animate your MMS messages with cute characters, see the music with lights that flash in time with your ringing tone, download wallpapers and screensavers with matching color schemes for the interface.</description>
+        <price>159.99</price>
+        <series>3000</series>
+        <triband>false</triband>
+        <camera>true</camera>
+        <video>false</video>
+        <highlight1>MIDI tones</highlight1>
+		<highlight2>Cut-out covers</highlight2>
+    </product>
+
+    <product productId="6">
+        <name>Phone F</name>
+        <color></color>
+        <description>Messaging is more personal, versatile and fun with this camera phone.  Capture experiences as soon as you see them and send the photos you take to you friends and family.</description>
+        <price>199.99</price>
+        <series>3000</series>
+        <triband>false</triband>
+        <camera>true</camera>
+        <video>true</video>
+        <highlight1>Infrared or Bluetooth</highlight1>
+		<highlight2>Built-in XHTML browser</highlight2>
+    </product>
+
+    <product productId="7">
+        <name>Phone G</name>
+        <color></color>
+        <description>Messaging just got a whole lot smarter. This messaging device puts the tools you need for rich communication - full messaging keyboard, digital camera, mobile email, MMS, SMS, and Instant Messaging - right at your fingertips, in a small, sleek device.</description>
+        <price>299.99</price>
+        <series>6000</series>
+        <triband>true</triband>
+        <camera>true</camera>
+        <video>false</video>
+        <highlight1>Messaging keyboard</highlight1>
+		<highlight2>Bluetooth</highlight2>
+    </product>
+
+    <product productId="8">
+        <name>Phone F</name>
+        <color></color>
+        <description>Classic business tools meet your creative streak in this imaging smartphone. It has a Web browser with PDF support, document viewer applications for email attachments, a direct printing application, and a megapixel still camera that also shoots up to 10 minutes of video.</description>
+        <price>309.99</price>
+        <series>6000</series>
+        <triband>false</triband>
+        <camera>true</camera>
+        <video>true</video>
+        <highlight1>PDF support</highlight1>
+		<highlight2>4x digital zoom</highlight2>
+    </product>
+
+    <product productId="9">
+        <name>Phone G</name>
+        <color></color>
+        <description>Shoot a basket. Shoot a movie. This video phone is the perfect way to save and share life&#39;s playful moments. Feel connected.</description>
+        <price>329.99</price>
+        <series>6000</series>
+        <triband>false</triband>
+        <camera>true</camera>
+        <video>true</video>
+        <highlight1>Bluetooth technology</highlight1>
+		<highlight2>Up to 10 minutes video</highlight2>
+    </product>
+
+    <product productId="10">
+        <name>Phone H</name>
+        <color>Silver</color>
+        <description>Get creative with this smartphone. Create your own ringing tones, print your mobile images, play multiplayer games over a wireless Bluetooth connection, and browse HTML and xHTML Web pages. Plus, with a 32 MB MMC card and expandable memory, you&#39;ll have lots of space to be creative.</description>
+        <price>369</price>
+        <series>3000</series>
+        <triband>false</triband>
+        <camera>true</camera>
+        <video>true</video>
+        <highlight1>1.3 megapixel</highlight1>
+		<highlight2>Expandable memory</highlight2>
+    </product>
+
+    <product productId="11">
+        <name>Phone I</name>
+        <color>Bronze</color>
+        <description>Get creative with this smartphone. Create your own ringing tones, print your mobile images, play multiplayer games over a wireless Bluetooth connection, and browse HTML and xHTML Web pages. Plus, with a 32 MB MMC card and expandable memory, you&#39;ll have lots of space to be creative.</description>
+        <price>369</price>
+        <series>3000</series>
+        <triband>false</triband>
+        <camera>true</camera>
+        <video>true</video>
+        <highlight1>1.3 megapixel</highlight1>
+		<highlight2>Expandable memory</highlight2>
+    </product>
+
+    <product productId="12">
+        <name>Phone J</name>
+        <color></color>
+        <description>Not only is this imaging smartphone have a 1.3 megapixel digital imaging device (1.3 megapixel camera sensor, effective resolution 1.23 megapixels for image capture, image size 1280 x 960 pixels), it&#39;s also a portable office and a modern rich-media machine.</description>
+        <price>379</price>
+        <series>6000</series>
+        <triband>false</triband>
+        <camera>true</camera>
+        <video>true</video>
+        <highlight1>1.3 megapixel</highlight1>
+		<highlight2>6x smooth digital zoom</highlight2>
+    </product>
+
+</catalog>
\ No newline at end of file
diff --git a/tourdeflexmodules/src/spark/layouts/layouts/FilteredTileLayout.as b/tourdeflexmodules/src/spark/layouts/layouts/FilteredTileLayout.as
new file mode 100644
index 0000000..6c01c2c
--- /dev/null
+++ b/tourdeflexmodules/src/spark/layouts/layouts/FilteredTileLayout.as
@@ -0,0 +1,260 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 layouts
+{
+	import mx.collections.ICollectionView;
+	import mx.effects.Parallel;
+	import mx.events.EffectEvent;
+	
+	import spark.components.supportClasses.GroupBase;
+	import spark.components.supportClasses.ItemRenderer;
+	import spark.effects.Fade;
+	import spark.effects.Move;
+	import spark.layouts.supportClasses.LayoutBase;
+
+	public class FilteredTileLayout extends LayoutBase
+	{
+		public var filteredItems:ICollectionView;
+		
+		public var fadeOutDuration:Number = 400;
+		
+		public var moveDuration:Number = 400;
+		
+		public var fadeInDuration:Number = 400;
+
+		private var _target:GroupBase;
+
+		private var _containerWidth:Number;
+		
+		private var fadeOutEffects:Parallel;
+		private var fadeInEffects:Parallel;
+		private var moveEffects:Parallel;
+		
+		private var _horizontalGap:Number = 10;
+
+		private var _verticalGap:Number = 10;
+
+		private var _tileWidth:Number = 100;
+
+		private var _tileHeight:Number = 100;
+
+		public function set	horizontalGap(value:Number):void
+		{
+			_horizontalGap = value;
+			if (target)	target.invalidateDisplayList();
+		}
+
+		public function set	verticalGap(value:Number):void
+		{
+			_verticalGap = value;
+			if (target)	target.invalidateDisplayList();
+		}
+		
+		public function set	tileWidth(value:Number):void
+		{
+			_tileWidth = value;
+			if (target)	target.invalidateDisplayList();
+		}
+		
+		public function set	tileHeight(value:Number):void
+		{
+			_tileHeight = value;
+			if (target)	target.invalidateDisplayList();
+		}
+		
+		public function filter():void
+		{
+			// Prevent updateDisplayList() from being executed while we are animating tiles
+			_target.autoLayout = false;
+
+			// No filter has been applied. Keep showing all the items in the dataProvider
+			if (filteredItems == null) return;
+			
+			var count:int = _target.numElements;
+			
+			// No items in the dataProvider: Nothing to show.
+			if (count == 0) return;
+			
+			var x:int = 0;
+			var y:int = 0;
+			
+			fadeOutEffects = new Parallel();
+			fadeInEffects = new Parallel();
+			moveEffects = new Parallel();
+
+			for (var i:int = 0; i < count; i++)
+			{
+				var itemRenderer:ItemRenderer = _target.getElementAt(i) as ItemRenderer;
+				
+				if (filteredItems.contains(itemRenderer.data))
+				{
+					// The element is part of the selection: calculate its x and y values
+					if (x + _tileWidth > _containerWidth)
+					{
+						x = 0;
+						y += _tileHeight + _verticalGap;
+					} 
+
+					if (itemRenderer.visible == false)
+					{
+						trace("FadeIn: " + itemRenderer.data.name);
+						// if the element was hidden, set its new x and y values (without Move animation) and register it for FadeIn animation
+						itemRenderer.visible = true;
+						itemRenderer.setLayoutBoundsPosition(x, y);
+						var fadeIn:Fade = new Fade(itemRenderer);
+						fadeIn.alphaTo = 1;
+						fadeInEffects.addChild(fadeIn);
+					}  
+					else
+					{
+						trace("Move: " + itemRenderer.data.name);
+						// the element was already visible: register it for Move animation
+						if (itemRenderer.x != x || itemRenderer.y != y)
+						{
+							var move:Move = new Move(itemRenderer);
+							move.xTo = x;
+							move.yTo = y;
+							moveEffects.addChild(move);
+						}
+					}
+					x += _tileWidth + _horizontalGap;
+				}					
+				else
+				{
+					if (itemRenderer.alpha == 1)
+					{
+						trace("FadeOut: " + itemRenderer.data.name);
+						// the element is filtered out: register it for FadeOut animation
+						var fadeOut:Fade = new Fade(itemRenderer);
+						fadeOut.alphaTo = 0;
+						fadeOutEffects.addChild(fadeOut);
+					}
+				}
+			}
+			fadeOutTiles();			
+		}
+
+		private function fadeOutTiles(event:EffectEvent = null):void
+		{
+			trace("fadeOutTiles");
+			if (fadeOutEffects.children.length > 0) {
+				fadeOutEffects.duration = fadeOutDuration;
+				fadeOutEffects.addEventListener(EffectEvent.EFFECT_END, moveTiles)
+				fadeOutEffects.play();
+			}
+			else
+			{
+				moveTiles();	
+			}
+		}
+		
+		private function moveTiles(event:EffectEvent = null):void
+		{
+			// Undesired behaviors may happen if we leave tiles with alpha=0 in the display list while performing other animations 
+			setInvisibleTiles();
+			
+			trace("moveTiles");
+			if (moveEffects.children.length > 0) {
+				moveEffects.duration = moveDuration;
+				moveEffects.addEventListener(EffectEvent.EFFECT_END, fadeInTiles)
+				moveEffects.play();
+			}
+			else
+			{
+				fadeInTiles();	
+			}
+		}
+
+		private function fadeInTiles(event:EffectEvent = null):void
+		{
+			trace("fadeInTiles");
+			if (fadeInEffects.children.length > 0) {
+				fadeInEffects.duration = fadeInDuration;
+				moveEffects.addEventListener(EffectEvent.EFFECT_END, fadeInTilesEnd)
+				fadeInEffects.play();
+			}
+			else
+			{
+				fadeInTilesEnd();	
+			}
+		}
+		
+		private function fadeInTilesEnd(event:EffectEvent = null):void
+		{
+			_target.autoLayout = true; 
+		}
+		
+		private function setInvisibleTiles():void
+		{
+			var count:int = _target.numElements;
+			
+			if (count == 0) return;
+			
+			for (var i:int = 0; i < count; i++)
+			{
+				var itemRenderer:ItemRenderer = _target.getElementAt(i) as ItemRenderer;
+				if (!filteredItems.contains(itemRenderer.data))
+				{	
+					trace("Removing from layout: " + itemRenderer.data.name);					
+					itemRenderer.visible = false;
+				}		
+			}
+		}
+	
+		override public function updateDisplayList(containerWidth:Number, containerHeight:Number):void
+		{
+			trace("updateDisplaylist");
+
+			_target = target;
+			_containerWidth = containerWidth;
+
+			var count:int = target.numElements;
+			if (count == 0) return;
+			
+			var x:int=0;
+			var y:int=0;
+			
+			for (var i:int = 0; i < count; i++)
+			{
+				var itemRenderer:ItemRenderer = _target.getElementAt(i) as ItemRenderer;
+
+				itemRenderer.setLayoutBoundsSize(_tileWidth, _tileHeight);
+				
+				if (filteredItems && filteredItems.contains(itemRenderer.data))
+				{
+					// The element is part of the selection: calculate its x and y values
+					if (x + _tileWidth > containerWidth)
+					{
+						x = 0;
+						y += _tileHeight + _verticalGap;
+					} 
+					itemRenderer.setLayoutBoundsPosition(x, y);	
+					itemRenderer.alpha = 1;
+					x += _tileWidth + _horizontalGap;
+				}					
+				else
+				{
+					itemRenderer.alpha = 0;
+				}
+				
+			}
+		}
+
+	}
+}
\ No newline at end of file
diff --git a/tourdeflexmodules/src/spark/layouts/renderers/PhoneRenderer.mxml b/tourdeflexmodules/src/spark/layouts/renderers/PhoneRenderer.mxml
new file mode 100644
index 0000000..a6080c0
--- /dev/null
+++ b/tourdeflexmodules/src/spark/layouts/renderers/PhoneRenderer.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: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" width="100" height="100" clipAndEnableScrolling="false"
+				depth="0" depth.hovered="1">
+	
+	<fx:Declarations>
+		<mx:CurrencyFormatter id="cf"/>
+	</fx:Declarations>
+	
+	<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}" angleXFrom="0" angleXTo="0" angleZFrom="0" autoCenterTransform="true" angleYTo="360" angleYFrom="0" autoCenterProjection="true" angleZTo="0"/>
+					<s:Fade target="{group}" startDelay="320"/>
+				</s:Parallel>
+		</s:Transition>
+	</s:transitions>
+	
+	<mx:Image id="image" source="@Embed('../assets/ApacheFlexIcon.png')" horizontalCenter="0" />
+
+	<s:Group id="group" top="0" bottom="0" left="0" right="0" visible.normal="false">
+
+		<s:Rect id="rect" left="0" right="0" top="0" bottom="0" radiusX="4" radiusY="4">
+			<s:fill>
+				<s:SolidColor color="black" alpha="0.5"/>
+			</s:fill>
+		</s:Rect>
+		
+		<s:Label text="{data.name}" verticalCenter="-20" horizontalCenter="0" color="white"/> 
+		<s:Label text="{data.color}" verticalCenter="0" horizontalCenter="0" color="white"/> 
+		<s:Label text="{cf.format(data.price)}" verticalCenter="20" horizontalCenter="0" color="white"/>
+		
+	</s:Group>
+
+</s:ItemRenderer>
diff --git a/tourdeflexmodules/src/spark/modules/Module1.mxml b/tourdeflexmodules/src/spark/modules/Module1.mxml
new file mode 100644
index 0000000..1ca400e
--- /dev/null
+++ b/tourdeflexmodules/src/spark/modules/Module1.mxml
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml">
+    
+    <mx:Label text="this is module 1"/>
+    
+</mx:Module>
diff --git a/tourdeflexmodules/src/spark/modules/Module2.mxml b/tourdeflexmodules/src/spark/modules/Module2.mxml
new file mode 100644
index 0000000..948fac5
--- /dev/null
+++ b/tourdeflexmodules/src/spark/modules/Module2.mxml
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml">
+    
+    <mx:Label text="this is module 2"/>
+    
+</mx:Module>
diff --git a/tourdeflexmodules/src/spark/modules/ModuleExample.mxml b/tourdeflexmodules/src/spark/modules/ModuleExample.mxml
new file mode 100644
index 0000000..681f37a
--- /dev/null
+++ b/tourdeflexmodules/src/spark/modules/ModuleExample.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">
+	
+	<fx:Script>
+		<![CDATA[
+			
+			private function loadModule(title:String, url:String):void
+			{
+				var p:ModulePanel = new ModulePanel();
+				p.title = title;
+				p.url = url;
+				hBox.addChild(p);
+			}
+			
+		]]>
+	</fx:Script>
+	
+	<fx:Declarations>
+		<fx:Component className="ModulePanel">
+			<s:Panel>
+				<fx:Script>
+					<![CDATA[
+						[Bindable]
+						public var url:String;
+					]]>
+				</fx:Script>
+				
+				<s:layout>
+					<s:VerticalLayout horizontalAlign="center" />
+				</s:layout>
+				
+				<mx:ModuleLoader id="ml" url="{url}" width="100%" height="100%">
+					<mx:unload>
+						if(parent != null)
+						{
+							parent.removeChild(this);
+						}
+					</mx:unload>
+				</mx:ModuleLoader>
+				<mx:ControlBar>
+					<s:Button label="unload" click="ml.unloadModule()"/>
+				</mx:ControlBar>
+			</s:Panel>
+		</fx:Component>
+	</fx:Declarations>
+	
+	<s:layout>
+		<s:VerticalLayout horizontalAlign="center"/>
+	</s:layout>
+	
+	<s:Panel title="Module Sample" width="100%" height="100%">
+
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+		</s:layout>
+		
+		<s:Button label="Load Module 1" click="loadModule('module 1', './spark/modules/Module1.swf')"/>
+		<s:Button label="Load Module 2" click="loadModule('module 2', './spark/modules/Module2.swf')"/>
+	
+		<mx:HBox id="hBox" />
+		
+	</s:Panel> 
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/modules/TDFGradientBackgroundSkin.mxml b/tourdeflexmodules/src/spark/modules/TDFGradientBackgroundSkin.mxml
new file mode 100644
index 0000000..fe2a943
--- /dev/null
+++ b/tourdeflexmodules/src/spark/modules/TDFGradientBackgroundSkin.mxml
@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
+			 xmlns:mx="library://ns.adobe.com/flex/mx" 
+			 xmlns:s="library://ns.adobe.com/flex/spark">
+	
+	<fx:Metadata>
+		[HostComponent("spark.components.Application")]
+	</fx:Metadata> 
+	
+	<s:states>
+		<s:State name="normal" />
+		<s:State name="disabled" />
+	</s:states>
+	
+	<s:layout>
+		<s:BasicLayout />
+	</s:layout>
+	
+	<s:Rect id="bg" width="100%" height="100%">
+		<s:fill>
+			<s:LinearGradient rotation="90">
+				<s:entries>
+					<s:GradientEntry color="0x000000" ratio="0.00" />
+					<s:GradientEntry color="0x323232" ratio="1.0" />
+				</s:entries>
+			</s:LinearGradient>    
+		</s:fill>
+	</s:Rect>
+	
+	<s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" />
+</s:SparkSkin>
diff --git a/tourdeflexmodules/src/spark/other/BidirectionalBinding1Example.mxml b/tourdeflexmodules/src/spark/other/BidirectionalBinding1Example.mxml
new file mode 100644
index 0000000..a84a357
--- /dev/null
+++ b/tourdeflexmodules/src/spark/other/BidirectionalBinding1Example.mxml
@@ -0,0 +1,42 @@
+<?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">
+	
+	<s:Panel width="100%" height="100%"
+			 title="Bidirectional Binding 1"
+			 horizontalCenter="0"
+			 >
+		<s:Label top="10" left="15" verticalAlign="justify" width="200"
+					  text="Flex 4 interprets the @ binding syntax differently than Flex 3 in 
+that it will now represent a two-way binding. In this example, the text2 TextInput is bound to text1 bidirectionally, 
+so any change to the text2 value will also update the text1 value. "/>
+			
+			<s:VGroup horizontalCenter="15" top="40">
+				<s:Label text="Enter Text:"/>
+				<s:TextInput id="text1" widthInChars="20" />
+				<s:TextInput id="text2" color="0xFF3366" widthInChars="20" text="@{text1.text}"/>
+			</s:VGroup>	
+		
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/other/BidirectionalBinding2Example.mxml b/tourdeflexmodules/src/spark/other/BidirectionalBinding2Example.mxml
new file mode 100644
index 0000000..de03192
--- /dev/null
+++ b/tourdeflexmodules/src/spark/other/BidirectionalBinding2Example.mxml
@@ -0,0 +1,101 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s: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 mx.events.ListEvent;
+			
+			//[Bindable]
+			//private var contact:Contact = new Contact();
+			
+			protected function submitBtn_clickHandler(event:MouseEvent):void
+			{
+				// Note: this sample uses bidirectional data binding, so we do not have to 
+				// explicitly set the contact fields to save them! 
+				if (!contacts.contains(contact))
+					contacts.addItem(contact);
+				contact = new Contact();
+			}
+
+			protected function dg_itemClickHandler(event:ListEvent):void
+			{
+				contact = dg.selectedItem as Contact;
+			}
+
+		]]>
+	</fx:Script>
+
+	<fx:Declarations>
+		<s:ArrayCollection id="contacts"/>
+		<local:Contact id="contact"/>
+	</fx:Declarations>
+	
+	<s:Panel width="100%" height="100%" title="TabBar Sample with Bidirectional Binding">
+		
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<s:TabBar id="tabs" dataProvider="{vs}" cornerRadius="4"/>
+		<mx:ViewStack id="vs" width="95%" height="85%" left="8" y="23">
+			<s:NavigatorContent label="Contact Info"  width="100%" height="100%">
+				<s:BorderContainer width="100%" height="100%" dropShadowVisible="false">
+					<mx:Form id="contactForm" defaultButton="{submitBtn}" width="100%" height="100%">
+						<mx:FormItem label="Name:">
+							<s:TextInput id="nameTxt" text="@{contact.name}"/>
+						</mx:FormItem>
+						<mx:FormItem label="Address:">
+							<s:TextInput id="address" text="@{contact.address}"/>
+						</mx:FormItem>
+						<mx:FormItem label="City:">
+							<s:TextInput id="city" text="@{contact.city}"/>
+						</mx:FormItem>
+						<mx:FormItem label="State:">
+							<s:TextInput id="state" text="@{contact.state}"/>
+						</mx:FormItem>
+						<mx:FormItem label="Zip:">
+							<s:TextInput id="zip" text="@{contact.zip}" maxChars="5"/>
+						</mx:FormItem>
+						<mx:FormItem>
+							<s:Button id="submitBtn" label="Submit" click="submitBtn_clickHandler(event)"/>
+						</mx:FormItem>
+					</mx:Form>
+				</s:BorderContainer>
+			</s:NavigatorContent>
+			<s:NavigatorContent label="Contact List" width="100%" height="100%" >
+				<s:BorderContainer width="100%" height="100%" dropShadowVisible="false">
+					<mx:DataGrid id="dg" dataProvider="{contacts}" x="5" y="5"  doubleClickEnabled="true" 
+								 doubleClick="{tabs.selectedIndex=0}" itemClick="dg_itemClickHandler(event)">
+						<mx:columns>
+							<mx:DataGridColumn headerText="Name" dataField="name"/>
+							<mx:DataGridColumn headerText="Address" dataField="address"/>
+							<mx:DataGridColumn headerText="City" dataField="city"/>
+							<mx:DataGridColumn headerText="State" dataField="state"/>
+							<mx:DataGridColumn headerText="Zip" dataField="zip"/>
+						</mx:columns>
+					</mx:DataGrid>
+				</s:BorderContainer>
+			</s:NavigatorContent>
+		</mx:ViewStack>
+	</s:Panel>
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/other/Contact.as b/tourdeflexmodules/src/spark/other/Contact.as
new file mode 100644
index 0000000..2cc13c9
--- /dev/null
+++ b/tourdeflexmodules/src/spark/other/Contact.as
@@ -0,0 +1,37 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 Contact
+	{
+		public var name:String;
+		public var phone:String;
+		public var email:String;
+		public var address:String;
+		public var city:String;
+		public var state:String;
+		public var zip:String;
+		
+		
+		public function Contact()
+		{
+		}
+	}
+}
\ No newline at end of file
diff --git a/tourdeflexmodules/src/spark/other/ControllingViewportExample.mxml b/tourdeflexmodules/src/spark/other/ControllingViewportExample.mxml
new file mode 100644
index 0000000..f6205b3
--- /dev/null
+++ b/tourdeflexmodules/src/spark/other/ControllingViewportExample.mxml
@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s: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">
+	
+	<!-- To show only a certain area of a viewport, you can control it by setting the size of the viewport container
+	     to be less than the size of the item you want to clip, and set  the following parameters, where the scroll
+		 positions specify which part of the viewport to show (from container location 0,0)-->
+	
+	<s:Panel title="Controlling Viewport Sample" width="100%" height="100%">
+		
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+		</s:layout>
+		
+		<s:Label text="This image is clipped with the viewport position set:"/>
+		<s:Group width="100" height="100"
+				 horizontalScrollPosition="20" verticalScrollPosition="30"
+				 clipAndEnableScrolling="true"> 
+			<s:BitmapImage source="@Embed(source='assets/ApacheFlexLogo.png')"/> 
+		</s:Group>  
+		<s:Label text="This image is scrollable with the viewport position set:"/>
+		<s:Scroller hasFocusableChildren="true" tabEnabled="false">
+				<s:VGroup paddingLeft="2" paddingRight="2" paddingTop="2" paddingBottom="2" 
+						  width="100" height="100" horizontalScrollPosition="20" verticalScrollPosition="30">
+					<s:BitmapImage source="@Embed(source='assets/ApacheFlexLogo.png')"/>
+				</s:VGroup>	
+		</s:Scroller>
+		
+	</s:Panel>
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/other/Cursor1Example.mxml b/tourdeflexmodules/src/spark/other/Cursor1Example.mxml
new file mode 100644
index 0000000..9bffb02
--- /dev/null
+++ b/tourdeflexmodules/src/spark/other/Cursor1Example.mxml
@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s: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.managers.CursorManager;
+			
+			private function switchCursor():void 
+			{
+				if (toggle.selected) CursorManager.setBusyCursor();
+				else CursorManager.removeBusyCursor();
+			}
+		]]>
+	</fx:Script>
+	
+	<s:Panel title="Cursor Management Samples" width="100%" height="100%">
+		
+		<s:layout>
+			<s:VerticalLayout horizontalAlign="center" 
+							  paddingLeft="10" paddingRight="10" 
+							  paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<s:CheckBox id="toggle" label="Toggle Cursor" selected="false" color="0x000000" click="switchCursor()"/>
+		
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/other/Cursor2Example.mxml b/tourdeflexmodules/src/spark/other/Cursor2Example.mxml
new file mode 100644
index 0000000..f333987
--- /dev/null
+++ b/tourdeflexmodules/src/spark/other/Cursor2Example.mxml
@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s: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.controls.Button;
+			import mx.managers.CursorManager;
+			import flash.events.*;
+			
+			private var cursorID:Number = 0;
+			// Embed the cursor symbol.
+			[Embed(source="assets/ApacheFlexIcon.png")]
+			private var waitCursorSymbol:Class;           
+			
+			private function setCursor(cursorType:String):void 
+			{
+				if (cursorType == "normal") {
+					CursorManager.removeAllCursors();
+					CursorManager.removeBusyCursor();
+				} else if (cursorType == "busy") {
+					CursorManager.removeAllCursors();
+					CursorManager.setBusyCursor();
+				} else if (cursorType == "custom") {
+					CursorManager.removeAllCursors();            		
+					cursorID = CursorManager.setCursor(waitCursorSymbol);
+				}
+			}
+		]]>
+	</fx:Script>
+	
+	<s:Panel title="Cursor Management Samples" width="100%" height="100%">
+		
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<s:Button label="Normal Cursor" color="0x000000" click="setCursor('normal')"/>
+		<s:Button label="Default Busy Cursor" color="0x000000" click="setCursor('busy')"/>
+		<s:Button label="Custom Busy Cursor" color="0x000000" click="setCursor('custom')"/>
+		
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/other/DragAndDrop1Example.mxml b/tourdeflexmodules/src/spark/other/DragAndDrop1Example.mxml
new file mode 100644
index 0000000..826b35b
--- /dev/null
+++ b/tourdeflexmodules/src/spark/other/DragAndDrop1Example.mxml
@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s: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:Declarations>
+		<s:ArrayList id="arr1">
+			<fx:String>Orange</fx:String>
+			<fx:String>Apple</fx:String>
+			<fx:String>Pear</fx:String>
+		</s:ArrayList>
+		
+		<s:ArrayList id="arr2">
+			<fx:String>Banana</fx:String>
+		</s:ArrayList>
+	</fx:Declarations>
+	
+	<s:Panel title="Drag and Drop Samples" width="100%" height="100%">
+		
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<s:List allowMultipleSelection="true" dropEnabled="true" dragEnabled="true" dragMoveEnabled="true" 
+				dataProvider="{arr1}"/>
+		
+		<s:Label text="Drag Items between lists" color="0x000000"/>
+		
+		<s:List allowMultipleSelection="true" dropEnabled="true" dragEnabled="true" dragMoveEnabled="true" 
+				dataProvider="{arr2}"/>
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/other/DragAndDrop2Example.mxml b/tourdeflexmodules/src/spark/other/DragAndDrop2Example.mxml
new file mode 100644
index 0000000..6a3ce88
--- /dev/null
+++ b/tourdeflexmodules/src/spark/other/DragAndDrop2Example.mxml
@@ -0,0 +1,82 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s: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.managers.DragManager;
+		]]>
+	</fx:Script>
+	
+	<fx:Declarations>
+		<s:ArrayList id="arr1">
+			<fx:String>Orange</fx:String>
+			<fx:String>Apple</fx:String>
+			<fx:String>Pear</fx:String>
+			<fx:String>Banana</fx:String>
+		</s:ArrayList>
+	</fx:Declarations>
+	
+	<s:Panel title="Drag and Drop Samples" width="100%" height="100%">
+
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+		</s:layout>
+	
+		<s:Panel title="Fruit" width="100%" height="100%">
+			
+			<s:layout>
+				<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+			</s:layout>
+			
+			<s:List height="100%" dragEnabled="true" color="0x000000" dataProvider="{arr1}" />
+			
+		</s:Panel>
+		
+		<s:Panel id="fruitDetails" title="drag fruit here" width="100%" height="100%">
+			
+			<s:layout>
+				<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+			</s:layout>
+			
+			<s:dragEnter>
+				if (event.dragSource.hasFormat('itemsByIndex'))
+				{
+					var dropTarget:Panel = event.currentTarget as Panel;
+					DragManager.acceptDragDrop(dropTarget);
+				}
+			</s:dragEnter>
+
+			<s:dragDrop>
+				var data:Object = event.dragSource.dataForFormat('itemsByIndex');
+				var p:Panel = new Panel();
+				p.title = new String(data);
+				p.percentWidth = 100;
+				p.percentHeight = 25;
+				p.setStyle("color","black");
+				fruitDetails.addElement(p);
+			</s:dragDrop>
+			
+		</s:Panel>
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/other/FilterExample.mxml b/tourdeflexmodules/src/spark/other/FilterExample.mxml
new file mode 100644
index 0000000..9cb1a4a
--- /dev/null
+++ b/tourdeflexmodules/src/spark/other/FilterExample.mxml
@@ -0,0 +1,88 @@
+<?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"
+			   creationComplete="init()">
+	
+	<fx:Script>
+		<![CDATA[
+			
+			private var time:Timer;
+			private var count:int = 0;
+			
+			private function init():void{
+				time = new Timer(1000,0);
+				time.addEventListener(TimerEvent.TIMER,timeHandler);
+				time.start();
+				
+			}
+			
+			private function timeHandler(ev:TimerEvent):void{
+				count ++;
+				dynamicText.text = String(count);
+			}
+			
+			private function filterHandler(ev:MouseEvent):void{
+				var filterArr:Array = [];
+				
+				blurBox.selected ? filterArr.push(blur): null;
+				glowBox.selected ? filterArr.push(glow): null;
+				shadowBox.selected? filterArr.push(dropShadow): null;
+				bevelBox.selected ? filterArr.push(bevel): null;
+				
+				textSample.filters = filterArr;
+				dynamicText.filters = filterArr;
+			}
+		]]>
+	</fx:Script>
+
+	<fx:Declarations>
+		<!--filters-->
+		<s:GlowFilter id="glow" blurX="12" blurY="12" color="#88AEF7" quality="2" strength="1"/>
+		<s:BlurFilter id="blur" blurX="4" blurY="4" quality="2" />
+		<s:DropShadowFilter id="dropShadow" alpha="0.35" blurX="6" blurY="6" distance="6" color="#000000" angle="90" />
+		<s:BevelFilter id="bevel" angle="45" blurX="0.5" blurY="0.5" distance="4" strength="0.7" highlightAlpha="0.7" shadowAlpha="0.7"  />
+	</fx:Declarations>
+	
+	<s:Panel title="Filters Samples"
+			 width="100%" height="100%">
+		
+		<s:layout>
+			<s:VerticalLayout horizontalAlign="center" 
+							  paddingLeft="10" paddingRight="10" 
+							  paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<s:Label id="textSample" text="SAMPLE TEXT" color="0x000000" 
+				 fontWeight="bold" fontSize="40" filters="{[bevel]}" />
+		
+		<s:HGroup width="100%" horizontalAlign="center">
+			<s:CheckBox id="blurBox" label="Blur" click="filterHandler(event)" />
+			<s:CheckBox id="glowBox" label="Glow" click="filterHandler(event)" />
+			<s:CheckBox id="shadowBox" label="Drop Shadow" click="filterHandler(event)" />
+			<s:CheckBox id="bevelBox" label="Bevel" selected="true" click="filterHandler(event)" />
+		</s:HGroup>
+		
+		<s:Label id="dynamicText" text="0" fontSize="18" filters="{[bevel]}" />
+		
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/other/RepeaterExample.mxml b/tourdeflexmodules/src/spark/other/RepeaterExample.mxml
new file mode 100644
index 0000000..46aa704
--- /dev/null
+++ b/tourdeflexmodules/src/spark/other/RepeaterExample.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.controls.Alert;
+  
+			[Bindable]
+			private var dp:Array = [1, 2, 3, 4, 5, 6, 7, 8, 9];    
+			
+        ]]>
+     </fx:Script>
+	
+	<s:Panel title="Repeater Example" width="100%" height="100%">
+		
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+		</s:layout>
+         
+         <s:Label width="100%"
+            text="Use the Repeater class to create multi-Button controls in a Tile container."/>
+
+        <mx:Tile direction="horizontal" borderStyle="inset" horizontalGap="10" verticalGap="10" color="0x323232"
+            paddingLeft="10" paddingTop="10" paddingBottom="10" paddingRight="10">
+        
+            <mx:Repeater id="rp" dataProvider="{dp}">
+                <s:Button height="24" width="50" 
+                    label="{String(rp.currentItem)}" 
+                    click="Alert.show(String(event.currentTarget.getRepeaterItem()) + ' pressed')"/>
+            </mx:Repeater>    
+        </mx:Tile>
+        
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/other/ScrollBarsExample.mxml b/tourdeflexmodules/src/spark/other/ScrollBarsExample.mxml
new file mode 100644
index 0000000..31f81fb
--- /dev/null
+++ b/tourdeflexmodules/src/spark/other/ScrollBarsExample.mxml
@@ -0,0 +1,98 @@
+<?xml version="1.0"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<!-- controls\bar\SBarSimple.mxml -->
+<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.events.ScrollEvent;
+			
+			private function vbarScroll():void {
+				log.text = "VScrollBar properties summary:" + '\n' +
+					"------------------------------------" + '\n' +
+					"Current scroll position: " + 
+					bar.value  + '\n' +
+					"The maximum scroll position: " + 
+					bar.maximum + '\n' +
+					"The minimum scroll position: " + 
+					bar.minimum;
+				
+				rect.height = bar.value;
+			}
+			private function hbarScroll():void {
+				log.text = "HScrollBar properties summary:" + '\n' +
+					"------------------------------------" + '\n' +
+					"Current scroll position: " + 
+					hbar.value  + '\n' +
+					"The maximum scroll position: " + 
+					hbar.maximum + '\n' +
+					"The minimum scroll position: " + 
+					hbar.minimum;
+				
+				rect.width = hbar.value;
+			}
+		]]>
+	</fx:Script> 
+	
+	<s:Panel title="VScrollBar and HScrollBar Sample" width="100%" height="100%">
+		
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+		</s:layout>
+		
+		<s:VGroup>
+			<s:Label 
+				width="100%" 
+				text="Drag the ScrollBar controls to change the size of the Rectangle graphic."/>
+			
+			<s:HGroup>
+				<s:VScrollBar id="bar" 
+							  height="180" 
+							  minimum="0" 
+							  maximum="{bar.height}"
+							  stepSize="10" 
+							  pageSize="10"
+							  value="{rect.height}"
+							  change="vbarScroll()"/>
+				<s:Rect id="rect" width="50" height="20">
+					<s:fill>
+						<s:LinearGradient rotation="90">
+							<s:GradientEntry color="#6191c3"/>
+							<s:GradientEntry color="#6191c3"/>
+							<s:GradientEntry alpha=".3"/>
+						</s:LinearGradient>
+					</s:fill>
+				</s:Rect>
+			</s:HGroup>
+			<s:HScrollBar id="hbar" width="180" value="{rect.width}"
+						  minimum="0" maximum="{hbar.width}" stepSize="10" pageSize="10" change="hbarScroll()"/>
+		</s:VGroup>
+		<s:VGroup width="200">
+			<s:TextArea id="log" editable="false" height="88"/>	
+			
+			<s:Label text="The ScrollBar controls (HScrollBar and VScrollBar) can be used stand-alone, but typically you would combine it as part of 
+another group of components to provide scrolling functionality. "/>	
+		</s:VGroup>
+		
+	</s:Panel>
+		
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/other/TDFGradientBackgroundSkin.mxml b/tourdeflexmodules/src/spark/other/TDFGradientBackgroundSkin.mxml
new file mode 100644
index 0000000..fe2a943
--- /dev/null
+++ b/tourdeflexmodules/src/spark/other/TDFGradientBackgroundSkin.mxml
@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
+			 xmlns:mx="library://ns.adobe.com/flex/mx" 
+			 xmlns:s="library://ns.adobe.com/flex/spark">
+	
+	<fx:Metadata>
+		[HostComponent("spark.components.Application")]
+	</fx:Metadata> 
+	
+	<s:states>
+		<s:State name="normal" />
+		<s:State name="disabled" />
+	</s:states>
+	
+	<s:layout>
+		<s:BasicLayout />
+	</s:layout>
+	
+	<s:Rect id="bg" width="100%" height="100%">
+		<s:fill>
+			<s:LinearGradient rotation="90">
+				<s:entries>
+					<s:GradientEntry color="0x000000" ratio="0.00" />
+					<s:GradientEntry color="0x323232" ratio="1.0" />
+				</s:entries>
+			</s:LinearGradient>    
+		</s:fill>
+	</s:Rect>
+	
+	<s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" />
+</s:SparkSkin>
diff --git a/tourdeflexmodules/src/spark/other/assets/ApacheFlexIcon.png b/tourdeflexmodules/src/spark/other/assets/ApacheFlexIcon.png
new file mode 100644
index 0000000..e68d831
--- /dev/null
+++ b/tourdeflexmodules/src/spark/other/assets/ApacheFlexIcon.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/other/assets/ApacheFlexLogo.png b/tourdeflexmodules/src/spark/other/assets/ApacheFlexLogo.png
new file mode 100644
index 0000000..4ff037f
--- /dev/null
+++ b/tourdeflexmodules/src/spark/other/assets/ApacheFlexLogo.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/other/skins/CustomTabBarButtonSkin.mxml b/tourdeflexmodules/src/spark/other/skins/CustomTabBarButtonSkin.mxml
new file mode 100644
index 0000000..90afd3c
--- /dev/null
+++ b/tourdeflexmodules/src/spark/other/skins/CustomTabBarButtonSkin.mxml
@@ -0,0 +1,262 @@
+<?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.
+
+-->
+
+
+<!--- 
+The default skin class for Spark TabBar buttons.  
+
+@langversion 3.0
+@playerversion Flash 10
+@playerversion AIR 1.5
+@productversion Flex 4
+-->
+
+<s:SparkSkin 
+	xmlns:fx="http://ns.adobe.com/mxml/2009" 
+	xmlns:s="library://ns.adobe.com/flex/spark" 
+	xmlns:fb="http://ns.adobe.com/flashbuilder/2009" 
+	minWidth="21" minHeight="21" alpha.disabledStates="0.5">
+	
+	<!-- host component -->
+	<fx:Metadata>
+		<![CDATA[ 
+		/** 
+		* @copy spark.skins.spark.ApplicationSkin#hostComponent
+		*/
+		[HostComponent("spark.components.ButtonBarButton")]
+		]]>
+	</fx:Metadata>
+	
+	<fx:Script fb:purpose="styling" >
+        
+		import spark.components.TabBar;
+		
+		static private const exclusions:Array = ["labelDisplay"];
+		
+		/** 
+		 * @private
+		 */     
+		override public function get colorizeExclusions():Array {return exclusions;}
+		
+		/**
+		 * @private
+		 */
+		override protected function initializationComplete():void
+		{
+			super.initializationComplete();
+		}
+		
+		private var cornerRadius:Number = 4
+		
+		/**
+		 *  @private
+		 *  The borderTop s:Path is just a s:Rect with the bottom edge left out.
+		 *  Given the rounded corners per the cornerRadius style, the result is 
+		 *  roughly an inverted U with the specified width, height, and cornerRadius.
+		 * 
+		 *  Circular arcs are drawn with two curves per flash.display.Graphics.GraphicsUtil.
+		 */        
+		private function updateBorderTop(width:Number, height:Number):void
+		{
+			var left:Number = -0.5;
+			var right:Number = width - 0.5;
+			var top:Number = 0.5;
+			var bottom:Number = height;
+			
+			var a:Number = cornerRadius * 0.292893218813453;
+			var s:Number = cornerRadius * 0.585786437626905;
+			
+			var path:String = "";
+			path +=  "M " + left + " " + bottom;
+			path += " L " + left + " " + (top + cornerRadius);
+			path += " Q " + left + " " + (top + s) + " " + (left + a) + " " + (top + a);
+			path += " Q " + (left + s) + " " + top + " " + (left + cornerRadius) + " " + top;
+			path += " L " + (right - cornerRadius) + " " + top;
+			path += " Q " + (right - s) + " " + top + " " + (right - a) + " " + (top + a);
+			path += " Q " + right + " " + (top + s) + " " + right + " " + (top + cornerRadius);
+			path += " L " + right + " " + bottom;
+			borderTop.data = path;
+		}
+		
+		/**
+		 *  @private
+		 *  The cornerRadius style is specified by the TabBar, not the button itself.   
+		 * 
+		 *  Rather than bind the corner radius properties of the s:Rect's in the markup 
+		 *  below to hostComponent.owner.getStyle("cornerRadius"), we reset them here, 
+		 *  each time a change in the value of the style is detected.  Note that each 
+		 *  corner radius property is explicitly initialized to the default value of 
+		 *  the style; the initial value of the private cornerRadius property.
+		 */
+		private function updateCornerRadius():void
+		{
+			var cr:Number = getStyle("cornerRadius");
+			if (cornerRadius != cr)
+			{
+				cornerRadius = cr;
+				fill.topLeftRadiusX = cornerRadius;
+				fill.topRightRadiusX = cornerRadius;
+				lowlight.radiusX = cornerRadius;
+				highlight.radiusX = cornerRadius;
+				highlightStroke.topLeftRadiusX = cornerRadius;
+				highlightStroke.topRightRadiusX = cornerRadius;
+			}
+		}
+		
+		/**
+		 *  @private
+		 */
+		override protected function updateDisplayList(unscaledWidth:Number, unscaleHeight:Number):void
+		{
+			updateCornerRadius();
+			updateBorderTop(unscaledWidth, unscaledHeight);
+			super.updateDisplayList(unscaledWidth, unscaledHeight);
+		}
+	</fx:Script>
+	
+	<!-- states -->
+	<s:states>
+		<s:State name="up" />
+		<s:State name="over" stateGroups="overStates" />
+		<s:State name="down" stateGroups="downStates" />
+		<s:State name="disabled" stateGroups="disabledStates" />
+		<s:State name="upAndSelected" stateGroups="selectedStates, selectedUpStates" />
+		<s:State name="overAndSelected" stateGroups="overStates, selectedStates" />
+		<s:State name="downAndSelected" stateGroups="downStates, selectedStates" />
+		<s:State name="disabledAndSelected" stateGroups="selectedUpStates, disabledStates, selectedStates" />
+	</s:states>
+	
+	<s:Group left="-1" right="0" top="-1" bottom="-1">
+		
+		<!-- layer 2: fill -->
+		<s:Rect id="fill" left="2" right="1" top="2" bottom="2" topLeftRadiusX="4" topRightRadiusX="4" width="69" height="21">
+			<s:fill>
+				<s:LinearGradient rotation="90">
+					<s:GradientEntry color="0xFFFFFF" 
+									 color.selectedUpStates="0xFFFFFF"
+									 color.overStates="0xCC0000"
+									 color.downStates="0xCC0000" 
+									 alpha="0.85" 
+									 alpha.overAndSelected="1" />
+					<s:GradientEntry color="0xCCCCCC" 
+									 color.selectedUpStates="0x9FA0A1"
+									 color.over="0xCC0000" 
+									 color.overAndSelected="0xFFFFFF"
+									 color.downStates="0xCC0000" 
+									 alpha="0.85"
+									 alpha.overAndSelected="1" />
+				</s:LinearGradient>
+			</s:fill>
+		</s:Rect>
+		
+		<!-- layer 3: fill lowlight -->
+		<s:Rect id="lowlight" left="2" right="1" bottom="2" height="9" radiusX="4">
+			<s:fill>
+				<s:LinearGradient rotation="90">
+					<s:GradientEntry color="0xCC0000" alpha="0.0099" />
+					<s:GradientEntry color="0xCC0000" alpha="0.0627" />
+				</s:LinearGradient>
+			</s:fill>
+		</s:Rect>
+		
+		<!-- layer 4: fill highlight -->
+		<s:Rect id="highlight" left="2" right="1" top="2" height="9" radiusX="4">
+			<s:fill>
+				<s:SolidColor color="0xCC0000" 
+							  alpha="0.33" 
+							  alpha.selectedUpStates="0.22"
+							  alpha.overStates="0.22" 
+							  alpha.downStates="0.12" />
+			</s:fill>
+		</s:Rect>
+		
+		<!-- layer 5: highlight stroke (all states except down) -->
+		<s:Rect id="highlightStroke" left="2" right="1" top="2" bottom="2" topLeftRadiusX="4" topRightRadiusX="4">
+			<s:stroke>
+				<s:LinearGradientStroke rotation="90" weight="1">
+					<s:GradientEntry color="0xCC0000" alpha.overStates="0.22" alpha.selectedUpStates="0.33" />
+				</s:LinearGradientStroke>
+			</s:stroke>
+		</s:Rect>
+		
+		<!-- layer 6: highlight stroke (down state only) -->
+		<s:Rect left="2" top="2" bottom="2" width="1" includeIn="downStates, selectedUpStates, overAndSelected">
+			<s:fill>
+				<s:SolidColor color="0xCC0000" alpha="0.07" />
+			</s:fill>
+		</s:Rect>
+		<s:Rect right="1" top="2" bottom="2" width="1" includeIn="downStates, selectedUpStates, overAndSelected">
+			<s:fill>
+				<s:SolidColor color="0xCC0000" alpha="0.07" />
+			</s:fill>
+		</s:Rect>
+		<s:Rect left="3" top="2" right="1" height="1" includeIn="downStates, selectedUpStates, overAndSelected">
+			<s:fill>
+				<s:SolidColor color="0xCC0000" alpha="0.25" />
+			</s:fill>
+		</s:Rect>
+		<s:Rect left="2" top="3" right="1" height="1" includeIn="downStates, selectedUpStates, overAndSelected">
+			<s:fill>
+				<s:SolidColor color="0xCC0000" alpha="0.09" />
+			</s:fill>
+		</s:Rect>
+		
+		<!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 -->
+		<s:Line id="borderBottom" left="1" right="0" bottom="1">
+			<s:stroke>
+				<s:SolidColorStroke weight="1" 
+									color="0xCC0000" 
+									color.selectedStates="0x434343"
+									alpha="0.75" 
+									alpha.down="0.85"
+									alpha.selectedStates="0.5" />
+			</s:stroke>
+		</s:Line>
+		<s:Path id="borderTop" left="1" right="0" top="1" bottom="1" width="69" height="21">
+			<s:stroke>
+				<s:LinearGradientStroke rotation="90" weight="1">
+					<s:GradientEntry color="0xCC0000" 
+									 alpha="0.5625"
+									 />
+					<s:GradientEntry color="0xFFFFFF" 
+									 color.selectedUpStates="0xFFFFFF"
+									 color.overStates="0xFFFFFF" 
+									 color.downStates="0xCC0000" 
+									 alpha="0.85" 
+									 alpha.overAndSelected="1" />					
+				</s:LinearGradientStroke>
+			</s:stroke>
+		</s:Path>
+	</s:Group>
+	
+	<!-- layer 8: text -->
+	<!--- The defines the appearance of the label for the first button in the ButtonBar component. -->
+	<s:Group left="2" top="2">
+				 
+		<s:Label id="labelDisplay"
+				 textAlign="center"
+				 verticalAlign="middle"
+				 maxDisplayedLines="1"
+				 horizontalCenter="7" verticalCenter="1" 
+				 left="10" right="10" top="2" bottom="2" color.down="#FFFFFF">
+		</s:Label>
+	</s:Group>
+	
+</s:SparkSkin>
diff --git a/tourdeflexmodules/src/spark/other/skins/CustomTabBarSkin.mxml b/tourdeflexmodules/src/spark/other/skins/CustomTabBarSkin.mxml
new file mode 100644
index 0000000..e81ff4d
--- /dev/null
+++ b/tourdeflexmodules/src/spark/other/skins/CustomTabBarSkin.mxml
@@ -0,0 +1,97 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+
+
+<!--- 
+
+The default skin class for the Spark TabBar component. The ButtonBarButtons 
+created by the TabBar component use the TabBarButtonSkin class.  
+
+@see spark.components.TabBar
+@see spark.components.ButtonBarButton
+
+@langversion 3.0
+@playerversion Flash 10
+@playerversion AIR 1.5
+@productversion Flex 4
+
+-->
+
+<s:Skin 
+	xmlns:fx="http://ns.adobe.com/mxml/2009" 
+	xmlns:s="library://ns.adobe.com/flex/spark"
+	xmlns:fb="http://ns.adobe.com/flashbuilder/2009"     
+	alpha.disabled="0.5">
+	
+	<fx:Metadata>
+		<![CDATA[ 
+		/** 
+		* @copy spark.skins.spark.ApplicationSkin#hostComponent
+		*/
+		[HostComponent("spark.components.TabBar")]
+		]]>
+	</fx:Metadata> 
+	
+	<fx:Script  fb:purpose="styling" >
+		<![CDATA[ 
+			
+			import mx.core.UIComponent;
+			
+			/**
+			 *  @private
+			 *  Push the cornerRadius style to the item renderers.
+			 */
+			override protected function updateDisplayList(unscaledWidth:Number, unscaleHeight:Number):void
+			{
+				const numElements:int = dataGroup.numElements;
+				const cornerRadius:int = hostComponent.getStyle("cornerRadius");
+				for (var i:int = 0; i < numElements; i++)
+				{
+					var elt:UIComponent = dataGroup.getElementAt(i) as UIComponent;
+					if (elt)
+						elt.setStyle("cornerRadius", cornerRadius);
+				}
+				
+				super.updateDisplayList(unscaledWidth, unscaledHeight);
+			}
+			
+		]]>            
+	</fx:Script>
+	
+	<s:states>
+		<s:State name="normal" />
+		<s:State name="disabled" />
+	</s:states>
+	
+	<!--- 
+	@copy spark.components.SkinnableDataContainer#dataGroup
+	-->
+	<s:DataGroup id="dataGroup" width="100%" height="100%">
+		<s:layout>
+			<s:ButtonBarHorizontalLayout gap="-1"/>
+		</s:layout>
+		<s:itemRenderer>
+			<fx:Component>
+				<s:ButtonBarButton skinClass="skins.CustomTabBarButtonSkin" />
+			</fx:Component>
+		</s:itemRenderer>
+	</s:DataGroup>
+	
+</s:Skin>
diff --git a/tourdeflexmodules/src/spark/skinning/ButtonWithIconExample.mxml b/tourdeflexmodules/src/spark/skinning/ButtonWithIconExample.mxml
new file mode 100644
index 0000000..43dc390
--- /dev/null
+++ b/tourdeflexmodules/src/spark/skinning/ButtonWithIconExample.mxml
@@ -0,0 +1,48 @@
+<?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">
+	
+	<!-- Custom skins used for this example are shown in the source tabs for reference -->
+	<s:Panel width="100%" height="100%" title="Button Skinned With Icon" 
+			 >
+		<s:HGroup width="100%" left="35" top="15">
+			<s:VGroup width="50%">
+				<s:HGroup verticalAlign="middle">
+					<s:Label text="Button with Icon Only Skin"/>
+					<s:Button skinClass="skins.CloseButtonSkin" width="16" height="16"/>
+				</s:HGroup>
+				<s:HGroup verticalAlign="middle">
+					<s:Label text="Button with Icon And Drop Shadow Skin"/>
+					<s:Button skinClass="skins.AddButtonSkin" width="20" height="20"/>
+				</s:HGroup>
+				<s:HGroup verticalAlign="middle">
+					<s:Label text="Rounded Corner Button with Icon And Text Skin"/>
+					<s:Button skinClass="skins.IconTextButtonSkin" label="Add" width="53" />	
+				</s:HGroup>
+			</s:VGroup>
+			<s:Label width="50%" text="Buttons can be skinned to contain an icon and to include or not include the text label. Check the source for the 3 skin classes that handle the different combinations." 
+						  verticalAlign="middle"/>
+			
+		</s:HGroup>
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/skinning/SkinningApplication1Example.mxml b/tourdeflexmodules/src/spark/skinning/SkinningApplication1Example.mxml
new file mode 100644
index 0000000..608c270
--- /dev/null
+++ b/tourdeflexmodules/src/spark/skinning/SkinningApplication1Example.mxml
@@ -0,0 +1,44 @@
+<?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" 
+			   skinClass="skins.GradientBackgroundAppSkin"
+			   backgroundColor="0x000000">
+	
+	<s:VGroup horizontalCenter="0" verticalCenter="0">
+		<s:Label text="Wood Sales Int'l" fontSize="42" />
+		<s:BorderContainer borderColor="0x000000" borderWeight="3" cornerRadius="7" horizontalCenter="0" verticalCenter="0">
+			<s:VGroup>
+				<mx:Form fontSize="16">
+					<mx:FormItem label="Userid:">
+						<s:TextInput id="userid"/>
+					</mx:FormItem>
+					<mx:FormItem label="Password:">
+						<s:TextInput id="pw"/>
+					</mx:FormItem>
+					<mx:FormItem>
+						<s:Button label="Login"/>
+					</mx:FormItem>
+				</mx:Form>
+			</s:VGroup>
+		</s:BorderContainer>
+	</s:VGroup>
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/skinning/SkinningApplication2Example.mxml b/tourdeflexmodules/src/spark/skinning/SkinningApplication2Example.mxml
new file mode 100644
index 0000000..ed75ddd
--- /dev/null
+++ b/tourdeflexmodules/src/spark/skinning/SkinningApplication2Example.mxml
@@ -0,0 +1,43 @@
+<?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"
+			   skinClass="skins.BackgroundImageAppSkin">
+	
+	<s:VGroup horizontalCenter="0" verticalCenter="0">
+		<s:Label text="Wood Sales Int'l" fontSize="42" />
+		<s:BorderContainer borderColor="0x000000" borderWeight="3" cornerRadius="7" horizontalCenter="0" verticalCenter="0">
+			<s:VGroup>
+				<mx:Form fontSize="16">
+					<mx:FormItem label="Userid:">
+						<s:TextInput id="userid"/>
+					</mx:FormItem>
+					<mx:FormItem label="Password:">
+						<s:TextInput id="pw"/>
+					</mx:FormItem>
+					<mx:FormItem>
+						<s:Button label="Login"/>
+					</mx:FormItem>
+				</mx:Form>
+			</s:VGroup>
+		</s:BorderContainer>
+	</s:VGroup>
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/skinning/SkinningApplication3Example.mxml b/tourdeflexmodules/src/spark/skinning/SkinningApplication3Example.mxml
new file mode 100644
index 0000000..e578cd1
--- /dev/null
+++ b/tourdeflexmodules/src/spark/skinning/SkinningApplication3Example.mxml
@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
+			   xmlns:s="library://ns.adobe.com/flex/spark" 
+			   xmlns:mx="library://ns.adobe.com/flex/mx" 
+			   skinClass="skins.CustomControlBarAppSkin" 
+			   controlBarVisible="true">
+	<s:controlBarContent>
+		<s:TextInput id="textInput"/>
+		<s:Button id="searchBtn" label="Search"/>
+	</s:controlBarContent>
+	
+	<s:VGroup horizontalCenter="0" verticalCenter="0">
+		<s:Label text="Wood Sales Int'l" fontSize="42" />
+		<s:BorderContainer borderColor="0x000000" borderWeight="3" cornerRadius="7" horizontalCenter="0" verticalCenter="0">
+			<s:VGroup>
+				<mx:Form fontSize="16">
+					<mx:FormItem label="Userid:">
+						<s:TextInput id="userid"/>
+					</mx:FormItem>
+					<mx:FormItem label="Password:">
+						<s:TextInput id="pw"/>
+					</mx:FormItem>
+					<mx:FormItem>
+						<s:Button label="Login"/>
+					</mx:FormItem>
+				</mx:Form>
+			</s:VGroup>
+		</s:BorderContainer>
+	</s:VGroup>
+</s:Application>
diff --git a/tourdeflexmodules/src/spark/skinning/SkinningContainerExample.mxml b/tourdeflexmodules/src/spark/skinning/SkinningContainerExample.mxml
new file mode 100644
index 0000000..2708429
--- /dev/null
+++ b/tourdeflexmodules/src/spark/skinning/SkinningContainerExample.mxml
@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s: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">
+	
+	<s:Panel id="myPanel" title="SkinnableContainer sample" 
+			 width="100%" height="100%" >
+		
+		<!-- Set a custom skin for the container to show a gradient background and border -->
+		<s:SkinnableContainer skinClass="skins.CustomSkinnableContainerSkin" 
+							  width="50%" height="50%" 
+							  horizontalCenter="0" 
+							  verticalCenter="0">
+			
+			<s:VGroup horizontalCenter="0" verticalCenter="0">
+				<mx:Form fontSize="16">
+					<mx:FormItem label="Userid:">
+						<s:TextInput id="userid"/>
+					</mx:FormItem>
+					<mx:FormItem label="Password:">
+						<s:TextInput id="pw"/>
+					</mx:FormItem>
+					<mx:FormItem>
+						<s:Button label="Login"/>
+					</mx:FormItem>
+				</mx:Form>
+			</s:VGroup>
+		</s:SkinnableContainer>
+		
+	</s:Panel>
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/skinning/assets/arrow_icon_sm.png b/tourdeflexmodules/src/spark/skinning/assets/arrow_icon_sm.png
new file mode 100644
index 0000000..33debc8
--- /dev/null
+++ b/tourdeflexmodules/src/spark/skinning/assets/arrow_icon_sm.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/skinning/assets/icon_add.png b/tourdeflexmodules/src/spark/skinning/assets/icon_add.png
new file mode 100644
index 0000000..4382d33
--- /dev/null
+++ b/tourdeflexmodules/src/spark/skinning/assets/icon_add.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/skinning/assets/icon_check.png b/tourdeflexmodules/src/spark/skinning/assets/icon_check.png
new file mode 100644
index 0000000..1c122a4
--- /dev/null
+++ b/tourdeflexmodules/src/spark/skinning/assets/icon_check.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/skinning/assets/icon_close16.png b/tourdeflexmodules/src/spark/skinning/assets/icon_close16.png
new file mode 100644
index 0000000..e972065
--- /dev/null
+++ b/tourdeflexmodules/src/spark/skinning/assets/icon_close16.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/skinning/assets/icon_plus.png b/tourdeflexmodules/src/spark/skinning/assets/icon_plus.png
new file mode 100644
index 0000000..b4ecdba
--- /dev/null
+++ b/tourdeflexmodules/src/spark/skinning/assets/icon_plus.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/skinning/assets/icon_remove.png b/tourdeflexmodules/src/spark/skinning/assets/icon_remove.png
new file mode 100644
index 0000000..24089c5
--- /dev/null
+++ b/tourdeflexmodules/src/spark/skinning/assets/icon_remove.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/skinning/assets/wood-bg.png b/tourdeflexmodules/src/spark/skinning/assets/wood-bg.png
new file mode 100644
index 0000000..6b9403f
--- /dev/null
+++ b/tourdeflexmodules/src/spark/skinning/assets/wood-bg.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/skinning/skins/AddButtonSkin.mxml b/tourdeflexmodules/src/spark/skinning/skins/AddButtonSkin.mxml
new file mode 100644
index 0000000..33db62d
--- /dev/null
+++ b/tourdeflexmodules/src/spark/skinning/skins/AddButtonSkin.mxml
@@ -0,0 +1,183 @@
+<?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.
+
+-->
+<!--
+@langversion 3.0
+@playerversion Flash 10
+@playerversion AIR 1.5
+@productversion Flex 4
+-->
+<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
+			 minWidth="21" minHeight="21"
+			 alpha.disabled="0.5">
+
+	<!-- host component -->
+	<fx:Metadata>
+		<![CDATA[ 
+		/** 
+		* @copy spark.skins.spark.ApplicationSkin#hostComponent
+		*/
+		[HostComponent("spark.components.Button")]
+		]]>
+	</fx:Metadata>
+	
+	<fx:Script>
+		<![CDATA[         
+			/* Define the skin elements that should not be colorized. 
+			
+			For button, the graphics are colorized but the label is not. */
+			
+			static private const exclusions:Array = ["labelDisplay"];
+			
+			/** 
+			 * @copy spark.skins.SparkSkin#colorizeExclusions
+			 */     
+			override public function get colorizeExclusions():Array {return exclusions;}
+			
+		]]>        
+		
+	</fx:Script>
+	
+	<!-- states -->
+	<s:states>
+		<s:State name="up" />
+		<s:State name="over" />
+		<s:State name="down" />
+		<s:State name="disabled" />
+	</s:states>
+	
+	<!-- layer 1: shadow -->
+	<s:Rect left="-1" right="-1" top="-1" bottom="-1" radiusX="2" radiusY="2">
+		<s:fill>
+			<s:LinearGradient rotation="90">
+				<s:GradientEntry color="0x000000" 
+								 color.down="0xFFFFFF"
+								 alpha="0.01"
+								 alpha.down="0" />
+				<s:GradientEntry color="0x000000" 
+								 color.down="0xFFFFFF" 
+								 alpha="0.07"
+								 alpha.down="0.5" />
+			</s:LinearGradient>
+		</s:fill>
+	</s:Rect>
+	
+	
+	<!-- layer 2: fill -->
+	<s:Rect left="1" right="1" top="1" bottom="1" radiusX="2" radiusY="2">
+		<s:fill>
+			<s:LinearGradient rotation="90">
+				<s:GradientEntry color="0xFFFFFF" 
+								 color.over="0xBBBDBD" 
+								 color.down="0xAAAAAA" 
+								 alpha="0.85" />
+				<s:GradientEntry color="0xD8D8D8" 
+								 color.over="0x9FA0A1" 
+								 color.down="0x929496" 
+								 alpha="0.85" />
+			</s:LinearGradient>
+		</s:fill>
+	</s:Rect>
+	
+	
+	<!-- layer 3: fill lowlight -->
+	<s:Rect left="1" right="1" bottom="1" height="9" radiusX="2" radiusY="2">
+		
+		<s:fill>
+			<s:LinearGradient rotation="90">
+				<s:GradientEntry color="0x000000" alpha="0.0099" />
+				<s:GradientEntry color="0x000000" alpha="0.0627" />
+			</s:LinearGradient>
+		</s:fill>
+	</s:Rect>
+	
+	<!-- layer 4: fill highlight -->
+	<s:Rect left="1" right="1" top="1" height="9" radiusX="2" radiusY="2">
+		<s:fill>
+			<s:SolidColor color="0xFFFFFF" 
+						  alpha="0.33" 
+						  alpha.over="0.22" 
+						  alpha.down="0.12" />
+		</s:fill>
+	</s:Rect>
+	
+	
+	
+	<!-- layer 5: highlight stroke (all states except down) -->
+	<s:Rect left="1" right="1" top="1" bottom="1" radiusX="2" radiusY="2" excludeFrom="down">
+		<s:stroke>
+			<s:LinearGradientStroke rotation="90" weight="1">
+				<s:GradientEntry color="0xFFFFFF" alpha.over="0.22" />
+				<s:GradientEntry color="0xD8D8D8" alpha.over="0.22" />
+			</s:LinearGradientStroke>
+		</s:stroke>
+	</s:Rect>
+	
+	
+	<!-- layer 6: highlight stroke (down state only) -->
+	<s:Rect left="1" top="1" bottom="1" width="1" includeIn="down">
+		<s:fill>
+			<s:SolidColor color="0x000000" alpha="0.07" />
+		</s:fill>
+	</s:Rect>
+	
+	<s:Rect right="1" top="1" bottom="1" width="1" includeIn="down">
+		<s:fill>
+			<s:SolidColor color="0x000000" alpha="0.07" />
+		</s:fill>
+	</s:Rect>
+	
+	<s:Rect left="2" top="1" right="2" height="1" includeIn="down">
+		<s:fill>
+			<s:SolidColor color="0x000000" alpha="0.25" />
+		</s:fill>
+	</s:Rect>
+	
+	<s:Rect left="1" top="2" right="1" height="1" includeIn="down">
+		<s:fill>
+			<s:SolidColor color="0x000000" alpha="0.09" />
+		</s:fill>
+	</s:Rect>
+	
+	
+	<!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 -->
+	<s:Rect left="0" right="0" top="0" bottom="0" width="69" height="20" radiusX="2" radiusY="2">
+		<s:stroke>
+			<s:LinearGradientStroke rotation="90" weight="1">
+				<s:GradientEntry color="0x000000" 
+								 alpha="0.5625"
+								 alpha.down="0.6375" />
+				<s:GradientEntry color="0x000000" 
+								 alpha="0.75" 
+								 alpha.down="0.85" />
+			</s:LinearGradientStroke>
+		</s:stroke>
+	</s:Rect>
+	
+	
+	<!-- icon symbol with drop shadow -->
+	<s:Group id="symbol" left="3" top="3" right="3" bottom="3">
+		<s:filters>
+			<s:DropShadowFilter alpha="0.5" blurX="0" blurY="0" distance="1" />
+		</s:filters> 
+		<s:BitmapImage source="@Embed('../assets/icon_check.png')"/>
+	</s:Group>
+		
+	
+</s:SparkSkin>
diff --git a/tourdeflexmodules/src/spark/skinning/skins/BackgroundImageAppSkin.mxml b/tourdeflexmodules/src/spark/skinning/skins/BackgroundImageAppSkin.mxml
new file mode 100644
index 0000000..64907a0
--- /dev/null
+++ b/tourdeflexmodules/src/spark/skinning/skins/BackgroundImageAppSkin.mxml
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
+		xmlns:mx="library://ns.adobe.com/flex/halo" 
+		xmlns:s="library://ns.adobe.com/flex/spark">
+	
+	<fx:Metadata>
+		[HostComponent("spark.components.Application")]
+	</fx:Metadata> 
+	
+	<s:states>
+		<s:State name="normal" />
+		<s:State name="disabled" />
+	</s:states>
+	
+	<!-- This image fill also specifies padding around it -->
+	<s:Rect id="backgroundRect" left="100" right="100" top="20" bottom="20">
+		<s:fill>
+			<s:BitmapFill source="@Embed('../assets/wood-bg.png')"/>
+		</s:fill>
+	</s:Rect>	
+	
+	<s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" />
+</s:SparkSkin>
diff --git a/tourdeflexmodules/src/spark/skinning/skins/CloseButtonSkin.mxml b/tourdeflexmodules/src/spark/skinning/skins/CloseButtonSkin.mxml
new file mode 100644
index 0000000..c2ee2f5
--- /dev/null
+++ b/tourdeflexmodules/src/spark/skinning/skins/CloseButtonSkin.mxml
@@ -0,0 +1,184 @@
+<?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.
+
+-->
+<!--
+@langversion 3.0
+@playerversion Flash 10
+@playerversion AIR 1.5
+@productversion Flex 4
+-->
+<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
+			 minWidth="21" minHeight="21"
+			 alpha.disabled="0.5">
+	
+	<!-- host component -->
+	<fx:Metadata>
+		<![CDATA[ 
+		/** 
+		* @copy spark.skins.spark.ApplicationSkin#hostComponent
+		*/
+		[HostComponent("spark.components.Button")]
+		]]>
+	</fx:Metadata>
+	
+	<fx:Script>
+		<![CDATA[         
+			/* Define the skin elements that should not be colorized. 
+			For button, the graphics are colorized but the label is not. */
+			static private const exclusions:Array = ["labelDisplay"];
+			
+			
+			/** 
+			 * @copy spark.skins.SparkSkin#colorizeExclusions
+			 */     
+			override public function get colorizeExclusions():Array {return exclusions;}
+			
+		]]>        
+		
+	</fx:Script>
+	
+	<!-- states -->
+	<s:states>
+		<s:State name="up" />
+		<s:State name="over" />
+		<s:State name="down" />
+		<s:State name="disabled" />
+	</s:states>
+	
+	<!-- layer 1: shadow -->
+	<s:Rect left="-1" right="-1" top="-1" bottom="-1" radiusX="2" radiusY="2">
+		<s:fill>
+			<s:LinearGradient rotation="90">
+				<s:GradientEntry color="0x000000" 
+								 color.down="0xFFFFFF"
+								 alpha="0.01"
+								 alpha.down="0" />
+				<s:GradientEntry color="0x000000" 
+								 color.down="0xFFFFFF" 
+								 alpha="0.07"
+								 alpha.down="0.5" />
+			</s:LinearGradient>
+		</s:fill>
+	</s:Rect>
+	
+	<!-- layer 2: fill -->
+	<s:Rect left="1" right="1" top="1" bottom="1" radiusX="2" radiusY="2">
+		<s:fill>
+			<s:LinearGradient rotation="90">
+				<s:GradientEntry color="0xFFFFFF" 
+								 color.over="0xBBBDBD" 
+								 color.down="0xAAAAAA" 
+								 alpha="0.85" />
+				<s:GradientEntry color="0xD8D8D8" 
+								 color.over="0x9FA0A1" 
+								 color.down="0x929496" 
+								 alpha="0.85" />
+			</s:LinearGradient>
+		</s:fill>
+	</s:Rect>
+	
+	<!-- layer 3: fill lowlight -->
+	<s:Rect left="1" right="1" bottom="1" height="9" radiusX="2" radiusY="2">
+		<s:fill>
+			<s:LinearGradient rotation="90">
+				<s:GradientEntry color="0x000000" alpha="0.0099" />
+				<s:GradientEntry color="0x000000" alpha="0.0627" />
+			</s:LinearGradient>
+		</s:fill>
+	</s:Rect>
+	
+	<!-- layer 4: fill highlight -->
+	<s:Rect left="1" right="1" top="1" height="9" radiusX="2" radiusY="2">
+		<s:fill>
+			<s:SolidColor color="0xFFFFFF" 
+						  alpha="0.33" 
+						  alpha.over="0.22" 
+						  alpha.down="0.12" />
+		</s:fill>
+	</s:Rect>
+	
+	
+	<!-- layer 5: highlight stroke (all states except down) -->
+	<s:Rect left="1" right="1" top="1" bottom="1" radiusX="2" radiusY="2" excludeFrom="down">
+		<s:stroke>
+			<s:LinearGradientStroke rotation="90" weight="1">
+				<s:GradientEntry color="0xFFFFFF" alpha.over="0.22" />
+				<s:GradientEntry color="0xD8D8D8" alpha.over="0.22" />
+			</s:LinearGradientStroke>
+		</s:stroke>
+	</s:Rect>
+	
+	
+	<!-- layer 6: highlight stroke (down state only) -->
+	<s:Rect left="1" top="1" bottom="1" width="1" includeIn="down">
+		<s:fill>
+			<s:SolidColor color="0x000000" alpha="0.07" />
+		</s:fill>
+	</s:Rect>
+	
+	<s:Rect right="1" top="1" bottom="1" width="1" includeIn="down">
+		<s:fill>
+			<s:SolidColor color="0x000000" alpha="0.07" />
+		</s:fill>
+	</s:Rect>
+	
+	<s:Rect left="2" top="1" right="2" height="1" includeIn="down">
+		<s:fill>
+			<s:SolidColor color="0x000000" alpha="0.25" />
+		</s:fill>
+	</s:Rect>
+	
+	<s:Rect left="1" top="2" right="1" height="1" includeIn="down">
+		<s:fill>
+			<s:SolidColor color="0x000000" alpha="0.09" />
+		</s:fill>
+	</s:Rect>
+	
+	<!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 -->
+	<s:Rect left="0" right="0" top="0" bottom="0" width="69" height="20" radiusX="2" radiusY="2">
+		<s:stroke>
+			<s:LinearGradientStroke rotation="90" weight="1">
+				<s:GradientEntry color="0x000000" 
+								 alpha="0.5625"
+								 alpha.down="0.6375" />
+				<s:GradientEntry color="0x000000" 
+								 alpha="0.75" 
+								 alpha.down="0.85" />
+			</s:LinearGradientStroke>
+		</s:stroke>
+	</s:Rect>
+	
+	<!-- layer 8: text -->
+	<!--- 
+	@copy spark.components.supportClasses.ButtonBase#labelDisplay
+	-->
+	<s:Rect left="0" top="0" right="0" bottom="0" >
+		<s:fill>
+			<s:BitmapFill source="@Embed('../assets/icon_close16.png')"/>
+		</s:fill>
+	</s:Rect>
+	 
+	<s:Label id="labelDisplay"
+				  textAlign="center"
+				  verticalAlign="middle"
+				  maxDisplayedLines="1"
+				  horizontalCenter="0" verticalCenter="1"
+				  left="10" right="10" top="2" bottom="2">
+	</s:Label>
+</s:SparkSkin>
diff --git a/tourdeflexmodules/src/spark/skinning/skins/CustomControlBarAppSkin.mxml b/tourdeflexmodules/src/spark/skinning/skins/CustomControlBarAppSkin.mxml
new file mode 100644
index 0000000..4138d79
--- /dev/null
+++ b/tourdeflexmodules/src/spark/skinning/skins/CustomControlBarAppSkin.mxml
@@ -0,0 +1,106 @@
+<?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.
+
+-->
+
+
+<!--- The default skin class for the Spark Application component. 
+
+@langversion 3.0
+@playerversion Flash 10
+@playerversion AIR 1.5
+@productversion Flex 4
+-->
+<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
+		alpha.disabled="0.5" >
+	
+	<fx:Metadata>
+		<![CDATA[ 
+		/** 
+		* A strongly typed property that references the component to which this skin is applied.
+		*/
+		[HostComponent("spark.components.Application")]
+		]]>
+	</fx:Metadata> 
+	
+	<s:states>
+		<s:State name="normal" />
+		<s:State name="disabled" />
+		<s:State name="normalWithControlBar" />
+		<s:State name="disabledWithControlBar" />
+	</s:states>
+	
+	<!-- fill -->
+	<!--- 
+	A rectangle with a solid color fill that forms the background of the application.
+	The color of the fill is set to the Application's backgroundColor property.
+	-->
+	<s:Rect id="backgroundRect" left="0" right="0" top="0" bottom="0"  >
+		<s:fill>
+			<s:SolidColor color="0xFFFFFF" alpha="0" />
+		</s:fill>
+	</s:Rect>
+	
+	<s:Group left="0" right="0" top="0" bottom="0">
+		<s:layout>
+			<s:VerticalLayout gap="0" horizontalAlign="justify" />
+		</s:layout>
+		
+		<!--- 
+		Application Control Bar
+		-->
+		<s:Group id="topGroup" minWidth="0" minHeight="0"
+				 includeIn="normalWithControlBar, disabledWithControlBar">
+			
+			<!-- layer 0: control bar background -->
+			<s:Rect left="0" right="0" bottom="0" top="1" >
+				<s:fill>
+					<!-- ADDED CUSTOM GRADIENT FILL ON THE CONTROL BAR FOR SAMPLE -->
+						<s:LinearGradient rotation="90">
+							<s:entries>
+								<s:GradientEntry color="0x000000" ratio="0.00" alpha="0.8"/>
+								<s:GradientEntry color="0xCCCCCC" ratio="0.5" alpha="0.8"/>
+							</s:entries>
+						</s:LinearGradient>	
+				</s:fill>
+			</s:Rect>
+			
+			<!-- layer 1: control bar divider line -->
+			<s:Rect left="0" right="0" bottom="0" height="1" >
+				<s:fill>
+					<s:SolidColor color="0xD1E0F2" />
+				</s:fill>
+			</s:Rect>
+			
+			<!-- layer 2: control bar -->
+			<!-- Modified the group constraints to set the content 5 pixels from the right for this sample -->
+			<s:Group id="controlBarGroup" right="5">
+				<s:layout>
+					<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="7" paddingBottom="7" gap="10" />
+				</s:layout>
+			</s:Group>
+		</s:Group>
+		
+		<!--- 
+		@copy spark.components.SkinnableContainer#contentGroup
+		-->
+		<s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0" />
+		
+	</s:Group>
+	
+</s:Skin>
diff --git a/tourdeflexmodules/src/spark/skinning/skins/CustomSkinnableContainerSkin.mxml b/tourdeflexmodules/src/spark/skinning/skins/CustomSkinnableContainerSkin.mxml
new file mode 100644
index 0000000..421f82a
--- /dev/null
+++ b/tourdeflexmodules/src/spark/skinning/skins/CustomSkinnableContainerSkin.mxml
@@ -0,0 +1,55 @@
+<?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:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
+		xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled="0.5">
+	
+	<fx:Metadata>
+		<![CDATA[ 
+		[HostComponent("spark.components.SkinnableContainer")]
+		]]>
+	</fx:Metadata> 
+	
+	<s:states>
+		<s:State name="normal" />
+		<s:State name="disabled" />
+	</s:states>
+	
+	<s:Rect left="0" right="0" top="0" bottom="0" radiusX="5" radiusY="5">
+		<s:stroke>
+			<s:LinearGradientStroke weight="2"/>
+		</s:stroke>
+		<s:fill>
+			<s:LinearGradient rotation="90">
+				<s:entries>
+					<s:GradientEntry color="0xCCCCCC"/>
+					<s:GradientEntry color="0x323232" alpha=".8" />
+				</s:entries>
+			</s:LinearGradient>	
+		</s:fill>
+	</s:Rect>
+	
+	<s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" minWidth="0" minHeight="0">
+		<s:layout>
+			<s:BasicLayout/>
+		</s:layout>
+	</s:Group>
+	
+</s:Skin>
diff --git a/tourdeflexmodules/src/spark/skinning/skins/FancyButtonSkin.mxml b/tourdeflexmodules/src/spark/skinning/skins/FancyButtonSkin.mxml
new file mode 100644
index 0000000..c528200
--- /dev/null
+++ b/tourdeflexmodules/src/spark/skinning/skins/FancyButtonSkin.mxml
@@ -0,0 +1,271 @@
+<?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.
+
+-->
+<!--
+@langversion 3.0
+@playerversion Flash 10
+@playerversion AIR 1.5
+@productversion Flex 4
+-->
+<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
+			 minWidth="21" minHeight="21"
+			 alpha.disabled="0.5">
+	
+	<!-- host component -->
+	<fx:Metadata>
+		<![CDATA[ 
+		/** 
+		* @copy spark.skins.spark.ApplicationSkin#hostComponent
+		*/
+		[HostComponent("spark.components.Button")]
+		]]>
+	</fx:Metadata>
+	
+	<fx:Script>
+		<![CDATA[         
+			/* Define the skin elements that should not be colorized. 
+			
+			For button, the graphics are colorized but the label is not. */
+			
+			static private const exclusions:Array = ["labelDisplay"];
+			
+			
+			
+			/** 
+			 
+			 * @copy spark.skins.SparkSkin#colorizeExclusions
+			 
+			 */     
+			
+			override public function get colorizeExclusions():Array {return exclusions;}
+			
+		]]>        
+		
+	</fx:Script>
+	
+	
+	
+	<!-- states -->
+	<s:states>
+		<s:State name="up" />
+		<s:State name="over" />
+		<s:State name="down" />
+		<s:State name="disabled" />
+	</s:states>
+	
+	
+	
+	<!-- layer 1: shadow -->
+	<s:Rect left="-1" right="-1" top="-1" bottom="-1" radiusX="2" radiusY="2">
+		<s:fill>
+			<s:LinearGradient rotation="90">
+				<s:GradientEntry color="0x000000" 
+								 color.down="0xFFFFFF"
+								 alpha="0.01"
+								 alpha.down="0" />
+				<s:GradientEntry color="0x000000" 
+								 color.down="0xFFFFFF" 
+								 alpha="0.07"
+								 alpha.down="0.5" />
+			</s:LinearGradient>
+		</s:fill>
+	</s:Rect>
+	
+	
+	
+	<!-- layer 2: fill -->
+	
+	<s:Rect left="1" right="1" top="1" bottom="1" radiusX="2" radiusY="2">
+		<s:fill>
+			<s:LinearGradient rotation="90">
+				<s:GradientEntry color="0xFFFFFF" 
+								 color.over="0xBBBDBD" 
+								 color.down="0xAAAAAA" 
+								 alpha="0.85" />
+				<s:GradientEntry color="0xD8D8D8" 
+								 color.over="0x9FA0A1" 
+								 color.down="0x929496" 
+								 alpha="0.85" />
+			</s:LinearGradient>
+		</s:fill>
+	</s:Rect>
+	
+	
+	<!-- layer 3: fill lowlight -->
+	
+	<s:Rect left="1" right="1" bottom="1" height="9" radiusX="2" radiusY="2">
+		
+		<s:fill>
+			<s:LinearGradient rotation="90">
+				<s:GradientEntry color="0x000000" alpha="0.0099" />
+				<s:GradientEntry color="0x000000" alpha="0.0627" />
+			</s:LinearGradient>
+		</s:fill>
+	</s:Rect>
+	
+	
+	
+	<!-- layer 4: fill highlight -->
+	
+	<s:Rect left="1" right="1" top="1" height="9" radiusX="2" radiusY="2">
+		<s:fill>
+			<s:SolidColor color="0xFFFFFF" 
+						  alpha="0.33" 
+						  alpha.over="0.22" 
+						  alpha.down="0.12" />
+		</s:fill>
+	</s:Rect>
+	
+	
+	
+	<!-- layer 5: highlight stroke (all states except down) -->
+	<s:Rect left="1" right="1" top="1" bottom="1" radiusX="2" radiusY="2" excludeFrom="down">
+		<s:stroke>
+			<s:LinearGradientStroke rotation="90" weight="1">
+				<s:GradientEntry color="0xFFFFFF" alpha.over="0.22" />
+				<s:GradientEntry color="0xD8D8D8" alpha.over="0.22" />
+			</s:LinearGradientStroke>
+		</s:stroke>
+	</s:Rect>
+	
+	
+	<!-- layer 6: highlight stroke (down state only) -->
+	
+	<s:Rect left="1" top="1" bottom="1" width="1" includeIn="down">
+		<s:fill>
+			<s:SolidColor color="0x000000" alpha="0.07" />
+		</s:fill>
+	</s:Rect>
+	
+	<s:Rect right="1" top="1" bottom="1" width="1" includeIn="down">
+		<s:fill>
+			<s:SolidColor color="0x000000" alpha="0.07" />
+		</s:fill>
+	</s:Rect>
+	
+	<s:Rect left="2" top="1" right="2" height="1" includeIn="down">
+		<s:fill>
+			<s:SolidColor color="0x000000" alpha="0.25" />
+		</s:fill>
+	</s:Rect>
+	
+	<s:Rect left="1" top="2" right="1" height="1" includeIn="down">
+		
+		<s:fill>
+			
+			<s:SolidColor color="0x000000" alpha="0.09" />
+			
+		</s:fill>
+		
+	</s:Rect>
+	
+	
+	
+	<!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 -->
+	
+	<s:Rect left="0" right="0" top="0" bottom="0" width="69" height="20" radiusX="2" radiusY="2">
+		
+		<s:stroke>
+			
+			<s:LinearGradientStroke rotation="90" weight="1">
+				
+				<s:GradientEntry color="0x000000" 
+								 
+								 alpha="0.5625"
+								 
+								 alpha.down="0.6375" />
+				
+				<s:GradientEntry color="0x000000" 
+								 
+								 alpha="0.75" 
+								 
+								 alpha.down="0.85" />
+				
+			</s:LinearGradientStroke>
+			
+		</s:stroke>
+		
+	</s:Rect>
+	
+	
+	
+	<!-- layer 8: text -->
+	
+	<!--- 
+	
+	@copy spark.components.supportClasses.ButtonBase#labelDisplay
+	
+	-->
+	<!--<s:Rect left="1" top="1" width="36" height="16" >
+		<s:fill>
+			<s:BitmapFill source="@Embed('assets/icon_remove.png')">
+			</s:BitmapFill>
+		</s:fill>
+	</s:Rect>-->
+	<!-- The divider between symbol and text -->
+	<!--<s:Line blendMode="overlay" verticalCenter="0" height="90%" left="27">
+		<s:stroke>
+			<s:SolidColorStroke color="#3d3d3d" weight=".25" />
+		</s:stroke>
+	</s:Line>
+	<s:Group id="textGroup" verticalCenter="1" left="33">
+		<s:filters>
+			<s:DropShadowFilter alpha="0.5" blurX="0" blurY="0" distance="1" />
+		</s:filters>  
+		<s:SimpleText id="labelDisplay"
+					  textAlign="center"
+					  verticalAlign="middle"
+					  maxDisplayedLines="1"
+					  horizontalCenter="0" verticalCenter="1"
+					  left="10" right="10" top="2" bottom="2">
+		</s:SimpleText>
+	</s:Group>-->
+	<!-- The divider between symbol and text -->
+	<s:Line blendMode="overlay" verticalCenter="0" height="90%" left="27">
+		<s:stroke>
+			<s:SolidColorStroke color="#3d3d3d" weight=".25" />
+		</s:stroke>
+	</s:Line>
+	
+	<!-- Label with a shadow applied to it. In a group for colorization exclusion -->
+	<s:Group id="textGroup" verticalCenter="1" left="33">
+		<s:filters>
+			<s:DropShadowFilter alpha="0.5" blurX="0" blurY="0" distance="1" />
+		</s:filters>    
+		<s:SimpleText id="labelDisplay"
+					  textAlign="center"
+					  verticalAlign="middle"
+					  lineBreak="toFit"
+					  right="10">
+		</s:SimpleText>
+	</s:Group>
+	
+	<!-- The group with the symbol with a shadow applied to. In a group for colorization exclusion -->
+	<s:Group id="symbol" verticalCenter="0" left="7" top="9" right="7" bottom="7">
+		<s:filters>
+			<s:DropShadowFilter id="dsfSymbol" blurX="0" blurY="0" distance="1"  strength="1" strength.down="0"/>
+		</s:filters>
+		<s:Path winding="nonZero" data="M12.6924 0L5.76855 6.92383 2.30762 3.46191 0 5.76855 3.46191 9.23145 5.76855 11.5391 8.07617 9.23145 15 2.30762 12.6924 0Z" >
+			<s:fill>
+				<s:SolidColor color="#ffffff"/>
+			</s:fill>
+		</s:Path>
+	</s:Group>
+
+</s:SparkSkin>
diff --git a/tourdeflexmodules/src/spark/skinning/skins/GradientBackgroundAppSkin.mxml b/tourdeflexmodules/src/spark/skinning/skins/GradientBackgroundAppSkin.mxml
new file mode 100644
index 0000000..8186b51
--- /dev/null
+++ b/tourdeflexmodules/src/spark/skinning/skins/GradientBackgroundAppSkin.mxml
@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
+		xmlns:mx="library://ns.adobe.com/flex/mx" 
+		xmlns:s="library://ns.adobe.com/flex/spark">
+	
+	<fx:Metadata>
+		[HostComponent("spark.components.Application")]
+	</fx:Metadata> 
+	
+	<s:states>
+		<s:State name="normal" />
+		<s:State name="disabled" />
+	</s:states>
+	
+	<!-- border -->
+	<s:Rect left="10" right="10" top="10" bottom="10" radiusX="9" radiusY="9">
+		<s:stroke>
+			<mx:SolidColorStroke color="0xCCCCCC" alpha=".5" weight="4"/>
+		</s:stroke>
+	</s:Rect>
+
+	<s:Rect id="backgroundRect" left="10" right="10" top="10" bottom="10" radiusX="9" radiusY="9">
+		<s:fill>
+			<s:LinearGradient rotation="90">
+				<s:entries>
+					<s:GradientEntry color="0x0000FF" ratio="0.00" alpha="0.8"/>
+					<s:GradientEntry color="0x336699" ratio="1.0" alpha="0.5"/>
+					<s:GradientEntry color="0xCCCCCC" ratio="0.5" alpha="0.8"/>
+				</s:entries>
+			</s:LinearGradient>	
+		</s:fill>
+	</s:Rect>
+	
+	<s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" />
+</s:SparkSkin>
diff --git a/tourdeflexmodules/src/spark/skinning/skins/IconTextButtonSkin.mxml b/tourdeflexmodules/src/spark/skinning/skins/IconTextButtonSkin.mxml
new file mode 100644
index 0000000..7d4b5af
--- /dev/null
+++ b/tourdeflexmodules/src/spark/skinning/skins/IconTextButtonSkin.mxml
@@ -0,0 +1,195 @@
+<?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.
+
+-->
+<!--
+@langversion 3.0
+@playerversion Flash 10
+@playerversion AIR 1.5
+@productversion Flex 4
+-->
+<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
+			 minWidth="21" minHeight="21"
+			 alpha.disabled="0.5">
+	
+	<!-- host component -->
+	<fx:Metadata>
+		<![CDATA[ 
+		/** 
+		* @copy spark.skins.spark.ApplicationSkin#hostComponent
+		*/
+		[HostComponent("spark.components.Button")]
+		]]>
+	</fx:Metadata>
+	
+	<fx:Script>
+		<![CDATA[         
+			/* Define the skin elements that should not be colorized. 
+			For button, the graphics are colorized but the label is not. */
+			static private const exclusions:Array = ["labelDisplay"];
+			/** 
+			 * @copy spark.skins.SparkSkin#colorizeExclusions
+			 */     
+			override public function get colorizeExclusions():Array {return exclusions;}
+			
+		]]>        
+	</fx:Script>
+	
+	<!-- states -->
+	<s:states>
+		<s:State name="up" />
+		<s:State name="over" />
+		<s:State name="down" />
+		<s:State name="disabled" />
+	</s:states>
+	
+	<!-- layer 1: shadow -->
+	<s:Rect left="-1" right="-1" top="-1" bottom="-1" radiusX="7" radiusY="7">
+		<s:fill>
+			<s:LinearGradient rotation="90">
+				<s:GradientEntry color="0x000000" 
+								 color.down="0xFFFFFF"
+								 alpha="0.01"
+								 alpha.down="0" />
+				<s:GradientEntry color="0x000000" 
+								 color.down="0xFFFFFF" 
+								 alpha="0.07"
+								 alpha.down="0.5" />
+			</s:LinearGradient>
+		</s:fill>
+	</s:Rect>
+	
+	
+	<!-- layer 2: fill -->
+	<s:Rect left="1" right="1" top="1" bottom="1" radiusX="7" radiusY="7">
+		<s:fill>
+			<s:LinearGradient rotation="90">
+				<s:GradientEntry color="0xFFFFFF" 
+								 color.over="0xBBBDBD" 
+								 color.down="0xAAAAAA" 
+								 alpha="0.85" />
+				<s:GradientEntry color="0xD8D8D8" 
+								 color.over="0x9FA0A1" 
+								 color.down="0x929496" 
+								 alpha="0.85" />
+			</s:LinearGradient>
+		</s:fill>
+	</s:Rect>
+	
+	
+	<!-- layer 3: fill lowlight -->
+	<s:Rect left="1" right="1" bottom="1" height="9" radiusX="7" radiusY="7">
+		
+		<s:fill>
+			<s:LinearGradient rotation="90">
+				<s:GradientEntry color="0x000000" alpha="0.0099" />
+				<s:GradientEntry color="0x000000" alpha="0.0627" />
+			</s:LinearGradient>
+		</s:fill>
+	</s:Rect>
+	
+	<!-- layer 4: fill highlight -->
+	<s:Rect left="1" right="1" top="1" height="9" radiusX="7" radiusY="7">
+		<s:fill>
+			<s:SolidColor color="0xFFFFFF" 
+						  alpha="0.33" 
+						  alpha.over="0.22" 
+						  alpha.down="0.12" />
+		</s:fill>
+	</s:Rect>
+	
+	
+	<!-- layer 5: highlight stroke (all states except down) -->
+	<s:Rect left="1" right="1" top="1" bottom="1" radiusX="7" radiusY="7" excludeFrom="down">
+		<s:stroke>
+			<s:LinearGradientStroke rotation="90" weight="1">
+				<s:GradientEntry color="0xFFFFFF" alpha.over="0.22" />
+				<s:GradientEntry color="0xD8D8D8" alpha.over="0.22" />
+			</s:LinearGradientStroke>
+		</s:stroke>
+	</s:Rect>
+	
+	
+	<!-- layer 6: highlight stroke (down state only) -->
+	<s:Rect left="1" top="1" bottom="1" width="1" includeIn="down">
+		<s:fill>
+			<s:SolidColor color="0x000000" alpha="0.07" />
+		</s:fill>
+	</s:Rect>
+	
+	<s:Rect right="1" top="1" bottom="1" width="1" includeIn="down">
+		<s:fill>
+			<s:SolidColor color="0x000000" alpha="0.07" />
+		</s:fill>
+	</s:Rect>
+	
+	<s:Rect left="2" top="1" right="2" height="1" includeIn="down">
+		<s:fill>
+			<s:SolidColor color="0x000000" alpha="0.25" />
+		</s:fill>
+	</s:Rect>
+	
+	<s:Rect left="1" top="2" right="1" height="1" includeIn="down">
+		<s:fill>
+			<s:SolidColor color="0x000000" alpha="0.09" />
+		</s:fill>
+	</s:Rect>
+	
+	
+	<!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 -->
+	<s:Rect left="0" right="0" top="0" bottom="0" width="69" height="20" radiusX="7" radiusY="7">
+		<s:stroke>
+			<s:LinearGradientStroke rotation="90" weight="1">
+				<s:GradientEntry color="0x000000" 
+								 alpha="0.5625"
+								 alpha.down="0.6375" />
+				<s:GradientEntry color="0x000000" 
+								 alpha="0.75" 
+								 alpha.down="0.85" />
+			</s:LinearGradientStroke>
+		</s:stroke>
+	</s:Rect>
+	
+	<!-- icon/symbol layer -->
+	<s:Group id="symbol" left="7" top="7" right="3" bottom="3">
+		<s:filters>
+			<s:DropShadowFilter alpha="0.5" blurX="0" blurY="0" distance="1" />
+		</s:filters> 
+		<s:BitmapImage source="@Embed('../assets/icon_plus.png')"/>
+		
+	</s:Group>
+	
+	<!-- The divider between symbol and text -->
+	<s:Line blendMode="overlay" verticalCenter="0" height="90%" left="20">
+		<s:stroke>
+			<s:SolidColorStroke color="#3d3d3d" weight=".25" />
+		</s:stroke>
+	</s:Line>
+	
+	<!-- layer 8: text -->
+	<s:Group id="textGroup" verticalCenter="1" left="25">
+		<s:filters>
+			<s:DropShadowFilter alpha="0.5" blurX="0" blurY="0" distance="1" />
+		</s:filters>  
+		<s:Label id="labelDisplay" 
+			textAlign="center"
+			verticalAlign="middle"
+			maxDisplayedLines="1">
+		</s:Label>
+	</s:Group>
+</s:SparkSkin>
diff --git a/tourdeflexmodules/src/spark/skinning/skins/MyPanelSkin.mxml b/tourdeflexmodules/src/spark/skinning/skins/MyPanelSkin.mxml
new file mode 100644
index 0000000..300af66
--- /dev/null
+++ b/tourdeflexmodules/src/spark/skinning/skins/MyPanelSkin.mxml
@@ -0,0 +1,101 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+
+
+<!--- The default skin class for a Spark Panel container.  
+
+@langversion 3.0
+@playerversion Flash 10
+@playerversion AIR 1.5
+@productversion Flex 4
+-->
+<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled="0.5" blendMode="normal">
+	
+	<fx:Metadata>
+		<![CDATA[ 
+		/** 
+		* @copy spark.skins.spark.ApplicationSkin#hostComponent
+		*/
+		[HostComponent("spark.components.Panel")]
+		]]>
+	</fx:Metadata> 
+	
+	<fx:Script>
+		/* Define the skin elements that should not be colorized. 
+		For panel, border and title backround are skinned, but the content area and title text are not. */
+		static private const exclusions:Array = ["background", "titleDisplay", "contentGroup", "bgfill"];
+		
+		/** 
+		 * @copy spark.skins.SparkSkin#colorizeExclusions
+		 */     
+		override public function get colorizeExclusions():Array {return exclusions;}
+		
+		/* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
+		static private const contentFill:Array = [];
+		
+		/**
+		 * @inheritDoc
+		 */
+		override public function get contentItems():Array {return contentFill};
+	</fx:Script>
+	
+	<s:states>
+		<s:State name="normal" />
+		<s:State name="disabled" />
+	</s:states>
+	
+	<!-- background fill -->
+	<s:Rect left="0" right="0" bottom="0" top="0" >
+		<s:fill>
+			<s:LinearGradient rotation="90" >
+				<s:GradientEntry color="0xFFFFFF" />
+				<s:GradientEntry color="0x000000" />
+			</s:LinearGradient>
+		</s:fill>
+	</s:Rect>
+	
+	<!-- title bar fill -->
+	<s:Rect left="0" right="0" top="0" height="30">
+		<s:fill>
+			<s:LinearGradient rotation="90">
+				<s:GradientEntry color="0x000000" />
+				<s:GradientEntry color="0xC0C0C0" />
+			</s:LinearGradient>
+		</s:fill>
+	</s:Rect>
+	
+	
+	<!-- text layer -->
+	<!--- Defines the appearance of the PanelSkin class's title bar. -->
+	<s:SimpleText id="titleDisplay" lineBreak="explicit"
+				  right="4" top="2" height="30"
+				  verticalAlign="middle" fontWeight="bold" 
+				  color="0xE2E2E2">
+	</s:SimpleText>
+	
+	<!--
+	Note: setting the minimum size to 0 here so that changes to the host component's
+	size will not be thwarted by this skin part's minimum size.   This is a compromise,
+	more about it here: http://bugs.adobe.com/jira/browse/SDK-21143
+	-->
+	<s:Group id="contentGroup" left="1" right="1" top="32" bottom="1" minWidth="0" minHeight="0">
+	</s:Group>
+	
+</s:SparkSkin>
diff --git a/tourdeflexmodules/src/spark/states/AnimateShaderTransitionEffect.mxml b/tourdeflexmodules/src/spark/states/AnimateShaderTransitionEffect.mxml
new file mode 100644
index 0000000..c4e744e
--- /dev/null
+++ b/tourdeflexmodules/src/spark/states/AnimateShaderTransitionEffect.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" 
+			   backgroundColor="0x000000">
+	
+	<s:states>
+		<s:State name="default"/>
+		<s:State name="flipped"/>
+	</s:states>
+	
+	<s:transitions>
+		<s:Transition id="t1">
+			<s:AnimateTransitionShader
+				target="{holder}"
+				duration="1000" 
+				shaderByteCode="@Embed(source='assets/twist.pbj', mimeType='application/octet-stream')"/>
+		</s:Transition>
+	</s:transitions>
+	
+	<s:HGroup left="190" top="7">
+		<s:Group id="holder">
+			<s:BitmapImage
+				source="@Embed('assets/back.png')"
+				visible="true" visible.flipped="false"/>
+			<s:BitmapImage
+				source="@Embed('assets/c1.png')"
+				visible="false" visible.flipped="true"/>
+		</s:Group>
+	</s:HGroup>
+	<s:VGroup top="10" right="5" width="30%">
+		<s:Label text="AnimateShaderTransition Sample" fontSize="18"/>
+		<s:Label color="#FFFFFF" width="200" verticalAlign="justify"
+				 text="AnimateShaderTransition animates a shader between two images. Click the button below to see the effect."/>
+		<s:Button id="playButton"
+				  label="Play Animation"
+				  click="currentState = (currentState == 'flipped') ? 'default' : 'flipped'" />
+	</s:VGroup>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/states/assets/back.png b/tourdeflexmodules/src/spark/states/assets/back.png
new file mode 100644
index 0000000..19367fb
--- /dev/null
+++ b/tourdeflexmodules/src/spark/states/assets/back.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/TextLayoutEditorCanvas.mxml b/tourdeflexmodules/src/spark/tlf/TextLayoutEditorCanvas.mxml
new file mode 100644
index 0000000..bda3699
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/TextLayoutEditorCanvas.mxml
@@ -0,0 +1,439 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+
+
+
+
+<mx:Canvas
+    xmlns="http://ns.adobe.com/mxml/2009"
+ 	xmlns:mx="library://ns.adobe.com/flex/mx"
+	xmlns:flow="library://ns.adobe.com/flashx/textLayout"
+	xmlns:textEditBar="textEditBar.*"
+	xmlns:txui="flashx.textLayout.ui.*"
+	xmlns:txrulers="flashx.textLayout.ui.rulers.*"
+	xmlns:txinsp="flashx.textLayout.ui.inspectors.*"
+	explicitMinWidth="300" 
+	explicitMinHeight="200"
+	creationComplete="handleCreationComplete()"
+	resize="handleResize()">
+	
+		
+    <Script><![CDATA[
+		import flashx.textLayout.container.ContainerController;
+		import flashx.textLayout.debug.assert;
+		import flashx.textLayout.edit.EditManager;
+		import flashx.textLayout.edit.EditingMode;
+		import flashx.textLayout.edit.ElementRange;
+		import flashx.textLayout.edit.ISelectionManager;
+		import flashx.textLayout.edit.SelectionFormat;
+		import flashx.textLayout.edit.SelectionManager;
+		import flashx.textLayout.edit.SelectionState;
+		import flashx.textLayout.elements.Configuration;
+		import flashx.textLayout.elements.InlineGraphicElementStatus;
+		import flashx.textLayout.elements.ParagraphElement;
+		import flashx.textLayout.elements.SpanElement;
+		import flashx.textLayout.elements.TextFlow;
+		import flashx.textLayout.events.SelectionEvent;
+		import flashx.textLayout.events.StatusChangeEvent;
+		import flashx.textLayout.formats.TextLayoutFormat;
+		import flashx.undo.IUndoManager;
+		import flashx.undo.UndoManager;
+		
+		import textEditBar.FileIOHelper;
+		import flashx.textLayout.ui.inspectors.TextInspectorController;
+		
+		import mx.events.IndexChangedEvent;
+				
+		private var resizeOK:Boolean;
+		public var activeFlow:TextFlow;
+
+		// undo/redo manager
+		private var undoManager:IUndoManager;
+		
+		private var bottomPanels:Array = [];
+		
+		
+		public function handleCreationComplete(): void
+		{
+			initializeConfiguration();
+			FileIOHelper.parentWindow = this;
+			FileIOHelper.changeContent = changeContent;
+					
+			resizeOK = true;
+			handleResize();
+ 			 			
+ 			undoManager = new UndoManager();
+  			 			
+			hruler.creationComplete();
+ 			vruler.creationComplete();
+ 			
+ 			var numPanels:int = bottomTabs.numChildren;
+ 			for (var i:int = 0; i < numPanels; ++i)
+ 			{
+ 				var panel:Canvas = bottomTabs.getChildAt(i) as Canvas;
+ 				bottomPanels.push(panel.getChildAt(0));
+ 				if (i > 0)
+ 					panel.removeAllChildren();
+ 			}
+  			bottomTabs.addEventListener(IndexChangedEvent.CHANGE, onBottomTabChanged);
+  			
+  			this.addEventListener(Event.ACTIVATE, onFocus); 
+  			
+			changeContent(createEmptyFlow());
+			callLater(doFocus);
+		}
+		
+		private function doFocus():void
+		{
+			if (activeFlow)
+			{
+				var selMgr:ISelectionManager = activeFlow.interactionManager;
+				if (selMgr && textPanel.visible)
+					selMgr.setFocus();
+			}
+		}
+		private function createEmptyFlow():TextFlow
+		{
+			var newFlow:TextFlow = new TextFlow();
+			var para:ParagraphElement = new ParagraphElement();
+			para.addChild(new SpanElement());
+			newFlow.addChild(para);
+			return newFlow;
+		}
+ 		
+ 		private function initializeConfiguration():void
+ 		{
+ 			var config:Configuration = TextFlow.defaultConfiguration;
+			config.unfocusedSelectionFormat = new SelectionFormat(0xffffff, 1.0, BlendMode.DIFFERENCE, 0xffffff, 1.0, BlendMode.DIFFERENCE, 0);
+			config.inactiveSelectionFormat = new SelectionFormat(0xffffff, 1.0, BlendMode.DIFFERENCE, 0xffffff, 1.0, BlendMode.DIFFERENCE, 0);
+			config.manageTabKey = true;
+			var initialFormat:TextLayoutFormat = new TextLayoutFormat();
+			initialFormat.fontFamily = "Arial";
+			initialFormat.fontSize = 16;
+			initialFormat.paddingLeft = 2;
+			initialFormat.paddingTop = 2;
+			initialFormat.paddingRight = 2;
+			initialFormat.paddingBottom = 2;
+			config.textFlowInitialFormat = initialFormat;
+		}
+ 		
+ 		private function onFocus(event:Event):void
+ 		{
+ 			if (activeFlow)
+ 			{
+	 			var selMgr:ISelectionManager = activeFlow.interactionManager;
+	 			if(selMgr)
+	 				selMgr.setFocus();
+	 		}
+ 			
+ 		}
+ 		private function onBottomTabChanged(evt:IndexChangedEvent):void
+ 		{
+ 			var panel:Canvas = bottomTabs.getChildAt(evt.oldIndex) as Canvas;
+ 			panel.removeAllChildren();
+ 			panel = bottomTabs.getChildAt(evt.newIndex) as Canvas;
+ 			panel.addChild(bottomPanels[evt.newIndex]);
+ 		}
+ 		
+  		private var editingMode:String = EditingMode.READ_WRITE;
+ 		
+		private function keyListener(event:KeyboardEvent):void
+ 		{
+			if (event.keyCode == Keyboard.ESCAPE)
+				activeFlow.interactionManager.selectRange(-1,-1);
+ 		}
+ 		
+ 		private function updateEscapeKeyListener():void
+ 		{
+ 			for (var i:int = 0; i < activeFlow.flowComposer.numControllers; i++)
+ 			{
+ 				var controller:ContainerController = activeFlow.flowComposer.getControllerAt(i);
+ 				var container:DisplayObject = controller.container as DisplayObject;
+ 				if (activeFlow.interactionManager)
+ 					container.addEventListener(KeyboardEvent.KEY_DOWN, keyListener,false,0,true);
+ 				else 
+ 					container.removeEventListener(KeyboardEvent.KEY_DOWN, keyListener);
+ 			}
+ 		}		
+
+		public function setActiveFlow(newActiveFlow:TextFlow):void
+		{
+			TextInspectorController.Instance().activeFlow = newActiveFlow;
+			for (var i:int = bottomPanels.length - 1; i >= 0; --i)
+				bottomPanels[i].activeFlow = newActiveFlow;
+		}
+		
+ 		public function setInteractionManager(selectType:String):void
+ 		{
+			editingMode = selectType;
+			var uiActiveFlow:TextFlow = null;
+
+ 			if (activeFlow)	
+ 			{
+	 			switch (selectType)
+	 			{
+	 				case EditingMode.READ_ONLY:
+						if (activeFlow.interactionManager)
+							activeFlow.interactionManager = null;
+						break;
+					case EditingMode.READ_WRITE:
+						// either direction should work.
+						new EditManager(undoManager).textFlow = activeFlow;
+						activeFlow.interactionManager = new EditManager(undoManager);
+						
+						activeFlow.addEventListener(SelectionEvent.SELECTION_CHANGE,mySelectionChangeListener,false,0,true);
+						uiActiveFlow = activeFlow;
+						activeFlow.interactionManager.selectRange(0, 0);
+						break;
+					case EditingMode.READ_SELECT:
+						activeFlow.interactionManager = new SelectionManager();
+						activeFlow.addEventListener(SelectionEvent.SELECTION_CHANGE,mySelectionChangeListener,false,0,true);
+						break;
+				}
+				setActiveFlow(uiActiveFlow);
+				updateEscapeKeyListener();
+				updateForSelectedElementRange(new SelectionState( activeFlow, 0, 0));
+ 			}
+		}
+	
+	
+ 		private function mySelectionChangeListener(e:SelectionEvent):void
+ 		{
+  			updateForSelectedElementRange(e ? e.selectionState : null);
+ 		}
+ 		
+ 		/**
+ 		* Update the GUI for a particular selection range.
+ 		* @private
+ 		* @param range may be null
+ 		*/
+ 		private function updateForSelectedElementRange(selectionState:SelectionState):void
+ 		{
+ 			var range:ElementRange = selectionState ? ElementRange.createElementRange(selectionState.textFlow, selectionState.absoluteStart, selectionState.absoluteEnd) : null;
+ 			var selMgr:ISelectionManager = activeFlow.interactionManager;
+ 			
+			for (var i:int = bottomPanels.length - 1; i >= 0; --i)
+				bottomPanels[i].update(range);
+
+			if (selMgr && textPanel.visible)
+				selMgr.setFocus();
+ 		}
+ 		
+ 		/** handleResize - resize the child containers
+ 		  * @param alwaysResize - do the recalucation no matter if the size didn't change 
+ 		  */
+ 		public function handleResize():void
+		{
+			if (resizeOK && activeFlow)
+			{
+			 	vruler.RedrawRuler();
+		 		hruler.RedrawRuler();		
+			}
+		}
+		
+		public function detachActiveFlow(deleteTheComposer:Boolean):void
+		{
+			if (activeFlow && activeFlow.flowComposer != null)
+			{
+				// Detach the containers from the display list
+				for (var idx:int = 0; idx < activeFlow.flowComposer.numControllers; idx++)
+				{
+					var controller:ContainerController = activeFlow.flowComposer.getControllerAt(idx);
+					var oldContainer:DisplayObject = controller.container;
+					if (oldContainer && oldContainer.parent)
+					{
+						Canvas(oldContainer.parent).rawChildren.removeChild(oldContainer);
+					}
+				}
+				activeFlow.flowComposer.removeAllControllers();
+				
+				// also shuts down inline graphics - need another API if we want to do this another way
+				if (deleteTheComposer)
+					activeFlow.flowComposer = null;
+			}		
+		}
+		
+		private function recomposeOnLoadComplete(e:StatusChangeEvent):void
+		{
+			if (e.status == InlineGraphicElementStatus.ERROR)
+				trace("IOERROR loading inlinegraphicelement",e.errorEvent.toString());
+			if (e.element.getTextFlow() == activeFlow && e.status == InlineGraphicElementStatus.SIZE_PENDING)
+				activeFlow.flowComposer.updateAllControllers();
+		}
+		
+		public function changeContent(newFlow:TextFlow):void
+		{
+			// Remove old containers from the display list
+			if (undoManager != null) 
+				undoManager.clearAll();
+			if (activeFlow)
+			{
+				detachActiveFlow(true);
+				activeFlow.removeEventListener(StatusChangeEvent.INLINE_GRAPHIC_STATUS_CHANGE,recomposeOnLoadComplete);
+			}
+			
+			// set activeFlow (note: this variable is used in the mxml code below.)
+			activeFlow = newFlow;
+			if (!activeFlow)
+				return;
+				
+			activeFlow.addEventListener(StatusChangeEvent.INLINE_GRAPHIC_STATUS_CHANGE,recomposeOnLoadComplete,false,0,true);
+			
+			textPanel.changeContainerSetup(activeFlow);
+
+			activeFlow.interactionManager = new EditManager(undoManager);
+			activeFlow.addEventListener(SelectionEvent.SELECTION_CHANGE,mySelectionChangeListener,false,0,true);
+			setActiveFlow(activeFlow);
+			activeFlow.interactionManager.selectRange(0, 0);
+			updateEscapeKeyListener();
+			activeFlow.flowComposer.updateAllControllers();
+
+ 			vruler.RedrawRuler();
+ 			hruler.RedrawRuler();
+ 		}
+ 		
+		/** visiblePanels is an array of the labels of the right-side property panels that are opened.
+		 * if you set it, the panels specified will be opened and all others will be closed.
+		 */
+		public function set visiblePanels(inPanelNames:Array):void
+		{
+			var panels:Array = inspectorBox.getChildren();
+			for each(var panel:DisplayObject in panels)
+			{
+				if (panel is MultiPanel)
+				{
+					var mp:MultiPanel = panel as MultiPanel;
+					mp.opened = (inPanelNames.indexOf(mp.label) != -1);
+				}
+			}
+		}
+		
+		public function get visiblePanels():Array
+		{
+			var result:Array = [];
+			var panels:Array = inspectorBox.getChildren();
+			for each(var panel:DisplayObject in panels)
+			{
+				if (panel is MultiPanel)
+				{
+					var mp:MultiPanel = panel as MultiPanel;
+					if (mp.opened)
+						result.push(mp.label);
+				}
+			}
+			return result;
+		}
+		
+       ]]>
+    </Script>
+	
+	<mx:VBox
+		width="100%"
+		height="100%" 
+		verticalGap="2"
+		backgroundColor="0x607D8A"
+		fontFamily="Myriad Pro"
+		fontWeight="bold">
+		<mx:HBox
+			width="100%"
+			height="100%"
+			horizontalGap="4">
+			<txui:PanelWithEdgeBars
+				id="panelWithScrollBars"
+				width="100%"
+				height="100%"
+				edgeInset="18"
+				gap="1"
+				mainPanel="{textPanel}"
+				topBar="{horizontalRulerBar}"
+				rightBar="{verticalRulerBar}">
+				
+				<textEditBar:SingleContainerView id="textPanel"/>
+
+				<mx:Canvas
+					id="verticalRulerBar"
+					verticalScrollPolicy="off"
+					horizontalScrollPolicy="off">
+					<txrulers:RulerBar
+						id="vruler"
+						orientation="vertical"
+						syncToPanel="{textPanel}"
+						tabPropertyEditor="{tabPropEditor}"
+						tabPanelActive="{tabPanel.opened}">
+					</txrulers:RulerBar>
+				</mx:Canvas>
+				<mx:Canvas
+					id="horizontalRulerBar"
+					verticalScrollPolicy="off"
+					horizontalScrollPolicy="off">
+					<txrulers:RulerBar
+						id="hruler"
+						syncToPanel="{textPanel}"
+						tabPropertyEditor="{tabPropEditor}"
+						tabPanelActive="{tabPanel.opened}">
+					</txrulers:RulerBar>
+				</mx:Canvas>
+			</txui:PanelWithEdgeBars>
+			<mx:Canvas
+				width="270"
+				height="100%"
+				horizontalScrollPolicy="off"
+				backgroundColor="#D9D9D9"
+				verticalScrollBarStyleName="scrollbarStyle">
+				<mx:VBox id="inspectorBox" verticalGap="1" width="100%" backgroundColor="#D9D9D9">
+				    <txui:MultiPanel id="charPanel" styleName="multiPanel" label="CHARACTER" width="100%">
+				    	<txinsp:CharacterPropertyEditor active="{charPanel.opened}"/>
+				    </txui:MultiPanel>	
+				    <txui:MultiPanel id="parPanel" styleName="multiPanel" label="PARAGRAPH" width="100%">
+				    	<txinsp:ParagraphPropertyEditor active="{parPanel.opened}"/>
+				    </txui:MultiPanel>
+				    <txui:MultiPanel id="tabPanel" styleName="multiPanel" label="TAB" width="100%" opened="false">
+				    	<txinsp:TabPropertyEditor id="tabPropEditor"/>
+				    </txui:MultiPanel>
+				    <txui:MultiPanel id="advancedPanel" styleName="multiPanel" label="ADVANCED CHARACTER" width="100%" opened="false">
+				    	<txinsp:AdvancedTextPropertyEditor active="{advancedPanel.opened}"/>
+				    </txui:MultiPanel>
+				    <txui:MultiPanel id="antialiasPanel" styleName="multiPanel" label="ANTIALIAS" width="100%" opened="false">
+				    	<txinsp:AntiAliasPropertyEditor active="{antialiasPanel.opened}"/>
+				    </txui:MultiPanel>
+				    <txui:MultiPanel id="containerPanel" styleName="multiPanel" label="CONTAINER" width="100%" opened="false">
+				    	<txinsp:TextContainerPropertyEditor active="{containerPanel.opened}"/>
+				    </txui:MultiPanel>
+				    <txui:MultiPanel id="flowPanel" styleName="multiPanel" label="FLOW" width="100%" opened="false">
+				    	<txinsp:TextFlowPropertyEditor active="{flowPanel.opened}"/>
+				    </txui:MultiPanel>
+				</mx:VBox>
+			</mx:Canvas>
+		</mx:HBox>
+		<mx:TabNavigator id="bottomTabs" width="100%" creationPolicy="all" paddingLeft="8" backgroundColor="#D9D9D9" color="#202020">
+			<mx:Canvas label="SOURCE" width="100%" height="28">
+	 			<textEditBar:FileServices id="fileWidget" fileChoose="FileIOHelper.fileChoose(event.fileName)" textLayoutExport="FileIOHelper.textLayoutExport(activeFlow)" htmlExport="FileIOHelper.htmlExport(activeFlow)" includeInLayout="false" width="100%"/> 
+			</mx:Canvas>
+			<mx:Canvas label="LINKS" width="100%" height="100%">
+   				<textEditBar:LinkBar id="linkElementProps" creationPolicy="all" includeInLayout="false"/>  	
+			</mx:Canvas>
+			<mx:Canvas label="GRAPHICS" width="100%" height="100%">
+				<textEditBar:GraphicBar id="foreignElementProps" creationPolicy="all" includeInLayout="false"/>
+			</mx:Canvas>
+			
+		</mx:TabNavigator>
+	</mx:VBox>
+
+</mx:Canvas>
diff --git a/tourdeflexmodules/src/spark/tlf/TextLayoutEditorSample.mxml b/tourdeflexmodules/src/spark/tlf/TextLayoutEditorSample.mxml
new file mode 100644
index 0000000..d18ae6b
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/TextLayoutEditorSample.mxml
@@ -0,0 +1,29 @@
+<?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="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:local="*">
+	<local:TextLayoutEditorCanvas width="100%" height="100%"/>
+	<Style source="/flashx/textLayout/ui/VellumGUIStyles.css"/>
+	<!--<Style source="VellumGUIStyles.css"/>-->
+</s:Module>
+ 
diff --git a/tourdeflexmodules/src/spark/tlf/assets/%scroll_arrow_down_over.png b/tourdeflexmodules/src/spark/tlf/assets/%scroll_arrow_down_over.png
new file mode 100644
index 0000000..a209b46
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/assets/%scroll_arrow_down_over.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/assets/%scroll_arrow_up_over.png b/tourdeflexmodules/src/spark/tlf/assets/%scroll_arrow_up_over.png
new file mode 100644
index 0000000..5e37d0f
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/assets/%scroll_arrow_up_over.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/assets/combo_drop_down_arrow.png b/tourdeflexmodules/src/spark/tlf/assets/combo_drop_down_arrow.png
new file mode 100644
index 0000000..1b905e8
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/assets/combo_drop_down_arrow.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/assets/header_close_icon.png b/tourdeflexmodules/src/spark/tlf/assets/header_close_icon.png
new file mode 100644
index 0000000..e55928c
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/assets/header_close_icon.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/assets/header_open_icon.png b/tourdeflexmodules/src/spark/tlf/assets/header_open_icon.png
new file mode 100644
index 0000000..d3a1b42
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/assets/header_open_icon.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/assets/scroll_arrow_down.png b/tourdeflexmodules/src/spark/tlf/assets/scroll_arrow_down.png
new file mode 100644
index 0000000..f5d8145
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/assets/scroll_arrow_down.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/assets/scroll_arrow_down_over.png b/tourdeflexmodules/src/spark/tlf/assets/scroll_arrow_down_over.png
new file mode 100644
index 0000000..ef66ac6
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/assets/scroll_arrow_down_over.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/assets/scroll_arrow_up.png b/tourdeflexmodules/src/spark/tlf/assets/scroll_arrow_up.png
new file mode 100644
index 0000000..1d3828d
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/assets/scroll_arrow_up.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/assets/scroll_arrow_up_over.png b/tourdeflexmodules/src/spark/tlf/assets/scroll_arrow_up_over.png
new file mode 100644
index 0000000..2147d32
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/assets/scroll_arrow_up_over.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/flashx/textLayout/UiClasses.as b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/UiClasses.as
new file mode 100644
index 0000000..712e83a
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/UiClasses.as
@@ -0,0 +1,54 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 flashx.textLayout
+{
+	internal class UiClasses
+	{
+		import flashx.textLayout.ui.inspectors.DynamicTextPropertyEditor; DynamicTextPropertyEditor;
+		import flashx.textLayout.ui.inspectors.SelectionUpdateEvent; SelectionUpdateEvent;
+		import flashx.textLayout.ui.inspectors.TextInspectorController; TextInspectorController;
+		import flashx.textLayout.ui.inspectors.CharacterPropertyEditor; CharacterPropertyEditor;
+		import flashx.textLayout.ui.inspectors.LinkPropertyEditor; LinkPropertyEditor;
+		import flashx.textLayout.ui.inspectors.TabPropertyEditor; TabPropertyEditor;
+		import flashx.textLayout.ui.inspectors.AdvancedTextPropertyEditor; AdvancedTextPropertyEditor;
+		import flashx.textLayout.ui.inspectors.AntiAliasPropertyEditor; AntiAliasPropertyEditor;
+		import flashx.textLayout.ui.inspectors.TextContainerPropertyEditor; TextContainerPropertyEditor;
+		import flashx.textLayout.ui.inspectors.TextFlowPropertyEditor; TextFlowPropertyEditor;
+		import flashx.textLayout.ui.inspectors.ParagraphPropertyEditor; ParagraphPropertyEditor;
+		
+		import flashx.textLayout.ui.styles.ScrollbarThumbOverSkin; ScrollbarThumbOverSkin;
+		import flashx.textLayout.ui.styles.ScrollbarTrackSkin; ScrollbarTrackSkin;
+		import flashx.textLayout.ui.styles.ScrollbarThumbUpSkin; ScrollbarThumbUpSkin;
+		import flashx.textLayout.ui.styles.ScrollbarDownArrowUpSkin; ScrollbarDownArrowUpSkin;
+		import flashx.textLayout.ui.styles.ScrollbarUpArrowUpSkin; ScrollbarUpArrowUpSkin;
+		import flashx.textLayout.ui.styles.PopupMenuSkin; PopupMenuSkin;
+		
+		import flashx.textLayout.ui.rulers.RulerBar; RulerBar;
+		import flashx.textLayout.ui.rulers.RulerDragTracker; RulerDragTracker;
+		import flashx.textLayout.ui.rulers.RulerMarker; RulerMarker;
+		import flashx.textLayout.ui.rulers.TabMarker; TabMarker;
+		import flashx.textLayout.ui.rulers.TabMarkerSkin; TabMarkerSkin;
+		import flashx.textLayout.ui.rulers.ParagraphPropertyMarker; ParagraphPropertyMarker;
+		import flashx.textLayout.ui.rulers.ParagraphPropertyMarkerSkin; ParagraphPropertyMarkerSkin;
+		
+		import flashx.textLayout.ui.MultiPanel; MultiPanel;
+		import flashx.textLayout.ui.MultiPanelHeaderSkin; MultiPanelHeaderSkin;
+		import flashx.textLayout.ui.PanelWithEdgeBars; PanelWithEdgeBars;
+	}
+}
diff --git a/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/MultiPanel.as b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/MultiPanel.as
new file mode 100644
index 0000000..774031a
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/MultiPanel.as
@@ -0,0 +1,206 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 flashx.textLayout.ui
+{
+	import flash.events.MouseEvent;
+	
+	import mx.controls.Button;
+	import mx.core.EdgeMetrics;
+	import mx.core.LayoutContainer;
+	import mx.core.ScrollPolicy;
+	import mx.effects.Resize;
+	import mx.events.ResizeEvent;
+	
+    [Style(name="openDuration", type="Number", format="Time", inherit="no")]
+    [Style(name="closeDuration", type="Number", format="Time", inherit="no")]
+    [Style(name="headerTextAlign", type="String", inherit="no")]
+
+    public class MultiPanel extends LayoutContainer {
+
+		[Embed (source="assets/header_close_icon.png")]
+		private static var ICON_CLOSE:Class;
+		
+		[Embed (source="assets/header_open_icon.png")]
+		private static var ICON_OPEN:Class;
+		
+		private static var SPACING_TOP:uint = 10;
+		private static var SPACING_BOTTOM:uint = 5;
+		private var _headerButton:Button = null;
+		private var _openedChanged:Boolean = false;
+		private var _opened:Boolean = true;
+		private var _viewMetrics:EdgeMetrics;
+		private var resize:Resize;
+
+		public function MultiPanel() {
+			super();
+
+			this.verticalScrollPolicy = ScrollPolicy.OFF;
+			this.horizontalScrollPolicy = ScrollPolicy.OFF;
+			
+			addEventListener("PropertyEditorChanged", onPropertyEditorChange);
+ 		}
+
+        protected function createOrReplaceHeaderButton():void {
+           if(_headerButton) {
+                _headerButton.removeEventListener(MouseEvent.CLICK, headerButton_clickHandler);
+                
+                if(rawChildren.contains(_headerButton))
+                    rawChildren.removeChild(_headerButton);
+            }
+            
+       	 	_headerButton = new Button();
+            applyHeaderButtonStyles(_headerButton);
+            _headerButton.addEventListener(MouseEvent.CLICK, headerButton_clickHandler);
+            rawChildren.addChild(_headerButton);
+        }
+
+        protected function applyHeaderButtonStyles(button:Button):void {
+            button.setStyle("textAlign", getStyle("headerTextAlign"));
+           	button.styleName = "multiPanelHeader";
+            button.height = getStyle("headerHeight");
+            button.label = label;
+			
+            if(_opened)
+                button.setStyle('icon', ICON_OPEN);
+            else
+                button.setStyle('icon', ICON_CLOSE);
+        }
+
+        override public function set label(value:String):void {
+            super.label = value;
+            if(_headerButton) _headerButton.label = value;
+        }
+
+        public function get opened():Boolean {
+            return _opened;
+        }
+        
+        [Bindable]
+        public function set opened(value:Boolean):void {
+            var old:Boolean = _opened;
+            
+            _opened = value;
+            _openedChanged = _openedChanged || old != _opened;
+           
+            if(_openedChanged && initialized) {
+                measure();
+               	runResizeEffect();
+                
+                invalidateProperties();
+            }
+        }
+
+        override public function styleChanged(styleProp:String):void {
+            super.styleChanged(styleProp);
+            
+            if(styleProp == "headerTextAlign") {
+                applyHeaderButtonStyles(_headerButton);
+            }
+            
+            invalidateDisplayList();
+        }
+
+        override protected function createChildren():void {
+            super.createChildren();
+         
+            createOrReplaceHeaderButton();
+        }
+
+        override protected function commitProperties():void {
+			super.commitProperties();
+						
+            if(_openedChanged) {
+                if(_opened)
+                    _headerButton.setStyle('icon', ICON_OPEN);
+                else
+                    _headerButton.setStyle('icon', ICON_CLOSE);
+                
+                _openedChanged = false;
+            }
+        }
+
+        override protected function updateDisplayList(w:Number, h:Number):void {
+            super.updateDisplayList(w, h);
+            
+			_headerButton.move(0,0);
+			_headerButton.setActualSize(w, _headerButton.getExplicitOrMeasuredHeight());
+        }
+
+		override public function get viewMetrics():EdgeMetrics {
+	        if (!_viewMetrics)
+	            _viewMetrics = new EdgeMetrics(0, 0, 0, 0);
+	        
+	        var edgeMetrics:EdgeMetrics = _viewMetrics;
+	        var parentEdgeMetrics:EdgeMetrics = super.viewMetrics;
+	        
+	        edgeMetrics.left = parentEdgeMetrics.left;
+	        edgeMetrics.top = parentEdgeMetrics.top + SPACING_TOP;
+	        edgeMetrics.right = parentEdgeMetrics.right;
+	        edgeMetrics.bottom = parentEdgeMetrics.bottom + SPACING_BOTTOM;
+	        
+	        var headerHeight:Number = _headerButton.getExplicitOrMeasuredHeight();
+	        if (!isNaN(headerHeight)) {
+	        	edgeMetrics.top += headerHeight;
+	        }
+
+	        return edgeMetrics;
+    	}
+
+        override protected function measure():void {
+            super.measure();
+            
+            if(!_opened) {
+            	//only the height of the header button
+            	measuredHeight = _headerButton.getExplicitOrMeasuredHeight();
+            }
+        }
+		
+        protected function runResizeEffect():void {
+			if(resize && resize.isPlaying)
+				resize.end();
+			
+            var duration:Number = _opened ? getStyle("openDuration") : getStyle("closeDuration");
+            if(duration == 0) { 
+            	this.setActualSize(getExplicitOrMeasuredWidth(), measuredHeight);
+            	
+            	invalidateSize();
+            	invalidateDisplayList();
+            }
+            else {
+	            resize = new Resize(this);
+	            resize.heightTo = Math.min(maxHeight, measuredHeight);
+	            resize.duration = duration;
+	            resize.play();
+	        }
+	    }
+
+        protected function headerButton_clickHandler(event:MouseEvent):void {
+            opened = !_opened;
+        }
+ 		
+ 		private function onPropertyEditorChange(event:Event):void {
+ 			// Make sure that the panel exists and is open before doing anything
+            if(initialized && _opened) {
+                measure();
+               	runResizeEffect();
+                invalidateProperties();
+            }
+ 		}
+     }
+}
diff --git a/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/MultiPanelHeaderSkin.as b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/MultiPanelHeaderSkin.as
new file mode 100644
index 0000000..f5043a3
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/MultiPanelHeaderSkin.as
@@ -0,0 +1,58 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 flashx.textLayout.ui
+{
+	import mx.skins.RectangularBorder;
+	import mx.utils.GraphicsUtil;
+	import flash.display.LineScaleMode;
+	import flash.display.CapsStyle;
+
+	public class MultiPanelHeaderSkin extends RectangularBorder
+	{
+		public function MultiPanelHeaderSkin()
+		{
+			super();
+		}
+		
+		override protected function updateDisplayList(w:Number, h:Number):void
+		{
+			super.updateDisplayList(w, h);
+			
+			var fillColors:Array = [0x000000, 0x000000];
+			var fillAlphas:Array = [1.0, 1.0];
+			var borderColor:uint = 0x2A2A2A;
+			var borderAlpha:Number = 1.0;
+			
+ 			if (getStyle("fillColors") != undefined)
+				fillColors = getStyle("fillColors");
+ 			if (getStyle("fillAlphas") != undefined)
+				fillAlphas = getStyle("fillAlphas");
+ 			if (getStyle("borderColor") != undefined)
+				borderColor = getStyle("borderColor");
+ 			if (getStyle("borderAlpha") != undefined)
+				borderAlpha = getStyle("borderAlpha");
+
+			graphics.clear();
+			drawRoundRect(0,0,w, h, null, fillColors, fillAlphas, verticalGradientMatrix(0,0,w,h));
+			graphics.lineStyle(1, borderColor, borderAlpha, true, LineScaleMode.NONE, CapsStyle.SQUARE);
+			graphics.drawRect(0, 0, w-1, h);
+		}
+	}
+}
\ No newline at end of file
diff --git a/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/PanelWithEdgeBars.as b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/PanelWithEdgeBars.as
new file mode 100644
index 0000000..1d55c59
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/PanelWithEdgeBars.as
@@ -0,0 +1,266 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 flashx.textLayout.ui
+{
+	import flash.geom.Rectangle;
+	
+	import mx.binding.utils.*;
+	import mx.containers.Canvas;
+	import mx.core.UIComponent;
+	import mx.events.ResizeEvent;
+
+	public class PanelWithEdgeBars extends Canvas
+	{
+		public function PanelWithEdgeBars()
+		{
+			super();
+			addEventListener(ResizeEvent.RESIZE, onResize);
+		}
+		
+		public function set mainPanel(inPanel:UIComponent):void
+		{
+			if (mMainPanel == null)
+			{
+				mMainPanel = inPanel;
+				ArrangeContents();
+			}
+			else if (mMainPanel != inPanel)
+				throw new Error("Can't set main panel more than once.");
+		}
+		
+		public function get mainPanel():UIComponent
+		{
+			return mMainPanel;
+		}
+		
+		public function set topBar(inBar:UIComponent):void
+		{
+			if (mTopBar == null && inBar != null)
+			{
+				mTopBar = inBar;
+				ArrangeContents();
+				var watcherSetter:ChangeWatcher = BindingUtils.bindSetter(includeInLayoutChanged, mTopBar, "includeInLayout");
+			}
+			else if (mTopBar != inBar)
+				throw new Error("Can't set any edge bar more than once.");
+		}
+		
+		public function get topBar():UIComponent
+		{
+			return mTopBar;
+		}
+		
+		public function set rightBar(inBar:UIComponent):void
+		{
+			if (mRightBar == null && inBar != null)
+			{
+				mRightBar = inBar;
+				ArrangeContents();
+				var watcherSetter:ChangeWatcher = BindingUtils.bindSetter(includeInLayoutChanged, mRightBar, "includeInLayout");
+			}
+			else if (mRightBar != inBar)
+				throw new Error("Can't set any edge bar more than once.");
+		}
+		
+		public function get rightBar():UIComponent
+		{
+			return mRightBar;
+		}
+		
+		public function set bottomBar(inBar:UIComponent):void
+		{
+			if (mBottomBar == null && inBar != null)
+			{
+				mBottomBar = inBar;
+				ArrangeContents();
+				var watcherSetter:ChangeWatcher = BindingUtils.bindSetter(includeInLayoutChanged, mBottomBar, "includeInLayout");
+			}
+			else if (mBottomBar != inBar)
+				throw new Error("Can't set any edge bar more than once.");
+		}
+		
+		public function get bottomBar():UIComponent
+		{
+			return mBottomBar;
+		}
+
+		public function set leftBar(inBar:UIComponent):void
+		{
+			if (mLeftBar == null && inBar != null)
+			{
+				mLeftBar = inBar;
+				ArrangeContents();
+				var watcherSetter:ChangeWatcher = BindingUtils.bindSetter(includeInLayoutChanged, mLeftBar, "includeInLayout");
+			}
+			else if (mLeftBar != inBar)
+				throw new Error("Can't set any edge bar more than once.");
+		}
+		
+		public function get leftBar():UIComponent
+		{
+			return mLeftBar;
+		}
+		
+		public function set edgeInset(inInset:Number):void
+		{
+			mEdgeInset = inInset;
+			ArrangeContents();
+		}
+		
+		public function get edgeInset():Number
+		{
+			return mEdgeInset;
+		}
+		
+		public function set gap(inGap:Number):void
+		{
+			mGap = inGap;
+			ArrangeContents();
+		}
+		
+		public function get gap():Number
+		{
+			return mGap;
+		}
+		
+		public function set leftInset(inInset:Number):void
+		{
+			mLeftInset = inInset;
+			ArrangeContents();
+		}
+		
+		public function get leftInset():Number
+		{
+			return mLeftInset;
+		}
+		
+		public function set topInset(inInset:Number):void
+		{
+			mTopInset = inInset;
+			ArrangeContents();
+		}
+		
+		public function get topInset():Number
+		{
+			return mTopInset;
+		}
+		
+		public function set rightInset(inInset:Number):void
+		{
+			mRightInset = inInset;
+			ArrangeContents();
+		}
+		
+		public function get rightInset():Number
+		{
+			return mRightInset;
+		}
+		
+		public function set bottomInset(inInset:Number):void
+		{
+			mBottomInset = inInset;
+			ArrangeContents();
+		}
+		
+		public function get bottomInset():Number
+		{
+			return mBottomInset;
+		}
+		
+		private function onResize(evt:ResizeEvent):void
+		{
+			ArrangeContents();
+		}
+		
+		private function includeInLayoutChanged(val:Boolean):void {
+		    ArrangeContents();
+		}
+            
+		private function ArrangeContents():void
+		{
+			var space:Rectangle = new Rectangle(0, 0, width, height);
+			for (var i:int = numChildren - 1; i >= 0; --i)
+			{
+				var child:UIComponent = getChildAt(i) as UIComponent;
+				if (child && child.includeInLayout)
+				{
+					var inset:Number;
+					if (child == mTopBar)
+					{
+						inset = mTopInset ? mTopInset : mEdgeInset;
+						child.x = space.x;
+						child.width = space.width;
+						child.y = space.y;
+						child.height = inset;
+						space.y += inset + mGap;
+						space.height -= inset + mGap;
+					}
+					else if (child == mRightBar)
+					{
+						inset = mRightInset ? mRightInset : mEdgeInset;
+						child.x = space.right - inset;
+						child.width = inset;
+						child.y = space.y;
+						child.height = space.height;
+						space.width -= inset + mGap;
+					}
+					else if (child == mBottomBar)
+					{
+						inset = mBottomInset ? mBottomInset : mEdgeInset;
+						child.x = space.x;
+						child.width = space.width;
+						child.y = space.bottom - inset;
+						child.height = inset;
+						space.height -= inset + mGap;
+					}
+					if (child == mLeftBar)
+					{
+						inset = mLeftInset ? mLeftInset : mEdgeInset;
+						child.x = space.x;
+						child.width = inset;
+						child.y = space.y;
+						child.height = space.height;
+						space.x += inset + mGap;
+						space.width -= inset + mGap;
+					}
+				}
+			}
+			if (mMainPanel)
+			{
+				mMainPanel.x = space.x;
+				mMainPanel.y = space.y;
+				mMainPanel.width = space.width;
+				mMainPanel.height = space.height;
+			}
+		}
+		
+		private var mTopBar:UIComponent = null;
+		private var mRightBar:UIComponent = null;
+		private var mBottomBar:UIComponent = null;
+		private var mLeftBar:UIComponent = null;
+		private var mMainPanel:UIComponent = null;
+		private var mEdgeInset:Number = 16;
+		private var mLeftInset:Number = 0;
+		private var mRightInset:Number = 0;
+		private var mTopInset:Number = 0;
+		private var mBottomInset:Number = 0;
+		private var mGap:Number = 1;
+	}
+}
\ No newline at end of file
diff --git a/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/VellumGUIStyles.css b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/VellumGUIStyles.css
new file mode 100644
index 0000000..8756a92
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/VellumGUIStyles.css
@@ -0,0 +1,254 @@
+/*
+ * 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.
+ */
+@namespace s "library://ns.adobe.com/flex/spark";
+@namespace "library://ns.adobe.com/flex/mx";
+@namespace bxf "bxf.ui.controls.*";
+@namespace tlfui "flashx.textLayout.ui.rulers.*";
+
+bxf|BxPopupMenu
+{
+	borderSkin:			ClassReference("flashx.textLayout.ui.styles.PopupMenuSkin");
+	borderStyle:		"solid";
+	backColor:			"0xd9d9d9";
+	backAlpha:			"1.0";
+	lineColor:			"0x000000";
+	lineAlpha:			"0.9";
+	lineWidth:			"1";
+	rollOverColor: 		"0x0000b0";
+	rollOverAlpha: 		"1.0";
+	selectionColor: 	"0x0000b0";
+	selectionAlpha:		"0.8";
+	separatorAlpha:		"0.1";
+	separatorColor:		"0xffffff";
+	separatorThickness:	"1";
+	color:				"0x2e2e2e";
+	textSelectedColor:	"0xffffff";
+	textRollOverColor: 	"0xffffff";
+	leftIconGap:		"5";
+	rightIconGap:		"5";
+	openDuration:		"10";
+	closeDuration:		"10";
+}
+
+CheckBox
+{
+	textRollOverColor:	#000000;
+}
+
+
+TabNavigator {
+   tabHeight: 18;
+   backgroundColor: #d6d6d6;
+   tabStyleName: "myTabs";
+   firstTabStyleName: "myTabs";
+   lastTabStyleName: "myTabs";
+   selectedTabTextStyleName: "mySelectedTabs";
+}
+
+
+tlfui|TabMarker
+{
+	borderSkin:			ClassReference("flashx.textLayout.ui.rulers.TabMarkerSkin");	
+	borderStyle:		"solid";
+}
+
+tlfui|ParagraphPropertyMarker
+{
+	borderSkin:			ClassReference("flashx.textLayout.ui.rulers.ParagraphPropertyMarkerSkin");	
+	borderStyle:		"solid";
+}
+
+.stringPropertyEditor {
+	color: 				#262626;
+	fontFamily:			"Myriad Pro";
+	fontSize:			12;
+}
+
+.myTabs {
+   cornerRadius: 0;
+   fillColors: #b0b0b0, #989898;
+   backgroundColor: #d9d9d9;
+   borderColor: #666666;
+   color: #181818;
+   textRollOverColor: #000000;
+   themeColor: #484848;
+   fontFamily: "Myriad Pro";
+   fontSize: 10;
+   fontWeight: "bold";
+}
+
+.mySelectedTabs {
+   color: #202020;
+   textRollOverColor: #202020;
+   fontFamily: "Myriad Pro";
+   fontSize: 10;
+   fontWeight: "bold";
+}
+
+.comboPropEditorValue
+{
+	fontFamily:			"Myriad Pro";
+	fontWeight:			"bold";
+}
+
+.unitComboValue
+{
+	fontFamily:			"Myriad Pro";
+	fontWeight:			"bold";
+}
+
+
+.toggleIconButton {
+	cornerRadius:		2;
+}
+
+.toggleButtonRow {
+	horizontalGap:		2;
+}
+
+.iconButtonGroup {
+	cornerRadius:		2;
+	horizontalGap:		20;
+}
+
+.multiPanel {
+	headerHeight:		17;
+	border-style:		solid;
+	border-color:		#D6D6D6;
+	headerTextAlign:	"left";
+	openDuration:		200;
+	closeDuration:		200;
+	paddingTop:			0;
+	
+	fontFamily:			"Myriad Pro";
+	font-size:			12px;
+	letter-spacing:		0px;
+	color:				#2A2A2A;
+}
+
+.multiPanelHeader {
+	upSkin:				ClassReference("flashx.textLayout.ui.MultiPanelHeaderSkin");
+	downSkin:			ClassReference("flashx.textLayout.ui.MultiPanelHeaderSkin");
+	overSkin:			ClassReference("flashx.textLayout.ui.MultiPanelHeaderSkin");
+	disabledSkin:		ClassReference("flashx.textLayout.ui.MultiPanelHeaderSkin");
+	fillAlphas:			1,1;
+	fillColors: 		#c8c8c8, #b8b8b8;
+	borderAlpha:		1;
+	borderColor:		#D6D6D6;
+	cornerRadius:		0;
+	
+	padding-left:		3;
+	padding-top:		5px;
+
+	fontFamily:			"Myriad Pro";
+	font-size:			11px;
+	letter-spacing:		0px;
+	color:				#262626;
+}
+
+.hotTextStyle {
+	fontFamily:			"Myriad Pro";
+	fontWeight:			"bold";
+	color:				#0071BC;
+	backColor:			#D9D9D9;
+	text-decoration:	none;
+	border-bottom:		solid 1px;
+}
+
+.fontComboStyle {
+	fontFamily:					"Helvetica";
+	fontWeight:					"normal";
+	fontSize:					12;
+	openDuration:				10;
+	closeDuration:				10;
+	
+	padding-top:					-10;
+	
+	upSkin:						Embed(source="assets/combo_drop_down_arrow.png");
+	disabledSkin:				Embed(source="assets/combo_drop_down_arrow.png");
+	overSkin:					Embed(source="assets/combo_drop_down_arrow.png");
+	disabledSkin:				Embed(source="assets/combo_drop_down_arrow.png");
+	editableUpSkin:				Embed(source="assets/combo_drop_down_arrow.png");
+	editableDisabledSkin:		Embed(source="assets/combo_drop_down_arrow.png");
+	editableOverSkin:			Embed(source="assets/combo_drop_down_arrow.png");
+	editableDisabledSkin:		Embed(source="assets/combo_drop_down_arrow.png");
+	arrowButtonWidth:			18;
+	
+	cornerRadius:				2;
+	borderColor:				#737373;
+	
+	textInputStyleName:			"fontComboTextInputStyle";
+}
+
+.fontDropDownStyle {
+	fontFamily:					"Helvetica";
+	fontWeight:					"normal";
+	fontSize:					12;
+	borderColor:				#66ffff;
+	backgroundColor:			#D6D6D6;
+	verticalScrollBarStyleName:	scrollbarStyle;
+}
+
+.fontComboTextInputStyle {
+	borderStyle:				solid;
+	borderColor:				#737373;
+}
+
+.scrollbarStyle {
+	thumbUpSkin:				ClassReference("flashx.textLayout.ui.styles.ScrollbarThumbUpSkin");
+	thumbOverSkin:				ClassReference("flashx.textLayout.ui.styles.ScrollbarThumbOverSkin");
+	thumbDownSkin:				ClassReference("flashx.textLayout.ui.styles.ScrollbarThumbUpSkin");
+	trackSkin:					ClassReference("flashx.textLayout.ui.styles.ScrollbarTrackSkin");
+	upArrowUpSkin: 				Embed(source="assets/scroll_arrow_up.png");
+	upArrowDownSkin: 			Embed(source="assets/scroll_arrow_up.png");
+	upArrowOverSkin: 			Embed(source="assets/scroll_arrow_up_over.png");
+	upArrowDisabledSkin: 		Embed(source="assets/scroll_arrow_up.png");
+	downArrowUpSkin: 			Embed(source="assets/scroll_arrow_down.png");
+	downArrowOverSkin: 			Embed(source="assets/scroll_arrow_down_over.png");
+	downArrowDownSkin: 			Embed(source="assets/scroll_arrow_down.png");
+	downArrowDisabledSkin: 		Embed(source="assets/scroll_arrow_down.png");
+
+
+	trackFill:					#CECECE;
+	trackFillAlpha:				1.0;
+	trackStroke:				#7B7B7B;
+	trackStrokeAlpha:			1.0;
+
+	thumbFill:					#DFDFDF;
+	thumbFillAlpha:				1.0;
+	thumbStroke:				#F4F4F4;
+	thumbStrokeAlpha:			1.0;
+
+	thumbOverFill:				#E5E5E5;
+	thumbOverFillAlpha:			1.0;
+	thumbOverStroke:			#F4F4F4;
+	thumbOverStrokeAlpha:		1.0;
+}
+
+@font-face
+{
+	src:				url("assets/Fonts.swf");
+	fontFamily:			"Myriad Pro";
+}
+
+@font-face
+{
+	src:				url("assets/Fonts.swf");
+	fontFamily:			"Myriad Pro";
+	fontWeight:			"bold";
+}
+
diff --git a/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/assets/%scroll_arrow_down_over.png b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/assets/%scroll_arrow_down_over.png
new file mode 100644
index 0000000..a209b46
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/assets/%scroll_arrow_down_over.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/assets/%scroll_arrow_up_over.png b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/assets/%scroll_arrow_up_over.png
new file mode 100644
index 0000000..5e37d0f
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/assets/%scroll_arrow_up_over.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/assets/combo_drop_down_arrow.png b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/assets/combo_drop_down_arrow.png
new file mode 100644
index 0000000..1b905e8
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/assets/combo_drop_down_arrow.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/assets/header_close_icon.png b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/assets/header_close_icon.png
new file mode 100644
index 0000000..e55928c
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/assets/header_close_icon.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/assets/header_open_icon.png b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/assets/header_open_icon.png
new file mode 100644
index 0000000..d3a1b42
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/assets/header_open_icon.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/assets/scroll_arrow_down.png b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/assets/scroll_arrow_down.png
new file mode 100644
index 0000000..f5d8145
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/assets/scroll_arrow_down.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/assets/scroll_arrow_down_over.png b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/assets/scroll_arrow_down_over.png
new file mode 100644
index 0000000..ef66ac6
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/assets/scroll_arrow_down_over.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/assets/scroll_arrow_up.png b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/assets/scroll_arrow_up.png
new file mode 100644
index 0000000..1d3828d
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/assets/scroll_arrow_up.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/assets/scroll_arrow_up_over.png b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/assets/scroll_arrow_up_over.png
new file mode 100644
index 0000000..2147d32
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/assets/scroll_arrow_up_over.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/AdvancedTextPropertyEditor.as b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/AdvancedTextPropertyEditor.as
new file mode 100644
index 0000000..145c721
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/AdvancedTextPropertyEditor.as
@@ -0,0 +1,190 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 flashx.textLayout.ui.inspectors
+{
+	import flash.text.engine.*;
+	
+	import flashx.textLayout.formats.FormatValue;
+	import flashx.textLayout.formats.TextLayoutFormat;
+	import flashx.textLayout.tlf_internal;
+	use namespace tlf_internal;
+	
+	public class AdvancedTextPropertyEditor extends DynamicTextPropertyEditor
+	{
+		public function AdvancedTextPropertyEditor()
+		{
+			var recipe:XML = 
+				<recipe>
+					<row>
+						<editor type="combo" label="$$$/stage/TextEditing/Label/DigitCase=Digit Case:">
+							<property name={TextInspectorController.DIGIT_CASE_UIPROP}/>
+							<choice display="Default" value={flash.text.engine.DigitCase.DEFAULT}/>
+							<choice display="Lining" value={flash.text.engine.DigitCase.LINING}/>
+							<choice display="Old Style" value={flash.text.engine.DigitCase.OLD_STYLE}/>
+						</editor>
+					</row>
+					<row>
+						<editor type="combo" label="$$$/stage/TextEditing/Label/DigitWidth=Digit Width:">
+							<property name={TextInspectorController.DIGIT_WIDTH_UIPROP}/>
+							<choice display="Default" value={flash.text.engine.DigitWidth.DEFAULT}/>
+							<choice display="Proportional" value={flash.text.engine.DigitWidth.PROPORTIONAL}/>
+							<choice display="Tabular" value={flash.text.engine.DigitWidth.TABULAR}/>
+						</editor>
+					</row>
+					<row>
+						<editor type="combo" label="$$$/stage/TextEditing/Label/DominantBaseline=Dominant Baseline:">
+							<property name={TextInspectorController.DOMINANT_BASELINE_UIPROP}/>
+							<choice display="Auto" value={FormatValue.AUTO}/>
+							<choice display="Roman" value={flash.text.engine.TextBaseline.ROMAN}/>
+							<choice display="Ascent" value={flash.text.engine.TextBaseline.ASCENT}/>
+							<choice display="Descent" value={flash.text.engine.TextBaseline.DESCENT}/>
+							<choice display="Ideographic Top" value={flash.text.engine.TextBaseline.IDEOGRAPHIC_TOP}/>
+							<choice display="Ideographic Center" value={flash.text.engine.TextBaseline.IDEOGRAPHIC_CENTER}/>
+							<choice display="Ideographic Bottom" value={flash.text.engine.TextBaseline.IDEOGRAPHIC_BOTTOM}/>
+						</editor>
+					</row>
+					<row>
+						<editor type="combo" label="$$$/stage/TextEditing/Label/AlignmentBaseline=Alignment Baseline:">
+							<property name={TextInspectorController.ALIGNMENT_BASELINE_UIPROP}/>
+							<choice display="Roman" value={flash.text.engine.TextBaseline.ROMAN}/>
+							<choice display="Ascent" value={flash.text.engine.TextBaseline.ASCENT}/>
+							<choice display="Descent" value={flash.text.engine.TextBaseline.DESCENT}/>
+							<choice display="Ideographic Top" value={flash.text.engine.TextBaseline.IDEOGRAPHIC_TOP}/>
+							<choice display="Ideographic Center" value={flash.text.engine.TextBaseline.IDEOGRAPHIC_CENTER}/>
+							<choice display="Ideographic Bottom" value={flash.text.engine.TextBaseline.IDEOGRAPHIC_BOTTOM}/>
+							<choice display="Use Dominant" value={flash.text.engine.TextBaseline.USE_DOMINANT_BASELINE}/>
+						</editor>
+					</row>
+					<row>
+						<editor type="hotnumberunit" label="$$$/stage/TextEditing/Label/BaselineShift=Baseline Shift:">
+							<property name={TextInspectorController.BASELINE_SHIFT_UIPROP}/>
+							<defaultunit>pix</defaultunit>
+							<numericunit displayname="%" 
+								min={TextLayoutFormat.baselineShiftProperty.minPercentValue}
+								max={TextLayoutFormat.baselineShiftProperty.maxPercentValue} 
+								default="0" 
+								decimals="1"/>
+							<numericunit displayname="pix" 
+								min={TextLayoutFormat.baselineShiftProperty.minNumberValue}
+								max={TextLayoutFormat.baselineShiftProperty.maxNumberValue} 
+								default="0" 
+								decimals="1"/>
+						</editor>
+					</row>
+					<row>
+						<editor type="combo" label="$$$/stage/TextEditing/Label/Ligatures=Ligatures:">
+							<property name={TextInspectorController.LIGATURE_LEVEL_UIPROP}/>
+							<choice display="Minimum" value={flash.text.engine.LigatureLevel.MINIMUM}/>
+							<choice display="Common" value={flash.text.engine.LigatureLevel.COMMON}/>
+							<choice display="Uncommon" value={flash.text.engine.LigatureLevel.UNCOMMON}/>
+							<choice display="Exotic" value={flash.text.engine.LigatureLevel.EXOTIC}/>
+						</editor>
+					</row>
+					<row>
+						<editor type="combo" label="$$$/stage/TextEditing/Label/Rotation=Rotation:">
+							<property name={TextInspectorController.TEXT_ROTATION_UIPROP}/>
+							<choice display="0 degrees" value={flash.text.engine.TextRotation.ROTATE_0}/>
+							<choice display="90 degrees" value={flash.text.engine.TextRotation.ROTATE_90}/>
+							<choice display="180 degrees" value={flash.text.engine.TextRotation.ROTATE_180}/>
+							<choice display="270 degrees" value={flash.text.engine.TextRotation.ROTATE_270}/>
+							<choice display="auto" value={flash.text.engine.TextRotation.AUTO}/>
+						</editor>
+					</row>
+					<row>
+						<editor type="hotnumber" label="$$$/stage/TextEditing/Label/Alpha=Alpha:" suffix="%">
+							<property name={TextInspectorController.TEXT_ALPHA_UIPROP} 
+								minValue="0" 
+								maxValue="100"
+								convertToPercent="yes"/>
+						</editor>
+					</row>
+					<row>
+						<editor type="hotnumber" label="$$$/stage/TextEditing/Label/BackgroundAlpha=Background alpha:" suffix="%">
+							<property name={TextInspectorController.BACKGROUND_ALPHA_UIPROP} 
+								minValue="0" 
+								maxValue="100"
+								convertToPercent="yes"/>
+						</editor>
+					</row>
+					<row>
+						<editor type="combo" label="$$$/stage/TextEditing/Label/Break=Break:">
+							<property name={TextInspectorController.BREAK_OPPORTUNITY_UIPROP}/>
+							<choice display="All" value={flash.text.engine.BreakOpportunity.ALL}/>
+							<choice display="Any" value={flash.text.engine.BreakOpportunity.ANY}/>
+							<choice display="Auto" value={flash.text.engine.BreakOpportunity.AUTO}/>
+							<choice display="No Break" value={flash.text.engine.BreakOpportunity.NONE}/>
+						</editor>
+					</row>
+					<row>
+						<editor type="combo" label="$$$/stage/TextEditing/Label/Lacale=Locale:">
+							<property name={TextInspectorController.LOCALE_UIPROP}/>
+							<choice display="Arabic" value="ar"/>,
+							<choice display="Bengali" value="bn"/>,
+							<choice display="Bulgarian" value="bg"/>,
+							<choice display="Catalan" value="ca"/>,
+							<choice display="Chinese, Simplified (China)" value="zh-CN"/>,
+							<choice display="Chinese, Traditional (Taiwan)" value="zh-TW"/>,
+							<choice display="Croatian" value="hr"/>,
+							<choice display="Czech" value="cs"/>,
+							<choice display="Danish" value="da"/>,
+							<choice display="Dutch" value="nl"/>,
+							<choice display="English" value="en"/>,
+							<choice display="Estonian" value="et"/>,
+							<choice display="Finnish" value="fi"/>,
+							<choice display="French" value="fr"/>,
+							<choice display="German" value="de"/>,
+							<choice display="Greek" value="el"/>,
+							<choice display="Gujarati" value="gu"/>,
+							<choice display="Hindi" value="hi"/>,
+							<choice display="Hebrew" value="he"/>,
+							<choice display="Hungarian" value="hu"/>,
+							<choice display="Italian" value="it"/>,
+							<choice display="Japanese" value="ja"/>,
+							<choice display="Korean" value="ko"/>,
+							<choice display="Latvian" value="lv"/>,
+							<choice display="Lithuanian" value="lt"/>,
+							<choice display="Marathi" value="mr"/>,
+							<choice display="Norwegian" value="no"/>,
+							<choice display="Persian" value="fa"/>,
+							<choice display="Polish" value="pl"/>,
+							<choice display="Portuguese" value="pt"/>,
+							<choice display="Punjabi" value="pa"/>,
+							<choice display="Romanian" value="ro"/>,
+							<choice display="Russian" value="ru"/>,
+							<choice display="Slovak" value="sk"/>,
+							<choice display="Slovenian" value="sl"/>,
+							<choice display="Spanish" value="es"/>,
+							<choice display="Swedish" value="sv"/>,
+							<choice display="Tamil" value="ta"/>,
+							<choice display="Telugu" value="te"/>,
+							<choice display="Thai" value="th"/>,
+							<choice display="Turkish" value="tr"/>,
+							<choice display="Ukrainian" value="uk"/>,
+							<choice display="Urdu" value="ur"/>,
+							<choice display="Vietnamese" value="vi"/>
+						</editor>
+					</row>
+				</recipe>;
+
+			super(recipe);
+		}
+		
+	}
+}
\ No newline at end of file
diff --git a/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/AntiAliasPropertyEditor.as b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/AntiAliasPropertyEditor.as
new file mode 100644
index 0000000..af0fc66
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/AntiAliasPropertyEditor.as
@@ -0,0 +1,51 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 flashx.textLayout.ui.inspectors
+{
+	import flash.text.AntiAliasType;
+	import flash.text.engine.CFFHinting;
+	import flash.text.engine.RenderingMode;
+
+	public class AntiAliasPropertyEditor extends DynamicTextPropertyEditor
+	{
+		public function AntiAliasPropertyEditor()
+		{
+			var recipe:XML = 
+				<recipe>
+					<row>
+						<editor type="combo" label="$$$/stage/TextEditing/Label/Antialias=Antialias:">
+							<property name={TextInspectorController.RENDERING_MODE_UIPROP}/>
+							<choice display="Normal" value={flash.text.engine.RenderingMode.NORMAL}/>
+							<choice display="CFF" value={flash.text.engine.RenderingMode.CFF}/>
+						</editor>
+					</row>
+					<row>
+						<editor type="combo" label="$$$/stage/TextEditing/Label/GridFit=Grid Fit:">
+							<property name={TextInspectorController.CFF_HINTING_UIPROP}/>
+							<choice display="None" value={flash.text.engine.CFFHinting.NONE}/>
+							<choice display="Horizontal stem" value={flash.text.engine.CFFHinting.HORIZONTAL_STEM}/>
+						</editor>
+					</row>
+				</recipe>;
+			super(recipe);
+		}
+		
+	}
+}
\ No newline at end of file
diff --git a/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/CharacterPropertyEditor.as b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/CharacterPropertyEditor.as
new file mode 100644
index 0000000..6581152
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/CharacterPropertyEditor.as
@@ -0,0 +1,179 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 flashx.textLayout.ui.inspectors
+{
+	import flash.text.engine.*;
+	
+	import flashx.textLayout.formats.TextLayoutFormat;
+	import flashx.textLayout.tlf_internal;
+	use namespace tlf_internal;	
+
+	public class CharacterPropertyEditor extends DynamicTextPropertyEditor
+	{
+		[Embed(source="./assets/bold_icon.png")]
+		private var boldIcon:Class;
+
+		[Embed(source="./assets/italic_icon.png")]
+		private var italicIcon:Class;
+		
+		[Embed(source="./assets/underline_icon.png")]
+		private var underlineIcon:Class;
+
+		[Embed(source="./assets/strikethrough_icon.png")]
+		private var strikethroughIcon:Class;
+
+		[Embed(source="./assets/superscript_icon.png")]
+		private var superscriptIcon:Class;
+
+		[Embed(source="./assets/subscript_icon.png")]
+		private var subscriptIcon:Class;
+
+		[Embed(source="./assets/tcy_icon.png")]
+		private var tcyIcon:Class;
+
+		public function CharacterPropertyEditor()
+		{
+			var recipe:XML = 
+				<recipe>
+					<row>
+						<editor type="fontPicker" label="$$$/stage/TextEditing/Label/Font=Font:">
+							<property name={TextInspectorController.FONT_FAMILY_UIPROP}/>
+						</editor>
+					</row>
+					<row>
+						<editor type="combo" label="$$$/stage/TextEditing/Label/FontLookup=Lookup:">
+							<property name={TextInspectorController.FONT_LOOKUP_UIPROP}/>
+							<choice display="Device" value={flash.text.engine.FontLookup.DEVICE}/>
+							<choice display="Embedded CFF" value={flash.text.engine.FontLookup.EMBEDDED_CFF}/>
+						</editor>
+					</row>
+					<row>
+						<editor type="hotnumber" label="$$$/stage/TextEditing/Label/Size=Size:" decimals="1" enforcePrecision="no">
+							<property name={TextInspectorController.FONT_SIZE_UIPROP}
+								minValue={TextLayoutFormat.fontSizeProperty.minValue}
+								maxValue={TextLayoutFormat.fontSizeProperty.maxValue}/>
+						</editor>
+						<editor type="hotnumberunit" label="$$$/stage/TextEditing/Label/Leading=Leading:">
+							<property name={TextInspectorController.LINE_HEIGHT_UIPROP}/>
+							<defaultunit>pix</defaultunit>
+							<numericunit displayname="%"
+								min={TextLayoutFormat.lineHeightProperty.minPercentValue}
+								max={TextLayoutFormat.lineHeightProperty.maxPercentValue}
+								default="120"/>
+							<numericunit displayname="pix"
+								min={TextLayoutFormat.lineHeightProperty.minNumberValue}
+								max={TextLayoutFormat.lineHeightProperty.maxNumberValue}
+								default="14"
+								decimals="1"/>
+						</editor>
+					</row>
+					<row style="toggleButtonRow">
+						<editor type="toggleButton" style="toggleIconButton" iconClass="boldIcon" width="17" commit="yes">
+							<property name={TextInspectorController.FONT_WEIGHT_UIPROP} falseValue="normal" trueValue="bold"/>
+						</editor>
+						<editor type="toggleButton" style="toggleIconButton" iconClass="italicIcon" width="17" commit="yes">
+							<property name={TextInspectorController.FONT_STYLE_UIPROP} falseValue="normal" trueValue="italic"/>
+						</editor>
+						<editor type="toggleButton" style="toggleIconButton" iconClass="underlineIcon" width="17" commit="yes">
+							<property name={TextInspectorController.TEXT_DECORATION_UIPROP} falseValue="none" trueValue="underline"/>
+						</editor>
+						<editor type="toggleButton" style="toggleIconButton" iconClass="strikethroughIcon" width="17" commit="yes">
+							<property name={TextInspectorController.LINE_THROUGH_UIPROP}/>
+						</editor>
+						<editor type="toggleButton" style="toggleIconButton" iconClass="superscriptIcon" width="17" commit="yes">
+							<property name={TextInspectorController.BASELINE_SHIFT_SUPER_UIPROP}  falseValue="0" trueValue={flashx.textLayout.formats.BaselineShift.SUPERSCRIPT}/>
+						</editor>
+						<editor type="toggleButton" style="toggleIconButton" iconClass="subscriptIcon" width="17" commit="yes">
+							<property name={TextInspectorController.BASELINE_SHIFT_SUB_UIPROP}  falseValue="0" trueValue={flashx.textLayout.formats.BaselineShift.SUBSCRIPT}/>
+						</editor>
+						<editor type="toggleButton" style="toggleIconButton" iconClass="tcyIcon" width="17" commit="yes">
+							<property name={TextInspectorController.TCY_UIPROP}/>
+						</editor>
+					</row>
+					<row>
+						<editor type="combo" label="$$$/stage/TextEditing/Label/Kerning=Kerning:">
+							<property name={TextInspectorController.KERNING_UIPROP}/>
+							<choice display="On" value={flash.text.engine.Kerning.ON}/>
+							<choice display="Off" value={flash.text.engine.Kerning.OFF}/>
+							<choice display="Auto" value={flash.text.engine.Kerning.AUTO}/>
+						</editor>
+					</row>
+					<row>
+						<editor type="hotnumberunit" label="$$$/stage/TextEditing/Label/Tracking=Track R:">
+							<property name={TextInspectorController.TRACKING_RIGHT_UIPROP}/>
+							<defaultunit>pix</defaultunit>
+							<numericunit displayname="%" 
+								min={TextLayoutFormat.trackingRightProperty.minPercentValue} 
+								max={TextLayoutFormat.trackingRightProperty.maxPercentValue} 
+								default="0"/>
+							<numericunit displayname="pix" 
+								min={TextLayoutFormat.trackingRightProperty.minNumberValue}
+								max={TextLayoutFormat.trackingRightProperty.maxNumberValue}
+								default="0" 
+								decimals="1"/>
+						</editor>
+					</row>
+					<row>
+						<editor type="hotnumberunit" label="$$$/stage/TextEditing/Label/Tracking=Track L:">
+							<property name={TextInspectorController.TRACKING_LEFT_UIPROP}/>
+							<defaultunit>pix</defaultunit>
+							<numericunit displayname="%" 
+								min={TextLayoutFormat.trackingLeftProperty.minPercentValue} 
+								max={TextLayoutFormat.trackingLeftProperty.maxPercentValue} 
+								default="0"/>
+							<numericunit displayname="pix" 
+								min={TextLayoutFormat.trackingLeftProperty.minNumberValue}
+								max={TextLayoutFormat.trackingLeftProperty.maxNumberValue}
+								default="0" 
+								decimals="1"/>
+						</editor>
+					</row>
+					<row>
+						<editor type="combo" label="$$$/stage/TextEditing/Label/Case=Case:">
+							<property name={TextInspectorController.TYPOGRAPHIC_CASE_UIPROP}/>
+							<choice display="Default" value={flashx.textLayout.formats.TLFTypographicCase.DEFAULT}/>
+							<choice display="Caps to Small Caps" value={flashx.textLayout.formats.TLFTypographicCase.CAPS_TO_SMALL_CAPS}/>
+							<choice display="Upper" value={flashx.textLayout.formats.TLFTypographicCase.UPPERCASE}/>
+							<choice display="Lower" value={flashx.textLayout.formats.TLFTypographicCase.LOWERCASE}/>
+							<choice display="Lowercase to Small Caps" value={flashx.textLayout.formats.TLFTypographicCase.LOWERCASE_TO_SMALL_CAPS}/>
+						</editor>
+					</row>
+					<row>
+						<editor type="color" label="$$$/stage/TextEditing/Label/Color=Color:">
+							<property name={TextInspectorController.COLOR_UIPROP}/>
+						</editor>
+						<editor type="color" label="$$$/stage/TextEditing/Label/BackgroundColor=Background color:">
+							<property name={TextInspectorController.BGCOLOR_UIPROP}/>
+						</editor>
+					</row>
+				</recipe>;
+			
+			super(recipe);
+			SetIcon("boldIcon", boldIcon);
+			SetIcon("italicIcon", italicIcon);
+			SetIcon("underlineIcon", underlineIcon);
+			SetIcon("strikethroughIcon", strikethroughIcon);
+			SetIcon("superscriptIcon", superscriptIcon);
+			SetIcon("subscriptIcon", subscriptIcon);
+			SetIcon("tcyIcon", tcyIcon);
+		}
+		
+	}
+}
\ No newline at end of file
diff --git a/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/DynamicTextPropertyEditor.as b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/DynamicTextPropertyEditor.as
new file mode 100644
index 0000000..e3a931a
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/DynamicTextPropertyEditor.as
@@ -0,0 +1,74 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 flashx.textLayout.ui.inspectors
+{
+	import bxf.ui.inspectors.DynamicPropertyEditorBase;
+
+	import mx.events.PropertyChangeEvent;
+
+	public class DynamicTextPropertyEditor extends DynamicPropertyEditorBase
+	{
+		public function DynamicTextPropertyEditor(inRecipe:XML)
+		{
+			super(inRecipe);
+			TextInspectorController.Instance().addEventListener(SelectionUpdateEvent.SELECTION_UPDATE, onSelectionUpdate);
+			addEventListener(DynamicPropertyEditorBase.MODELCHANGED_EVENT, onFormatValueChanged, false, 0, true);
+			addEventListener(DynamicPropertyEditorBase.MODELEDITED_EVENT, onFormatValueChanged, false, 0, true);
+		}
+		
+		public function set active(inActive:Boolean):void
+		{
+			if (mActive != inActive)
+			{
+				mActive = inActive;
+				if (mActive)
+					TextInspectorController.Instance().forceBroadcastFormats();
+			}
+		}
+		
+		public function get active():Boolean
+		{
+			return mActive;
+		}
+		
+		private function onSelectionUpdate(e:SelectionUpdateEvent):void
+		{
+			if (mActive)
+			{
+				reset();
+				for (var id:String in e.format)
+				{
+					if (e.format[id].length == 1)
+						properties[id] = e.format[id][0];
+					else
+						properties[id] = e.format[id];
+				}
+				rebuildUI();
+			}
+		}
+
+		private function onFormatValueChanged(e:PropertyChangeEvent):void
+		{
+			TextInspectorController.Instance().SetTextProperty(e.property as String, e.newValue);
+		}
+		
+		private var mActive:Boolean = false;
+	}
+}
\ No newline at end of file
diff --git a/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/LinkPropertyEditor.as b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/LinkPropertyEditor.as
new file mode 100644
index 0000000..33bb311
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/LinkPropertyEditor.as
@@ -0,0 +1,50 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 flashx.textLayout.ui.inspectors
+{
+	public class LinkPropertyEditor extends DynamicTextPropertyEditor
+	{
+		public function LinkPropertyEditor()
+		{
+			var recipe:XML =
+				<recipe>
+					<row>
+						<editor type="string" label="$$$/stage/TextEditing/Label/linkURL=URL:" width="150">
+							<property name={TextInspectorController.LINK_URL_UIPROP}/>
+						</editor>
+					</row>
+					<row>
+						<editor type="combo" label="$$$/stage/TextEditing/Label/linkTarget=Target:">
+							<property name={TextInspectorController.LINK_TARGET_UIPROP}/>
+							<choice display="_blank" value={"_blank"}/>
+							<choice display="_self" value={"_self"}/>
+							<choice display="_parent" value={"_parent"}/>
+							<choice display="_top" value={"_top"}/>
+						</editor>
+						<editor type="checkbox" label="$$$/stage/TextEditing/Label/linkExtend=Extend:">
+							<property name={TextInspectorController.LINK_EXTEND_UIPROP}/>
+						</editor>
+					</row>
+				</recipe>;
+			super(recipe);
+		}
+		
+	}
+}
\ No newline at end of file
diff --git a/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/ParagraphPropertyEditor.as b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/ParagraphPropertyEditor.as
new file mode 100644
index 0000000..4b8a8cc
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/ParagraphPropertyEditor.as
@@ -0,0 +1,226 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 flashx.textLayout.ui.inspectors
+{
+	import flash.text.engine.*;
+	
+	import flashx.textLayout.formats.Direction;
+	import flashx.textLayout.formats.FormatValue;
+	import flashx.textLayout.formats.TextJustify;
+	import flashx.textLayout.formats.TextLayoutFormat;
+	import flashx.textLayout.tlf_internal;
+	import flashx.textLayout.formats.LeadingModel;
+	use namespace tlf_internal;
+		
+	public class ParagraphPropertyEditor extends DynamicTextPropertyEditor
+	{
+		[Embed(source="./assets/align_start_icon.png")]
+		private var alignStartIcon:Class;
+		
+		[Embed(source="./assets/align_end_icon.png")]
+		private var alignEndIcon:Class;
+		
+		[Embed(source="./assets/align_left_icon.png")]
+		private var alignLeftIcon:Class;
+		
+		[Embed(source="./assets/align_center_icon.png")]
+		private var alignCenterIcon:Class;
+		
+		[Embed(source="./assets/align_right_icon.png")]
+		private var alignRightIcon:Class;
+		
+		[Embed(source="./assets/align_justify_icon.png")]
+		private var alignJustifyIcon:Class;
+		
+		[Embed(source="./assets/align_last_left_icon.png")]
+		private var alignLastLeftIcon:Class;
+		
+		[Embed(source="./assets/align_last_center_icon.png")]
+		private var alignLastCenterIcon:Class;
+		
+		[Embed(source="./assets/align_last_right_icon.png")]
+		private var alignLastRightIcon:Class;
+
+		public function ParagraphPropertyEditor()
+		{
+			var recipe:XML =
+				<recipe>
+					<row>
+						<editor type="multiIconButton" style="iconButtonGroup" label="$$$/stage/TextEditing/Label/Alignment=Alignment:">
+							<property name={TextInspectorController.TEXT_ALIGN_UIPROP}/>
+							<button icon="alignStartIcon" value="start"/>
+							<button icon="alignEndIcon" value="end"/>
+							<button icon="alignLeftIcon" value="left"/>
+							<button icon="alignCenterIcon" value="center"/>
+							<button icon="alignRightIcon" value="right"/>
+							<button icon="alignJustifyIcon" value="justify"/>
+						</editor>
+					</row>
+					<row>
+						<editor type="multiIconButton" style="iconButtonGroup" label="$$$/stage/TextEditing/Label/LastLine=Last Line:">
+							<property name={TextInspectorController.TEXT_ALIGN_LAST_UIPROP}/>
+							<button icon="alignStartIcon" value="start"/>
+							<button icon="alignEndIcon" value="end"/>
+							<button icon="alignLastLeftIcon" value="left"/>
+							<button icon="alignLastCenterIcon" value="center"/>
+							<button icon="alignLastRightIcon" value="right"/>
+							<button icon="alignJustifyIcon" value="justify"/>
+						</editor>
+					</row>
+					<row>
+						<editor type="hotnumber" label="$$$/stage/TextEditing/Label/Indent=Text Indent:" decimals="1" enforcePrecision="no">
+							<property name={TextInspectorController.TEXT_INDENT_UIPROP}
+								minValue={TextLayoutFormat.textIndentProperty.minValue}
+								maxValue={TextLayoutFormat.textIndentProperty.maxValue}/>
+						</editor>
+					</row>
+					<row>
+						<editor type="hotnumber" label="$$$/stage/TextEditing/Label/Left=Start Indent:" decimals="1" enforcePrecision="no">
+							<property name={TextInspectorController.START_INDENT_UIPROP} 
+								minValue={TextLayoutFormat.paragraphStartIndentProperty.minValue}
+								maxValue={TextLayoutFormat.paragraphStartIndentProperty.maxValue}/>
+						</editor>
+						<editor type="hotnumber" label="$$$/stage/TextEditing/Label/Right=End:" decimals="1" enforcePrecision="no">
+							<property name={TextInspectorController.END_INDENT_UIPROP} 
+								minValue={TextLayoutFormat.paragraphEndIndentProperty.minValue} 
+								maxValue={TextLayoutFormat.paragraphEndIndentProperty.maxValue}/>
+						</editor>
+					</row>
+					<row>
+						<editor type="hotnumber" label="$$$/stage/TextEditing/Label/Before=Space Before:" decimals="1" enforcePrecision="no">
+							<property name={TextInspectorController.SPACE_BEFORE_UIPROP} 
+								minValue={TextLayoutFormat.paragraphSpaceBeforeProperty.minValue} 
+								maxValue={TextLayoutFormat.paragraphSpaceBeforeProperty.maxValue}/>
+						</editor>
+						<editor type="hotnumber" label="$$$/stage/TextEditing/Label/After=After:" decimals="1" enforcePrecision="no">
+							<property name={TextInspectorController.SPACE_AFTER_UIPROP} 
+								minValue={TextLayoutFormat.paragraphSpaceAfterProperty.minValue} 
+								maxValue={TextLayoutFormat.paragraphSpaceAfterProperty.maxValue}/>
+						</editor>
+					</row>
+					<row>
+						<editor type="combo" label="$$$/stage/TextEditing/Label/justRule=Just. Rule:">
+							<property name={TextInspectorController.JUSTIFICATION_RULE_UIPROP}/>
+							<choice display="Auto" value={FormatValue.AUTO}/>
+							<choice display="Roman" value={flashx.textLayout.formats.JustificationRule.SPACE}/>
+							<choice display="East Asian" value={flashx.textLayout.formats.JustificationRule.EAST_ASIAN}/>
+						</editor>
+					</row>
+					<row>
+						<editor type="combo" label="$$$/stage/TextEditing/Label/textJust=Text Justify:">
+							<property name={TextInspectorController.TEXT_JUSTIFY_UIPROP}/>
+							<choice display="Inter-word" value={flashx.textLayout.formats.TextJustify.INTER_WORD}/>
+							<choice display="Distribute" value={flashx.textLayout.formats.TextJustify.DISTRIBUTE}/>
+						</editor>
+					</row>
+					<row>
+						<editor type="combo" label="$$$/stage/TextEditing/Label/justStyle=Just. Style:">
+							<property name={TextInspectorController.JUSTIFICATION_STYLE_UIPROP}/>
+							<choice display="Auto" value={FormatValue.AUTO}/>
+							<choice display="Prioritize Least Adjustment" value={flash.text.engine.JustificationStyle.PRIORITIZE_LEAST_ADJUSTMENT}/>
+							<choice display="Push in Kinsoku" value={flash.text.engine.JustificationStyle.PUSH_IN_KINSOKU}/>
+							<choice display="Push out Only" value={flash.text.engine.JustificationStyle.PUSH_OUT_ONLY}/>
+						</editor>
+					</row>
+					<row>
+						<editor type="combo" label="$$$/stage/TextEditing/Label/direction=Direction:">
+							<property name={TextInspectorController.DIRECTION_UIPROP}/>
+							<choice display="Left to Right" value={flashx.textLayout.formats.Direction.LTR}/>
+							<choice display="Right to Left" value={flashx.textLayout.formats.Direction.RTL}/>
+						</editor>
+					</row>
+					<row>
+						<editor type="combo" label="$$$/stage/TextEditing/Label/leadingModel=Leading Model:">
+							<property name={TextInspectorController.LEADING_MODEL_UIPROP}/>
+							<choice display="Roman; Up" value={flashx.textLayout.formats.LeadingModel.ROMAN_UP}/>
+							<choice display="Ideographic Top; Up" value={flashx.textLayout.formats.LeadingModel.IDEOGRAPHIC_TOP_UP}/>
+							<choice display="Ideographic Center; Up" value={flashx.textLayout.formats.LeadingModel.IDEOGRAPHIC_CENTER_UP}/>
+							<choice display="Ideographic Top; Down" value={flashx.textLayout.formats.LeadingModel.IDEOGRAPHIC_TOP_DOWN}/>
+							<choice display="Ideographic Center; Down" value={flashx.textLayout.formats.LeadingModel.IDEOGRAPHIC_CENTER_DOWN}/>
+							<choice display="Ascent-Descent; Up" value={flashx.textLayout.formats.LeadingModel.ASCENT_DESCENT_UP}/>
+							<choice display="Approximate TextField" value={flashx.textLayout.formats.LeadingModel.APPROXIMATE_TEXT_FIELD}/>
+							<choice display="Auto" value={flashx.textLayout.formats.LeadingModel.AUTO}/>
+						</editor>
+					</row>
+					<row>
+						<editor type="combo" label="$$$/stage/TextEditing/Label/Lacale=Locale:">
+							<property name={TextInspectorController.PARA_LOCALE_UIPROP}/>
+							<choice display="Arabic" value="ar"/>,
+							<choice display="Bengali" value="bn"/>,
+							<choice display="Bulgarian" value="bg"/>,
+							<choice display="Catalan" value="ca"/>,
+							<choice display="Chinese, Simplified (China)" value="zh-CN"/>,
+							<choice display="Chinese, Traditional (Taiwan)" value="zh-TW"/>,
+							<choice display="Croatian" value="hr"/>,
+							<choice display="Czech" value="cs"/>,
+							<choice display="Danish" value="da"/>,
+							<choice display="Dutch" value="nl"/>,
+							<choice display="English" value="en"/>,
+							<choice display="Estonian" value="et"/>,
+							<choice display="Finnish" value="fi"/>,
+							<choice display="French" value="fr"/>,
+							<choice display="German" value="de"/>,
+							<choice display="Greek" value="el"/>,
+							<choice display="Gujarati" value="gu"/>,
+							<choice display="Hindi" value="hi"/>,
+							<choice display="Hebrew" value="he"/>,
+							<choice display="Hungarian" value="hu"/>,
+							<choice display="Italian" value="it"/>,
+							<choice display="Japanese" value="ja"/>,
+							<choice display="Korean" value="ko"/>,
+							<choice display="Latvian" value="lv"/>,
+							<choice display="Lithuanian" value="lt"/>,
+							<choice display="Marathi" value="mr"/>,
+							<choice display="Norwegian" value="no"/>,
+							<choice display="Persian" value="fa"/>,
+							<choice display="Polish" value="pl"/>,
+							<choice display="Portuguese" value="pt"/>,
+							<choice display="Punjabi" value="pa"/>,
+							<choice display="Romanian" value="ro"/>,
+							<choice display="Russian" value="ru"/>,
+							<choice display="Slovak" value="sk"/>,
+							<choice display="Slovenian" value="sl"/>,
+							<choice display="Spanish" value="es"/>,
+							<choice display="Swedish" value="sv"/>,
+							<choice display="Tamil" value="ta"/>,
+							<choice display="Telugu" value="te"/>,
+							<choice display="Thai" value="th"/>,
+							<choice display="Turkish" value="tr"/>,
+							<choice display="Ukrainian" value="uk"/>,
+							<choice display="Urdu" value="ur"/>,
+							<choice display="Vietnamese" value="vi"/>
+						</editor>
+					</row>
+				</recipe>;
+
+			super(recipe);
+			
+ 			SetIcon("alignStartIcon", alignStartIcon);
+ 			SetIcon("alignEndIcon", alignEndIcon);
+ 			SetIcon("alignLeftIcon", alignLeftIcon);
+ 			SetIcon("alignCenterIcon", alignCenterIcon);
+ 			SetIcon("alignRightIcon", alignRightIcon);
+ 			SetIcon("alignJustifyIcon", alignJustifyIcon);
+ 			SetIcon("alignLastLeftIcon", alignLastLeftIcon);
+ 			SetIcon("alignLastCenterIcon", alignLastCenterIcon);
+ 			SetIcon("alignLastRightIcon", alignLastRightIcon);
+		}
+	}
+}
\ No newline at end of file
diff --git a/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/SelectionUpdateEvent.as b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/SelectionUpdateEvent.as
new file mode 100644
index 0000000..f8bde2f
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/SelectionUpdateEvent.as
@@ -0,0 +1,41 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 flashx.textLayout.ui.inspectors
+{
+	import flash.events.Event;
+
+	public class SelectionUpdateEvent extends Event
+	{
+		public static const SELECTION_UPDATE:String = "selectionUpdate";
+		
+		public function SelectionUpdateEvent(inFormat:Object)
+		{
+			super(SELECTION_UPDATE);
+			mFormat = inFormat;
+		}
+		
+		public function get format():Object
+		{
+			return mFormat;
+		}
+		
+		private var mFormat:Object;
+	}
+}
\ No newline at end of file
diff --git a/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/TabPropertyEditor.as b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/TabPropertyEditor.as
new file mode 100644
index 0000000..4118857
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/TabPropertyEditor.as
@@ -0,0 +1,64 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 flashx.textLayout.ui.inspectors
+{
+	import bxf.ui.inspectors.DynamicPropertyEditorBase;
+	
+	import flash.text.engine.*;
+	
+	import flashx.textLayout.formats.TabStopFormat;
+	import flashx.textLayout.tlf_internal;
+	use namespace tlf_internal;
+	
+	public class TabPropertyEditor extends DynamicPropertyEditorBase
+	{
+		public function TabPropertyEditor()
+		{
+			var recipe:XML = 
+				<recipe>
+					<row>
+						<editor type="checkbox" label="$$$/stage/TextEditing/Label/showRuler=Show Ruler" labelSide="right">
+							<property name="rulervisible"/>
+						</editor>
+						<editor type="hotnumber" label="$$$/stage/TextEditing/Label/tabPosition=Position:" decimals="1" enforcePrecision="no">
+							<property name={TabStopFormat.positionProperty.name}
+								minValue={TabStopFormat.positionProperty.minValue}
+								maxValue={TabStopFormat.positionProperty.maxValue}/>
+						</editor>
+					</row>
+					<row>
+						<editor type="combo" label="$$$/stage/TextEditing/Label/tabType=Tab Type:">
+							<property name={TabStopFormat.alignmentProperty.name}/>
+							<choice display="Start" value={flash.text.engine.TabAlignment.START}/>
+							<choice display="Center" value={flash.text.engine.TabAlignment.CENTER}/>
+							<choice display="End" value={flash.text.engine.TabAlignment.END}/>
+							<choice display="Align" value={flash.text.engine.TabAlignment.DECIMAL}/>
+						</editor>
+						<editor type="string" label="$$$/stage/TextEditing/Label/tabAlign=Align to:" width="50">
+							<property name={TabStopFormat.decimalAlignmentTokenProperty.name}/>
+						</editor>
+					</row>
+				</recipe>;
+
+			super(recipe);
+		}
+		
+	}
+}
\ No newline at end of file
diff --git a/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/TextContainerPropertyEditor.as b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/TextContainerPropertyEditor.as
new file mode 100644
index 0000000..36d62f8
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/TextContainerPropertyEditor.as
@@ -0,0 +1,151 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 flashx.textLayout.ui.inspectors
+{
+	import flash.text.engine.*;
+
+	import flashx.textLayout.formats.FormatValue;
+	import flashx.textLayout.formats.TextLayoutFormat;
+	import flashx.textLayout.tlf_internal;
+	use namespace tlf_internal;
+	
+	public class TextContainerPropertyEditor extends DynamicTextPropertyEditor
+	{
+		[Embed(source="./assets/cont_align_top_icon.png")]
+		private var contAlignTopIcon:Class;
+
+		[Embed(source="./assets/cont_align_middle_icon.png")]
+		private var contAlignMiddleIcon:Class;
+
+		[Embed(source="./assets/cont_align_bottom_icon.png")]
+		private var contAlignBottomIcon:Class;
+
+		[Embed(source="./assets/cont_align_justify_icon.png")]
+		private var contAlignJustifyIcon:Class;
+
+		public function TextContainerPropertyEditor()
+		{
+			var recipe:XML =
+				<recipe>
+					<row>
+						<editor type="multiIconButton" style="iconButtonGroup" label="$$$/stage/TextEditing/Label/Container/Alignment=Alignment:">
+							<property name={TextInspectorController.VERTICAL_ALIGN_UIPROP}/>
+							<button icon="contAlignTopIcon" value="top"/>
+							<button icon="contAlignMiddleIcon" value="middle"/>
+							<button icon="contAlignBottomIcon" value="bottom"/>
+							<button icon="contAlignJustifyIcon" value="justify"/>
+						</editor>
+					</row>
+					<row>
+						<editor type="hotnumberunit" label="$$$/stage/TextEditing/Label/NumColumns=Columns:">
+							<property name={TextInspectorController.COLUMN_COUNT_UIPROP}/>
+							<defaultunit>count</defaultunit>
+							<numericunit displayname="count"
+								min={TextLayoutFormat.columnCountProperty.minValue} 
+								max={TextLayoutFormat.columnCountProperty.maxValue} 
+								default="1"/>
+							<enumval displayname="Auto" value={flashx.textLayout.formats.FormatValue.AUTO}/>
+						</editor>
+					</row>
+					<row>
+						<editor type="hotnumberunit" label="$$$/stage/TextEditing/Label/ColumnWidth=Column Width:">
+							<property name={TextInspectorController.COLUMN_WIDTH_UIPROP}/>
+							<defaultunit>pix</defaultunit>
+							<numericunit displayname="pix" 
+								min={TextLayoutFormat.columnWidthProperty.minValue} 
+								max={TextLayoutFormat.columnWidthProperty.maxValue} 
+								default="200"/>
+							<enumval displayname="Auto" value={flashx.textLayout.formats.FormatValue.AUTO}/>
+						</editor>
+						<editor type="hotnumber" label="$$$/stage/TextEditing/Label/ColumnGap=Gap:" decimals="1" enforcePrecision="no">
+							<property name={TextInspectorController.COLUMN_GAP_UIPROP} 
+								minValue={TextLayoutFormat.columnGapProperty.minValue}
+								maxValue={TextLayoutFormat.columnGapProperty.maxValue}/>
+						</editor>
+					</row>
+					<row label="$$$/stage/TextEditing/Label/ContainerGeometry=Geometry:"/>
+					<row>
+						<editor type="hotnumber" label="$$$/stage/TextEditing/Label/PaddingLeft=Left:" decimals="1" enforcePrecision="no">
+							<property name={TextInspectorController.PADDING_LEFT_UIPROP} 
+								minValue={TextLayoutFormat.paddingLeftProperty.minValue} 
+								maxValue={TextLayoutFormat.paddingLeftProperty.maxValue}/>
+						</editor>
+						<editor type="hotnumber" label="$$$/stage/TextEditing/Label/PaddingTop=Top:" decimals="1" enforcePrecision="no">
+							<property name={TextInspectorController.PADDING_TOP_UIPROP} 
+								minValue={TextLayoutFormat.paddingTopProperty.minValue} 
+								maxValue={TextLayoutFormat.paddingTopProperty.maxValue}/>
+						</editor>
+					</row>
+					<row>
+						<editor type="hotnumber" label="$$$/stage/TextEditing/Label/PaddingRight=Right:" decimals="1" enforcePrecision="no">
+							<property name={TextInspectorController.PADDING_RIGHT_UIPROP} 
+								minValue={TextLayoutFormat.paddingRightProperty.minValue} 
+								maxValue={TextLayoutFormat.paddingRightProperty.maxValue}/>
+						</editor>
+						<editor type="hotnumber" label="$$$/stage/TextEditing/Label/PaddingBottom=Bottom:" decimals="1" enforcePrecision="no">
+							<property name={TextInspectorController.PADDING_BOTTOM_UIPROP} 
+								minValue={TextLayoutFormat.paddingBottomProperty.minValue} 
+								maxValue={TextLayoutFormat.paddingBottomProperty.maxValue}/>
+						</editor>
+					</row>
+					<row>
+						<editor type="hotnumberunit" label="$$$/stage/TextEditing/Label/FirstBaseline=First Line Offset:">
+							<property name={TextInspectorController.FIRST_BASELINE_UIPROP}/>
+							<defaultunit>pix</defaultunit>
+							<numericunit displayname="pix" 
+								min={TextLayoutFormat.firstBaselineOffsetProperty.minValue}
+								max={TextLayoutFormat.firstBaselineOffsetProperty.maxValue} 
+								default="1"/>
+							<enumval displayname="Auto" value={flashx.textLayout.formats.BaselineOffset.AUTO}/>
+							<enumval displayname="Ascent" value={flashx.textLayout.formats.BaselineOffset.ASCENT}/>
+							<enumval displayname="Line Height" value={flashx.textLayout.formats.BaselineOffset.LINE_HEIGHT}/>
+						</editor>
+					</row>
+			<!--		<row label="$$$/stage/TextEditing/Label/Border=Border:">
+						<editor type="combo" label="$$$/stage/TextEditing/Label/BorderStyle=Style:">
+							<property name={TextInspectorController.BORDER_STYLE_UIPROP}/>
+							<choice display="None" value={text.BorderStyle.NONE}/>
+							<choice display="Solid" value={text.BorderStyle.SOLID}/>
+							<choice display="Innie" value={text.BorderStyle.INSET}/>
+							<choice display="Outie" value={text.BorderStyle.OUTSET}/>
+						</editor>
+					</row>
+					<row>
+						<editor type="hotnumber" label="$$$/stage/TextEditing/Label/BorderThickness=Thickness:" decimals="0" enforcePrecision="yes">
+							<property name={TextInspectorController.BORDER_THICKNESS_UIPROP} 
+								minValue={TextLayoutFormat.borderThicknessProperty.minValue}
+								maxValue={TextLayoutFormat.borderThicknessProperty.maxValue}/>
+						</editor>
+						<editor type="color" label="$$$/stage/TextEditing/Label/BorderColor=Color:">
+							<property name={TextInspectorController.BORDER_COLOR_UIPROP}/>
+						</editor>
+					</row> -->
+				</recipe>;
+
+			super(recipe);
+
+ 			SetIcon("contAlignTopIcon", contAlignTopIcon);
+ 			SetIcon("contAlignMiddleIcon", contAlignMiddleIcon);
+ 			SetIcon("contAlignBottomIcon", contAlignBottomIcon);
+ 			SetIcon("contAlignJustifyIcon", contAlignJustifyIcon);
+		}
+		
+	}
+}
\ No newline at end of file
diff --git a/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/TextFlowPropertyEditor.as b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/TextFlowPropertyEditor.as
new file mode 100644
index 0000000..9b9530a
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/TextFlowPropertyEditor.as
@@ -0,0 +1,71 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 flashx.textLayout.ui.inspectors
+{
+	import flashx.textLayout.formats.BlockProgression;
+	import flashx.textLayout.formats.LineBreak;
+
+	public class TextFlowPropertyEditor extends DynamicTextPropertyEditor
+	{
+		public function TextFlowPropertyEditor()
+		{
+			var recipe:XML =
+				<recipe>
+					<row>
+						<editor type="combo" label="$$$/stage/TextEditing/Label/LineProgression=Orientation:">
+							<property name={TextInspectorController.BLOCK_PROGRESSION_UIPROP}/>
+							<choice display="Horizontal" value={flashx.textLayout.formats.BlockProgression.TB}/>
+							<choice display="Vertical" value={flashx.textLayout.formats.BlockProgression.RL}/>
+						</editor>
+					</row>
+					<row>
+						<editor type="combo" label="$$$/stage/TextEditing/Label/direction=Direction:">
+							<property name={TextInspectorController.FLOW_DIRECTION_UIPROP}/>
+							<choice display="Left to Right" value={flashx.textLayout.formats.Direction.LTR}/>
+							<choice display="Right to Left" value={flashx.textLayout.formats.Direction.RTL}/>
+						</editor>
+					</row>
+					<row>
+						<editor type="combo" label="$$$/stage/TextEditing/Label/Linebreak=Line Breaks:">
+							<property name={TextInspectorController.LINE_BREAK_UIPROP}/>
+							<choice display="Auto Line Wrap" value={flashx.textLayout.formats.LineBreak.TO_FIT}/>
+							<choice display="Hard Breaks Only" value={flashx.textLayout.formats.LineBreak.EXPLICIT}/>
+						</editor>
+					</row>
+					<row>
+						<editor type="combo" label="$$$/stage/TextEditing/Label/vertScroll=V. Scroll:">
+							<property name={TextInspectorController.VERTICAL_SCROLL_UIPROP}/>
+							<choice display="Off" value="off"/>
+							<choice display="On" value="on"/>
+							<choice display="Auto" value="auto"/>
+						</editor>
+						<editor type="combo" label="$$$/stage/TextEditing/Label/horzScroll=H. Scroll:">
+							<property name={TextInspectorController.HORIZONTAL_SCROLL_UIPROP}/>
+							<choice display="Off" value="off"/>
+							<choice display="On" value="on"/>
+							<choice display="Auto" value="auto"/>
+						</editor>
+					</row>
+				</recipe>;
+			super(recipe);
+		}
+		
+	}
+}
\ No newline at end of file
diff --git a/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/TextInspectorController.as b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/TextInspectorController.as
new file mode 100644
index 0000000..3bf6f6a
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/TextInspectorController.as
@@ -0,0 +1,614 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 flashx.textLayout.ui.inspectors
+{
+	import flash.events.EventDispatcher;
+	import flash.events.IEventDispatcher;
+	import flash.text.engine.RenderingMode;
+	
+	import flashx.textLayout.compose.TextFlowLine;
+	import flashx.textLayout.container.ContainerController;
+	import flashx.textLayout.edit.ElementRange;
+	import flashx.textLayout.edit.IEditManager;
+	import flashx.textLayout.edit.SelectionState;
+	import flashx.textLayout.elements.FlowElement;
+	import flashx.textLayout.elements.FlowLeafElement;
+	import flashx.textLayout.elements.LinkElement;
+	import flashx.textLayout.elements.ParagraphElement;
+	import flashx.textLayout.elements.SpanElement;
+	import flashx.textLayout.elements.TCYElement;
+	import flashx.textLayout.elements.TextFlow;
+	import flashx.textLayout.events.SelectionEvent;
+	import flashx.textLayout.formats.ITextLayoutFormat;
+	import flashx.textLayout.formats.TextAlign;
+	import flashx.textLayout.formats.TextLayoutFormat;
+	import flashx.textLayout.tlf_internal;
+	import flashx.textLayout.ui.rulers.RulerBar;
+	
+	use namespace tlf_internal;
+
+	public class TextInspectorController extends EventDispatcher
+	{
+		public static const CHAR_DOMAIN:String = "char"
+		public static const PAR_DOMAIN:String = "par"
+		public static const CONT_DOMAIN:String = "cont"
+		public static const FLOW_DOMAIN:String = "flow"
+		public static const SCROLL_DOMAIN:String = "sp"
+		public static const TCY_DOMAIN:String = "tcy"
+		public static const LINK_DOMAIN:String = "link"
+		
+		public static const FONT_SIZE_UIPROP:String = CHAR_DOMAIN + "/" + TextLayoutFormat.fontSizeProperty.name;
+		public static const FONT_FAMILY_UIPROP:String = CHAR_DOMAIN + "/" + TextLayoutFormat.fontFamilyProperty.name;
+		public static const FONT_LOOKUP_UIPROP:String = CHAR_DOMAIN + "/" + TextLayoutFormat.fontLookupProperty.name;
+		public static const TRACKING_RIGHT_UIPROP:String = CHAR_DOMAIN + "/" + TextLayoutFormat.trackingRightProperty.name;
+		public static const TRACKING_LEFT_UIPROP:String = CHAR_DOMAIN + "/" + TextLayoutFormat.trackingLeftProperty.name;
+		public static const KERNING_UIPROP:String = CHAR_DOMAIN + "/" + TextLayoutFormat.kerningProperty.name;
+		public static const LINE_HEIGHT_UIPROP:String = CHAR_DOMAIN + "/" + TextLayoutFormat.lineHeightProperty.name;
+		public static const COLOR_UIPROP:String = CHAR_DOMAIN + "/" + TextLayoutFormat.colorProperty.name;
+		public static const BGCOLOR_UIPROP:String = CHAR_DOMAIN + "/" + TextLayoutFormat.backgroundColorProperty.name;
+		public static const FONT_WEIGHT_UIPROP:String = CHAR_DOMAIN + "/" + TextLayoutFormat.fontWeightProperty.name;
+		public static const FONT_STYLE_UIPROP:String = CHAR_DOMAIN + "/" + TextLayoutFormat.fontStyleProperty.name;
+		public static const TEXT_DECORATION_UIPROP:String = CHAR_DOMAIN + "/" + TextLayoutFormat.textDecorationProperty.name;
+		public static const LINE_THROUGH_UIPROP:String = CHAR_DOMAIN + "/" + TextLayoutFormat.lineThroughProperty.name;
+		public static const DIGIT_CASE_UIPROP:String = CHAR_DOMAIN + "/" + TextLayoutFormat.digitCaseProperty.name;
+		public static const DIGIT_WIDTH_UIPROP:String = CHAR_DOMAIN + "/" + TextLayoutFormat.digitWidthProperty.name;
+		public static const DOMINANT_BASELINE_UIPROP:String = CHAR_DOMAIN + "/" + TextLayoutFormat.dominantBaselineProperty.name;
+		public static const ALIGNMENT_BASELINE_UIPROP:String = CHAR_DOMAIN + "/" + TextLayoutFormat.alignmentBaselineProperty.name;
+		public static const BASELINE_SHIFT_SUPER_UIPROP:String = CHAR_DOMAIN + "/" + TextLayoutFormat.baselineShiftProperty.name + "#super";
+		public static const BASELINE_SHIFT_SUB_UIPROP:String = CHAR_DOMAIN + "/" + TextLayoutFormat.baselineShiftProperty.name + "#sub";
+		public static const BASELINE_SHIFT_UIPROP:String = CHAR_DOMAIN + "/" + TextLayoutFormat.baselineShiftProperty.name;
+		public static const TYPOGRAPHIC_CASE_UIPROP:String = CHAR_DOMAIN + "/" + TextLayoutFormat.typographicCaseProperty.name;
+		public static const LIGATURE_LEVEL_UIPROP:String = CHAR_DOMAIN + "/" + TextLayoutFormat.ligatureLevelProperty.name;
+		public static const TEXT_ROTATION_UIPROP:String = CHAR_DOMAIN + "/" + TextLayoutFormat.textRotationProperty.name;
+		public static const TEXT_ALPHA_UIPROP:String = CHAR_DOMAIN + "/" + TextLayoutFormat.textAlphaProperty.name;
+		public static const BACKGROUND_ALPHA_UIPROP:String = CHAR_DOMAIN + "/" + TextLayoutFormat.backgroundAlphaProperty.name;
+		public static const LOCALE_UIPROP:String = CHAR_DOMAIN + "/" + TextLayoutFormat.localeProperty.name;
+		public static const BREAK_OPPORTUNITY_UIPROP:String = CHAR_DOMAIN + "/" + TextLayoutFormat.breakOpportunityProperty.name;
+		public static const RENDERING_MODE_UIPROP:String = CHAR_DOMAIN + "/" + TextLayoutFormat.renderingModeProperty.name;
+		public static const CFF_HINTING_UIPROP:String = CHAR_DOMAIN + "/" + TextLayoutFormat.cffHintingProperty.name;
+		
+		public static const PARA_LOCALE_UIPROP:String = PAR_DOMAIN + "/" + TextLayoutFormat.localeProperty.name;
+		public static const TEXT_INDENT_UIPROP:String = PAR_DOMAIN + "/" + TextLayoutFormat.textIndentProperty.name;
+		public static const START_INDENT_UIPROP:String = PAR_DOMAIN + "/" + TextLayoutFormat.paragraphStartIndentProperty.name;
+		public static const END_INDENT_UIPROP:String = PAR_DOMAIN + "/" + TextLayoutFormat.paragraphEndIndentProperty.name;
+		public static const SPACE_BEFORE_UIPROP:String = PAR_DOMAIN + "/" + TextLayoutFormat.paragraphSpaceBeforeProperty.name;
+		public static const SPACE_AFTER_UIPROP:String = PAR_DOMAIN + "/" + TextLayoutFormat.paragraphSpaceAfterProperty.name;
+		public static const TEXT_ALIGN_UIPROP:String = PAR_DOMAIN + "/" + TextLayoutFormat.textAlignProperty.name;
+		public static const TEXT_ALIGN_LAST_UIPROP:String = PAR_DOMAIN + "/" + TextLayoutFormat.textAlignLastProperty.name;
+		public static const JUSTIFICATION_RULE_UIPROP:String = PAR_DOMAIN + "/" + TextLayoutFormat.justificationRuleProperty.name;
+		public static const TEXT_JUSTIFY_UIPROP:String = PAR_DOMAIN + "/" + TextLayoutFormat.textJustifyProperty.name;
+		public static const JUSTIFICATION_STYLE_UIPROP:String = PAR_DOMAIN + "/" + TextLayoutFormat.justificationStyleProperty.name;
+		public static const DIRECTION_UIPROP:String = PAR_DOMAIN + "/" + TextLayoutFormat.directionProperty.name;
+		public static const LEADING_MODEL_UIPROP:String = PAR_DOMAIN + "/" + TextLayoutFormat.leadingModelProperty.name;
+
+		public static const VERTICAL_ALIGN_UIPROP:String = CONT_DOMAIN + "/" + TextLayoutFormat.verticalAlignProperty.name;
+		public static const COLUMN_COUNT_UIPROP:String = CONT_DOMAIN + "/" + TextLayoutFormat.columnCountProperty.name;
+		public static const COLUMN_WIDTH_UIPROP:String = CONT_DOMAIN + "/" + TextLayoutFormat.columnWidthProperty.name;
+		public static const COLUMN_GAP_UIPROP:String = CONT_DOMAIN + "/" + TextLayoutFormat.columnGapProperty.name;
+		public static const PADDING_LEFT_UIPROP:String = CONT_DOMAIN + "/" + TextLayoutFormat.paddingLeftProperty.name;
+		public static const PADDING_TOP_UIPROP:String = CONT_DOMAIN + "/" + TextLayoutFormat.paddingTopProperty.name;
+		public static const PADDING_RIGHT_UIPROP:String = CONT_DOMAIN + "/" + TextLayoutFormat.paddingRightProperty.name;
+		public static const PADDING_BOTTOM_UIPROP:String = CONT_DOMAIN + "/" + TextLayoutFormat.paddingBottomProperty.name;
+		public static const FIRST_BASELINE_UIPROP:String = CONT_DOMAIN + "/" + TextLayoutFormat.firstBaselineOffsetProperty.name;
+
+		public static const BLOCK_PROGRESSION_UIPROP:String = FLOW_DOMAIN + "/" + TextLayoutFormat.blockProgressionProperty.name;
+		public static const FLOW_DIRECTION_UIPROP:String = FLOW_DOMAIN + "/" + TextLayoutFormat.directionProperty.name;
+		public static const LINE_BREAK_UIPROP:String = FLOW_DOMAIN + "/" + TextLayoutFormat.lineBreakProperty.name;
+
+		public static const VERTICAL_SCROLL_UIPROP:String = SCROLL_DOMAIN + "/" + "verticalScrollPolicy";
+		public static const HORIZONTAL_SCROLL_UIPROP:String = SCROLL_DOMAIN + "/" + "horizontalScrollPolicy";
+
+		public static const TCY_UIPROP:String = TCY_DOMAIN + "/" + "tcy";
+
+		public static const LINK_URL_UIPROP:String = LINK_DOMAIN + "/" + "linkURL";
+		public static const LINK_TARGET_UIPROP:String = LINK_DOMAIN + "/" + "linkTarget";
+		public static const LINK_EXTEND_UIPROP:String = LINK_DOMAIN + "/" + "linkExtend";
+		private static var sInstance:TextInspectorController = null;
+		
+		private var processingCharacterFormatChange:Boolean = false;
+		
+		public function TextInspectorController(target:IEventDispatcher=null)
+		{
+			super(target);
+			if (sInstance != null)
+				throw new Error("Can't create another TextEditingController. Call TextEditingController.Instance.");
+		}
+		
+		public static function Instance():TextInspectorController
+		{
+			if (!sInstance)
+				sInstance = new TextInspectorController();
+			return sInstance;
+		}
+		
+		public function set activeFlow(inFlow:TextFlow):void
+		{
+			if (inFlow && !inFlow.interactionManager is IEditManager)
+				throw new Error("Can't set the active flow to a flow without an EditManager.");
+			if (mActiveFlow)
+			{
+				mActiveFlow.removeEventListener(SelectionEvent.SELECTION_CHANGE, onTextSelectionChanged);
+				mEditManager = null;
+			}
+			mActiveFlow = inFlow;
+			if (mActiveFlow)
+			{
+				mEditManager = mActiveFlow.interactionManager as IEditManager;
+				mActiveFlow.addEventListener(SelectionEvent.SELECTION_CHANGE, onTextSelectionChanged);
+			}
+			else
+				onTextSelectionChanged(null);
+			for each (var ruler:RulerBar in mRulers)
+				ruler.activeFlow = mActiveFlow;
+		}
+		
+		public function get activeFlow():TextFlow
+		{
+			return mActiveFlow;
+		}
+		
+		public function set rulerVisible(inVisible:Boolean):void
+		{
+			for each (var ruler:RulerBar in mRulers)
+			{
+				ruler.active = inVisible;
+				if (inVisible)
+				{
+					ruler.RedrawRuler();
+				}
+			}
+			if (mActiveFlow && (mActiveFlow.interactionManager))
+			{
+				mActiveFlow.interactionManager.setFocus();
+			}
+		}
+		
+		public function get rulerVisible():Boolean
+		{
+			if (mRulers.length > 0)
+				return mRulers[0].active;
+			return false;
+		}
+
+		public function AddRuler(inRuler:RulerBar):void
+		{
+			mRulers.push(inRuler);
+		}
+		
+ 		private function onTextSelectionChanged(e:SelectionEvent):void
+		{
+			if ((processingCharacterFormatChange) && (mEditManager.absoluteStart == mEditManager.absoluteEnd)) return;
+			
+			if (e)
+			{
+				var selState:SelectionState = e.selectionState;
+				var selectedElementRange:ElementRange =  selState ? ElementRange.createElementRange(selState.textFlow, selState.absoluteStart, selState.absoluteEnd) : null;
+				if (selectedElementRange)
+				{
+					var format:Object = GetFormatFromRange(selectedElementRange,selState.pointFormat);
+					if (mLastFormat == null || FormatChanged(mLastFormat, format))
+					{
+						dispatchEvent(new SelectionUpdateEvent(format));
+						mLastFormat = format;
+					}
+				}
+			}
+			else
+			{
+				dispatchEvent(new SelectionUpdateEvent(new Object()));
+				mLastFormat = null;
+			}
+		}
+		
+		public function forceBroadcastFormats():void
+		{
+			if (mEditManager)
+			{
+				var format:Object = GetFormatFromRange(ElementRange.createElementRange(mActiveFlow, mActiveFlow.interactionManager.anchorPosition, mActiveFlow.interactionManager.activePosition),null);
+				dispatchEvent(new SelectionUpdateEvent(format));
+				mLastFormat = format;
+			}
+		}
+		
+		private function FormatChanged(format1:Object, format2:Object):Boolean
+		{
+			if (format1.numProps == format2.numProps)
+			{
+				for(var key:String in format1)
+				{
+					if (format2[key] == null)
+						return true;
+					var prop1:Array = format1[key];
+					var prop2:Array = format2[key];
+					var n:int = prop1.length;
+					if (n != prop2.length)
+						return true;
+					for (var i:int = 0; i < n; ++i)
+						if (prop1[i] != prop2[i])
+							return true;
+				}
+				return false;
+			}
+			return true;
+		}
+
+		private function GetFormatFromRange(inRange:ElementRange,pendingFormat:ITextLayoutFormat):Object
+		{
+			var format:Object = new Object();
+			format.numProps = 0;
+			format.setPropertyIsEnumerable("numProps", false);
+			var leafIter:FlowLeafElement = inRange.firstLeaf;
+			while (leafIter)
+			{
+				var charFormat:ITextLayoutFormat = leafIter.computedFormat;
+				if (pendingFormat)
+				{
+					var scratch:TextLayoutFormat = new TextLayoutFormat(charFormat);
+					scratch.apply(pendingFormat);
+					charFormat = scratch;
+				}
+				AddAttributeToFormat(format, FONT_FAMILY_UIPROP, charFormat.fontFamily);
+				if (!IsMetaFontName(charFormat.fontFamily))
+					AddAttributeToFormat(format, FONT_LOOKUP_UIPROP, charFormat.fontLookup);
+				AddAttributeToFormat(format, FONT_SIZE_UIPROP, charFormat.fontSize);
+				AddAttributeToFormat(format, TRACKING_RIGHT_UIPROP, charFormat.trackingRight);
+				AddAttributeToFormat(format, TRACKING_LEFT_UIPROP, charFormat.trackingLeft);
+				AddAttributeToFormat(format, KERNING_UIPROP, charFormat.kerning);
+				AddAttributeToFormat(format, LINE_HEIGHT_UIPROP, charFormat.lineHeight);
+				AddAttributeToFormat(format, COLOR_UIPROP, charFormat.color);
+				AddAttributeToFormat(format, BGCOLOR_UIPROP, charFormat.backgroundColor);
+				AddAttributeToFormat(format, FONT_WEIGHT_UIPROP, charFormat.fontWeight);
+				AddAttributeToFormat(format, FONT_STYLE_UIPROP, charFormat.fontStyle);
+				AddAttributeToFormat(format, TEXT_DECORATION_UIPROP, charFormat.textDecoration);
+				AddAttributeToFormat(format, LINE_THROUGH_UIPROP, charFormat.lineThrough);
+				// This little kludge allows me to have two controls operate on the same property
+				AddAttributeToFormat(format, BASELINE_SHIFT_SUPER_UIPROP,
+						charFormat.baselineShift == flashx.textLayout.formats.BaselineShift.SUPERSCRIPT ?
+														flashx.textLayout.formats.BaselineShift.SUPERSCRIPT :
+														0);
+				AddAttributeToFormat(format, BASELINE_SHIFT_SUB_UIPROP,
+						charFormat.baselineShift == flashx.textLayout.formats.BaselineShift.SUBSCRIPT ?
+														flashx.textLayout.formats.BaselineShift.SUBSCRIPT :
+														0);
+				AddAttributeToFormat(format, DIGIT_CASE_UIPROP, charFormat.digitCase);
+				AddAttributeToFormat(format, DIGIT_WIDTH_UIPROP, charFormat.digitWidth);
+				AddAttributeToFormat(format, DOMINANT_BASELINE_UIPROP, charFormat.dominantBaseline);
+				AddAttributeToFormat(format, ALIGNMENT_BASELINE_UIPROP, charFormat.alignmentBaseline);
+				AddAttributeToFormat(format, BASELINE_SHIFT_UIPROP, charFormat.baselineShift);
+				AddAttributeToFormat(format, TYPOGRAPHIC_CASE_UIPROP, charFormat.typographicCase);
+				AddAttributeToFormat(format, LIGATURE_LEVEL_UIPROP, charFormat.ligatureLevel);
+				AddAttributeToFormat(format, TEXT_ROTATION_UIPROP, charFormat.textRotation);
+				AddAttributeToFormat(format, TEXT_ALPHA_UIPROP, charFormat.textAlpha);
+				AddAttributeToFormat(format, BACKGROUND_ALPHA_UIPROP, charFormat.backgroundAlpha);
+				AddAttributeToFormat(format, LOCALE_UIPROP, charFormat.locale);
+				AddAttributeToFormat(format, BREAK_OPPORTUNITY_UIPROP, charFormat.breakOpportunity);
+				AddAttributeToFormat(format, RENDERING_MODE_UIPROP, charFormat.renderingMode);
+				if (charFormat.renderingMode == flash.text.engine.RenderingMode.CFF)
+					AddAttributeToFormat(format, CFF_HINTING_UIPROP, charFormat.cffHinting);
+				
+				
+				var paragraph:ParagraphElement = leafIter.getParagraph();
+	  			var paraFormat:ITextLayoutFormat = paragraph.computedFormat;
+	  			AddAttributeToFormat(format, PARA_LOCALE_UIPROP, paraFormat.locale);
+	  			AddAttributeToFormat(format, TEXT_INDENT_UIPROP, paraFormat.textIndent);
+	  			AddAttributeToFormat(format, START_INDENT_UIPROP, paraFormat.paragraphStartIndent);
+	  			AddAttributeToFormat(format, END_INDENT_UIPROP, paraFormat.paragraphEndIndent);
+	  			AddAttributeToFormat(format, SPACE_BEFORE_UIPROP, paraFormat.paragraphSpaceBefore);
+	  			AddAttributeToFormat(format, SPACE_AFTER_UIPROP, paraFormat.paragraphSpaceAfter);
+	  			AddAttributeToFormat(format, TEXT_ALIGN_UIPROP, paraFormat.textAlign);
+	  			if (paraFormat.textAlign == TextAlign.JUSTIFY)
+	  				AddAttributeToFormat(format, TEXT_ALIGN_LAST_UIPROP, paraFormat.textAlignLast);
+	  			AddAttributeToFormat(format, JUSTIFICATION_RULE_UIPROP, paraFormat.justificationRule);
+	  			AddAttributeToFormat(format, TEXT_JUSTIFY_UIPROP, paraFormat.textJustify);
+	  			AddAttributeToFormat(format, JUSTIFICATION_STYLE_UIPROP, paraFormat.justificationStyle);
+	  			AddAttributeToFormat(format, DIRECTION_UIPROP, paraFormat.direction);
+	  			AddAttributeToFormat(format, LEADING_MODEL_UIPROP, paraFormat.leadingModel);
+	  			
+	  			addLinkSettings(format, leafIter);
+	  			
+	  			if (leafIter == inRange.lastLeaf)
+	  				break;
+
+				leafIter = leafIter.getNextLeaf();
+				
+				//if this is a single point selection between differing elements, we don't want to pick up the second one
+				//is start == end, break...
+				if(inRange.absoluteStart == inRange.absoluteEnd)
+					break;
+			}
+ 	 		var containerFormat:ITextLayoutFormat = null;
+ 			var selStart:int = Math.min(mActiveFlow.interactionManager.activePosition, mActiveFlow.interactionManager.anchorPosition);
+ 			var selEnd:int = Math.max(mActiveFlow.interactionManager.activePosition, mActiveFlow.interactionManager.anchorPosition);
+ 			var line:TextFlowLine = mActiveFlow.flowComposer.findLineAtPosition(selStart);
+ 			
+ 			// this is some odd logic - probably because ElementRange is not telling about the containercontroller range
+ 			if (line && line.controller)
+ 			{
+				var controller:ContainerController = line.controller;
+	 			line = mActiveFlow.flowComposer.findLineAtPosition(selEnd);
+	 			var lastController:ContainerController = null;
+	 			if (line && line.controller)
+	 				lastController = line.controller;
+	 			while (controller)
+	 			{
+		 			containerFormat = controller.computedFormat;
+					AddAttributeToFormat(format, VERTICAL_ALIGN_UIPROP, containerFormat.verticalAlign);
+					AddAttributeToFormat(format, COLUMN_COUNT_UIPROP, containerFormat.columnCount);
+					AddAttributeToFormat(format, COLUMN_WIDTH_UIPROP, containerFormat.columnWidth);
+					AddAttributeToFormat(format, COLUMN_GAP_UIPROP, containerFormat.columnGap);
+					AddAttributeToFormat(format, PADDING_LEFT_UIPROP, containerFormat.paddingLeft);
+					AddAttributeToFormat(format, PADDING_TOP_UIPROP, containerFormat.paddingTop);
+					AddAttributeToFormat(format, PADDING_RIGHT_UIPROP, containerFormat.paddingRight);
+					AddAttributeToFormat(format, PADDING_BOTTOM_UIPROP, containerFormat.paddingBottom);
+		// Note: These attributes are in the API but don't cause anything to be drawn. It looks like support
+		// for drawing borders on text containers is probably post-1.0. I have left in the XML description of
+		// how to build a UI for these properties, but commented this code out. If the DynamicPropertyEditorBase
+		// is never givena  value for these properties, it will not display the UI.
+		//			AddAttributeToFormat(format, BORDER_COLOR_UIPROP, containerFormat.borderColor);
+		//			AddAttributeToFormat(format, BORDER_STYLE_UIPROP, containerFormat.borderStyle);
+		//			AddAttributeToFormat(format, BORDER_THICKNESS_UIPROP, containerFormat.borderThickness);
+					AddAttributeToFormat(format, FIRST_BASELINE_UIPROP, containerFormat.firstBaselineOffset);
+
+					if (controller == lastController)
+						break;
+					var myIdx:int = controller.flowComposer.getControllerIndex(controller);
+					controller = myIdx+1 == controller.flowComposer.numControllers ? null : controller.flowComposer.getControllerAt(myIdx+1);
+	 			}
+			}
+			containerFormat = inRange.containerFormat;
+			var tf:TextFlow = inRange.firstLeaf.getTextFlow();
+			AddAttributeToFormat(format, BLOCK_PROGRESSION_UIPROP, tf.computedFormat.blockProgression);
+			AddAttributeToFormat(format, FLOW_DIRECTION_UIPROP, tf.computedFormat.direction);
+			AddAttributeToFormat(format, LINE_BREAK_UIPROP, tf.computedFormat.lineBreak);
+			
+			// TODO: uses first container only
+			AddAttributeToFormat(format, VERTICAL_SCROLL_UIPROP, mActiveFlow.flowComposer.getControllerAt(0).verticalScrollPolicy);
+			AddAttributeToFormat(format, HORIZONTAL_SCROLL_UIPROP, mActiveFlow.flowComposer.getControllerAt(0).horizontalScrollPolicy);
+
+			if (isTCYEnabled())
+   				AddAttributeToFormat(format, TCY_UIPROP, TCY(inRange));
+   				
+			if (shouldExtendLink(format))
+				AddAttributeToFormat(format, LINK_EXTEND_UIPROP, true);
+   			
+			return format;
+		}
+		
+		private function addLinkSettings(format:Object, leaf:FlowElement):void
+		{
+			var linkElement:LinkElement = leaf.getParentByType(LinkElement) as LinkElement;
+			if (linkElement)
+			{
+	    		AddAttributeToFormat(format, LINK_URL_UIPROP, linkElement.href);
+    			AddAttributeToFormat(format, LINK_TARGET_UIPROP, linkElement.target ? linkElement.target : "");
+			}
+			else
+			{
+	    		AddAttributeToFormat(format, LINK_URL_UIPROP, "");
+	    		// Don't show link target or extend link if there's no URL property in the selection
+			}
+			
+		}
+		
+		private function shouldExtendLink(format:Object):Boolean
+		{
+			// Check box is added if the selection contains mixed link settings (more than one, and at least one a valid link)
+			var extendLink:Boolean = false;
+			var urlArray:Array = format[LINK_URL_UIPROP];
+			if (urlArray && urlArray.length > 1)
+			{
+				for each (var urlString:String in urlArray)
+					if (urlString.length > 1)
+					{
+						extendLink = true;
+						break;
+					}
+			}
+			return extendLink;
+		}
+		
+		private function isTCYEnabled():Boolean
+		{
+			var okToTurnOnTCY:Boolean = false;
+			if (mActiveFlow.interactionManager.isRangeSelection())
+			{
+				//have to also check if more than just the end of paragraph markers
+				//are selected
+								
+				var selBegIdx:int = mActiveFlow.interactionManager.anchorPosition;
+				var selEndIdx:int = mActiveFlow.interactionManager.activePosition;
+				if (selBegIdx > selEndIdx)
+				{
+					var tempInt:int = selBegIdx;
+					selBegIdx = selEndIdx;
+					selEndIdx = tempInt;
+				}
+				
+				var para:ParagraphElement;
+				var startParaPos:int;
+				var endParaPos:int;
+				var beginCheckPos:int;
+				var endCheckPos:int;
+				while ((!okToTurnOnTCY) && (selBegIdx < selEndIdx))
+				{
+					para = mActiveFlow.findAbsoluteParagraph(selBegIdx);
+					startParaPos = para.getAbsoluteStart();
+					endParaPos = startParaPos + para.textLength;
+					
+					if (startParaPos > selBegIdx) 
+						beginCheckPos = startParaPos;
+					else 
+						beginCheckPos = selBegIdx
+						
+					if (endParaPos > selEndIdx)
+						endCheckPos = selEndIdx;
+					else
+						endCheckPos = endParaPos;
+					
+					var numSelInPar:int = endCheckPos - beginCheckPos;
+					if ((numSelInPar > 1) || ((numSelInPar == 1) && (endCheckPos != endParaPos)))
+					{
+						okToTurnOnTCY = true;
+					} else {
+						selBegIdx = endParaPos;
+					}
+				}
+			}
+			return okToTurnOnTCY;
+		}
+		
+		public function TCY(range:ElementRange):Boolean
+		{
+			if(range != null)
+			{
+				var anchorEl:FlowElement = range.firstLeaf;
+				var endEl:FlowElement = range.lastLeaf;
+				if ((endEl is SpanElement) && ((endEl as SpanElement).hasParagraphTerminator) && (endEl.textLength == 1))
+				{
+					endEl = endEl.getTextFlow().findLeaf(endEl.getAbsoluteStart() - 1);
+				}
+				
+				var anchorIsTCY:Boolean = false;
+				var endIsTCY:Boolean = false;
+				
+				//if this or any of it's parents are TCY, then anchorIsTCY is true
+				while(anchorEl != null && !anchorIsTCY)
+				{
+					if(anchorEl is TCYElement)
+						anchorIsTCY = true;
+					
+					anchorEl = anchorEl.parent;
+				}
+				
+				//if this or any of it's parents are TCY, then anchorIsTCY is true
+				//NOTE: anchorEl and endEl may differing parent counts.
+				while(endEl != null && !endIsTCY)
+				{
+					if(endEl is TCYElement)
+						endIsTCY = true;
+					
+					endEl = endEl.parent;
+				}
+				
+				return endIsTCY && anchorIsTCY;
+			}
+			else
+				return false;
+		}
+		
+		private function IsMetaFontName(inFont:String):Boolean
+		{
+			return (inFont == "_sans" || inFont == "_serif" || inFont == "_typewriter");
+		}
+		
+		private function AddAttributeToFormat(inFormat:Object, key:String, value:Object):void
+		{
+			if (inFormat[key] == null)
+			{
+				inFormat[key] = [];
+				++inFormat.numProps;
+			}
+			if (inFormat[key].indexOf(value) == -1)
+				inFormat[key].push(value);
+		}
+
+		public function SetTextProperty(inKey:String, inValue:Object):void
+		{
+			var slashIndex:int = inKey.indexOf("/");
+			if (slashIndex == -1)
+				throw new Error("Expected a key with a slash in it.");
+			var domain:String = inKey.slice(0, slashIndex);
+			var key:String = inKey.slice(slashIndex + 1);
+			// This little kludge allows me to have two controls operate on the same property
+			var hashIndex:int = key.indexOf("#");
+			if (hashIndex > -1)
+				key = key.slice(0, hashIndex);
+			if (mEditManager)
+			{
+				// scratch vars
+				var pa:TextLayoutFormat;
+				var cont:TextLayoutFormat;
+				var ca:TextLayoutFormat;
+				
+				switch(domain) {
+				case CHAR_DOMAIN:
+					ca = new TextLayoutFormat();
+					if (key == "color")
+					{
+						inValue = uint(inValue);
+						if (mActiveFlow)
+						{
+							mActiveFlow.interactionManager.setFocus();
+						}
+					}
+					if (key == "backgroundColor")
+					{
+						inValue = uint(inValue);
+					}
+					if (key == "lineThrough")
+						inValue = inValue == "true" ? true : false;
+					ca[key] = inValue;
+					if (key == "fontFamily" && IsMetaFontName(inValue as String))
+						ca["fontLookup"] = flash.text.engine.FontLookup.DEVICE;
+					processingCharacterFormatChange = true;						
+					mEditManager.applyLeafFormat(ca);
+					processingCharacterFormatChange = false;											
+					break;
+				case PAR_DOMAIN:
+					pa = new TextLayoutFormat();
+					pa[key] = inValue;
+					mEditManager.applyParagraphFormat(pa);
+					break;
+				case FLOW_DOMAIN:
+					pa = new TextLayoutFormat();
+					pa[key] = inValue;
+					mEditManager.applyFormatToElement(mActiveFlow,pa);
+					break;
+				case CONT_DOMAIN:
+					cont = new TextLayoutFormat();
+					cont[key] = inValue;
+
+					// always modify the containers
+					mEditManager.applyContainerFormat(cont,null);
+					break;
+				case SCROLL_DOMAIN:	// scroll policy props
+					mActiveFlow.flowComposer.getControllerAt(0)[key] = inValue;
+					mActiveFlow.flowComposer.updateAllControllers();
+					break;
+				case TCY_DOMAIN:
+					if (key == "tcy")
+  						mEditManager.applyTCY(inValue == "true" ? true : false);
+					break;
+				case LINK_DOMAIN:
+					if (key == "linkURL")
+  						mEditManager.applyLink(inValue as String);
+					break;
+				}
+			}
+			mLastFormat = null;
+		}
+
+		private var mActiveFlow:TextFlow = null;
+		private var mEditManager:IEditManager = null;
+		private var mLastFormat:Object = null;
+		private var mRulers:Array = [];
+
+	}
+}
diff --git a/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/assets/align_center_icon.png b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/assets/align_center_icon.png
new file mode 100644
index 0000000..14e18cd
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/assets/align_center_icon.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/assets/align_end_icon.png b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/assets/align_end_icon.png
new file mode 100644
index 0000000..917f0a0
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/assets/align_end_icon.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/assets/align_justify_icon.png b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/assets/align_justify_icon.png
new file mode 100644
index 0000000..01ccc34
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/assets/align_justify_icon.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/assets/align_last_center_icon.png b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/assets/align_last_center_icon.png
new file mode 100644
index 0000000..e5fb315
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/assets/align_last_center_icon.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/assets/align_last_left_icon.png b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/assets/align_last_left_icon.png
new file mode 100644
index 0000000..bd67ea2
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/assets/align_last_left_icon.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/assets/align_last_right_icon.png b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/assets/align_last_right_icon.png
new file mode 100644
index 0000000..d33328c
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/assets/align_last_right_icon.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/assets/align_left_icon.png b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/assets/align_left_icon.png
new file mode 100644
index 0000000..4524f7a
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/assets/align_left_icon.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/assets/align_right_icon.png b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/assets/align_right_icon.png
new file mode 100644
index 0000000..d84624c
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/assets/align_right_icon.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/assets/align_start_icon.png b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/assets/align_start_icon.png
new file mode 100644
index 0000000..80b6b9e
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/assets/align_start_icon.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/assets/bold_icon.png b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/assets/bold_icon.png
new file mode 100644
index 0000000..cef2c4b
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/assets/bold_icon.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/assets/cont_align_bottom_icon.png b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/assets/cont_align_bottom_icon.png
new file mode 100644
index 0000000..a6ec4b1
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/assets/cont_align_bottom_icon.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/assets/cont_align_justify_icon.png b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/assets/cont_align_justify_icon.png
new file mode 100644
index 0000000..4c45bc2
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/assets/cont_align_justify_icon.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/assets/cont_align_middle_icon.png b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/assets/cont_align_middle_icon.png
new file mode 100644
index 0000000..a1f5ae8
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/assets/cont_align_middle_icon.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/assets/cont_align_top_icon.png b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/assets/cont_align_top_icon.png
new file mode 100644
index 0000000..9981848
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/assets/cont_align_top_icon.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/assets/italic_icon.png b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/assets/italic_icon.png
new file mode 100644
index 0000000..9bcce71
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/assets/italic_icon.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/assets/strikethrough_icon.png b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/assets/strikethrough_icon.png
new file mode 100644
index 0000000..2d4e528
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/assets/strikethrough_icon.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/assets/subscript_icon.png b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/assets/subscript_icon.png
new file mode 100644
index 0000000..7ee2a86
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/assets/subscript_icon.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/assets/superscript_icon.png b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/assets/superscript_icon.png
new file mode 100644
index 0000000..210f933
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/assets/superscript_icon.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/assets/tcy_icon.png b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/assets/tcy_icon.png
new file mode 100644
index 0000000..86797f1
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/assets/tcy_icon.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/assets/underline_icon.png b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/assets/underline_icon.png
new file mode 100644
index 0000000..355ac65
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/inspectors/assets/underline_icon.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/rulers/ParagraphPropertyMarker.as b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/rulers/ParagraphPropertyMarker.as
new file mode 100644
index 0000000..b5f4327
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/rulers/ParagraphPropertyMarker.as
@@ -0,0 +1,98 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 flashx.textLayout.ui.rulers
+{
+	import flashx.textLayout.formats.TextLayoutFormat;
+	import flashx.textLayout.tlf_internal;
+	use namespace tlf_internal;
+	
+	public class ParagraphPropertyMarker extends RulerMarker
+	{
+		public function ParagraphPropertyMarker(inRuler:RulerBar, inProperty:String)
+		{
+			super(inRuler, 6, 13, 0, 0, 0);
+			setStyle("propkind", inProperty);
+			setStyle("rightToLeftPar", false);
+			mProperty = inProperty;
+		}
+		
+		public function get property():String
+		{
+			return mProperty;
+		}
+		
+		override protected function get alignToRight():Boolean
+		{
+			switch(mProperty)
+			{
+			case TextLayoutFormat.textIndentProperty.name:
+				return mRightToLeftPar ? true : false;
+			case TextLayoutFormat.paragraphStartIndentProperty.name:
+				return mRightToLeftPar;
+			case TextLayoutFormat.paragraphEndIndentProperty.name:
+				return !mRightToLeftPar;
+			}
+			return false;
+		}
+		
+		override protected function get originPosition():Number
+		{
+			return mRelativeToPosition;
+		}
+
+		public function set relativeToPosition(inRelPos:Number):void
+		{
+			mRelativeToPosition = inRelPos;
+			positionMarker();
+		}
+		
+		override public function get hOffset():Number
+		{
+			switch(mProperty)
+			{
+			case TextLayoutFormat.textIndentProperty.name:
+				return mRightToLeftPar ? -6 : 0;
+			case TextLayoutFormat.paragraphStartIndentProperty.name:
+				return mRightToLeftPar ? -6 : 0;
+			case TextLayoutFormat.paragraphEndIndentProperty.name:
+				return mRightToLeftPar ? 0 : -6;
+			}
+			return 0;
+		}
+		
+		public function set rightToLeftPar(inRightToLeft:Boolean):void
+		{
+			if (inRightToLeft != mRightToLeftPar)
+			{
+				mRightToLeftPar = inRightToLeft;
+				setStyle("rightToLeftPar", mRightToLeftPar);
+				
+				if (mProperty == TextLayoutFormat.paragraphStartIndentProperty.name)
+					mProperty = TextLayoutFormat.paragraphEndIndentProperty.name;
+				else if (mProperty == TextLayoutFormat.paragraphEndIndentProperty.name)
+					mProperty = TextLayoutFormat.paragraphStartIndentProperty.name;
+			}
+		}
+		
+		private var mProperty:String;
+		private var mRelativeToPosition:Number = 0;
+		private var mRightToLeftPar:Boolean = false;
+	}
+}
\ No newline at end of file
diff --git a/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/rulers/ParagraphPropertyMarkerSkin.as b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/rulers/ParagraphPropertyMarkerSkin.as
new file mode 100644
index 0000000..930f1c7
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/rulers/ParagraphPropertyMarkerSkin.as
@@ -0,0 +1,103 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 flashx.textLayout.ui.rulers
+{
+	import mx.skins.RectangularBorder;
+
+	public class ParagraphPropertyMarkerSkin extends RectangularBorder
+	{
+		public function ParagraphPropertyMarkerSkin()
+		{
+			super();
+		}
+		
+		override protected function updateDisplayList(w:Number, h:Number):void
+		{
+		    super.updateDisplayList(w, h);
+		    
+		    var propKind:String = getStyle("propkind");
+		    var rightToLeftPar:Boolean = getStyle("rightToLeftPar");
+		    
+		    var t:Number = 0;
+		    var b:Number = h;
+		    
+			graphics.clear();
+
+			graphics.beginFill(0x000000);
+			if (rightToLeftPar)
+			{
+				switch(propKind) {
+				case "textIndent":
+					b = (h - 1) / 2;
+					graphics.moveTo(w, 0);
+					graphics.lineTo(w, b);
+					graphics.lineTo(0, b);
+					graphics.lineTo(w, 0);
+					break;
+				case "paragraphStartIndent":
+					graphics.moveTo(0, 0);
+					graphics.lineTo(0, h);
+					graphics.lineTo(w, h / 2);
+					graphics.lineTo(0, 0);
+					break;
+				case "paragraphEndIndent":
+					t = h - (h - 1) / 2;
+					graphics.moveTo(w, h);
+					graphics.lineTo(0, t);
+					graphics.lineTo(w, t);
+					graphics.lineTo(w, h);
+					break;
+				}
+			}
+			else
+			{
+				switch(propKind) {
+				case "textIndent":
+					b = (h - 1) / 2;
+					graphics.moveTo(0, 0);
+					graphics.lineTo(w, b);
+					graphics.lineTo(0, b);
+					graphics.lineTo(0, 0);
+					break;
+				case "paragraphStartIndent":
+					t = h - (h - 1) / 2;
+					graphics.moveTo(0, h);
+					graphics.lineTo(0, t);
+					graphics.lineTo(w, t);
+					graphics.lineTo(0, h);
+					break;
+				case "paragraphEndIndent":
+					graphics.moveTo(w, 0);
+					graphics.lineTo(w, h);
+					graphics.lineTo(0, h / 2);
+					graphics.lineTo(w, 0);
+					break;
+				}
+			}
+			graphics.endFill();
+			
+			// this makes the whole rect hittable
+	  		graphics.lineStyle();
+	    	graphics.beginFill(0x0000ff, 0);
+	    	graphics.drawRect(0, t, w, b);
+	    	graphics.endFill();
+		}
+	}
+}
diff --git a/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/rulers/RulerBar.as b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/rulers/RulerBar.as
new file mode 100644
index 0000000..73817f2
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/rulers/RulerBar.as
@@ -0,0 +1,672 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 flashx.textLayout.ui.rulers
+{
+	import bxf.ui.inspectors.DynamicPropertyEditorBase;
+	
+	import flash.display.DisplayObject;
+	import flash.display.GradientType;
+	import flash.events.MouseEvent;
+	import flash.geom.Matrix;
+	import flash.geom.Point;
+	import flash.geom.Rectangle;
+	import flash.text.engine.TabAlignment;
+	
+	import flashx.textLayout.container.ContainerController;
+	import flashx.textLayout.edit.EditManager;
+	import flashx.textLayout.edit.ElementRange;
+	import flashx.textLayout.edit.SelectionState;
+	import flashx.textLayout.elements.ContainerFormattedElement;
+	import flashx.textLayout.elements.ParagraphElement;
+	import flashx.textLayout.elements.TextFlow;
+	import flashx.textLayout.compose.TextFlowLine;
+	import flashx.textLayout.events.SelectionEvent;
+	import flashx.textLayout.formats.ITextLayoutFormat;
+	import flashx.textLayout.formats.ITabStopFormat;
+	import flashx.textLayout.formats.TextLayoutFormat;
+	import flashx.textLayout.formats.TabStopFormat;
+	import flashx.textLayout.formats.BlockProgression;
+	import flashx.textLayout.tlf_internal;
+	import flashx.textLayout.ui.inspectors.TabPropertyEditor;
+	import flashx.textLayout.ui.inspectors.TextInspectorController;
+	
+	import mx.containers.Canvas;
+	import mx.core.ScrollPolicy;
+	import mx.core.UIComponent;
+	import mx.events.PropertyChangeEvent;
+	import mx.events.ResizeEvent;
+	use namespace tlf_internal;
+	
+	public class RulerBar extends Canvas
+	{
+		public static const RULER_HORIZONTAL:String = "horizontal";
+		public static const RULER_VERTICAL:String = "vertical";
+		
+		public function RulerBar()
+		{
+			super();
+			horizontalScrollPolicy = ScrollPolicy.OFF;
+			verticalScrollPolicy = ScrollPolicy.OFF;
+			mDefaultTabStop = new TabStopFormat(TabStopFormat.defaultFormat);
+			addEventListener(MouseEvent.MOUSE_DOWN, onRulerMouseDown);
+			selectMarker(null);
+			TextInspectorController.Instance().AddRuler(this);
+			curParagraphFormat = null;
+		}
+		
+		override public function initialize():void
+		{
+			super.initialize();
+			adjustForActive();
+		}
+		
+		public function creationComplete():void
+		{
+			if (mSyncToPanel)
+			{
+				mSyncToPanel.addEventListener(ResizeEvent.RESIZE, onSyncPanelResize);
+			}
+			SyncRulerToPanel();
+			mIndentMarker = addParagraphPropertyMarker(TextLayoutFormat.textIndentProperty.name);
+			mLeftMarginMarker = addParagraphPropertyMarker(TextLayoutFormat.paragraphStartIndentProperty.name);
+			mRightMarginMarker = addParagraphPropertyMarker(TextLayoutFormat.paragraphEndIndentProperty.name);
+		}
+		
+ 		public function set activeFlow(inFlow:TextFlow):void
+		{
+			if (inFlow && !inFlow.interactionManager is EditManager)
+				throw new Error("Can't set the active flow to a flow without an EditManager.");
+			if (mActiveFlow)
+			{
+				mActiveFlow.removeEventListener(SelectionEvent.SELECTION_CHANGE, onTextSelectionChanged);
+				mEditManager = null;
+			}
+			mActiveFlow = inFlow;
+			mLastSelActiveIdx = -1;
+			mLastSelAnchorIdx = -1;
+			mTabSet = null;
+			RemoveTabMarkers();
+			selectMarker(null);
+			
+			if (mActiveFlow)
+			{
+				mEditManager = mActiveFlow.interactionManager as EditManager;
+				mActiveFlow.addEventListener(SelectionEvent.SELECTION_CHANGE, onTextSelectionChanged);
+			}
+			else
+				onTextSelectionChanged(null);
+		}
+		
+		public function get activeFlow():TextFlow
+		{
+			return mActiveFlow;
+		}
+		
+		public function set active(inActive:Boolean):void
+		{
+			mActive = inActive;
+			selectMarker(null);
+			adjustForActive();
+		}
+		
+		public function get active():Boolean
+		{
+			return mActive;
+		}
+
+		private function set rightRuler(inActive:Boolean):void
+		{
+			mRightRuler = inActive;
+			adjustForActive();
+		}
+		
+		private function get rightRuler():Boolean
+		{
+			return mRightRuler;
+		}
+		
+		private function adjustForActive():void
+		{
+			if (parent)
+			{
+				if (mActive && mRightRuler)
+				{
+					parent.visible = true;
+					if (parent is Canvas)
+						(parent as Canvas).includeInLayout = true;
+				}
+				else
+				{
+					parent.visible = false;
+					if (parent is Canvas)
+						(parent as Canvas).includeInLayout = false;
+				}
+			}
+		}
+		
+		public function set orientation(inOrientation:String):void
+		{
+			if (inOrientation != mOrientation && (inOrientation == RULER_HORIZONTAL || inOrientation == RULER_VERTICAL))
+			{
+				mOrientation = inOrientation;
+			}
+		}
+		
+		public function set syncToPanel(inPanel:UIComponent):void
+		{
+			mSyncToPanel = inPanel;
+		}
+		
+		public function set tabPropertyEditor(inEditor:TabPropertyEditor):void
+		{
+			mPropertyEditor = inEditor;
+			mPropertyEditor.addEventListener(DynamicPropertyEditorBase.MODELCHANGED_EVENT, onFormatValueChanged, false, 0, true);
+			mPropertyEditor.addEventListener(DynamicPropertyEditorBase.MODELEDITED_EVENT, onFormatValueChanged, false, 0, true);
+			selectMarker(mSelectedMarker);
+		}
+		
+ 		private function onSyncPanelResize(evt:ResizeEvent):void
+ 		{
+ 			RedrawRuler();
+ 		}
+ 		
+ 		public function RedrawRuler():void
+ 		{
+ 			SyncRulerToPanel();
+ 			if (curParagraphFormat != null) {
+ 				ShowTabs(curParagraphFormat);
+ 			} 			
+ 		}
+
+  		private function SyncRulerToPanel():void
+ 		{
+ 			if (mActiveFlow && mActiveFlow.flowComposer && rightRuler)
+ 			{
+ 				var selStart:int = Math.min(mActiveFlow.interactionManager.activePosition, mActiveFlow.interactionManager.anchorPosition);
+ 				var line:TextFlowLine = selStart != -1 ? mActiveFlow.flowComposer.findLineAtPosition(selStart) : null;
+ 				if (line)
+ 				{
+ 					var controller:ContainerController;
+ 					var containerDO:DisplayObject;
+ 					if (line.controller)
+ 					{
+ 						controller = line.controller;
+ 						containerDO = controller.container as DisplayObject;
+ 					}
+ 					else
+ 					{
+ 						// get the last container
+ 						controller = mActiveFlow.flowComposer.getControllerAt(mActiveFlow.flowComposer.numControllers-1);
+ 						containerDO = controller.container as DisplayObject;
+ 					}
+ 					var localOrigin:Point = parent.globalToLocal(containerDO.parent.localToGlobal(new Point(containerDO.x, containerDO.y)));
+	 				var columnBounds:Rectangle;
+	 				var columnIndex:int = line.columnIndex;
+	 				if (columnIndex == -1)
+	 					columnBounds = controller.columnState.getColumnAt(controller.columnState.columnCount - 1);
+	 				else
+	 				{
+	 					// columnIndex is an index into all the columns in the flow, so to get the actual
+	 					// column bounds 
+	 					var idx:int = 0;
+	 					var ch:ContainerController = mActiveFlow.flowComposer.getControllerAt(idx);
+	 					while (ch && ch != controller)
+	 					{
+	 						columnIndex -= ch.columnState.columnCount;
+	 						idx++;
+ 							ch = idx == mActiveFlow.flowComposer.numControllers ? null : mActiveFlow.flowComposer.getControllerAt(idx);
+	 					}
+	 					// Pin the column number to the actual range of column indices. I have found this
+	 					// is needed when the insertion point is inside a table (because the line's container
+	 					// is not in the flow's list of containers) or when the insertion point is in regular
+	 					// text after a table (the column number doesn't make sense, and I think it's a bug, which
+	 					// I have written to Robin about.
+	 					columnIndex = Math.max(0, Math.min(line.columnIndex, controller.columnState.columnCount - 1));
+	 					columnBounds = controller.columnState.getColumnAt(columnIndex);
+	 				}
+	 				
+		 			if (columnBounds)
+		 			{
+			 			if (mOrientation == RULER_HORIZONTAL)
+			 			{
+			 				x = localOrigin.x + columnBounds.x;
+			 				y = 0;
+			 				height = parent.height;
+				 			width = columnBounds.width;
+			 			}
+			 			else
+			 			{
+			 				x = parent.width;
+			 				y = localOrigin.y + columnBounds.y;
+			 				rotation = 90;
+			   				height = parent.width;
+							width = columnBounds.height;
+						}
+		 			}
+	 			}
+ 			}
+ 		}
+
+		private function onTextSelectionChanged(e:SelectionEvent):void
+		{
+			curParagraphFormat = null;
+			if (mEditManager && (mEditManager.activePosition != mLastSelActiveIdx || mEditManager.anchorPosition != mLastSelAnchorIdx))
+			{
+				mLastSelActiveIdx = mActiveFlow.interactionManager.activePosition;
+				mLastSelAnchorIdx = mActiveFlow.interactionManager.anchorPosition;
+				selectMarker(null);
+			}
+			if (e)
+			{
+				var selState:SelectionState = e.selectionState;
+				var selectedElementRange:ElementRange =  selState ? ElementRange.createElementRange(selState.textFlow, selState.absoluteStart, selState.absoluteEnd) : null;
+				if (selectedElementRange)
+				{
+		 			var rootElement:ContainerFormattedElement = selectedElementRange.firstLeaf.getAncestorWithContainer();
+		 			if ((rootElement.computedFormat.blockProgression == BlockProgression.RL) == (mOrientation == RULER_VERTICAL))
+		 			{
+		 				// should be active
+		 				if (rightRuler != true)
+		 				{
+		 					mTabSet = null;
+		 				}
+		 				if (!rightRuler)
+		 					rightRuler = true;
+		 			}
+		 			else
+		 			{
+		 				// should be inactive
+		 				if (rightRuler != false)
+		 				{
+		 					mTabSet = null;
+		 				}
+		 				if (rightRuler)
+		 					rightRuler = false;
+		 			}
+					
+	  				curParagraphFormat = new TextLayoutFormat(selectedElementRange.firstParagraph.computedFormat);
+	  				setRightToLeft(curParagraphFormat.direction == flashx.textLayout.formats.Direction.RTL);					
+					ShowTabs(curParagraphFormat);
+				}
+				else
+					ShowTabs(null);
+			}
+			else
+				ShowTabs(null);
+		}
+		
+		
+		private function RemoveTabMarkers():void
+		{
+			var markers:Array = getChildren();
+			for each (var marker:UIComponent in markers)
+				if (marker is TabMarker)
+					this.removeChild(marker);
+		}
+		
+		
+		private function ShowTabs(inFormat:ITextLayoutFormat):void
+		{
+			SyncRulerToPanel();
+			var tabs:Array = inFormat ? ((inFormat.tabStops && (inFormat.tabStops.length > 0)) ? inFormat.tabStops as Array : null) : null;
+			if (isNewTabSet(tabs))
+			{
+				mTabSet = tabs;
+				if (mUpdateFromSelection)
+				{
+					RemoveTabMarkers();
+					var oldSel:RulerMarker = mSelectedMarker;
+					selectMarker(null);
+					if (mTabSet)
+						for each(var tab:TabStopFormat in mTabSet)
+						{
+							var tabMarker:TabMarker = addTabMarker(tab);
+							if (oldSel && oldSel.pos == tabMarker.pos)
+								selectMarker(tabMarker);
+						}
+				}
+			}
+			if (inFormat)
+			{
+				if(mIndentMarker)
+				{
+					mIndentMarker.rightToLeftPar = mRightToLeft;
+					mIndentMarker.pos = Number(inFormat.textIndent);
+					mIndentMarker.relativeToPosition = inFormat.paragraphStartIndent;
+				}
+				
+				if(mLeftMarginMarker)
+				{
+					mLeftMarginMarker.rightToLeftPar = mRightToLeft;
+					mLeftMarginMarker.pos = rightToLeft ? Number(inFormat.paragraphEndIndent): Number(inFormat.paragraphStartIndent);
+				}
+				
+				if(mRightMarginMarker)
+				{
+					mRightMarginMarker.rightToLeftPar = mRightToLeft;
+					mRightMarginMarker.pos = rightToLeft ? Number(inFormat.paragraphStartIndent): Number(inFormat.paragraphEndIndent);
+				}
+			}
+		}
+		
+		
+		private function addTabMarker(tabAttrs:ITabStopFormat):TabMarker
+		{
+			var tabMarker:TabMarker = new TabMarker(this, tabAttrs);
+			tabMarker.addEventListener(MouseEvent.MOUSE_DOWN, onMarkerMouseDown);
+			addChild(tabMarker);
+			return tabMarker;
+		}
+		
+		
+		private function addParagraphPropertyMarker(inProperty:String):ParagraphPropertyMarker
+		{
+			var propMarker:ParagraphPropertyMarker = new ParagraphPropertyMarker(this, inProperty);
+			propMarker.addEventListener(MouseEvent.MOUSE_DOWN, onMarkerMouseDown);
+			addChild(propMarker);
+			return propMarker;
+		}
+		
+		
+		private function isNewTabSet(inTabs:Array):Boolean
+		{
+			if (inTabs == mTabSet)
+				return false;
+			if ((inTabs == null) != (mTabSet == null))
+				return true;
+			if (inTabs)
+			{
+				if (inTabs.length == mTabSet.length)
+				{
+					var n:int = inTabs.length;
+					for (var i:int = 0; i < n; ++i)
+					{
+						if (inTabs[i] != mTabSet[i])
+							return true;
+					}
+					return false;
+				}
+				else
+					return true;
+			}
+			return false;
+		}
+
+
+		override protected function updateDisplayList(w:Number, h:Number):void
+		{
+		    super.updateDisplayList(w, h);
+		    
+			graphics.clear();
+			var m:Matrix = new Matrix();
+			m.createGradientBox(height, height, Math.PI / 2);
+			graphics.beginGradientFill(GradientType.LINEAR, [0xffffff, 0xe0e0e0], [1, 1], [0, 255], m);
+			graphics.drawRect(0, 0, w, h);
+			graphics.endFill();
+			
+			graphics.lineStyle(1, 0x404040, 1.0, true);
+			for (var x:int = 0; x < w; x += 10)
+			{
+				var rulerX:Number = rightToLeft ? w - x - 1 : x;
+				if (x % 100 == 0)
+					graphics.moveTo(rulerX, 12);
+				else if (x % 50 == 0)
+					graphics.moveTo(rulerX, 9);
+				else
+					graphics.moveTo(rulerX, 5);
+				graphics.lineTo(rulerX, 0);
+			}
+		}
+		
+		private function onMarkerMouseDown(e:MouseEvent):void
+		{
+			if (mEditManager)
+			{
+				var cookie:Object;
+				if (e.target is TabMarker)
+				{
+					var tabMarker:TabMarker = e.target as TabMarker;
+					selectMarker(tabMarker);
+					e.stopPropagation();
+					cookie = new Object();
+					cookie["marker"] = tabMarker;
+					cookie["offset"] = e.localX;
+					cookie["onRuler"] = true;
+					mUpdateFromSelection = false;
+					new RulerDragTracker(this.parentApplication as UIComponent, this, cookie).BeginTracking(e, false);
+				}
+				else if (e.target is ParagraphPropertyMarker)
+				{
+					var propMarker:ParagraphPropertyMarker = e.target as ParagraphPropertyMarker;
+					selectMarker(null);
+					e.stopPropagation();
+					cookie = new Object();
+					cookie["marker"] = propMarker;
+					cookie["offset"] = e.localX;
+					new RulerDragTracker(this.parentApplication as UIComponent, this, cookie).BeginTracking(e, false);
+				}
+			}
+		}
+		
+		private function onRulerMouseDown(e:MouseEvent):void
+		{
+			if (e.target is RulerBar && mEditManager)
+			{
+				var tabMarker:TabMarker = addTabMarker(mDefaultTabStop);
+				tabMarker.markerLeft = e.localX + tabMarker.hOffset;
+				selectMarker(tabMarker);
+				mUpdateFromSelection = false;
+				setFormatFromRuler();
+				e.stopPropagation();
+				var cookie:Object = new Object();
+				cookie["marker"] = tabMarker;
+				cookie["offset"] = -tabMarker.hOffset;
+				cookie["onRuler"] = true;
+				new RulerDragTracker(this.parentApplication as UIComponent, this, cookie, 0).BeginTracking(e, false);
+			}
+		}
+		
+		public function TrackDrag(inCurPos:Point, inCookie:Object, inCommit:Boolean):void
+		{
+			if (inCookie)
+			{
+				if (inCookie["marker"] is TabMarker)
+				{
+					var tabMarker:TabMarker = inCookie["marker"] as TabMarker;
+					var wasOnRuler:Boolean = inCookie["onRuler"];
+					if (inCookie["onRuler"] && inCurPos.y > height + 16)
+					{
+						inCookie["onRuler"] = false;
+						removeChild(tabMarker);
+						selectMarker(null);
+					}
+					else if (!inCookie["onRuler"] && inCurPos.y <= height + 16)
+					{
+						inCookie["onRuler"] = true;
+						addChild(tabMarker);
+						selectMarker(tabMarker);
+					}
+					
+					tabMarker.markerLeft = inCurPos.x - inCookie["offset"];
+					if (wasOnRuler || inCookie["onRuler"])
+						setFormatFromRuler();
+				}
+				else if (inCookie["marker"] is ParagraphPropertyMarker)
+				{
+					var propMarker:ParagraphPropertyMarker = inCookie["marker"] as ParagraphPropertyMarker;
+					propMarker.markerLeft = inCurPos.x - inCookie["offset"];
+					var pa:TextLayoutFormat = new TextLayoutFormat();
+					pa[propMarker.property] = propMarker.pos;
+					mEditManager.applyParagraphFormat(pa);
+				}
+			}
+			if (inCommit)
+				mUpdateFromSelection = true;
+		}
+		
+		public function DragCancelled():void
+		{
+			mUpdateFromSelection = true;
+		}
+
+		private function selectMarker(inMarker:RulerMarker):void
+		{
+			if (mSelectedMarker)
+				mSelectedMarker.setStyle("selected", false);
+			mSelectedMarker = inMarker;
+			if (mSelectedMarker)
+				mSelectedMarker.setStyle("selected", true);
+			updatePropertyEditor();
+		}
+		
+		private function updatePropertyEditor():void
+		{
+			if (mRightRuler && mPropertyEditor && mTabPanelActive)
+			{
+				mPropertyEditor.reset();
+				mPropertyEditor.properties["rulervisible"] = TextInspectorController.Instance().rulerVisible;
+				if (TextInspectorController.Instance().rulerVisible)
+				{
+					var tab:ITabStopFormat = mSelectedMarker as ITabStopFormat;
+					if (!tab)
+						tab = mDefaultTabStop as ITabStopFormat;
+					if (tab)
+					{
+						mPropertyEditor.properties["alignment"] = tab.alignment;
+						if (tab != mDefaultTabStop)
+							mPropertyEditor.properties["position"] = tab.position;
+						if (tab.alignment == flash.text.engine.TabAlignment.DECIMAL)
+							mPropertyEditor.properties["decimalAlignmentToken"] = tab.decimalAlignmentToken;
+					}
+				}
+				mPropertyEditor.rebuildUI();
+			}
+		}
+		
+		private function onFormatValueChanged(e:PropertyChangeEvent):void
+		{
+			if (mRightRuler)
+			{
+				var property:String = e.property as String;
+				if (property == "rulervisible")
+					TextInspectorController.Instance().rulerVisible = (e.newValue == "true" ? true : false);
+				else
+				{
+					if (e.type == DynamicPropertyEditorBase.MODELEDITED_EVENT)
+						mUpdateFromSelection = false;
+					var tab:Object = mSelectedMarker;
+					if (!tab)
+						tab = mDefaultTabStop;
+					var newValue:Object = e.newValue;
+					if (property == "position")
+						newValue = Number(newValue);
+					tab[property] = newValue;
+					if (property == "alignment" && newValue == flash.text.engine.TabAlignment.DECIMAL && tab["decimalAlignmentToken"] == null)
+						tab["decimalAlignmentToken"] = "";
+					if (mSelectedMarker)
+						setFormatFromRuler();
+					if (e.type == DynamicPropertyEditorBase.MODELCHANGED_EVENT)
+						mUpdateFromSelection = true;
+					updatePropertyEditor();
+				}
+			}
+		}
+
+		private function setFormatFromRuler():void
+		{
+			var newTabs:Array = [];
+			if (mSelectedMarker && mSelectedMarker.parent)
+				newTabs.push(new TabStopFormat(mSelectedMarker as ITabStopFormat));
+			var markers:Array = getChildren();
+			for each (var marker:UIComponent in markers)
+				if (marker is TabMarker)
+				{
+					var tab:TabMarker = marker as TabMarker;
+					if (isUniquePosition(newTabs, tab.pos))
+						newTabs.push(new TabStopFormat(tab));
+					
+				}
+			newTabs.sortOn("position", Array.NUMERIC);
+			var pa:TextLayoutFormat = new TextLayoutFormat();
+			pa.tabStops = newTabs;
+			mEditManager.applyParagraphFormat(pa);
+			updatePropertyEditor();
+		}
+		
+		private static function isUniquePosition(inTabFormat:Array, inNewPosition:Number):Boolean
+		{
+			for each (var tab:TabStopFormat in inTabFormat)
+				if (tab.position == inNewPosition)
+					return false;
+			return true;
+		}
+
+		public function set tabPanelActive(inActive:Boolean):void
+		{
+			if (mTabPanelActive != inActive)
+			{
+				mTabPanelActive = inActive;
+				if (mTabPanelActive)
+					updatePropertyEditor();
+			}
+		}
+		
+		public function get tabPanelActive():Boolean
+		{
+			return mTabPanelActive;
+		}
+		
+		public function get rightToLeft():Boolean
+		{
+			return mRightToLeft;
+		}
+		
+		private function setRightToLeft(inRTL:Boolean):void
+		{
+			if (inRTL != mRightToLeft)
+			{
+				mTabSet = null;
+				mRightToLeft = inRTL;
+				invalidateDisplayList();
+			}
+		}
+		
+		private var mActive:Boolean = true;
+		private var mActiveFlow:TextFlow = null;
+		private var mEditManager:EditManager = null;
+		private var mTabSet:Array = null;
+		private var mSelectedMarker:RulerMarker = null;
+		private var mUpdateFromSelection:Boolean = true;
+		private var mDefaultTabStop:TabStopFormat;
+		private var mPropertyEditor:TabPropertyEditor = null;
+		private var mOrientation:String = RULER_HORIZONTAL;
+		private var mSyncToPanel:UIComponent = null;
+		private var mRightRuler:Boolean = true;
+		private var mLastSelAnchorIdx:int = -1;
+		private var mLastSelActiveIdx:int = -1;
+		private var mIndentMarker:ParagraphPropertyMarker = null;
+		private var mLeftMarginMarker:ParagraphPropertyMarker = null;
+		private var mRightMarginMarker:ParagraphPropertyMarker = null;
+		private var mTabPanelActive:Boolean = false;
+		private var mRightToLeft:Boolean = false;
+		private var curParagraphFormat:TextLayoutFormat = null;
+		
+	}
+}
\ No newline at end of file
diff --git a/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/rulers/RulerDragTracker.as b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/rulers/RulerDragTracker.as
new file mode 100644
index 0000000..042a92c
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/rulers/RulerDragTracker.as
@@ -0,0 +1,88 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 flashx.textLayout.ui.rulers
+{
+	import flash.events.MouseEvent;
+	import flash.geom.Point;
+	
+	import mx.core.UIComponent;
+	
+	import bxf.ui.toolkit.Tracker;
+
+	public class RulerDragTracker extends Tracker
+	{
+		public function RulerDragTracker(inPeerToTrackTo:UIComponent, inController:RulerBar, inCookie:Object, inDragThreshold:Number = 2)
+		{
+			super(inPeerToTrackTo, 0, 0);
+			mController = inController;
+			mDragCookie = inCookie;
+			mDragThreshold = inDragThreshold;
+		}
+		
+		/**	Override to get cursor adjust hook and mouse down. 
+		 * @param inMouseEvent mouse info.
+		 * @param inCursorAdjust true if this is a mouse up track.*/
+		override public function BeginTracking(inMouseEvent:MouseEvent, inCursorAdjust:Boolean):void
+		{
+			super.BeginTracking(inMouseEvent, inCursorAdjust);
+		}
+		
+		/**	Override to get mouse move. 
+		 * @param inMouseEvent mouse info.*/
+		override public function ContinueTracking(inMouseEvent:MouseEvent):void
+		{
+			super.ContinueTracking(inMouseEvent);
+			if (!mDragThresholdReached)
+			{
+				if (Point.distance(mAnchorPt, mTrackPt) >= mDragThreshold)
+					mDragThresholdReached = true;
+			}
+			if (mDragThresholdReached)
+				mController.TrackDrag(mTrackPt, mDragCookie, false);
+			inMouseEvent.stopPropagation();
+		}
+		
+		/**	Override to get mouse up. 
+		 * @param inMouseEvent mouse info.*/
+		override public function EndTracking(inMouseEvent:MouseEvent):void
+		{
+			super.EndTracking(inMouseEvent);
+			if (mDragThresholdReached)
+				mController.TrackDrag(mTrackPt, mDragCookie, true);
+			else
+				mController.DragCancelled();
+			inMouseEvent.stopPropagation();
+		}
+		
+		override protected function TrackPoint(inMouseEvent:MouseEvent, inAlsoSetAnchor:Boolean): void
+		{
+			mTrackPt.x = inMouseEvent.stageX;
+			mTrackPt.y = inMouseEvent.stageY;
+			mTrackPt = mController.globalToLocal(mTrackPt);
+			if (inAlsoSetAnchor)
+				mAnchorPt = mTrackPt.clone();
+		}
+
+		private var mController:RulerBar = null;
+		private var mDragCookie:Object = null;
+		private var mDragThreshold:Number;
+		private var mDragThresholdReached:Boolean = false;
+	}
+}
\ No newline at end of file
diff --git a/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/rulers/RulerMarker.as b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/rulers/RulerMarker.as
new file mode 100644
index 0000000..7cc2848
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/rulers/RulerMarker.as
@@ -0,0 +1,124 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 flashx.textLayout.ui.rulers
+{
+	import mx.containers.Canvas;
+
+	public class RulerMarker extends Canvas
+	{
+		public function RulerMarker(inRuler:RulerBar, inWidth:Number, inHeight:Number, inHOffset:Number, inVOffset:Number, inPos:Number)
+		{
+			super();
+			width = inWidth;
+			height = inHeight;
+			mHOffset = inHOffset;
+			mVOffset = inVOffset;
+			mPos = inPos;
+			mRuler = inRuler;
+		}
+		
+		override public function initialize():void
+		{
+			super.initialize();
+			positionMarker();
+		}
+		
+		protected function positionMarker():void
+		{
+			if (parent)
+			{
+				if (alignToRight)
+				{
+					x = parent.width - originPosition - pos + hOffset;
+					y = parent.height - height + vOffset;
+				}
+				else
+				{
+					x = originPosition + pos + hOffset;
+					y = parent.height - height + vOffset;
+				}
+			}
+		}
+		
+		protected function get alignToRight():Boolean
+		{
+			return ruler.rightToLeft;
+		}
+		
+		protected function get originPosition():Number
+		{
+			return 0;
+		}
+
+		public function set pos(inPos:Number):void
+		{
+			mPos = inPos;
+			positionMarker();
+		}
+		
+		public function get pos():Number
+		{
+			return mPos;
+		}
+		
+		public function set hOffset(inOffset:Number):void
+		{
+			mHOffset = inOffset;
+			positionMarker();
+		}
+		
+		public function get hOffset():Number
+		{
+			return mHOffset;
+		}
+		
+		public function set vOffset(inOffset:Number):void
+		{
+			mVOffset = inOffset;
+			positionMarker();
+		}
+		
+		public function get vOffset():Number
+		{
+			return mVOffset;
+		}
+		
+		public function get ruler():RulerBar
+		{
+			return mRuler;
+		}
+		
+		public function set markerLeft(inNewLeft:Number):void
+		{
+			if (parent)
+			{
+				if (alignToRight)
+					pos = parent.width - (inNewLeft + hOffset > parent.width ? parent.width : inNewLeft + hOffset)  - originPosition;
+				else
+					pos = (inNewLeft < 0 ? 0 : inNewLeft) - originPosition - hOffset;
+			}
+		}
+
+		private var mPos:Number;
+		private var mHOffset:Number;
+		private var mVOffset:Number;
+		private var mRuler:RulerBar = null;
+	}
+}
\ No newline at end of file
diff --git a/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/rulers/TabMarker.as b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/rulers/TabMarker.as
new file mode 100644
index 0000000..9b6a31e
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/rulers/TabMarker.as
@@ -0,0 +1,86 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 flashx.textLayout.ui.rulers
+{
+	import mx.messaging.management.Attribute;
+	
+	import flashx.textLayout.formats.ITabStopFormat;
+	
+	public class TabMarker extends RulerMarker implements ITabStopFormat
+	{
+		public function TabMarker(inRuler:RulerBar, tabAttrs:ITabStopFormat)
+		{
+			super(inRuler, 9, 10, -4, 0, Number(tabAttrs.position));
+			mTabKind = tabAttrs.alignment;
+			mAlignmentToken = tabAttrs.decimalAlignmentToken;
+			setStyle("tabkind", mTabKind);
+		}
+		
+		public function get alignment():*
+		{
+			return mTabKind;
+		}
+		
+		public function set alignment(inAlignment:String):void
+		{
+			mTabKind = inAlignment;
+			setStyle("tabkind", mTabKind);
+		}
+		
+		public function get decimalAlignmentToken():*
+		{
+			return mAlignmentToken;
+		}
+		
+		public function set decimalAlignmenyToken(inToken:String):void
+		{
+			mAlignmentToken = inToken;
+		}
+		
+		public function set decimalAlignmentToken(inToken:String):void
+		{
+			mAlignmentToken = inToken;
+		}
+		
+		public function get position():*
+		{
+			return pos;
+		}
+		
+		public function set position(inPosition:Object):void
+		{
+			pos = inPosition as Number;
+		}
+		
+		
+		public function isDifferentPosition(element:*, index:int, arr:Array):Boolean
+		{
+			var other:TabMarker = element as TabMarker;
+			if (other)
+				return other.position != position;
+			else
+				return true;
+		}
+		
+
+		private var mTabKind:String;
+		private var mAlignmentToken:String = null;
+	}
+}
\ No newline at end of file
diff --git a/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/rulers/TabMarkerSkin.as b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/rulers/TabMarkerSkin.as
new file mode 100644
index 0000000..a6c4aaf
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/rulers/TabMarkerSkin.as
@@ -0,0 +1,94 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 flashx.textLayout.ui.rulers
+{
+	import flash.text.engine.TabAlignment;
+	
+	import mx.skins.RectangularBorder;
+
+	public class TabMarkerSkin extends RectangularBorder
+	{
+		public function TabMarkerSkin()
+		{
+			super();
+		}
+		
+		override protected function updateDisplayList(w:Number, h:Number):void
+		{
+		    super.updateDisplayList(w, h);
+		    
+		    var tabKind:String = getStyle("tabkind");
+		    
+			graphics.clear();
+
+		    graphics.lineStyle(3, 0xffffff);
+		    drawOrnament(tabKind, w, h);
+		    graphics.lineStyle(1, 0x000000);
+		    drawOrnament(tabKind, w, h);
+		    
+		    if (tabKind == flash.text.engine.TabAlignment.DECIMAL)
+		    {
+				graphics.beginFill(0x000000);
+				graphics.drawCircle(w / 2 + 3, (h - w / 2) / 2, .75);
+				graphics.endFill();
+		    }
+		    
+			graphics.beginFill(0x000000);
+			graphics.moveTo(0, h - w / 2);
+			graphics.lineTo(w / 2, h);
+			graphics.lineTo(w, h - w / 2);
+			graphics.lineTo(0, h - w / 2);
+			graphics.endFill();
+			
+		    var selected:Boolean = getStyle("selected");
+	  		graphics.lineStyle();
+	    	graphics.beginFill(0x0000ff, selected ? .3 : 0);
+	    	graphics.drawRect(0, 0, w, h);
+	    	graphics.endFill();
+		}
+
+		private function drawOrnament(inKind:String, w:Number, h:Number):void
+		{
+			switch (inKind)
+			{
+			case flash.text.engine.TabAlignment.START:
+				graphics.moveTo(w / 2, h - w / 2);
+				graphics.lineTo(w / 2, 1);
+				graphics.lineTo(w, 1);
+				break;
+			case flash.text.engine.TabAlignment.CENTER:
+				graphics.moveTo(w / 2, h - w / 2);
+				graphics.lineTo(w / 2, 0);
+				break;
+			case flash.text.engine.TabAlignment.END:
+				graphics.moveTo(w / 2, h - w / 2);
+				graphics.lineTo(w / 2, 1);
+				graphics.lineTo(0, 1);
+				break;
+			case flash.text.engine.TabAlignment.DECIMAL:
+				graphics.moveTo(w / 2, h - w / 2);
+				graphics.lineTo(w / 2, 0);
+				break;
+			}
+		}
+		
+
+	}
+}
\ No newline at end of file
diff --git a/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/styles/PopupMenuSkin.as b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/styles/PopupMenuSkin.as
new file mode 100644
index 0000000..78b3ccb
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/styles/PopupMenuSkin.as
@@ -0,0 +1,70 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 flashx.textLayout.ui.styles
+{
+	import flash.filters.DropShadowFilter;
+	
+	import mx.skins.RectangularBorder;
+
+	public class PopupMenuSkin extends RectangularBorder
+	{
+		public function PopupMenuSkin()
+		{
+			super();
+			filters = [new DropShadowFilter(2, 90, 0x000000, .45, 2, 2)];
+		}
+
+		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void 
+		{
+			super.updateDisplayList(unscaledWidth, unscaledHeight);
+			
+	 		if (getStyle("cornerRadius") != undefined)
+				mCornerRadius = getStyle("cornerRadius");
+			if (getStyle("backColor") != undefined)
+				mBackColor = getStyle("backColor");
+			if (getStyle("backAlpha") != undefined)
+				mBackAlpha = getStyle("backAlpha");
+			if (getStyle("lineColor") != undefined)
+				mLineColor = getStyle("lineColor");
+			if (getStyle("lineAlpha") != undefined)
+				mLineAlpha = getStyle("lineAlpha");
+			if (getStyle("lineWidth") != undefined)
+				mLineWidth = getStyle("lineWidth");
+	
+			graphics.clear();
+	 		graphics.lineStyle(mLineWidth, mLineColor, mLineAlpha);
+			graphics.beginFill(mBackColor, mBackAlpha);
+			graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
+			graphics.endFill();
+				
+		}
+	
+	 	private var mCornerRadius:Number = 0;
+	 	private var mLineWidth:Number = 1;
+	 	private var mBackColor:uint = 0x1a1a1a;
+	 	private var mBackAlpha:Number = 0.9;
+	 	private var mLineColor:uint = 0xffffff;
+	 	private var mLineAlpha:Number = 0.15;
+
+
+	}
+	
+	
+}
diff --git a/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/styles/ScrollbarDownArrowUpSkin.as b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/styles/ScrollbarDownArrowUpSkin.as
new file mode 100644
index 0000000..f2c4e5e
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/styles/ScrollbarDownArrowUpSkin.as
@@ -0,0 +1,45 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 flashx.textLayout.ui.styles
+{
+	import mx.skins.RectangularBorder;
+
+	public class ScrollbarDownArrowUpSkin extends RectangularBorder
+	{
+		public function ScrollbarDownArrowUpSkin()
+		{
+			super();
+		}
+		
+		override public function get measuredWidth():Number
+		{
+			return 13;
+		}
+		
+		override public function get measuredHeight():Number
+		{
+			return 14;
+		}
+		
+		override protected function updateDisplayList(w:Number, h:Number):void
+		{
+			super.updateDisplayList(w, h);
+		}
+	}
+}
\ No newline at end of file
diff --git a/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/styles/ScrollbarThumbOverSkin.as b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/styles/ScrollbarThumbOverSkin.as
new file mode 100644
index 0000000..48aa83a
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/styles/ScrollbarThumbOverSkin.as
@@ -0,0 +1,89 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 flashx.textLayout.ui.styles
+{
+	import mx.skins.RectangularBorder;
+	import mx.utils.GraphicsUtil;
+	import flash.display.LineScaleMode;
+	import flash.display.CapsStyle;
+	
+	public class ScrollbarThumbOverSkin extends RectangularBorder
+	{
+		public function ScrollbarThumbOverSkin()
+		{
+			super();
+		}
+		
+		override public function get measuredWidth():Number
+		{
+			return 11;
+		}
+		
+		override public function get measuredHeight():Number
+		{
+			return 10;
+		}
+		
+		override protected function updateDisplayList(w:Number, h:Number):void
+		{
+			super.updateDisplayList(w, h);
+			
+			var thumbFill:uint = 0x222222;
+			var thumbFillAlpha:Number = 1.0;
+			var thumbStroke:uint = 0x2A2A2A;
+			var thumbStrokeAlpha:Number = 1.0;
+
+			var trackStroke:uint = 0x2A2A2A;
+			var trackStrokeAlpha:Number = 1.0;
+						
+ 			if (getStyle("thumbOverFill") != undefined)
+				thumbFill = getStyle("thumbOverFill");
+ 			if (getStyle("thumbOverFillAlpha") != undefined)
+				thumbFillAlpha = getStyle("thumbOverFillAlpha");
+ 			if (getStyle("thumbOverStroke") != undefined)
+				thumbStroke = getStyle("thumbOverStroke");
+ 			if (getStyle("thumbOverStrokeAlpha") != undefined)
+				thumbStrokeAlpha = getStyle("thumbOverStrokeAlpha");
+ 			if (getStyle("trackStroke") != undefined)
+				trackStroke = getStyle("trackStroke");
+ 			if (getStyle("trackStrokeAlpha") != undefined)
+				trackStrokeAlpha = getStyle("trackStrokeAlpha");
+
+			graphics.clear();
+			// draw the top line of the thumb to match the track
+			graphics.lineStyle(1, trackStroke, trackStrokeAlpha);
+			graphics.moveTo(0, 0);
+			graphics.lineTo(w-1, 0);
+
+			// fill in the thumb
+			graphics.beginFill(thumbFill, thumbFillAlpha);
+			graphics.drawRect(0, 0, w-1, h-2);
+			graphics.endFill();
+			
+			// draw the border of the thumb
+			graphics.lineStyle(1, thumbStroke, thumbStrokeAlpha);
+			graphics.drawRect(0, 1, w-1, h-3);
+			
+			// draw the bottom line of the thumb to match the track
+			graphics.lineStyle(1, trackStroke, trackStrokeAlpha);
+			graphics.moveTo(0, h-1);
+			graphics.lineTo(w, h-1);
+			
+		}
+	}}
\ No newline at end of file
diff --git a/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/styles/ScrollbarThumbUpSkin.as b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/styles/ScrollbarThumbUpSkin.as
new file mode 100644
index 0000000..450fd3a
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/styles/ScrollbarThumbUpSkin.as
@@ -0,0 +1,89 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 flashx.textLayout.ui.styles
+{
+	import mx.skins.RectangularBorder;
+	import mx.utils.GraphicsUtil;
+	import flash.display.LineScaleMode;
+	import flash.display.CapsStyle;
+	
+	public class ScrollbarThumbUpSkin extends RectangularBorder
+	{
+		public function ScrollbarThumbUpSkin()
+		{
+			super();
+		}
+		
+		override public function get measuredWidth():Number
+		{
+			return 11;
+		}
+		
+		override public function get measuredHeight():Number
+		{
+			return 10;
+		}
+		
+		override protected function updateDisplayList(w:Number, h:Number):void
+		{
+			super.updateDisplayList(w, h);
+			
+			var thumbFill:uint = 0x222222;
+			var thumbFillAlpha:Number = 1.0;
+			var thumbStroke:uint = 0x2A2A2A;
+			var thumbStrokeAlpha:Number = 1.0;
+
+			var trackStroke:uint = 0x2A2A2A;
+			var trackStrokeAlpha:Number = 1.0;
+						
+ 			if (getStyle("thumbFill") != undefined)
+				thumbFill = getStyle("thumbFill");
+ 			if (getStyle("thumbFillAlpha") != undefined)
+				thumbFillAlpha = getStyle("thumbFillAlpha");
+ 			if (getStyle("thumbStroke") != undefined)
+				thumbStroke = getStyle("thumbStroke");
+ 			if (getStyle("thumbStrokeAlpha") != undefined)
+				thumbStrokeAlpha = getStyle("thumbStrokeAlpha");
+ 			if (getStyle("trackStroke") != undefined)
+				trackStroke = getStyle("trackStroke");
+ 			if (getStyle("trackStrokeAlpha") != undefined)
+				trackStrokeAlpha = getStyle("trackStrokeAlpha");
+
+			graphics.clear();
+			// draw the top line of the thumb to match the track
+			graphics.lineStyle(1, trackStroke, trackStrokeAlpha);
+			graphics.moveTo(0, 0);
+			graphics.lineTo(w-1, 0);
+
+			// fill in the thumb
+			graphics.beginFill(thumbFill, thumbFillAlpha);
+			graphics.drawRect(0, 0, w-1, h-2);
+			graphics.endFill();
+			
+			// draw the border of the thumb
+			graphics.lineStyle(1, thumbStroke, thumbStrokeAlpha);
+			graphics.drawRect(0, 1, w-1, h-3);
+			
+			// draw the bottom line of the thumb to match the track
+			graphics.lineStyle(1, trackStroke, trackStrokeAlpha);
+			graphics.moveTo(0, h-1);
+			graphics.lineTo(w, h-1);
+			
+		}
+	}}
\ No newline at end of file
diff --git a/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/styles/ScrollbarTrackSkin.as b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/styles/ScrollbarTrackSkin.as
new file mode 100644
index 0000000..d822b91
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/styles/ScrollbarTrackSkin.as
@@ -0,0 +1,68 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 flashx.textLayout.ui.styles
+{
+	import flash.display.CapsStyle;
+	import flash.display.LineScaleMode;
+	
+	import mx.skins.RectangularBorder;
+
+	public class ScrollbarTrackSkin extends RectangularBorder
+	{
+		public function ScrollbarTrackSkin()
+		{
+			super();
+		}
+		
+		override public function get measuredWidth():Number
+		{
+			return 13;
+		}
+		
+		override public function get measuredHeight():Number
+		{
+			return 10;
+		}
+		
+		override protected function updateDisplayList(w:Number, h:Number):void
+		{
+			super.updateDisplayList(w, h);
+			
+			var trackFill:uint = 0x000000;
+			var trackFillAlpha:Number = 1.0;
+			var trackStroke:uint = 0x2A2A2A;
+			var trackStrokeAlpha:Number = 1.0;
+			
+ 			if (getStyle("trackFill") != undefined)
+				trackFill = getStyle("trackFill");
+ 			if (getStyle("trackFillAlpha") != undefined)
+				trackFillAlpha = getStyle("trackFillAlpha");
+ 			if (getStyle("trackStroke") != undefined)
+				trackStroke = getStyle("trackStroke");
+ 			if (getStyle("trackStrokeInnerAlpha") != undefined)
+				trackStrokeAlpha = getStyle("trackStrokeAlpha");
+
+			graphics.clear();
+			graphics.beginFill(trackFill, trackFillAlpha);
+			graphics.drawRect(0, 0, w-1, h);
+			graphics.endFill();
+			graphics.lineStyle(1, trackStroke, trackStrokeAlpha, true, LineScaleMode.NONE, CapsStyle.SQUARE);
+			graphics.drawRect(0, 0, w-1, h);
+		}
+	}}
\ No newline at end of file
diff --git a/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/styles/ScrollbarUpArrowUpSkin.as b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/styles/ScrollbarUpArrowUpSkin.as
new file mode 100644
index 0000000..f9b66bc
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/flashx/textLayout/ui/styles/ScrollbarUpArrowUpSkin.as
@@ -0,0 +1,45 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 flashx.textLayout.ui.styles
+{
+	import mx.skins.RectangularBorder;
+
+	public class ScrollbarUpArrowUpSkin extends RectangularBorder
+	{
+		public function ScrollbarUpArrowUpSkin()
+		{
+			super();
+		}
+		
+		override public function get measuredWidth():Number
+		{
+			return 13;
+		}
+		
+		override public function get measuredHeight():Number
+		{
+			return 14;
+		}
+		
+		override protected function updateDisplayList(w:Number, h:Number):void
+		{
+			super.updateDisplayList(w, h);
+		}
+	}
+}
\ No newline at end of file
diff --git a/tourdeflexmodules/src/spark/tlf/textEditBar/FeatureSetChangeEvent.as b/tourdeflexmodules/src/spark/tlf/textEditBar/FeatureSetChangeEvent.as
new file mode 100644
index 0000000..811dd37
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/textEditBar/FeatureSetChangeEvent.as
@@ -0,0 +1,42 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 textEditBar
+{
+import flash.events.Event;
+import flashx.textLayout.elements.TextFlow;
+
+public class FeatureSetChangeEvent extends Event
+{
+	public const FEATURE_SET:String = "featureSet";
+	
+	public var featureSet:String;
+
+	public function FeatureSetChangeEvent(newFeatureSet:String, type:String = FEATURE_SET,
+							  bubbles:Boolean = false,
+							  cancelable:Boolean = false)
+	{
+		super(type, bubbles, cancelable);
+		featureSet = newFeatureSet;
+	}
+	override public function clone():Event
+	{
+		return new FeatureSetChangeEvent(featureSet, type, bubbles, cancelable);
+	}
+}		// end class
+}
diff --git a/tourdeflexmodules/src/spark/tlf/textEditBar/FileEvent.as b/tourdeflexmodules/src/spark/tlf/textEditBar/FileEvent.as
new file mode 100644
index 0000000..4832d1f
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/textEditBar/FileEvent.as
@@ -0,0 +1,43 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 textEditBar
+{
+import flash.events.Event;
+import flash.net.FileReference;
+
+public class FileEvent extends Event
+{
+	public var fileName:FileReference;
+	
+	public const FILE_CHOOSE:String = "fileChoose";
+
+	public function FileEvent(newFileName:FileReference, type:String = FILE_CHOOSE,
+							  bubbles:Boolean = false,
+							  cancelable:Boolean = false)
+	{
+		super(type, bubbles, cancelable);
+		fileName = newFileName;
+	}
+	
+	override public function clone():Event
+	{
+		return new FileEvent(fileName, type, bubbles, cancelable);
+	}
+}		// end class
+}		// end package
\ No newline at end of file
diff --git a/tourdeflexmodules/src/spark/tlf/textEditBar/FileIOHelper.as b/tourdeflexmodules/src/spark/tlf/textEditBar/FileIOHelper.as
new file mode 100644
index 0000000..1d239bc
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/textEditBar/FileIOHelper.as
@@ -0,0 +1,268 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 textEditBar
+{
+	import flash.display.DisplayObject;
+	import flash.events.Event;
+	import flash.events.IOErrorEvent;
+	import flash.net.FileReference;
+	
+	import flashx.textLayout.conversion.ConversionType;
+	import flashx.textLayout.conversion.ITextExporter;
+	import flashx.textLayout.conversion.ITextImporter;
+	import flashx.textLayout.conversion.TextConverter;
+	import flashx.textLayout.debug.assert;
+	import flashx.textLayout.elements.TextFlow;
+	
+	import mx.managers.CursorManager;
+	import mx.managers.PopUpManager;
+	import mx.rpc.events.ResultEvent;
+	import mx.rpc.http.mxml.HTTPService;
+	
+	import textEditBar.StatusPopup;
+	
+	public class FileIOHelper
+	{
+		static public var parentWindow:DisplayObject;
+		static public var changeContent:Function;
+
+		static private var _openedFile:String;
+		
+		// called when the app has a specific file it wants to read (at startup)
+		static public function fileOpen(fileName:String):void
+		{
+			var localHTTP:HTTPService = new HTTPService();
+  			localHTTP.url = fileName;
+  			_openedFile = fileName;
+			localHTTP.method = "GET";
+			localHTTP.resultFormat="text"
+			localHTTP.showBusyCursor=true;
+			localHTTP.addEventListener(ResultEvent.RESULT,parseIntoFlowFromHTTP,false,0,true);
+			localHTTP.addEventListener(IOErrorEvent.IO_ERROR,errorOnReadFromHTTP,false,0,true);
+			localHTTP.send();
+		}
+
+		// called when user picks a file
+		static public function fileChoose(fileName:FileReference) : void
+		{
+			fileName.addEventListener(Event.COMPLETE,onFileReferenceLoadComplete,false,0,true);
+			fileName.addEventListener(IOErrorEvent.IO_ERROR,errorOnReadFromFileReference,false,0,true);
+			fileName.load();
+		}
+		
+		static private function onFileReferenceLoadComplete(event:Event):void
+		{
+			var fileReference:FileReference = FileReference(event.target);
+	   		_extension= getExtension(fileReference.name).toLowerCase();
+	   		_fileData = String(fileReference.data);
+	   		parseCurrentDataWithExtension();
+		}
+
+		static private function errorOnReadFromFileReference(event:IOErrorEvent):void
+        {
+        	var curFileReference:FileReference = FileReference(event.target);
+        	// Text content will be an error string
+			var errorString:String = "Error reading file " + curFileReference.name;
+ 			errorString += "\n";
+ 			errorString += event.toString();
+ 			_extension = "txt";
+ 			_fileData = errorString;
+ 			parseCurrentDataWithExtension();
+			//CursorManager.removeBusyCursor(); //get rid of hourglass cursor. 			
+  		}
+  		
+ 		static private function parseIntoFlowFromHTTP(event:ResultEvent):void 
+ 		{
+	   		_fileData = String(event.result);
+	   		_extension = getExtension(_openedFile).toLowerCase();
+	   		parseCurrentDataWithExtension();
+	   		_openedFile = null;
+ 		}
+ 		
+ 		static private function errorOnReadFromHTTP(event:Object):void
+ 		{
+ 			// Text content will be an error string
+			var errorString:String = "Error reading file " + _openedFile;
+ 			errorString += "\n";
+ 			errorString += event.fault;
+ 			_extension = "txt";
+ 			_fileData = errorString;
+ 			parseCurrentDataWithExtension();
+			CursorManager.removeBusyCursor(); //get rid of hourglass cursor. 
+ 	   		_openedFile = null;
+		}
+		
+		static private function getExtension(fileName:String):String
+		{
+			var dotPos:int = fileName.lastIndexOf(".");
+			if (dotPos >= 0)
+				return fileName.substring(dotPos + 1);
+			return fileName;
+		}
+		
+		// hold onto these two in case we need to recreate textFlow
+		static private var _extension:String;
+		static private var _fileData:String;
+		
+		static public function parseCurrentDataWithExtension():void
+		{
+	   		switch (_extension)
+	   		{
+	   			case "xml":		// use Vellum markup
+	   				parseStringIntoFlow(_fileData, TextConverter.TEXT_LAYOUT_FORMAT);
+	   				break;
+	   			case "txt":
+	   				parseStringIntoFlow(_fileData, TextConverter.PLAIN_TEXT_FORMAT);
+	   				break;
+				case "html":
+	   				parseStringIntoFlow(_fileData, TextConverter.TEXT_FIELD_HTML_FORMAT);
+	   				break;
+
+	   		}
+		}
+				
+		static private function parseStringIntoFlow(source:String, format:String):void
+		{
+			var textImporter:ITextImporter = TextConverter.getImporter(format);
+			var newFlow:TextFlow = textImporter.importToFlow(source);
+			reportImportErrors(textImporter.errors);
+			// no TextFlow found - Flow will display an empty TextFlow by design 
+			// - alternative is to do some kind of error string
+			changeContent(newFlow ? newFlow : new TextFlow());
+		} 
+ 		
+		static private function reportImportErrors(errors:Vector.<String>):void
+		{
+			if (errors)
+			{
+				var errorText:String = "ERRORS REPORTED ON IMPORT";
+				for each(var e:String in errors)
+					errorText += "\n" + e;
+					
+				var dlg:StatusPopup = new StatusPopup();
+				dlg.closeFunction = closeStatusPopup;
+
+				PopUpManager.addPopUp(dlg, parentWindow, true);
+				PopUpManager.centerPopUp(dlg);
+				// stick it in the upper left
+				dlg.x = 0;
+				dlg.y = 0;
+			
+				dlg.textArea.text = errorText;
+			}
+		}
+ 		static private function closeStatusPopup(dlg:StatusPopup):void
+ 		{
+ 			PopUpManager.removePopUp(dlg);
+ 		}
+ 			
+		static private function importStatusPopupContent(dlg:StatusPopup):void
+		{
+			switch(dlg.textFormat)
+			{
+				case TextConverter.TEXT_LAYOUT_FORMAT:
+					_extension = "xml";
+					break;
+				case TextConverter.TEXT_FIELD_HTML_FORMAT:
+					_extension = "html";
+					break;
+			}
+			_fileData = dlg.textArea.text;
+			parseCurrentDataWithExtension();
+			PopUpManager.removePopUp(dlg);
+		}
+		
+		static private function saveStatusPopupContent(dlg:StatusPopup):void
+		{
+			var extension:String;
+			switch(dlg.textFormat)
+			{
+				case TextConverter.TEXT_LAYOUT_FORMAT:
+					extension = "xml";
+					break;
+				case TextConverter.TEXT_FIELD_HTML_FORMAT:
+					extension = "html";
+					break;
+			}
+			
+	  		var fileReference:FileReference = new FileReference();
+  			fileReference.save(dlg.textArea.text,extension == null ? null : "NewFile."+extension);
+		}
+		
+
+
+		// Export related code
+		static public function textLayoutExport(activeFlow:TextFlow) : void
+		{		
+			export(activeFlow, TextConverter.TEXT_LAYOUT_FORMAT);
+		}
+
+
+		static public function htmlExport(activeFlow:TextFlow) : void
+		{
+			export(activeFlow, TextConverter.TEXT_FIELD_HTML_FORMAT);
+		}
+
+		static private const xmlBoilerPlate:String = '<?xml version="1.0" encoding="utf-8"?>\n';
+										
+		static public function export(activeFlow:TextFlow, format:String) : void
+		{
+			//CONFIG::debug
+			{	
+				var originalSettings:Object = XML.settings();
+				try
+				{
+					XML.ignoreProcessingInstructions = false;		
+					XML.ignoreWhitespace = false;
+					XML.prettyPrinting = false;
+					
+					
+					var exporter:ITextExporter = TextConverter.getExporter(format);
+					var xmlExport:XML = exporter.export(activeFlow, ConversionType.XML_TYPE) as XML;
+					var result:String = xmlBoilerPlate + xmlExport;					
+					XML.setSettings(originalSettings);
+				}
+				
+				catch(e:Error)
+				{
+					XML.setSettings(originalSettings);
+					throw(e);
+				}
+			}
+			
+			// show it in the pop-up dialog
+			var dlg:StatusPopup = new StatusPopup();
+			dlg.closeFunction = closeStatusPopup;
+			dlg.importFunction = importStatusPopupContent;
+			dlg.saveFunction   = saveStatusPopupContent;
+			dlg.textFormat = format;
+			
+			PopUpManager.addPopUp(dlg, parentWindow, true);
+			PopUpManager.centerPopUp(dlg);
+			// stick it in the upper left
+			dlg.x = 0;
+			dlg.y = 0;
+	
+			dlg.textArea.text = result.replace(/\u000D\u000A/g, "\r"); // workaround for TextArea bug SDK-14797
+		}
+		
+
+
+	}
+}
diff --git a/tourdeflexmodules/src/spark/tlf/textEditBar/FileServices.mxml b/tourdeflexmodules/src/spark/tlf/textEditBar/FileServices.mxml
new file mode 100644
index 0000000..58e740b
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/textEditBar/FileServices.mxml
@@ -0,0 +1,96 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+
+<!--This widget allows the user to enter a file name and when the "ReadFile" button is pressed, it 
+reads the file, and passes through the file contents as a ContentEvent. It expects an XML file in
+TextLayout format.-->
+
+<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" creationComplete="handleCreationComplete()" >
+	<mx:Metadata>
+	[Event(name="fileChoose", type="textEditBar.FileEvent")]
+	[Event(name="textLayoutExport", type="flash.events.Event")]
+	[Event(name="htmlExport", type="flash.events.Event")]
+ 	</mx:Metadata>
+
+  <mx:Script>
+		<![CDATA[
+			import flash.events.Event;
+			import flash.system.Capabilities;
+			import flashx.textLayout.elements.TextFlow;
+			import mx.events.MenuEvent;
+			import mx.controls.Alert;
+			import flashx.textLayout.edit.EditingMode;
+			import flashx.textLayout.edit.ElementRange;
+			import flashx.textLayout.edit.ISelectionManager;
+			import flashx.textLayout.edit.IEditManager;
+			import flashx.textLayout.BuildInfo;
+			
+			public var activeFlow:TextFlow;
+			
+			[Bindable]
+			public var buildString:String = "Build: " + BuildInfo.kBuildNumber + "(" + Capabilities.version + ")";
+
+			internal function handleCreationComplete():void
+			{
+				buildLabel.left = (this.x + this.width - 20) - buildLabel.width;
+			}
+			// Update UI panel in response to change in selection
+			public function update(range:ElementRange):void
+			{
+				if (!activeFlow)
+					return;
+					
+			}
+			
+			private var fileReference:FileReference;
+			
+			public function currentFileName():String
+			{
+				return fileReference != null ? fileReference.name : null;
+			}
+			
+			public function openDialog():void
+			{
+	  			var markupFilter:FileFilter = new FileFilter("Documents","*.xml;*.fxg;*.html");
+	  			fileReference = new FileReference();
+  				fileReference.browse([markupFilter]);
+  				fileReference.addEventListener(Event.SELECT,onFileSelect);
+			}
+			
+			private function onFileSelect(event:Event):void 
+			{
+	  			try {
+	  				dispatchEvent(new FileEvent(fileReference));
+		  			//fileReference.load();
+		  		} catch (err:Event) {
+		  			Alert.show(err.toString());
+		  		}
+	  		}
+		   
+           ]]>
+    </mx:Script>
+
+   	<mx:Button label="Open..." click="openDialog()"/>
+   		
+	<mx:Button id="textLayoutExportButton" label="Markup..." click="dispatchEvent(new Event('textLayoutExport'))"/>
+	<mx:Button id="htmlExportButton" label="HTML Markup..." click="dispatchEvent(new Event('htmlExport'))"/>
+
+	<mx:Label id="buildLabel" text="{buildString}" fontWeight="bold" paddingTop="3" paddingBottom="1"/>
+</mx:HBox>
diff --git a/tourdeflexmodules/src/spark/tlf/textEditBar/GraphicBar.mxml b/tourdeflexmodules/src/spark/tlf/textEditBar/GraphicBar.mxml
new file mode 100644
index 0000000..9d5d2fb
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/textEditBar/GraphicBar.mxml
@@ -0,0 +1,153 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+
+<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:textEditBar="textEditBar.*" 
+	addedToStage="onAddedToStage()" removedFromStage="onRemovedFromStage()" horizontalScrollPolicy="off" verticalScrollPolicy="off">
+	
+	<mx:Script>
+		<![CDATA[
+			import flashx.textLayout.edit.ElementRange;
+			import flashx.textLayout.edit.IEditManager;
+			import flashx.textLayout.elements.InlineGraphicElement;
+			import flashx.textLayout.elements.TextFlow;
+			import flashx.textLayout.formats.FormatValue;
+			import flashx.textLayout.tlf_internal;
+			
+			use namespace tlf_internal;
+			
+			public var activeFlow:TextFlow;
+			
+			protected function applyChange():void
+			{
+				changeForeignElement(imageURL.text, imageWidth.text, imageHeight.text, "none", doChangeImage);				
+			}
+			
+	  		protected function changeForeignElement(foreignElementUrl:String, width:String, height:String, float:String, changeCurrent:Boolean):void
+	 		{
+	 			if (activeFlow && activeFlow.interactionManager is IEditManager)
+	 			{
+					if (changeCurrent)
+	 					IEditManager(activeFlow.interactionManager).modifyInlineGraphic(foreignElementUrl, width, height, float);
+					else
+						IEditManager(activeFlow.interactionManager).insertInlineGraphic(foreignElementUrl, width, height, float);
+	 				activeFlow.interactionManager.setFocus();
+	 			}
+	 		}
+		
+			protected var doChangeImage:Boolean = false;
+			
+			public function update(range:ElementRange):void
+ 			{
+ 				if (onStage)
+ 				{
+ 					if (range ==  null)
+ 						visible = false;
+ 					else
+ 					{
+ 						if (!visible)
+ 							visible = true;
+
+	 					var makeItTheChangeButton:Boolean = false;
+	 					
+	 					// this logic is a complicated by the fact that we extend the end of the selection because the FE is at the end of the paragraph
+	 					if (range && range.firstLeaf is InlineGraphicElement && range.absoluteStart == range.firstLeaf.getAbsoluteStart())
+	 					{
+	 						// two cases just the FE and just the FE plus the paragraph terminator
+	 						if (range.absoluteEnd == range.absoluteStart+1 || (range.firstParagraph == range.lastParagraph && range.absoluteEnd == range.absoluteStart+2 && range.absoluteEnd == range.lastParagraph.getAbsoluteStart() + range.lastParagraph.textLength))
+	 							makeItTheChangeButton = true; 
+	 					}
+	 					
+	 					// block selection of just the FE
+	 					if (makeItTheChangeButton)
+	 						updateForChange(InlineGraphicElement(range.firstLeaf));
+	 					else
+	 						updateForInsert(range)
+ 					}
+ 				}
+				lastRange = range;	
+ 			}
+ 			
+ 			protected function updateForChange(inlineElement:InlineGraphicElement):void
+ 			{
+				var sourceString:String = inlineElement.source.toString()
+				var widthString:String = inlineElement.width === undefined ? FormatValue.AUTO : inlineElement.width.toString();
+				var heightString:String = inlineElement.height === undefined ? FormatValue.AUTO : inlineElement.height.toString();
+ 				doUpdate(sourceString, widthString, heightString, true, true);
+ 			}
+			
+ 			protected function updateForInsert(range:ElementRange):void
+ 			{
+ 				doUpdate("", 
+ 					InlineGraphicElement.tlf_internal::widthPropertyDefinition.defaultValue.toString(),
+ 					InlineGraphicElement.tlf_internal::heightPropertyDefinition.defaultValue.toString(),
+ 					false, range && range.firstLeaf);
+	 		}
+	 		
+ 			private function doUpdate(url:String, width:String, height:String, modify:Boolean, enableImage:Boolean):void
+ 			{
+  				imageURL.text = url;
+ 				imageWidth.text = width;
+ 				imageHeight.text = height;
+ 				imageButton.label = modify ? "Change" : "Insert";
+ 				doChangeImage = modify;
+ 				imageButton.enabled = enableImage;			
+ 			}
+
+			private var onStage:Boolean = false;
+			private var addedFrameEventListener:Boolean = false;
+			protected var lastRange:ElementRange = null;
+			private function onAddedToStage():void
+			{
+				// the dataProviders aren't set up yet - delay to the frame
+				onStage = true;
+				if (!addedFrameEventListener)
+				{
+					addedFrameEventListener = true;
+					addEventListener("enterFrame",onEnterFrame);
+				}
+			}
+				
+			private function onEnterFrame(p:Event):void
+			{
+				this.removeEventListener("enterFrame",onEnterFrame);
+				addedFrameEventListener = false;	
+				
+				var temp:ElementRange = lastRange;
+				lastRange = null;
+				update(temp);
+					
+			}
+			
+			private function onRemovedFromStage():void
+			{
+				onStage = false;
+			}
+		]]>
+	</mx:Script>
+
+	<mx:Label text="Image URL:" fontWeight="bold"/>
+	<mx:TextInput id="imageURL" width="140"/>
+	<mx:Label text="Width:" fontWeight="bold"/>
+	<mx:TextInput id="imageWidth" width="60"/>
+	<mx:Label text="Height:" fontWeight="bold"/>
+	<mx:TextInput id="imageHeight" width="60"/>			
+	<mx:Button id="imageButton" label="Insert Image" 
+		click="applyChange()" />
+</mx:HBox>
diff --git a/tourdeflexmodules/src/spark/tlf/textEditBar/GraphicChangeEvent.as b/tourdeflexmodules/src/spark/tlf/textEditBar/GraphicChangeEvent.as
new file mode 100644
index 0000000..0128881
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/textEditBar/GraphicChangeEvent.as
@@ -0,0 +1,61 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 textEditBar
+{
+	import flash.events.Event;
+	
+	public class GraphicChangeEvent extends Event
+	{
+		private var _imageLink:String;
+		private var _imageWidth:Object;
+		private var _imageHeight:Object;
+		private var _float:String;
+		private var _replaceCurrent:Boolean;	
+		
+		public function GraphicChangeEvent(type:String, imageLink:String, imageWidth:Object, imageHeight:Object, float:String, replaceCurrent:Boolean = false, bubbles:Boolean=false, cancelable:Boolean=false)
+		{
+			_imageLink = imageLink;
+			_imageWidth = imageWidth;
+			_imageHeight = imageHeight;
+			_replaceCurrent = replaceCurrent;
+			_float = float;
+			super(type, bubbles, cancelable);
+		}
+		
+		override public function clone():Event
+		{
+			return new GraphicChangeEvent(type, _imageLink, _imageWidth, _imageHeight, _float, _replaceCurrent, bubbles, cancelable);
+		}
+		
+		public function get imageLink():String
+		{ return _imageLink; }		
+		
+		public function get imageWidth():Object
+		{ return _imageWidth; }
+		
+		public function get imageHeight():Object
+		{ return _imageHeight; }
+		
+		public function get float():String
+		{ return _float; }
+		
+		public function get replaceCurrent():Boolean
+		{ return _replaceCurrent; }
+	}
+}
diff --git a/tourdeflexmodules/src/spark/tlf/textEditBar/LinkBar.mxml b/tourdeflexmodules/src/spark/tlf/textEditBar/LinkBar.mxml
new file mode 100644
index 0000000..bdcbcd8
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/textEditBar/LinkBar.mxml
@@ -0,0 +1,158 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+
+<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:textEditBar="textEditBar.*"
+		addedToStage="onAddedToStage()" removedFromStage="onRemovedFromStage()">
+	
+	<mx:Array id="targetArray"> 
+		<mx:String>_blank</mx:String>
+		<mx:String>_self</mx:String>
+		<mx:String>_parent</mx:String>
+		<mx:String>_top</mx:String>
+	</mx:Array>	
+	
+	<mx:Script>
+		<![CDATA[
+		    import mx.controls.Alert;
+			import flashx.textLayout.edit.ElementRange;
+			import flashx.textLayout.edit.IEditManager;
+			import flashx.textLayout.elements.LinkElement;
+			import flashx.textLayout.elements.FlowElement;
+			import flashx.textLayout.elements.ParagraphElement;
+			import flashx.textLayout.events.FlowElementMouseEvent;
+			import flashx.textLayout.elements.TextFlow;
+			
+			public var activeFlow:TextFlow;
+			
+	 		private function changeLink(urlText:String, targetText:String, extendToOverlappingLinks:Boolean):void
+	 		{
+	 			if (activeFlow && activeFlow.interactionManager is IEditManager)
+	 			{
+	  				IEditManager(activeFlow.interactionManager).applyLink(urlText, targetText, extendToOverlappingLinks);			
+	 				activeFlow.interactionManager.setFocus();
+	 			}
+	 		}
+ 		
+		    private var onStage:Boolean = false;
+    		private var addedFrameEventListener:Boolean = false;
+    		private var lastRange:ElementRange;
+    		
+			private function onAddedToStage():void
+			{
+				// the dataProviders aren't set up yet - delay to the frame
+				onStage = true;
+				if (!addedFrameEventListener)
+				{
+					addedFrameEventListener = true;
+					addEventListener("enterFrame",onEnterFrame);
+				}
+			}
+		
+			private function onEnterFrame(p:Event):void
+			{
+				this.removeEventListener("enterFrame",onEnterFrame);
+				addedFrameEventListener = false;
+			
+				update(lastRange);
+			}
+	
+			private function onRemovedFromStage():void
+			{
+				onStage = false;
+			}    		
+
+			protected function setTargetCombo(val:String):void
+			{
+				var length:uint = linkTargetCombo.dataProvider.length;
+		
+				for (var i:uint = 0; i < length; i++)
+				{
+					if (linkTargetCombo.dataProvider.getItemAt(i).toLowerCase() == val.toLowerCase())
+					{
+						linkTargetCombo.selectedIndex = i;
+						return;
+					}
+				}
+				linkTargetCombo.selectedIndex = -1;
+				linkTargetCombo.validateNow();
+				linkTargetCombo.text = val;
+			}
+    					
+			public function update(range:ElementRange):void
+			{
+				if (!range)
+				{
+					if (onStage)
+						visible = false;
+					lastRange = null;
+					return;
+				}
+				
+				var linkString:String = "";
+				var linkTarget:String = "";
+				var linkEl:LinkElement = range.firstLeaf.getParentByType(LinkElement) as LinkElement;
+				if (linkEl != null)
+				{
+					var linkElStart:int = linkEl.getAbsoluteStart();
+					var linkElEnd:int = linkElStart + linkEl.textLength;
+					if (linkElEnd < linkElStart)
+					{
+						var temp:int = linkElStart;
+						linkElStart = linkElEnd;
+						linkElEnd = temp;
+					}
+					
+					var beginRange:int = range.absoluteStart;
+					var endRange:int = range.absoluteEnd;
+					
+					var beginPara:ParagraphElement = range.firstParagraph;
+					if (endRange == (beginPara.getAbsoluteStart() + beginPara.textLength))
+					{
+						endRange--;
+					}
+					
+					if ((beginRange == endRange) || (endRange <= linkElEnd))
+					{
+						linkString = LinkElement(linkEl).href;
+						linkTarget = LinkElement(linkEl).target;
+					}
+				}
+				
+				if (onStage)
+				{
+					if (!visible)
+						visible = true;
+					linkTextInput.text = linkString ? linkString : "";
+					setTargetCombo(linkTarget ? linkTarget : "");
+				}
+				lastRange = range;
+			}			
+		]]>
+	</mx:Script>
+
+	<mx:Label text="Link Url:" fontWeight="bold"/>
+	<mx:TextInput id="linkTextInput" width="140"/>
+	<mx:Label text="Link Target:" fontWeight="bold"/>
+	<mx:ComboBox id="linkTargetCombo" editable="true"
+		selectedIndex="0" dataProvider = "{targetArray}"/>
+	<mx:CheckBox id = "linkExtendCheckBox" label="Extend"/>
+	<mx:Button label="Apply Link" 
+		click="changeLink(linkTextInput.text, linkTargetCombo.text, linkExtendCheckBox.selected)" />
+</mx:HBox>
diff --git a/tourdeflexmodules/src/spark/tlf/textEditBar/LinkChangeEvent.as b/tourdeflexmodules/src/spark/tlf/textEditBar/LinkChangeEvent.as
new file mode 100644
index 0000000..2c500dc
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/textEditBar/LinkChangeEvent.as
@@ -0,0 +1,51 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 textEditBar
+{
+	import flash.events.Event;
+	
+	public class LinkChangeEvent extends Event
+	{
+		private var _linkText:String;
+		private var _targetText:String;
+		private var _extendToOverlappingLinks:Boolean;
+		
+		public function LinkChangeEvent(type:String, linkText:String, targetText:String, extendToOverlappingLinks:Boolean=false, bubbles:Boolean=false, cancelable:Boolean=false)
+		{
+			_linkText = linkText;
+			_targetText = targetText;
+			_extendToOverlappingLinks = extendToOverlappingLinks;
+			super(type, bubbles, cancelable);
+		}
+		
+		override public function clone():Event
+		{
+			return new LinkChangeEvent(type, _linkText, _targetText, _extendToOverlappingLinks, bubbles, cancelable);
+		}
+		
+		public function get linkText():String
+		{ return _linkText; }		
+		
+		public function get linkTarget():String
+		{ return _targetText; }
+		
+		public function get extendToOverlappingLinks():Boolean
+		{ return _extendToOverlappingLinks; }
+	}
+}
diff --git a/tourdeflexmodules/src/spark/tlf/textEditBar/SingleContainerView.mxml b/tourdeflexmodules/src/spark/tlf/textEditBar/SingleContainerView.mxml
new file mode 100644
index 0000000..85797c2
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/textEditBar/SingleContainerView.mxml
@@ -0,0 +1,80 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+
+<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="0xffffff" resize="handleResize()">
+	
+	<mx:Script>
+		<![CDATA[
+		import flashx.textLayout.elements.TextFlow;
+		import flashx.textLayout.compose.StandardFlowComposer;
+		import flashx.textLayout.container.ContainerController;
+		import textEditBar.SpriteWithIME;
+		
+		
+		private var _activeFlow:TextFlow;
+		
+		public function changeContainerSetup(newActiveFlow:TextFlow):void
+ 		{
+ 			_activeFlow = newActiveFlow;
+ 			if (_activeFlow)
+ 			{
+ 				if (!_activeFlow.flowComposer)
+ 					_activeFlow.flowComposer = new StandardFlowComposer();
+ 				if (_activeFlow.flowComposer.numControllers < 1)
+ 					_activeFlow.flowComposer.addController(new ContainerController(new SpriteWithIME()));
+				rawChildren.addChild(_activeFlow.flowComposer.getControllerAt(0).container);	
+				handleResize();
+ 			}
+  		}
+ 		
+		public function handleResize():void
+		{
+			if (!_activeFlow)
+				return;
+				
+			var newFrameWidth:Number = width;
+			var newFrameHeight:Number = height;
+
+			var cont:ContainerController = _activeFlow.flowComposer.getControllerAt(0);
+			if (cont.container)
+				updateFrameDimensions(cont,0,0,newFrameWidth,newFrameHeight);
+
+			_activeFlow.flowComposer.updateAllControllers();
+				
+			if (_activeFlow.interactionManager && _activeFlow.interactionManager.hasSelection())
+				_activeFlow.flowComposer.getControllerAt(0).scrollToRange(_activeFlow.interactionManager.activePosition,_activeFlow.interactionManager.anchorPosition);	
+
+		}
+				
+ 		/** helper function to update a frame's dimensions */
+ 		private function updateFrameDimensions(controller:ContainerController,x:Number,y:Number,w:Number,h:Number):void
+ 		{
+ 			var tc:DisplayObject = controller.container;
+ 			
+   			if (tc.x != x)
+ 				tc.x = x;
+ 			if (tc.y != y)
+ 				tc.y = y;
+			controller.setCompositionSize(w,h);
+ 		}
+ 		
+		]]>
+	</mx:Script>
+</mx:Canvas>
diff --git a/tourdeflexmodules/src/spark/tlf/textEditBar/SpriteWithIME.as b/tourdeflexmodules/src/spark/tlf/textEditBar/SpriteWithIME.as
new file mode 100644
index 0000000..8abf701
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/textEditBar/SpriteWithIME.as
@@ -0,0 +1,102 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 textEditBar
+{
+	import flash.display.Sprite;
+	
+	import mx.core.IIMESupport;
+	import mx.managers.IFocusManagerComponent;
+
+	public class SpriteWithIME extends Sprite implements IIMESupport, IFocusManagerComponent
+	{
+		private var _imeMode:String;
+		
+		public function SpriteWithIME()
+		{
+			super();
+		}
+		
+		public function get enableIME():Boolean
+		{
+			return true;
+		}
+		
+		public function get imeMode():String
+		{
+			return _imeMode;
+		}
+		
+		public function set imeMode(value:String):void
+		{
+			_imeMode = value;
+		}
+		
+		public function get focusEnabled():Boolean
+		{
+			return true;
+		}
+		
+		public function set focusEnabled(value:Boolean):void
+		{
+		}
+		
+		// For now! Should be dependent on Configuration.manageTabKey
+		public function get tabFocusEnabled():Boolean
+		{
+			return true;
+		}
+		
+		public function set tabFocusEnabled(value:Boolean):void
+		{
+		}
+		
+		public function get hasFocusableChildren():Boolean
+		{
+			return false;
+		}
+		
+		public function set hasFocusableChildren(value:Boolean):void
+		{
+		}
+		
+		public function get mouseFocusEnabled():Boolean
+		{
+			return false;
+		}
+		
+		/*public function get tabEnabled():Boolean
+		{
+			return false;
+		}
+		
+		public function get tabIndex():int
+		{
+			return 0;
+		}*/
+		
+		public function setFocus():void
+		{
+		}
+		
+		public function drawFocus(isFocused:Boolean):void
+		{
+		}
+		
+	}
+}
\ No newline at end of file
diff --git a/tourdeflexmodules/src/spark/tlf/textEditBar/StatusPopup.mxml b/tourdeflexmodules/src/spark/tlf/textEditBar/StatusPopup.mxml
new file mode 100644
index 0000000..850df4c
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/textEditBar/StatusPopup.mxml
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="500" height="390" verticalScrollPolicy="off"
+	horizontalScrollPolicy="off">
+	<mx:Script>
+		<![CDATA[
+			public var closeFunction:Function;
+			public var textFormat:String;
+			[Bindable]
+			public var importFunction:Function;
+			[Bindable]
+			public var saveFunction:Function;
+		]]>
+	</mx:Script>	
+	<mx:TextArea id="textArea" x="0" y="0" width="100%" height="100%" fontFamily="_sans">
+	</mx:TextArea>
+	<mx:ControlBar horizontalAlign="center">
+		<mx:Button label="Import" id="cmdImport" visible="{importFunction != null}" click="{if (importFunction != null) importFunction(this)}"/>
+		<mx:Button label="Save"   id="cmdSave"   visible="{saveFunction != null}" click="{if (saveFunction != null) saveFunction(this)}"/>
+		<mx:Button label="Close"  id="cmdClose"  click="closeFunction(this)"/>
+	</mx:ControlBar>
+</mx:Panel>
diff --git a/tourdeflexmodules/src/spark/tlf/textEditBar/StyleChangeEvent.as b/tourdeflexmodules/src/spark/tlf/textEditBar/StyleChangeEvent.as
new file mode 100644
index 0000000..eb3273c
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/textEditBar/StyleChangeEvent.as
@@ -0,0 +1,46 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 textEditBar
+{
+	import flash.events.Event;
+	
+	import flashx.textLayout.formats.ITextLayoutFormat;
+
+	public class StyleChangeEvent extends Event
+	{
+		private var _attrs:Object;
+		
+		public function StyleChangeEvent(type:String, styleAttrs:Object, bubbles:Boolean=false, cancelable:Boolean=false)
+		{
+			_attrs = styleAttrs;
+			super(type, bubbles, cancelable);
+		}
+		
+		override public function clone():Event
+		{
+			return new StyleChangeEvent(type, _attrs, bubbles, cancelable);
+		}
+		
+		public function get format():ITextLayoutFormat
+		{ return _attrs as ITextLayoutFormat; }	
+		
+		public function get attrs():Object
+		{ return _attrs; }
+	}
+}
\ No newline at end of file
diff --git a/tourdeflexmodules/src/spark/tlf/textEditBar/assets/%icon_tcy.png b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/%icon_tcy.png
new file mode 100644
index 0000000..47c3637
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/%icon_tcy.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/textEditBar/assets/BreakOpportunityType.png b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/BreakOpportunityType.png
new file mode 100644
index 0000000..565003d
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/BreakOpportunityType.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/textEditBar/assets/EmbedDeleteIcon.png b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/EmbedDeleteIcon.png
new file mode 100644
index 0000000..7894025
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/EmbedDeleteIcon.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/textEditBar/assets/EmbedDeleteIconDisabled.png b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/EmbedDeleteIconDisabled.png
new file mode 100644
index 0000000..22975eb
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/EmbedDeleteIconDisabled.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/textEditBar/assets/P_TextAlignBottom_Sm_N.png b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/P_TextAlignBottom_Sm_N.png
new file mode 100644
index 0000000..a6ec4b1
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/P_TextAlignBottom_Sm_N.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/textEditBar/assets/P_TextAlignJustify_Sm_N.png b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/P_TextAlignJustify_Sm_N.png
new file mode 100644
index 0000000..4c45bc2
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/P_TextAlignJustify_Sm_N.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/textEditBar/assets/P_TextAlignMiddle_Sm_N.png b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/P_TextAlignMiddle_Sm_N.png
new file mode 100644
index 0000000..a1f5ae8
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/P_TextAlignMiddle_Sm_N.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/textEditBar/assets/P_TextAlignTop_Sm_N.png b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/P_TextAlignTop_Sm_N.png
new file mode 100644
index 0000000..9981848
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/P_TextAlignTop_Sm_N.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/textEditBar/assets/P_TextBaselineShift_Md_N.png b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/P_TextBaselineShift_Md_N.png
new file mode 100644
index 0000000..e348d7c
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/P_TextBaselineShift_Md_N.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/textEditBar/assets/P_TextBottomOffset_Md_N.png b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/P_TextBottomOffset_Md_N.png
new file mode 100644
index 0000000..89b948e
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/P_TextBottomOffset_Md_N.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/textEditBar/assets/P_TextFirstLineIndent_Md_N.png b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/P_TextFirstLineIndent_Md_N.png
new file mode 100644
index 0000000..eebadec
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/P_TextFirstLineIndent_Md_N.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/textEditBar/assets/P_TextLeftIndent_Md_N.png b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/P_TextLeftIndent_Md_N.png
new file mode 100644
index 0000000..b587cc6
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/P_TextLeftIndent_Md_N.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/textEditBar/assets/P_TextLeftOffset_Md_N.png b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/P_TextLeftOffset_Md_N.png
new file mode 100644
index 0000000..33c35a8
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/P_TextLeftOffset_Md_N.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/textEditBar/assets/P_TextRightIndent_Md_N.png b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/P_TextRightIndent_Md_N.png
new file mode 100644
index 0000000..2c0f651
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/P_TextRightIndent_Md_N.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/textEditBar/assets/P_TextRightOffset_Md_N.png b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/P_TextRightOffset_Md_N.png
new file mode 100644
index 0000000..1efc8e7
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/P_TextRightOffset_Md_N.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/textEditBar/assets/P_TextSmallCaps_Md_N.png b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/P_TextSmallCaps_Md_N.png
new file mode 100644
index 0000000..72c3860
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/P_TextSmallCaps_Md_N.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/textEditBar/assets/P_TextSpaceAfter_Md_N.png b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/P_TextSpaceAfter_Md_N.png
new file mode 100644
index 0000000..3d31df2
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/P_TextSpaceAfter_Md_N.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/textEditBar/assets/P_TextSpaceBefore_Md_N.png b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/P_TextSpaceBefore_Md_N.png
new file mode 100644
index 0000000..34a5bf6
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/P_TextSpaceBefore_Md_N.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/textEditBar/assets/P_TextTopOffset_Md_N.png b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/P_TextTopOffset_Md_N.png
new file mode 100644
index 0000000..b5b98b0
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/P_TextTopOffset_Md_N.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/textEditBar/assets/TextAutoLeadingPercent.png b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/TextAutoLeadingPercent.png
new file mode 100644
index 0000000..f8726a1
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/TextAutoLeadingPercent.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/textEditBar/assets/digitCase.png b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/digitCase.png
new file mode 100644
index 0000000..b3da25b
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/digitCase.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/textEditBar/assets/digitWidth.png b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/digitWidth.png
new file mode 100644
index 0000000..7e156f0
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/digitWidth.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/textEditBar/assets/elementBaseline.png b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/elementBaseline.png
new file mode 100644
index 0000000..056cf8f
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/elementBaseline.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/textEditBar/assets/icon_align_all_but_last.png b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/icon_align_all_but_last.png
new file mode 100644
index 0000000..7475419
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/icon_align_all_but_last.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/textEditBar/assets/icon_align_center.png b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/icon_align_center.png
new file mode 100644
index 0000000..3fac48d
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/icon_align_center.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/textEditBar/assets/icon_align_end.PNG b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/icon_align_end.PNG
new file mode 100644
index 0000000..15d6ddf
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/icon_align_end.PNG
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/textEditBar/assets/icon_align_justify.png b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/icon_align_justify.png
new file mode 100644
index 0000000..bf4a6d6
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/icon_align_justify.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/textEditBar/assets/icon_align_left.png b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/icon_align_left.png
new file mode 100644
index 0000000..c9f45f6
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/icon_align_left.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/textEditBar/assets/icon_align_right.png b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/icon_align_right.png
new file mode 100644
index 0000000..1bdcda3
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/icon_align_right.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/textEditBar/assets/icon_align_start.PNG b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/icon_align_start.PNG
new file mode 100644
index 0000000..039711b
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/icon_align_start.PNG
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/textEditBar/assets/icon_bullet.png b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/icon_bullet.png
new file mode 100644
index 0000000..a99e9a2
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/icon_bullet.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/textEditBar/assets/icon_style_bold.png b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/icon_style_bold.png
new file mode 100644
index 0000000..a0a71d1
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/icon_style_bold.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/textEditBar/assets/icon_style_italic.png b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/icon_style_italic.png
new file mode 100644
index 0000000..2d0221d
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/icon_style_italic.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/textEditBar/assets/icon_style_strikethrough.png b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/icon_style_strikethrough.png
new file mode 100644
index 0000000..3195a1b
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/icon_style_strikethrough.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/textEditBar/assets/icon_style_underline.png b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/icon_style_underline.png
new file mode 100644
index 0000000..316b2f1
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/icon_style_underline.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/textEditBar/assets/icon_tcy.png b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/icon_tcy.png
new file mode 100644
index 0000000..04e02e9
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/icon_tcy.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/textEditBar/assets/ligatures.png b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/ligatures.png
new file mode 100644
index 0000000..7f72cb0
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/ligatures.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/tlf/textEditBar/assets/lineBaseline.png b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/lineBaseline.png
new file mode 100644
index 0000000..b19b3c8
--- /dev/null
+++ b/tourdeflexmodules/src/spark/tlf/textEditBar/assets/lineBaseline.png
Binary files differ
diff --git a/tourdeflexmodules/src/spark/validators/CreditCardValidatorExample.mxml b/tourdeflexmodules/src/spark/validators/CreditCardValidatorExample.mxml
new file mode 100644
index 0000000..103426a
--- /dev/null
+++ b/tourdeflexmodules/src/spark/validators/CreditCardValidatorExample.mxml
@@ -0,0 +1,78 @@
+<?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>
+		import mx.controls.Alert;
+	</fx:Script>
+	
+	<fx:Declarations>
+		
+		<!-- Define model for the credit card data. -->
+		<fx:Model id="creditcard">
+			<card>	
+				<cardType>{cardTypeCombo.selectedItem.data}</cardType>
+				<cardNumber>{cardNumberInput.text}</cardNumber>
+			</card>
+		</fx:Model>
+		
+		<mx:CreditCardValidator id="ccV" 
+								cardTypeSource="{creditcard}" cardTypeProperty="cardType"
+								cardNumberSource="{creditcard}" cardNumberProperty="cardNumber"
+								trigger="{myButton}" triggerEvent="click"
+								cardTypeListener="{cardTypeCombo}"
+								cardNumberListener="{cardNumberInput}"
+								valid="Alert.show('Validation Succeeded!')"/>
+		
+		<s:ArrayCollection id="dp">
+			<fx:Object label="American Express" data="American Express"/>
+			<fx:Object label="Diners Club" data="Diners Club"/>
+			<fx:Object label="Discover" data="Discover"/>
+			<fx:Object label="MasterCard" data="MasterCard"/>
+			<fx:Object label="Visa" data="Visa"/>
+		</s:ArrayCollection>
+		
+	</fx:Declarations>
+	
+	<s:Panel title="CreditCardValidator Example" width="100%" height="100%">
+		
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" 
+								paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<mx:Form id="creditCardForm">
+			<mx:FormItem label="Card Type">    
+				<s:DropDownList id="cardTypeCombo" dataProvider="{dp}" width="160"
+								prompt="Card Type"/>
+			</mx:FormItem>
+			<mx:FormItem label="Credit Card Number">
+				<s:TextInput id="cardNumberInput"/>
+			</mx:FormItem>
+			<mx:FormItem>
+				<s:Button id="myButton" label="Check Credit"/>
+			</mx:FormItem>
+		</mx:Form> 	
+		
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/validators/CurrencyValidatorExample.mxml b/tourdeflexmodules/src/spark/validators/CurrencyValidatorExample.mxml
new file mode 100644
index 0000000..0315d80
--- /dev/null
+++ b/tourdeflexmodules/src/spark/validators/CurrencyValidatorExample.mxml
@@ -0,0 +1,53 @@
+<?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>
+        import mx.controls.Alert;
+    </fx:Script>
+	
+	<fx:Declarations>
+		<mx:CurrencyValidator source="{priceUS}" property="text" precision="2" 
+        trigger="{myButton}" triggerEvent="click" 
+        valid="Alert.show('Validation Succeeded!')"/>
+	</fx:Declarations>
+        
+	<s:Panel title="CurrencyValidator Example" width="100%" height="100%">
+		
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" 
+								paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+         
+         <mx:Form>
+            <mx:FormItem label="Enter a U.S. dollar amount: ">
+                 <s:TextInput id="priceUS" width="100%"/>
+            </mx:FormItem>
+
+            <mx:FormItem >
+                <s:Button id="myButton" label="Validate"/>
+            </mx:FormItem>
+        </mx:Form>
+         
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/validators/DateValidatorExample.mxml b/tourdeflexmodules/src/spark/validators/DateValidatorExample.mxml
new file mode 100644
index 0000000..5a0646e
--- /dev/null
+++ b/tourdeflexmodules/src/spark/validators/DateValidatorExample.mxml
@@ -0,0 +1,61 @@
+<?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.controls.Alert;
+		]]>
+	</fx:Script>
+	
+	<fx:Declarations>
+		<fx:Model id="CheckModel">
+			<dateInfo>
+				<DOB>{dob.text}</DOB>
+			</dateInfo>
+		</fx:Model>
+		
+		<mx:DateValidator source="{dob}" property="text" allowedFormatChars="/" 
+						  trigger="{myButton}" triggerEvent="click" 
+						  valid="Alert.show('Validation Succeeded!')"/>
+	</fx:Declarations>
+	
+	<s:Panel title="DateValidator Example" width="100%" height="100%">
+		
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" 
+								paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<mx:Form>
+			<mx:FormItem label="Enter date of birth (mm/dd/yyyy): ">
+				<s:TextInput id="dob" width="100%"/>
+			</mx:FormItem>
+			
+			<mx:FormItem >
+				<s:Button id="myButton" label="Validate" />
+			</mx:FormItem>
+		</mx:Form>
+		
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/validators/EmailValidatorExample.mxml b/tourdeflexmodules/src/spark/validators/EmailValidatorExample.mxml
new file mode 100644
index 0000000..7d0260c
--- /dev/null
+++ b/tourdeflexmodules/src/spark/validators/EmailValidatorExample.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.controls.Alert;
+		]]>
+	</fx:Script>
+	
+	<fx:Declarations>
+		<mx:EmailValidator source="{email}" property="text" 
+					   trigger="{myButton}" triggerEvent="click"
+					   valid="Alert.show('Validation Succeeded!')"/>
+	</fx:Declarations>
+	
+	
+	<s:Panel title="EmailValidator Example" width="100%" height="100%">
+		
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" 
+								paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<mx:Form>
+			<mx:FormItem label="Enter an e-mail address: ">
+				<s:TextInput id="email" width="100%"/>
+			</mx:FormItem>
+			
+			<mx:FormItem >
+				<s:Button id="myButton" label="Validate" />
+			</mx:FormItem>
+		</mx:Form>
+		
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/validators/FormValidatorExample.mxml b/tourdeflexmodules/src/spark/validators/FormValidatorExample.mxml
new file mode 100644
index 0000000..43908fe
--- /dev/null
+++ b/tourdeflexmodules/src/spark/validators/FormValidatorExample.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">
+	
+	<fx:Script>
+        <![CDATA[
+
+			// Import necessary classes.
+            import mx.controls.Alert;
+			import mx.events.ValidationResultEvent;
+			
+			// Event listener for the valid and invalid events.
+			private function handleValid(eventObj:ValidationResultEvent):void {
+				if(eventObj.type==ValidationResultEvent.VALID)	
+				    // Enable Submit button.
+					submitButton.enabled = true;
+				else
+					submitButton.enabled = false;
+			}
+
+			// Submit form is everything is valid. 
+			private function submitForm():void {
+				Alert.show("Form Submitted!");
+			}
+
+        ]]>
+    </fx:Script>
+	
+	<fx:Declarations>
+		<!-- The Validator class defines the required property and the validator events
+         used by all validator subclasses. -->
+    <mx:Validator id="reqValid" required="true"
+        source="{fname}" property="text" 
+        valid="handleValid(event)" invalid="handleValid(event)"/>
+	</fx:Declarations>
+        
+	<s:Panel title="Validator Example" width="100%" height="100%">
+		
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" 
+							  paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+         
+         <mx:Form>
+            <s:Label width="100%"
+                text="Enter a value in the Name field before you can submit. The E-mail field is optional."/>
+
+            <mx:FormItem label="Name: " required="true">
+                <s:TextInput id="fname" width="100%"/>
+            </mx:FormItem>
+
+            <mx:FormItem label="E-mail address: " required="false">
+                <s:TextInput id="email" width="100%"/>
+            </mx:FormItem>
+            
+            <mx:FormItem>
+                <s:Button id="submitButton" enabled="false" 
+                    label="Submit" click="submitForm()"/>
+            </mx:FormItem>
+        </mx:Form>
+        
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/validators/NumberValidatorExample.mxml b/tourdeflexmodules/src/spark/validators/NumberValidatorExample.mxml
new file mode 100644
index 0000000..fec6a1a
--- /dev/null
+++ b/tourdeflexmodules/src/spark/validators/NumberValidatorExample.mxml
@@ -0,0 +1,75 @@
+<?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.events.ValidationResultEvent;			
+          private var vResult:ValidationResultEvent;
+
+          // Event handler to validate and format input.            
+          private function Format():void
+          {
+             vResult = numVal.validate();
+			 if (vResult.type==ValidationResultEvent.VALID) {
+			 
+                formattedNumber.text= numberFormatter.format(inputVal.text);
+             }
+             
+             else {
+                formattedNumber.text= "";
+             }
+          }
+      ]]>      
+    </fx:Script>
+	
+	<fx:Declarations>
+		<mx:NumberFormatter id="numberFormatter" precision="4" useThousandsSeparator="true" useNegativeSign="true"/>
+		
+		<mx:NumberValidator id="numVal" source="{inputVal}" property="text" allowNegative="true" domain="real"/>
+	</fx:Declarations>
+        
+	<s:Panel title="NumberValidator Example" width="100%" height="100%">
+		
+		<s:layout>
+			<s:HorizontalLayout paddingLeft="10" paddingRight="10" 
+								paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+         
+         <mx:Form>
+            <mx:FormItem label="Enter number:">
+                <s:TextInput id="inputVal" text="" width="50%"/>
+            </mx:FormItem>
+
+            <mx:FormItem label="Formatted number (precision=4): ">
+                <s:Label id="formattedNumber" />
+            </mx:FormItem>
+
+            <mx:FormItem>
+                <s:Button label="Validate and Format" click="Format()"/>
+            </mx:FormItem>
+        </mx:Form>
+        
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/validators/RegExpValidatorExample.mxml b/tourdeflexmodules/src/spark/validators/RegExpValidatorExample.mxml
new file mode 100644
index 0000000..d995b17
--- /dev/null
+++ b/tourdeflexmodules/src/spark/validators/RegExpValidatorExample.mxml
@@ -0,0 +1,92 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s: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.events.ValidationResultEvent;
+			import mx.validators.*;
+			
+			// Write the results to the 
+			private function handleResult(eventObj:ValidationResultEvent):void {
+				if (eventObj.type == ValidationResultEvent.VALID)
+				{
+					// For valid events, the results Array contains
+					// RegExpValidationResult objects.
+					var xResult:RegExpValidationResult;
+					reResults.text="x";
+					for (var i:uint = 0; i < eventObj.results.length; i++)
+					{
+						xResult = eventObj.results[i];
+						reResults.text=reResults.text + xResult.matchedIndex + " " + xResult.matchedString;
+					}
+				}
+				else
+				{
+					reResults.text="";			
+				}		
+			}
+		]]>
+	</fx:Script>
+	
+	<fx:Declarations>
+		<mx:RegExpValidator id="regExpV" 
+							source="{regex_text}" property="text" 
+							flags="g" expression="{regex.text}" 
+							valid="handleResult(event)" invalid="handleResult(event)"
+							trigger="{myButton}" triggerEvent="click"/>
+	</fx:Declarations>
+	
+	<s:Panel title="RegExpValidator Example" width="100%" height="100%">
+		
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" 
+							  paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<s:Label width="100%" color="0x323232" text="Instructions:"/>
+		<s:Label width="100%" color="0x323232" text="1. Enter text to search. By default, enter  a string containing the letters ABC in sequence followed by any digit."/>
+		<s:Label width="100%" color="0x323232" text="2. Enter the regular expression. By default, enter ABC\d."/>
+		<s:Label width="100%" color="0x323232" text="3. Click the Button control to trigger the validation."/>
+		<s:Label width="100%" color="0x323232" text="4. The results show the index in the text where the matching pattern begins, and the matching pattern. "/>
+		
+		<mx:Form>
+			<mx:FormItem label="Enter text: ">
+				<s:TextInput id="regex_text" text="xxxxABC4xxx" width="100%"/>
+			</mx:FormItem>
+			
+			<mx:FormItem label="Enter regular expression: ">
+				<s:TextInput id="regex" text="ABC\d" width="100%"/>
+			</mx:FormItem>
+			
+			<mx:FormItem label="Results: ">
+				<s:TextInput id="reResults" width="100%"/>
+			</mx:FormItem>
+			
+			<mx:FormItem >
+				<s:Button id="myButton" label="Validate"/>
+			</mx:FormItem>
+		</mx:Form>
+		
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/validators/SocialSecurityValidatorExample.mxml b/tourdeflexmodules/src/spark/validators/SocialSecurityValidatorExample.mxml
new file mode 100644
index 0000000..d2b5ce8
--- /dev/null
+++ b/tourdeflexmodules/src/spark/validators/SocialSecurityValidatorExample.mxml
@@ -0,0 +1,55 @@
+<?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.controls.Alert;
+		]]>
+	</fx:Script>
+
+	<fx:Declarations>
+		<mx:SocialSecurityValidator source="{ssn}" property="text" 
+									trigger="{myButton}" triggerEvent="click"
+									valid="Alert.show('Validation Succeeded!')"/>
+	</fx:Declarations>
+	
+	<s:Panel title="SocialSecurityValidator Example" width="100%" height="100%">
+		
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" 
+							  paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<mx:Form>
+			<mx:FormItem label="Enter Social Security number: ">
+				<s:TextInput id="ssn" width="100%"/>
+			</mx:FormItem>
+			
+			<mx:FormItem >
+				<s:Button id="myButton" label="Validate" />
+			</mx:FormItem>
+		</mx:Form>
+		
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/validators/StringValidatorExample.mxml b/tourdeflexmodules/src/spark/validators/StringValidatorExample.mxml
new file mode 100644
index 0000000..04ca311
--- /dev/null
+++ b/tourdeflexmodules/src/spark/validators/StringValidatorExample.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">
+	
+	<fx:Script>
+		<![CDATA[
+			import mx.controls.Alert;
+		]]>
+	</fx:Script>
+	
+	<fx:Declarations>
+		<mx:StringValidator source="{fname}" property="text" 
+							tooShortError="This string is shorter than the minimum allowed length of 4. " 
+							tooLongError="This string is longer than the maximum allowed length of 20." 
+							minLength="4" maxLength="20"
+							trigger="{myButton}" triggerEvent="click" 
+							valid="Alert.show('Validation Succeeded!')"/>
+	</fx:Declarations>
+	
+	<s:Panel title="StringValidator Example" width="100%" height="100%">
+		
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" 
+							  paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<mx:Form>               
+			<mx:FormItem label="Enter a name between 4 and 20 characters: ">
+				<s:TextInput id="fname" width="100%"/>
+			</mx:FormItem>
+			
+			<mx:FormItem >
+				<s:Button id="myButton" label="Validate" />
+			</mx:FormItem>
+		</mx:Form>
+		
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/spark/validators/TDFGradientBackgroundSkin.mxml b/tourdeflexmodules/src/spark/validators/TDFGradientBackgroundSkin.mxml
new file mode 100644
index 0000000..fe2a943
--- /dev/null
+++ b/tourdeflexmodules/src/spark/validators/TDFGradientBackgroundSkin.mxml
@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
+			 xmlns:mx="library://ns.adobe.com/flex/mx" 
+			 xmlns:s="library://ns.adobe.com/flex/spark">
+	
+	<fx:Metadata>
+		[HostComponent("spark.components.Application")]
+	</fx:Metadata> 
+	
+	<s:states>
+		<s:State name="normal" />
+		<s:State name="disabled" />
+	</s:states>
+	
+	<s:layout>
+		<s:BasicLayout />
+	</s:layout>
+	
+	<s:Rect id="bg" width="100%" height="100%">
+		<s:fill>
+			<s:LinearGradient rotation="90">
+				<s:entries>
+					<s:GradientEntry color="0x000000" ratio="0.00" />
+					<s:GradientEntry color="0x323232" ratio="1.0" />
+				</s:entries>
+			</s:LinearGradient>    
+		</s:fill>
+	</s:Rect>
+	
+	<s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" />
+</s:SparkSkin>
diff --git a/tourdeflexmodules/src/spark/validators/ZipCodeValidatorExample.mxml b/tourdeflexmodules/src/spark/validators/ZipCodeValidatorExample.mxml
new file mode 100644
index 0000000..5e23066
--- /dev/null
+++ b/tourdeflexmodules/src/spark/validators/ZipCodeValidatorExample.mxml
@@ -0,0 +1,55 @@
+<?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.controls.Alert;
+		]]>
+	</fx:Script>
+
+	<fx:Declarations>
+		<mx:ZipCodeValidator source="{zip}" property="text" 
+							 trigger="{myButton}" triggerEvent="click"  
+							 valid="Alert.show('Validation Succeeded!')"/>
+	</fx:Declarations>
+	
+	<s:Panel title="ZipCodeValidator Example" width="100%" height="100%">
+		
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" 
+							  paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<mx:Form>
+			<mx:FormItem label="Enter a 5 or 9 digit U.S. Zip code: ">
+				<s:TextInput id="zip" width="100%"/>
+			</mx:FormItem>
+			
+			<mx:FormItem >
+				<s:Button id="myButton" label="Validate" />
+			</mx:FormItem>
+		</mx:Form>
+		
+	</s:Panel>
+	
+</s:Module>
diff --git a/tourdeflexmodules/src/swfobject.js b/tourdeflexmodules/src/swfobject.js
new file mode 100644
index 0000000..bf35c07
--- /dev/null
+++ b/tourdeflexmodules/src/swfobject.js
@@ -0,0 +1,777 @@
+/*!	SWFObject v2.2 <http://code.google.com/p/swfobject/> 
+	is released under the MIT License <http://www.opensource.org/licenses/mit-license.php> 
+*/
+
+var swfobject = function() {
+	
+	var UNDEF = "undefined",
+		OBJECT = "object",
+		SHOCKWAVE_FLASH = "Shockwave Flash",
+		SHOCKWAVE_FLASH_AX = "ShockwaveFlash.ShockwaveFlash",
+		FLASH_MIME_TYPE = "application/x-shockwave-flash",
+		EXPRESS_INSTALL_ID = "SWFObjectExprInst",
+		ON_READY_STATE_CHANGE = "onreadystatechange",
+		
+		win = window,
+		doc = document,
+		nav = navigator,
+		
+		plugin = false,
+		domLoadFnArr = [main],
+		regObjArr = [],
+		objIdArr = [],
+		listenersArr = [],
+		storedAltContent,
+		storedAltContentId,
+		storedCallbackFn,
+		storedCallbackObj,
+		isDomLoaded = false,
+		isExpressInstallActive = false,
+		dynamicStylesheet,
+		dynamicStylesheetMedia,
+		autoHideShow = true,
+	
+	/* Centralized function for browser feature detection
+		- User agent string detection is only used when no good alternative is possible
+		- Is executed directly for optimal performance
+	*/	
+	ua = function() {
+		var w3cdom = typeof doc.getElementById != UNDEF && typeof doc.getElementsByTagName != UNDEF && typeof doc.createElement != UNDEF,
+			u = nav.userAgent.toLowerCase(),
+			p = nav.platform.toLowerCase(),
+			windows = p ? /win/.test(p) : /win/.test(u),
+			mac = p ? /mac/.test(p) : /mac/.test(u),
+			webkit = /webkit/.test(u) ? parseFloat(u.replace(/^.*webkit\/(\d+(\.\d+)?).*$/, "$1")) : false, // returns either the webkit version or false if not webkit
+			ie = !+"\v1", // feature detection based on Andrea Giammarchi's solution: http://webreflection.blogspot.com/2009/01/32-bytes-to-know-if-your-browser-is-ie.html
+			playerVersion = [0,0,0],
+			d = null;
+		if (typeof nav.plugins != UNDEF && typeof nav.plugins[SHOCKWAVE_FLASH] == OBJECT) {
+			d = nav.plugins[SHOCKWAVE_FLASH].description;
+			if (d && !(typeof nav.mimeTypes != UNDEF && nav.mimeTypes[FLASH_MIME_TYPE] && !nav.mimeTypes[FLASH_MIME_TYPE].enabledPlugin)) { // navigator.mimeTypes["application/x-shockwave-flash"].enabledPlugin indicates whether plug-ins are enabled or disabled in Safari 3+
+				plugin = true;
+				ie = false; // cascaded feature detection for Internet Explorer
+				d = d.replace(/^.*\s+(\S+\s+\S+$)/, "$1");
+				playerVersion[0] = parseInt(d.replace(/^(.*)\..*$/, "$1"), 10);
+				playerVersion[1] = parseInt(d.replace(/^.*\.(.*)\s.*$/, "$1"), 10);
+				playerVersion[2] = /[a-zA-Z]/.test(d) ? parseInt(d.replace(/^.*[a-zA-Z]+(.*)$/, "$1"), 10) : 0;
+			}
+		}
+		else if (typeof win.ActiveXObject != UNDEF) {
+			try {
+				var a = new ActiveXObject(SHOCKWAVE_FLASH_AX);
+				if (a) { // a will return null when ActiveX is disabled
+					d = a.GetVariable("$version");
+					if (d) {
+						ie = true; // cascaded feature detection for Internet Explorer
+						d = d.split(" ")[1].split(",");
+						playerVersion = [parseInt(d[0], 10), parseInt(d[1], 10), parseInt(d[2], 10)];
+					}
+				}
+			}
+			catch(e) {}
+		}
+		return { w3:w3cdom, pv:playerVersion, wk:webkit, ie:ie, win:windows, mac:mac };
+	}(),
+	
+	/* Cross-browser onDomLoad
+		- Will fire an event as soon as the DOM of a web page is loaded
+		- Internet Explorer workaround based on Diego Perini's solution: http://javascript.nwbox.com/IEContentLoaded/
+		- Regular onload serves as fallback
+	*/ 
+	onDomLoad = function() {
+		if (!ua.w3) { return; }
+		if ((typeof doc.readyState != UNDEF && doc.readyState == "complete") || (typeof doc.readyState == UNDEF && (doc.getElementsByTagName("body")[0] || doc.body))) { // function is fired after onload, e.g. when script is inserted dynamically 
+			callDomLoadFunctions();
+		}
+		if (!isDomLoaded) {
+			if (typeof doc.addEventListener != UNDEF) {
+				doc.addEventListener("DOMContentLoaded", callDomLoadFunctions, false);
+			}		
+			if (ua.ie && ua.win) {
+				doc.attachEvent(ON_READY_STATE_CHANGE, function() {
+					if (doc.readyState == "complete") {
+						doc.detachEvent(ON_READY_STATE_CHANGE, arguments.callee);
+						callDomLoadFunctions();
+					}
+				});
+				if (win == top) { // if not inside an iframe
+					(function(){
+						if (isDomLoaded) { return; }
+						try {
+							doc.documentElement.doScroll("left");
+						}
+						catch(e) {
+							setTimeout(arguments.callee, 0);
+							return;
+						}
+						callDomLoadFunctions();
+					})();
+				}
+			}
+			if (ua.wk) {
+				(function(){
+					if (isDomLoaded) { return; }
+					if (!/loaded|complete/.test(doc.readyState)) {
+						setTimeout(arguments.callee, 0);
+						return;
+					}
+					callDomLoadFunctions();
+				})();
+			}
+			addLoadEvent(callDomLoadFunctions);
+		}
+	}();
+	
+	function callDomLoadFunctions() {
+		if (isDomLoaded) { return; }
+		try { // test if we can really add/remove elements to/from the DOM; we don't want to fire it too early
+			var t = doc.getElementsByTagName("body")[0].appendChild(createElement("span"));
+			t.parentNode.removeChild(t);
+		}
+		catch (e) { return; }
+		isDomLoaded = true;
+		var dl = domLoadFnArr.length;
+		for (var i = 0; i < dl; i++) {
+			domLoadFnArr[i]();
+		}
+	}
+	
+	function addDomLoadEvent(fn) {
+		if (isDomLoaded) {
+			fn();
+		}
+		else { 
+			domLoadFnArr[domLoadFnArr.length] = fn; // Array.push() is only available in IE5.5+
+		}
+	}
+	
+	/* Cross-browser onload
+		- Based on James Edwards' solution: http://brothercake.com/site/resources/scripts/onload/
+		- Will fire an event as soon as a web page including all of its assets are loaded 
+	 */
+	function addLoadEvent(fn) {
+		if (typeof win.addEventListener != UNDEF) {
+			win.addEventListener("load", fn, false);
+		}
+		else if (typeof doc.addEventListener != UNDEF) {
+			doc.addEventListener("load", fn, false);
+		}
+		else if (typeof win.attachEvent != UNDEF) {
+			addListener(win, "onload", fn);
+		}
+		else if (typeof win.onload == "function") {
+			var fnOld = win.onload;
+			win.onload = function() {
+				fnOld();
+				fn();
+			};
+		}
+		else {
+			win.onload = fn;
+		}
+	}
+	
+	/* Main function
+		- Will preferably execute onDomLoad, otherwise onload (as a fallback)
+	*/
+	function main() { 
+		if (plugin) {
+			testPlayerVersion();
+		}
+		else {
+			matchVersions();
+		}
+	}
+	
+	/* Detect the Flash Player version for non-Internet Explorer browsers
+		- Detecting the plug-in version via the object element is more precise than using the plugins collection item's description:
+		  a. Both release and build numbers can be detected
+		  b. Avoid wrong descriptions by corrupt installers provided by Adobe
+		  c. Avoid wrong descriptions by multiple Flash Player entries in the plugin Array, caused by incorrect browser imports
+		- Disadvantage of this method is that it depends on the availability of the DOM, while the plugins collection is immediately available
+	*/
+	function testPlayerVersion() {
+		var b = doc.getElementsByTagName("body")[0];
+		var o = createElement(OBJECT);
+		o.setAttribute("type", FLASH_MIME_TYPE);
+		var t = b.appendChild(o);
+		if (t) {
+			var counter = 0;
+			(function(){
+				if (typeof t.GetVariable != UNDEF) {
+					var d = t.GetVariable("$version");
+					if (d) {
+						d = d.split(" ")[1].split(",");
+						ua.pv = [parseInt(d[0], 10), parseInt(d[1], 10), parseInt(d[2], 10)];
+					}
+				}
+				else if (counter < 10) {
+					counter++;
+					setTimeout(arguments.callee, 10);
+					return;
+				}
+				b.removeChild(o);
+				t = null;
+				matchVersions();
+			})();
+		}
+		else {
+			matchVersions();
+		}
+	}
+	
+	/* Perform Flash Player and SWF version matching; static publishing only
+	*/
+	function matchVersions() {
+		var rl = regObjArr.length;
+		if (rl > 0) {
+			for (var i = 0; i < rl; i++) { // for each registered object element
+				var id = regObjArr[i].id;
+				var cb = regObjArr[i].callbackFn;
+				var cbObj = {success:false, id:id};
+				if (ua.pv[0] > 0) {
+					var obj = getElementById(id);
+					if (obj) {
+						if (hasPlayerVersion(regObjArr[i].swfVersion) && !(ua.wk && ua.wk < 312)) { // Flash Player version >= published SWF version: Houston, we have a match!
+							setVisibility(id, true);
+							if (cb) {
+								cbObj.success = true;
+								cbObj.ref = getObjectById(id);
+								cb(cbObj);
+							}
+						}
+						else if (regObjArr[i].expressInstall && canExpressInstall()) { // show the Adobe Express Install dialog if set by the web page author and if supported
+							var att = {};
+							att.data = regObjArr[i].expressInstall;
+							att.width = obj.getAttribute("width") || "0";
+							att.height = obj.getAttribute("height") || "0";
+							if (obj.getAttribute("class")) { att.styleclass = obj.getAttribute("class"); }
+							if (obj.getAttribute("align")) { att.align = obj.getAttribute("align"); }
+							// parse HTML object param element's name-value pairs
+							var par = {};
+							var p = obj.getElementsByTagName("param");
+							var pl = p.length;
+							for (var j = 0; j < pl; j++) {
+								if (p[j].getAttribute("name").toLowerCase() != "movie") {
+									par[p[j].getAttribute("name")] = p[j].getAttribute("value");
+								}
+							}
+							showExpressInstall(att, par, id, cb);
+						}
+						else { // Flash Player and SWF version mismatch or an older Webkit engine that ignores the HTML object element's nested param elements: display alternative content instead of SWF
+							displayAltContent(obj);
+							if (cb) { cb(cbObj); }
+						}
+					}
+				}
+				else {	// if no Flash Player is installed or the fp version cannot be detected we let the HTML object element do its job (either show a SWF or alternative content)
+					setVisibility(id, true);
+					if (cb) {
+						var o = getObjectById(id); // test whether there is an HTML object element or not
+						if (o && typeof o.SetVariable != UNDEF) { 
+							cbObj.success = true;
+							cbObj.ref = o;
+						}
+						cb(cbObj);
+					}
+				}
+			}
+		}
+	}
+	
+	function getObjectById(objectIdStr) {
+		var r = null;
+		var o = getElementById(objectIdStr);
+		if (o && o.nodeName == "OBJECT") {
+			if (typeof o.SetVariable != UNDEF) {
+				r = o;
+			}
+			else {
+				var n = o.getElementsByTagName(OBJECT)[0];
+				if (n) {
+					r = n;
+				}
+			}
+		}
+		return r;
+	}
+	
+	/* Requirements for Adobe Express Install
+		- only one instance can be active at a time
+		- fp 6.0.65 or higher
+		- Win/Mac OS only
+		- no Webkit engines older than version 312
+	*/
+	function canExpressInstall() {
+		return !isExpressInstallActive && hasPlayerVersion("6.0.65") && (ua.win || ua.mac) && !(ua.wk && ua.wk < 312);
+	}
+	
+	/* Show the Adobe Express Install dialog
+		- Reference: http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=6a253b75
+	*/
+	function showExpressInstall(att, par, replaceElemIdStr, callbackFn) {
+		isExpressInstallActive = true;
+		storedCallbackFn = callbackFn || null;
+		storedCallbackObj = {success:false, id:replaceElemIdStr};
+		var obj = getElementById(replaceElemIdStr);
+		if (obj) {
+			if (obj.nodeName == "OBJECT") { // static publishing
+				storedAltContent = abstractAltContent(obj);
+				storedAltContentId = null;
+			}
+			else { // dynamic publishing
+				storedAltContent = obj;
+				storedAltContentId = replaceElemIdStr;
+			}
+			att.id = EXPRESS_INSTALL_ID;
+			if (typeof att.width == UNDEF || (!/%$/.test(att.width) && parseInt(att.width, 10) < 310)) { att.width = "310"; }
+			if (typeof att.height == UNDEF || (!/%$/.test(att.height) && parseInt(att.height, 10) < 137)) { att.height = "137"; }
+			doc.title = doc.title.slice(0, 47) + " - Flash Player Installation";
+			var pt = ua.ie && ua.win ? "ActiveX" : "PlugIn",
+				fv = "MMredirectURL=" + encodeURI(window.location).toString().replace(/&/g,"%26") + "&MMplayerType=" + pt + "&MMdoctitle=" + doc.title;
+			if (typeof par.flashvars != UNDEF) {
+				par.flashvars += "&" + fv;
+			}
+			else {
+				par.flashvars = fv;
+			}
+			// IE only: when a SWF is loading (AND: not available in cache) wait for the readyState of the object element to become 4 before removing it,
+			// because you cannot properly cancel a loading SWF file without breaking browser load references, also obj.onreadystatechange doesn't work
+			if (ua.ie && ua.win && obj.readyState != 4) {
+				var newObj = createElement("div");
+				replaceElemIdStr += "SWFObjectNew";
+				newObj.setAttribute("id", replaceElemIdStr);
+				obj.parentNode.insertBefore(newObj, obj); // insert placeholder div that will be replaced by the object element that loads expressinstall.swf
+				obj.style.display = "none";
+				(function(){
+					if (obj.readyState == 4) {
+						obj.parentNode.removeChild(obj);
+					}
+					else {
+						setTimeout(arguments.callee, 10);
+					}
+				})();
+			}
+			createSWF(att, par, replaceElemIdStr);
+		}
+	}
+	
+	/* Functions to abstract and display alternative content
+	*/
+	function displayAltContent(obj) {
+		if (ua.ie && ua.win && obj.readyState != 4) {
+			// IE only: when a SWF is loading (AND: not available in cache) wait for the readyState of the object element to become 4 before removing it,
+			// because you cannot properly cancel a loading SWF file without breaking browser load references, also obj.onreadystatechange doesn't work
+			var el = createElement("div");
+			obj.parentNode.insertBefore(el, obj); // insert placeholder div that will be replaced by the alternative content
+			el.parentNode.replaceChild(abstractAltContent(obj), el);
+			obj.style.display = "none";
+			(function(){
+				if (obj.readyState == 4) {
+					obj.parentNode.removeChild(obj);
+				}
+				else {
+					setTimeout(arguments.callee, 10);
+				}
+			})();
+		}
+		else {
+			obj.parentNode.replaceChild(abstractAltContent(obj), obj);
+		}
+	} 
+
+	function abstractAltContent(obj) {
+		var ac = createElement("div");
+		if (ua.win && ua.ie) {
+			ac.innerHTML = obj.innerHTML;
+		}
+		else {
+			var nestedObj = obj.getElementsByTagName(OBJECT)[0];
+			if (nestedObj) {
+				var c = nestedObj.childNodes;
+				if (c) {
+					var cl = c.length;
+					for (var i = 0; i < cl; i++) {
+						if (!(c[i].nodeType == 1 && c[i].nodeName == "PARAM") && !(c[i].nodeType == 8)) {
+							ac.appendChild(c[i].cloneNode(true));
+						}
+					}
+				}
+			}
+		}
+		return ac;
+	}
+	
+	/* Cross-browser dynamic SWF creation
+	*/
+	function createSWF(attObj, parObj, id) {
+		var r, el = getElementById(id);
+		if (ua.wk && ua.wk < 312) { return r; }
+		if (el) {
+			if (typeof attObj.id == UNDEF) { // if no 'id' is defined for the object element, it will inherit the 'id' from the alternative content
+				attObj.id = id;
+			}
+			if (ua.ie && ua.win) { // Internet Explorer + the HTML object element + W3C DOM methods do not combine: fall back to outerHTML
+				var att = "";
+				for (var i in attObj) {
+					if (attObj[i] != Object.prototype[i]) { // filter out prototype additions from other potential libraries
+						if (i.toLowerCase() == "data") {
+							parObj.movie = attObj[i];
+						}
+						else if (i.toLowerCase() == "styleclass") { // 'class' is an ECMA4 reserved keyword
+							att += ' class="' + attObj[i] + '"';
+						}
+						else if (i.toLowerCase() != "classid") {
+							att += ' ' + i + '="' + attObj[i] + '"';
+						}
+					}
+				}
+				var par = "";
+				for (var j in parObj) {
+					if (parObj[j] != Object.prototype[j]) { // filter out prototype additions from other potential libraries
+						par += '<param name="' + j + '" value="' + parObj[j] + '" />';
+					}
+				}
+				el.outerHTML = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"' + att + '>' + par + '</object>';
+				objIdArr[objIdArr.length] = attObj.id; // stored to fix object 'leaks' on unload (dynamic publishing only)
+				r = getElementById(attObj.id);	
+			}
+			else { // well-behaving browsers
+				var o = createElement(OBJECT);
+				o.setAttribute("type", FLASH_MIME_TYPE);
+				for (var m in attObj) {
+					if (attObj[m] != Object.prototype[m]) { // filter out prototype additions from other potential libraries
+						if (m.toLowerCase() == "styleclass") { // 'class' is an ECMA4 reserved keyword
+							o.setAttribute("class", attObj[m]);
+						}
+						else if (m.toLowerCase() != "classid") { // filter out IE specific attribute
+							o.setAttribute(m, attObj[m]);
+						}
+					}
+				}
+				for (var n in parObj) {
+					if (parObj[n] != Object.prototype[n] && n.toLowerCase() != "movie") { // filter out prototype additions from other potential libraries and IE specific param element
+						createObjParam(o, n, parObj[n]);
+					}
+				}
+				el.parentNode.replaceChild(o, el);
+				r = o;
+			}
+		}
+		return r;
+	}
+	
+	function createObjParam(el, pName, pValue) {
+		var p = createElement("param");
+		p.setAttribute("name", pName);	
+		p.setAttribute("value", pValue);
+		el.appendChild(p);
+	}
+	
+	/* Cross-browser SWF removal
+		- Especially needed to safely and completely remove a SWF in Internet Explorer
+	*/
+	function removeSWF(id) {
+		var obj = getElementById(id);
+		if (obj && obj.nodeName == "OBJECT") {
+			if (ua.ie && ua.win) {
+				obj.style.display = "none";
+				(function(){
+					if (obj.readyState == 4) {
+						removeObjectInIE(id);
+					}
+					else {
+						setTimeout(arguments.callee, 10);
+					}
+				})();
+			}
+			else {
+				obj.parentNode.removeChild(obj);
+			}
+		}
+	}
+	
+	function removeObjectInIE(id) {
+		var obj = getElementById(id);
+		if (obj) {
+			for (var i in obj) {
+				if (typeof obj[i] == "function") {
+					obj[i] = null;
+				}
+			}
+			obj.parentNode.removeChild(obj);
+		}
+	}
+	
+	/* Functions to optimize JavaScript compression
+	*/
+	function getElementById(id) {
+		var el = null;
+		try {
+			el = doc.getElementById(id);
+		}
+		catch (e) {}
+		return el;
+	}
+	
+	function createElement(el) {
+		return doc.createElement(el);
+	}
+	
+	/* Updated attachEvent function for Internet Explorer
+		- Stores attachEvent information in an Array, so on unload the detachEvent functions can be called to avoid memory leaks
+	*/	
+	function addListener(target, eventType, fn) {
+		target.attachEvent(eventType, fn);
+		listenersArr[listenersArr.length] = [target, eventType, fn];
+	}
+	
+	/* Flash Player and SWF content version matching
+	*/
+	function hasPlayerVersion(rv) {
+		var pv = ua.pv, v = rv.split(".");
+		v[0] = parseInt(v[0], 10);
+		v[1] = parseInt(v[1], 10) || 0; // supports short notation, e.g. "9" instead of "9.0.0"
+		v[2] = parseInt(v[2], 10) || 0;
+		return (pv[0] > v[0] || (pv[0] == v[0] && pv[1] > v[1]) || (pv[0] == v[0] && pv[1] == v[1] && pv[2] >= v[2])) ? true : false;
+	}
+	
+	/* Cross-browser dynamic CSS creation
+		- Based on Bobby van der Sluis' solution: http://www.bobbyvandersluis.com/articles/dynamicCSS.php
+	*/	
+	function createCSS(sel, decl, media, newStyle) {
+		if (ua.ie && ua.mac) { return; }
+		var h = doc.getElementsByTagName("head")[0];
+		if (!h) { return; } // to also support badly authored HTML pages that lack a head element
+		var m = (media && typeof media == "string") ? media : "screen";
+		if (newStyle) {
+			dynamicStylesheet = null;
+			dynamicStylesheetMedia = null;
+		}
+		if (!dynamicStylesheet || dynamicStylesheetMedia != m) { 
+			// create dynamic stylesheet + get a global reference to it
+			var s = createElement("style");
+			s.setAttribute("type", "text/css");
+			s.setAttribute("media", m);
+			dynamicStylesheet = h.appendChild(s);
+			if (ua.ie && ua.win && typeof doc.styleSheets != UNDEF && doc.styleSheets.length > 0) {
+				dynamicStylesheet = doc.styleSheets[doc.styleSheets.length - 1];
+			}
+			dynamicStylesheetMedia = m;
+		}
+		// add style rule
+		if (ua.ie && ua.win) {
+			if (dynamicStylesheet && typeof dynamicStylesheet.addRule == OBJECT) {
+				dynamicStylesheet.addRule(sel, decl);
+			}
+		}
+		else {
+			if (dynamicStylesheet && typeof doc.createTextNode != UNDEF) {
+				dynamicStylesheet.appendChild(doc.createTextNode(sel + " {" + decl + "}"));
+			}
+		}
+	}
+	
+	function setVisibility(id, isVisible) {
+		if (!autoHideShow) { return; }
+		var v = isVisible ? "visible" : "hidden";
+		if (isDomLoaded && getElementById(id)) {
+			getElementById(id).style.visibility = v;
+		}
+		else {
+			createCSS("#" + id, "visibility:" + v);
+		}
+	}
+
+	/* Filter to avoid XSS attacks
+	*/
+	function urlEncodeIfNecessary(s) {
+		var regex = /[\\\"<>\.;]/;
+		var hasBadChars = regex.exec(s) != null;
+		return hasBadChars && typeof encodeURIComponent != UNDEF ? encodeURIComponent(s) : s;
+	}
+	
+	/* Release memory to avoid memory leaks caused by closures, fix hanging audio/video threads and force open sockets/NetConnections to disconnect (Internet Explorer only)
+	*/
+	var cleanup = function() {
+		if (ua.ie && ua.win) {
+			window.attachEvent("onunload", function() {
+				// remove listeners to avoid memory leaks
+				var ll = listenersArr.length;
+				for (var i = 0; i < ll; i++) {
+					listenersArr[i][0].detachEvent(listenersArr[i][1], listenersArr[i][2]);
+				}
+				// cleanup dynamically embedded objects to fix audio/video threads and force open sockets and NetConnections to disconnect
+				var il = objIdArr.length;
+				for (var j = 0; j < il; j++) {
+					removeSWF(objIdArr[j]);
+				}
+				// cleanup library's main closures to avoid memory leaks
+				for (var k in ua) {
+					ua[k] = null;
+				}
+				ua = null;
+				for (var l in swfobject) {
+					swfobject[l] = null;
+				}
+				swfobject = null;
+			});
+		}
+	}();
+	
+	return {
+		/* Public API
+			- Reference: http://code.google.com/p/swfobject/wiki/documentation
+		*/ 
+		registerObject: function(objectIdStr, swfVersionStr, xiSwfUrlStr, callbackFn) {
+			if (ua.w3 && objectIdStr && swfVersionStr) {
+				var regObj = {};
+				regObj.id = objectIdStr;
+				regObj.swfVersion = swfVersionStr;
+				regObj.expressInstall = xiSwfUrlStr;
+				regObj.callbackFn = callbackFn;
+				regObjArr[regObjArr.length] = regObj;
+				setVisibility(objectIdStr, false);
+			}
+			else if (callbackFn) {
+				callbackFn({success:false, id:objectIdStr});
+			}
+		},
+		
+		getObjectById: function(objectIdStr) {
+			if (ua.w3) {
+				return getObjectById(objectIdStr);
+			}
+		},
+		
+		embedSWF: function(swfUrlStr, replaceElemIdStr, widthStr, heightStr, swfVersionStr, xiSwfUrlStr, flashvarsObj, parObj, attObj, callbackFn) {
+			var callbackObj = {success:false, id:replaceElemIdStr};
+			if (ua.w3 && !(ua.wk && ua.wk < 312) && swfUrlStr && replaceElemIdStr && widthStr && heightStr && swfVersionStr) {
+				setVisibility(replaceElemIdStr, false);
+				addDomLoadEvent(function() {
+					widthStr += ""; // auto-convert to string
+					heightStr += "";
+					var att = {};
+					if (attObj && typeof attObj === OBJECT) {
+						for (var i in attObj) { // copy object to avoid the use of references, because web authors often reuse attObj for multiple SWFs
+							att[i] = attObj[i];
+						}
+					}
+					att.data = swfUrlStr;
+					att.width = widthStr;
+					att.height = heightStr;
+					var par = {}; 
+					if (parObj && typeof parObj === OBJECT) {
+						for (var j in parObj) { // copy object to avoid the use of references, because web authors often reuse parObj for multiple SWFs
+							par[j] = parObj[j];
+						}
+					}
+					if (flashvarsObj && typeof flashvarsObj === OBJECT) {
+						for (var k in flashvarsObj) { // copy object to avoid the use of references, because web authors often reuse flashvarsObj for multiple SWFs
+							if (typeof par.flashvars != UNDEF) {
+								par.flashvars += "&" + k + "=" + flashvarsObj[k];
+							}
+							else {
+								par.flashvars = k + "=" + flashvarsObj[k];
+							}
+						}
+					}
+					if (hasPlayerVersion(swfVersionStr)) { // create SWF
+						var obj = createSWF(att, par, replaceElemIdStr);
+						if (att.id == replaceElemIdStr) {
+							setVisibility(replaceElemIdStr, true);
+						}
+						callbackObj.success = true;
+						callbackObj.ref = obj;
+					}
+					else if (xiSwfUrlStr && canExpressInstall()) { // show Adobe Express Install
+						att.data = xiSwfUrlStr;
+						showExpressInstall(att, par, replaceElemIdStr, callbackFn);
+						return;
+					}
+					else { // show alternative content
+						setVisibility(replaceElemIdStr, true);
+					}
+					if (callbackFn) { callbackFn(callbackObj); }
+				});
+			}
+			else if (callbackFn) { callbackFn(callbackObj);	}
+		},
+		
+		switchOffAutoHideShow: function() {
+			autoHideShow = false;
+		},
+		
+		ua: ua,
+		
+		getFlashPlayerVersion: function() {
+			return { major:ua.pv[0], minor:ua.pv[1], release:ua.pv[2] };
+		},
+		
+		hasFlashPlayerVersion: hasPlayerVersion,
+		
+		createSWF: function(attObj, parObj, replaceElemIdStr) {
+			if (ua.w3) {
+				return createSWF(attObj, parObj, replaceElemIdStr);
+			}
+			else {
+				return undefined;
+			}
+		},
+		
+		showExpressInstall: function(att, par, replaceElemIdStr, callbackFn) {
+			if (ua.w3 && canExpressInstall()) {
+				showExpressInstall(att, par, replaceElemIdStr, callbackFn);
+			}
+		},
+		
+		removeSWF: function(objElemIdStr) {
+			if (ua.w3) {
+				removeSWF(objElemIdStr);
+			}
+		},
+		
+		createCSS: function(selStr, declStr, mediaStr, newStyleBoolean) {
+			if (ua.w3) {
+				createCSS(selStr, declStr, mediaStr, newStyleBoolean);
+			}
+		},
+		
+		addDomLoadEvent: addDomLoadEvent,
+		
+		addLoadEvent: addLoadEvent,
+		
+		getQueryParamValue: function(param) {
+			var q = doc.location.search || doc.location.hash;
+			if (q) {
+				if (/\?/.test(q)) { q = q.split("?")[1]; } // strip question mark
+				if (param == null) {
+					return urlEncodeIfNecessary(q);
+				}
+				var pairs = q.split("&");
+				for (var i = 0; i < pairs.length; i++) {
+					if (pairs[i].substring(0, pairs[i].indexOf("=")) == param) {
+						return urlEncodeIfNecessary(pairs[i].substring((pairs[i].indexOf("=") + 1)));
+					}
+				}
+			}
+			return "";
+		},
+		
+		// For internal usage only
+		expressInstallCallback: function() {
+			if (isExpressInstallActive) {
+				var obj = getElementById(EXPRESS_INSTALL_ID);
+				if (obj && storedAltContent) {
+					obj.parentNode.replaceChild(storedAltContent, obj);
+					if (storedAltContentId) {
+						setVisibility(storedAltContentId, true);
+						if (ua.ie && ua.win) { storedAltContent.style.display = "block"; }
+					}
+					if (storedCallbackFn) { storedCallbackFn(storedCallbackObj); }
+				}
+				isExpressInstallActive = false;
+			} 
+		}
+	};
+}();
diff --git a/tourdeflexmodules/src/viewsource.mxml b/tourdeflexmodules/src/viewsource.mxml
new file mode 100755
index 0000000..82dd971
--- /dev/null
+++ b/tourdeflexmodules/src/viewsource.mxml
@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+      contributor license agreements.  See the NOTICE file distributed with
+      this work for additional information regarding copyright ownership.
+      The ASF licenses this file to You under the Apache License, Version 2.0
+      (the "License"); you may not use this file except in compliance with
+      the License.  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+      Unless required by applicable law or agreed to in writing, software
+      distributed under the License is distributed on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      See the License for the specific language governing permissions and
+      limitations under the License.
+  -->
+
+<mx:VBox xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
+		 usePreloader="false" paddingTop="0" paddingBottom="0" paddingLeft="0" paddingRight="0">
+
+	<fx:Script>
+		<![CDATA[		
+			
+			public function loadSource(appUrl:String, srcUrl:String):void
+			{
+				// delete all previously loaded source
+				tn.removeAllChildren();
+				
+				var tabs:Array = new Array();
+				if (appUrl != null && appUrl != "")
+				{
+					var files:Array = new Array();
+					// the first file shown will be the mxml source
+					if (appUrl.indexOf(".mxml") >= 0 || appUrl.indexOf(".as") >= 0) {
+						files[0] = appUrl;
+					}
+					else if (appUrl.indexOf(".swf") == -1) {
+						files[0] = appUrl + ".mxml";
+					}
+					
+					if (srcUrl != null && srcUrl != "")
+					{
+						// other source files are shown in the subsequence tabs
+						var otherSrc:Array = srcUrl.split("&");
+						files = files.concat(otherSrc);
+					}
+
+	        		for (var i:int = 0; i < files.length ; i++)
+    	    		{
+						tabs[i] = new SourceTab();
+						tn.addChild(tabs[i]);
+						tabs[i].source = files[i];
+						tabs[i].app = appUrl;
+    	    		}
+				}
+			}
+			
+						
+			public function thirdPartyWarning():void
+			{
+				tn.removeAllChildren();
+				tn.addChild(new ThirdPartyTab());
+			}
+		]]>
+	</fx:Script>
+
+	<mx:TabNavigator id="tn" width="100%" height="100%" paddingTop="0" borderStyle="none" />
+
+</mx:VBox>