You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@flex.apache.org by bi...@apache.org on 2014/11/04 20:16:07 UTC

[17/22] added in Android Skins

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/DateSpinnerSkin.as
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/DateSpinnerSkin.as b/tourdeflexmobile/src/spark/skins/android4/DateSpinnerSkin.as
new file mode 100644
index 0000000..d45e039
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/DateSpinnerSkin.as
@@ -0,0 +1,153 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT 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 spark.skins.android4
+{
+	import mx.core.ClassFactory;
+	import mx.core.IFactory;
+	import mx.core.IVisualElementContainer;
+	
+	import spark.components.DateSpinner;
+	import spark.components.SpinnerList;
+	import spark.components.SpinnerListContainer;
+	import spark.components.calendarClasses.DateSpinnerItemRenderer;
+	import spark.skins.mobile.supportClasses.MobileSkin;
+	
+	/**
+	 *  ActionScript-based skin for the DateSpinner in mobile applications.
+	 *  
+	 * @see spark.components.DateSpinner
+	 * 
+	 *  @langversion 3.0
+	 *  @playerversion AIR 3
+	 *  @productversion Flex 4.6
+	 *  
+	 */
+	public class DateSpinnerSkin extends MobileSkin
+	{
+		//--------------------------------------------------------------------------
+		//
+		//  Constructor
+		//
+		//--------------------------------------------------------------------------
+		/**
+		 *  Constructor.
+		 * 
+		 *  @langversion 3.0
+		 *  @playerversion AIR 3
+		 *  @productversion Flex 4.6
+		 */
+		public function DateSpinnerSkin()
+		{
+			super();
+		}
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Skin parts
+		//
+		//--------------------------------------------------------------------------
+		
+		/**
+		 *  Factory for creating dateItem list parts.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion AIR 3
+		 *  @productversion Flex 4.6
+		 */
+		public var dateItemList:IFactory;
+		
+		/**
+		 *  Skin part; container of dateItem list(s).
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion AIR 3
+		 *  @productversion Flex 4.6
+		 */
+		public var listContainer:IVisualElementContainer;
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Properties 
+		//
+		//--------------------------------------------------------------------------
+		/** 
+		 *  @copy spark.skins.spark.ApplicationSkin#hostComponent
+		 */
+		public var hostComponent:DateSpinner;
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Overridden Methods
+		//
+		//--------------------------------------------------------------------------
+		
+		/**
+		 *  @inheritDoc
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion AIR 3
+		 *  @productversion Flex 4.6
+		 */
+		override protected function createChildren():void
+		{
+			listContainer = new SpinnerListContainer();
+			
+			addChild(SpinnerListContainer(listContainer));		
+			
+			dateItemList = new ClassFactory(SpinnerList);		
+			(dateItemList as ClassFactory).properties = { itemRenderer: new ClassFactory(spark.components.calendarClasses.DateSpinnerItemRenderer), percentHeight : 100 };
+		}
+		
+		/**
+		 *  @inheritDoc
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion AIR 3
+		 *  @productversion Flex 4.6
+		 */
+		override protected function measure():void
+		{
+			measuredWidth = SpinnerListContainer(listContainer).getPreferredBoundsWidth();
+			measuredHeight = SpinnerListContainer(listContainer).getPreferredBoundsHeight();
+			measuredMinWidth = SpinnerListContainer(listContainer).getMinBoundsWidth();
+			measuredMinHeight = SpinnerListContainer(listContainer).getMinBoundsHeight();
+		}
+		
+		/**
+		 *  @inheritDoc
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion AIR 3
+		 *  @productversion Flex 4.6
+		 */
+		override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void
+		{
+			super.layoutContents(unscaledWidth, unscaledHeight);
+			
+			// Always set the SpinnerListContainer to its measured width, regardless of our size
+			var containerWidth:Number = SpinnerListContainer(listContainer).getPreferredBoundsWidth();
+			var containerHeight:Number = unscaledHeight;
+			
+			setElementSize(listContainer, containerWidth, containerHeight);
+			// if width is greater than necessary, center the component
+			setElementPosition(listContainer, Math.max((unscaledWidth - containerWidth)/2, 0), 0);
+		}
+		
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/HScrollBarSkin.as
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/HScrollBarSkin.as b/tourdeflexmobile/src/spark/skins/android4/HScrollBarSkin.as
new file mode 100644
index 0000000..d2cb3dd
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/HScrollBarSkin.as
@@ -0,0 +1,205 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT 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 spark.skins.android4
+{
+	
+	import mx.core.DPIClassification;
+	import mx.core.mx_internal;
+	
+	import spark.components.Button;
+	import spark.components.HScrollBar;
+	import spark.skins.mobile.supportClasses.MobileSkin;
+	
+	use namespace mx_internal;
+	
+	/**
+	 *  ActionScript-based skin for HScrollBar components in mobile applications. 
+	 * 
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10
+	 *  @playerversion AIR 2.5 
+	 *  @productversion Flex 4.5
+	 */
+	public class HScrollBarSkin extends MobileSkin 
+	{   
+		//--------------------------------------------------------------------------
+		//
+		//  Variables
+		//
+		//--------------------------------------------------------------------------
+		/**
+		 *  Constructor.
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 2.5
+		 *  @productversion Flex 4.5
+		 */
+		public function HScrollBarSkin()
+		{
+			super();
+			
+			minWidth = 20;
+			thumbSkinClass = HScrollBarThumbSkin;
+			var paddingBottom:int;
+			var paddingHorizontal:int;
+			
+			// Depending on density set our measured height
+			switch (applicationDPI)
+			{
+				case DPIClassification.DPI_640:
+				{
+					minHeight = 24;   
+					paddingBottom = HScrollBarThumbSkin.PADDING_BOTTOM_640DPI;
+					paddingHorizontal = HScrollBarThumbSkin.PADDING_HORIZONTAL_640DPI;
+					break;
+				}
+				case DPIClassification.DPI_480:
+				{
+					minHeight = 18;   
+					paddingBottom = HScrollBarThumbSkin.PADDING_BOTTOM_480DPI;
+					paddingHorizontal = HScrollBarThumbSkin.PADDING_HORIZONTAL_480DPI;
+					break;
+				}
+				case DPIClassification.DPI_320:
+				{
+					minHeight = 12;   
+					paddingBottom = HScrollBarThumbSkin.PADDING_BOTTOM_320DPI;
+					paddingHorizontal = HScrollBarThumbSkin.PADDING_HORIZONTAL_320DPI;
+					break;
+				}
+				case DPIClassification.DPI_240:
+				{
+					minHeight = 9;   
+					paddingBottom = HScrollBarThumbSkin.PADDING_BOTTOM_240DPI;
+					paddingHorizontal = HScrollBarThumbSkin.PADDING_HORIZONTAL_240DPI;
+					break;
+				}
+				case DPIClassification.DPI_120:
+				{
+					minHeight = 5;   
+					paddingBottom = HScrollBarThumbSkin.PADDING_BOTTOM_120DPI;
+					paddingHorizontal = HScrollBarThumbSkin.PADDING_HORIZONTAL_120DPI;
+					break;
+				}
+				default:
+				{
+					// default DPI_160
+					minHeight = 6;              
+					paddingBottom = HScrollBarThumbSkin.PADDING_BOTTOM_DEFAULTDPI;
+					paddingHorizontal = HScrollBarThumbSkin.PADDING_HORIZONTAL_DEFAULTDPI;
+					break;
+				}
+			}
+			
+			// The minimum width is set such that, at it's smallest size, the thumb appears
+			// as wide as it is high.
+			minThumbWidth = (minHeight - paddingBottom) + (paddingHorizontal * 2);   
+		}
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Variables
+		//
+		//--------------------------------------------------------------------------
+		/** 
+		 *  @copy spark.skins.spark.ApplicationSkin#hostComponent
+		 */
+		public var hostComponent:HScrollBar;
+		
+		/**
+		 *  Minimum width for the thumb 
+		 */
+		protected var minThumbWidth:Number;
+		
+		/**
+		 *  Skin to use for the thumb Button skin part
+		 */
+		protected var thumbSkinClass:Class;
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Skin parts 
+		//
+		//--------------------------------------------------------------------------
+		/**
+		 *  HScrollbar track skin part.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 2.5 
+		 *  @productversion Flex 4.5
+		 */  
+		public var track:Button;
+		
+		/**
+		 *  HScrollbar thumb skin part.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 2.5 
+		 *  @productversion Flex 4.5
+		 */  
+		public var thumb:Button;
+		
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Overridden methods
+		//
+		//--------------------------------------------------------------------------
+		/**
+		 *  @private 
+		 */ 
+		override protected function createChildren():void
+		{
+			// Create our skin parts if necessary: track and thumb.
+			if (!track)
+			{
+				// We don't want a visible track so we set the skin to MobileSkin
+				track = new Button();
+				track.setStyle("skinClass", spark.skins.mobile.supportClasses.MobileSkin);
+				track.width = minWidth;
+				track.height = minHeight;
+				addChild(track);
+			}
+			
+			if (!thumb)
+			{
+				thumb = new Button();
+				thumb.minWidth = minThumbWidth;
+				thumb.setStyle("skinClass", thumbSkinClass);
+				thumb.width = minHeight;
+				thumb.height = minHeight;
+				addChild(thumb);
+			}
+		}
+		
+		/**
+		 *  @private 
+		 */
+		override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void
+		{
+			super.layoutContents(unscaledWidth, unscaledHeight);
+			
+			setElementSize(track, unscaledWidth, unscaledHeight);
+		}
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/HScrollBarThumbSkin.as
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/HScrollBarThumbSkin.as b/tourdeflexmobile/src/spark/skins/android4/HScrollBarThumbSkin.as
new file mode 100644
index 0000000..5c63d15
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/HScrollBarThumbSkin.as
@@ -0,0 +1,169 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT 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 spark.skins.android4
+{
+	
+	import flash.display.CapsStyle;
+	import flash.display.JointStyle;
+	import flash.display.LineScaleMode;
+	
+	import mx.core.DPIClassification;
+	import mx.core.mx_internal;
+	
+	import spark.components.Button;
+	import spark.skins.mobile.supportClasses.MobileSkin;
+	
+	use namespace mx_internal;
+	
+	/**
+	 *  ActionScript-based skin for the HScrollBar thumb skin part in mobile applications. 
+	 * 
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10
+	 *  @playerversion AIR 2.5 
+	 *  @productversion Flex 4.5
+	 */
+	public class HScrollBarThumbSkin extends MobileSkin 
+	{
+		//--------------------------------------------------------------------------
+		//
+		//  Class constants
+		//
+		//--------------------------------------------------------------------------
+		
+		// These constants are also accessed from HScrollBarSkin
+		mx_internal static const PADDING_BOTTOM_640DPI:int = 10;
+		mx_internal static const PADDING_HORIZONTAL_640DPI:int = 8;
+		mx_internal static const PADDING_BOTTOM_480DPI:int = 8;
+		mx_internal static const PADDING_HORIZONTAL_480DPI:int = 6;
+		mx_internal static const PADDING_BOTTOM_320DPI:int = 5;
+		mx_internal static const PADDING_HORIZONTAL_320DPI:int = 4;
+		mx_internal static const PADDING_BOTTOM_240DPI:int = 4;
+		mx_internal static const PADDING_HORIZONTAL_240DPI:int = 3;
+		mx_internal static const PADDING_BOTTOM_120DPI:int = 2;
+		mx_internal static const PADDING_HORIZONTAL_120DPI:int = 2;
+		mx_internal static const PADDING_BOTTOM_DEFAULTDPI:int = 3;
+		mx_internal static const PADDING_HORIZONTAL_DEFAULTDPI:int = 2;
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Constructor
+		//
+		//--------------------------------------------------------------------------
+		/**
+		 *  Constructor.
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 2.5
+		 *  @productversion Flex 4.5
+		 */
+		public function HScrollBarThumbSkin()
+		{
+			super();
+			
+			// Depending on density set padding
+			switch (applicationDPI)
+			{
+				case DPIClassification.DPI_480:
+				{
+					paddingBottom = PADDING_BOTTOM_480DPI;
+					paddingHorizontal = PADDING_HORIZONTAL_480DPI;
+					break;
+				}
+				case DPIClassification.DPI_320:
+				{
+					paddingBottom = PADDING_BOTTOM_320DPI;
+					paddingHorizontal = PADDING_HORIZONTAL_320DPI;
+					break;
+				}
+				case DPIClassification.DPI_240:
+				{
+					paddingBottom = PADDING_BOTTOM_240DPI;
+					paddingHorizontal = PADDING_HORIZONTAL_240DPI;
+					break;
+				}
+				default:
+				{
+					paddingBottom = PADDING_BOTTOM_DEFAULTDPI;
+					paddingHorizontal = PADDING_HORIZONTAL_DEFAULTDPI;
+					break;
+				}
+			}
+		}
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Properties
+		//
+		//--------------------------------------------------------------------------
+		/** 
+		 * @copy spark.skins.spark.ApplicationSkin#hostComponent
+		 */
+		public var hostComponent:Button;
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Variables
+		//
+		//--------------------------------------------------------------------------    
+		/**
+		 *  Padding from bottom.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 2.5
+		 *  @productversion Flex 4.5
+		 */ 
+		protected var paddingBottom:int;
+		
+		/**
+		 *  Horizontal padding from left and right.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 2.5
+		 *  @productversion Flex 4.5
+		 */ 
+		protected var paddingHorizontal:int;
+		
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Overridden methods
+		//
+		//--------------------------------------------------------------------------
+		
+		/**
+		 *  @private
+		 */
+		override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void
+		{
+			super.drawBackground(unscaledWidth, unscaledHeight);
+			
+			var thumbHeight:Number = unscaledHeight - paddingBottom;
+			
+			graphics.beginFill(getStyle("thumbColor"), 1);
+			graphics.drawRect(paddingHorizontal + .5, 0.5, unscaledWidth - 2 * paddingHorizontal, thumbHeight);
+			
+			graphics.endFill();
+		}    
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/HSliderSkin.as
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/HSliderSkin.as b/tourdeflexmobile/src/spark/skins/android4/HSliderSkin.as
new file mode 100644
index 0000000..f89d3b9
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/HSliderSkin.as
@@ -0,0 +1,293 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT 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 spark.skins.android4
+{
+	import flash.display.BlendMode;
+	import flash.display.DisplayObject;
+	import flash.events.Event;
+	
+	import mx.core.ClassFactory;
+	import mx.core.IFactory;
+	
+	import spark.components.Button;
+	import spark.components.HSlider;
+	import spark.skins.android4.assets.HSliderTrack_filled;
+	import spark.skins.mobile.supportClasses.HSliderDataTip;
+	import spark.skins.mobile.supportClasses.MobileSkin;
+	
+	/**
+	 *  Android 4.x specific ActionScript-based skin for HSlider controls in mobile applications.
+	 * 
+	 *  <p>The base Flex implementation creates an HSlider with fixed height
+	 *  and variable width with a fixed-size thumb. As the height of the
+	 *  HSlider component increases, the vertical dimensions of the visible HSlider remain
+	 *  the same, and the HSlider stays vertically centered.</p>
+	 * 
+	 *  <p>The thumb and track implementations can be customized by subclassing
+	 *  this skin class and overriding the thumbSkinClass, trackSkinClass,
+	 *  and/or dataTipClass variables as necessary.</p>
+	 * 
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10
+	 *  @playerversion AIR 2.5 
+	 *  @productversion Flex 4.5
+	 */
+	public class HSliderSkin extends MobileSkin
+	{    
+		//--------------------------------------------------------------------------
+		//
+		//  Constructor
+		//
+		//--------------------------------------------------------------------------
+		
+		/**
+		 *  Constructor.
+		 * 
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 2.5 
+		 *  @productversion Flex 4.5
+		 * 
+		 */    
+		public function HSliderSkin()
+		{
+			super();
+			
+			thumbSkinClass = spark.skins.android4.HSliderThumbSkin;
+			trackSkinClass = spark.skins.android4.HSliderTrackSkin;
+			filledTrackSkinClass = spark.skins.android4.assets.HSliderTrack_filled;
+			dataTipClass = spark.skins.mobile.supportClasses.HSliderDataTip;
+			
+			blendMode = BlendMode.LAYER;
+		}
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Properties
+		//
+		//--------------------------------------------------------------------------
+		
+		/** 
+		 *  @copy spark.skins.spark.ApplicationSkin#hostComponent
+		 */
+		private var _hostComponent:HSlider;
+		
+		/**
+		 * @copy spark.skins.spark.ApplicationSkin#hostComponent
+		 */
+		public function get hostComponent():HSlider
+		{
+			return _hostComponent;
+		}
+		
+		public function set hostComponent(value:HSlider):void 
+		{
+			if (_hostComponent)
+				_hostComponent.removeEventListener(Event.CHANGE, thumbPositionChanged_handler);
+			_hostComponent = value;
+			if (_hostComponent)
+				_hostComponent.addEventListener(Event.CHANGE, thumbPositionChanged_handler);
+		}
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Skin parts 
+		//
+		//--------------------------------------------------------------------------
+		
+		/**
+		 *  HSlider track skin part
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 2.5 
+		 *  @productversion Flex 4.5
+		 */    
+		public var track:Button;
+		
+		/**
+		 *  HSlider track skin part that
+		 *  depicts area that is filled
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 2.5 
+		 *  @productversion Flex 4.5
+		 */    
+		public var filledTrack:DisplayObject;
+		
+		/**
+		 *  HSlider thumb skin part
+		 * 
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 2.5 
+		 *  @productversion Flex 4.5
+		 */    
+		public var thumb:Button;
+		
+		/**
+		 *  HSlider dataTip class factory
+		 * 
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 2.5 
+		 *  @productversion Flex 4.5
+		 */    
+		public var dataTip:IFactory;
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Variables
+		//
+		//--------------------------------------------------------------------------
+		
+		/**
+		 *  Specifies the skin class that will be used for the HSlider thumb.
+		 * 
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 2.5 
+		 *  @productversion Flex 4.5 
+		 */    
+		protected var thumbSkinClass:Class;
+		
+		/**
+		 *  Specifies the skin class that will be used for the HSlider track.
+		 * 
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 2.5 
+		 *  @productversion Flex 4.5 
+		 */    
+		protected var trackSkinClass:Class;
+		/**
+		 *  Specifies the skin class that will be used for the HSlider track's
+		 *  filled area.
+		 * 
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 2.5 
+		 *  @productversion Flex 4.5 
+		 */    
+		protected var filledTrackSkinClass:Class;
+		
+		/**
+		 *  Specifies the class that will be used for the HSlider datatip.
+		 * 
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 2.5 
+		 *  @productversion Flex 4.5 
+		 */    
+		protected var dataTipClass:Class;
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Overridden methods
+		//
+		//--------------------------------------------------------------------------
+		
+		/**
+		 *  @private 
+		 */ 
+		override protected function commitCurrentState():void
+		{
+			if (currentState == "disabled")
+				alpha = 0.5;
+			else if (currentState == "normal")
+				alpha = 1;
+		}    
+		
+		/**
+		 *  @private 
+		 */ 
+		override protected function createChildren():void
+		{
+			// Create our skin parts: track and thumb
+			track = new Button();
+			track.setStyle("skinClass", trackSkinClass);
+			addChild(track);
+			
+			filledTrack = new filledTrackSkinClass();
+			addChild(filledTrack);
+			
+			thumb = new Button();
+			thumb.setStyle("skinClass", thumbSkinClass);
+			addChild(thumb);
+			
+			// Set up the class factory for the dataTip
+			dataTip = new ClassFactory();
+			ClassFactory(dataTip).generator = dataTipClass;
+		}
+		
+		/**
+		 *  @private 
+		 *  The HSliderSkin width will be no less than the width of the thumb skin.
+		 *  The HSliderSkin height will be no less than the greater of the heights of
+		 *  the thumb and track skins.
+		 */ 
+		override protected function measure():void
+		{
+			measuredWidth = track.getPreferredBoundsWidth();
+			measuredHeight = Math.max(track.getPreferredBoundsHeight(), thumb.getPreferredBoundsHeight());
+			
+			measuredMinHeight = Math.max(track.getPreferredBoundsHeight(), thumb.getPreferredBoundsHeight());
+			measuredMinWidth = thumb.getPreferredBoundsWidth();
+		}
+		
+		/**
+		 *  @private
+		 */ 
+		override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void
+		{
+			super.layoutContents(unscaledWidth, unscaledHeight);
+			
+			// minimum height is no smaller than the larger of the thumb or track
+			var calculatedSkinHeight:int = Math.max(Math.max(thumb.getPreferredBoundsHeight(), track.getPreferredBoundsHeight()),
+				unscaledHeight);
+			
+			// minimum width is no smaller than the thumb
+			var calculatedSkinWidth:int = Math.max(thumb.getPreferredBoundsWidth(),
+				unscaledWidth);
+			
+			// once we know the skin height, center the thumb and track
+			thumb.y = Math.max(Math.round((calculatedSkinHeight - thumb.getPreferredBoundsHeight()) / 2), 0);
+			var calculatedTrackY:int = Math.max(Math.round((calculatedSkinHeight - track.getPreferredBoundsHeight()) / 2), 0);
+			
+			// size and position
+			setElementSize(thumb, thumb.getPreferredBoundsWidth(), thumb.getPreferredBoundsHeight()); // thumb does NOT scale
+			setElementSize(track, calculatedSkinWidth, track.getPreferredBoundsHeight()); // note track is NOT scaled vertically
+			setElementPosition(track, 0, calculatedTrackY);
+			
+			//Set size and position of filled area based on thumb's current location
+			var filledTrackWidth:Number = thumb.getLayoutBoundsX();
+			setElementSize(filledTrack, filledTrackWidth, track.getPreferredBoundsHeight()); // note track is NOT scaled vertically
+			setElementPosition(filledTrack, track.x + HSliderTrackSkin(track.skin).visibleTrackOffset  , calculatedTrackY);
+		}
+		
+		private function thumbPositionChanged_handler(event:Event):void
+		{
+			//Just trigger a redraw so that the filled area of the track updates itself
+			invalidateDisplayList();
+		}
+		
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/HSliderThumbSkin.as
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/HSliderThumbSkin.as b/tourdeflexmobile/src/spark/skins/android4/HSliderThumbSkin.as
new file mode 100644
index 0000000..517ff93
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/HSliderThumbSkin.as
@@ -0,0 +1,333 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT 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 spark.skins.android4
+{
+import flash.display.DisplayObject;
+
+import mx.core.DPIClassification;
+
+import spark.components.Button;
+import spark.skins.android4.assets.HSliderThumb_normal;
+import spark.skins.mobile.supportClasses.MobileSkin;
+
+/**
+ *  Android 4.x specific ActionScript-based skin for the HSlider thumb skin part in mobile applications.
+ *
+ *  <p>Note that this particular implementation defines a hit zone which is larger than
+ *  the visible thumb for better usability on mobile screens.</p>
+ *  
+ *  @langversion 3.0
+ *  @playerversion Flash 10
+ *  @playerversion AIR 2.5 
+ *  @productversion Flex 4.5
+ */
+public class HSliderThumbSkin extends MobileSkin
+{
+    //--------------------------------------------------------------------------
+    //
+    //  Constructor
+    //
+    //--------------------------------------------------------------------------
+    
+    /**
+     *  Constructor.
+     * 
+     *  @langversion 3.0
+     *  @playerversion Flash 10
+     *  @playerversion AIR 2.5 
+     *  @productversion Flex 4.5
+     * 
+     */
+    public function HSliderThumbSkin()
+    {
+        super();
+        
+		thumbNormalClass = spark.skins.android4.assets.HSliderThumb_normal;
+		thumbPressedClass = spark.skins.android4.assets.HSliderThumb_pressed;
+		
+        // set the dimensions to use based on the screen density
+        switch (applicationDPI)
+        {
+			case DPIClassification.DPI_640:
+			{
+				thumbImageWidth = 116;
+				thumbImageHeight = 116;
+				
+				hitZoneOffset = 20;
+				hitZoneSideLength = 160;
+				
+				break;              
+			}
+			case DPIClassification.DPI_480:
+			{
+				// Note provisional may need changes
+				thumbImageWidth = 88;
+				thumbImageHeight = 88;
+				
+				hitZoneOffset = 20;
+				hitZoneSideLength = 130;
+				
+				break;
+			}
+            case DPIClassification.DPI_320:
+            {
+                thumbImageWidth = 58;
+                thumbImageHeight = 58;
+                
+                hitZoneOffset = 10;
+                hitZoneSideLength = 80;
+                
+                break;              
+            }
+			case DPIClassification.DPI_240:
+			{
+				thumbImageWidth = 44;
+				thumbImageHeight = 44;
+				
+				hitZoneOffset = 10;
+				hitZoneSideLength = 65;
+				
+				break;
+			}
+			case DPIClassification.DPI_120:
+			{
+				thumbImageWidth = 22;
+				thumbImageHeight = 22;
+				
+				hitZoneOffset = 5;
+				hitZoneSideLength = 33;
+				
+				break;
+			}
+            default:
+            {
+                // default DPI_160
+                thumbImageWidth = 29;
+                thumbImageHeight = 29;
+                
+                hitZoneOffset = 5;
+                hitZoneSideLength = 40;
+                
+                break;
+            }
+                
+        }
+    }
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Properties
+    //
+    //--------------------------------------------------------------------------
+    
+    /** 
+     * @copy spark.skins.spark.ApplicationSkin#hostComponent
+     */
+    public var hostComponent:Button;
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Variables
+    //
+    //--------------------------------------------------------------------------
+    
+    // FXG thumb classes
+    /**
+     *  Specifies the FXG class to use when the thumb is in the normal state
+     *
+     *  @langversion 3.0
+     *  @playerversion Flash 10
+     *  @playerversion AIR 2.5
+     *  @productversion Flex 4.5
+     */    
+    protected var thumbNormalClass:Class;
+    
+    /**
+     *  Specifies the FXG class to use when the thumb is in the pressed state
+     *
+     *  @langversion 3.0
+     *  @playerversion Flash 10
+     *  @playerversion AIR 2.5
+     *  @productversion Flex 4.5
+     */    
+    protected var thumbPressedClass:Class;
+    
+    /**
+     *  Specifies the DisplayObject to use when the thumb is in the normal state
+     *
+     *  @langversion 3.0
+     *  @playerversion Flash 10
+     *  @playerversion AIR 2.5
+     *  @productversion Flex 4.5
+     */    
+    protected var thumbSkin_normal:DisplayObject;
+    
+    /**
+     *  Specifies the DisplayObject to use when the thumb is in the pressed state
+     *
+     *  @langversion 3.0
+     *  @playerversion Flash 10
+     *  @playerversion AIR 2.5
+     *  @productversion Flex 4.5
+     */    
+    protected var thumbSkin_pressed:DisplayObject;
+    
+    /**
+     *  Specifies the current DisplayObject that should be shown
+     *
+     *  @langversion 3.0
+     *  @playerversion Flash 10
+     *  @playerversion AIR 2.5
+     *  @productversion Flex 4.5
+     */    
+    protected var currentThumbSkin:DisplayObject;
+    
+    /**
+     *  Width of the overall thumb image
+     *
+     *  @langversion 3.0
+     *  @playerversion Flash 10
+     *  @playerversion AIR 2.5
+     *  @productversion Flex 4.5
+     */    
+    protected var thumbImageWidth:int;
+    
+    /**
+     *  Height of the overall thumb image
+     *
+     *  @langversion 3.0
+     *  @playerversion Flash 10
+     *  @playerversion AIR 2.5
+     *  @productversion Flex 4.5
+     */    
+    protected var thumbImageHeight:int;
+    
+    /**
+     *  Length of the sizes of the hitzone (assumed to be square)
+     *
+     *  @langversion 3.0
+     *  @playerversion Flash 10
+     *  @playerversion AIR 2.5
+     *  @productversion Flex 4.5
+     */
+    protected var hitZoneSideLength:int;
+    
+    /**
+     *  Distance between the left edge of the hitzone and the left edge
+     *  of the thumb
+     *
+     *  @langversion 3.0
+     *  @playerversion Flash 10
+     *  @playerversion AIR 2.5
+     *  @productversion Flex 4.5
+     */
+    protected var hitZoneOffset:int;
+    
+    /**
+     *  @private
+     *  Remember which state is currently being displayed 
+     */    
+    private var displayedState:String;
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Overridden methods
+    //
+    //--------------------------------------------------------------------------
+    
+    /**
+     *  @private 
+     */ 
+    override protected function commitCurrentState():void
+    {
+        if (currentState == "up")
+        {
+            // show the normal button
+            if (!thumbSkin_normal)
+            {
+                thumbSkin_normal = new thumbNormalClass();
+                addChild(thumbSkin_normal);
+            }
+            else
+            {
+                thumbSkin_normal.visible = true;                
+            }
+            currentThumbSkin = thumbSkin_normal;
+            
+            // hide the pressed button
+            if (thumbSkin_pressed)
+                thumbSkin_pressed.visible = false;
+        }
+        else if (currentState == "down")
+        {
+            // show the pressed button
+            if (!thumbSkin_pressed)
+            {
+                thumbSkin_pressed = new thumbPressedClass();
+                addChild(thumbSkin_pressed);
+            }
+            else
+            {
+                thumbSkin_pressed.visible = true;
+            }
+            currentThumbSkin = thumbSkin_pressed;
+            
+            // hide the normal button
+            if (thumbSkin_normal)
+                thumbSkin_normal.visible = false;
+        }
+        
+        displayedState = currentState;
+        
+        invalidateDisplayList();
+    }
+    
+    /**
+     *  @private 
+     */ 
+    override protected function measure():void
+    {
+        measuredWidth = thumbImageWidth;
+        measuredHeight = thumbImageHeight;
+    }
+    
+    /**
+     *  @private 
+     */ 
+    override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void
+    {
+        super.layoutContents(unscaledWidth, unscaledHeight);
+        
+        setElementSize(currentThumbSkin, unscaledWidth, unscaledHeight);
+        setElementPosition(currentThumbSkin, 0, 0)
+    }
+    
+    /**
+     *  @private 
+     */ 
+    override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void
+    {
+        // put in a larger hit zone than the thumb
+        graphics.beginFill(0xffffff, 0);
+        graphics.drawRect(-hitZoneOffset, -hitZoneOffset, hitZoneSideLength, hitZoneSideLength);
+        graphics.endFill();
+    }
+}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/HSliderTrackSkin.as
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/HSliderTrackSkin.as b/tourdeflexmobile/src/spark/skins/android4/HSliderTrackSkin.as
new file mode 100644
index 0000000..57dc8f3
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/HSliderTrackSkin.as
@@ -0,0 +1,227 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT 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 spark.skins.android4
+{
+	import flash.display.DisplayObject;
+	
+	import mx.core.DPIClassification;
+	
+	import spark.components.Button;
+	import spark.skins.android4.assets.HSliderTrack;
+	import spark.skins.mobile.supportClasses.MobileSkin;
+	
+	/**
+	 *  ActionScript-based skin for the HSlider track skin part in mobile applications. 
+	 * 
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10
+	 *  @playerversion AIR 2.5 
+	 *  @productversion Flex 4.5
+	 */
+	public class HSliderTrackSkin extends MobileSkin
+	{
+		//--------------------------------------------------------------------------
+		//
+		//  Constructor
+		//
+		//--------------------------------------------------------------------------
+		
+		/**
+		 *  Constructor.
+		 * 
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 2.5 
+		 *  @productversion Flex 4.5
+		 * 
+		 */
+		public function HSliderTrackSkin()
+		{
+			super();
+			
+			trackClass = spark.skins.android4.assets.HSliderTrack;
+			
+			// set the right dimensions to use based on the screen density
+			switch (applicationDPI)
+			{
+				case DPIClassification.DPI_640:
+				{
+					trackWidth = 1200;
+					trackHeight = 8;
+					
+					visibleTrackOffset = 48;
+					
+					break;
+				}
+				case DPIClassification.DPI_480:
+				{
+					trackWidth = 900;
+					trackHeight = 6;
+					
+					visibleTrackOffset = 38;
+					
+					break;
+				}
+				case DPIClassification.DPI_320:
+				{
+					trackWidth = 600;
+					trackHeight = 4;
+					
+					visibleTrackOffset = 24;
+					
+					break;
+				}
+				case DPIClassification.DPI_240:
+				{
+					trackWidth = 450;
+					trackHeight = 3;
+					
+					visibleTrackOffset = 18;
+					
+					break;
+				}
+				case DPIClassification.DPI_120:
+				{
+					trackWidth = 225;
+					trackHeight = 2;
+					
+					visibleTrackOffset = 9;
+					
+					break;
+				}
+				default:
+				{
+					// default DPI_160
+					trackWidth = 300;
+					trackHeight = 2;
+					
+					visibleTrackOffset = 12;
+					
+					break;
+				}
+			}
+		}
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Properties
+		//
+		//--------------------------------------------------------------------------
+		
+		/** 
+		 * @copy spark.skins.spark.ApplicationSkin#hostComponent
+		 */
+		public var hostComponent:Button;
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Variables
+		//
+		//--------------------------------------------------------------------------
+		
+		/**
+		 *  Specifies the FXG class to use for the track image
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 2.5
+		 *  @productversion Flex 4.5
+		 */
+		protected var trackClass:Class;
+		
+		/**
+		 *  Specifies the DisplayObject for the track image
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 2.5
+		 *  @productversion Flex 4.5
+		 */
+		protected var trackSkin:DisplayObject;
+		
+		/**
+		 *  Specifies the track image width
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 2.5
+		 *  @productversion Flex 4.5
+		 */    
+		protected var trackWidth:int;
+		
+		/**
+		 *  Specifies the track image height
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 2.5
+		 *  @productversion Flex 4.5
+		 */
+		protected var trackHeight:int;
+		
+		/**
+		 *  Specifies the offset from the left and right edge to where
+		 *  the visible track begins. This should match the offset in the FXG assets.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 2.5
+		 *  @productversion Flex 4.5
+		 */
+		public var visibleTrackOffset:int;
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Overridden methods
+		//
+		//--------------------------------------------------------------------------
+		
+		/**
+		 *  @private 
+		 */ 
+		override protected function createChildren():void
+		{
+			trackSkin = new trackClass();
+			addChild(trackSkin);
+		}
+		
+		/**
+		 *  @private 
+		 */ 
+		override protected function measure():void
+		{
+			measuredWidth = trackWidth;
+			measuredHeight = trackHeight;
+		}
+		
+		/**
+		 *  @private 
+		 */ 
+		override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void
+		{
+			super.layoutContents(unscaledWidth, unscaledHeight);
+			
+			var unscaledTrackWidth:int = unscaledWidth - (2 * visibleTrackOffset);
+			setElementSize(trackSkin, unscaledTrackWidth, unscaledHeight);
+			setElementPosition(trackSkin, visibleTrackOffset, 0);
+		}
+		
+	}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/ListSkin.as
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/ListSkin.as b/tourdeflexmobile/src/spark/skins/android4/ListSkin.as
new file mode 100644
index 0000000..c78a212
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/ListSkin.as
@@ -0,0 +1,204 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT 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 spark.skins.android4
+{   
+	import flash.display.BlendMode;
+	import flash.display.DisplayObject;
+	import flash.display.Sprite;
+	
+	import mx.core.ClassFactory;
+	import mx.core.mx_internal;
+	
+	import spark.components.DataGroup;
+	import spark.components.List;
+	import spark.components.Scroller;
+	import spark.layouts.HorizontalAlign;
+	import spark.layouts.VerticalLayout;
+	import spark.skins.mobile.supportClasses.MobileSkin;
+	//import skins.Scrollers;
+
+	//import skins.Scroller;
+	
+	use namespace mx_internal;
+	
+	/**
+	 *  ActionScript-based skin for the List components in mobile applications. 
+	 * 
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10
+	 *  @playerversion AIR 2.5 
+	 *  @productversion Flex 4.5
+	 */
+	public class ListSkin extends MobileSkin
+	{
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Constructor
+		//
+		//--------------------------------------------------------------------------
+		/**
+		 *  Constructor.
+		 * 
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 2.5 
+		 *  @productversion Flex 4.5
+		 * 
+		 */
+		public function ListSkin()
+		{
+			super();
+			
+			minWidth = 112;
+			blendMode = BlendMode.NORMAL;
+		}
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Variables
+		//
+		//--------------------------------------------------------------------------
+		/** 
+		 *  @copy spark.skins.spark.ApplicationSkin#hostComponent
+		 */
+		public var hostComponent:List;
+		
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Skin parts 
+		//
+		//--------------------------------------------------------------------------
+		/**
+		 *  Scroller skin part.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 2.5 
+		 *  @productversion Flex 4.5
+		 */ 
+		public var scroller:Scroller;
+		
+		/**
+		 *  DataGroup skin part.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 2.5 
+		 *  @productversion Flex 4.5
+		 */ 
+		public var dataGroup:DataGroup;
+		
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Overridden methods
+		//
+		//--------------------------------------------------------------------------
+		/**
+		 *  @private 
+		 */ 
+		override protected function commitCurrentState():void
+		{
+			super.commitCurrentState();
+			
+			alpha = currentState.indexOf("disabled") == -1 ? 1 : 0.5;
+		}
+		
+		
+		/**
+		 *  @private 
+		 */
+		override protected function createChildren():void
+		{
+			if (!dataGroup)
+			{
+				// Create data group layout
+				var layout:VerticalLayout = new VerticalLayout();
+				layout.requestedMinRowCount = 5;
+				layout.horizontalAlign = HorizontalAlign.JUSTIFY;
+				layout.gap = 0;
+				
+				// Create data group
+				dataGroup = new DataGroup();
+				dataGroup.layout = layout;
+				dataGroup.itemRenderer = new ClassFactory(spark.components.LabelItemRenderer);
+			}
+			if (!scroller)
+			{
+				// Create scroller
+				scroller = new Scroller();
+				scroller.minViewportInset = 0;
+				scroller.hasFocusableChildren = false;
+		
+			//	scroller.pullEnabled = false;
+			//	scroller.bounceEnabled = false;
+			//	scroller.scrollSnappingMode = "center";
+
+				addChild(scroller);
+			}
+			
+			// Associate scroller with data group
+			if (!scroller.viewport)
+			{
+				scroller.viewport = dataGroup;
+				
+			}
+		}
+		
+		/**
+		 *  @private 
+		 */
+		override protected function measure():void
+		{
+			measuredWidth = scroller.getPreferredBoundsWidth();
+			measuredHeight = scroller.getPreferredBoundsHeight();
+
+		}
+		
+		/**
+		 *  @private 
+		 */
+		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
+		{   
+			super.updateDisplayList(unscaledWidth, unscaledHeight);
+			
+			var borderWidth:int = getStyle("borderVisible") ? 1 : 0;
+			
+			// Background
+			graphics.beginFill(getStyle("contentBackgroundColor"), getStyle("contentBackgroundAlpha"));
+			graphics.drawRect(borderWidth, borderWidth, unscaledWidth - 2 * borderWidth, unscaledHeight - 2 * borderWidth);
+			graphics.endFill();
+			
+			// Border 
+			if (getStyle("borderVisible"))
+			{
+				graphics.lineStyle(.5, getStyle("borderColor"), getStyle("borderAlpha"), true); 
+				graphics.drawRect(0, 0, unscaledWidth - 1, unscaledHeight - 1);
+			}	
+			// Scroller
+			//scroller.minViewportInset = borderWidth;
+			setElementSize(scroller, unscaledWidth, unscaledHeight);
+			setElementPosition(scroller, 0, 0);
+			
+		}
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/MobileGridHeaderButtonBarSkin.as
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/MobileGridHeaderButtonBarSkin.as b/tourdeflexmobile/src/spark/skins/android4/MobileGridHeaderButtonBarSkin.as
new file mode 100644
index 0000000..73ce2b0
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/MobileGridHeaderButtonBarSkin.as
@@ -0,0 +1,90 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT 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 spark.skins.android4
+{
+	import spark.components.ButtonBarButton;
+	import spark.components.DataGroup;
+	import spark.layouts.HorizontalLayout;
+	import spark.layouts.VerticalAlign;
+	import spark.skins.android4.ButtonBarSkin;
+	import spark.skins.mobile.supportClasses.ButtonBarButtonClassFactory;
+	
+	public class MobileGridHeaderButtonBarSkin extends ButtonBarSkin
+	{
+		
+		public function MobileGridHeaderButtonBarSkin()
+		{
+			super();
+		}
+		
+		override protected function createChildren():void
+		{
+			if (!firstButton)
+			{
+				firstButton = new ButtonBarButtonClassFactory(ButtonBarButton);
+				firstButton.skinClass = spark.skins.android4.ButtonBarFirstButtonSkin;
+			}
+			
+			if (!lastButton)
+			{
+				lastButton = new ButtonBarButtonClassFactory(ButtonBarButton);
+				lastButton.skinClass = spark.skins.android4.ButtonBarFirstButtonSkin;
+			}
+			
+			if (!middleButton)
+			{
+				middleButton = new ButtonBarButtonClassFactory(ButtonBarButton);
+				middleButton.skinClass = spark.skins.android4.ButtonBarMiddleButtonSkin;
+			}
+			
+			// create the data group to house the buttons
+			if (!dataGroup)
+			{
+				dataGroup = new DataGroup();
+				var hLayout:HorizontalLayout = new HorizontalLayout();
+				hLayout.gap = 0;
+				hLayout.verticalAlign = VerticalAlign.CONTENT_JUSTIFY;
+				hLayout.useVirtualLayout = false;
+				
+				dataGroup.layout = hLayout;
+				addChild(dataGroup);
+			}
+		}
+		
+		/**
+		 *  @private
+		 */
+		override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void
+		{
+			super.drawBackground(unscaledWidth, unscaledHeight);
+			
+			// backgroundAlpha style is not supported by ButtonBar
+			// TabbedViewNavigatorSkin sets a hard-coded value to support
+			// overlayControls
+			var backgroundAlphaValue:* = getStyle("backgroundAlpha");
+			var backgroundAlpha:Number = (backgroundAlphaValue === undefined)
+				? 1 : getStyle("backgroundAlpha");
+			
+			graphics.beginFill(getStyle("chromeColor"), backgroundAlpha);
+			graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
+			graphics.endFill();
+		}
+	}
+}
+

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/MobileGridSkin.as
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/MobileGridSkin.as b/tourdeflexmobile/src/spark/skins/android4/MobileGridSkin.as
new file mode 100644
index 0000000..977b149
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/MobileGridSkin.as
@@ -0,0 +1,159 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT 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 spark.skins.android4
+{
+	import flash.display.BlendMode;
+	
+	import mx.core.ClassFactory;
+	import mx.core.DPIClassification;
+	import mx.core.mx_internal;
+	
+	import spark.components.DataGroup;
+	import spark.components.LabelItemRenderer;
+	import spark.components.MobileGrid;
+	import spark.components.Scroller;
+	import spark.components.supportClasses.MobileGridHeader;
+	import spark.layouts.HorizontalAlign;
+	import spark.layouts.VerticalLayout;
+	import spark.skins.mobile.supportClasses.MobileSkin;
+	
+	use namespace mx_internal;
+	
+	public class MobileGridSkin extends MobileSkin
+	{
+		public var hostComponent:MobileGrid;
+		// skin parts
+		public var headerGroup:MobileGridHeader;
+		public var scroller:Scroller;
+		public var dataGroup:DataGroup;
+		
+		
+		public function MobileGridSkin()
+		{
+			super();
+			minWidth = 112;
+			blendMode = BlendMode.NORMAL;
+			switch (applicationDPI)
+			{
+				case DPIClassification.DPI_320:
+				case DPIClassification.DPI_480:
+					minWidth = 200;
+					break;
+				case DPIClassification.DPI_160:
+				case DPIClassification.DPI_240:
+				default:
+					minWidth = 100;
+					break;
+			}
+		}
+		
+		override protected function commitCurrentState():void
+		{
+			super.commitCurrentState();
+			alpha = currentState.indexOf("disabled") == -1 ? 1 : 0.5;
+		}
+		
+		
+		/**
+		 *  @private
+		 */
+		override protected function createChildren():void
+		{
+			
+			if (!dataGroup)
+			{
+				// Create data group layout
+				var layout:VerticalLayout = new VerticalLayout();
+				layout.requestedMinRowCount = 5;
+				layout.horizontalAlign = HorizontalAlign.JUSTIFY;
+				layout.gap = 0;			
+				// Create data group
+				dataGroup = new DataGroup();
+				dataGroup.layout = layout;
+				dataGroup.itemRenderer = new ClassFactory(LabelItemRenderer);
+			}
+			if (!scroller)
+			{
+				// Create scroller
+				scroller = new Scroller();
+				scroller.minViewportInset = 1;
+				scroller.hasFocusableChildren = false;
+				scroller.ensureElementIsVisibleForSoftKeyboard = false;
+				addChild(scroller);
+			}
+			
+			// Associate scroller with data group
+			if (!scroller.viewport)
+			{
+				scroller.viewport = dataGroup;
+			}
+					
+			/* add after, for the drop shadow*/
+			
+			headerGroup = new MobileGridHeader();
+			headerGroup.id = "hg";
+			addChild(headerGroup);
+		}
+		
+		/**
+		 *  @private
+		 */
+		override protected function measure():void
+		{
+			measuredWidth = scroller.getPreferredBoundsWidth();
+			measuredHeight = scroller.getPreferredBoundsHeight() + headerGroup.getPreferredBoundsHeight();
+		}
+		
+		/**
+		 *  @private
+		 */
+		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
+		{
+			super.updateDisplayList(unscaledWidth, unscaledHeight);
+			
+			var borderWidth:int = getStyle("borderVisible") ? 1 : 0;
+			var headerHeight:Number = headerGroup.getPreferredBoundsHeight();
+			
+			// Background
+			graphics.beginFill(getStyle("contentBackgroundColor"), getStyle("contentBackgroundAlpha"));
+			graphics.drawRect(borderWidth, borderWidth, unscaledWidth - 2 * borderWidth, unscaledHeight - 2 * borderWidth);
+			graphics.endFill();
+			
+			// Border
+			if (getStyle("borderVisible"))
+			{
+				graphics.lineStyle(1, getStyle("borderColor"), getStyle("borderAlpha"), true);
+				graphics.drawRect(0, 0, unscaledWidth - 1, unscaledHeight - 1);
+			}
+			
+			// Header
+			setElementSize(headerGroup, unscaledWidth, headerHeight);
+			setElementPosition(headerGroup, 0, 0);
+			
+			//Shadow
+			//setElementSize(headerShadow, unscaledWidth, headerShadow.height);
+			//setElementPosition(headerShadow, 0, headerHeight);
+			// Scroller
+			scroller.minViewportInset = borderWidth;
+			setElementSize(scroller, unscaledWidth, unscaledHeight - headerHeight);
+			setElementPosition(scroller, 0, headerHeight);
+		}
+	}
+}
+

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/RadioButtonSkin.as
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/RadioButtonSkin.as b/tourdeflexmobile/src/spark/skins/android4/RadioButtonSkin.as
new file mode 100644
index 0000000..fd74645
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/RadioButtonSkin.as
@@ -0,0 +1,253 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT 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 spark.skins.android4
+{
+
+import flash.display.DisplayObject;
+
+import mx.core.DPIClassification;
+
+import spark.skins.android4.assets.RadioButton_up;
+import spark.skins.mobile.supportClasses.SelectableButtonSkinBase;
+
+/**
+ *  ActionScript-based skin for RadioButton controls in mobile applications. 
+ * 
+ * @see spark.components.RadioButton
+ * 
+ *  @langversion 3.0
+ *  @playerversion Flash 10
+ *  @playerversion AIR 2.5 
+ *  @productversion Flex 4.5
+ */
+public class RadioButtonSkin extends SelectableButtonSkinBase
+{
+    //--------------------------------------------------------------------------
+    //
+    //  Class constants
+    //
+    //--------------------------------------------------------------------------
+    
+    /**
+     *  @private
+     */
+    static private const exclusions:Array = ["labelDisplay", "labelDisplayShadow"];
+	
+	//--------------------------------------------------------------------------
+	//
+	//  Member variables
+	//
+	//--------------------------------------------------------------------------
+	
+	protected var symbolOffsetX:Number;
+	protected var symbolOffsetY:Number;
+	protected var iconWidth:Number;
+	protected var iconHeight:Number;
+	protected var symbolWidth:Number;
+	protected var symbolHeight:Number;
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Constructor
+    //
+    //--------------------------------------------------------------------------
+    
+    /**
+     *  Constructor.
+     * 
+     *  @langversion 3.0
+     *  @playerversion Flash 10
+     *  @playerversion AIR 2.5 
+     *  @productversion Flex 4.5
+     * 
+     */
+    public function RadioButtonSkin()
+    {
+        super();
+        
+        layoutPaddingLeft = 0;
+        layoutPaddingRight = 0;
+        layoutPaddingTop = 0;
+        layoutPaddingBottom = 0;
+
+		upIconClass = spark.skins.android4.assets.RadioButton_up;
+		upSelectedIconClass = spark.skins.android4.assets.RadioButton_up;
+		downIconClass = spark.skins.android4.assets.RadioButton_down;
+		downSelectedIconClass = spark.skins.android4.assets.RadioButton_down;
+		upSymbolIconClass =  null;
+		downSymbolIconClass =  null;
+		upSymbolIconSelectedClass = spark.skins.android4.assets.RadioButton_upSymbolSelected;
+		downSymbolIconSelectedClass = spark.skins.android4.assets.RadioButton_downSymbolSelected;
+		
+        switch (applicationDPI)
+        {
+			case DPIClassification.DPI_640:
+			{
+				
+				layoutGap = 16;
+				minWidth = 128;
+				minHeight = 128;
+				iconWidth = 128;
+				iconHeight = 128;
+				symbolWidth = 44;
+				symbolHeight = 44;
+				symbolOffsetX = 44;
+				symbolOffsetY = 44;
+				
+				break;
+			}
+            case DPIClassification.DPI_480:
+            {
+                
+				layoutGap = 12;
+				minWidth = 96;
+				minHeight = 96;
+				iconWidth = 96;
+				iconHeight = 96;
+				symbolWidth = 33;
+				symbolHeight = 33;
+				symbolOffsetX = 33;
+				symbolOffsetY = 33;
+                
+                break;
+            }
+            case DPIClassification.DPI_320:
+            {
+                
+				layoutGap = 8;
+				minWidth = 64;
+				minHeight = 64;
+				iconWidth = 64;
+				iconHeight = 64;
+				symbolWidth = 22;
+				symbolHeight = 22;
+				symbolOffsetX = 22;
+				symbolOffsetY = 22;
+                
+                break;
+            }
+            case DPIClassification.DPI_240:
+            {
+                
+				layoutGap = 6;
+				minWidth = 48;
+				minHeight = 48;
+				iconWidth = 48;
+				iconHeight = 48;
+				symbolWidth = 16.5;
+				symbolHeight = 16.5;
+				symbolOffsetX = 16.5;
+				symbolOffsetY = 16.5;
+                
+                break;
+            }
+			case DPIClassification.DPI_120:
+			{
+				
+				layoutGap = 3;
+				minWidth = 24;
+				minHeight = 24;
+				iconWidth = 24;
+				iconHeight = 24;
+				symbolWidth = 8.25;
+				symbolHeight = 8.25;
+				symbolOffsetX = 8.25;
+				symbolOffsetY = 8.25;
+				
+				break;
+			}
+            default:
+            {
+				
+                layoutGap = 4;
+                minWidth = 32;
+                minHeight = 32;
+				iconWidth = 32;
+				iconHeight = 32;
+				symbolWidth = 11;
+				symbolHeight = 11;
+				symbolOffsetX = 11;
+				symbolOffsetY = 11;
+                
+                break;
+            }
+        }
+    }
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Overridden methods
+    //
+    //--------------------------------------------------------------------------
+    
+    /**
+     *  @private
+     *  RadioButton <code>chromeColor</code> is drawn to match the FXG ellipse
+     *  shape and position.
+     */
+    override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void
+    {
+        // super draws a transparent hit zone
+        super.drawBackground(unscaledWidth, unscaledHeight);
+
+        // get the size and position of iconDisplay
+        var currentIcon:DisplayObject = getIconDisplay();
+        
+        graphics.beginFill(getStyle("chromeColor"));
+        graphics.drawEllipse(currentIcon.x + 1, currentIcon.y + 1, currentIcon.width - 2, currentIcon.height - 2);
+        graphics.endFill();
+    }
+    
+    /**
+     *  @private
+     */
+    override protected function get focusSkinExclusions():Array 
+    {
+        return exclusions;
+    }
+	
+	override protected function commitCurrentState():void
+	{
+		super.commitCurrentState();
+		if(symbolIcon != null)
+		{
+			symbolIcon.width = symbolWidth;
+			symbolIcon.height = symbolHeight;
+		}
+		var iconDisplay:DisplayObject = getIconDisplay(); 
+		if(iconDisplay != null)
+		{
+			iconDisplay.width = iconWidth;
+			iconDisplay.height = iconHeight;
+		}
+	}
+	
+	override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void
+	{
+		super.layoutContents(unscaledWidth, unscaledHeight);
+		// position the symbols to align with the background "icon"
+		if (symbolIcon)
+		{
+			var currentIcon:DisplayObject = getIconDisplay();
+			setElementPosition(symbolIcon, symbolOffsetX, symbolOffsetY);
+		}
+	}
+}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/ScrollingStageTextAreaSkin.as
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/ScrollingStageTextAreaSkin.as b/tourdeflexmobile/src/spark/skins/android4/ScrollingStageTextAreaSkin.as
new file mode 100644
index 0000000..8064681
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/ScrollingStageTextAreaSkin.as
@@ -0,0 +1,53 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT 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 spark.skins.android4
+{
+import flash.display.DisplayObjectContainer;
+import flash.events.MouseEvent;
+
+import spark.components.supportClasses.IStyleableEditableText;
+import spark.components.supportClasses.ScrollableStageText;
+
+/**
+ *  ActionScript-based skin for TextArea controls in mobile applications that uses a
+ *  ScrollableStageText class for the text display.
+ *  <p> and can be used in scrollable forms while allowing precise control of keyboard input.</p>
+ *
+ *  @see spark.components.TextArea
+ *  @see spark.components.supportClasses.ScrollableStageText
+ *
+ *  @langversion 3.0
+ *  @playerversion AIR 3.0
+ *  @productversion Flex 4.12
+ */
+public class ScrollingStageTextAreaSkin extends StageTextAreaSkin
+{
+    public function ScrollingStageTextAreaSkin()
+    {
+        super();
+    }
+
+    override protected function createTextDisplay():IStyleableEditableText
+    {
+        return new ScrollableStageText(multiline);
+    }
+
+}
+}

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/ScrollingStageTextInputSkin.as
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/ScrollingStageTextInputSkin.as b/tourdeflexmobile/src/spark/skins/android4/ScrollingStageTextInputSkin.as
new file mode 100644
index 0000000..75fbee6
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/ScrollingStageTextInputSkin.as
@@ -0,0 +1,54 @@
+
+
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+package spark.skins.android4
+{
+import flash.display.DisplayObjectContainer;
+import flash.events.MouseEvent;
+import spark.components.supportClasses.IStyleableEditableText;
+import spark.components.supportClasses.ScrollableStageText;
+
+/**
+ *  ActionScript-based skin for TextInput controls in mobile applications that uses a
+ *  ScrollableStageText class for the text display
+ *  <p> and can be used in scrollable forms while allowing precise control of keyboard input.</p>
+ *
+ *  @see spark.components.TextInput
+ *  @see spark.components.supportClasses.ScrollableStageText
+ *
+ *  @langversion 3.0
+ *  @playerversion AIR 3.0
+ *  @productversion Flex 4.12
+ */
+public class ScrollingStageTextInputSkin extends StageTextInputSkin
+{
+    public function ScrollingStageTextInputSkin()
+    {
+        super();
+    }
+
+    override protected function createTextDisplay():IStyleableEditableText
+    {
+        return new ScrollableStageText(multiline);
+    }
+
+}
+}

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/SpinnerListContainerSkin.as
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/SpinnerListContainerSkin.as b/tourdeflexmobile/src/spark/skins/android4/SpinnerListContainerSkin.as
new file mode 100644
index 0000000..a626c49
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/SpinnerListContainerSkin.as
@@ -0,0 +1,327 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT 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 spark.skins.android4
+{
+	import flash.display.Graphics;
+	import flash.display.InteractiveObject;
+	import flash.display.Sprite;
+	
+	import mx.core.DPIClassification;
+	import mx.core.mx_internal;
+	
+	import spark.components.Group;
+	import spark.components.SpinnerListContainer;
+	import spark.layouts.HorizontalLayout;
+	import spark.skins.android4.assets.SpinnerListContainerBackground;
+	import spark.skins.android4.assets.SpinnerListContainerSelectionIndicator;
+	import spark.skins.android4.assets.SpinnerListContainerShadow;
+	import spark.skins.mobile.supportClasses.MobileSkin;
+	
+	use namespace mx_internal;
+	/**
+	 *  ActionScript-based skin for the SpinnerListContainer in mobile applications. 
+	 * 
+	 *  @see spark.components.SpinnerListContainer
+	 * 
+	 *  @langversion 3.0
+	 *  @playerversion AIR 3
+	 *  @productversion Flex 4.6
+	 */
+	public class SpinnerListContainerSkin extends MobileSkin
+	{
+		//--------------------------------------------------------------------------
+		//
+		//  Constructor
+		//
+		//--------------------------------------------------------------------------
+		/**
+		 *  Constructor.
+		 * 
+		 *  @langversion 3.0
+		 *  @playerversion AIR 3
+		 *  @productversion Flex 4.6
+		 * 
+		 */
+		public function SpinnerListContainerSkin()
+		{
+			super();
+			
+			borderClass = spark.skins.android4.assets.SpinnerListContainerBackground;
+			selectionIndicatorClass = spark.skins.android4.assets.SpinnerListContainerSelectionIndicator;
+			shadowClass = spark.skins.android4.assets.SpinnerListContainerShadow;
+			cornerRadius = 0;
+			borderThickness = 0;
+			switch (applicationDPI)
+			{
+				case DPIClassification.DPI_640:
+				{
+					selectionIndicatorHeight = 182;
+					break;
+				}
+				case DPIClassification.DPI_480:
+				{
+					selectionIndicatorHeight = 144;
+					break;
+				}
+				case DPIClassification.DPI_320:
+				{					
+					selectionIndicatorHeight = 96;
+					break;
+				}
+				case DPIClassification.DPI_240:
+				{
+					selectionIndicatorHeight = 72;
+					break;
+				}
+				case DPIClassification.DPI_120:
+				{
+					selectionIndicatorHeight = 36;
+					break;
+				}
+				default: // default DPI_160
+				{
+					selectionIndicatorHeight = 48;
+					
+					break;
+				}
+			}
+			
+			minWidth = 30;
+		}
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Variables
+		//
+		//--------------------------------------------------------------------------
+		/**
+		 *  Pixel thickness of the border. 
+		 *       
+		 *  @langversion 3.0
+		 *  @playerversion AIR 3
+		 *  @productversion Flex 4.6
+		 */
+		protected var borderThickness:Number;
+		
+		/**
+		 *  Radius of the border corners.
+		 *       
+		 *  @langversion 3.0
+		 *  @playerversion AIR 3
+		 *  @productversion Flex 4.6
+		 */
+		protected var cornerRadius:Number;
+		
+		/**
+		 *  Height of the selection indicator.  
+		 *       
+		 *  @langversion 3.0
+		 *  @playerversion AIR 3
+		 *  @productversion Flex 4.6
+		 */
+		protected var selectionIndicatorHeight:Number;
+		
+		/**
+		 *  Class for the border part. 
+		 *       
+		 *  @langversion 3.0
+		 *  @playerversion AIR 3
+		 *  @productversion Flex 4.6
+		 */
+		protected var borderClass:Class;
+		
+		/**
+		 *  Class for the selection indicator skin part. 
+		 *       
+		 *  @langversion 3.0
+		 *  @playerversion AIR 3
+		 *  @productversion Flex 4.6
+		 */
+		protected var selectionIndicatorClass:Class;
+		
+		/**
+		 *  Class for the shadow skin part.  
+		 *       
+		 *  @langversion 3.0
+		 *  @playerversion AIR 3
+		 *  @productversion Flex 4.6
+		 */
+		protected var shadowClass:Class;
+		
+		/**
+		 *  Border skin part which includes the background. 
+		 *       
+		 *  @langversion 3.0
+		 *  @playerversion AIR 3
+		 *  @productversion Flex 4.6
+		 */
+		protected var border:InteractiveObject;
+		
+		/**
+		 *  Selection indicator skin part. 
+		 *       
+		 *  @langversion 3.0
+		 *  @playerversion AIR 3
+		 *  @productversion Flex 4.6
+		 */
+		protected var selectionIndicator:InteractiveObject;
+		
+		/**
+		 *  Shadow skin part. 
+		 *       
+		 *  @langversion 3.0
+		 *  @playerversion AIR 3
+		 *  @productversion Flex 4.6
+		 */
+		protected var shadow:InteractiveObject;
+		
+		/**
+		 *  Mask for the content group. 
+		 *       
+		 *  @langversion 3.0
+		 *  @playerversion AIR 3
+		 *  @productversion Flex 4.6
+		 */
+		protected var contentGroupMask:Sprite;
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Skin parts 
+		//
+		//--------------------------------------------------------------------------
+		
+		/**
+		 *  An optional skin part that defines the Group where the content 
+		 *  children are pushed into and laid out.
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion AIR 3
+		 *  @productversion Flex 4.6
+		 */
+		public var contentGroup:Group;
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Properties 
+		//
+		//--------------------------------------------------------------------------
+		/** 
+		 *  @copy spark.skins.spark.ApplicationSkin#hostComponent
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion AIR 3
+		 *  @productversion Flex 4.6
+		 */
+		public var hostComponent:SpinnerListContainer;
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Overridden Methods 
+		//
+		//--------------------------------------------------------------------------
+		/**
+		 *  @private
+		 */
+		override protected function createChildren():void
+		{
+			super.createChildren();
+			
+			if (!border)
+			{
+				// Border and background
+				border = new borderClass();
+				border.mouseEnabled = false;
+				addChild(border);
+			}
+			
+			if (!contentGroup)
+			{
+				// Contains the child elements
+				contentGroup = new Group();
+				var hLayout:HorizontalLayout = new HorizontalLayout();
+				hLayout.gap = 0;
+				hLayout.verticalAlign = "middle";
+				contentGroup.layout = hLayout;
+				contentGroup.id = "contentGroup";
+				addChild(contentGroup);
+			}
+			
+			if (!shadow)
+			{
+				// Shadowing sits on top of the content
+				shadow = new shadowClass();
+				shadow.mouseEnabled = false;
+				addChild(shadow);
+			}
+			
+			
+			if (!contentGroupMask)
+			{
+				// Create a mask for the content
+				contentGroupMask = new Sprite();
+				addChild(contentGroupMask);
+			}
+		}   
+		
+		/**
+		 *  @private
+		 */
+		override protected function measure():void
+		{
+			super.measure();
+			
+			var contentW:Number = contentGroup.getPreferredBoundsWidth();
+			var contentH:Number = contentGroup.getPreferredBoundsHeight();
+			
+			measuredWidth = measuredMinWidth = contentW + borderThickness * 2;
+			measuredHeight = contentH + borderThickness * 2;
+			
+		}
+		
+		/**
+		 *  @private
+		 */
+		override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void
+		{
+			super.layoutContents(unscaledWidth, unscaledHeight);
+			
+			setElementSize(contentGroup, unscaledWidth - borderThickness * 2, unscaledHeight - borderThickness * 2);
+			setElementPosition(contentGroup, borderThickness, borderThickness);
+			
+			// Inset by the borderThickness horizontally because the selectionIndicator starts at 0
+			setElementSize(border, unscaledWidth - borderThickness * 2, unscaledHeight);
+			setElementPosition(border, borderThickness, 0);			
+			
+			setElementSize(shadow, unscaledWidth - borderThickness * 4, measuredHeight - borderThickness * 2);
+			setElementPosition(shadow, borderThickness * 2, unscaledHeight/2 - measuredHeight/2);
+			
+			// The SpinnerLists contain a left and right border. We don't want to show the leftmost 
+			// SpinnerLists's left border nor the rightmost one's right border. 
+			// We inset the mask on the left and right sides to accomplish this. 
+			var g:Graphics = contentGroupMask.graphics;
+			g.clear();
+			g.beginFill(0x00FF00);
+			g.drawRoundRect(borderThickness * 2, borderThickness, unscaledWidth - borderThickness * 4, unscaledHeight - borderThickness * 2, cornerRadius, cornerRadius);
+			g.endFill();
+			
+			contentGroup.mask = contentGroupMask;       
+		}
+	}
+}
+

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/SpinnerListScrollerSkin.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/SpinnerListScrollerSkin.mxml b/tourdeflexmobile/src/spark/skins/android4/SpinnerListScrollerSkin.mxml
new file mode 100644
index 0000000..270818e
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/SpinnerListScrollerSkin.mxml
@@ -0,0 +1,94 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+-->
+
+
+<!--
+
+Scroller unconditionally sets its skin's layout to private layout
+implementation that handles the scroll policies.  Scroller skins can
+only provide replacement scrollbars.  The skin's layout and
+constraints or dimensions set on skin parts will not be honored.  To
+gain more control over the layout of a viewport and its scrollbars,
+instead of using Scroller, add them to a Group and use the ScrollBar component's
+viewport property to link them together.
+
+-->
+
+<!--- The default skin class for the Spark Scroller that is used by the SpinnerList component. 
+
+@see spark.components.SpinnerList
+@see spark.components.Scroller
+
+@langversion 3.0
+@playerversion AIR 3
+@productversion Flex 4.6
+-->
+<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark">
+	
+	<fx:Metadata>
+		<![CDATA[ 
+		/** 
+		* @copy spark.skins.spark.ApplicationSkin#hostComponent
+		* 
+		*  @langversion 3.0
+		*  @playerversion AIR 3
+		*  @productversion Flex 4.6
+		*/
+		[HostComponent("spark.components.Scroller")]
+		]]>
+	</fx:Metadata> 
+	
+	<fx:Script>
+		<![CDATA[    
+			/**
+			 *  @private
+			 */
+			override public function beginHighlightBitmapCapture() : Boolean
+			{
+				var needUpdate:Boolean = super.beginHighlightBitmapCapture();
+				
+				// Draw an opaque rect that fill our entire skin. Our background
+				// is transparent, but we don't want focus/error skins to
+				// poke through.  This is safe to do since we don't have any 
+				// graphic elements as direct children.
+				graphics.beginFill(0);
+				graphics.drawRect(0, 0, width, height);
+				graphics.endFill();
+				
+				return needUpdate;
+			}
+			
+			/**
+			 *  @private
+			 */
+			override public function endHighlightBitmapCapture() : Boolean
+			{
+				var needUpdate:Boolean = super.endHighlightBitmapCapture();
+				
+				// Clear the rect we drew in beginBitmapCapture();
+				graphics.clear();
+				
+				return needUpdate;
+			}
+		]]>
+	</fx:Script>
+	
+</s:SparkSkin>
+


Re: [17/22] added in Android Skins

Posted by OmPrakash Muppirala <bi...@gmail.com>.
Thanks for catching that.  I have fixed it in the current branch I am
working on.  I will merge that into flex-sdk/develop soon.

Om

On Tue, Nov 4, 2014 at 12:33 PM, Justin Mclean <ju...@classsoftware.com>
wrote:

> Hi,
>
> Allso noticed there looks like there a few switch statements that miss
> DPIClassification.DPI_120 and/or DPIClassification.DPI_640. eg
> HScrollBarThumbSkin and VScrollBarThumbSkin
>
> Justin

Re: [17/22] added in Android Skins

Posted by Justin Mclean <ju...@classsoftware.com>.
Hi,

Allso noticed there looks like there a few switch statements that miss DPIClassification.DPI_120 and/or DPIClassification.DPI_640. eg HScrollBarThumbSkin and VScrollBarThumbSkin

Justin