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:05 UTC
[15/22] added in Android Skins
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