http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/mx/validators/SimpleValidatorExample.mxml
----------------------------------------------------------------------
diff --git 
a/TourDeFlex/TourDeFlex3/src/mx/validators/SimpleValidatorExample.mxml 
b/TourDeFlex/TourDeFlex3/src/mx/validators/SimpleValidatorExample.mxml
new file mode 100755
index 0000000..120574e
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/mx/validators/SimpleValidatorExample.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 Validator class. -->
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; 
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>
+
+    <!-- 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" width="100%" height="100%" 
+            paddingTop="5" paddingLeft="5" paddingRight="5" paddingBottom="5">
+
+        <mx:Form>
+            <mx:Text width="100%" color="blue"
+                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:Application>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/mx/validators/SocialSecurityValidatorExample.mxml
----------------------------------------------------------------------
diff --git 
a/TourDeFlex/TourDeFlex3/src/mx/validators/SocialSecurityValidatorExample.mxml 
b/TourDeFlex/TourDeFlex3/src/mx/validators/SocialSecurityValidatorExample.mxml
new file mode 100755
index 0000000..92cd7cf
--- /dev/null
+++ 
b/TourDeFlex/TourDeFlex3/src/mx/validators/SocialSecurityValidatorExample.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.
+  -->
+
+<!-- Simple example to demonstrate SocialSecurityValidator. -->
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; 
xmlns:mx="library://ns.adobe.com/flex/mx">
+
+    <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" width="75%" height="75%" 
+        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
+        
+        <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:Application>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/mx/validators/StringValidatorExample.mxml
----------------------------------------------------------------------
diff --git 
a/TourDeFlex/TourDeFlex3/src/mx/validators/StringValidatorExample.mxml 
b/TourDeFlex/TourDeFlex3/src/mx/validators/StringValidatorExample.mxml
new file mode 100755
index 0000000..6e0e655
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/mx/validators/StringValidatorExample.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 StringValidator. -->
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; 
xmlns:mx="library://ns.adobe.com/flex/mx">
+
+    <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" width="75%" height="75%" 
+        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
+
+            <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:Application>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/mx/validators/ZipCodeValidatorExample.mxml
----------------------------------------------------------------------
diff --git 
a/TourDeFlex/TourDeFlex3/src/mx/validators/ZipCodeValidatorExample.mxml 
b/TourDeFlex/TourDeFlex3/src/mx/validators/ZipCodeValidatorExample.mxml
new file mode 100755
index 0000000..b5375ef
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/mx/validators/ZipCodeValidatorExample.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.
+  -->
+
+<!-- Simple example to demonstrate the ZipCodeValidator. -->
+<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; 
xmlns:mx="library://ns.adobe.com/flex/mx">
+
+    <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" width="75%" height="75%" 
+        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
+
+        <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:Application>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/charts/AreaChartExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/charts/AreaChartExample.mxml 
b/TourDeFlex/TourDeFlex3/src/spark/charts/AreaChartExample.mxml
new file mode 100644
index 0000000..f504b6c
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/charts/AreaChartExample.mxml
@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009";  
+                          xmlns:s="library://ns.adobe.com/flex/spark" 
+                          xmlns:mx="library://ns.adobe.com/flex/mx" 
+                          skinClass="TDFGradientBackgroundSkin">
+       
+       <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:layout>
+               <s:HorizontalLayout verticalAlign="middle" 
horizontalAlign="center" />
+       </s:layout>
+       
+       <s:Panel title="AreaChart Control" width="600" height="100%"
+                        color="0x000000" 
+                        borderAlpha="0.15">
+               
+               <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:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/charts/BarChartExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/charts/BarChartExample.mxml 
b/TourDeFlex/TourDeFlex3/src/spark/charts/BarChartExample.mxml
new file mode 100644
index 0000000..554ce88
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/charts/BarChartExample.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:Application xmlns:fx="http://ns.adobe.com/mxml/2009";  
+                          xmlns:s="library://ns.adobe.com/flex/spark" 
+                          xmlns:mx="library://ns.adobe.com/flex/mx" 
+                          skinClass="TDFGradientBackgroundSkin">
+       
+       <fx:Script>
+        <![CDATA[
+          
+        import mx.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:layout>
+               <s:HorizontalLayout verticalAlign="middle" 
horizontalAlign="center" />
+       </s:layout>
+    
+       <s:Panel title="BarChart Control" width="600" height="100%"
+                        color="0x000000" 
+                        borderAlpha="0.15">
+               
+               <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:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/charts/BubbleChartExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/charts/BubbleChartExample.mxml 
b/TourDeFlex/TourDeFlex3/src/spark/charts/BubbleChartExample.mxml
new file mode 100644
index 0000000..365df88
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/charts/BubbleChartExample.mxml
@@ -0,0 +1,73 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009";  
+                          xmlns:s="library://ns.adobe.com/flex/spark" 
+                          xmlns:mx="library://ns.adobe.com/flex/mx" 
+                          skinClass="TDFGradientBackgroundSkin">
+       
+       <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:layout>
+               <s:HorizontalLayout verticalAlign="middle" 
horizontalAlign="center" />
+       </s:layout>
+       
+       <s:Panel title="BubbleChart Control" width="600" height="100%"
+                        color="0x000000" 
+                        borderAlpha="0.15">
+               
+               <s:layout>
+                       <s:HorizontalLayout horizontalAlign="center" 
+                                                         paddingLeft="10" 
paddingRight="10" 
+                                                         paddingTop="10" 
paddingBottom="10"/>
+               </s:layout>
+               
+               <mx: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:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/charts/CandleStickChartExample.mxml
----------------------------------------------------------------------
diff --git 
a/TourDeFlex/TourDeFlex3/src/spark/charts/CandleStickChartExample.mxml 
b/TourDeFlex/TourDeFlex3/src/spark/charts/CandleStickChartExample.mxml
new file mode 100644
index 0000000..b39be2e
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/charts/CandleStickChartExample.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:Application xmlns:fx="http://ns.adobe.com/mxml/2009";  
+                          xmlns:s="library://ns.adobe.com/flex/spark" 
+                          xmlns:mx="library://ns.adobe.com/flex/mx" 
+                          skinClass="TDFGradientBackgroundSkin">
+       
+        <fx:Script>
+        <![CDATA[
+          
+        import mx.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:layout>
+               <s:HorizontalLayout verticalAlign="middle" 
horizontalAlign="center" />
+       </s:layout>
+    
+       <s:Panel title="CandlestickChart Control" width="600" height="100%"
+                        color="0x000000" 
+                        borderAlpha="0.15">
+               
+               <s:layout>
+                       <s:HorizontalLayout horizontalAlign="center" 
+                                                               
paddingLeft="10" paddingRight="10" 
+                                                               paddingTop="10" 
paddingBottom="10"/>
+               </s:layout>
+         
+         <mx:CandlestickChart id="candlestickchart" height="100%" 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:Application>

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

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/charts/HLOCChartExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/charts/HLOCChartExample.mxml 
b/TourDeFlex/TourDeFlex3/src/spark/charts/HLOCChartExample.mxml
new file mode 100644
index 0000000..73fe34d
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/charts/HLOCChartExample.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:Application xmlns:fx="http://ns.adobe.com/mxml/2009";  
+                          xmlns:s="library://ns.adobe.com/flex/spark" 
+                          xmlns:mx="library://ns.adobe.com/flex/mx" 
+                          skinClass="TDFGradientBackgroundSkin">
+       
+       <fx:Script>
+               <![CDATA[
+                       
+                       import mx.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:layout>
+               <s:HorizontalLayout verticalAlign="middle" 
horizontalAlign="center" />
+       </s:layout>
+       
+       <s:Panel title="HLOCChart Control" width="600" height="100%"
+                        color="0x000000" 
+                        borderAlpha="0.15">
+               
+               <s:layout>
+                       <s:HorizontalLayout horizontalAlign="center" 
+                                                               
paddingLeft="10" paddingRight="10" 
+                                                               paddingTop="10" 
paddingBottom="10"/>
+               </s:layout>
+               
+               <mx: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:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/charts/LineChartExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/charts/LineChartExample.mxml 
b/TourDeFlex/TourDeFlex3/src/spark/charts/LineChartExample.mxml
new file mode 100644
index 0000000..5f61ee0
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/charts/LineChartExample.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:Application xmlns:fx="http://ns.adobe.com/mxml/2009";  
+                          xmlns:s="library://ns.adobe.com/flex/spark" 
+                          xmlns:mx="library://ns.adobe.com/flex/mx" 
+                          skinClass="TDFGradientBackgroundSkin">
+       
+       <fx:Script>
+               <![CDATA[
+                       
+                       import mx.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:layout>
+               <s:HorizontalLayout verticalAlign="middle" 
horizontalAlign="center" />
+       </s:layout>
+       
+       <s:Panel title="LineChart Control" width="600" height="100%"
+                        color="0x000000" 
+                        borderAlpha="0.15">
+               
+               <s:layout>
+                       <s:HorizontalLayout horizontalAlign="center" 
+                                                               
paddingLeft="10" paddingRight="10" 
+                                                               paddingTop="10" 
paddingBottom="10"/>
+               </s:layout>
+               
+               <mx: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:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/charts/PieChartExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/charts/PieChartExample.mxml 
b/TourDeFlex/TourDeFlex3/src/spark/charts/PieChartExample.mxml
new file mode 100644
index 0000000..f14e5c9
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/charts/PieChartExample.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:Application xmlns:fx="http://ns.adobe.com/mxml/2009";  
+                          xmlns:s="library://ns.adobe.com/flex/spark" 
+                          xmlns:mx="library://ns.adobe.com/flex/mx" 
+                          skinClass="TDFGradientBackgroundSkin">
+       
+       <fx:Script>
+               <![CDATA[
+                       
+                       import mx.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:layout>
+               <s:HorizontalLayout verticalAlign="middle" 
horizontalAlign="center" />
+       </s:layout>
+       
+       <s:Panel title="PieChart Control" width="600" height="100%"
+                        color="0x000000" 
+                        borderAlpha="0.15">
+               
+               <s:layout>
+                       <s:HorizontalLayout horizontalAlign="center" 
+                                                               
paddingLeft="10" paddingRight="10" 
+                                                               paddingTop="10" 
paddingBottom="10"/>
+               </s:layout>
+               
+               <mx: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:Application>

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

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesInterpolateExample.mxml
----------------------------------------------------------------------
diff --git 
a/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesInterpolateExample.mxml 
b/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesInterpolateExample.mxml
new file mode 100644
index 0000000..554f633
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesInterpolateExample.mxml
@@ -0,0 +1,114 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009";  
+                          xmlns:s="library://ns.adobe.com/flex/spark" 
+                          xmlns:mx="library://ns.adobe.com/flex/mx" 
+                          skinClass="TDFGradientBackgroundSkin">
+       
+       <fx:Script>
+               <![CDATA[
+                       
+                       import mx.collections.ArrayCollection;
+                       
+                       [Bindable]
+                       private var companyAAC:ArrayCollection = new 
ArrayCollection( [
+                               { Date: "25-Jul", Open: 40.75,  High: 40.75, 
Low: 40.24, Close:40.31},
+                               { Date: "26-Jul", Open: 39.98,  High: 40.78, 
Low: 39.97, Close:40.34},
+                               { Date: "27-Jul", Open: 40.38,  High: 40.66, 
Low: 40, Close:40.63},
+                               { Date: "28-Jul", Open: 40.49,  High: 40.99, 
Low: 40.3, Close:40.98},
+                               { Date: "29-Jul", Open: 40.13,  High: 40.4, 
Low: 39.65, Close:39.95},
+                               { Date: "1-Aug", Open: 39.00,  High: 39.50, 
Low: 38.7, Close:38.6}, 
+                               { Date: "2-Aug", Open: 38.68,  High: 39.34, 
Low: 37.75, Close:38.84}, 
+                               { Date: "3-Aug", Open: 38.76,  High: 38.76, 
Low: 38.03, Close:38.12}, 
+                               { Date: "4-Aug", Open: 37.98,  High: 37.98, 
Low: 36.56, Close:36.69},                       
+                               { Date: "5-Aug", Open: 36.61,  High: 37, Low: 
36.48, Close:36.86} ]);
+                       
+                       [Bindable]
+                       private var companyBAC:ArrayCollection = new 
ArrayCollection( [
+                               { Date: "25-Jul", Open: 18.50,  High: 19, Low: 
18.48, Close:18.86},
+                               { Date: "26-Jul", Open: 19.56,  High: 19.98, 
Low: 18.6, Close:18.69},                       
+                               { Date: "27-Jul", Open: 20.81,  High: 20.99, 
Low: 20.03, Close:20.12}, 
+                               { Date: "28-Jul", Open: 20.70,  High: 21.00, 
Low: 19.5, Close:20.84}, 
+                               { Date: "29-Jul", Open: 21.7,  High: 21.79, 
Low: 20.45, Close:20.6}, 
+                               { Date: "1-Aug", Open: 22.45,  High: 22.65, 
Low: 21.65, Close:21.95},
+                               { Date: "2-Aug", Open: 22.56,  High: 22.6, Low: 
22.05, Close:22.98},
+                               { Date: "3-Aug", Open: 22.42,  High: 22.70, 
Low: 22.1, Close:22.63},
+                               { Date: "4-Aug", Open: 21.67,  High: 22.82, 
Low: 21.67, Close:22.34},
+                               { Date: "5-Aug", Open: 22.44,  High: 22.85, 
Low: 22.12, Close:22.31} ]);
+                       
+               ]]>
+       </fx:Script>
+       
+       <s:layout>
+               <s:HorizontalLayout verticalAlign="middle" 
horizontalAlign="center" />
+       </s:layout>
+       
+       <fx:Declarations>
+               <mx:SeriesInterpolate id="interpolateIn" duration="1000"/>
+       </fx:Declarations>
+       
+       <s:Panel title="Interpolate Effect" width="600" height="100%"
+                        color="0x000000" 
+                        borderAlpha="0.15">
+               
+               <s:layout>
+                       <s:HorizontalLayout horizontalAlign="center" 
+                                                               
paddingLeft="10" paddingRight="10" 
+                                                               paddingTop="10" 
paddingBottom="10"/>
+               </s:layout>
+               
+               <mx:CandlestickChart id="candlestickchart" height="100%" 
paddingRight="5" paddingLeft="5" color="0x323232"
+                                                        showDataTips="true" 
dataProvider="{companyAAC}">
+                       
+                       <mx:verticalAxis>
+                               <mx:LinearAxis baseAtZero="false" />
+                       </mx:verticalAxis>
+                       
+                       <mx:horizontalAxis>
+                               <mx:CategoryAxis categoryField="Date" 
title="Date"/>
+                       </mx:horizontalAxis>
+                       
+                       <mx:series>
+                               <mx:CandlestickSeries  
+                                       openField="Open" highField="High" 
+                                       lowField="Low" closeField="Close"
+                                       showDataEffect="{interpolateIn}"/>
+                       </mx:series>
+               </mx:CandlestickChart>
+               
+               
+               <s:BorderContainer color="0x323232" width="30%" 
borderColor="0xDCDCDC" borderStyle="solid" height="100%">
+                       
+                       <s:layout>
+                               <s:VerticalLayout paddingLeft="5" 
paddingRight="0" paddingTop="5" />
+                       </s:layout>
+                       
+                       <s:Label color="0x0050AA" width="100%"
+                                        text="Choose a company to view recent 
stock data."/>
+                       
+                       <s:RadioButton groupName="stocks" label="View Company A"
+                                                  selected="true" 
click="candlestickchart.dataProvider=companyAAC;"/>
+                       <s:RadioButton groupName="stocks" label="View Company B"
+                                                  
click="candlestickchart.dataProvider=companyBAC;"/>
+               </s:BorderContainer>
+               
+       </s:Panel>
+       
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesSlideExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesSlideExample.mxml 
b/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesSlideExample.mxml
new file mode 100644
index 0000000..4d24782
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesSlideExample.mxml
@@ -0,0 +1,116 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009";  
+                          xmlns:s="library://ns.adobe.com/flex/spark" 
+                          xmlns:mx="library://ns.adobe.com/flex/mx" 
+                          skinClass="TDFGradientBackgroundSkin">
+       
+       <fx:Script>
+               <![CDATA[
+                       
+                       import mx.collections.ArrayCollection;
+                       
+                       [Bindable]
+                       private var companyAAC:ArrayCollection = new 
ArrayCollection( [
+                               { Date: "25-Jul", Open: 40.75,  High: 40.75, 
Low: 40.24, Close:40.31},
+                               { Date: "26-Jul", Open: 39.98,  High: 40.78, 
Low: 39.97, Close:40.34},
+                               { Date: "27-Jul", Open: 40.38,  High: 40.66, 
Low: 40, Close:40.63},
+                               { Date: "28-Jul", Open: 40.49,  High: 40.99, 
Low: 40.3, Close:40.98},
+                               { Date: "29-Jul", Open: 40.13,  High: 40.4, 
Low: 39.65, Close:39.95},
+                               { Date: "1-Aug", Open: 39.00,  High: 39.50, 
Low: 38.7, Close:38.6}, 
+                               { Date: "2-Aug", Open: 38.68,  High: 39.34, 
Low: 37.75, Close:38.84}, 
+                               { Date: "3-Aug", Open: 38.76,  High: 38.76, 
Low: 38.03, Close:38.12}, 
+                               { Date: "4-Aug", Open: 37.98,  High: 37.98, 
Low: 36.56, Close:36.69},                       
+                               { Date: "5-Aug", Open: 36.61,  High: 37, Low: 
36.48, Close:36.86} ]);
+                       
+                       [Bindable]
+                       private var companyBAC:ArrayCollection = new 
ArrayCollection( [
+                               { Date: "25-Jul", Open: 18.50,  High: 19, Low: 
18.48, Close:18.86},
+                               { Date: "26-Jul", Open: 19.56,  High: 19.98, 
Low: 18.6, Close:18.69},                       
+                               { Date: "27-Jul", Open: 20.81,  High: 20.99, 
Low: 20.03, Close:20.12}, 
+                               { Date: "28-Jul", Open: 20.70,  High: 21.00, 
Low: 19.5, Close:20.84}, 
+                               { Date: "29-Jul", Open: 21.7,  High: 21.79, 
Low: 20.45, Close:20.6}, 
+                               { Date: "1-Aug", Open: 22.45,  High: 22.65, 
Low: 21.65, Close:21.95},
+                               { Date: "2-Aug", Open: 22.56,  High: 22.6, Low: 
22.05, Close:22.98},
+                               { Date: "3-Aug", Open: 22.42,  High: 22.70, 
Low: 22.1, Close:22.63},
+                               { Date: "4-Aug", Open: 21.67,  High: 22.82, 
Low: 21.67, Close:22.34},
+                               { Date: "5-Aug", Open: 22.44,  High: 22.85, 
Low: 22.12, Close:22.31} ]);
+                       
+               ]]>
+       </fx:Script>
+       
+       <s:layout>
+               <s:HorizontalLayout verticalAlign="middle" 
horizontalAlign="center" />
+       </s:layout>
+       
+       <fx:Declarations>
+               <mx:SeriesSlide id="slideIn" duration="1000" direction="up"/>
+               <mx:SeriesSlide id="slideOut" duration="1000" direction="down"/>
+       </fx:Declarations>
+       
+       
+       <s:Panel title="Slide Effect" width="600" height="100%"
+                        color="0x000000" 
+                        borderAlpha="0.15">
+               
+               <s:layout>
+                       <s:HorizontalLayout horizontalAlign="center" 
+                                                               
paddingLeft="10" paddingRight="10" 
+                                                               paddingTop="10" 
paddingBottom="10"/>
+               </s:layout>
+               
+               <mx:CandlestickChart id="candlestickchart" height="100%" 
paddingRight="5" paddingLeft="5" color="0x323232"
+                                                        showDataTips="true" 
dataProvider="{companyAAC}">
+                       
+                       <mx:verticalAxis>
+                               <mx:LinearAxis baseAtZero="false" />
+                       </mx:verticalAxis>
+                       
+                       <mx:horizontalAxis>
+                               <mx:CategoryAxis categoryField="Date" 
title="Date"/>
+                       </mx:horizontalAxis>
+                       
+                       <mx:series>
+                               <mx:CandlestickSeries  
+                                       openField="Open" highField="High" 
+                                       lowField="Low" closeField="Close"
+                                       showDataEffect="{slideIn}" 
+                                       hideDataEffect="{slideOut}"/>
+                       </mx:series>
+               </mx:CandlestickChart>
+               
+               <s:BorderContainer color="0x323232" width="30%" 
borderColor="0xDCDCDC" borderStyle="solid" height="100%">
+                       
+                       <s:layout>
+                               <s:VerticalLayout paddingLeft="5" 
paddingRight="0" paddingTop="5" />
+                       </s:layout>
+                       
+                       <s:Label color="0x0050AA" width="100%"
+                                        text="Choose a company to view recent 
stock data."/>
+                       
+                       <s:RadioButton groupName="stocks" label="View Company A"
+                                                  selected="true" 
click="candlestickchart.dataProvider=companyAAC;"/>
+                       <s:RadioButton groupName="stocks" label="View Company B"
+                                                  
click="candlestickchart.dataProvider=companyBAC;"/>
+               </s:BorderContainer>
+               
+       </s:Panel>
+       
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesZoomExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesZoomExample.mxml 
b/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesZoomExample.mxml
new file mode 100644
index 0000000..d94c176
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/charts/SeriesZoomExample.mxml
@@ -0,0 +1,115 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009";  
+                          xmlns:s="library://ns.adobe.com/flex/spark" 
+                          xmlns:mx="library://ns.adobe.com/flex/mx" 
+                          skinClass="TDFGradientBackgroundSkin">
+       
+       <fx:Script>
+               <![CDATA[
+                       
+                       import mx.collections.ArrayCollection;
+                       
+                       [Bindable]
+                       private var companyAAC:ArrayCollection = new 
ArrayCollection( [
+                               { Date: "25-Jul", Open: 40.75,  High: 40.75, 
Low: 40.24, Close:40.31},
+                               { Date: "26-Jul", Open: 39.98,  High: 40.78, 
Low: 39.97, Close:40.34},
+                               { Date: "27-Jul", Open: 40.38,  High: 40.66, 
Low: 40, Close:40.63},
+                               { Date: "28-Jul", Open: 40.49,  High: 40.99, 
Low: 40.3, Close:40.98},
+                               { Date: "29-Jul", Open: 40.13,  High: 40.4, 
Low: 39.65, Close:39.95},
+                               { Date: "1-Aug", Open: 39.00,  High: 39.50, 
Low: 38.7, Close:38.6}, 
+                               { Date: "2-Aug", Open: 38.68,  High: 39.34, 
Low: 37.75, Close:38.84}, 
+                               { Date: "3-Aug", Open: 38.76,  High: 38.76, 
Low: 38.03, Close:38.12}, 
+                               { Date: "4-Aug", Open: 37.98,  High: 37.98, 
Low: 36.56, Close:36.69},                       
+                               { Date: "5-Aug", Open: 36.61,  High: 37, Low: 
36.48, Close:36.86} ]);
+                       
+                       [Bindable]
+                       private var companyBAC:ArrayCollection = new 
ArrayCollection( [
+                               { Date: "25-Jul", Open: 18.50,  High: 19, Low: 
18.48, Close:18.86},
+                               { Date: "26-Jul", Open: 19.56,  High: 19.98, 
Low: 18.6, Close:18.69},                       
+                               { Date: "27-Jul", Open: 20.81,  High: 20.99, 
Low: 20.03, Close:20.12}, 
+                               { Date: "28-Jul", Open: 20.70,  High: 21.00, 
Low: 19.5, Close:20.84}, 
+                               { Date: "29-Jul", Open: 21.7,  High: 21.79, 
Low: 20.45, Close:20.6}, 
+                               { Date: "1-Aug", Open: 22.45,  High: 22.65, 
Low: 21.65, Close:21.95},
+                               { Date: "2-Aug", Open: 22.56,  High: 22.6, Low: 
22.05, Close:22.98},
+                               { Date: "3-Aug", Open: 22.42,  High: 22.70, 
Low: 22.1, Close:22.63},
+                               { Date: "4-Aug", Open: 21.67,  High: 22.82, 
Low: 21.67, Close:22.34},
+                               { Date: "5-Aug", Open: 22.44,  High: 22.85, 
Low: 22.12, Close:22.31} ]);
+                       
+               ]]>
+       </fx:Script>
+       
+       <s:layout>
+               <s:HorizontalLayout verticalAlign="middle" 
horizontalAlign="center" />
+       </s:layout>
+       
+       <fx:Declarations>
+               <mx:SeriesZoom id="zoomIn" duration="1000"/>
+               <mx:SeriesZoom id="zoomOut" duration="1000"/>
+       </fx:Declarations>
+       
+       
+       <s:Panel title="Zoom Effect" width="600" height="100%"
+                        color="0x000000" 
+                        borderAlpha="0.15">
+               
+               <s:layout>
+                       <s:HorizontalLayout horizontalAlign="center" 
+                                                               
paddingLeft="10" paddingRight="10" 
+                                                               paddingTop="10" 
paddingBottom="10"/>
+               </s:layout>
+               
+               <mx:CandlestickChart id="candlestickchart" height="100%" 
paddingRight="5" paddingLeft="5" color="0x323232"
+                                                        showDataTips="true" 
dataProvider="{companyAAC}">
+                       
+                       <mx:verticalAxis>
+                               <mx:LinearAxis baseAtZero="false" />
+                       </mx:verticalAxis>
+                       
+                       <mx:horizontalAxis>
+                               <mx:CategoryAxis categoryField="Date" 
title="Date"/>
+                       </mx:horizontalAxis>
+                       
+                       <mx:series>
+                               <mx:CandlestickSeries  
+                                       openField="Open" highField="High" 
+                                       lowField="Low" closeField="Close"
+                                       showDataEffect="{zoomIn}" 
+                                       hideDataEffect="{zoomOut}"/>
+                       </mx:series>
+               </mx:CandlestickChart>
+               
+               <s:BorderContainer color="0x323232" width="30%" 
borderColor="0xDCDCDC" borderStyle="solid" height="100%">
+                       <s:layout>
+                               <s:VerticalLayout paddingLeft="5" 
paddingRight="0" paddingTop="5" />
+                       </s:layout>
+                       
+                       <s:Label color="0x0050AA" width="100%"
+                                        text="Choose a company to view recent 
stock data."/>
+                       
+                       <s:RadioButton groupName="stocks" label="View Company A"
+                                                  selected="true" 
click="candlestickchart.dataProvider=companyAAC;"/>
+                       <s:RadioButton groupName="stocks" label="View Company B"
+                                                  
click="candlestickchart.dataProvider=companyBAC;"/>
+               </s:BorderContainer>
+               
+       </s:Panel>
+</s:Application>
+

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/charts/TDFGradientBackgroundSkin.mxml
----------------------------------------------------------------------
diff --git 
a/TourDeFlex/TourDeFlex3/src/spark/charts/TDFGradientBackgroundSkin.mxml 
b/TourDeFlex/TourDeFlex3/src/spark/charts/TDFGradientBackgroundSkin.mxml
new file mode 100644
index 0000000..553aee3
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/charts/TDFGradientBackgroundSkin.mxml
@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"; 
+                        xmlns:mx="library://ns.adobe.com/flex/mx" 
+                        xmlns:s="library://ns.adobe.com/flex/spark">
+       
+       <fx:Metadata>
+               [HostComponent("spark.components.Application")]
+       </fx:Metadata> 
+       
+       <s:states>
+               <s:State name="normal" />
+               <s:State name="disabled" />
+       </s:states>
+       
+       <s:layout>
+               <s:BasicLayout />
+       </s:layout>
+       
+       <s:Rect id="bg" width="100%" height="100%">
+               <s:fill>
+                       <s:LinearGradient rotation="90">
+                               <s:entries>
+                                       <s:GradientEntry color="0x000000" 
ratio="0.00" />
+                                       <s:GradientEntry color="0x323232" 
ratio="1.0" />
+                               </s:entries>
+                       </s:LinearGradient>    
+               </s:fill>
+       </s:Rect>
+       
+       <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" />
+</s:SparkSkin>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/components/SearchBox.as
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/components/SearchBox.as 
b/TourDeFlex/TourDeFlex3/src/spark/components/SearchBox.as
new file mode 100644
index 0000000..e263c2c
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/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

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/components/SearchBoxEvent.as
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/components/SearchBoxEvent.as 
b/TourDeFlex/TourDeFlex3/src/spark/components/SearchBoxEvent.as
new file mode 100644
index 0000000..28e744f
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/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

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/components/SearchExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/components/SearchExample.mxml 
b/TourDeFlex/TourDeFlex3/src/spark/components/SearchExample.mxml
new file mode 100644
index 0000000..6843f52
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/components/SearchExample.mxml
@@ -0,0 +1,91 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009";  
+                          xmlns:s="library://ns.adobe.com/flex/spark" 
+                          xmlns:mx="library://ns.adobe.com/flex/mx" 
+                          xmlns:local="*"
+                          skinClass="TDFGradientBackgroundSkin">
+       
+       <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:layout>
+               <s:HorizontalLayout verticalAlign="middle" 
horizontalAlign="center" />
+       </s:layout>
+       
+       <s:Panel title="Components Samples"
+                        width="600" height="100%"
+                        color="0x000000" 
+                        borderAlpha="0.15">
+               
+               <s:layout>
+                       <s:HorizontalLayout horizontalAlign="center" 
+                                                               
paddingLeft="10" paddingRight="10" 
+                                                               paddingTop="10" 
paddingBottom="10"/>
+               </s:layout>
+               
+               <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:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/components/TDFGradientBackgroundSkin.mxml
----------------------------------------------------------------------
diff --git 
a/TourDeFlex/TourDeFlex3/src/spark/components/TDFGradientBackgroundSkin.mxml 
b/TourDeFlex/TourDeFlex3/src/spark/components/TDFGradientBackgroundSkin.mxml
new file mode 100644
index 0000000..553aee3
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/components/TDFGradientBackgroundSkin.mxml
@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"; 
+                        xmlns:mx="library://ns.adobe.com/flex/mx" 
+                        xmlns:s="library://ns.adobe.com/flex/spark">
+       
+       <fx:Metadata>
+               [HostComponent("spark.components.Application")]
+       </fx:Metadata> 
+       
+       <s:states>
+               <s:State name="normal" />
+               <s:State name="disabled" />
+       </s:states>
+       
+       <s:layout>
+               <s:BasicLayout />
+       </s:layout>
+       
+       <s:Rect id="bg" width="100%" height="100%">
+               <s:fill>
+                       <s:LinearGradient rotation="90">
+                               <s:entries>
+                                       <s:GradientEntry color="0x000000" 
ratio="0.00" />
+                                       <s:GradientEntry color="0x323232" 
ratio="1.0" />
+                               </s:entries>
+                       </s:LinearGradient>    
+               </s:fill>
+       </s:Rect>
+       
+       <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" />
+</s:SparkSkin>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/components/VideoPlayer.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/components/VideoPlayer.mxml 
b/TourDeFlex/TourDeFlex3/src/spark/components/VideoPlayer.mxml
new file mode 100644
index 0000000..b4797ff
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/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>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/components/VideoPlayerExample.mxml
----------------------------------------------------------------------
diff --git 
a/TourDeFlex/TourDeFlex3/src/spark/components/VideoPlayerExample.mxml 
b/TourDeFlex/TourDeFlex3/src/spark/components/VideoPlayerExample.mxml
new file mode 100644
index 0000000..17b7efb
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/components/VideoPlayerExample.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:Application xmlns:fx="http://ns.adobe.com/mxml/2009";  
+                          xmlns:s="library://ns.adobe.com/flex/spark" 
+                          xmlns:mx="library://ns.adobe.com/flex/mx"
+                          xmlns:local="*"
+                          skinClass="TDFGradientBackgroundSkin">
+       
+       <s:layout>
+               <s:HorizontalLayout verticalAlign="middle" 
horizontalAlign="center" />
+       </s:layout>
+       
+       <s:Panel title="Components Samples"
+                        width="600" height="100%"
+                        color="0x000000" 
+                        borderAlpha="0.15">
+               
+               <s:layout>
+                       <s:HorizontalLayout horizontalAlign="center" 
+                                                         paddingLeft="10" 
paddingRight="10" 
+                                                         paddingTop="10" 
paddingBottom="10"/>
+               </s:layout>
+               
+               <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:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/components/VideoPlayerModule.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/components/VideoPlayerModule.mxml 
b/TourDeFlex/TourDeFlex3/src/spark/components/VideoPlayerModule.mxml
new file mode 100644
index 0000000..6ec18a7
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/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>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/components/VideoPlayerModuleLoader.mxml
----------------------------------------------------------------------
diff --git 
a/TourDeFlex/TourDeFlex3/src/spark/components/VideoPlayerModuleLoader.mxml 
b/TourDeFlex/TourDeFlex3/src/spark/components/VideoPlayerModuleLoader.mxml
new file mode 100644
index 0000000..f11dac8
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/components/VideoPlayerModuleLoader.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:Application xmlns:fx="http://ns.adobe.com/mxml/2009";  
+                          xmlns:s="library://ns.adobe.com/flex/spark" 
+                          xmlns:mx="library://ns.adobe.com/flex/mx"  
width="100%" height="100%">
+       
+       <fx: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:Application>

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

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

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

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

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

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/containers/BorderExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/containers/BorderExample.mxml 
b/TourDeFlex/TourDeFlex3/src/spark/containers/BorderExample.mxml
new file mode 100644
index 0000000..c64b094
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/containers/BorderExample.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.
+
+-->
+<!-- 
http://blog.flexexamples.com/2009/09/04/setting-the-corner-radius-on-a-spark-border-container-in-flex-4/
 -->
+<s:Application 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" 
viewSourceURL="srcview/index.html">
+       
+       <s:Panel width="100%" height="100%" title="BorderContainer Sample" 
+                        skinClass="skins.TDFPanelSkin">
+               
+               <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" color="#323232" 
+                                        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:Application>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/containers/Contact.as
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/containers/Contact.as 
b/TourDeFlex/TourDeFlex3/src/spark/containers/Contact.as
new file mode 100644
index 0000000..838a300
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/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

Reply via email to