flex-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From bigosma...@apache.org
Subject [15/22] added in Android Skins
Date Tue, 04 Nov 2014 19:16:05 GMT
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/TextInputSkin.as
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/TextInputSkin.as b/tourdeflexmobile/src/spark/skins/android4/TextInputSkin.as
new file mode 100644
index 0000000..1ec2c11
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/TextInputSkin.as
@@ -0,0 +1,375 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.events.Event;
+	import flash.events.FocusEvent;
+	import flash.events.SoftKeyboardEvent;
+	
+	import mx.core.DPIClassification;
+	import mx.core.EventPriority;
+	import mx.core.mx_internal;
+	import mx.events.FlexEvent;
+	import mx.utils.Platform;
+	
+	import spark.components.TextInput;
+	import spark.components.supportClasses.StyleableTextField;
+	import spark.skins.android4.supportClasses.TextSkinBase;
+	
+	use namespace mx_internal;
+	
+	/**
+	 *  ActionScript-based skin for TextInput controls in mobile applications. 
+	 * 
+	 * @see spark.components.TextInput
+	 * 
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10
+	 *  @playerversion AIR 2.5 
+	 *  @productversion Flex 4.5
+	 */
+	public class TextInputSkin extends TextSkinBase
+	{
+		//--------------------------------------------------------------------------
+		//
+		//  Constructor
+		//
+		//--------------------------------------------------------------------------
+		
+		/**
+		 *  Constructor.
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 2.5
+		 *  @productversion Flex 4.5
+		 */
+		public function TextInputSkin()
+		{
+			super();
+			
+			// on iOS, make adjustments for native text rendering
+			_isIOS = Platform.isIOS;
+			
+			switch (applicationDPI)
+			{
+				case DPIClassification.DPI_640:
+				{
+					measuredDefaultWidth = 1200;
+					measuredDefaultHeight = 132;
+					layoutBorderSize = 4;
+					flatheight = 9;
+					break;
+				}
+				case DPIClassification.DPI_480:
+				{
+					
+					measuredDefaultWidth = 880;
+					measuredDefaultHeight = 100;
+					layoutBorderSize = 3;
+					flatheight = 7;				
+					break;
+				}
+				case DPIClassification.DPI_320:
+				{
+					measuredDefaultWidth = 600;
+					measuredDefaultHeight = 66;
+					layoutBorderSize = 2;
+					flatheight = 6;				
+					break;
+				}
+				case DPIClassification.DPI_240:
+				{
+					measuredDefaultWidth = 440;
+					measuredDefaultHeight = 50;
+					layoutBorderSize = 2;
+					flatheight = 5;
+					break;
+				}
+				case DPIClassification.DPI_120:
+				{
+					measuredDefaultWidth = 220;
+					measuredDefaultHeight = 25;
+					layoutBorderSize = 1;
+					flatheight = 2;					
+					break;
+				}
+				default:
+				{
+					measuredDefaultWidth = 300;
+					measuredDefaultHeight = 33;
+					layoutBorderSize = 1;
+					flatheight = 3; 
+					break;
+				}
+			}
+			addEventListener(FocusEvent.FOCUS_IN, focusChangeHandler);
+			addEventListener(FocusEvent.FOCUS_OUT, focusChangeHandler);
+		}
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Variables
+		//
+		//--------------------------------------------------------------------------
+		
+		protected var isFocused:Boolean = false;
+		
+		protected var flatheight:uint;
+		
+		/** 
+		 *  @copy spark.skins.spark.ApplicationSkin#hostComponent
+		 */
+		public var hostComponent:TextInput;  // SkinnableComponent will populate
+		
+		/**
+		 *  @private
+		 */
+		private var _isIOS:Boolean;
+		
+		/**
+		 *  @private
+		 */
+		private var _isEditing:Boolean;
+		
+		/**
+		 *  @private
+		 */
+		override protected function createChildren():void
+		{
+			super.createChildren();
+			
+			textDisplay.addEventListener("editableChanged", editableChangedHandler);
+			textDisplay.addEventListener(FlexEvent.VALUE_COMMIT, valueCommitHandler);
+			
+			// remove hit area improvements on iOS when editing
+			if (_isIOS)
+			{
+				textDisplay.addEventListener(SoftKeyboardEvent.SOFT_KEYBOARD_ACTIVATING, textDisplay_softKeyboardActivatingHandler, false, EventPriority.DEFAULT_HANDLER);
+				textDisplay.addEventListener(SoftKeyboardEvent.SOFT_KEYBOARD_DEACTIVATE, textDisplay_softKeyboardDeactivateHandler);
+			}
+		}
+		
+		/**
+		 *  @private
+		 */
+		override protected function measure():void
+		{
+			super.measure();
+			
+			var paddingLeft:Number = getStyle("paddingLeft");
+			var paddingRight:Number = getStyle("paddingRight");
+			var paddingTop:Number = getStyle("paddingTop");
+			var paddingBottom:Number = getStyle("paddingBottom");
+			var textHeight:Number = getStyle("fontSize") as Number;
+			
+			if (textDisplay)
+			{
+				// temporarily change text for measurement
+				var oldText:String = textDisplay.text;
+				
+				// commit styles so we can get a valid textHeight
+				textDisplay.text = "Wj";
+				textDisplay.commitStyles();
+				
+				textHeight = textDisplay.measuredTextSize.y;
+				textDisplay.text = oldText;
+			}
+			
+			// width is based on maxChars (if set)
+			if (hostComponent && hostComponent.maxChars)
+			{
+				// Grab the fontSize and subtract 2 as the pixel value for each character.
+				// This is just an approximation, but it appears to be a reasonable one
+				// for most input and most font.
+				var characterWidth:int = Math.max(1, (getStyle("fontSize") - 2));
+				measuredWidth =  (characterWidth * hostComponent.maxChars) + 
+					paddingLeft + paddingRight + StyleableTextField.TEXT_WIDTH_PADDING;
+			}
+			
+			measuredHeight = paddingTop + textHeight + paddingBottom;
+		}
+		
+		/**
+		 *  @private
+		 */
+		override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void
+		{
+			super.layoutContents(unscaledWidth, unscaledHeight);
+			
+			// position & size border
+			if (border)
+			{
+				setElementSize(border, unscaledWidth, unscaledHeight);
+				setElementPosition(border, 0, 0);
+			}
+			
+			// position & size the text
+			var paddingLeft:Number = getStyle("paddingLeft");
+			var paddingRight:Number = getStyle("paddingRight");
+			var paddingTop:Number = getStyle("paddingTop");
+			var paddingBottom:Number = getStyle("paddingBottom");
+			
+			var unscaledTextWidth:Number = unscaledWidth - paddingLeft - paddingRight;
+			var unscaledTextHeight:Number = unscaledHeight - paddingTop - paddingBottom;
+			
+			// default vertical positioning is centered
+			var textHeight:Number = getElementPreferredHeight(textDisplay);
+			var textY:Number = Math.round(0.5 * (unscaledTextHeight - textHeight)) + paddingTop;
+			
+			// On iOS the TextField top and bottom edges are bounded by the padding.
+			// On all other platforms, the height of the textDisplay is
+			// textHeight + paddingBottom to increase hitArea on bottom.
+			// Note: We don't move the Y position upwards because TextField
+			// has way to set vertical positioning.
+			// Note: iOS is a special case due to the clear button provided by the
+			// native text control used while editing.
+			var adjustedTextHeight:Number = (_isIOS && _isEditing) ? textHeight : textHeight + paddingBottom;
+			
+			if (textDisplay)
+			{
+				// We're going to do a few tricks to try to increase the size of our hitArea to make it 
+				// easier for users to select text or put the caret in a certain spot.  To do that, 
+				// rather than set textDisplay.x=paddingLeft,  we are going to set 
+				// textDisplay.leftMargin = paddingLeft.  In addition, we're going to size the height 
+				// of the textDisplay larger than just the size of the text inside to increase the hitArea
+				// on the bottom.  We'll also assign textDisplay.rightMargin = paddingRight to increase the 
+				// the hitArea on the right.  Unfortunately, there's no way to increase the hitArea on the top
+				// just yet, but these three tricks definitely help out with regards to user experience.  
+				// See http://bugs.adobe.com/jira/browse/SDK-29406 and http://bugs.adobe.com/jira/browse/SDK-29405
+				
+				// set leftMargin, rightMargin to increase the hitArea.  Need to set it before calling commitStyles().
+				var marginChanged:Boolean = ((textDisplay.leftMargin != paddingLeft) || 
+					(textDisplay.rightMargin != paddingRight));
+				
+				textDisplay.leftMargin = paddingLeft;
+				textDisplay.rightMargin = paddingRight;
+				
+				// need to force a styleChanged() after setting leftMargin, rightMargin if they 
+				// changed values.  Then we can validate the styles through commitStyles()
+				if (marginChanged)
+					textDisplay.styleChanged(null);
+				textDisplay.commitStyles();
+				
+				setElementSize(textDisplay, unscaledWidth, adjustedTextHeight);
+				
+				// set x=0 since we're using textDisplay.leftMargin = paddingLeft
+				setElementPosition(textDisplay, 0, textY);
+			}
+			
+			if (promptDisplay)
+			{
+				promptDisplay.commitStyles();
+				setElementSize(promptDisplay, unscaledTextWidth, adjustedTextHeight);
+				setElementPosition(promptDisplay, paddingLeft, textY);
+			}
+		}
+		
+		override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void
+		{
+			super.drawBackground(unscaledWidth, unscaledHeight);
+			
+			var contentBackgroundColor:uint = getStyle("contentBackgroundColor");
+			var contentBackgroundAlpha:Number = getStyle("contentBackgroundAlpha");	
+			//change border color and thickness when in focus
+			var borderColor:uint = isFocused ? getStyle("focusColor") : getStyle("borderColor");
+			var selectWidth:uint = isFocused ? layoutBorderSize + 1 : layoutBorderSize;
+			if (isNaN(contentBackgroundAlpha))
+			{
+				contentBackgroundAlpha = 1;
+			}        
+			if (getStyle("contentBackgroundBorder") == "flat")
+			{		
+				var halfGap:int = flatheight * 2;
+				//background
+				graphics.beginFill(contentBackgroundColor, contentBackgroundAlpha);
+				graphics.drawRect(0, 0, unscaledWidth, unscaledHeight - flatheight);
+				graphics.endFill();
+				//begin flat border
+				graphics.beginFill(borderColor, 1);
+				//left half border
+				graphics.drawRect(0, unscaledHeight - halfGap, selectWidth, flatheight );
+				//bottom border
+				graphics.drawRect(0, unscaledHeight - flatheight, unscaledWidth, selectWidth);
+				//right border
+				graphics.drawRect(unscaledWidth - selectWidth, unscaledHeight - halfGap, selectWidth, flatheight);
+				graphics.endFill();
+			}
+			else if (getStyle("contentBackgroundBorder") == "rectangle")
+			{
+				var borderWidth:uint = layoutBorderSize * 2;
+				//rectangle border and background
+				graphics.lineStyle(selectWidth, borderColor, 1);
+				graphics.beginFill(contentBackgroundColor, contentBackgroundAlpha);
+				graphics.drawRect(layoutBorderSize, layoutBorderSize, unscaledWidth - borderWidth, unscaledHeight - borderWidth);
+				graphics.endFill();
+			}
+		}
+		
+		/**
+		 *  @private
+		 */
+		private function editableChangedHandler(event:Event):void
+		{
+			invalidateDisplayList();
+		}
+		
+		/**
+		 *  @private
+		 *  The text changed in some way.
+		 * 
+		 *  Dynamic fields (ie !editable) with no text measure with width=0 and height=0.
+		 *  If the text changed, need to remeasure the text to get the correct height so it
+		 *  will be laid out correctly.
+		 */
+		private function valueCommitHandler(event:Event):void
+		{
+			if (textDisplay && !textDisplay.editable)
+				invalidateDisplayList();
+		}
+		
+		/**
+		 *  @private
+		 */
+		private function textDisplay_softKeyboardActivatingHandler(event:SoftKeyboardEvent):void
+		{
+			if (event.isDefaultPrevented())
+				return;
+			
+			_isEditing = true;
+			invalidateDisplayList();
+		}
+		
+		/**
+		 *  @private
+		 */
+		private function textDisplay_softKeyboardDeactivateHandler(event:SoftKeyboardEvent):void
+		{
+			_isEditing = false;
+			invalidateDisplayList();
+		}
+		
+		private function focusChangeHandler(event:FocusEvent):void
+		{
+			isFocused = event.type == FocusEvent.FOCUS_IN;
+			invalidateDisplayList();		
+		}
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/ToggleSwitchSkin.as
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/ToggleSwitchSkin.as b/tourdeflexmobile/src/spark/skins/android4/ToggleSwitchSkin.as
new file mode 100644
index 0000000..7f50554
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/ToggleSwitchSkin.as
@@ -0,0 +1,506 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.events.Event;
+	
+	import mx.core.DPIClassification;
+	import mx.core.IVisualElement;
+	import mx.core.UIComponent;
+	
+	import spark.components.ToggleSwitch;
+	import spark.components.supportClasses.StyleableTextField;
+	import spark.core.SpriteVisualElement;
+	import spark.skins.android4.assets.ToggleSwitchBackground;
+	import spark.skins.android4.assets.ToggleSwitchThumb_off;
+	import spark.skins.mobile.supportClasses.MobileSkin;
+	
+	
+	/**
+	 *  ActionScript-based Android 4.x specific skin for the ToggleSwitch control. 
+	 *  This class is responsible for most of the 
+	 *  graphics drawing, with additional fxg assets.
+	 *  
+	 *  
+	 *  @langversion 3.0
+	 *  @playerversion AIR 3
+	 *  @productversion Flex 4.6
+	 *
+	 *  @see spark.components.ToggleSwitch 
+	 */
+	public class ToggleSwitchSkin extends MobileSkin
+	{
+		//----------------------------------------------------------------------------------------------
+		//
+		//  Skin parts
+		//
+		//----------------------------------------------------------------------------------------------
+		
+		/**
+		 *  The thumb skin part.
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion AIR 3
+		 *  @productversion Flex 4.6
+		 */		
+		public var thumb:IVisualElement;
+		/**
+		 *  The track skin part.
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion AIR 3
+		 *  @productversion Flex 4.6
+		 */
+		public var track:IVisualElement;
+		
+		//----------------------------------
+		//  hostComponent
+		//----------------------------------
+		
+		private var _hostComponent:ToggleSwitch;
+		public var selectedLabelDisplay:LabelDisplayComponent;
+		
+		/**
+		 * @copy spark.skins.spark.ApplicationSkin#hostComponent
+		 */
+		public function get hostComponent():ToggleSwitch
+		{
+			return _hostComponent;
+		}
+		
+		public function set hostComponent(value:ToggleSwitch):void 
+		{
+			if (_hostComponent)
+				_hostComponent.removeEventListener("thumbPositionChanged", thumbPositionChanged_handler);
+			_hostComponent = value;
+			if (_hostComponent)
+				_hostComponent.addEventListener("thumbPositionChanged", thumbPositionChanged_handler);
+		}
+		
+		//----------------------------------
+		//  selectedLabel
+		//----------------------------------
+		
+		private var _selectedLabel:String;
+		/**
+		 *  The text of the label showing when the component is selected.
+		 *  Subclasses can set or override this property to customize the selected label.
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion AIR 3
+		 *  @productversion Flex 4.6
+		 */
+		protected function get selectedLabel():String 
+		{
+			return _selectedLabel;
+		}
+		
+		protected function set selectedLabel(value:String):void
+		{
+			_selectedLabel = value;
+		}
+		
+		//----------------------------------
+		//  unselectedLabel
+		//----------------------------------
+		
+		private var _unselectedLabel:String;
+		/**
+		 *  The text of the label showing when the component is not selected.
+		 *  Subclasses can set or override this property to customize the unselected label.
+		 * 
+		 *  @langversion 3.0
+		 *  @playerversion AIR 3
+		 *  @productversion Flex 4.6
+		 */
+		protected function get unselectedLabel():String 
+		{
+			return _unselectedLabel;
+		}
+		
+		protected function set unselectedLabel(value:String):void
+		{
+			_unselectedLabel = value;
+		}
+		
+		
+		/**
+		 *  The contents inside the skin, not including the outline
+		 *  stroke
+		 */
+		private var contents:UIComponent;
+		private var switchTrack:Class;
+		private var switchOff:Class;
+		private var switchOn:Class;
+		protected var trackWidth:Number;
+		protected var trackHeight:Number;
+		protected var layoutThumbWidth:Number;
+		protected var layoutThumbHeight:Number;
+		private var thumbOn:IVisualElement;
+		private var thumbOff:IVisualElement;
+		
+		public function ToggleSwitchSkin()
+		{
+			super();
+			
+			switchTrack = spark.skins.android4.assets.ToggleSwitchBackground;
+			switchOn = spark.skins.android4.assets.ToggleSwitchThumb_on;
+			switchOff = spark.skins.android4.assets.ToggleSwitchThumb_off;
+			
+			switch(applicationDPI) 
+			{	
+				case DPIClassification.DPI_640:
+				{
+					layoutThumbWidth = 188;
+					layoutThumbHeight = 96;
+					trackWidth = 388;
+					trackHeight = 96;
+					break;
+				}
+				case DPIClassification.DPI_480:
+				{
+					layoutThumbWidth = 140;
+					layoutThumbHeight = 72;
+					trackWidth = 291;
+					trackHeight = 72;
+					break;
+				}		
+				case DPIClassification.DPI_320:
+				{
+					layoutThumbWidth = 94;
+					layoutThumbHeight = 48;
+					trackWidth = 194;
+					trackHeight = 48;
+					break;
+				}
+				case DPIClassification.DPI_240:
+				{
+					layoutThumbWidth = 70;
+					layoutThumbHeight = 36;
+					trackWidth = 146;
+					trackHeight = 36;
+					break;
+				}
+				case DPIClassification.DPI_120:
+				{
+					layoutThumbWidth = 35;
+					layoutThumbHeight = 18;
+					trackWidth = 73;
+					trackHeight = 18;
+					break;
+				}
+				default:
+				{
+					layoutThumbWidth = 47;
+					layoutThumbHeight = 24;
+					trackWidth = 97;
+					trackHeight = 24;
+					break;
+				}
+			}
+			
+			selectedLabel = resourceManager.getString("components","toggleSwitchSelectedLabel");
+			unselectedLabel =  resourceManager.getString("components","toggleSwitchUnselectedLabel");
+		}
+		
+		override protected function createChildren():void
+		{
+			super.createChildren();
+			contents = new UIComponent();
+			contents.blendMode = BlendMode.LAYER;
+			addChild(contents);
+			drawTrack();
+			drawThumbs();
+			drawLabel();
+		}
+		
+		override protected function measure():void 
+		{
+			// The skin must be at least as large as the thumb
+			measuredMinWidth = layoutThumbWidth;
+			measuredMinHeight = layoutThumbHeight;
+			
+			// The preferred size will display all label text
+			var labelWidth:Number = getElementPreferredWidth(selectedLabelDisplay);
+			measuredWidth = layoutThumbWidth + labelWidth;
+			measuredHeight = layoutThumbHeight;
+		}
+		
+		override protected function commitCurrentState():void
+		{
+			toggleSelectionState();
+			layoutThumbs();
+			layoutLabel();
+		}
+		
+		//The label is called selectedLabelDisplay because the hostComponent expects it
+		protected function drawLabel():void
+		{
+			selectedLabelDisplay = new LabelDisplayComponent();
+			selectedLabelDisplay.id = "selectedLabelDisplay";
+			selectedLabelDisplay.text = selectedLabel;
+			setElementSize(selectedLabelDisplay,thumb.width,thumb.height);
+			contents.addChild(selectedLabelDisplay);
+		}
+		
+		//Draw the track behind everything else
+		protected function drawTrack():void
+		{
+			if(track == null)
+			{
+				track = new switchTrack();
+				track.width = trackWidth;
+				track.height = trackHeight;
+				contents.addChildAt(SpriteVisualElement(track),0);
+			}
+		}
+		
+		//Draw both thumbs.  Set skinpart thumb to be thumbOff because default state of the switch is OFF
+		protected function drawThumbs():void
+		{
+			drawThumbOff();
+			drawThumbOn();
+			if(thumb == null)
+			{
+				thumb = thumbOff;
+			}
+		}
+		
+		//Thumb ON the right side; Thumb OFF is on the left side
+		protected function layoutThumbs():void
+		{
+			setElementPosition(thumbOn,trackWidth/2,0);
+			setElementPosition(thumbOff,0,0);
+		}
+		
+		//Label display sould be at the same location as the thumb
+		protected function layoutLabel():void
+		{
+			if(selectedLabelDisplay != null)
+			{
+				if(currentState.indexOf("AndSelected") != -1)
+				{
+					setElementPosition(selectedLabelDisplay,trackWidth/2,0);
+				}
+				else
+				{
+					setElementPosition(selectedLabelDisplay,0,0);
+				}
+			}
+		}
+		
+		//Depending on current state, set skinpart thumb accordingly
+		protected function toggleSelectionState():void
+		{
+			if(currentState.indexOf("AndSelected") != -1)
+			{
+				thumbOn.visible = true;
+				thumbOff.visible = false;
+				thumb = thumbOn;
+				selectedLabelDisplay.text = selectedLabel;
+			}
+			else
+			{
+				thumbOff.visible = true;
+				thumbOn.visible = false;
+				thumb = thumbOff;
+				selectedLabelDisplay.text = unselectedLabel;
+			}
+		}
+		
+		protected function drawThumbOn():void
+		{
+			thumbOn = new switchOn();
+			thumbOn.width = layoutThumbWidth;
+			thumbOn.height = layoutThumbHeight;
+			contents.addChildAt(SpriteVisualElement(thumbOn),1);
+		}
+		
+		protected function drawThumbOff():void
+		{
+			thumbOff = new switchOff();
+			thumbOff.width = layoutThumbWidth;
+			thumbOff.height = layoutThumbHeight;
+			contents.addChildAt(SpriteVisualElement(thumbOff),1);
+		}
+		
+		//Hostcomponent dispatches this event whenever the thumb position changes	
+		protected function thumbPositionChanged_handler(event:Event):void
+		{
+			moveSlidingContent();
+		}
+		
+		//Move the current thumb and label along with the animating content 
+		protected function moveSlidingContent():void 
+		{
+			if (!hostComponent)
+				return;
+			var x:Number = (track.getLayoutBoundsWidth() - thumb.getLayoutBoundsWidth()) * 
+				hostComponent.thumbPosition + track.getLayoutBoundsX();
+			var y:Number = thumb.getLayoutBoundsY();
+			setElementPosition(thumb, x, y);
+			setElementPosition(selectedLabelDisplay, x, y);
+		}
+	}
+}
+
+
+import flash.events.Event;
+
+import mx.core.UIComponent;
+import mx.core.mx_internal;
+import mx.events.FlexEvent;
+
+import spark.components.supportClasses.StyleableTextField;
+import spark.core.IDisplayText;
+
+use namespace mx_internal;
+
+/**
+ *  @private
+ *  Component combining two labels to create the effect of text and its drop
+ *  shadow. The component can be used with advanced style selectors and the
+ *  styles "color", "textShadowColor", and "textShadowAlpha". Based off of
+ *  ActionBar.TitleDisplayComponent. These two should eventually be factored.
+ */
+class LabelDisplayComponent extends UIComponent implements IDisplayText
+{
+	public var shadowYOffset:Number = 0;
+	private var labelChanged:Boolean = false;
+	private var labelDisplay:StyleableTextField;
+	private var labelDisplayShadow:StyleableTextField;
+	private var _text:String;
+	
+	public function LabelDisplayComponent() 
+	{
+		super();
+		_text = "";
+	}
+	
+	override public function get baselinePosition():Number 
+	{
+		return labelDisplay.baselinePosition;
+	}
+	
+	override protected function createChildren():void 
+	{
+		super.createChildren();
+		
+		labelDisplay = StyleableTextField(createInFontContext(StyleableTextField));
+		labelDisplay.styleName = this;
+		labelDisplay.editable = false;
+		labelDisplay.selectable = false;
+		labelDisplay.multiline = false;
+		labelDisplay.wordWrap = false;
+		labelDisplay.addEventListener(FlexEvent.VALUE_COMMIT,
+			labelDisplay_valueCommitHandler);
+		
+		labelDisplayShadow = StyleableTextField(createInFontContext(StyleableTextField));
+		labelDisplayShadow.styleName = this;
+		labelDisplayShadow.colorName = "textShadowColor";
+		labelDisplayShadow.editable = false;
+		labelDisplayShadow.selectable = false;
+		labelDisplayShadow.multiline = false;
+		labelDisplayShadow.wordWrap = false;
+		
+		addChild(labelDisplayShadow);
+		addChild(labelDisplay);
+	}
+	
+	override protected function commitProperties():void 
+	{
+		super.commitProperties();
+		
+		if (labelChanged)
+		{
+			labelDisplay.text = text;
+			invalidateSize();
+			invalidateDisplayList();
+			labelChanged = false;
+		}
+	}
+	
+	override protected function measure():void 
+	{
+		if (labelDisplay.isTruncated)
+			labelDisplay.text = text;
+		labelDisplay.commitStyles();
+		measuredWidth = labelDisplay.getPreferredBoundsWidth();
+		measuredHeight = labelDisplay.getPreferredBoundsHeight();
+	}
+	
+	override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void 
+	{
+		if (labelDisplay.isTruncated)
+			labelDisplay.text = text;
+		labelDisplay.commitStyles();
+		
+		var labelHeight:Number = labelDisplay.getPreferredBoundsHeight();
+		var labelY:Number = (unscaledHeight - labelHeight) / 2;
+		
+		var labelWidth:Number = Math.min(unscaledWidth, labelDisplay.getPreferredBoundsWidth());
+		var labelX:Number = (unscaledWidth - labelWidth) / 2;
+		
+		labelDisplay.setLayoutBoundsSize(labelWidth, labelHeight);
+		labelDisplay.setLayoutBoundsPosition(labelX, labelY);
+		
+		labelDisplay.truncateToFit();
+		
+		labelDisplayShadow.commitStyles();
+		labelDisplayShadow.setLayoutBoundsSize(labelWidth, labelHeight);
+		labelDisplayShadow.setLayoutBoundsPosition(labelX, labelY + shadowYOffset);
+		
+		labelDisplayShadow.alpha = getStyle("textShadowAlpha");
+		
+		// unless the label was truncated, labelDisplayShadow.text was set in
+		// the value commit handler
+		if (labelDisplay.isTruncated)
+			labelDisplayShadow.text = labelDisplay.text;
+	}
+	
+	private function labelDisplay_valueCommitHandler(event:Event):void 
+	{
+		labelDisplayShadow.text = labelDisplay.text;
+	}
+	
+	public function get text():String 
+	{
+		return _text;
+	}
+	
+	public function set text(value:String):void 
+	{
+		_text = value;
+		labelChanged = true;
+		invalidateProperties();
+	}
+	
+	public function get isTruncated():Boolean 
+	{
+		return labelDisplay.isTruncated;
+	}
+	
+	public function showShadow(value:Boolean):void 
+	{
+		labelDisplayShadow.visible = value;
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/TransparentActionButtonSkin.as
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/TransparentActionButtonSkin.as b/tourdeflexmobile/src/spark/skins/android4/TransparentActionButtonSkin.as
new file mode 100644
index 0000000..a82664e
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/TransparentActionButtonSkin.as
@@ -0,0 +1,108 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 flash.display.Graphics;
+
+import mx.core.DPIClassification;
+import mx.core.mx_internal;
+
+import spark.skins.android4.assets.TransparentActionButton_down;
+import spark.skins.android4.assets.TransparentActionButton_up;
+import spark.skins.mobile.supportClasses.ActionBarButtonSkinBase;
+import spark.skins.mobile.supportClasses.MobileSkin;
+import spark.skins.mobile320.assets.TransparentActionButton_down;
+import spark.skins.mobile320.assets.TransparentActionButton_up;
+import spark.skins.mobile480.assets.TransparentActionButton_down;
+import spark.skins.mobile480.assets.TransparentActionButton_up;
+import spark.skins.mobile640.assets.TransparentActionButton_down;
+import spark.skins.mobile640.assets.TransparentActionButton_up;
+
+use namespace mx_internal;
+
+/**
+ *  The default skin class for buttons in the action area of the Spark ActionBar component 
+ *  in mobile applications.  
+ *  
+ *  @langversion 3.0
+ *  @playerversion AIR 2.5
+ *  @productversion Flex 4.5
+ */
+public class TransparentActionButtonSkin extends ActionBarButtonSkinBase
+{
+    //--------------------------------------------------------------------------
+    //
+    //  Constructor
+    //
+    //--------------------------------------------------------------------------
+    /**
+     *  Constructor.
+     *  
+     *  @langversion 3.0
+     *  @playerversion AIR 2.5
+     *  @productversion Flex 4.5
+     */
+    public function TransparentActionButtonSkin()
+    {
+        super();
+        
+        switch (applicationDPI)
+        {
+			case DPIClassification.DPI_640:
+			{
+				upBorderSkin = spark.skins.mobile640.assets.TransparentActionButton_up;
+				downBorderSkin = spark.skins.mobile640.assets.TransparentActionButton_down;
+				
+				break;
+			}
+			case DPIClassification.DPI_480:
+			{
+				upBorderSkin = spark.skins.mobile480.assets.TransparentActionButton_up;
+				downBorderSkin = spark.skins.mobile480.assets.TransparentActionButton_down;
+				
+				break;
+			}
+            case DPIClassification.DPI_320:
+            {
+                upBorderSkin = spark.skins.mobile320.assets.TransparentActionButton_up;
+                downBorderSkin = spark.skins.mobile320.assets.TransparentActionButton_down;
+               
+                break;
+            }
+            default:
+            {
+                upBorderSkin = spark.skins.android4.assets.TransparentActionButton_up;
+                downBorderSkin = spark.skins.android4.assets.TransparentActionButton_down;
+                
+                break;
+            }
+        }
+    }
+    
+    override mx_internal function layoutBorder(unscaledWidth:Number, unscaledHeight:Number):void
+    {
+        // don't call super, don't layout twice
+        // leading vertical separator is outside the left bounds of the button
+        setElementSize(border, unscaledWidth, unscaledHeight);
+        setElementPosition(border, 0, 0);
+    }
+}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/TransparentNavigationButtonSkin.as
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/TransparentNavigationButtonSkin.as b/tourdeflexmobile/src/spark/skins/android4/TransparentNavigationButtonSkin.as
new file mode 100644
index 0000000..6b31e22
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/TransparentNavigationButtonSkin.as
@@ -0,0 +1,109 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 flash.display.Graphics;
+
+import mx.core.DPIClassification;
+import mx.core.mx_internal;
+
+import spark.skins.android4.assets.TransparentNavigationButton_down;
+import spark.skins.android4.assets.TransparentNavigationButton_up;
+import spark.skins.mobile.supportClasses.ActionBarButtonSkinBase;
+import spark.skins.mobile.supportClasses.MobileSkin;
+//import spark.skins.mobile320.assets.TransparentNavigationButton_down;
+//import spark.skins.mobile320.assets.TransparentNavigationButton_up;
+//import spark.skins.mobile480.assets.TransparentNavigationButton_down;
+//import spark.skins.mobile480.assets.TransparentNavigationButton_up;
+//import spark.skins.mobile640.assets.TransparentNavigationButton_down;
+//import spark.skins.mobile640.assets.TransparentNavigationButton_up;
+
+use namespace mx_internal;
+
+/**
+ *  The default skin class for buttons in the navigation area of the Spark ActionBar component 
+ *  in mobile applications.  
+ * 
+ *  @langversion 3.0
+ *  @playerversion AIR 2.5 
+ *  @productversion Flex 4.5
+ */
+public class TransparentNavigationButtonSkin extends ActionBarButtonSkinBase
+{   
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Constructor
+    //
+    //--------------------------------------------------------------------------
+    /**
+     *  Constructor.
+     * 
+     *  @langversion 3.0
+     *  @playerversion AIR 2.5 
+     *  @productversion Flex 4.5
+     * 
+     */
+    public function TransparentNavigationButtonSkin()
+    {
+        super();
+        
+        switch (applicationDPI)
+        {
+			case DPIClassification.DPI_640:
+			{
+			//	upBorderSkin = spark.skins.mobile640.assets.TransparentActionButton_up;
+			//	downBorderSkin = spark.skins.mobile640.assets.TransparentActionButton_down;
+				
+				break;
+			}
+			case DPIClassification.DPI_480:
+			{
+			//	upBorderSkin = spark.skins.mobile480.assets.TransparentActionButton_up;
+			//	downBorderSkin = spark.skins.mobile480.assets.TransparentActionButton_down;
+				
+				break;
+			}
+            case DPIClassification.DPI_320:
+            {
+           //     upBorderSkin = spark.skins.mobile320.assets.TransparentNavigationButton_up;
+            //    downBorderSkin = spark.skins.mobile320.assets.TransparentNavigationButton_down;
+                
+                break;
+            }
+            default:
+            {
+                upBorderSkin = spark.skins.android4.assets.TransparentNavigationButton_up;
+                downBorderSkin = spark.skins.android4.assets.TransparentNavigationButton_down;
+                
+                break;
+            }
+        }
+    }
+    
+    override mx_internal function layoutBorder(unscaledWidth:Number, unscaledHeight:Number):void
+    {
+        // trailing vertical separator is outside the right bounds of the button
+        setElementSize(border, unscaledWidth, unscaledHeight);
+        setElementPosition(border, 0, 0);
+    }
+}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/VScrollBarSkin.as
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/VScrollBarSkin.as b/tourdeflexmobile/src/spark/skins/android4/VScrollBarSkin.as
new file mode 100644
index 0000000..10312c5
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/VScrollBarSkin.as
@@ -0,0 +1,207 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.VScrollBar;
+	import spark.skins.mobile.supportClasses.MobileSkin;
+	
+	use namespace mx_internal;
+	
+	/**
+	 *  ActionScript-based skin for VScrollBar components in mobile applications. 
+	 * 
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10
+	 *  @playerversion AIR 2.5 
+	 *  @productversion Flex 4.5
+	 */
+	public class VScrollBarSkin extends MobileSkin
+	{
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Constructor
+		//
+		//--------------------------------------------------------------------------
+		/**
+		 *  Constructor.
+		 * 
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 2.5 
+		 *  @productversion Flex 4.5
+		 * 
+		 */
+		public function VScrollBarSkin()
+		{
+			super();
+			
+			minHeight = 20;
+			thumbSkinClass = VScrollBarThumbSkin;
+			var paddingRight:int;
+			var paddingVertical:int;
+			
+			// Depending on density set our measured width
+			switch (applicationDPI)
+			{
+				case DPIClassification.DPI_640:
+				{
+					minWidth = 24;
+					paddingRight = VScrollBarThumbSkin.PADDING_RIGHT_640DPI;
+					paddingVertical = VScrollBarThumbSkin.PADDING_VERTICAL_640DPI;
+					break;
+				}
+				case DPIClassification.DPI_480:
+				{
+					minWidth = 18;
+					paddingRight = VScrollBarThumbSkin.PADDING_RIGHT_480DPI;
+					paddingVertical = VScrollBarThumbSkin.PADDING_VERTICAL_480DPI;
+					break;
+				}
+				case DPIClassification.DPI_320:
+				{
+					minWidth = 12;
+					paddingRight = VScrollBarThumbSkin.PADDING_RIGHT_320DPI;
+					paddingVertical = VScrollBarThumbSkin.PADDING_VERTICAL_320DPI;
+					break;
+				}
+				case DPIClassification.DPI_240:
+				{
+					minWidth = 9;
+					paddingRight = VScrollBarThumbSkin.PADDING_RIGHT_240DPI;
+					paddingVertical = VScrollBarThumbSkin.PADDING_VERTICAL_240DPI;
+					break;
+				}
+				case DPIClassification.DPI_120:
+				{
+					minWidth = 9;
+					paddingRight = VScrollBarThumbSkin.PADDING_RIGHT_120DPI;
+					paddingVertical = VScrollBarThumbSkin.PADDING_VERTICAL_120DPI;
+					break;
+				}
+				default:
+				{
+					// default DPI_160
+					minWidth = 6;
+					paddingRight = VScrollBarThumbSkin.PADDING_RIGHT_DEFAULTDPI;
+					paddingVertical = VScrollBarThumbSkin.PADDING_VERTICAL_DEFAULTDPI;
+					break;
+				}
+			}
+			
+			// The minimum height is set such that, at it's smallest size, the thumb appears
+			// as high as it is wide.
+			minThumbHeight = (minWidth - paddingRight) + (paddingVertical * 2);   
+		}
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Variables
+		//
+		//--------------------------------------------------------------------------
+		
+		/** 
+		 *  @copy spark.skins.spark.ApplicationSkin#hostComponent
+		 */
+		public var hostComponent:VScrollBar;
+		
+		/**
+		 *  Minimum height for the thumb
+		 */
+		protected var minThumbHeight:Number;
+		
+		/**
+		 *  Skin to use for the thumb Button skin part
+		 */
+		protected var thumbSkinClass:Class;
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Skin parts 
+		//
+		//--------------------------------------------------------------------------
+		/**
+		 *  VScrollbar track skin part
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 2.5 
+		 *  @productversion Flex 4.5
+		 */   
+		public var track:Button;
+		
+		/**
+		 *  VScrollbar 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.minHeight = minThumbHeight; 
+				thumb.setStyle("skinClass", thumbSkinClass);
+				thumb.width = minWidth;
+				thumb.height = minWidth;
+				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/VScrollBarThumbSkin.as
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/VScrollBarThumbSkin.as b/tourdeflexmobile/src/spark/skins/android4/VScrollBarThumbSkin.as
new file mode 100644
index 0000000..d9a3804
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/VScrollBarThumbSkin.as
@@ -0,0 +1,178 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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;
+	use namespace mx_internal;
+	
+	import spark.components.Button;
+	import spark.skins.mobile.supportClasses.MobileSkin;
+	
+	/**
+	 *  ActionScript-based skin for the VScrollBar thumb skin part in mobile applications. 
+	 * 
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10
+	 *  @playerversion AIR 2.5 
+	 *  @productversion Flex 4.5
+	 */
+	public class VScrollBarThumbSkin extends MobileSkin 
+	{
+		//--------------------------------------------------------------------------
+		//
+		//  Class constants
+		//
+		//--------------------------------------------------------------------------
+		
+		// These constants are also accessed from VScrollBarSkin
+		mx_internal static const PADDING_RIGHT_640DPI:int = 10;
+		mx_internal static const PADDING_VERTICAL_640DPI:int = 8;
+		mx_internal static const PADDING_RIGHT_480DPI:int = 8;
+		mx_internal static const PADDING_VERTICAL_480DPI:int = 6;
+		mx_internal static const PADDING_RIGHT_320DPI:int = 5;
+		mx_internal static const PADDING_VERTICAL_320DPI:int = 4;
+		mx_internal static const PADDING_RIGHT_240DPI:int = 4;
+		mx_internal static const PADDING_VERTICAL_240DPI:int = 3;
+		mx_internal static const PADDING_RIGHT_120DPI:int = 2;
+		mx_internal static const PADDING_VERTICAL_120DPI:int = 1;
+		mx_internal static const PADDING_RIGHT_DEFAULTDPI:int = 3;
+		mx_internal static const PADDING_VERTICAL_DEFAULTDPI:int = 2;
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Constructor
+		//
+		//-------------------------------------------------------------------------- 
+		/**
+		 *  Constructor.
+		 * 
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 2.5 
+		 *  @productversion Flex 4.5
+		 * 
+		 */
+		public function VScrollBarThumbSkin()
+		{
+			super();
+			
+			// Depending on density set padding
+			switch (applicationDPI)
+			{
+				case DPIClassification.DPI_640:
+				{
+					minWidth = 19;
+					paddingRight = VScrollBarThumbSkin.PADDING_RIGHT_640DPI;
+					paddingVertical = VScrollBarThumbSkin.PADDING_VERTICAL_640DPI;
+					break;
+				}
+				case DPIClassification.DPI_480:
+				{
+					minWidth = 19;
+					paddingRight = VScrollBarThumbSkin.PADDING_RIGHT_480DPI;
+					paddingVertical = VScrollBarThumbSkin.PADDING_VERTICAL_480DPI;
+					break;
+				}
+				case DPIClassification.DPI_320:
+				{
+					paddingRight = PADDING_RIGHT_320DPI;
+					paddingVertical = PADDING_VERTICAL_320DPI;
+					break;
+				}
+				case DPIClassification.DPI_240:
+				{
+					paddingRight = PADDING_RIGHT_240DPI;
+					paddingVertical = PADDING_VERTICAL_240DPI;
+					break;
+				}
+				default:
+				{
+					paddingRight = PADDING_RIGHT_DEFAULTDPI;
+					paddingVertical = PADDING_VERTICAL_DEFAULTDPI;
+					break;
+				}
+			}
+		}
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Properties
+		//
+		//--------------------------------------------------------------------------
+		/** 
+		 * @copy spark.skins.spark.ApplicationSkin#hostComponent
+		 */
+		public var hostComponent:Button;
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Variables
+		//
+		//--------------------------------------------------------------------------	
+		/**
+		 *  Padding from the right
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 2.5
+		 *  @productversion Flex 4.5
+		 */ 
+		protected var paddingRight:int;
+		
+		/**
+		 *  Vertical padding from top and bottom
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 2.5
+		 *  @productversion Flex 4.5
+		 */ 
+		protected var paddingVertical:int;
+		
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Overridden methods
+		//
+		//--------------------------------------------------------------------------	
+		
+		/**
+		 *  @protected
+		 */ 
+		override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void
+		{
+			super.drawBackground(unscaledWidth, unscaledHeight);
+			
+			var thumbWidth:Number = unscaledWidth - paddingRight;
+			
+			graphics.beginFill(getStyle("thumbColor"), 1);
+			graphics.drawRect(0.5, paddingVertical + 0.5,thumbWidth, unscaledHeight - 2 * paddingVertical);
+			
+			graphics.endFill();
+		}
+		
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/ViewMenuItemSkin.as
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/ViewMenuItemSkin.as b/tourdeflexmobile/src/spark/skins/android4/ViewMenuItemSkin.as
new file mode 100644
index 0000000..ae9a68e
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/ViewMenuItemSkin.as
@@ -0,0 +1,238 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.GradientType;
+	import flash.display.Graphics;
+	
+	import mx.core.DPIClassification;
+	import mx.core.mx_internal;
+	
+	import spark.components.IconPlacement;
+	import spark.skins.mobile.assets.ViewMenuItem_down;
+	import spark.skins.mobile.assets.ViewMenuItem_showsCaret;
+	import spark.skins.mobile.assets.ViewMenuItem_up;
+	import spark.skins.mobile.supportClasses.ButtonSkinBase;
+	import spark.skins.mobile120.assets.ViewMenuItem_down;
+	import spark.skins.mobile120.assets.ViewMenuItem_showsCaret;
+	import spark.skins.mobile120.assets.ViewMenuItem_up;
+	import spark.skins.mobile320.assets.ViewMenuItem_down;
+	import spark.skins.mobile320.assets.ViewMenuItem_showsCaret;
+	import spark.skins.mobile320.assets.ViewMenuItem_up;
+//	import spark.skins.mobile480.assets.ViewMenuItem_down;
+	//import spark.skins.mobile480.assets.ViewMenuItem_showsCaret;
+	//import spark.skins.mobile480.assets.ViewMenuItem_up;
+	import spark.skins.mobile640.assets.ViewMenuItem_down;
+	import spark.skins.mobile640.assets.ViewMenuItem_showsCaret;
+	import spark.skins.mobile640.assets.ViewMenuItem_up;
+	
+	
+	use namespace mx_internal;
+	
+	/**
+	 *  Default skin for ViewMenuItem. Supports a label, icon and iconPlacement and draws a background.   
+	 * 
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10
+	 *  @playerversion AIR 2.5 
+	 *  @productversion Flex 4.5
+	 */ 
+	public class ViewMenuItemSkin extends ButtonSkin
+	{
+		/**
+		 *  Constructor.
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 2.5
+		 *  @productversion Flex 4.5
+		 */
+		public function ViewMenuItemSkin()
+		{
+			super();
+			
+			switch (applicationDPI)
+			{
+				case DPIClassification.DPI_640:
+				{
+					
+					upBorderSkin = spark.skins.mobile640.assets.ViewMenuItem_up;
+					downBorderSkin = spark.skins.mobile640.assets.ViewMenuItem_down;
+					showsCaretBorderSkin = spark.skins.mobile640.assets.ViewMenuItem_showsCaret;
+					
+					layoutGap = 24;
+					layoutPaddingLeft = 24;
+					layoutPaddingRight = 24;
+					layoutPaddingTop = 24;
+					layoutPaddingBottom = 24;
+					layoutBorderSize = 3;   
+					
+					break;
+				}
+				case DPIClassification.DPI_480:
+				{   
+					// Note provisional may need changes
+					upBorderSkin = spark.skins.mobile.assets.ViewMenuItem_up;
+					downBorderSkin = spark.skins.mobile.assets.ViewMenuItem_down;
+					showsCaretBorderSkin = spark.skins.mobile.assets.ViewMenuItem_showsCaret;
+					
+					layoutGap = 16;
+					layoutPaddingLeft = 16;
+					layoutPaddingRight = 16;
+					layoutPaddingTop = 16;
+					layoutPaddingBottom = 16;
+					layoutBorderSize = 2;
+					
+					break;
+					
+				}
+				case DPIClassification.DPI_320:
+				{
+					
+					upBorderSkin = spark.skins.mobile320.assets.ViewMenuItem_up;
+					downBorderSkin = spark.skins.mobile320.assets.ViewMenuItem_down;
+					showsCaretBorderSkin = spark.skins.mobile320.assets.ViewMenuItem_showsCaret;
+					
+					layoutGap = 12;
+					layoutPaddingLeft = 12;
+					layoutPaddingRight = 12;
+					layoutPaddingTop = 12;
+					layoutPaddingBottom = 12;
+					layoutBorderSize = 2;   
+					
+					
+					break;
+				}
+				case DPIClassification.DPI_240:
+				{   
+					upBorderSkin = spark.skins.mobile.assets.ViewMenuItem_up;
+					downBorderSkin = spark.skins.mobile.assets.ViewMenuItem_down;
+					showsCaretBorderSkin = spark.skins.mobile.assets.ViewMenuItem_showsCaret;
+					
+					layoutGap = 8;
+					layoutPaddingLeft = 8;
+					layoutPaddingRight = 8;
+					layoutPaddingTop = 8;
+					layoutPaddingBottom = 8;
+					layoutBorderSize = 1;
+					
+					break;
+					
+				}
+				case DPIClassification.DPI_120:
+				{   
+					upBorderSkin = spark.skins.mobile120.assets.ViewMenuItem_up;
+					downBorderSkin = spark.skins.mobile120.assets.ViewMenuItem_down;
+					showsCaretBorderSkin = spark.skins.mobile120.assets.ViewMenuItem_showsCaret;
+					
+					layoutGap = 4;
+					layoutPaddingLeft = 4;
+					layoutPaddingRight = 4;
+					layoutPaddingTop = 4;
+					layoutPaddingBottom = 4;
+					layoutBorderSize = 1;
+					
+					break;
+					
+				}
+				default:
+				{
+					upBorderSkin = spark.skins.mobile.assets.ViewMenuItem_up;
+					downBorderSkin = spark.skins.mobile.assets.ViewMenuItem_down;
+					showsCaretBorderSkin = spark.skins.mobile.assets.ViewMenuItem_showsCaret; 
+					
+					layoutGap = 6;
+					layoutPaddingLeft = 6;
+					layoutPaddingRight = 6;
+					layoutPaddingTop = 6;
+					layoutPaddingBottom = 6;
+					layoutBorderSize = 1;
+				}
+			}
+			
+		}
+		
+		/**
+		 *  Class to use for the border in the showsCaret state.
+		 * 
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 2.5 
+		 *  @productversion Flex 4.5
+		 *       
+		 *  @default Button_down
+		 */ 
+		protected var showsCaretBorderSkin:Class;
+		
+		/**
+		 *  @private
+		 */
+		override protected function getBorderClassForCurrentState():Class
+		{
+			var borderClass:Class = super.getBorderClassForCurrentState();
+			
+			if (currentState == "showsCaret")
+				borderClass = showsCaretBorderSkin;  
+			
+			return borderClass;
+		}
+		
+		/**
+		 *  @private
+		 */
+		override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void
+		{
+			var iconPlacement:String = getStyle("iconPlacement");
+			useCenterAlignment = (iconPlacement == IconPlacement.LEFT)
+				|| (iconPlacement == IconPlacement.RIGHT);
+			
+			super.layoutContents(unscaledWidth, unscaledHeight);
+		}
+		
+		/**
+		 *  @private
+		 */
+		override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void
+		{
+			// omit call to super.drawBackground(), drawRect instead
+			
+			if (currentState == "showsCaret" || currentState == "down")
+			{
+				graphics.beginFill(getStyle("focusColor"));
+			}
+			else
+			{
+				colorMatrix.createGradientBox(unscaledWidth, 
+					unscaledHeight, 
+					Math.PI / 2, 0, 0);
+				var chromeColor:uint = getStyle("chromeColor");
+				
+				graphics.beginGradientFill(GradientType.LINEAR,
+					[chromeColor, chromeColor],
+					[1.0, 1.0],
+					[0, 255],
+					colorMatrix);
+			}
+			graphics.drawRect(0,0,unscaledWidth,unscaledHeight);
+			graphics.lineStyle(0.5,0,0.2);
+			graphics.drawRect(0,unscaledHeight,unscaledWidth,0.5);
+			graphics.endFill();
+		}
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/ViewMenuSkin.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/ViewMenuSkin.mxml b/tourdeflexmobile/src/spark/skins/android4/ViewMenuSkin.mxml
new file mode 100644
index 0000000..36feed6
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/ViewMenuSkin.mxml
@@ -0,0 +1,184 @@
+<?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.
+
+-->
+
+
+<!--- The default skin class for a Spark ViewMenu in a mobile application.  
+
+@see spark.components.ViewMenu
+
+@langversion 3.0
+@playerversion Flash 10
+@playerversion AIR 1.5
+@productversion Flex 4
+-->
+<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
+			 xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled="0.5">
+	
+	<fx:Metadata>
+		<![CDATA[ 
+		/** 
+		* @copy spark.skins.spark.ApplicationSkin#hostComponent
+		*/
+		[HostComponent("spark.components.ViewMenu")]
+		]]>
+	</fx:Metadata> 
+	
+	<fx:Script fb:purpose="styling">
+		<![CDATA[
+			import mx.core.DPIClassification;
+			import mx.core.FlexGlobals;
+			import spark.effects.easing.Power;
+			
+			
+			/**
+			 * @private
+			 */
+			override protected function initializationComplete():void
+			{
+				useChromeColor = false;
+				super.initializationComplete();
+			}
+			
+			/**
+			 *  @copy spark.skins.mobile.supportClasses.MobileSkin#applicationDPI
+			 */
+			public function get applicationDPI():int
+			{
+				return FlexGlobals.topLevelApplication.applicationDPI;
+			}
+			
+			/**
+			 *  @private
+			 */
+			override protected function measure():void
+			{
+				super.measure();
+				
+				// not actually used in normal situations, but 
+				// is here to prevent bug 28950 if ViewMenu is misused
+				measuredHeight = 200;
+			}
+			
+			/**
+			 *  @private
+			 */
+			override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
+			{
+				super.updateDisplayList(unscaledWidth, unscaledHeight);
+				
+				var strokeWeight:Number = (applicationDPI == DPIClassification.DPI_640 || applicationDPI == DPIClassification.DPI_480 || applicationDPI == DPIClassification.DPI_320) ? 2 : 1;
+				var separatorWeight:Number = 1;
+				
+				if (applicationDPI == DPIClassification.DPI_640)
+					separatorWeight = 6;
+				else if (applicationDPI == DPIClassification.DPI_480)
+					separatorWeight = 4;
+				else if (applicationDPI == DPIClassification.DPI_320)
+					separatorWeight = 3;
+				else if (applicationDPI == DPIClassification.DPI_240)
+					separatorWeight = 2;  
+				else if (applicationDPI == DPIClassification.DPI_120)
+					separatorWeight = 1;  
+				
+				contentGroup.top = strokeWeight + separatorWeight;
+				contentGroup.bottom = separatorWeight;
+				contentGroupLayout.gap = separatorWeight;
+			}
+			
+		]]>
+	</fx:Script>
+	
+	<s:states>
+		<s:State name="normal"                          stateGroups="openedGroup"/>
+		<s:State name="closed"                          stateGroups="closedGroup"/>
+		<s:State name="disabled"                        stateGroups="openedGroup"/>
+		<s:State name="normalAndLandscape"              stateGroups="openedGroup, landscapeGroup"/>
+		<s:State name="closedAndLandscape"              stateGroups="closedGroup, landscapeGroup"/>
+		<s:State name="disabledAndLandscape"            stateGroups="openedGroup, landscapeGroup" />
+	</s:states>
+	
+	<s:transitions>
+		<s:Transition fromState="closed" toState="normal" autoReverse="true">
+			<s:Parallel>
+				<s:Fade target="{chromeGroup}" duration="150" easer="{new Power(0.5, 3)}" /> 
+				<s:Move target="{chromeGroup}" duration="150" disableLayout="true"  easer="{new Power(0, 5)}"/>
+			</s:Parallel>
+		</s:Transition>
+		
+		<s:Transition fromState="closedAndLandscape" toState="normalAndLandscape" autoReverse="true">
+			<s:Parallel>
+				<s:Fade target="{chromeGroup}" duration="150" easer="{new Power(0.5, 3)}" /> 
+				<s:Move target="{chromeGroup}" duration="150" disableLayout="true"  easer="{new Power(0, 5)}"/>
+			</s:Parallel>
+		</s:Transition>
+		
+		<s:Transition fromState="normal" toState="closed" autoReverse="true">
+			<s:Parallel>
+				<s:Fade target="{chromeGroup}" duration="100"/> 
+				<s:Move target="{chromeGroup}" duration="100" disableLayout="true"/>
+			</s:Parallel>
+		</s:Transition>
+		
+		<s:Transition fromState="normalAndLandscape" toState="closedAndLandscape" autoReverse="true">
+			<s:Parallel>
+				<s:Fade target="{chromeGroup}" duration="100"/> 
+				<s:Move target="{chromeGroup}" duration="100" disableLayout="true"/>
+			</s:Parallel>
+		</s:Transition>
+	</s:transitions>
+	
+	<!-- The ViewMenu and its skin are sized to the application.
+	The menu chrome is a separate group that is anchored to the bottom of the skin. -->
+	
+	
+	<s:Group id="chromeGroup"
+			 left="0"
+			 right="0"
+			 top.closedGroup="{hostComponent.height - chromeGroup.height / 2}"
+			 bottom.openedGroup="0" 
+			 visible.closedGroup="false">
+		
+		<s:Rect id="backgroundRect" left="18" right="18" top="1" bottom="0">
+			<s:fill>
+				<s:SolidColor color="#FFFFFF" />
+			</s:fill>
+			<s:stroke>
+				<s:SolidColorStroke weight="0.5" alpha="0.2" />
+			</s:stroke>
+			<s:filters>
+				<s:DropShadowFilter alpha="0.5" />
+			</s:filters>
+		</s:Rect>
+		
+		<!--
+		Note: setting the minimum size to 0 here so that changes to the host component's
+		size will not be thwarted by this skin part's minimum size.   This is a compromise,
+		more about it here: http://bugs.adobe.com/jira/browse/SDK-21143
+		-->
+		<!--- @copy spark.components.SkinnableContainer#contentGroup -->
+		<s:Group id="contentGroup" left="20" right="20" top="3" bottom="2" minWidth="0" minHeight="0">
+			<s:layout>
+				<s:VerticalLayout gap="-1" id="contentGroupLayout"  horizontalAlign="contentJustify" >
+				</s:VerticalLayout>
+			</s:layout>
+		</s:Group>    
+	</s:Group>
+</s:SparkSkin>
+

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/assets/ActionBarBackground.fxg
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/assets/ActionBarBackground.fxg b/tourdeflexmobile/src/spark/skins/android4/assets/ActionBarBackground.fxg
new file mode 100644
index 0000000..febd3f7
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/assets/ActionBarBackground.fxg
@@ -0,0 +1,55 @@
+<?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.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008">
+  <Group>
+    <Group>
+      <Path winding="nonZero" data="M360 48 0 48 0 0 360 0 360 48Z">
+        <fill>
+          <SolidColor color="#DEDEDD"/>
+        </fill>
+      </Path>
+    </Group>
+    <Path winding="nonZero" data="M360 1 0 1 0 0 360 0 360 1Z">
+      <fill>
+        <SolidColor color="#E0E0E0"/>
+      </fill>
+    </Path>
+    <Group y="46" alpha="0.100006">
+      <Group>
+        <mask>
+          <Group>
+            <Path winding="nonZero" data="M0 2 360 2 360 0 0 0 0 2Z">
+              <fill>
+                <SolidColor color="#FFFFFF"/>
+              </fill>
+            </Path>
+          </Group>
+        </mask>
+        <Path winding="nonZero" data="M360 2 0 2 0 0 360 0 360 2Z">
+          <fill>
+            <SolidColor color="#333333"/>
+          </fill>
+        </Path>
+      </Group>
+    </Group>
+    <Path visible="false" winding="nonZero" data="M0 0 360 0 360 48 0 48 0 0Z"/>
+  </Group>
+</Graphic>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/assets/BusyIndicator.fxg
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/assets/BusyIndicator.fxg b/tourdeflexmobile/src/spark/skins/android4/assets/BusyIndicator.fxg
new file mode 100644
index 0000000..71cd0fa
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/assets/BusyIndicator.fxg
@@ -0,0 +1,64 @@
+<?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.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008" viewWidth="36" viewHeight="36">
+  <Group>
+    <Group x="-12.8125" y="-6.73926">
+      <mask>
+        <Group x="12.8496" y="6.6665">
+          <Path winding="nonZero" data="M0 18.0117C0 27.9429 6.96289 35.9961 17.9629 36.0239L17.9629 33.0127C8.96289 32.9858 3.01074 26.2813 3.01074 18.0117 3.01074 9.74316 8.96289 3.03809 17.9629 3.00977L17.9629 0C6.96289 0.027832 0 8.08008 0 18.0117Z">
+            <fill>
+              <SolidColor color="#FFFFFF"/>
+            </fill>
+          </Path>
+        </Group>
+      </mask>
+      <Path winding="nonZero" data="M0 36.7485 16.332 0 44.7012 12.6084 28.3691 49.3569 0 36.7485Z">
+        <fill>
+          <LinearGradient x="13.4458" y="44.7148" scaleX="27.8603" rotation="293.962">
+            <GradientEntry ratio="0" color="#FFFFFF"/>
+            <GradientEntry ratio="0.576638" color="#B4B4B3"/>
+            <GradientEntry ratio="0.820765" color="#9C9C9B"/>
+            <GradientEntry ratio="1" color="#919190"/>
+          </LinearGradient>
+        </fill>
+      </Path>
+    </Group>
+    <Group x="2.61719" y="-8">
+      <mask>
+        <Group x="15.3828" y="7.92773">
+          <Path winding="nonZero" data="M0 3.00977C8 3.03809 14.9512 9.74316 14.9512 18.0117 14.9512 26.2813 8 32.9858 0 33.0127L0 36.0239C10 35.9961 17.9629 27.9429 17.9629 18.0117 17.9629 8.08008 10 0.027832 0 0L0 3.00977Z">
+            <fill>
+              <SolidColor color="#FFFFFF"/>
+            </fill>
+          </Path>
+        </Group>
+      </mask>
+      <Path winding="nonZero" data="M49.7617 34.4028 29.1016 0 0 17.4766 20.6621 51.8799 49.7617 34.4028Z">
+        <fill>
+          <LinearGradient x="37.6406" y="47.1841" scaleX="27.7241" rotation="239.012">
+            <GradientEntry ratio="0" color="#919190"/>
+            <GradientEntry ratio="1" color="#FFFFFF"/>
+          </LinearGradient>
+        </fill>
+      </Path>
+    </Group>
+  </Group>
+</Graphic>

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/assets/ButtonBarFirstButton_down.fxg
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/assets/ButtonBarFirstButton_down.fxg b/tourdeflexmobile/src/spark/skins/android4/assets/ButtonBarFirstButton_down.fxg
new file mode 100644
index 0000000..4a7c5f7
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/assets/ButtonBarFirstButton_down.fxg
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008">
+  <Group scaleGridLeft="29.75" scaleGridRight="89.25" scaleGridTop="36" scaleGridBottom="12">
+    <Path winding="nonZero" data="M119 48 0 48 0 0 119 0 119 48Z">
+	  <fill>
+		<SolidColor color="#DEDEDD"/>
+	  </fill>
+	</Path>
+    <Rect alpha="0.5" width="119" height="48">
+      <fill>
+        <SolidColor color="#33B5E5"/>
+      </fill>
+    </Rect>
+  </Group>
+</Graphic>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/assets/ButtonBarFirstButton_selectedDown.fxg
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/assets/ButtonBarFirstButton_selectedDown.fxg b/tourdeflexmobile/src/spark/skins/android4/assets/ButtonBarFirstButton_selectedDown.fxg
new file mode 100644
index 0000000..110f940
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/assets/ButtonBarFirstButton_selectedDown.fxg
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008">
+  <Group scaleGridLeft="29.75" scaleGridRight="89.25" scaleGridTop="36" scaleGridBottom="12">
+	<Path winding="nonZero" data="M119 48 0 48 0 0 119 0 119 48Z">
+	  <fill>
+		<SolidColor color="#DEDEDD"/>
+	  </fill>
+	</Path>
+    <Path alpha="0.5" winding="nonZero" data="M119 48 0 48 0 0 119 0 119 48Z">
+      <fill>
+        <SolidColor color="#33B5E5"/>
+      </fill>
+    </Path>
+    <Path y="42" winding="nonZero" data="M119 6 0 6 0 0 119 0 119 6Z">
+      <fill>
+        <SolidColor color="#33B5E5"/>
+      </fill>
+    </Path>
+  </Group>
+</Graphic>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/assets/ButtonBarFirstButton_selectedUp.fxg
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/assets/ButtonBarFirstButton_selectedUp.fxg b/tourdeflexmobile/src/spark/skins/android4/assets/ButtonBarFirstButton_selectedUp.fxg
new file mode 100644
index 0000000..52b1a90
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/assets/ButtonBarFirstButton_selectedUp.fxg
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008">
+  <Group scaleGridLeft="29.75" scaleGridRight="89.25" scaleGridTop="36" scaleGridBottom="12">
+    <Path winding="nonZero" data="M119 48 0 48 0 0 119 0 119 48Z">
+	  <fill>
+		<SolidColor color="#DEDEDD"/>
+	  </fill>
+	</Path>
+    <Path y="42" winding="nonZero" data="M119 6 0 6 0 0 119 0 119 6Z">
+      <fill>
+        <SolidColor color="#33B5E5"/>
+      </fill>
+    </Path>
+  </Group>
+</Graphic>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/assets/ButtonBarFirstButton_up.fxg
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/assets/ButtonBarFirstButton_up.fxg b/tourdeflexmobile/src/spark/skins/android4/assets/ButtonBarFirstButton_up.fxg
new file mode 100644
index 0000000..59b9cd9
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/assets/ButtonBarFirstButton_up.fxg
@@ -0,0 +1,29 @@
+<?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.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008">
+  <Group scaleGridLeft="29.75" scaleGridRight="89.25" scaleGridTop="36" scaleGridBottom="12">
+    <Path winding="nonZero" data="M119 48 0 48 0 0 119 0 119 48Z">
+      <fill>
+        <SolidColor color="#DEDEDD"/>
+      </fill>
+    </Path>
+  </Group>
+</Graphic>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/assets/ButtonBarMiddleButton_down.fxg
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/assets/ButtonBarMiddleButton_down.fxg b/tourdeflexmobile/src/spark/skins/android4/assets/ButtonBarMiddleButton_down.fxg
new file mode 100644
index 0000000..4e4f80b
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/assets/ButtonBarMiddleButton_down.fxg
@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008">
+  <Group>
+    <Path winding="nonZero" data="M119 48 0 48 0 0 119 0 119 48Z">
+      <fill>
+        <SolidColor color="#DEDEDD"/>
+      </fill>
+    </Path>
+    <Group y="12" alpha="0.100006">
+      <Group>
+        <mask>
+          <Group>
+            <Path winding="nonZero" data="M1 24 0 24 0 0 1 0 1 24Z">
+              <fill>
+                <SolidColor color="#FFFFFF"/>
+              </fill>
+            </Path>
+          </Group>
+        </mask>
+        <Path winding="nonZero" data="M1 24 0 24 0 0 1 0 1 24Z">
+          <fill>
+            <SolidColor color="#333333"/>
+          </fill>
+        </Path>
+      </Group>
+    </Group>
+    <Group x="118" y="12" alpha="0.100006">
+      <Group>
+        <mask>
+          <Group>
+            <Path winding="nonZero" data="M1 24 0 24 0 0 1 0 1 24Z">
+              <fill>
+                <SolidColor color="#FFFFFF"/>
+              </fill>
+            </Path>
+          </Group>
+        </mask>
+        <Path winding="nonZero" data="M1 24 0 24 0 0 1 0 1 24Z">
+          <fill>
+            <SolidColor color="#333333"/>
+          </fill>
+        </Path>
+      </Group>
+    </Group>
+    <Path alpha="0.5" winding="nonZero" data="M119 48 0 48 0 0 119 0 119 48Z">
+      <fill>
+        <SolidColor color="#33B5E5"/>
+      </fill>
+    </Path>
+  </Group>
+</Graphic>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/assets/ButtonBarMiddleButton_selectedDown.fxg
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/assets/ButtonBarMiddleButton_selectedDown.fxg b/tourdeflexmobile/src/spark/skins/android4/assets/ButtonBarMiddleButton_selectedDown.fxg
new file mode 100644
index 0000000..ec37077
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/assets/ButtonBarMiddleButton_selectedDown.fxg
@@ -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.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008">
+  <Group>
+    <Path winding="nonZero" data="M119 48 0 48 0 0 119 0 119 48Z">
+      <fill>
+        <SolidColor color="#DEDEDD"/>
+      </fill>
+    </Path>
+    <Group y="12" alpha="0.100006">
+      <Group>
+        <mask>
+          <Group>
+            <Path winding="nonZero" data="M1 24 0 24 0 0 1 0 1 24Z">
+              <fill>
+                <SolidColor color="#FFFFFF"/>
+              </fill>
+            </Path>
+          </Group>
+        </mask>
+        <Path winding="nonZero" data="M1 24 0 24 0 0 1 0 1 24Z">
+          <fill>
+            <SolidColor color="#333333"/>
+          </fill>
+        </Path>
+      </Group>
+    </Group>
+    <Group x="118" y="12" alpha="0.100006">
+      <Group>
+        <mask>
+          <Group>
+            <Path winding="nonZero" data="M1 24 0 24 0 0 1 0 1 24Z">
+              <fill>
+                <SolidColor color="#FFFFFF"/>
+              </fill>
+            </Path>
+          </Group>
+        </mask>
+        <Path winding="nonZero" data="M1 24 0 24 0 0 1 0 1 24Z">
+          <fill>
+            <SolidColor color="#333333"/>
+          </fill>
+        </Path>
+      </Group>
+    </Group>
+    <Path y="42" winding="nonZero" data="M119 6 0 6 0 0 119 0 119 6Z">
+      <fill>
+        <SolidColor color="#33B5E5"/>
+      </fill>
+    </Path>
+    <Path alpha="0.5" winding="nonZero" data="M119 48 0 48 0 0 119 0 119 48Z">
+      <fill>
+        <SolidColor color="#33B5E5"/>
+      </fill>
+    </Path>
+  </Group>
+</Graphic>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/assets/ButtonBarMiddleButton_selectedUp.fxg
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/assets/ButtonBarMiddleButton_selectedUp.fxg b/tourdeflexmobile/src/spark/skins/android4/assets/ButtonBarMiddleButton_selectedUp.fxg
new file mode 100644
index 0000000..88a4643
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/assets/ButtonBarMiddleButton_selectedUp.fxg
@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008">
+  <Group>
+    <Path winding="nonZero" data="M119 48 0 48 0 0 119 0 119 48Z">
+      <fill>
+        <SolidColor color="#DEDEDD"/>
+      </fill>
+    </Path>
+    <Group y="12" alpha="0.100006">
+      <Group>
+        <mask>
+          <Group>
+            <Path winding="nonZero" data="M1 24 0 24 0 0 1 0 1 24Z">
+              <fill>
+                <SolidColor color="#FFFFFF"/>
+              </fill>
+            </Path>
+          </Group>
+        </mask>
+        <Path winding="nonZero" data="M1 24 0 24 0 0 1 0 1 24Z">
+          <fill>
+            <SolidColor color="#333333"/>
+          </fill>
+        </Path>
+      </Group>
+    </Group>
+    <Group x="118" y="12" alpha="0.100006">
+      <Group>
+        <mask>
+          <Group>
+            <Path winding="nonZero" data="M1 24 0 24 0 0 1 0 1 24Z">
+              <fill>
+                <SolidColor color="#FFFFFF"/>
+              </fill>
+            </Path>
+          </Group>
+        </mask>
+        <Path winding="nonZero" data="M1 24 0 24 0 0 1 0 1 24Z">
+          <fill>
+            <SolidColor color="#333333"/>
+          </fill>
+        </Path>
+      </Group>
+    </Group>
+    <Path y="42" winding="nonZero" data="M119 6 0 6 0 0 119 0 119 6Z">
+      <fill>
+        <SolidColor color="#33B5E5"/>
+      </fill>
+    </Path>
+  </Group>
+</Graphic>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/assets/ButtonBarMiddleButton_up.fxg
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/assets/ButtonBarMiddleButton_up.fxg b/tourdeflexmobile/src/spark/skins/android4/assets/ButtonBarMiddleButton_up.fxg
new file mode 100644
index 0000000..be1b619
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/assets/ButtonBarMiddleButton_up.fxg
@@ -0,0 +1,65 @@
+<?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.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008">
+  <Group>
+    <Path winding="nonZero" data="M119 48 0 48 0 0 119 0 119 48Z">
+      <fill>
+        <SolidColor color="#DEDEDD"/>
+      </fill>
+    </Path>
+    <Group y="12" alpha="0.100006">
+      <Group>
+        <mask>
+          <Group>
+            <Path winding="nonZero" data="M1 24 0 24 0 0 1 0 1 24Z">
+              <fill>
+                <SolidColor color="#FFFFFF"/>
+              </fill>
+            </Path>
+          </Group>
+        </mask>
+        <Path winding="nonZero" data="M1 24 0 24 0 0 1 0 1 24Z">
+          <fill>
+            <SolidColor color="#333333"/>
+          </fill>
+        </Path>
+      </Group>
+    </Group>
+    <Group x="118" y="12" alpha="0.100006">
+      <Group>
+        <mask>
+          <Group>
+            <Path winding="nonZero" data="M1 24 0 24 0 0 1 0 1 24Z">
+              <fill>
+                <SolidColor color="#FFFFFF"/>
+              </fill>
+            </Path>
+          </Group>
+        </mask>
+        <Path winding="nonZero" data="M1 24 0 24 0 0 1 0 1 24Z">
+          <fill>
+            <SolidColor color="#333333"/>
+          </fill>
+        </Path>
+      </Group>
+    </Group>
+  </Group>
+</Graphic>
\ No newline at end of file


Mime
View raw message