flex-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From jmcl...@apache.org
Subject [06/51] [partial] Merged TourDeFlex release from develop
Date Sat, 23 Aug 2014 03:25:42 GMT
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/controls/OLAPDataGridExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/OLAPDataGridExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/OLAPDataGridExample.mxml
new file mode 100644
index 0000000..d176fc8
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/OLAPDataGridExample.mxml
@@ -0,0 +1,230 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES 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"
+			   creationComplete="creationCompleteHandler();">
+	
+	<fx:Script>
+		<![CDATA[
+			import mx.rpc.AsyncResponder;
+			import mx.rpc.AsyncToken;
+			import mx.olap.OLAPQuery;
+			import mx.olap.OLAPSet;
+			import mx.olap.IOLAPQuery;
+			import mx.olap.IOLAPQueryAxis;
+			import mx.olap.IOLAPCube;
+			import mx.olap.OLAPResult;
+			import mx.events.CubeEvent;
+			import mx.controls.Alert;
+			import mx.collections.ArrayCollection;
+			
+			
+			//
+			// Format of Objects in the ArrayCollection:
+			//
+			//  data:Object = {
+			//    customer:"AAA", 
+			//    product:"ColdFusion",
+			//    quarter:"Q1"
+			//    revenue: "100.00" 
+			//  }
+			//
+			
+			[Bindable]
+			private var flatData:ArrayCollection = new ArrayCollection(
+			[
+			{customer:"AAA", product:"ColdFusion", quarter:"Q1", revenue:210, cost:25},
+			{customer:"AAA", product:"Flex", quarter:"Q2", revenue:210, cost:25},
+			{customer:"AAA", product:"Dreamweaver", quarter:"Q3", revenue:250, cost:125},
+			{customer:"AAA", product:"Flash", quarter:"Q4", revenue:430, cost:75},
+			
+			{customer:"BBB", product:"ColdFusion", quarter:"Q2", revenue:125, cost:20},
+			{customer:"BBB", product:"Flex", quarter:"Q3", revenue:210, cost:20},
+			{customer:"BBB", product:"Dreamweaver", quarter:"Q4", revenue:320, cost:120},
+			{customer:"BBB", product:"Flash", quarter:"Q1", revenue:280, cost:70},
+			
+			{customer:"CCC", product:"ColdFusion", quarter:"Q3", revenue:375, cost:120},
+			{customer:"CCC", product:"Flex", quarter:"Q4", revenue:430, cost:120},
+			{customer:"CCC", product:"Dreamweaver", quarter:"Q1", revenue:470, cost:220},
+			{customer:"CCC", product:"Flash", quarter:"Q2", revenue:570, cost:170},
+			
+			{customer:"AAA", product:"ColdFusion", quarter:"Q4", revenue:215, cost:90},
+			{customer:"AAA", product:"Flex", quarter:"Q1", revenue:210, cost:90},
+			{customer:"AAA", product:"Dreamweaver", quarter:"Q2", revenue:175, cost:190},
+			{customer:"AAA", product:"Flash", quarter:"Q3", revenue:670, cost:75},
+			
+			{customer:"BBB", product:"ColdFusion", quarter:"Q1", revenue:175, cost:20},
+			{customer:"BBB", product:"Flex", quarter:"Q2", revenue:210, cost:20},
+			{customer:"BBB", product:"Dreamweaver",quarter:"Q3", revenue:120, cost:120},
+			{customer:"BBB", product:"Flash", quarter:"Q4", revenue:310, cost:70},
+			
+			{customer:"CCC", product:"ColdFusion", quarter:"Q1", revenue:385, cost:120},
+			{customer:"CCC", product:"Flex", quarter:"Q2", revenue:340, cost:120},
+			{customer:"CCC", product:"Dreamweaver", quarter:"Q3", revenue:470, cost:220},
+			{customer:"CCC", product:"Flash", quarter:"Q4", revenue:270, cost:170},
+			
+			{customer:"AAA", product:"ColdFusion", quarter:"Q1", revenue:100, cost:25},
+			{customer:"AAA", product:"Flex", quarter:"Q2", revenue:150, cost:25},
+			{customer:"AAA", product:"Dreamweaver", quarter:"Q3", revenue:200, cost:125},
+			{customer:"AAA", product:"Flash", quarter:"Q4", revenue:300, cost:75},
+			
+			{customer:"BBB", product:"ColdFusion", quarter:"Q2", revenue:175, cost:20},
+			{customer:"BBB", product:"Flex", quarter:"Q3", revenue:100, cost:20},
+			{customer:"BBB", product:"Dreamweaver", quarter:"Q4", revenue:270, cost:120},
+			{customer:"BBB", product:"Flash", quarter:"Q1", revenue:370, cost:70},
+			
+			{customer:"CCC", product:"ColdFusion", quarter:"Q3", revenue:410, cost:120},
+			{customer:"CCC", product:"Flex", quarter:"Q4", revenue:300, cost:320},
+			{customer:"CCC", product:"Dreamweaver", quarter:"Q1", revenue:510, cost:220},
+			{customer:"CCC", product:"Flash", quarter:"Q2", revenue:620, cost:170},
+			
+			{customer:"AAA", product:"ColdFusion", quarter:"Q4", revenue:215, cost:90},
+			{customer:"AAA", product:"Flex", quarter:"Q1", revenue:210, cost:90},
+			{customer:"AAA", product:"Dreamweaver", quarter:"Q2", revenue:175, cost:190},
+			{customer:"AAA", product:"Flash", quarter:"Q3", revenue:420, cost:75},
+			
+			{customer:"BBB", product:"ColdFusion", quarter:"Q1", revenue:240, cost:20},
+			{customer:"BBB", product:"Flex", quarter:"Q2", revenue:100, cost:20},
+			{customer:"BBB", product:"Dreamweaver", quarter:"Q3", revenue:270, cost:120},
+			{customer:"BBB", product:"Flash", quarter:"Q4", revenue:370, cost:70},
+			
+			{customer:"CCC", product:"ColdFusion", quarter:"Q1", revenue:375, cost:120},
+			{customer:"CCC", product:"Flex", quarter:"Q2", revenue:420, cost:120},
+			{customer:"CCC", product:"Dreamweaver", quarter:"Q3", revenue:680, cost:220},
+			{customer:"CCC", product:"Flash", quarter:"Q4", revenue:570, cost:170}         
+			]);
+			
+			private function creationCompleteHandler():void {
+				// You must initialize the cube before you 
+				// can execute a query on it.
+				myMXMLCube.refresh();
+			}
+			
+			// Create the OLAP query.
+			private function getQuery(cube:IOLAPCube):IOLAPQuery {
+				// Create an instance of OLAPQuery to represent the query. 
+				var query:OLAPQuery = new OLAPQuery;
+				
+				// Get the row axis from the query instance.
+				var rowQueryAxis:IOLAPQueryAxis = 
+				query.getAxis(OLAPQuery.ROW_AXIS);
+				// Create an OLAPSet instance to configure the axis.
+				var productSet:OLAPSet = new OLAPSet;
+				// Add the Product to the row to aggregate data 
+				// by the Product dimension.
+				productSet.addElements(
+				cube.findDimension("ProductDim").findAttribute("Product").children);
+				// Add the OLAPSet instance to the axis.
+				rowQueryAxis.addSet(productSet);
+				
+				// Get the column axis from the query instance, and configure it
+				// to aggregate the columns by the Quarter dimension. 
+				var colQueryAxis:IOLAPQueryAxis = 
+				query.getAxis(OLAPQuery.COLUMN_AXIS);         
+				var quarterSet:OLAPSet= new OLAPSet;
+				quarterSet.addElements(
+				cube.findDimension("QuarterDim").findAttribute("Quarter").children);
+				colQueryAxis.addSet(quarterSet);
+				
+				return query;       
+			}
+			
+			// Event handler to execute the OLAP query 
+			// after the cube completes initialization.
+			private function runQuery(event:CubeEvent):void {
+				// Get cube.
+				var cube:IOLAPCube = IOLAPCube(event.currentTarget);
+				// Create a query instance.
+				var query:IOLAPQuery = getQuery(cube);
+				// Execute the query.
+				var token:AsyncToken = cube.execute(query);
+				// Setup handlers for the query results.
+				token.addResponder(new AsyncResponder(showResult, showFault));
+			}
+			
+			// Handle a query fault.
+			private function showFault(result:Object, token:Object):void {
+				Alert.show("Error in query.");
+			}
+			
+			// Handle a successful query by passing the query results to 
+			// the OLAPDataGrid control..
+			private function showResult(result:Object, token:Object):void {
+				if (!result) {
+					Alert.show("No results from query.");
+					return;
+				}
+				myOLAPDG.dataProvider= result as OLAPResult;            
+			}        
+		]]>
+	</fx:Script>
+	
+	<s:layout>
+		<s:HorizontalLayout horizontalAlign="center" />
+	</s:layout>
+	
+	<fx:Declarations>
+		<mx:OLAPCube name="FlatSchemaCube" dataProvider="{flatData}" id="myMXMLCube" complete="runQuery(event);">
+			<mx:OLAPDimension name="CustomerDim">
+				<mx:OLAPAttribute name="Customer" dataField="customer"/>
+				<mx:OLAPHierarchy name="CustomerHier" hasAll="true">
+					<mx:OLAPLevel attributeName="Customer"/>
+				</mx:OLAPHierarchy>
+			</mx:OLAPDimension>
+			
+			<mx:OLAPDimension name="ProductDim">
+				<mx:OLAPAttribute name="Product" dataField="product"/>
+				<mx:OLAPHierarchy name="ProductHier" hasAll="true">
+					<mx:OLAPLevel attributeName="Product"/>
+				</mx:OLAPHierarchy>
+			</mx:OLAPDimension>
+			
+			<mx:OLAPDimension name="QuarterDim">
+				<mx:OLAPAttribute name="Quarter" dataField="quarter"/>
+				<mx:OLAPHierarchy name="QuarterHier" hasAll="true">
+					<mx:OLAPLevel attributeName="Quarter"/>
+				</mx:OLAPHierarchy> 
+			</mx:OLAPDimension>
+			
+			<mx:OLAPMeasure name="Revenue" 
+							dataField="revenue" 
+							aggregator="SUM"/>
+		</mx:OLAPCube>
+	</fx:Declarations>
+	
+	
+	
+	<s:Panel title="OLAPDataGrid Control" color="0x000000" 
+			 borderAlpha="0.15" 
+			 width="600">
+		
+		<s:layout>
+			<s:HorizontalLayout horizontalAlign="center" 
+								paddingLeft="10" paddingRight="10" 
+								paddingTop="10" paddingBottom="10"/>
+		</s:layout>
+		
+		<mx:OLAPDataGrid id="myOLAPDG" color="0x323232" width="100%" height="100%"/>
+		
+	</s:Panel>
+	
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/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/e1f9d1df/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/e1f9d1df/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/e1f9d1df/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/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/controls/PopupButtonExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/PopupButtonExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/PopupButtonExample.mxml
new file mode 100644
index 0000000..79de243
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/PopupButtonExample.mxml
@@ -0,0 +1,82 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s: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.*;
+			import mx.events.*;
+			import mx.controls.Alert;
+
+			private var myMenu:Menu;
+
+			// Initialize the Menu control, and specify it as the pop up object
+			// of the PopUpButton control. 
+			private function initMenu():void {
+				myMenu = new Menu();
+				var dp:Object = [{label: "New Folder"}, {label: "Sent Items"}, {label: "Inbox"}];        
+				myMenu.dataProvider = dp;
+				myMenu.selectedIndex = 0;       
+				myMenu.addEventListener("itemClick", itemClickHandler);
+				popB.popUp = myMenu;
+				popB.label = "Put in: " + myMenu.dataProvider[myMenu.selectedIndex].label;
+			}
+
+			// Define the event listener for the Menu control's itemClick event. 
+			private function itemClickHandler(event:MenuEvent):void {
+				var label:String = event.item.label;        
+				popTypeB.text=String("Moved to " + label);
+				popB.label = "Put in: " + label;
+				popB.close();
+				myMenu.selectedIndex = event.index;
+			}
+
+		]]>
+	</fx:Script>
+	
+	<s:layout>
+		<s:HorizontalLayout horizontalAlign="center" />
+	</s:layout>
+	
+	<s:Panel title="PopUpButton Control" 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 width="100%" color="0x323232"
+            text="Button label contains the name of the last selected menu item." />
+        <mx:PopUpButton id="popB" label="Edit" creationComplete="initMenu();" width="140" color="0x323232" click="{Alert.show('Action: ' + popB.label);}" />
+		
+        <mx:Spacer height="65" />
+		
+        <s:TextInput id="popTypeB" color="0x323232" text="...waiting" />
+        
+	</s:Panel>
+	
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/controls/ProgressBarExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/ProgressBarExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/ProgressBarExample.mxml
new file mode 100644
index 0000000..76318e7
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ProgressBarExample.mxml
@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s: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 var j:uint=10;
+          
+          // Event handler function to set the value of the 
+          // ProgressBar control.
+          private function runit():void
+          {
+    	      if(j<=100)
+    	      {
+    	         bar.setProgress(j,100);
+        		 bar.label= "CurrentProgress" + " " + j + "%";
+        		 j+=10;
+    	      }
+    	      if(j>100)
+    	      {
+        		 j=0;
+              }
+          }
+        ]]>    
+    </fx:Script>
+	
+	<s:layout>
+		<s:HorizontalLayout horizontalAlign="center" />
+	</s:layout>
+    
+	<s:Panel title="ProgressBar Control" 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 width="100%" color="0x323232"
+            text="Click the button to increment the progress bar." />
+        <s:Button id="Speed" label="Run" click="runit();" color="0x323232"/>
+            
+        <mx:ProgressBar id="bar" labelPlacement="bottom" minimum="0" visible="true" maximum="100"
+         	color="0x323232" label="CurrentProgress 0%" direction="right" mode="manual" width="100%"/>
+            
+	</s:Panel>
+	
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/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/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/controls/RichEditableTextExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/RichEditableTextExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/RichEditableTextExample.mxml
new file mode 100644
index 0000000..6af67cc
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/RichEditableTextExample.mxml
@@ -0,0 +1,100 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s: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" 
+			   preinitialize="init();">
+	
+	<!-- Based on samples from Peter DeHaan's blog: http://blog.flexexamples.com/ --> 
+	
+	<fx:Script>
+		import flashx.textLayout.elements.Configuration;
+		import flashx.textLayout.elements.TextFlow;
+		import flashx.textLayout.formats.TextDecoration;
+		import flashx.textLayout.formats.TextLayoutFormat;
+		
+		import spark.events.TextOperationEvent;
+		
+		[Bindable]
+		protected static var lineCount:uint = 0;
+		
+		protected function richEdTxt_changeHandler(evt:TextOperationEvent):void {
+			lineCount = richEdTxt.mx_internal::textContainerManager.numLines;
+			lineCnt.text = lineCount.toString();
+		}
+		
+		protected function init():void {
+			var cfg:Configuration = TextFlow.defaultConfiguration;
+			
+			var normalTLF:TextLayoutFormat = new TextLayoutFormat(cfg.defaultLinkNormalFormat);
+			normalTLF.color = 0xFF0000;
+			
+			var hoverTLF:TextLayoutFormat = new TextLayoutFormat(cfg.defaultLinkHoverFormat);
+			hoverTLF.color = 0xFF00FF;
+			hoverTLF.textDecoration = TextDecoration.NONE;
+			
+			var activeTLF:TextLayoutFormat = new TextLayoutFormat(cfg.defaultLinkActiveFormat);
+			activeTLF.color = 0x00FF00;
+			
+			cfg.defaultLinkNormalFormat = normalTLF;
+			cfg.defaultLinkHoverFormat = hoverTLF;
+			cfg.defaultLinkActiveFormat = activeTLF;
+			TextFlow.defaultConfiguration = cfg;
+		}
+	</fx:Script>
+	<fx:Style>
+		@namespace s "library://ns.adobe.com/flex/spark";
+		@namespace mx "library://ns.adobe.com/flex/mx";
+		
+		s|VGroup s|Label {
+			fontWeight: "bold";
+		}
+	</fx:Style>
+	<s:Panel width="100%" height="100%"
+			 skinClass="skins.TDFPanelSkin"
+			 title="RichEditableText Sample">
+		
+		<s:VGroup id="vgrp" width="100%" height="100%" top="10" left="15">
+			<s:HGroup>
+				<s:Label text="Uneditable text with formatted link:"/>
+				<s:RichEditableText editable="false">
+					<s:content>
+						<s:p>The quick brown <s:a href="http://www.adobe.com/">fox</s:a> jumps over the lazy dog.</s:p>
+					</s:content>
+				</s:RichEditableText>
+			</s:HGroup>
+			<s:HGroup>
+				<s:Label text="Editable text:"/>
+				<s:RichEditableText id="richEdTxt" widthInChars="20" heightInLines="10" 
+									change="richEdTxt_changeHandler(event);" backgroundColor="0xCCCCCC" text="Hello world!">
+				</s:RichEditableText>	
+			</s:HGroup>
+			<s:HGroup>
+				<s:Label text="Line Count of editable text:"/>
+				<s:Label id="lineCnt"/>	
+			</s:HGroup>
+			
+		</s:VGroup>
+		<s:Label width="266" height="180" right="10" top="38" color="0x323232" text="RichEditableText is a low-level UIComponent for displaying, scrolling, selecting, and editing richly-formatted text.
+The rich text can contain clickable hyperlinks and inline graphics that are either embedded or loaded from URLs. RichEditableText does not have scrollbars, but it implements 
+the IViewport interface for programmatic scrolling so that it can be controlled by a Scroller, which does provide scrollbars. It also supports vertical scrolling with the mouse wheel." />
+	</s:Panel>
+	
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/controls/SWFLoaderExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/SWFLoaderExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/SWFLoaderExample.mxml
new file mode 100644
index 0000000..2e3dcf8
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/SWFLoaderExample.mxml
@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s: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"
+			   creationComplete="init()">
+	
+	<fx:Script>
+		<![CDATA[
+			private function init():void{
+				swfObj.content.addEventListener("SWF_EVENT",ballHandler);
+			}
+			private function ballHandler(ev:Event):void{
+				txt.text = "Flash content embedded at compile time | " + ev.target.ballCnt + " gumballs left";
+			}
+		]]>
+	</fx:Script>
+	
+	<s:layout>
+		<s:HorizontalLayout horizontalAlign="center" />
+	</s:layout>
+	
+	<s:Panel title="SWFLoader Control" 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 id="txt" color="0x323232" fontWeight="bold" text="Flash content embedded at compile time | 10 gumballs left" />
+		
+		<mx:SWFLoader id="swfObj" source="@Embed('assets/swf_sample.swf')"  />
+	</s:Panel>
+	
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/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/e1f9d1df/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/e1f9d1df/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/e1f9d1df/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/e1f9d1df/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..dc9ba2b
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ScrollBarExample.mxml
@@ -0,0 +1,85 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+
+<s: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>Flex</fx:String>                
+							<fx:String>Flex JS</fx:String>   
+							<fx:String>Falcon</fx:String>
+							<fx:String>Falcon FX</fx:String>
+						</s:ArrayCollection>
+					</s:dataProvider> 
+				</s:DataGroup> 
+				<s:VScrollBar viewport="{vertView}" 
+							  top="10" 
+							  left="{vertView.x + vertView.width + 10}" 
+							  height="{vertView.height}"/>
+			</s:HGroup>
+		</mx:Box> 
+		<mx:Box borderStyle="solid">
+			<s:HGroup>
+				<s:DataGroup id="horizView" right="200" top="10"
+							 clipAndEnableScrolling="true"
+							 itemRenderer="spark.skins.spark.DefaultItemRenderer">
+					<s:layout> 
+						<s:HorizontalLayout requestedColumnCount="3"/> 
+					</s:layout> 
+					<s:dataProvider> 
+						<s:ArrayCollection> 
+							<fx:String>Flex</fx:String>                
+							<fx:String>Flex JS</fx:String>   
+							<fx:String>Falcon</fx:String>
+							<fx:String>Falcon FX</fx:String>   
+						</s:ArrayCollection>
+					</s:dataProvider> 
+				</s:DataGroup> 
+				
+			</s:HGroup>
+			<s:HScrollBar viewport="{horizView}" 
+						  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/e1f9d1df/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/e1f9d1df/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..c6768bc
--- /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" width="200" height="200" source="@Embed(source='assets/ApacheFlexLogo.png')"/>
+				<s:Label text="Item For Sale"/>
+			</s:VGroup>
+			<s:Scroller tabEnabled="true" hasFocusableChildren="true">
+				<s:VGroup>
+					<s:Label text="First Name:"/>
+					<s:TextInput id="firstName" text="firstname" color="#959494" change="txtChangeHandler(event)"/>
+					<s:Label text="Last Name:"/>
+					<s:TextInput id="lastName" text="lastname" color="#959494" change="txtChangeHandler(event)"/>
+					<s:Label text="Email:"/>
+					<s:TextInput id="emailAdd" text="email" color="#959494" change="txtChangeHandler(event)"/>
+				</s:VGroup>
+			</s:Scroller>
+			
+			<!-- Note: The scroller container automatically sets the clipAndEnableScrolling to false for
+			containers within it. See 'Controlling Viewport' sample under 'Coding Techniques' --> 
+			
+			<s:Scroller hasFocusableChildren="true" tabEnabled="false">
+				<s:VGroup width="200" height="200"> 
+					<s:Label text="Enter item name:"/>
+					<s:TextInput id="itemNameTxt" text="image-name" width="100%" color="#959494" change="txtChangeHandler(event)"/>
+					<s:Label text="Enter description of your item:"/>
+					<s:TextArea id="itemDescTxt" text="title" color="#959494" change="txtChangeHandler(event)"/>
+				</s:VGroup>
+			</s:Scroller>	
+			<s:Label right="10" width="180" verticalAlign="justify"
+						  text="If you have items within a Scroller that need to be tabbed to, you can
+need to set hasFocusableChildren to true. If you do not want the container itself to be tab enabled, 
+then you must set tabEnabled to false, such as shown here."/>
+		</s:HGroup>
+	</s:Panel>
+</s:Application>
+

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/controls/SimpleTitleWindowExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/SimpleTitleWindowExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/SimpleTitleWindowExample.mxml
new file mode 100644
index 0000000..204daab
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/SimpleTitleWindowExample.mxml
@@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<!-- Simple custom MXML TitleWindow component.
+     The TitleWindowApp application displays this component. 
+     You cannot run it independently. -->
+     
+<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"  
+				xmlns:s="library://ns.adobe.com/flex/spark" 
+				xmlns:mx="library://ns.adobe.com/flex/mx"  
+    			title="Title Window"
+				close="PopUpManager.removePopUp(this);" >
+
+    <fx:Script>
+        <![CDATA[       
+			import mx.managers.PopUpManager;
+			
+			import spark.components.RichText;
+	       
+            // A reference to the TextInput control in which to put the result.
+            public var loginName:RichText;
+		   
+            // Event handler for the OK button.
+            private function returnName():void {
+                loginName.text="Name entered: " + userName.text; 
+                PopUpManager.removePopUp(this);
+            }
+        ]]>
+    </fx:Script>
+	
+	<s:layout>
+		<s:VerticalLayout horizontalAlign="center" 
+						  paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" />
+	</s:layout>
+
+    <s:HGroup>
+		<s:Label text="Enter Name: "/>
+		<s:TextInput id="userName" width="100%"/>
+	</s:HGroup>
+   
+	<s:HGroup>
+        <s:Button label="OK" click="returnName();"/>
+        <s:Button label="Cancel" click="PopUpManager.removePopUp(this);"/>
+	</s:HGroup>
+
+</s:TitleWindow>  
\ No newline at end of file

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

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/controls/SpinnerExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/SpinnerExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/SpinnerExample.mxml
new file mode 100644
index 0000000..68da5d6
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/SpinnerExample.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" viewSourceURL="srcview/index.html">
+	
+	<s:Panel title="Spinner Control Example" height="100%" width="100%"
+			 skinClass="skins.TDFPanelSkin">
+		<s:VGroup width="100%" height="100%" left="10" top="10">
+			<s:HGroup>
+				<mx:Text text="Use the arrows to change tabs:"/>            
+				<s:Spinner id="mySpinner" maximum="3"/>                    
+			</s:HGroup>
+				
+			<!-- Two way binding is being used so that changes to the tab navigator remain synced with Spinner value -->
+			<mx:TabNavigator id="myTabNav" width="75%" height="75%" selectedIndex="@{mySpinner.value}">
+				<mx:HBox label="Tab 1">
+					<mx:Text text="Text on Tab 1 " fontSize="14" color="red"/>
+				</mx:HBox>    	
+				<mx:HBox label="Tab 2">
+					<mx:Text text="Text on Tab 2" fontSize="16" color="blue"/>
+				</mx:HBox>    	    
+				<mx:HBox label="Tab 3">
+					<mx:Text text="Text on Tab 3" fontSize="18" color="green"/>
+				</mx:HBox>    	    
+				<mx:HBox label="Tab 4">
+					<mx:Text text="Text on Tab 4" fontSize="20" color="purple"/>
+				</mx:HBox>    
+			</mx:TabNavigator>  
+		</s:VGroup>
+		
+	</s:Panel>          
+</s:Application> 
\ No newline at end of file

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

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/controls/TabNavigatorExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/TabNavigatorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/TabNavigatorExample.mxml
new file mode 100644
index 0000000..06e629a
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/TabNavigatorExample.mxml
@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"  
+			   xmlns:s="library://ns.adobe.com/flex/spark" 
+			   xmlns:mx="library://ns.adobe.com/flex/mx" 
+			   skinClass="TDFGradientBackgroundSkin">
+	<s:layout>
+		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
+	</s:layout>
+	
+	<s:Panel title="TabNavigator Container" 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" fontWeight="bold"
+				 text="Select the tabs to change the panel."/>
+		
+		<mx:TabNavigator id="tn"  width="100%" height="100%" color="0x323232" >
+			<!-- Define each panel using a VBox container. -->
+			
+			<s:NavigatorContent label="Panel 1">
+				<s:Label text="TabNavigator container panel 1"/>
+			</s:NavigatorContent>
+			
+			<s:NavigatorContent label="Panel 2">
+				<s:Label text="TabNavigator container panel 2"/>
+			</s:NavigatorContent>
+			
+			<s:NavigatorContent label="Panel 3">
+				<s:Label text="TabNavigator container panel 3"/>
+			</s:NavigatorContent>
+		</mx:TabNavigator>
+		
+		<s:Label width="100%" color="0x323232"
+				 text="Programmatically select the panel using a Button control."/>
+		
+		<s:HGroup>
+			<s:Button label="Select Tab 1" click="tn.selectedIndex=0" color="0x545454" />
+			<s:Button label="Select Tab 2" click="tn.selectedIndex=1" color="0x545454" />
+			<s:Button label="Select Tab 3" click="tn.selectedIndex=2" color="0x545454" />
+		</s:HGroup>
+		
+	</s:Panel>
+	
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/controls/TextAreaExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/TextAreaExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/TextAreaExample.mxml
new file mode 100644
index 0000000..c8892bd
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/TextAreaExample.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 skins.TDFPanelSkin;
+			
+			protected function changeHandler():void
+			{
+				txt.maxChars = this.maxChars.value;
+				txt.restrict = this.restrictStr.text;
+				txt.textFlow.textAlign = alignVal.selectedItem;
+				txt.textFlow.direction = direction.selectedItem;
+			}
+		]]>
+	</fx:Script>
+	
+	<s:Panel title="TextArea Sample"
+			 width="100%" height="100%" skinClass="skins.TDFPanelSkin">
+		
+		<s:HGroup  top="8" width="100%" height="100%" left="80">
+			<s:VGroup>
+				<s:HGroup verticalAlign="middle">
+					<s:Label text="Specify Max Character Input:"/>
+					<s:NumericStepper id="maxChars" maximum="200" value="100" stepSize="2" change="this.changeHandler()"/>
+				</s:HGroup>
+				<s:HGroup verticalAlign="middle">
+					<s:Label text="Specify Text Alignment:"/>
+					<s:DropDownList id="alignVal" prompt="left" change="this.changeHandler()">
+						<s:dataProvider>
+							<mx:ArrayList>
+								<fx:String>left</fx:String>
+								<fx:String>right</fx:String>
+								<fx:String>center</fx:String>
+								<fx:String>justify</fx:String>
+								<fx:String>start</fx:String>
+								<fx:String>end</fx:String>
+							</mx:ArrayList>
+						</s:dataProvider>
+					</s:DropDownList>
+				</s:HGroup>
+				<s:HGroup verticalAlign="middle">
+					<s:Label text="Direction:"/>
+					<s:DropDownList id="direction" prompt="ltr" change="this.changeHandler()">
+						<s:dataProvider>
+							<mx:ArrayList>
+								<fx:String>ltr</fx:String>
+								<fx:String>rtl</fx:String>
+							</mx:ArrayList>
+						</s:dataProvider>
+					</s:DropDownList>
+				</s:HGroup>
+				<s:HGroup verticalAlign="middle">
+					<s:Label text="Specify characters to restrict (use - for range):"/>
+					<s:TextInput id="restrictStr" change="this.changeHandler()" text="a-z 1-9"/> 
+				</s:HGroup>
+				<s:VGroup>
+					<s:Label text="Text:"/>
+					<s:TextArea id="txt" width="300" height="70" color="0x323232" horizontalCenter="0" verticalCenter="0" restrict="a-z 1-9"
+								change="this.changeHandler()"/>
+				</s:VGroup>
+			</s:VGroup>	
+			<s:Label width="200" color="#323232" top="20" right="80"
+					 text="TextArea is a text-entry control that lets users enter and edit multiple lines of richly formatted text. 
+It can display horizontal and vertical scrollbars for scrolling through the text and supports vertical scrolling with the mouse wheel. This sample also shows
+how you can restrict character input on the text area. The default when this is run will not allow the number 0 or caps based on the restrict range shown. The
+sample also shows how you can specify a direction on the text."/>
+		</s:HGroup>
+		
+	</s:Panel>
+</s:Application>


Mime
View raw message