flex-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From jmcl...@apache.org
Subject [07/51] [partial] Merged TourDeFlex release from develop
Date Sat, 23 Aug 2014 03:25:43 GMT
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/controls/CustomDataGridSkin.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/CustomDataGridSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/CustomDataGridSkin.mxml
new file mode 100644
index 0000000..b3da2b7
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/CustomDataGridSkin.mxml
@@ -0,0 +1,375 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+
+<s:SparkSkin 
+    xmlns:fx="http://ns.adobe.com/mxml/2009" 
+    xmlns:s="library://ns.adobe.com/flex/spark" 
+    xmlns:mx="library://ns.adobe.com/flex/mx"
+    xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
+    alpha.disabled="0.5" minWidth="89" minHeight="84">
+    
+    <fx:Metadata>
+    <![CDATA[
+        /** 
+        * @copy spark.skins.spark.ApplicationSkin#hostComponent
+          @langversion 3.0
+          @playerversion Flash 10
+          @playerversion AIR 1.5
+          @productversion Flex 4
+         */
+        [HostComponent("spark.components.DataGrid")]
+    ]]>
+    </fx:Metadata>
+    
+    <s:states>
+        <s:State name="normal" />
+        <s:State name="disabled" />
+    </s:states>
+    
+    <fx:Declarations>
+        <!--- @private -->        
+        <fx:Component id="alternatingRowColorsBackground">
+            <s:Rect implements="spark.components.gridClasses.IGridVisualElement">
+                <fx:Script>
+                    <![CDATA[
+                        import spark.components.DataGrid;
+                        import spark.components.Grid;
+                        
+                        /**
+                         * @private
+                         */
+                        public function prepareGridVisualElement(grid:Grid, rowIndex:int, columnIndex:int):void
+                        {
+                            const dataGrid:DataGrid = grid.dataGrid;
+                            if (!dataGrid)
+                                return;
+                            
+                            const colors:Array = dataGrid.getStyle("alternatingRowColors");
+                            if (colors && (colors.length > 0))
+                            {
+                                dataGrid.styleManager.getColorNames(colors); // lazily replace color names with ints
+                                rowBackgroundFillColor.color = colors[rowIndex % colors.length];
+                            }
+                            else
+                            {          
+                                // This should be the same as bgFill.color.
+                                rowBackgroundFillColor.color = 0xFFFFFF;
+                            }
+                        }
+                    ]]>
+                </fx:Script>  
+                <s:fill>
+                    <!--- @private -->   
+                    <s:SolidColor id="rowBackgroundFillColor" color="0xFFFFFF"/>
+                </s:fill>
+            </s:Rect>
+        </fx:Component>
+        
+        <!--- @private -->        
+        <fx:Component id="caretIndicator">
+            <s:Rect implements="spark.components.gridClasses.IGridVisualElement">
+                <fx:Script>
+                    <![CDATA[
+                        import spark.components.DataGrid;
+                        import spark.components.Grid;
+                        
+                        /**
+                         * @private
+                         */
+                        public function prepareGridVisualElement(grid:Grid, rowIndex:int, columnIndex:int):void
+                        {
+                            const dataGrid:DataGrid = grid.dataGrid;
+                            if (!dataGrid)
+                                return;
+                            
+                            const color:uint = dataGrid.getStyle("caretColor");
+                            caretIndicatorFill.color = color;
+                        }
+                    ]]>
+                </fx:Script>
+                
+                <s:stroke>
+                    <!--- @private -->
+                    <s:SolidColorStroke id="caretIndicatorFill" color="0x0167FF" weight="1"/>
+                </s:stroke>
+            </s:Rect>
+        </fx:Component>
+        
+        <!--- @private -->
+        <fx:Component id="columnSeparator">
+            <s:Line>
+                <s:stroke>
+                    <s:SolidColorStroke color="0xE6E6E6" weight="1" caps="square"/>
+                </s:stroke>
+            </s:Line>
+        </fx:Component>
+        
+        <!--- Defines the value of the columnSeparator property for the columnHeaderGroup. -->
+        <fx:Component id="headerColumnSeparator">
+            <s:Line>
+                <s:stroke>
+                    <s:SolidColorStroke color="0x696969" weight="1" caps="square"/>
+                </s:stroke>
+            </s:Line>
+        </fx:Component>
+        
+        <!--- Defines the value of the headerRenderer property for the columnHeaderGroup. 
+              The default is spark.skins.spark.DefaultGridHeaderRenderer -->
+        <fx:Component id="headerRenderer">
+            <s:DefaultGridHeaderRenderer />
+        </fx:Component>
+        
+        <!--- @private -->
+        <fx:Component id="hoverIndicator">
+            <s:Rect implements="spark.components.gridClasses.IGridVisualElement">
+                <fx:Script>
+                    <![CDATA[
+                        import spark.components.DataGrid;
+                        import spark.components.Grid;
+                        
+                        /**
+                         * @private
+                         */
+                        public function prepareGridVisualElement(grid:Grid, rowIndex:int, columnIndex:int):void
+                        {
+                            const dataGrid:DataGrid = grid.dataGrid;
+                            if (!dataGrid)
+                                return;
+                            
+                            const color:uint = dataGrid.getStyle("rollOverColor");
+                            hoverIndicatorFill.color = color;
+                        }
+                    ]]>
+                </fx:Script>
+                
+                <s:fill>
+                    <!--- @private -->
+                    <s:SolidColor id="hoverIndicatorFill" color="0xCEDBEF"/>
+                </s:fill>
+            </s:Rect>
+        </fx:Component>
+        
+        <!--- @private -->
+        <fx:Component id="rowSeparator">
+            <s:Line>
+                <s:stroke>
+                    <s:SolidColorStroke color="0xE6E6E6" weight="1" caps="square"/>
+                </s:stroke>
+            </s:Line>
+        </fx:Component>
+        
+        <!--- @private -->
+        <fx:Component id="selectionIndicator">
+            <s:Rect implements="spark.components.gridClasses.IGridVisualElement">
+                <fx:Script>
+                    <![CDATA[
+                        import spark.components.DataGrid;
+                        import spark.components.Grid;
+                        
+                        /**
+                         * @private
+                         */
+                        public function prepareGridVisualElement(grid:Grid, rowIndex:int, columnIndex:int):void
+                        {
+                            const dataGrid:DataGrid = grid.dataGrid;
+                            if (!dataGrid)
+                                return;
+                            
+                            const color:uint = dataGrid.getStyle("selectionColor");
+                            selectionIndicatorFill.color = color;
+                        }
+                    ]]>
+                </fx:Script>
+                
+                <s:fill>
+                    <!--- @private -->
+                    <s:SolidColor id="selectionIndicatorFill" color="0xA8C6EE"/>
+                </s:fill>                
+            </s:Rect>
+        </fx:Component>
+        
+        <!--- @private -->
+        <fx:Component id="editorIndicator">
+            <s:Rect>
+                <s:fill>
+                    <s:SolidColor color="0xFFFFFF"/>
+                </s:fill>                
+            </s:Rect>
+        </fx:Component>                    
+        
+    </fx:Declarations>
+    
+    <fx:Script fb:purpose="styling">
+    <![CDATA[
+        static private const exclusions:Array = ["scroller", "background", "columnHeaderGroup"];
+        static private const contentFill:Array = ["bgFill"];
+        
+        /**
+         * @private
+         */
+        override public function get colorizeExclusions():Array {return exclusions;}
+        
+        /**
+         * @private
+         */
+        override public function get contentItems():Array {return contentFill};
+        
+        /**
+         * @private
+         */
+        override protected function initializationComplete():void
+        {
+            useChromeColor = true;
+            super.initializationComplete();
+        }
+        
+        /**
+         * @private
+         */
+        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
+        {
+            if (getStyle("borderVisible") == true)
+            {
+                border.visible = true;
+                background.left = background.top = background.right = background.bottom = 1;
+                scroller.minViewportInset = 1;
+            }
+            else
+            {
+                border.visible = false;
+                background.left = background.top = background.right = background.bottom = 0;
+                scroller.minViewportInset = 0;
+            }
+            
+            borderStroke.color = getStyle("borderColor");
+            borderStroke.alpha = getStyle("borderAlpha");
+            
+            super.updateDisplayList(unscaledWidth, unscaledHeight);
+        }
+    ]]>
+    </fx:Script>
+    
+    <!-- column header, content -->
+    <s:VGroup horizontalAlign="justify" gap="0" left="0" right="0" top="0" bottom="0">
+        
+        <!--- @private -->
+        <s:GridColumnHeaderGroup id="columnHeaderGroup"
+            paddingLeft="1" paddingTop="1" paddingRight="1" minHeight="21" 
+            columnSeparator="{headerColumnSeparator}"
+            headerRenderer="{headerRenderer}"/>
+
+        <s:Group height="100%">
+            
+            <!--- @private -->
+            <s:Rect id="background" left="1" right="1" top="1" bottom="1" >
+                <s:fill>
+                    <!--- Defines the color of the background. The default color is 0xFFFFFF. -->
+                    <s:SolidColor id="bgFill" color="0xFFFFFF" />
+                </s:fill>
+            </s:Rect>
+            
+            <!-- header separator, scroller and grid -->
+            <s:VGroup horizontalAlign="justify" height="100%" width="100%" gap="-1">
+                <!--- @private -->
+                <s:Line id="headerSeparator">
+                    <s:stroke>
+                        <s:SolidColorStroke color="0x696969" weight="1" caps="square"/>
+                    </s:stroke>
+                </s:Line>          
+                
+                <!--- @private -->
+                <s:Scroller id="scroller" minViewportInset="1" hasFocusableChildren="false" height="100%">
+		            <s:Grid id="grid" itemRenderer="spark.skins.spark.DefaultGridItemRenderer"> 
+		                <!--
+		                <s:itemRenderer>
+		                    <fx:Component>
+		                        <s:GridItemRenderer>
+		                            <s:Label id="labelDisplay" paddingLeft="7" paddingRight="7" paddingBottom="5" paddingTop="9" width="100%" height="100%"/> 
+		                        </s:GridItemRenderer>
+		                    </fx:Component>
+		                </s:itemRenderer>
+		                -->
+		                
+		                <s:caretIndicator>
+		                    <fx:Component>
+		                        <s:Rect>
+		                            <s:stroke>
+		                                <s:SolidColorStroke color="0xff0000" weight="1"/>
+		                            </s:stroke>
+		                        </s:Rect>
+		                    </fx:Component>
+		                </s:caretIndicator>
+		                
+		                <s:selectionIndicator>
+		                    <fx:Component>
+		                        <s:Rect>
+		                            <s:fill>
+		                                <s:SolidColor color="0x00ff00"/>
+		                            </s:fill>                
+		                        </s:Rect>
+		                    </fx:Component>           
+		                </s:selectionIndicator>
+		               
+		                <s:columnSeparator>
+		                    <fx:Component>
+		                        <s:Line>
+		                            <s:stroke>
+		                                <s:SolidColorStroke color="0xE6E6E6" weight="1"/>
+		                            </s:stroke>
+		                        </s:Line>
+		                    </fx:Component>
+		                </s:columnSeparator>
+		                <s:rowSeparator>
+		                    <fx:Component>
+		                        <s:Line>
+		                            <s:stroke>
+		                                <s:SolidColorStroke color="0xE6E6E6" weight="1"/>
+		                            </s:stroke>
+		                        </s:Line>
+		                    </fx:Component>
+		                </s:rowSeparator>
+		                
+		                <s:hoverIndicator>
+		                    <fx:Component>
+		                        <s:Rect>
+		                            <s:fill>
+		                                <s:SolidColor color="0x0000ff"/>
+		                            </s:fill>
+		                        </s:Rect>
+		                    </fx:Component>            
+		                </s:hoverIndicator>
+		            </s:Grid>                  
+                </s:Scroller>
+            </s:VGroup>
+            
+        </s:Group>
+        
+    </s:VGroup>
+    
+    <!-- border -->
+    <!--- @private -->
+    <s:Rect left="0" right="0" top="0" bottom="0" id="border">
+        <s:stroke>
+            <!--- @private -->
+            <s:SolidColorStroke id="borderStroke" weight="1"/>
+        </s:stroke>
+    </s:Rect>    
+
+</s:SparkSkin>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridCustomRendererExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridCustomRendererExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridCustomRendererExample.mxml
new file mode 100644
index 0000000..89bd8b5
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridCustomRendererExample.mxml
@@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
+			   xmlns:s="library://ns.adobe.com/flex/spark" 
+			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
+
+	<fx:Script>
+		import mx.collections.ArrayList;
+	</fx:Script>
+	
+	<fx:Declarations>
+		<s:RemoteObject id="ro" endpoint="http://www.jamesward.com/census2-tests/messagebroker/amf" destination="census"/>
+	</fx:Declarations>
+	
+	<s:applicationComplete>
+		ro.getElements(0, 500);
+	</s:applicationComplete>
+	
+	<s:DataGrid width="100%" height="100%" dataProvider="{new ArrayList(ro.getElements.lastResult)}">
+		<s:columns>
+			<s:ArrayList>
+				<s:GridColumn dataField="id"/>
+				<s:GridColumn dataField="age">
+					<s:itemRenderer>
+						<fx:Component>
+							<s:GridItemRenderer>
+								<s:Rect percentWidth="{data.age}" top="3" bottom="3">
+									<s:fill>
+										<s:SolidColor color="#0000ff"/>
+									</s:fill>
+								</s:Rect>
+							</s:GridItemRenderer>
+						</fx:Component>
+					</s:itemRenderer>
+				</s:GridColumn>
+				<s:GridColumn dataField="classOfWorker"/>
+				<s:GridColumn dataField="education"/>
+				<s:GridColumn dataField="maritalStatus"/>
+				<s:GridColumn dataField="race"/>
+				<s:GridColumn dataField="sex"/>
+			</s:ArrayList>
+		</s:columns>
+	</s:DataGrid>
+	
+</s:Application>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridCustomRendererPrepareExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridCustomRendererPrepareExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridCustomRendererPrepareExample.mxml
new file mode 100644
index 0000000..81134cb
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridCustomRendererPrepareExample.mxml
@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
+			   xmlns:s="library://ns.adobe.com/flex/spark" 
+			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
+
+	<fx:Script>
+		import mx.collections.ArrayList;
+	</fx:Script>
+	
+	<fx:Declarations>
+		<s:RemoteObject id="ro" endpoint="http://www.jamesward.com/census2-tests/messagebroker/amf" destination="census"/>
+	</fx:Declarations>
+	
+	<s:applicationComplete>
+		ro.getElements(0, 500);
+	</s:applicationComplete>
+	
+	<s:DataGrid width="100%" height="100%" dataProvider="{new ArrayList(ro.getElements.lastResult)}">
+		<s:columns>
+			<s:ArrayList>
+				<s:GridColumn dataField="id"/>
+				<s:GridColumn dataField="age">
+					<s:itemRenderer>
+						<fx:Component>
+							<s:GridItemRenderer>
+								<fx:Script>
+									override public function prepare(hasBeenRecycled:Boolean):void
+									{
+										r.percentWidth = data.age;
+									}
+								</fx:Script>
+								<s:Rect id="r" top="3" bottom="3">
+									<s:fill>
+										<s:SolidColor color="#0000ff"/>
+									</s:fill>
+								</s:Rect>
+							</s:GridItemRenderer>
+						</fx:Component>
+					</s:itemRenderer>
+				</s:GridColumn>
+				<s:GridColumn dataField="classOfWorker"/>
+				<s:GridColumn dataField="education"/>
+				<s:GridColumn dataField="maritalStatus"/>
+				<s:GridColumn dataField="race"/>
+				<s:GridColumn dataField="sex"/>
+			</s:ArrayList>
+		</s:columns>
+	</s:DataGrid>
+	
+</s:Application>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridCustomSkinExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridCustomSkinExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridCustomSkinExample.mxml
new file mode 100644
index 0000000..3bf97ff
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridCustomSkinExample.mxml
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
+			   xmlns:s="library://ns.adobe.com/flex/spark">
+	
+	<fx:Script>
+		import mx.collections.ArrayList;
+	</fx:Script>
+	
+	<fx:Declarations>
+		<s:RemoteObject id="ro" endpoint="http://www.jamesward.com/census2-tests/messagebroker/amf" destination="census"/>
+	</fx:Declarations>
+	
+	<s:applicationComplete>
+		ro.getElements(0, 500);
+	</s:applicationComplete>
+	
+	<s:DataGrid width="100%" height="100%"
+				dataProvider="{new ArrayList(ro.getElements.lastResult)}"
+				skinClass="CustomDataGridSkin"/>
+	
+</s:Application>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridExample.mxml
new file mode 100644
index 0000000..b85c824
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridExample.mxml
@@ -0,0 +1,95 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s: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:Declarations>
+		<fx:XMLList id="employees">
+			<employee>
+				<name>Christina Coenraets</name>
+				<phone>555-219-2270</phone>
+				<email>ccoenraets@fictitious.com</email>
+				<active>true</active>
+				<image>images/arrow_icon_sm.png</image>
+			</employee>
+			<employee>
+				<name>Joanne Wall</name>
+				<phone>555-219-2012</phone>
+				<email>jwall@fictitious.com</email>
+				<active>true</active>
+			</employee>
+			<employee>
+				<name>Maurice Smith</name>
+				<phone>555-219-2012</phone>
+				<email>maurice@fictitious.com</email>
+				<active>false</active>
+			</employee>
+			<employee>
+				<name>Mary Jones</name>
+				<phone>555-219-2000</phone>
+				<email>mjones@fictitious.com</email>
+				<active>true</active>
+			</employee>
+		</fx:XMLList>
+	</fx:Declarations>
+	
+	<s:layout>
+		<s:HorizontalLayout horizontalAlign="center" />
+	</s:layout>
+	
+	<s:Panel title="DataGrid Control" 
+			 color="0x000000" 
+			 borderAlpha="0.15" 
+			 width="600">
+		
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<s:Label width="100%" color="0x323232"
+				 text="Select a row in the DataGrid control."/>
+		
+		<mx:DataGrid id="dg" color="0x323232" width="100%" rowCount="3" dataProvider="{employees}">
+			<mx:columns>
+				<mx:DataGridColumn dataField="name" headerText="Name"/>
+				<mx:DataGridColumn dataField="phone" headerText="Phone"/>
+				<mx:DataGridColumn dataField="email" headerText="Email"/>
+			</mx:columns>
+		</mx:DataGrid>
+		
+		<mx:Form color="0x323232" width="100%" height="100%" paddingTop="0" paddingBottom="0"  >
+			
+			<mx:FormItem label="Name" paddingTop="0" paddingBottom="0">
+				<s:Label text="{dg.selectedItem.name}"/>
+			</mx:FormItem>
+			<mx:FormItem label="Email" paddingTop="0" paddingBottom="0">
+				<s:Label text="{dg.selectedItem.email}"/>
+			</mx:FormItem>
+			<mx:FormItem label="Phone" paddingTop="0" paddingBottom="0">
+				<s:Label text="{dg.selectedItem.phone}"/>
+			</mx:FormItem>
+			
+		</mx:Form>
+		
+	</s:Panel>
+	
+</s:Application>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridExample2.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridExample2.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridExample2.mxml
new file mode 100644
index 0000000..d596f9b
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridExample2.mxml
@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+			   xmlns:s="library://ns.adobe.com/flex/spark"
+			   applicationComplete="application1_applicationCompleteHandler(event)">
+	
+	<fx:Script>
+		<![CDATA[
+			import mx.collections.ArrayList;
+			import mx.events.FlexEvent;	
+
+			protected function application1_applicationCompleteHandler(event:FlexEvent):void
+			{
+				ro.getElements(0, 500);
+			}
+		]]>
+	</fx:Script>
+	<s:applicationComplete>
+		Security.loadPolicyFile("http://www.jamesward.com/census2-tests/crossdomain.xml");
+		ro.getElements(0, 500);
+	</s:applicationComplete>
+
+	
+	<fx:Declarations>
+		<s:RemoteObject id="ro" endpoint="http://www.jamesward.com/census2-tests/messagebroker/amf" destination="census"/>
+	</fx:Declarations>
+	
+	<s:DataGrid width="100%" height="100%" dataProvider="{new ArrayList(ro.getElements.lastResult)}"/>
+	
+</s:Application>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridSimpleColumnsExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridSimpleColumnsExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridSimpleColumnsExample.mxml
new file mode 100644
index 0000000..d97b5d6
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridSimpleColumnsExample.mxml
@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
+			   xmlns:s="library://ns.adobe.com/flex/spark">
+	
+	<fx:Script>
+		import mx.collections.ArrayList;
+	</fx:Script>
+	
+	<fx:Declarations>
+		<s:RemoteObject id="ro" endpoint="http://www.jamesward.com/census2-tests/messagebroker/amf" destination="census"/>
+	</fx:Declarations>
+	
+	<s:applicationComplete>
+		ro.getElements(0, 500);
+	</s:applicationComplete>
+	
+	<s:DataGrid width="100%" height="100%" dataProvider="{new ArrayList(ro.getElements.lastResult)}">
+		<s:columns>
+			<s:ArrayList id="columns">
+				<s:GridColumn dataField="id"/>
+				<s:GridColumn dataField="age" minWidth="45"/>
+				<s:GridColumn dataField="classOfWorker" minWidth="100"/>
+				<s:GridColumn dataField="education" minWidth="100"/>
+				<s:GridColumn dataField="maritalStatus" minWidth="100"/>
+				<s:GridColumn dataField="race" minWidth="100"/>
+				<s:GridColumn dataField="sex" minWidth="60"/>
+			</s:ArrayList>
+		</s:columns>
+	</s:DataGrid>
+	
+</s:Application>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridSimpleNoWrapExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridSimpleNoWrapExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridSimpleNoWrapExample.mxml
new file mode 100644
index 0000000..02b5f9e
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridSimpleNoWrapExample.mxml
@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
+			   xmlns:s="library://ns.adobe.com/flex/spark">
+	
+	<fx:Script>
+		import mx.collections.ArrayList;
+	</fx:Script>
+	
+	<fx:Declarations>
+		<s:RemoteObject id="ro" endpoint="http://www.jamesward.com/census2-tests/messagebroker/amf" destination="census" />
+	</fx:Declarations>
+	
+	<s:applicationComplete>
+		ro.getElements(0, 500);
+	</s:applicationComplete>
+	
+	<s:DataGrid width="100%" height="100%" dataProvider="{new ArrayList(ro.getElements.lastResult)}" />
+	
+</s:Application>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridSizingExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridSizingExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridSizingExample.mxml
new file mode 100644
index 0000000..f919ef3
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/DataGridSizingExample.mxml
@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
+			   xmlns:s="library://ns.adobe.com/flex/spark"
+			   xmlns="*">
+
+	<fx:Declarations>
+		<s:RemoteObject id="ro" endpoint="http://www.jamesward.com/census2-tests/messagebroker/amf" destination="census"/>
+		<s:ArrayList id="columns">
+			<s:GridColumn dataField="id" minWidth="30"/>
+			<s:GridColumn dataField="age" minWidth="45"/>
+			<s:GridColumn dataField="classOfWorker" minWidth="100"/>
+			<s:GridColumn dataField="education" minWidth="100"/>
+			<s:GridColumn dataField="maritalStatus" minWidth="100"/>
+			<s:GridColumn dataField="race" minWidth="100"/>
+			<s:GridColumn dataField="sex" minWidth="60"/>
+		</s:ArrayList>
+	</fx:Declarations>
+	
+	<s:applicationComplete>
+		ro.getElements(0, 500);
+	</s:applicationComplete>
+	
+	<s:HGroup width="100%">
+		<s:DataGrid requestedRowCount="5" width="100%" dataProvider="{new ArrayList(ro.getElements.lastResult)}" columns="{columns}" />
+		<s:DataGrid requestedRowCount="7" width="100%" dataProvider="{new ArrayList(ro.getElements.lastResult)}" columns="{columns}" />
+		<s:DataGrid requestedRowCount="9" width="100%" dataProvider="{new ArrayList(ro.getElements.lastResult)}" columns="{columns}" />
+	</s:HGroup>
+	
+</s:Application>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/controls/DataGroupExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/DataGroupExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/DataGroupExample.mxml
new file mode 100644
index 0000000..28c1e46
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/DataGroupExample.mxml
@@ -0,0 +1,134 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<!-- Simple example to demonstrate a DataGroup with a virtualized layout. 
+     Written by Flex 4 Team
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+			   xmlns:mx="library://ns.adobe.com/flex/mx"
+			   xmlns:s="library://ns.adobe.com/flex/spark">
+	
+	<fx:Script>
+		<![CDATA[
+			import mx.collections.ArrayCollection;
+			
+			import skins.TDFPanelSkin;
+			
+			public function generateDataProvider(nItems:int = 10000):ArrayCollection {
+				var ac:ArrayCollection = new ArrayCollection();
+				
+				var sources:Array = ['San Francisco', 'New York', 'Vancouver', 'Denver', 'Hong Kong'];
+				var destinations:Array = ['London', 'Houston', 'Orlando', 'Los Angeles', 'Seattle'];
+				var airlines:Array = ['Green Jet', 'Orange Jet', 'Yellow Jet', 'Blue Jet', 'Red Jet'];
+				var dates:Array = ['March 23-29', 'April 23-29', 'May 1-3', 'May 10-13', 'June 6'];
+				
+				// create a collection of random flights
+				for (var i:int = 0; i < nItems; i++){
+					var temp:Object = new Object();
+					var random:int = Math.random() * 5;
+					
+					temp.start = sources[random];
+					temp.end = destinations[random];
+					temp.details = dates[random] + ', ' + airlines[random] + " (Flight " + i + ")";
+					ac.addItem(temp);
+				}
+				
+				return ac;
+				
+			}
+		]]>
+	</fx:Script>
+	
+	<s:Panel title="DataGroup with Virtual Layout" 
+			 width="100%" height="100%"
+			 skinClass="skins.TDFPanelSkin">
+		
+		<s:Scroller horizontalCenter="0" top="10">
+			<s:DataGroup width="600" height="123" clipAndEnableScrolling="true" dataProvider="{generateDataProvider(9000)}">
+				<s:layout>
+					<s:VerticalLayout gap="1" useVirtualLayout="true" />
+				</s:layout>
+				<s:itemRenderer>
+					<fx:Component>
+						<s:ItemRenderer width="600" height="20">
+							<s:states>
+								<s:State name="normal" />
+								<s:State name="hovered" />
+								<s:State name="selected" />
+							</s:states>
+							
+							<fx:Script>
+								<![CDATA[
+									override public function set data(value:Object):void {
+										super.data = value;
+										
+										if (data == null) // a renderer's data is set to null when it goes out of view
+											return;
+										
+										txtStart.text = data.start;
+										txtEnd.text = data.end;
+										txtDetails.text = data.details;
+									}
+								]]>
+							</fx:Script>
+							
+							<s:transitions>
+								<mx:Transition fromState="normal" toState="hovered">
+									<s:Animate target="{flightPlan}" duration="200">
+										<s:SimpleMotionPath property="width" />
+									</s:Animate>
+								</mx:Transition>
+								<mx:Transition fromState="hovered" toState="normal">
+									<s:Animate target="{flightPlan}" duration="200" >
+										<s:SimpleMotionPath property="width" />
+									</s:Animate>
+								</mx:Transition>
+							</s:transitions>
+							
+							<s:Rect left="0" right="0" top="0" bottom="0" radiusX="5" radiusY="5">
+								<s:fill>
+									<s:SolidColor color="#E1ECF4" />
+								</s:fill>
+							</s:Rect>
+							
+							<s:HGroup verticalAlign="middle">
+								<s:Group id="flightPlan" height="20" width="300" width.hovered="330">
+									<s:Rect left="0" right="0" top="0" bottom="0" radiusX="5" radiusY="5">
+										<s:fill>
+											<s:SolidColor color="#65A3CE" color.hovered="#65A3FF" />
+										</s:fill>
+									</s:Rect>
+									<s:Label id="txtStart" color="#FFFFFF" fontWeight="bold" left="20" verticalCenter="2" />
+									<s:Label id="txtEnd" color="#FFFFFF" fontWeight="bold" right="20" verticalCenter="2" textAlign="right" />
+								</s:Group>
+								<s:Label id="txtDetails" color="#32353f" fontSize="11" />
+							</s:HGroup>
+						</s:ItemRenderer>
+					</fx:Component>
+				</s:itemRenderer>
+			</s:DataGroup>
+		</s:Scroller>	
+		<s:Label width="90%" horizontalCenter="0" color="#323232" bottom="40"
+				 text="Apache Flex DataGroups support virtualization. Virtualization is an optimization for layout and rendering 
+that reduces the footprint and startup time for containers with large numbers of items. This sample shows how
+virtualization can be achieved by only creating enough objects for the items currently being displayed. The 
+useVirtualLayout property should be set on the layout object to achieve virtualization."/>
+	</s:Panel>
+	
+</s:Application>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/controls/DateChooserExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/DateChooserExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/DateChooserExample.mxml
new file mode 100644
index 0000000..f0017f9
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/DateChooserExample.mxml
@@ -0,0 +1,80 @@
+<?xml version="1.0"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<!-- Simple example to demonstrate DateChooser control. -->
+<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[
+		
+			// Event handler function to write the selected
+			// date to the Label control.        
+			private function displayDate(date:Date):void {
+				if (date == null)
+					selection.text = "Date selected: ";
+				else
+					selection.text = "Date selected: " + date.getFullYear().toString() +
+										'/' + (date.getMonth()+1).toString() + '/' + date.getDate();
+			}
+		]]>
+	</fx:Script>
+	
+	<fx:Declarations>
+		<mx:DateFormatter id="df"/>
+	</fx:Declarations>
+	
+	<s:layout>
+		<s:HorizontalLayout horizontalAlign="center" />
+	</s:layout>
+	
+	<s:Panel title="DateChooser Control Example" color="0x000000" 
+			 borderAlpha="0.15" 
+			 width="600">
+		
+		<s:layout>
+			<s:HorizontalLayout horizontalAlign="center" 
+								paddingLeft="10" paddingRight="10" 
+								paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<s:VGroup>
+			<s:Label width="100%" color="0x000000" text="Simple DateChooser Control"/>
+			<mx:DateChooser id="dateChooser1" yearNavigationEnabled="true"  height="145"   
+							change="displayDate(DateChooser(event.target).selectedDate)" color="0x000000"/>
+			<s:Label id="selection" color="0x323232" text="Date selected:"/>
+		</s:VGroup>
+		
+		<s:VGroup>
+			<s:Label width="100%" color="0x000000" text="Disable dates before Oct 31st, 2008"/>
+			<mx:DateChooser id="dateChooser2" yearNavigationEnabled="true" width="175" height="145"
+							disabledRanges="{[ {rangeEnd: new Date(2008, 9, 31)} ]}" color="0x000000"/>
+			<s:Label color="0x323232" text="Date selected: {df.format(dateChooser2.selectedDate)}"/>
+		</s:VGroup>
+		
+		<s:VGroup width="30%">
+			<mx:Text width="100%" color="0x323232" text="Select a date in the DateChooser control."/>
+			<mx:Text width="100%" color="0x323232" text="Select it again while holding down the Control key to clear it."/>
+		</s:VGroup>
+		
+	</s:Panel>    
+	
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/controls/DateFieldExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/DateFieldExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/DateFieldExample.mxml
new file mode 100644
index 0000000..1572d85
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/DateFieldExample.mxml
@@ -0,0 +1,94 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<!-- Simple example to demonstrate the DateField control. -->
+<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[
+			
+			// Event handler for the DateField change event.
+			private function dateChanged(date:Date):void {
+				if (date == null)
+					selection.text = "Date selected: ";                
+				else
+					selection.text = "Date selected: " + date.getFullYear().toString() + 
+						'/' + (date.getMonth()+1).toString() + '/' + date.getDate();
+			}
+		]]>
+	</fx:Script>
+	
+	<fx:Declarations>
+		<mx:DateFormatter id="df"/>
+	</fx:Declarations>
+	
+	<s:layout>
+		<s:HorizontalLayout horizontalAlign="center" />
+	</s:layout>
+	
+	<s:Panel title="DateField Control Example" color="0x000000" 
+			 borderAlpha="0.15" 
+			 width="600">
+		
+		<s:layout>
+			<s:HorizontalLayout horizontalAlign="center" 
+								paddingLeft="10" paddingRight="10" 
+								paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<s:BorderContainer width="50%" borderColor="0xDCDCDC" height="100%" borderStyle="solid">
+			
+			<s:layout>
+				<s:VerticalLayout paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5"/>
+			</s:layout>
+			
+			<s:Label id="selection" color="0x323232" text="Date selected:" />
+			
+			<mx:DateField id="dateField1" yearNavigationEnabled="true"
+						  change="dateChanged(DateField(event.target).selectedDate)" color="0x000000"/>
+			
+			<s:Label color="0x000000" text="Basic DateField:"/>
+			
+			
+			<s:Label width="100%" color="0x323232"
+					 text="Select a date in the DateField control. Select it again while holding down the Control key to clear it."/>
+			
+		</s:BorderContainer>
+		
+		<s:BorderContainer width="50%" borderColor="0xDCDCDC" height="100%" borderStyle="solid">
+			
+			<s:layout>
+				<s:VerticalLayout paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5"/>
+			</s:layout>
+			
+			<s:Label color="0x323232" text="Date selected: {df.format(dateField2.selectedDate)}"/>
+			
+			<mx:DateField id="dateField2" yearNavigationEnabled="true" 
+						  disabledRanges="{[ {rangeEnd: new Date(2008, 9, 31)} ]}" color="0x000000"/>
+			
+			<s:Label color="0x000000" text="Disable dates on or before Oct 31, 2008."/>
+			
+		</s:BorderContainer>
+		
+	</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/controls/DropdownExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/DropdownExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/DropdownExample.mxml
new file mode 100644
index 0000000..abe34ae
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/DropdownExample.mxml
@@ -0,0 +1,90 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES 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"
+			   viewSourceURL="srcview/index.html">
+	
+	<fx:Script>
+		<![CDATA[
+			import spark.events.IndexChangeEvent;
+			import mx.collections.ArrayCollection;
+			
+			[Bindable]
+			public var depts:ArrayCollection = new ArrayCollection([
+				{label:"Electronics", data:1}, 
+				{label:"Home Goods", data:2}, 
+				{label:"Toys", data:3} ]);
+			
+			[Bindable]
+			public var elecItems:ArrayCollection = new ArrayCollection([
+				{label:"Samsung 25in TV", data:299}, 
+				{label:"Panasonic Plasma", data:999}, 
+				{label:"Sony LCD", data:899} ]);
+			
+			[Bindable]
+			public var homeItems:ArrayCollection = new ArrayCollection([
+				{label:"Blendtec Blender", data:399}, 
+				{label:"Hoover Vaccuum", data:599}, 
+				{label:"Black & Decker Toaster", data:99} ]);
+			
+			[Bindable]
+			public var toyItems:ArrayCollection = new ArrayCollection([
+				{label:"Nintendo DS", data:120}, 
+				{label:"Lego's Star Wars Set", data:50}, 
+				{label:"Leapfrog Leapster", data:30} ]);
+			
+			private function handleDepartmentSelected(event:IndexChangeEvent):void
+			{
+				list2.prompt="Select Item";
+				list2.selectedIndex=-1; // reset so prompt shows
+				if (list1.selectedIndex==0)
+					list2.dataProvider=elecItems;
+				else if (list1.selectedIndex==1)
+					list2.dataProvider=homeItems;
+				else if (list1.selectedIndex==2)
+					list2.dataProvider=toyItems;
+				
+			}
+			
+		]]>
+	</fx:Script>
+	
+	<!-- Note: A custom panel skin is used for the Tour de Flex samples and is included in the
+	source tabs for each sample.	-->
+	<s:Panel title="DropDownList Sample" 
+			 width="100%" height="100%" 
+			 skinClass="skins.TDFPanelSkin">
+		<s:VGroup width="100%" height="100%" left="120" top="5">
+			<s:Label text="RJ's Warehouse Price Checker" fontSize="18" color="0x014f9f"/>
+			<s:DropDownList id="list1" width="50%" dataProvider="{depts}" labelField="label" 
+							prompt="Select Category"
+							change="handleDepartmentSelected(event)"/>
+			<s:Label id="text2"/>
+			<s:DropDownList id="list2" width="50%" labelField="label" prompt="None"/>
+			<mx:Spacer height="10"/>
+			<s:Label fontSize="14" color="0x336699" text="The price of item: {list2.selectedItem.label} is: ${list1.selectedItem.data}" verticalAlign="bottom"/>
+		</s:VGroup>
+		<s:Label top="10" right="10" width="250" verticalAlign="justify" color="#323232" 
+					  text="The DropDownList control contains a drop-down list from which the user can select a single value. Its functionality is very similar to that of the SELECT form element in HTML.
+The DropDownList control consists of the anchor button, prompt area, and drop-down-list, Use the anchor button to open and close the drop-down-list. The prompt area displays a prompt String, or the selected item in the drop-down-list."/>
+	</s:Panel>
+	
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/controls/FormExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/FormExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/FormExample.mxml
new file mode 100644
index 0000000..79af492
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/FormExample.mxml
@@ -0,0 +1,92 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s: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:Declarations>
+		<fx:Model id="checkModel">
+			<User>
+				<FirstName>{fname.text}</FirstName>
+				<DOB>{dob.text}</DOB>
+				<Email>{email.text}</Email>
+				<Age>{age.text}</Age>
+				<Zip>{zip.text}</Zip>
+				<Phone>{phone.text}</Phone>
+			</User>
+		</fx:Model>
+		
+		<mx:StringValidator source="{fname}" property="text" minLength="4" maxLength="12"/>
+		<mx:PhoneNumberValidator source="{phone}" property="text"/>
+		<mx:DateValidator source="{dob}" property="text"/>
+		<mx:EmailValidator source="{email}" property="text"/>
+		<mx:NumberValidator source="{age}" property="text" integerError="Enter Integer value"
+							minValue="18" maxValue="100" domain="int"/>
+		<mx:ZipCodeValidator source="{zip}" property="text"/>
+		
+	</fx:Declarations>
+    
+    
+	<s:layout>
+		<s:HorizontalLayout horizontalAlign="center" />
+	</s:layout>
+	
+	<s:Panel title="Form Container: Moving from one form field to another triggers the validator" color="0x000000" 
+			 borderAlpha="0.15" 
+			 width="600">
+		
+		<s:layout>
+			<s:VerticalLayout horizontalAlign="center" 
+							  paddingLeft="10" paddingRight="10" 
+							  paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+
+        <mx:Form width="100%" color="0x323232" paddingTop="0">
+            <mx:FormHeading fontSize="10"  label="Enter values into the form." paddingTop="0" />
+
+            <mx:FormItem label="First name">
+                <s:TextInput id="fname" width="200"/>
+            </mx:FormItem>
+
+            <mx:FormItem label="Date of birth (mm/dd/yyyy)">
+                <s:TextInput id="dob" width="200"/>
+            </mx:FormItem>
+
+            <mx:FormItem label="E-mail address">
+                <s:TextInput id="email" width="200"/>
+            </mx:FormItem>
+
+            <mx:FormItem label="Age">
+                <s:TextInput id="age" width="200"/>
+            </mx:FormItem>
+
+            <mx:FormItem label="Zip">
+                <s:TextInput id="zip" width="200"/>
+            </mx:FormItem>
+
+            <mx:FormItem label="Phone">
+                <s:TextInput id="phone" width="200"/>
+            </mx:FormItem>
+        </mx:Form>
+        
+	</s:Panel>
+	
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/controls/ImageExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/ImageExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/ImageExample.mxml
new file mode 100644
index 0000000..f3473b7
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ImageExample.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[
+			private function smoothImage(ev:Event):void{
+            	//set image smoothing so image looks better when transformed.
+				var bmp:Bitmap = ev.target.content as Bitmap;
+				bmp.smoothing = true;
+			}
+		]]>
+	</fx:Script>
+	
+	<s:layout>
+		<s:HorizontalLayout horizontalAlign="center" />
+	</s:layout>
+	
+	<s:Panel title="Image Samples" color="0x000000" 
+			  borderAlpha="0.15" 
+			  width="600">
+		
+		<s:layout>
+			<s:HorizontalLayout horizontalAlign="center" 
+								paddingLeft="10" paddingRight="10" 
+								paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<!--<mx:VBox width="100%" borderColor="0xACACAC" borderThickness="1" borderStyle="solid" horizontalAlign="center"
+		 	paddingTop="5" paddingRight="5" paddingBottom="5" paddingLeft="5" >-->
+		<s:BorderContainer width="50%" borderColor="0xACACAC" height="100%" borderStyle="solid">
+			
+			<s:layout>
+				<s:VerticalLayout paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5"/>
+			</s:layout>
+			<s:Label color="0x323232" text="Sample of image embeded at compile time." />
+			<mx:Image id="embededImage" width="50%" height="50%" source="@Embed('assets/ApacheFlexLogo.png')" creationComplete="smoothImage(event);"/>
+		</s:BorderContainer>
+		
+		<s:BorderContainer width="50%" borderColor="0xACACAC" height="100%" borderStyle="solid">
+			
+			<s:layout>
+				<s:VerticalLayout paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5"/>
+			</s:layout>
+			<s:Label color="0x323232" text="Sample of image loaded at run-time." />
+			<mx:Image id="loadedImage" width="50%" height="50%" source="assets/ApacheFlexLogo.png" creationComplete="smoothImage(event);"/>
+		</s:BorderContainer>
+	</s:Panel>
+	
+</s:Application>

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

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/controls/LinkBarExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/LinkBarExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/LinkBarExample.mxml
new file mode 100644
index 0000000..eff7901
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/LinkBarExample.mxml
@@ -0,0 +1,89 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s: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">
+	
+	<s:layout>
+		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
+	</s:layout>
+	
+	<s:Panel title="LinkBar Control" width="600" height="100%"
+			 color="0x000000" 
+			 borderAlpha="0.15">
+		
+		<s:layout>
+			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<s:Label width="100%" color="0x323232" textAlign="center"
+				 text="Select a link in the LinkBar control to set the active child of the ViewStack container."/>
+		
+		<mx:LinkBar color="0x0050AA" horizontalAlign="center" width="100%" fontWeight="bold" dataProvider="{myViewStack}" borderColor="0xACACAC" borderStyle="solid"/>
+		
+		<!-- Define the ViewStack and the three child containers -->
+		<mx:ViewStack id="myViewStack" borderStyle="solid" width="100%" height="80%" color="0x323232">
+			
+			<s:NavigatorContent id="search" label="Customer Info" backgroundColor="0xDCDCDC" fontWeight="bold">
+				<s:layout>
+					<s:VerticalLayout horizontalAlign="center" />
+				</s:layout>
+				
+				<s:Label text="Search Panel" width="100%" textAlign="center" paddingTop="10" />
+				<s:HGroup>
+					<s:TextInput id="Searchtxt" width="200" />
+					<s:Button label="search" click="Searchtxt.text=''" />
+				</s:HGroup>
+			</s:NavigatorContent>
+			
+			<s:NavigatorContent id="custInfo" label="Customer Info" backgroundColor="0xDCDCDC" width="100%" height="100%">
+				
+				<s:layout>
+					<s:VerticalLayout horizontalAlign="center" />
+				</s:layout>
+				
+				<s:Label text="Customer Info" width="100%" textAlign="center" paddingTop="10" />
+				<s:HGroup>
+					<s:Label text="Email Address"/>
+					<s:TextInput id="email" width="200"/>
+					<s:Button label="Submit" click="email.text='';" />
+				</s:HGroup>
+				
+			</s:NavigatorContent>
+			
+			<s:NavigatorContent id="accountInfo" label="Account Info" backgroundColor="0xDCDCDC" width="100%" height="100%" fontWeight="bold" >
+				
+				<s:layout>
+					<s:VerticalLayout horizontalAlign="center" />
+				</s:layout>
+				
+				<s:Label text="Account Info" width="100%" textAlign="center" paddingTop="10" />
+				<s:HGroup>
+					<mx:Button label="Purchases" />
+					<mx:Button label="Sales" />
+					<mx:Button label="Reports" />
+				</s:HGroup>
+			</s:NavigatorContent>
+			
+		</mx:ViewStack>
+		
+	</s:Panel>
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/controls/LinkButtonExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/LinkButtonExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/LinkButtonExample.mxml
new file mode 100644
index 0000000..02aaaf8
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/LinkButtonExample.mxml
@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s: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.controls.Alert;
+		]]>
+	</fx:Script>
+	
+	<s:layout>
+		<s:HorizontalLayout horizontalAlign="center" />
+	</s:layout>
+	
+	<s:Panel title="LinkButton Sample" color="0x000000" 
+			 borderAlpha="0.15" 
+			 width="600">
+		
+		<s:layout>
+			<s:VerticalLayout horizontalAlign="center" 
+								paddingLeft="10" paddingRight="10" 
+								paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<s:Label color="0x323232" text="Sample of image embeded at compile time." />
+		<mx:LinkButton label="LinkButton Control" color="0x3380DD" click="{Alert.show('LinkButton Pressed');}"
+			 textDecoration="underline" fontWeight="normal" icon="@Embed('assets/arrow_icon.png')" />
+	</s:Panel>
+	
+</s:Application>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/controls/ListDataPagingExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/ListDataPagingExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/ListDataPagingExample.mxml
new file mode 100644
index 0000000..75aeb35
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ListDataPagingExample.mxml
@@ -0,0 +1,80 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+			   xmlns:s="library://ns.adobe.com/flex/spark"
+			   xmlns:local="*"
+			   initialize="loadSecurity();">
+	
+	<fx:Script>
+		<![CDATA[
+			import mx.collections.IList;
+			import mx.collections.errors.ItemPendingError;
+			import mx.rpc.AsyncResponder;
+			import mx.rpc.AsyncToken;
+			import mx.rpc.events.FaultEvent;
+			import mx.rpc.events.ResultEvent;
+			
+			private function loadSecurity():void 
+			{
+				Security.loadPolicyFile("http://www.jamesward.com/census2-tests/crossdomain.xml");
+			}
+			
+			private function handleCreatePendingItemFunction(index:int, ipe:ItemPendingError):Object {
+				return {};
+			}
+			
+			private function loadItems(list:IList, start:uint, count:uint):void
+			{
+				var asyncToken:AsyncToken = ro.getElements(start, count);
+				asyncToken.addResponder(new AsyncResponder(function result(event:ResultEvent, token:Object = null):void {
+					var v:Vector.<Object> = new Vector.<Object>();
+					for each (var i:Object in event.result)
+					{
+						v.push(i);
+					}
+					pagedList.storeItemsAt(v, token as int);
+				}, function fault(event:FaultEvent, token:Object = null):void {
+					trace(event.fault.faultString);
+				}, start));
+			}
+		]]>
+	</fx:Script>
+	
+	<fx:Declarations>
+		<local:PagedList id="pagedList" pageSize="100" length="100000" loadItemsFunction="loadItems"/>
+		<s:AsyncListView id="asyncListView" list="{pagedList}" createPendingItemFunction="handleCreatePendingItemFunction"/>
+		<s:RemoteObject id="ro" destination="census" endpoint="http://www.jamesward.com/census2-tests/messagebroker/amf"/>
+	</fx:Declarations>
+	
+	<s:DataGrid dataProvider="{asyncListView}" width="100%" height="100%">
+		<s:columns>
+			<s:ArrayList>
+				<s:GridColumn dataField="id"/>
+				<s:GridColumn dataField="age"/>
+				<s:GridColumn dataField="classOfWorker"/>
+				<s:GridColumn dataField="education"/>
+				<s:GridColumn dataField="maritalStatus"/>
+				<s:GridColumn dataField="race"/>
+				<s:GridColumn dataField="sex"/>
+			</s:ArrayList>
+		</s:columns>
+	</s:DataGrid>
+	
+</s:Application>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/controls/ListExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/ListExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/ListExample.mxml
new file mode 100644
index 0000000..805c346
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ListExample.mxml
@@ -0,0 +1,102 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s: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="*" viewSourceURL="srcview/index.html">
+	<fx:Script>
+		<![CDATA[
+			import spark.events.IndexChangeEvent;
+			
+			[Bindable]
+			private var totalPrice:Number = 0.00;
+			
+			protected function itemIndexChangeHandler(event:IndexChangeEvent):void
+			{
+				if (ta.text.length!=0) 
+					ta.text=ta.text+"\n"+myList.selectedItem.name + " $"+myList.selectedItem.price;
+				else ta.text=myList.selectedItem.name+ " $"+myList.selectedItem.price;
+				totalPrice += Number(myList.selectedItem.price);
+			}
+			protected function buyBtn_clickHandler(event:MouseEvent):void
+			{
+				txtResponse.text="Thank you for your order totaling: " + usdFormatter.format(totalPrice) + "\nItems will ship in 3 days.";
+			}
+
+		]]>
+	</fx:Script>
+	<fx:Declarations>
+		<mx:CurrencyFormatter id="usdFormatter" precision="2" currencySymbol="$"
+							  decimalSeparatorFrom="." decimalSeparatorTo="." useNegativeSign="true"
+							  useThousandsSeparator="true" alignSymbol="left"/>
+	</fx:Declarations>
+	<fx:Style>
+		@namespace "library://ns.adobe.com/flex/spark";
+		#vGrp { 
+			color: #000000; 
+			fontFamily: "Arial";
+			fontSize: "12";
+		}
+	</fx:Style>
+		
+	<s:Panel title="List Sample" 
+			 width="100%" height="100%"  
+			 skinClass="skins.TDFPanelSkin">
+		<s:VGroup id="vGrp" horizontalCenter="0" top="3" 
+				  width="80%" height="75%">
+			<s:HGroup verticalAlign="middle">
+				<s:Label text="Select items to add, price will be shown when added:" 
+							  verticalAlign="bottom"/>
+			</s:HGroup>
+			<s:HGroup >
+				<s:List id="myList" height="157" width="160" 
+						itemRenderer="MyListItemRenderer" 
+						change="itemIndexChangeHandler(event)">
+					<s:dataProvider>
+						<s:ArrayCollection>
+							<local:Item name="Backpack" photo="assets/ApacheFlexLogo.png" price="29.99"/>
+							<local:Item name="Boots" photo="assets/ApacheFlexLogo.png" price="69.99"/>
+							<local:Item name="Compass" photo="assets/ApacheFlexLogo.png" price="12.99"/>
+							<local:Item name="Goggles" photo="assets/ApacheFlexLogo.png" price="14.99"/>
+							<local:Item name="Helmet" photo="assets/ApacheFlexLogo.png" price="47.99"/>
+						</s:ArrayCollection>
+					</s:dataProvider>
+				</s:List>
+				<s:TextArea id="ta" width="{myList.width}" height="{myList.height}" 
+							color="0xAE0A0A" fontWeight="bold"/>
+				<s:VGroup>
+					<mx:Spacer height="10"/>
+					<s:Label text="Total of Items selected: {usdFormatter.format(this.totalPrice)}"/> 
+					<s:Button id="buyBtn" horizontalCenter="0" bottom="30" label="Buy Now!" 
+							  fontWeight="bold" 
+							  click="buyBtn_clickHandler(event)"/>
+					<s:Label id="txtResponse"/>
+				</s:VGroup>
+			</s:HGroup>
+		</s:VGroup>
+		<s:Label bottom="15" horizontalCenter="0" width="95%" verticalAlign="justify" color="#323232" 
+					  text="The Spark List control displays a list of data items. Its functionality is
+very similar to that of the SELECT form element in HTML. The user can select one or more items from the list. 
+The List control automatically displays horizontal and vertical scroll bar when the list items do not fit 
+the size of the control."/>
+	</s:Panel>
+	
+	
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/controls/MenuExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/MenuExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/MenuExample.mxml
new file mode 100644
index 0000000..d2e6d08
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/MenuExample.mxml
@@ -0,0 +1,90 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
+			   xmlns:s="library://ns.adobe.com/flex/spark" 
+			   xmlns:mx="library://ns.adobe.com/flex/mx">
+	<fx:Script>
+		<![CDATA[
+			import mx.controls.Menu;
+			import mx.events.FlexEvent;
+			import mx.events.MenuEvent;
+			
+			import skins.TDFPanelSkin;
+			
+			protected var myMenu:Menu; 
+			
+			protected function showHandler(event:MouseEvent):void
+			{
+				myMenu = Menu.createMenu(null, myMenuData, false);
+				myMenu.labelField="@label";
+				myMenu.show(90, 35);
+				myMenu.addEventListener(MenuEvent.CHANGE,onMenuChange);
+			}
+
+			protected function hideHandler(event:MouseEvent):void
+			{
+				myMenu.hide();
+			}
+			
+			protected function onMenuChange(event:MenuEvent):void
+			{
+				lblSelected.text =  event.label;
+			}
+
+		]]>
+	</fx:Script>
+	
+
+	<fx:Declarations>
+		<fx:XML format="e4x" id="myMenuData">
+			<root>
+				<menuitem label="MenuItem A" >
+					<menuitem label="SubMenuItem A-1" enabled="false"/>
+					<menuitem label="SubMenuItem A-2"/>
+				</menuitem>
+				<menuitem label="MenuItem B" type="check" toggled="true"/>
+				<menuitem label="MenuItem C" type="check" toggled="false"/>
+				<menuitem type="separator"/>     
+				<menuitem label="MenuItem D" >
+					<menuitem label="SubMenuItem D-1" type="radio" 
+							  groupName="one"/>
+					<menuitem label="SubMenuItem D-2" type="radio" 
+							  groupName="one" toggled="true"/>
+					<menuitem label="SubMenuItem D-3" type="radio" 
+							  groupName="one"/>
+				</menuitem>
+			</root>
+		</fx:XML>
+	</fx:Declarations>
+	
+	<s:Panel title="Menu Sample" width="100%" height="100%" skinClass="skins.TDFPanelSkin">
+		<s:HGroup bottom="15" horizontalCenter="0" verticalAlign="middle">
+			<s:Button label="Show Menu" click="showHandler(event)" />
+			<s:Button label="Hide Menu" click="hideHandler(event)" />
+			<s:Label text="Menu Item Selected:" fontWeight="bold" fontSize="12" color="0x336699"/>
+			<s:Label id="lblSelected" />
+		</s:HGroup>
+		<s:Label width="220" color="#323232" top="15" right="50"
+				 text="The Menu control is a pop-up control that contains a menu of individually selectable choices. You use ActionScript 
+				 to create a Menu control that pops up in response to a user action, typically as part of an event listener."/>	
+
+	</s:Panel>
+	
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/controls/MyListItemRenderer.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/MyListItemRenderer.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/MyListItemRenderer.mxml
new file mode 100644
index 0000000..73228d6
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/MyListItemRenderer.mxml
@@ -0,0 +1,39 @@
+<!--
+
+Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+-->
+<s:ItemRenderer
+	xmlns:fx="http://ns.adobe.com/mxml/2009"
+	xmlns:s="library://ns.adobe.com/flex/spark"
+	xmlns:mx="library://ns.adobe.com/flex/mx">
+	
+	<s:states>
+		<s:State name="normal"/>
+		<s:State name="hovered"/>
+		<s:State name="selected" />
+	</s:states>
+	
+	<s:layout>
+		<s:VerticalLayout/>
+	</s:layout>
+	
+	<s:HGroup verticalAlign="middle" paddingTop="0" paddingBottom="0">
+		<mx:Image source="{data.photo}" width="50" height="40" alpha.hovered=".5"/>
+		<s:Label text="{data.name}" color.hovered="0x1313cd" color.selected="0x000000" verticalAlign="bottom"/>
+	</s:HGroup>
+	
+</s:ItemRenderer>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/controls/MyTextFlow.xml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/MyTextFlow.xml b/TourDeFlex/TourDeFlex3/src/spark/controls/MyTextFlow.xml
new file mode 100644
index 0000000..8b787ea
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/MyTextFlow.xml
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<!-- http://blog.flexexamples.com/2009/08/11/setting-text-in-a-spark-richtext-control-in-flex-4/ -->
+<TextFlow xmlns="http://ns.adobe.com/textLayout/2008" whiteSpaceCollapse="preserve">
+    <p><span>This is an example of external text being included that is using the </span> <span fontWeight="bold">Text Layout Framework </span> <span> markup.</span></p>
+</TextFlow>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/controls/NumericStepperExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/NumericStepperExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/NumericStepperExample.mxml
new file mode 100644
index 0000000..b4d2667
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/NumericStepperExample.mxml
@@ -0,0 +1,92 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s: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" 
+			   viewSourceURL="srcview/index.html">
+
+	<fx:Script>
+		<![CDATA[
+			protected function clickHandler(event:MouseEvent):void
+			{
+				responseText.text = "Thank you for your purchase of " +this.numStepper.value + " tickets!";
+			}
+		]]>
+	</fx:Script>
+
+	<fx:Style>
+		@namespace "library://ns.adobe.com/flex/spark";
+		@namespace mx "library://ns.adobe.com/flex/mx";
+		#formHead { 
+			fontSize: 18;
+			fontFamily: Arial;
+			fontWeight: bold;
+		}
+		mx|FormItem { 
+			fontSize: 12;
+			fontFamily: Arial;
+			fontWeight: bold;
+		}	
+			
+	</fx:Style>
+	
+	<!-- Note: A custom panel skin is used for the Tour de Flex samples and is included in the
+	source tabs for each sample.	-->
+	<s:Panel title="NumericStepper Sample" 
+			 width="100%" height="100%" 
+			 skinClass="skins.TDFPanelSkin">
+			
+			<s:HGroup left="15" top="10">
+				<s:Label width="250" verticalAlign="justify" color="#323232" 
+						 text="The NumericStepper control allows you to select a number from an
+ordered set. The NumericStepper control consists of a single-line input text field and a pair of arrow buttons
+for stepping through the valid values. You can use the Up Arrow and Down arrow keys to cycle through the values."/>
+				
+				<mx:Form >
+					<mx:FormHeading id="formHead" label="Welcome to Ticket Grabber!"/>
+					<mx:FormItem label="Name:">
+						<s:TextInput id="nameTxt" widthInChars="20"/>
+					</mx:FormItem>
+					<mx:FormItem label="Address:">
+						<s:TextArea widthInChars="20" heightInLines="2"/>
+					</mx:FormItem>
+					<mx:FormItem label="Phone:">
+						<s:TextInput id="phoneTxt" widthInChars="20"/>	
+					</mx:FormItem>
+					<mx:FormItem label="Select # of tickets:">
+						<s:NumericStepper id="numStepper" width="55" 
+										  value="0" snapInterval="2"/>
+					</mx:FormItem>
+					<mx:FormItem>
+						<s:Button label="Buy Now!" click="clickHandler(event)"/>
+					</mx:FormItem>
+					<mx:FormItem>
+						<s:Group>
+							<s:Label id="responseText"/>	
+						</s:Group>
+					</mx:FormItem>
+				</mx:Form>
+			</s:HGroup>
+		
+		
+		</s:Panel>
+
+	
+</s:Application>


Mime
View raw message