Repository: flex-sdk Updated Branches: refs/heads/new_android_skins 73ee3c381 -> 952531e04
Added cleaner versions of ActionBarBackground.fxg, Button_down.fxg and Button_up.fxt Added skins for Android 4.x versions of ActionBarSkin.as and ButtonSkin.as Project: http://git-wip-us.apache.org/repos/asf/flex-sdk/repo Commit: http://git-wip-us.apache.org/repos/asf/flex-sdk/commit/952531e0 Tree: http://git-wip-us.apache.org/repos/asf/flex-sdk/tree/952531e0 Diff: http://git-wip-us.apache.org/repos/asf/flex-sdk/diff/952531e0 Branch: refs/heads/new_android_skins Commit: 952531e049295cad95c493217ba8633e3cb2ddd7 Parents: 73ee3c3 Author: Om <[email protected]> Authored: Tue Mar 18 18:13:55 2014 -0700 Committer: Om <[email protected]> Committed: Tue Mar 18 18:13:55 2014 -0700 ---------------------------------------------------------------------- .../src/spark/skins/android4/ActionBarSkin.as | 743 +++++++++++++++++++ .../src/spark/skins/android4/ButtonSkin.as | 397 ++++++++++ .../android4/assets/ActionBarBackground.fxg | 35 +- .../spark/skins/android4/assets/Button_down.fxg | 77 +- .../spark/skins/android4/assets/Button_up.fxg | 67 +- .../src/spark/skins/mobile/ActionBarSkin.as | 15 +- 6 files changed, 1269 insertions(+), 65 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/952531e0/frameworks/projects/mobiletheme/src/spark/skins/android4/ActionBarSkin.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/mobiletheme/src/spark/skins/android4/ActionBarSkin.as b/frameworks/projects/mobiletheme/src/spark/skins/android4/ActionBarSkin.as new file mode 100644 index 0000000..7b64f06 --- /dev/null +++ b/frameworks/projects/mobiletheme/src/spark/skins/android4/ActionBarSkin.as @@ -0,0 +1,743 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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.events.Event; +import flash.text.TextFormatAlign; + +import mx.core.DPIClassification; +import mx.core.mx_internal; +import mx.utils.ColorUtil; + +import spark.components.ActionBar; +import spark.components.Group; +import spark.components.supportClasses.StyleableTextField; +import spark.core.SpriteVisualElement; +import spark.layouts.HorizontalAlign; +import spark.layouts.HorizontalLayout; +import spark.layouts.VerticalAlign; +import spark.skins.android4.assets.ActionBarBackground; +import spark.skins.mobile.supportClasses.MobileSkin; + +use namespace mx_internal; + +/** + * The default skin class for the Spark ActionBar component in mobile + * applications. + * + * @see spark.components.ActionBar + * @see spark.skins.mobile.TransparentNavigationButtonSkin + * @see spark.skins.mobile.BeveledBackButtonSkin + * @see spark.skins.mobile.TransparentActionButtonSkin + * @see spark.skins.mobile.BeveledActionButtonSkin + * + * @langversion 3.0 + * @playerversion AIR 2.5 + * @productversion Flex 4.5 + */ +public class ActionBarSkin extends MobileSkin +{ + //-------------------------------------------------------------------------- + // + // Class constants + // + //-------------------------------------------------------------------------- + + /** + * @private + */ + mx_internal static const ACTIONBAR_CHROME_COLOR_RATIOS:Array = [0, 80]; + + //-------------------------------------------------------------------------- + // + // Constructor + // + //-------------------------------------------------------------------------- + + /** + * Constructor. + * + * @langversion 3.0 + * @playerversion AIR 2.5 + * @productversion Flex 4.5 + */ + public function ActionBarSkin() + { + super(); + + borderClass = spark.skins.android4.assets.ActionBarBackground; + + switch (applicationDPI) + { + + case DPIClassification.DPI_640: + { + borderSize = 2; + layoutShadowHeight = 12; + layoutContentGroupHeight = 172; + layoutTitleGroupHorizontalPadding = 52; + + break; + } + case DPIClassification.DPI_480: + { + // Note provisional may need changes + borderSize = 2; + layoutShadowHeight = 9; + layoutContentGroupHeight = 130; + layoutTitleGroupHorizontalPadding = 40; + + + break; + } + case DPIClassification.DPI_320: + { + borderSize = 2; + layoutShadowHeight = 6; + layoutContentGroupHeight = 86; + layoutTitleGroupHorizontalPadding = 26; + + break; + } + case DPIClassification.DPI_240: + { + borderSize = 1; + layoutShadowHeight = 3; + layoutContentGroupHeight = 65; + layoutTitleGroupHorizontalPadding = 20; + + break; + } + case DPIClassification.DPI_120: + { + borderSize = 1; + layoutShadowHeight = 1.5; + layoutContentGroupHeight = 32; + layoutTitleGroupHorizontalPadding = 10; + + break; + } + default: + { + // default DPI_160 + borderSize = 1; + layoutShadowHeight = 3; + layoutContentGroupHeight = 43; + layoutTitleGroupHorizontalPadding = 13; + + break; + } + } + } + + //-------------------------------------------------------------------------- + // + // Graphics variables + // + //-------------------------------------------------------------------------- + + /** + * FXG Class reference for the ActionBar background border graphic. + * + * @langversion 3.0 + * @playerversion AIR 2.5 + * @productversion Flex 4.5 + */ + protected var borderClass:Class; + + //-------------------------------------------------------------------------- + // + // Layout variables + // + //-------------------------------------------------------------------------- + + /** + * @private + */ + private var borderSize:uint; + + /** + * Height of shadow embedded in borderClass graphic. + * + * @langversion 3.0 + * @playerversion AIR 2.5 + * @productversion Flex 4.5 + */ + protected var layoutShadowHeight:uint; + + /** + * Default height for navigationGroup, titleGroup and actionGroup. + * + * @langversion 3.0 + * @playerversion AIR 2.5 + * @productversion Flex 4.5 + */ + protected var layoutContentGroupHeight:uint; + + /** + * Default horizontal padding for the titleGroup and titleDisplay. + * + * @langversion 3.0 + * @playerversion AIR 2.5 + * @productversion Flex 4.5 + */ + protected var layoutTitleGroupHorizontalPadding:uint; + + //-------------------------------------------------------------------------- + // + // Variables + // + //-------------------------------------------------------------------------- + + /** + * @copy spark.skins.spark.ApplicationSkin#hostComponent + */ + public var hostComponent:ActionBar; + + /** + * @private + */ + private var _navigationVisible:Boolean = false; + + /** + * @private + */ + private var _titleContentVisible:Boolean = false; + + /** + * @private + */ + private var _actionVisible:Boolean = false; + + /** + * @private + */ + private var border:SpriteVisualElement; + + //-------------------------------------------------------------------------- + // + // Skin parts + // + //-------------------------------------------------------------------------- + + /** + * @copy spark.components.ActionBar#navigationGroup + */ + public var navigationGroup:Group; + + /** + * @copy spark.components.ActionBar#titleGroup + */ + public var titleGroup:Group; + + /** + * @copy spark.components.ActionBar#actionGroup + */ + public var actionGroup:Group; + + /** + * @copy spark.components.ActionBar#titleDisplay + * + * @private + * Wraps a StyleableTextField in a UIComponent to be compatible with + * ViewTransition effects. + */ + public var titleDisplay:TitleDisplayComponent; + + //-------------------------------------------------------------------------- + // + // Overridden methods + // + //-------------------------------------------------------------------------- + + /** + * @private + */ + override protected function createChildren():void + { + if (borderClass) + { + border = new borderClass(); + addChild(border); + } + + navigationGroup = new Group(); + var hLayout:HorizontalLayout = new HorizontalLayout(); + hLayout.horizontalAlign = HorizontalAlign.LEFT; + hLayout.verticalAlign = VerticalAlign.MIDDLE; + hLayout.gap = 0; + hLayout.paddingLeft = hLayout.paddingTop = hLayout.paddingRight = + hLayout.paddingBottom = 0; + navigationGroup.layout = hLayout; + navigationGroup.id = "navigationGroup"; + + titleGroup = new Group(); + hLayout = new HorizontalLayout(); + hLayout.horizontalAlign = HorizontalAlign.LEFT; + hLayout.verticalAlign = VerticalAlign.MIDDLE; + hLayout.gap = 0; + hLayout.paddingLeft = hLayout.paddingRight = layoutTitleGroupHorizontalPadding; + hLayout.paddingTop = hLayout.paddingBottom = 0; + titleGroup.layout = hLayout; + titleGroup.id = "titleGroup"; + + actionGroup = new Group(); + hLayout = new HorizontalLayout(); + hLayout.horizontalAlign = HorizontalAlign.RIGHT; + hLayout.verticalAlign = VerticalAlign.MIDDLE; + hLayout.gap = 0; + hLayout.paddingLeft = hLayout.paddingTop = hLayout.paddingRight = + hLayout.paddingBottom = 0; + actionGroup.layout = hLayout; + actionGroup.id = "actionGroup"; + + titleDisplay = new TitleDisplayComponent(); + titleDisplay.id = "titleDisplay"; + + // initialize titleAlign style (center is managed explicitly in layoutContents) + var titleAlign:String = getStyle("titleAlign"); + titleAlign = (titleAlign == "center") ? TextFormatAlign.LEFT : titleAlign; + titleDisplay.setStyle("textAlign", titleAlign); + + addChild(navigationGroup); + addChild(titleGroup); + addChild(actionGroup); + addChild(titleDisplay); + } + + /** + * @private + */ + override protected function measure():void + { + var titleWidth:Number = 0; + var titleHeight:Number = 0; + + if (_titleContentVisible) + { + titleWidth = titleGroup.getPreferredBoundsWidth(); + titleHeight = titleGroup.getPreferredBoundsHeight(); + } + else + { + // use titleLayout for paddingLeft and paddingRight + var layoutObject:Object = hostComponent.titleLayout; + titleWidth = ((layoutObject.paddingLeft) ? Number(layoutObject.paddingLeft) : 0) + + ((layoutObject.paddingRight) ? Number(layoutObject.paddingRight) : 0) + + titleDisplay.getPreferredBoundsWidth(); + + titleHeight = titleDisplay.getPreferredBoundsHeight(); + } + + measuredWidth = + getStyle("paddingLeft") + + navigationGroup.getPreferredBoundsWidth() + + titleWidth + + actionGroup.getPreferredBoundsWidth() + + getStyle("paddingRight"); + + // measuredHeight is contentGroupHeight, 2x border on top and bottom + measuredHeight = + getStyle("paddingTop") + + Math.max(layoutContentGroupHeight, + navigationGroup.getPreferredBoundsHeight(), + actionGroup.getPreferredBoundsHeight(), + titleHeight) + + getStyle("paddingBottom"); + } + + /** + * @private + */ + override protected function commitCurrentState():void + { + super.commitCurrentState(); + + _titleContentVisible = currentState.indexOf("titleContent") >= 0; + _navigationVisible = currentState.indexOf("Navigation") >= 0; + _actionVisible = currentState.indexOf("Action") >= 0; + + invalidateSize(); + invalidateDisplayList(); + } + + /** + * @private + */ + override public function styleChanged(styleProp:String):void + { + if (titleDisplay) + { + var allStyles:Boolean = !styleProp || styleProp == "styleName"; + + if (allStyles || (styleProp == "titleAlign")) + { + var titleAlign:String = getStyle("titleAlign"); + + if (titleAlign == "center") + { + // If the title align is set to center, the alignment is set to LEFT + // so that the skin can manually center the component in layoutContents + titleDisplay.setStyle("textAlign", TextFormatAlign.LEFT); + } + else + { + titleDisplay.setStyle("textAlign", titleAlign); + } + } + } + + super.styleChanged(styleProp); + } + + /** + * @private + */ + override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void + { + super.layoutContents(unscaledWidth, unscaledHeight); + + var navigationGroupWidth:Number = 0; + + var paddingLeft:Number = getStyle("paddingLeft"); + var paddingRight:Number = getStyle("paddingRight"); + var paddingTop:Number = getStyle("paddingTop"); + var paddingBottom:Number = getStyle("paddingBottom"); + + var titleCompX:Number = paddingLeft; + var titleCompWidth:Number = 0; + + var actionGroupX:Number = unscaledWidth; + var actionGroupWidth:Number = 0; + + // remove top and bottom padding from content group height + var contentGroupsHeight:Number = Math.max(0, unscaledHeight - paddingTop - paddingBottom); + + if (border) + { + // FXG uses scale-9, drop shadow is drawn outside the bounds + setElementSize(border, unscaledWidth, unscaledHeight + layoutShadowHeight); + } + + // position groups, overlap of navigation and action groups is allowed + // when overlap occurs, titleDisplay/titleGroup is not visible + if (_navigationVisible) + { + navigationGroupWidth = navigationGroup.getPreferredBoundsWidth(); + titleCompX += navigationGroupWidth; + + setElementSize(navigationGroup, navigationGroupWidth, contentGroupsHeight); + setElementPosition(navigationGroup, paddingLeft, paddingTop); + } + + if (_actionVisible) + { + // actionGroup x position can be negative + actionGroupWidth = actionGroup.getPreferredBoundsWidth(); + actionGroupX = unscaledWidth - actionGroupWidth - paddingRight; + + setElementSize(actionGroup, actionGroupWidth, contentGroupsHeight); + setElementPosition(actionGroup, actionGroupX, paddingTop); + } + + // titleGroup or titleDisplay is given remaining width after navigation + // and action groups preferred widths + titleCompWidth = unscaledWidth - navigationGroupWidth - actionGroupWidth + - paddingLeft - paddingRight; + + if (titleCompWidth <= 0) + { + titleDisplay.visible = false; + titleGroup.visible = false; + } + else if (_titleContentVisible) + { + titleDisplay.visible = false; + titleGroup.visible = true; + + // use titleGroup for titleContent + setElementSize(titleGroup, titleCompWidth, contentGroupsHeight); + setElementPosition(titleGroup, titleCompX, paddingTop); + } + else + { + // use titleDisplay for title text label + titleGroup.visible = false; + + // use titleLayout for paddingLeft and paddingRight + var layoutObject:Object = hostComponent.titleLayout; + var titlePaddingLeft:Number = (layoutObject.paddingLeft) ? Number(layoutObject.paddingLeft) : 0; + var titlePaddingRight:Number = (layoutObject.paddingRight) ? Number(layoutObject.paddingRight) : 0; + + // align titleDisplay to the absolute center + var titleAlign:String = getStyle("titleAlign"); + + // check for available width after padding + if ((titleCompWidth - titlePaddingLeft - titlePaddingRight) <= 0) + { + titleCompX = 0; + titleCompWidth = 0; + } + else if (titleAlign == "center") + { + // use LEFT instead of CENTER + titleCompWidth = titleDisplay.getExplicitOrMeasuredWidth(); + + // use x position of titleDisplay to implement CENTER + titleCompX = Math.round((unscaledWidth - titleCompWidth) / 2); + + var navigationOverlap:Number = navigationGroupWidth + titlePaddingLeft - titleCompX; + var actionOverlap:Number = (titleCompX + titleCompWidth + titlePaddingRight) - actionGroupX; + + // shrink and/or move titleDisplay width if there is any + // overlap after centering + if ((navigationOverlap > 0) && (actionOverlap > 0)) + { + // remaining width + titleCompX = navigationGroupWidth + titlePaddingLeft; + titleCompWidth = unscaledWidth - navigationGroupWidth - actionGroupWidth - titlePaddingLeft - titlePaddingRight; + } + else if ((navigationOverlap > 0) || (actionOverlap > 0)) + { + if (navigationOverlap > 0) + { + // nudge to the right + titleCompX += navigationOverlap; + } + else if (actionOverlap > 0) + { + // nudge to the left + titleCompX -= actionOverlap; + + // force left padding + if (titleCompX < (navigationGroupWidth + titlePaddingLeft)) + titleCompX = navigationGroupWidth + titlePaddingLeft; + } + + // recompute action overlap and force right padding + actionOverlap = (titleCompX + titleCompWidth + titlePaddingRight) - actionGroupX; + + if (actionOverlap > 0) + titleCompWidth -= actionOverlap; + } + } + else + { + // implement padding by adjusting width and position + titleCompX += titlePaddingLeft; + titleCompWidth = titleCompWidth - titlePaddingLeft - titlePaddingRight; + } + + // check for negative width + titleCompWidth = (titleCompWidth < 0) ? 0 : titleCompWidth; + + setElementSize(titleDisplay, titleCompWidth, contentGroupsHeight); + setElementPosition(titleDisplay, titleCompX, paddingTop); + + titleDisplay.visible = true; + } + } + + /** + * @private + */ +/* override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void + { + super.drawBackground(unscaledWidth, unscaledHeight); + + var chromeColor:uint = getStyle("chromeColor"); + var backgroundAlphaValue:Number = getStyle("backgroundAlpha"); + var colors:Array = []; + + // apply alpha to chromeColor fill only + var backgroundAlphas:Array = [backgroundAlphaValue, backgroundAlphaValue]; + + // exclude top and bottom 1px borders + colorMatrix.createGradientBox(unscaledWidth, unscaledHeight - (borderSize * 2), Math.PI / 2, 0, 0); + + colors[0] = ColorUtil.adjustBrightness2(chromeColor, 20); + colors[1] = chromeColor; + + graphics.beginGradientFill(GradientType.LINEAR, colors, backgroundAlphas, ACTIONBAR_CHROME_COLOR_RATIOS, colorMatrix); + graphics.drawRect(0, borderSize, unscaledWidth, unscaledHeight - (borderSize * 2)); + graphics.endFill(); + }*/ + +} +} +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 that holds StyleableTextFields to produce a drop shadow effect. + * Combines label and shadow into a single component to allow transitions to + * target them both. + */ +class TitleDisplayComponent extends UIComponent implements IDisplayText +{ + private var titleDisplay:StyleableTextField; + private var titleDisplayShadow:StyleableTextField; + private var title:String; + private var titleChanged:Boolean; + + public function TitleDisplayComponent() + { + super(); + title = ""; + } + + override public function get baselinePosition():Number + { + return titleDisplay.baselinePosition; + } + + /** + * @private + */ + override protected function createChildren():void + { + super.createChildren(); + + titleDisplay = StyleableTextField(createInFontContext(StyleableTextField)); + titleDisplay.styleName = this; + titleDisplay.editable = false; + titleDisplay.selectable = false; + titleDisplay.multiline = false; + titleDisplay.wordWrap = false; + titleDisplay.addEventListener(FlexEvent.VALUE_COMMIT, + titleDisplay_valueCommitHandler); + + titleDisplayShadow = + StyleableTextField(createInFontContext(StyleableTextField)); + titleDisplayShadow.styleName = this; + titleDisplayShadow.colorName = "textShadowColor"; + titleDisplayShadow.editable = false; + titleDisplayShadow.selectable = false; + titleDisplayShadow.multiline = false; + titleDisplayShadow.wordWrap = false; + + addChild(titleDisplayShadow); + addChild(titleDisplay); + } + + /** + * @private + */ + override protected function commitProperties():void + { + super.commitProperties(); + + if (titleChanged) + { + titleDisplay.text = title; + + invalidateSize(); + invalidateDisplayList(); + + titleChanged = false; + } + } + + /** + * @private + */ + override protected function measure():void + { + // reset text if it was truncated before. + if (titleDisplay.isTruncated) + titleDisplay.text = title; + + measuredWidth = titleDisplay.getPreferredBoundsWidth(); + + // tightTextHeight + measuredHeight = titleDisplay.getPreferredBoundsHeight(); + } + + /** + * @private + */ + override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void + { + super.updateDisplayList(unscaledWidth, unscaledHeight); + + // reset text if it was truncated before. + if (titleDisplay.isTruncated) + titleDisplay.text = title; + titleDisplay.commitStyles(); + + // use preferred height, setLayoutBoundsSize will accommodate for tight + // text adjustment + var tightHeight:Number = titleDisplay.getPreferredBoundsHeight(); + var tightY:Number = (unscaledHeight - tightHeight) / 2; + + titleDisplay.setLayoutBoundsSize(unscaledWidth, tightHeight); + titleDisplay.setLayoutBoundsPosition(0, (unscaledHeight - tightHeight) / 2); + + // now truncate the text + titleDisplay.truncateToFit(); + + titleDisplayShadow.commitStyles(); + titleDisplayShadow.setLayoutBoundsSize(unscaledWidth, tightHeight); + titleDisplayShadow.setLayoutBoundsPosition(0, tightY + 1); + + titleDisplayShadow.alpha = getStyle("textShadowAlpha"); + + // if labelDisplay is truncated, then push it down here as well. + // otherwise, it would have gotten pushed in the labelDisplay_valueCommitHandler() + if (titleDisplay.isTruncated) + titleDisplayShadow.text = titleDisplay.text; + } + + /** + * @private + */ + private function titleDisplay_valueCommitHandler(event:Event):void + { + titleDisplayShadow.text = titleDisplay.text; + } + + public function get text():String + { + return title; + } + + public function set text(value:String):void + { + title = value; + titleChanged = true; + + invalidateProperties(); + } + + public function get isTruncated():Boolean + { + return titleDisplay.isTruncated; + } +} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/952531e0/frameworks/projects/mobiletheme/src/spark/skins/android4/ButtonSkin.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/mobiletheme/src/spark/skins/android4/ButtonSkin.as b/frameworks/projects/mobiletheme/src/spark/skins/android4/ButtonSkin.as new file mode 100644 index 0000000..43fb108 --- /dev/null +++ b/frameworks/projects/mobiletheme/src/spark/skins/android4/ButtonSkin.as @@ -0,0 +1,397 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// Licensed to the Apache Software Foundation (ASF) under one or more +// contributor license agreements. See the NOTICE file distributed with +// this work for additional information regarding copyright ownership. +// The ASF licenses this file to You under the Apache License, Version 2.0 +// (the "License"); you may not use this file except in compliance with +// the License. You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +// +//////////////////////////////////////////////////////////////////////////////// + +package spark.skins.android4 +{ + +import flash.display.DisplayObject; + +import mx.core.DPIClassification; +import mx.core.mx_internal; +import mx.events.FlexEvent; + +import spark.components.supportClasses.StyleableTextField; +import spark.skins.android4.assets.Button_down; +import spark.skins.android4.assets.Button_up; +import spark.skins.mobile.supportClasses.ButtonSkinBase; + + +use namespace mx_internal; + +/** + * ActionScript-based skin for Button controls in mobile applications. The skin supports + * iconClass and labelPlacement. It uses FXG classes to + * implement the vector drawing. + * + * @langversion 3.0 + * @playerversion Flash 10 + * @playerversion AIR 2.5 + * @productversion Flex 4.5 + */ +public class ButtonSkin extends ButtonSkinBase +{ + //-------------------------------------------------------------------------- + // + // Class constants + // + //-------------------------------------------------------------------------- + + /** + * An array of color distribution ratios. + * This is used in the chrome color fill. + * + * @langversion 3.0 + * @playerversion Flash 10 + * @playerversion AIR 2.5 + * @productversion Flex 4.5 + */ + mx_internal static const CHROME_COLOR_RATIOS:Array = [0, 127.5]; + + /** + * An array of alpha values for the corresponding colors in the colors array. + * This is used in the chrome color fill. + * + * @langversion 3.0 + * @playerversion Flash 10 + * @playerversion AIR 2.5 + * @productversion Flex 4.5 + */ + mx_internal static const CHROME_COLOR_ALPHAS:Array = [1, 1]; + + //-------------------------------------------------------------------------- + // + // Constructor + // + //-------------------------------------------------------------------------- + /** + * Constructor. + * + * @langversion 3.0 + * @playerversion Flash 10 + * @playerversion AIR 2.5 + * @productversion Flex 4.5 + */ + public function ButtonSkin() + { + super(); + upBorderSkin = spark.skins.android4.assets.Button_up; + downBorderSkin = spark.skins.android4.assets.Button_down; + layoutCornerEllipseSize = 0; + + switch (applicationDPI) + { + case DPIClassification.DPI_640: + { + + layoutGap = 20; + layoutPaddingLeft = 40; + layoutPaddingRight = 40; + layoutPaddingTop = 40; + layoutPaddingBottom = 40; + layoutBorderSize = 2; + measuredDefaultWidth = 128; + measuredDefaultHeight = 172; + + break; + } + case DPIClassification.DPI_480: + { + + layoutGap = 14; + layoutPaddingLeft = 30; + layoutPaddingRight = 30; + layoutPaddingTop = 30; + layoutPaddingBottom = 30; + layoutBorderSize = 2; + measuredDefaultWidth = 96; + measuredDefaultHeight = 130; + + break; + } + case DPIClassification.DPI_320: + { + + layoutGap = 10; + layoutPaddingLeft = 20; + layoutPaddingRight = 20; + layoutPaddingTop = 20; + layoutPaddingBottom = 20; + layoutBorderSize = 2; + measuredDefaultWidth = 64; + measuredDefaultHeight = 86; + + break; + } + case DPIClassification.DPI_240: + { + + layoutGap = 7; + layoutPaddingLeft = 15; + layoutPaddingRight = 15; + layoutPaddingTop = 15; + layoutPaddingBottom = 15; + layoutBorderSize = 1; + measuredDefaultWidth = 48; + measuredDefaultHeight = 65; + + break; + } + case DPIClassification.DPI_120: + { + + layoutGap = 4; + layoutPaddingLeft = 8; + layoutPaddingRight = 8; + layoutPaddingTop = 8; + layoutPaddingBottom = 8; + layoutBorderSize = 1; + measuredDefaultWidth = 24; + measuredDefaultHeight = 33; + + break; + } + default: + { + + layoutGap = 5; + layoutPaddingLeft = 10; + layoutPaddingRight = 10; + layoutPaddingTop = 10; + layoutPaddingBottom = 10; + layoutBorderSize = 1; + measuredDefaultWidth = 32; + measuredDefaultHeight = 43; + + break; + } + } + } + + //-------------------------------------------------------------------------- + // + // Layout variables + // + //-------------------------------------------------------------------------- + + /** + * Defines the corner radius. + * + * @langversion 3.0 + * @playerversion Flash 10 + * @playerversion AIR 2.5 + * @productversion Flex 4.5 + */ + protected var layoutCornerEllipseSize:uint; + + //-------------------------------------------------------------------------- + // + // Variables + // + //-------------------------------------------------------------------------- + private var _border:DisplayObject; + + private var changeFXGSkin:Boolean = false; + + private var borderClass:Class; + + mx_internal var fillColorStyleName:String = "chromeColor"; + + /** + * Defines the shadow for the Button control's label. + * + * @langversion 3.0 + * @playerversion Flash 10 + * @playerversion AIR 2.5 + * @productversion Flex 4.5 + */ + public var labelDisplayShadow:StyleableTextField; + + /** + * Read-only button border graphic. Use getBorderClassForCurrentState() + * to specify a graphic per-state. + * + * @see #getBorderClassForCurrentState() + */ + protected function get border():DisplayObject + { + return _border; + } + + //-------------------------------------------------------------------------- + // + // Properties + // + //-------------------------------------------------------------------------- + + /** + * Class to use for the border in the up state. + * + * @langversion 3.0 + * @playerversion Flash 10 + * @playerversion AIR 2.5 + * @productversion Flex 4.5 + * + * @default Button_up + */ + protected var upBorderSkin:Class; + + /** + * Class to use for the border in the down state. + * + * @langversion 3.0 + * @playerversion Flash 10 + * @playerversion AIR 2.5 + * @productversion Flex 4.5 + * + * @default Button_down + */ + protected var downBorderSkin:Class; + + + //-------------------------------------------------------------------------- + // + // Overridden methods + // + //-------------------------------------------------------------------------- + + /** + * @private + */ + override protected function createChildren():void + { + super.createChildren(); + + if (!labelDisplayShadow && labelDisplay) + { + labelDisplayShadow = StyleableTextField(createInFontContext(StyleableTextField)); + labelDisplayShadow.styleName = this; + labelDisplayShadow.colorName = "textShadowColor"; + labelDisplayShadow.useTightTextBounds = false; + + // add shadow before display + addChildAt(labelDisplayShadow, getChildIndex(labelDisplay)); + } + + setStyle("textAlign", "center"); + } + + /** + * @private + */ + override protected function commitCurrentState():void + { + super.commitCurrentState(); + + borderClass = getBorderClassForCurrentState(); + + if (!(_border is borderClass)) + changeFXGSkin = true; + + // update borderClass and background + invalidateDisplayList(); + } + + /** + * @private + */ + override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void + { + super.layoutContents(unscaledWidth, unscaledHeight); + + // size the FXG background + if (changeFXGSkin) + { + changeFXGSkin = false; + + if (_border) + { + removeChild(_border); + _border = null; + } + + if (borderClass) + { + _border = new borderClass(); + addChildAt(_border, 0); + } + } + + layoutBorder(unscaledWidth, unscaledHeight); + + // update label shadow + labelDisplayShadow.alpha = getStyle("textShadowAlpha"); + labelDisplayShadow.commitStyles(); + + // don't use tightText positioning on shadow + setElementPosition(labelDisplayShadow, labelDisplay.x, labelDisplay.y + 1); + setElementSize(labelDisplayShadow, labelDisplay.width, labelDisplay.height); + + // if labelDisplay is truncated, then push it down here as well. + // otherwise, it would have gotten pushed in the labelDisplay_valueCommitHandler() + if (labelDisplay.isTruncated) + labelDisplayShadow.text = labelDisplay.text; + } + + /** + * Position the background of the skin. Override this function to re-position the background. + * + * @langversion 3.0 + * @playerversion Flash 10 + * @playerversion AIR 2.5 + * @productversion Flex 4.5 + */ + mx_internal function layoutBorder(unscaledWidth:Number, unscaledHeight:Number):void + { + setElementSize(border, unscaledWidth, unscaledHeight); + setElementPosition(border, 0, 0); + } + + /** + * Returns the borderClass to use based on the currentState. + * + * @langversion 3.0 + * @playerversion Flash 10 + * @playerversion AIR 2.5 + * @productversion Flex 4.5 + */ + protected function getBorderClassForCurrentState():Class + { + if (currentState == "down") + return downBorderSkin; + else + return upBorderSkin; + } + + //-------------------------------------------------------------------------- + // + // Event Handlers + // + //-------------------------------------------------------------------------- + + /** + * @private + */ + override protected function labelDisplay_valueCommitHandler(event:FlexEvent):void + { + super.labelDisplay_valueCommitHandler(event); + labelDisplayShadow.text = labelDisplay.text; + } + +} +} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/952531e0/frameworks/projects/mobiletheme/src/spark/skins/android4/assets/ActionBarBackground.fxg ---------------------------------------------------------------------- diff --git a/frameworks/projects/mobiletheme/src/spark/skins/android4/assets/ActionBarBackground.fxg b/frameworks/projects/mobiletheme/src/spark/skins/android4/assets/ActionBarBackground.fxg index 5ba85f8..febd3f7 100644 --- a/frameworks/projects/mobiletheme/src/spark/skins/android4/assets/ActionBarBackground.fxg +++ b/frameworks/projects/mobiletheme/src/spark/skins/android4/assets/ActionBarBackground.fxg @@ -18,13 +18,38 @@ --> -<Graphic aaa:symType="1" version="2.0" xmlns:flm="http://ns.adobe.com/flame/2008"; xmlns="http://ns.adobe.com/fxg/2008"; xmlns:aaa="http://ns.adobe.com/ai/2009";> - <Group scaleGridLeft="90" scaleGridRight="270" scaleGridTop="36" scaleGridBottom="12" aaa:symType="1"> - <Path winding="nonZero" aaa:seqID="104" data="M360 48 0 48 0 0 360 0 360 48Z"> +<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="#222222"/> + <SolidColor color="#E0E0E0"/> </fill> </Path> - <Path visible="false" winding="nonZero" aaa:seqID="105" data="M0 0 360 0 360 48 0 48 0 0Z"/> + <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-sdk/blob/952531e0/frameworks/projects/mobiletheme/src/spark/skins/android4/assets/Button_down.fxg ---------------------------------------------------------------------- diff --git a/frameworks/projects/mobiletheme/src/spark/skins/android4/assets/Button_down.fxg b/frameworks/projects/mobiletheme/src/spark/skins/android4/assets/Button_down.fxg index 31bd28e..79a535c 100644 --- a/frameworks/projects/mobiletheme/src/spark/skins/android4/assets/Button_down.fxg +++ b/frameworks/projects/mobiletheme/src/spark/skins/android4/assets/Button_down.fxg @@ -18,39 +18,56 @@ --> -<Graphic aaa:symType="1" version="2.0" xmlns:flm="http://ns.adobe.com/flame/2008"; xmlns="http://ns.adobe.com/fxg/2008"; xmlns:aaa="http://ns.adobe.com/ai/2009"; -scaleGridLeft="4" scaleGridRight="246" scaleGridTop="4" scaleGridBottom="44"> - <Path x="4" y="4" alpha="0.85" winding="nonZero" aaa:seqID="2207" data="M242 40 0 40 0 0 242 0 242 40Z"> - <fill> - <SolidColor color="#33B5E5"/> - </fill> +<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008";> + <Group> + <Path x="2.5" y="2.5" winding="nonZero" data="M184 39 0 39 0 0 184 0 184 39Z"> + <stroke> + <SolidColorStroke weight="5" caps="none" miterLimit="10" color="#CDCCCC"/> + </stroke> </Path> - <Path x="5" y="4" alpha="0.3" winding="nonZero" aaa:seqID="2208" data="M241 1 0 1 0 0 241 0 241 1Z"> - <fill> - <SolidColor color="#69B2CC"/> - </fill> - </Path> - <Path x="4" y="4" alpha="0.3" winding="nonZero" aaa:seqID="2209" data="M1 39 0 39 0 0 1 0 1 39Z"> - <fill> - <SolidColor color="#338DB0"/> - </fill> - </Path> - <Path x="245" y="5" alpha="0.3" winding="nonZero" aaa:seqID="2210" data="M1 38 0 38 0 0 1 0 1 38Z"> - <fill> - <SolidColor color="#338DB0"/> - </fill> - </Path> - <Path x="4" y="43" alpha="0.4" winding="nonZero" aaa:seqID="2211" data="M242 1 0 1 0 0 242 0 242 1Z"> - <fill> - <SolidColor color="#297491"/> - </fill> - </Path> - <Group alpha="0.4" aaa:seqID="2212" flm:isolated="false" flm:knockout="false"> - <Path winding="nonZero" aaa:seqID="2213" data="M246 4 246 44 4 44 4 4 246 4M246 0 4 0C1.79102 0 0 1.79102 0 4L0 44C0 46.209 1.79102 48 4 48L246 48C248.209 48 250 46.209 250 44L250 4C250 1.79102 248.209 0 246 0L246 0Z"> + <Group x="3" y="2"> + <Path winding="nonZero" data="M184 39 0 39 0 0 184 0 184 39Z"> <fill> - <SolidColor color="#33B5E5"/> + <SolidColor color="#B3B3B3"/> </fill> </Path> </Group> - <Path visible="false" winding="nonZero" aaa:seqID="2214" data="M0 0 250 0 250 48 0 48 0 0Z"/> + <Group x="3" y="2" alpha="0.5"> + <Group> + <mask> + <Group> + <Path winding="nonZero" data="M0 1 184 1 184 0 0 0 0 1Z"> + <fill> + <SolidColor color="#FFFFFF"/> + </fill> + </Path> + </Group> + </mask> + <Path winding="nonZero" data="M184 1 0 1 0 0 184 0 184 1Z"> + <fill> + <SolidColor color="#FFFFFF"/> + </fill> + </Path> + </Group> + </Group> + <Group x="3" y="2" alpha="0.199997"> + <Group> + <mask> + <Group> + <Path winding="nonZero" data="M0 39 184 39 184 0 0 0 0 39Z"> + <fill> + <SolidColor color="#FFFFFF"/> + </fill> + </Path> + </Group> + </mask> + <Path winding="nonZero" data="M183 0 183 38 0 38 0 39 184 39 184 0 183 0Z"> + <fill> + <SolidColor color="#484849"/> + </fill> + </Path> + </Group> + </Group> + <Path visible="false" winding="nonZero" data="M0 0 189 0 189 44 0 44 0 0Z"/> + </Group> </Graphic> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/952531e0/frameworks/projects/mobiletheme/src/spark/skins/android4/assets/Button_up.fxg ---------------------------------------------------------------------- diff --git a/frameworks/projects/mobiletheme/src/spark/skins/android4/assets/Button_up.fxg b/frameworks/projects/mobiletheme/src/spark/skins/android4/assets/Button_up.fxg index 0e335ba..af7d033 100644 --- a/frameworks/projects/mobiletheme/src/spark/skins/android4/assets/Button_up.fxg +++ b/frameworks/projects/mobiletheme/src/spark/skins/android4/assets/Button_up.fxg @@ -18,34 +18,43 @@ --> -<Graphic aaa:symType="1" version="2.0" xmlns:flm="http://ns.adobe.com/flame/2008"; xmlns="http://ns.adobe.com/fxg/2008"; xmlns:aaa="http://ns.adobe.com/ai/2009"; -scaleGridLeft="4" scaleGridRight="246" scaleGridTop="4" scaleGridBottom="44"> - <Group aaa:seqID="1127"> - <Path winding="nonZero" aaa:seqID="1128" data="M242 40 0 40 0 0 242 0 242 40Z"> - <fill> - <SolidColor color="#CECECE"/> - </fill> - </Path> +<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008";> + <Group> + <Group alpha="0.399994"> + <Group> + <mask> + <Group> + <Path winding="nonZero" data="M0 1 184 1 184 0 0 0 0 1Z"> + <fill> + <SolidColor color="#FFFFFF"/> + </fill> + </Path> + </Group> + </mask> + <Path winding="nonZero" data="M184 1 0 1 0 0 184 0 184 1Z"> + <fill> + <SolidColor color="#FFFFFF"/> + </fill> + </Path> + </Group> </Group> - <Path x="1" alpha="0.1" winding="nonZero" aaa:seqID="1129" data="M241 1 0 1 0 0 241 0 241 1Z"> - <fill> - <SolidColor color="#858585"/> - </fill> - </Path> - <Path x="1" y="39" alpha="0.1" winding="nonZero" aaa:seqID="1130" data="M241 1 0 1 0 0 241 0 241 1Z"> - <fill> - <SolidColor color="#343434"/> - </fill> - </Path> - <Path alpha="0.1" winding="nonZero" aaa:seqID="1131" data="M1 39 0 39 0 0 1 0 1 39Z"> - <fill> - <SolidColor color="#454545"/> - </fill> - </Path> - <Path x="241" y="1" alpha="0.1" winding="nonZero" aaa:seqID="1132" data="M1 38 0 38 0 0 1 0 1 38Z"> - <fill> - <SolidColor color="#424242"/> - </fill> - </Path> - <Path visible="false" winding="nonZero" aaa:seqID="1133" data="M0 0 242 0 242 40 0 40 0 0Z"/> + <Group alpha="0.100006"> + <Group> + <Path winding="nonZero" data="M183 0 183 38 0 38 0 39 184 39 184 0 183 0Z"> + <fill> + <SolidColor color="#484849"/> + </fill> + </Path> + <Group> + <Path winding="nonZero" data="M184 39 0 39 0 0 184 0 184 39Z"> + <fill> + <SolidColor color="#CDCCCC"/> + </fill> + </Path> + <Path winding="nonZero" data="M0 39 184 39 184 0 0 0 0 39Z"/> + </Group> + </Group> + </Group> + <Path visible="false" winding="nonZero" data="M0 0 184 0 184 39 0 39 0 0Z"/> + </Group> </Graphic> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/952531e0/frameworks/projects/mobiletheme/src/spark/skins/mobile/ActionBarSkin.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/mobiletheme/src/spark/skins/mobile/ActionBarSkin.as b/frameworks/projects/mobiletheme/src/spark/skins/mobile/ActionBarSkin.as index 43f7bf6..5ee87e7 100644 --- a/frameworks/projects/mobiletheme/src/spark/skins/mobile/ActionBarSkin.as +++ b/frameworks/projects/mobiletheme/src/spark/skins/mobile/ActionBarSkin.as @@ -40,6 +40,7 @@ import spark.skins.mobile160.assets.ActionBarBackground; import spark.skins.mobile240.assets.ActionBarBackground; import spark.skins.mobile320.assets.ActionBarBackground; import spark.skins.mobile480.assets.ActionBarBackground; +import spark.skins.mobile640.assets.ActionBarBackground; use namespace mx_internal; @@ -89,6 +90,18 @@ public class ActionBarSkin extends MobileSkin switch (applicationDPI) { + + case DPIClassification.DPI_640: + { + borderSize = 2; + layoutShadowHeight = 12; + layoutContentGroupHeight = 172; + layoutTitleGroupHorizontalPadding = 52; + + borderClass = spark.skins.mobile640.assets.ActionBarBackground; + + break; + } case DPIClassification.DPI_480: { // Note provisional may need changes @@ -97,7 +110,7 @@ public class ActionBarSkin extends MobileSkin layoutContentGroupHeight = 130; layoutTitleGroupHorizontalPadding = 40; - borderClass = spark.skins.mobile240.assets.ActionBarBackground; + borderClass = spark.skins.mobile480.assets.ActionBarBackground; break; }
