You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@flex.apache.org by jm...@apache.org on 2014/08/23 06:45:24 UTC

[17/50] [abbrv] Added more spark examples

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/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/d4e368dc/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/d4e368dc/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/d4e368dc/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/d4e368dc/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/d4e368dc/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/d4e368dc/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/d4e368dc/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/d4e368dc/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/d4e368dc/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/d4e368dc/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/d4e368dc/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/d4e368dc/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>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/controls/OSMFExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/OSMFExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/OSMFExample.mxml
new file mode 100644
index 0000000..16a2c2c
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/OSMFExample.mxml
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+			   xmlns:s="library://ns.adobe.com/flex/spark">
+	
+	<s:VideoPlayer horizontalCenter="0" verticalCenter="0"
+		source="http://mediapm.edgesuite.net/osmf/content/test/manifest-files/dynamic_Streaming.f4m" 
+		autoPlay="true"/>
+	
+</s:Application>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/controls/PagedList.as
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/PagedList.as b/TourDeFlex/TourDeFlex3/src/spark/controls/PagedList.as
new file mode 100644
index 0000000..19e87df
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/PagedList.as
@@ -0,0 +1,510 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package  
+{
+	import flash.events.Event;
+	import flash.events.EventDispatcher;
+	
+	import mx.collections.IList;
+	import mx.collections.errors.ItemPendingError;
+	import mx.events.CollectionEvent;
+	import mx.events.CollectionEventKind;
+	import mx.events.PropertyChangeEvent;
+	import mx.events.PropertyChangeEventKind;
+	import mx.resources.IResourceManager;
+	import mx.resources.ResourceManager;
+	import mx.rpc.IResponder;
+	
+	[Event(name="collectionChange", type="mx.events.CollectionEvent")]
+	
+	/**
+	 *  An IList whose items are fetched asynchronously by a user provided function.   The 
+	 *  loadItemsFunction initiates an asynchronous request for a pageSize block items, typically
+	 *  from a web service.  When the request sucessfully completes, the storeItemsAt() method
+	 *  must be called. If the request fails, then failItemsAt().
+	 * 
+	 *  <p>PagedList divides its <code>length</code> items into <code>pageSize</code> blocks or 
+	 *  "pages".  It tracks which items exist locally, typically because they've been stored with
+	 *  storeItemsAt().  When an item that does not exist locally is requested with getItemAt(),
+	 *  the loadItemsFunction is called and then an IPE is thrown.  When the loadItemsFunction
+	 *  either completes or fails, it must call storeItemsAt() or failItemsAt() which causes
+	 *  the IPE's responders to run and a "replace" CollectionEvent to be dispatched for the 
+	 *  updated page.  The failItemsAt() method resets the corresponding items to undefined, 
+	 *  which means that subsequent calls to getItemAt() will cause an IPE to be thrown.</p>
+	 * 
+	 *  <p>Unlike some other IList implementations, the only method here that can thrown an
+	 *  IPE is getItemAt().   Methods like getItemIndex() and toArray() just report items
+	 *  that aren't local as null.</p>
+	 * 
+	 *  <p>This class is intended to be used as the "list" source for an ASyncListView.</p>
+	 */
+	public class PagedList  extends EventDispatcher implements IList
+	{
+		/**
+		 *  @private
+		 */
+		private static function get resourceManager():IResourceManager
+		{
+			return ResourceManager.getInstance();
+		}
+		
+		/**
+		 *  @private
+		 */    
+		private static function checkItemIndex(index:int, listLength:int):void
+		{
+			if (index < 0 || (index >= listLength)) 
+			{
+				const message:String = resourceManager.getString("collections", "outOfBounds", [ index ]);
+				throw new RangeError(message);
+			}
+		}
+		
+		/**
+		 *  @private
+		 *  The IList's items.
+		 */
+		private const data:Vector.<*> = new Vector.<*>();
+		
+		/**
+		 *  Construct a PagedList with the specified length and pageSize.
+		 */    
+		public function PagedList(length:int=1000, pageSize:int=10)
+		{
+			this.data.length = length;
+			this.pageSize = pageSize;
+			
+			for (var i:int = 0; i < data.length; i++)
+				data[i] = undefined;
+		}
+		
+		//----------------------------------
+		//  loadItemsFunction
+		//---------------------------------- 
+		
+		private var _loadItemsFunction:Function = null;
+		
+		/**
+		 *  The value of this property must be a function that loads a contiguous 
+		 *  block of items and then calls <code>storeItemsAt()</code> or 
+		 *  <code>failItemsAt()</code>.  A loadItemsFunction must be defined as follows:
+		 *  <pre>
+		 *  myLoadItems(list:PagedList, index:int, count:int):void 
+		 *  </pre>
+		 *  
+		 *  <p>Typically the loadItemsFunction will make one or more network requests
+		 *  to retrieve the items.   It must do all of its work asynchronously to avoid
+		 *  blocking the application's GUI.
+		 *  
+		 */
+		public function get loadItemsFunction():Function
+		{
+			return _loadItemsFunction;
+		}
+		
+		/**
+		 *  @private
+		 */
+		public function set loadItemsFunction(value:Function):void
+		{
+			_loadItemsFunction = value;
+		}
+		
+		//----------------------------------
+		//  length
+		//---------------------------------- 
+		
+		[Bindable("collectionChange")]    
+		
+		/**
+		 *  The number of items in the list.
+		 *  
+		 *  <p>The length of the list can be changed directly however the "-1" indeterminate 
+		 *  length value is not supported.</p>
+		 */
+		public function get length():int
+		{
+			return data.length;
+		}
+		
+		/**
+		 *  @private
+		 */
+		public function set length(value:int):void
+		{
+			const oldLength:int = data.length;
+			const newLength:int = value;
+			
+			if (oldLength == newLength)
+				return;
+			
+			var ce:CollectionEvent = null;
+			if (hasEventListener(CollectionEvent.COLLECTION_CHANGE))
+				ce = new CollectionEvent(CollectionEvent.COLLECTION_CHANGE);
+			
+			if (oldLength < newLength)
+			{
+				if (ce)
+				{
+					ce.location = Math.max(oldLength - 1, 0);
+					ce.kind = CollectionEventKind.ADD;
+					const itemsLength:int = newLength - oldLength;
+					for (var i:int = 0; i < itemsLength; i++)
+						ce.items.push(undefined);
+				}
+				
+				data.length = newLength;
+				for (var newIndex:int = Math.max(oldLength - 1, 0); newIndex < newLength; newIndex++)
+					data[newIndex] = undefined;
+			}
+			else // oldLength > newLength
+			{
+				if (ce)
+				{
+					ce.location = Math.max(newLength - 1, 0);
+					ce.kind = CollectionEventKind.REMOVE;
+					for (var oldIndex:int = Math.max(newLength - 1, 0); oldIndex < oldLength; oldIndex++)
+						ce.items.push(data[oldIndex]);
+				}
+				
+				data.length = newLength; 
+			}
+			
+			if (ce)
+				dispatchEvent(ce);
+		}
+		
+		//----------------------------------
+		//  pageSize
+		//---------------------------------- 
+		
+		private var _pageSize:int = 10;
+		
+		/** 
+		 *  Items are loaded in contiguous pageSize blocks.  The value of this property should be greater than  
+		 *  zero, smaller than the PageList's length, and a reasonable working size for the loadItemsFunction.   
+		 */
+		public function get pageSize():int
+		{
+			return _pageSize;
+		}
+		
+		/**
+		 *  @private
+		 */
+		public function set pageSize(value:int):void
+		{
+			_pageSize = value;    
+		}
+		
+		/**
+		 *  Resets the entire list to its initial state.  All local and pending items are 
+		 *  cleared.
+		 */
+		public function clearItems():void
+		{
+			var index:int = 0;
+			for each (var item:Object in data)
+			data[index++] = undefined;
+			
+			if (hasEventListener(CollectionEvent.COLLECTION_CHANGE))
+			{
+				var ce:CollectionEvent = new CollectionEvent(CollectionEvent.COLLECTION_CHANGE);
+				ce.kind = CollectionEventKind.RESET;
+				dispatchEvent(ce);
+			}            
+		}
+		
+		/**
+		 *  @private
+		 */
+		private static function createUpdatePCE(itemIndex:Object, oldValue:Object, newValue:Object):PropertyChangeEvent
+		{
+			const pce:PropertyChangeEvent = new PropertyChangeEvent(PropertyChangeEvent.PROPERTY_CHANGE);
+			pce.kind = PropertyChangeEventKind.UPDATE;
+			pce.property = itemIndex;
+			pce.oldValue = oldValue;
+			pce.newValue = newValue;
+			return pce;
+		}
+		
+		/**
+		 *  @private
+		 */    
+		private static function createCE(kind:String, location:int, item:Object):CollectionEvent
+		{
+			const ce:CollectionEvent = new CollectionEvent(CollectionEvent.COLLECTION_CHANGE);
+			ce.kind = kind;
+			ce.location = location;
+			
+			if (item is Array)
+				ce.items = item as Array;
+			else
+				ce.items.push(item);
+			
+			return ce;
+		}
+		
+		/**
+		 *  This method must be called by the loadItemsFunction after a block of requested
+		 *  items have been successfully retrieved.  It stores the specified items in the 
+		 *  internal data vector and clears the "pending" state associated with the original
+		 *  request.
+		 */
+		public function storeItemsAt(items:Vector.<Object>, index:int):void
+		{
+			if (index < 0 || (index + items.length) > length) 
+			{
+				const message:String = resourceManager.getString("collections", "outOfBounds", [ index ]);
+				throw new RangeError(message);
+			}
+			
+			var item:Object;
+			var itemIndex:int;
+			var pce:PropertyChangeEvent;
+			
+			// copy the new items into the internal items vector and run the IPE responders
+			
+			itemIndex = index;
+			for each (item in items)
+			{
+				var ipe:ItemPendingError = data[itemIndex] as ItemPendingError;
+				if (ipe && ipe.responders)
+				{
+					for each (var responder:IResponder in ipe.responders)
+					responder.result(null);
+				}
+				
+				data[itemIndex++] = item;
+			}
+			
+			// dispatch collection and property change events
+			
+			const hasCollectionListener:Boolean = hasEventListener(CollectionEvent.COLLECTION_CHANGE);
+			const hasPropertyListener:Boolean = hasEventListener(PropertyChangeEvent.PROPERTY_CHANGE);
+			var propertyChangeEvents:Array = new Array();  // Array of PropertyChangeEvents; 
+			
+			if (hasCollectionListener || hasPropertyListener)
+			{   
+				itemIndex = index;
+				for each (item in items)
+				propertyChangeEvents.push(createUpdatePCE(itemIndex++, null, item));
+			}
+			
+			if (hasCollectionListener)
+				dispatchEvent(createCE(CollectionEventKind.REPLACE, index, propertyChangeEvents));
+			
+			if (hasPropertyListener)
+			{
+				for each (pce in propertyChangeEvents)
+				dispatchEvent(pce);
+			}
+		}
+		
+		public function failItemsAt(index:int, count:int):void
+		{
+			if (index < 0 || (index + count) > length) 
+			{
+				const message:String = resourceManager.getString("collections", "outOfBounds", [ index ]);
+				throw new RangeError(message);
+			}
+			
+			for (var i:int = 0; i < count; i++)
+			{
+				var itemIndex:int = i + index;
+				var ipe:ItemPendingError = data[itemIndex] as ItemPendingError;
+				if (ipe && ipe.responders)
+				{
+					for each (var responder:IResponder in ipe.responders)
+					responder.fault(null);
+				}
+				data[itemIndex] = undefined;
+			}        
+			
+			
+			
+		}
+		
+		//--------------------------------------------------------------------------
+		//
+		//  IList Implementation (length appears above)
+		//
+		//--------------------------------------------------------------------------
+		
+		/**
+		 *  @inheritDoc
+		 */    
+		public function addItem(item:Object):void
+		{
+			addItemAt(item, length);        
+		}
+		
+		/**
+		 *  @inheritDoc
+		 */   
+		public function addItemAt(item:Object, index:int):void
+		{
+			checkItemIndex(index, length + 1);
+			data.splice(index, index, item);
+			
+			if (hasEventListener(CollectionEvent.COLLECTION_CHANGE))
+				dispatchEvent(createCE(CollectionEventKind.ADD, index, item));
+		}
+		
+		/**
+		 *  @inheritDoc
+		 */   
+		public function getItemAt(index:int, prefetch:int=0):Object
+		{
+			checkItemIndex(index, length);
+			
+			var item:* = data[index];
+			if (item is ItemPendingError)
+			{
+				throw item as ItemPendingError;
+			}
+			else if (item === undefined)
+			{
+				const ipe:ItemPendingError = new ItemPendingError(String(index));
+				const pageStartIndex:int = Math.floor(index / pageSize) * pageSize;
+				const count:int = Math.min(pageSize, data.length - pageStartIndex);
+				
+				for (var i:int = 0; i < count; i++)
+					data[pageStartIndex + i] = ipe;
+				
+				if (loadItemsFunction !== null)
+					loadItemsFunction(this, pageStartIndex, count);
+				
+				// Allow for the possibility that loadItemsFunction has synchronously
+				// loaded the requested data item.
+				
+				if (data[index] == ipe)
+					throw ipe;
+				else
+					item = data[index];
+			}
+			
+			return item;
+		}
+		
+		/**
+		 *  Return the index of of the specified item, if it currently exists in the list.
+		 *  This method does not cause additional items to be loaded.
+		 */   
+		public function getItemIndex(item:Object):int
+		{
+			return data.indexOf(item);
+		}
+		
+		/**
+		 *  @inheritDoc
+		 */   
+		public function itemUpdated(item:Object, property:Object=null, oldValue:Object=null, newValue:Object=null):void
+		{
+			const hasCollectionListener:Boolean = hasEventListener(CollectionEvent.COLLECTION_CHANGE);
+			const hasPropertyListener:Boolean = hasEventListener(PropertyChangeEvent.PROPERTY_CHANGE);
+			var pce:PropertyChangeEvent = null;
+			
+			if (hasCollectionListener || hasPropertyListener)
+				pce = createUpdatePCE(property, oldValue, newValue);
+			
+			if (hasCollectionListener)
+				dispatchEvent(createCE(CollectionEventKind.UPDATE, -1, pce));
+			
+			if (hasPropertyListener)
+				dispatchEvent(pce);
+		}
+		
+		/**
+		 *  @inheritDoc
+		 */   
+		public function removeAll():void
+		{
+			length = 0;
+			
+			if (hasEventListener(CollectionEvent.COLLECTION_CHANGE))
+			{
+				const ce:CollectionEvent = new CollectionEvent(CollectionEvent.COLLECTION_CHANGE);
+				ce.kind = CollectionEventKind.RESET;
+				dispatchEvent(ce);
+			}
+		}
+		
+		/**
+		 *  @inheritDoc
+		 */   
+		public function removeItemAt(index:int):Object
+		{
+			checkItemIndex(index, length);
+			
+			const item:Object = data[index];
+			
+			data.splice(index, 1);
+			if (hasEventListener(CollectionEvent.COLLECTION_CHANGE))
+				dispatchEvent(createCE(CollectionEventKind.REMOVE, index, item));    
+			
+			return item;
+		}
+		
+		/**
+		 *  @inheritDoc
+		 */   
+		public function setItemAt(item:Object, index:int):Object
+		{
+			checkItemIndex(index, length);
+			
+			const oldItem:Object = data[index];
+			
+			if (item !== oldItem)
+			{
+				const hasCollectionListener:Boolean = hasEventListener(CollectionEvent.COLLECTION_CHANGE);
+				const hasPropertyListener:Boolean = hasEventListener(PropertyChangeEvent.PROPERTY_CHANGE);
+				var pce:PropertyChangeEvent = null;
+				
+				if (hasCollectionListener || hasPropertyListener)
+					pce = createUpdatePCE(index, oldItem, item);
+				
+				if (hasCollectionListener)
+					dispatchEvent(createCE(CollectionEventKind.REPLACE, index, pce));
+				
+				if (hasPropertyListener)
+					dispatchEvent(pce);
+			}
+			
+			return oldItem;
+		}
+		
+		/**
+		 *  Returns an array with the same length as this list, that contains all of
+		 *  the items successfully loaded so far.  
+		 * 
+		 *  <p>Calling this method does not force additional items to be loaded.</p>
+		 */   
+		public function toArray():Array
+		{
+			const rv:Array = new Array(data.length);
+			
+			var index:int = 0;
+			for each (var item:* in data)
+			rv[index++] = (item is ItemPendingError) ? undefined : item;
+			
+			return rv;
+		}
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/controls/PopUpAnchor1Example.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/PopUpAnchor1Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/PopUpAnchor1Example.mxml
new file mode 100644
index 0000000..7c2c42b
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/PopUpAnchor1Example.mxml
@@ -0,0 +1,81 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s: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 mx.controls.Alert;
+			protected function handleClose(event:MouseEvent):void
+			{
+				Alert.show("TEST");
+				this.currentState="normal";
+			}
+		]]>
+	</fx:Script>
+	
+	<s:states>
+		<s:State name="normal" />
+		<s:State name="infoOpen" />
+	</s:states>
+	
+	<s:transitions>
+		<mx:Transition fromState="*" toState="*">
+			<mx:Sequence>
+				<s:Fade target="{infoPopUp.popUp}" duration="1500"/>
+			</mx:Sequence>
+		</mx:Transition> 
+	</s:transitions>
+	
+	<fx:Declarations>
+		<s:LinearGradient rotation="90" id="fill1">
+			<s:GradientEntry color="0xFFFFFF" />
+			<s:GradientEntry color="0x336699" />
+		</s:LinearGradient>
+	</fx:Declarations>
+	
+	<s:Panel width="100%" height="100%" title="PopUpAnchor Sample" skinClass="skins.TDFPanelSkin">	
+		<s:HGroup horizontalCenter="0" top="5">
+			<s:VGroup top="0">
+				<s:Label width="200" height="200" color="0x323232" 
+						 text="The PopUpAnchor control displays a pop-up component in a layout. It has 
+						 no visual appearance, but it has dimensions. The PopUpAnchor control is used in the DropDownList and VolumeBar controls. The PopUpAnchor displays the pop-up component by adding it to the PopUpManager, and then sizes and positions the pop-up component relative to itself."/>
+				<s:Label text=" Click the Information icon to see the PopUpAnchor in action."/>
+				<mx:Spacer width="60"/>	
+			</s:VGroup>
+			<s:VGroup>
+				<mx:LinkButton label="Information" click="currentState = 'infoOpen'" icon="@Embed('iconinfo.gif')"/>
+				<s:PopUpAnchor id="infoPopUp" left="0" bottom="0" popUpPosition="below"  
+							   includeIn="infoOpen" displayPopUp.normal="false" 
+							   displayPopUp.infoOpen="true">
+					<s:BorderContainer cornerRadius="5" backgroundFill="{fill1}" height="160" width="180" 
+							  dropShadowVisible="true">
+						<s:Label horizontalCenter="0" top="20" width="170" height="155" color="0x323232" 
+								 text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam laoreet urna fringilla risus fermentum sed aliquam lorem aliquam. Maecenas egestas, risus at adipiscing faucibus, nisl dui dignissim turpis, at consectetur magna erat in ligula."/>
+						
+						<s:Button top="2" right="2" width="16" height="16" skinClass="skins.CloseButtonSkin" click="handleClose(event)"/>
+					</s:BorderContainer>
+				</s:PopUpAnchor>
+			</s:VGroup>
+		</s:HGroup>
+	</s:Panel>
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/controls/PopUpAnchor2Example.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/PopUpAnchor2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/PopUpAnchor2Example.mxml
new file mode 100644
index 0000000..0bde928
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/PopUpAnchor2Example.mxml
@@ -0,0 +1,80 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s: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">
+	
+	<s:states>
+		<s:State name="normal" />
+		<s:State name="emailOpen" />
+		<s:State name="aboutOpen" />
+		<s:State name="infoOpen" />
+	</s:states>
+	
+	<s:transitions>
+		<mx:Transition fromState="*" toState="*">
+			<mx:Sequence>
+				<s:Fade target="{emailPopUp.popUp}" duration="1000"/>
+			</mx:Sequence>
+		</mx:Transition> 
+	</s:transitions>
+	
+	<s:Panel width="100%" height="100%" 
+			 title="PopUpAnchor with Form" 
+			 skinClass="skins.TDFPanelSkin">
+		
+		<s:VGroup horizontalCenter="0" top="20">
+			<s:HGroup>
+				<mx:LinkButton label="Home" color="0x336699" click="currentState = 'normal'"/>
+				<mx:LinkButton label="About" color="0x336699" click="currentState = 'aboutOpen'"/>
+				<mx:LinkButton label="Information" color="0x336699" click="currentState = 'infoOpen'"/>
+				<mx:LinkButton label="Contact Us" color="0x336699" click="currentState = 'emailOpen'"/>
+			</s:HGroup>
+			<s:BorderContainer id="border1" excludeFrom="emailOpen" width="290" height="200" 
+					  backgroundColor="0x000000" color="0xFFFFFF" cornerRadius="7">
+				<s:Label width="200" height="200" top="20" left="5" 
+						 text.normal="Welcome to Tour de Flex!" 
+						 text.aboutOpen="Tour de Flex is constantly being updated with more cool samples!" 
+						 text.infoOpen="Check back for more Flex 4 samples weekly!"/>
+			</s:BorderContainer>
+			<s:PopUpAnchor id="emailPopUp" left="0" bottom="0" popUpPosition="below"  
+						   includeIn="emailOpen" displayPopUp.normal="false" displayPopUp.emailOpen="true">
+				<mx:Form id="form1" backgroundColor="0x000000" color="0xFFFFFF">
+					<mx:FormItem label="From :">
+						<s:TextInput/>
+					</mx:FormItem>
+					<mx:FormItem label="To :">
+						<s:TextInput/>
+					</mx:FormItem>
+					<mx:FormItem label="Subject :">
+						<s:TextInput/>
+					</mx:FormItem>
+					<mx:FormItem label="Message :">
+						<s:TextArea width="100%" height="60" maxChars="60"/>
+					</mx:FormItem>
+					<mx:FormItem direction="horizontal">
+						<s:Button label="Send" click="currentState = 'normal'" color="0x000000"/>  
+						<s:Button label="Cancel" click="currentState = 'normal'" color="0x000000"/>
+					</mx:FormItem>
+				</mx:Form>
+			</s:PopUpAnchor>
+		</s:VGroup>
+	</s:Panel>
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/controls/RadioButtonExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/RadioButtonExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/RadioButtonExample.mxml
new file mode 100644
index 0000000..0ce17bf
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/RadioButtonExample.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" 
+			   viewSourceURL="srcview/index.html">
+
+	<fx:Script>
+		<![CDATA[
+			protected function scoreClickHandler(event:MouseEvent):void
+			{
+				var score:Number = 0.0;
+				
+				if (group1.selectedValue=="True")
+					score=33.34;
+				if (group2.selectedValue=="South Africa")
+					score=score+33.34;
+				if (group3.selectedValue=="False")
+					score=score+33.34;
+				scoreText.text = "You scored " + numberFormatter.format(score).toString()+"%";
+			}
+		]]>
+	</fx:Script>
+	<fx:Declarations>
+		<s:RadioButtonGroup id="group1"/>
+		<s:RadioButtonGroup id="group2"/>
+		<s:RadioButtonGroup id="group3"/>
+		<mx:NumberFormatter id="numberFormatter"
+							precision="0"
+							rounding="nearest"/>
+	</fx:Declarations>
+	<fx:Style>
+		@namespace "library://ns.adobe.com/flex/spark";
+		
+		RadioButton{ 
+			baseColor: #FFFFFF; 
+		}
+		
+	</fx:Style>
+	
+	<!-- 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="RadioButton Sample" 
+			 width="100%" height="100%" 
+			 skinClass="skins.TDFPanelSkin">
+		
+		<s:HGroup horizontalCenter="0" top="10">
+			<s:VGroup>
+				<s:Label text="1) The sky is blue:"/>
+				<s:RadioButton id="trueRadioBtn" label="True" groupName="group1"/>
+				<s:RadioButton id="falseRadioBtn" label="False" groupName="group1"/>
+			</s:VGroup>	
+			<s:VGroup paddingLeft="20">
+				<s:Label text="2) Which of the following is not a continent?"/>
+				<s:RadioButton id="multiRadioBtnA" label="North America" groupName="group2"/>
+				<s:RadioButton id="multiRadioBtnB" label="Europe" groupName="group2"/>
+				<s:RadioButton id="multiRadioBtnC" label="Asia" groupName="group2"/>
+				<s:RadioButton id="multiRadioBtnD" label="South Africa" groupName="group2"/>
+			</s:VGroup>
+			<s:VGroup paddingLeft="20">
+				<s:Label text="3) Tallahasee is the capital of Alabama:"/>
+				<s:RadioButton id="trueRadioBtn3" label="True" groupName="group3" />
+				<s:RadioButton id="falseRadioBtn3" label="False" groupName="group3"/>
+			</s:VGroup>
+			<s:VGroup horizontalAlign="contentJustify">
+				<s:Button id="scoreBtn" label="Score Me!" click="scoreClickHandler(event)"/>
+				<s:Label id="scoreText"/>
+			</s:VGroup>
+		</s:HGroup>
+		
+		<s:Label bottom="20" left="5" width="100%" verticalAlign="justify" color="#323232" 
+					  text="The RadioButton control is a single choice in a set of mutually 
+exclusive choices. A RadioButton group is composed of two or more RadioButton controls with
+the same group name. Only one member of the group can be selected at any given time." />
+	</s:Panel>
+	
+		
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/controls/SampleHelpFormExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/SampleHelpFormExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/SampleHelpFormExample.mxml
new file mode 100644
index 0000000..979187f
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/SampleHelpFormExample.mxml
@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s: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" backgroundColor="haloSilver" fontSize="14">
+	
+	<s:Form horizontalCenter="0">
+		<s:FormItem label="Enter some text">
+			<s:TextInput/>
+			<s:helpContent>
+				<s:Label text="I've fallen and I can't get up!"/>
+			</s:helpContent>
+		</s:FormItem>
+		<s:FormItem label="Check a box">
+			<s:CheckBox label="option 1"/>
+			<s:CheckBox label="option 2"/>
+			<s:helpContent>
+				<s:Label text="What does it mean?"/>
+				<s:Button label="?" width="30" x="120"/>
+			</s:helpContent>
+		</s:FormItem>
+		<s:FormItem>
+			<s:Button label="Submit!"/>
+		</s:FormItem>
+	</s:Form>
+	
+</s:Application>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/controls/SampleSequenceFormExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/SampleSequenceFormExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/SampleSequenceFormExample.mxml
new file mode 100644
index 0000000..eeb27f2
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/SampleSequenceFormExample.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" 
+			   xmlns:mx="library://ns.adobe.com/flex/mx" backgroundColor="haloSilver" fontSize="14">
+	
+	<s:Form horizontalCenter="0">
+		<s:FormItem sequenceLabel="1." label="Enter some text">
+			<s:TextInput/>
+		</s:FormItem>
+		<s:FormItem sequenceLabel="2." label="Check a box">
+			<s:CheckBox label="option 1"/>
+			<s:CheckBox label="option 2"/>
+		</s:FormItem>
+		<s:FormItem>
+			<s:Button label="Submit it!"/>
+		</s:FormItem>
+	</s:Form>
+	
+</s:Application>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/controls/SampleSimpleFormExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/SampleSimpleFormExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/SampleSimpleFormExample.mxml
new file mode 100644
index 0000000..4d5887c
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/SampleSimpleFormExample.mxml
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s: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"
+			   backgroundColor="haloSilver" fontSize="14">
+	
+	<s:Form horizontalCenter="0">
+		<s:FormItem label="Enter some text">
+			<s:TextInput/>
+		</s:FormItem>
+		<s:FormItem label="Check a box">
+			<s:CheckBox label="option 1"/>
+			<s:CheckBox label="option 2"/>
+		</s:FormItem>
+		<s:FormItem>
+			<s:Button label="Submit it!"/>
+		</s:FormItem>
+	</s:Form>
+
+</s:Application>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/controls/SampleStackedFormExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/SampleStackedFormExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/SampleStackedFormExample.mxml
new file mode 100644
index 0000000..0203cf9
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/SampleStackedFormExample.mxml
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s: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" backgroundColor="haloSilver" fontSize="14">
+	
+	<s:Form skinClass="spark.skins.spark.StackedFormSkin" horizontalCenter="0">
+		<s:FormHeading label="Do some data entry" skinClass="spark.skins.spark.StackedFormHeadingSkin"/>
+		<s:FormItem label="Enter some text" skinClass="spark.skins.spark.StackedFormItemSkin">
+			<s:TextInput/>
+		</s:FormItem>
+		<s:FormItem label="Check a box" skinClass="spark.skins.spark.StackedFormItemSkin">
+			<s:CheckBox label="option 1"/>
+			<s:CheckBox label="option 2"/>
+		</s:FormItem>
+		<s:FormItem skinClass="spark.skins.spark.StackedFormItemSkin">
+			<s:Button label="Submit it!"/>
+		</s:FormItem>
+	</s:Form>
+	
+</s:Application>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/controls/ScrollBarExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/ScrollBarExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/ScrollBarExample.mxml
new file mode 100644
index 0000000..21b08df
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ScrollBarExample.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: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%"
+			 skinClass="skins.TDFPanelSkin"
+			 title="ScrollBar Sample">
+		
+		<s:layout>
+				<s:HorizontalLayout paddingLeft="80" paddingTop="15"/>
+		</s:layout>
+		<mx:Box borderStyle="solid">
+			<s:HGroup>
+				<s:DataGroup id="vertView" left="10" top="20"
+							 clipAndEnableScrolling="true"
+							 itemRenderer="spark.skins.spark.DefaultItemRenderer">
+					<s:layout> 
+						<s:VerticalLayout requestedRowCount="4"/> 
+					</s:layout> 
+					<s:dataProvider> 
+						<s:ArrayCollection> 
+							<fx:String>Photoshop</fx:String>                
+							<fx:String>Illustrator</fx:String>                
+							<fx:String>LiveCycle ES</fx:String>                
+							<fx:String>Flash</fx:String>                
+							<fx:String>Acrobat</fx:String>                
+							<fx:String>Elements</fx:String>                
+							<fx:String>Creative Suite</fx:String>     
+							<fx:String>Premiere Pro</fx:String>     
+						</s:ArrayCollection>
+					</s:dataProvider> 
+				</s:DataGroup> 
+				<s:VScrollBar viewport="{vertView}" 
+							  top="10" 
+							  left="{vertView.x + vertView.width + 10}" 
+							  height="{vertView.height}"/>
+			</s:HGroup>
+		</mx:Box> 
+		<mx:Box borderStyle="solid">
+			<s:HGroup>
+				<s:DataGroup id="horizView" right="200" top="10"
+							 clipAndEnableScrolling="true"
+							 itemRenderer="spark.skins.spark.DefaultItemRenderer">
+					<s:layout> 
+						<s:HorizontalLayout requestedColumnCount="3"/> 
+					</s:layout> 
+					<s:dataProvider> 
+						<s:ArrayCollection> 
+							<fx:String>Photoshop</fx:String>                
+							<fx:String>Illustrator</fx:String>                
+							<fx:String>LiveCycle ES</fx:String>                
+							<fx:String>Flash</fx:String>                
+							<fx:String>Acrobat</fx:String>     
+						</s:ArrayCollection>
+					</s:dataProvider> 
+				</s:DataGroup> 
+				
+			</s:HGroup>
+			<s:HScrollBar viewport="{horizView}" 
+						  left="{horizView.left}" 
+						  bottom="{horizView.bottom}" 
+						  width ="{horizView.width}"/>
+		</mx:Box>
+		
+		<s:Label paddingLeft="15" width="199" verticalAlign="justify" color="0x323232"
+				 text="You can add scrollbars to any component to give scrolling capability. This sample shows
+how you can use both a vertical and horizontal ScrollBar. Also see the Scroller sample for more information."/>	
+	</s:Panel>
+</s:Application>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/controls/Scroller1Example.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/Scroller1Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/Scroller1Example.mxml
new file mode 100644
index 0000000..371f003
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/Scroller1Example.mxml
@@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s: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">
+	
+		
+	<s:Panel width="100%" height="100%"
+		skinClass="skins.MyPanelSkin"
+		title="Scroller Sample">
+		<s:VGroup horizontalCenter="0">
+			<s:HGroup>
+				<s:Label text="Min Viewport Inset:"/>
+				<s:HSlider id="slider1"
+						   maximum="50"
+						   liveDragging="true" />
+				<s:Label text="Viewport Width:"/>
+				<s:HSlider id="slider2"
+						   minimum="100"
+						   maximum="550"
+						   value="300"
+						   liveDragging="true" />
+				<s:Label text="Viewport Height:"/>
+				<s:HSlider id="slider3"
+						   minimum="100"
+						   maximum="550"
+						   value="200"
+						   liveDragging="true" />
+			</s:HGroup>
+			<s:HGroup>
+			<s:Scroller id="scroller"
+						minViewportInset="{slider1.value}"
+						width="300" height="200">
+				<s:Group>
+					<s:Rect id="rect"
+							width="{slider2.value}"
+							height="{slider3.value}">
+						<s:fill>
+							<s:LinearGradient rotation="45">
+								<s:GradientEntry color="red" />
+								<s:GradientEntry color="yellow" />
+								<s:GradientEntry color="haloBlue" />
+							</s:LinearGradient>
+						</s:fill>
+					</s:Rect>
+				</s:Group>
+			</s:Scroller>
+			<s:Label textAlign="justify" width="280" verticalAlign="justify"
+						  text="The Scroller control contains a pair of scroll bars and a viewport. A viewport displays a rectangular subset of the area of
+a component, rather than displaying the entire component. You can use the Scroller control to make any container that implements the IViewport interface,
+such as Group, scrollable. The Scroller's horizontal and vertical scroll policies are set to auto which indicates that scroll bars are displayed when the
+content within a viewport is larger than the actual size of the viewport."/>
+			</s:HGroup>
+		</s:VGroup>
+	</s:Panel>
+	
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/controls/Scroller2Example.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/Scroller2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/Scroller2Example.mxml
new file mode 100644
index 0000000..d960837
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/Scroller2Example.mxml
@@ -0,0 +1,83 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<!-- Also see http://blog.flexexamples.com/2009/07/29/enabling-tabbing-on-spark-scroller-children/ -->
+<s:Application name="Spark_Scroller_hasFocusableChildren_test"
+			   xmlns:fx="http://ns.adobe.com/mxml/2009"
+			   xmlns:mx="library://ns.adobe.com/flex/mx"
+			   xmlns:s="library://ns.adobe.com/flex/spark">
+	
+	
+	<fx:Script>
+		<![CDATA[
+			import spark.events.TextOperationEvent;
+			
+			private function txtChangeHandler(event:TextOperationEvent):void
+			{
+				if (event.target is TextInput)
+				{
+					var textInput:TextInput = event.target as TextInput;
+					textInput.clearStyle("color");
+				}	
+			}
+		]]>
+	</fx:Script>
+	<!-- you want to mark the children of the viewport as focusable so you're able to tab to them, 
+	but if you don't want the container itself to be focusable then you must turn tabEnabled off on it -->
+	
+	<s:Panel width="100%" height="100%" 
+			 skinClass="skins.TDFPanelSkin" 
+			 title="Scrollers and Tabbing">
+		
+		<!-- The fields are tab-able within the VGroup container -->
+		<s:HGroup horizontalCenter="0" top="10">
+			<s:VGroup left="0" horizontalAlign="center" width="20%">
+				<s:BitmapImage id="img" source="@Embed(source='assets/ApacheFlexLogo.png')"/>
+				<s:Label text="Item For Sale"/>
+			</s:VGroup>
+			<s:Scroller tabEnabled="true" hasFocusableChildren="true">
+				<s:VGroup>
+					<s:Label text="First Name:"/>
+					<s:TextInput id="firstName" text="firstname" color="#959494" change="txtChangeHandler(event)"/>
+					<s:Label text="Last Name:"/>
+					<s:TextInput id="lastName" text="lastname" color="#959494" change="txtChangeHandler(event)"/>
+					<s:Label text="Email:"/>
+					<s:TextInput id="emailAdd" text="email" color="#959494" change="txtChangeHandler(event)"/>
+				</s:VGroup>
+			</s:Scroller>
+			
+			<!-- Note: The scroller container automatically sets the clipAndEnableScrolling to false for
+			containers within it. See 'Controlling Viewport' sample under 'Coding Techniques' --> 
+			
+			<s:Scroller hasFocusableChildren="true" tabEnabled="false">
+				<s:VGroup width="200" height="200"> 
+					<s:Label text="Enter item name:"/>
+					<s:TextInput id="itemNameTxt" text="image-name" width="100%" color="#959494" change="txtChangeHandler(event)"/>
+					<s:Label text="Enter description of your item:"/>
+					<s:TextArea id="itemDescTxt" text="title" color="#959494" change="txtChangeHandler(event)"/>
+				</s:VGroup>
+			</s:Scroller>	
+			<s:Label right="10" width="180" verticalAlign="justify"
+						  text="If you have items within a Scroller that need to be tabbed to, you can
+need to set hasFocusableChildren to true. If you do not want the container itself to be tab enabled, 
+then you must set tabEnabled to false, such as shown here."/>
+		</s:HGroup>
+	</s:Panel>
+</s:Application>
+

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/controls/SliderExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/SliderExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/SliderExample.mxml
new file mode 100644
index 0000000..25b9866
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/SliderExample.mxml
@@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s: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">
+	
+	<s:Panel width="100%" height="100%"
+			 skinClass="skins.TDFPanelSkin"
+			 title="HSlider/VSlider Sample">
+		
+		<s:VGroup left="10" top="10">
+			<s:Label text="Height:"/>
+			<s:VSlider id="slider3"
+					   minimum="50"
+					   maximum="180"
+					   value="160"
+					   liveDragging="true"/>
+		</s:VGroup>
+		<s:Group  left="40" top="25">
+			<s:Ellipse id="rect"
+					   width="{slider2.value}"
+					   height="{slider3.value}">
+				<s:fill>
+					<s:LinearGradient rotation="45">
+						<s:GradientEntry color="0x5008f3" />
+						<s:GradientEntry color="0x7a2a84" />
+						<s:GradientEntry color="0xfe08a4" />
+					</s:LinearGradient>
+				</s:fill>
+			</s:Ellipse>
+		</s:Group>
+		
+		<s:HGroup right="315" top="10" verticalAlign="middle">
+			<s:Label text="Width:"/>
+			<s:HSlider id="slider2"
+					   minimum="50"
+					   maximum="250"
+					   value="200"
+					   liveDragging="true" />	
+			
+		</s:HGroup>
+		
+		<s:Label right="40" top="10" width="200" verticalAlign="justify" color="0x323232"
+				 text="The slider controls can be used to select a value by moving a slider thumb between 
+the end points of the slider track. The current value of the slider is determined by the relative location 
+of the thumb between the end points of the slider. The slider end points correspond to the slider’s minimum and maximum values."/>
+	</s:Panel>
+	
+</s:Application>