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/08/17 10:24:29 UTC
[30/47] git commit: [flex-sdk] [refs/heads/develop] - New Android4.x
skin for ViewMenu and ViewMenuItems that matches
New Android4.x skin for ViewMenu and ViewMenuItems that matches
Project: http://git-wip-us.apache.org/repos/asf/flex-sdk/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-sdk/commit/ca262c67
Tree: http://git-wip-us.apache.org/repos/asf/flex-sdk/tree/ca262c67
Diff: http://git-wip-us.apache.org/repos/asf/flex-sdk/diff/ca262c67
Branch: refs/heads/develop
Commit: ca262c672862788727c78284e5384a7cfea5f6ba
Parents: 77ffb23
Author: Om <bi...@gmail.com>
Authored: Mon Jul 28 02:17:50 2014 -0700
Committer: Om <bi...@gmail.com>
Committed: Mon Jul 28 02:17:50 2014 -0700
----------------------------------------------------------------------
.../projects/mobiletheme/src/android4x.css | 17 ++
.../spark/skins/android4/ViewMenuItemSkin.as | 238 +++++++++++++++++++
.../src/spark/skins/android4/ViewMenuSkin.mxml | 183 ++++++++++++++
3 files changed, 438 insertions(+)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/ca262c67/frameworks/projects/mobiletheme/src/android4x.css
----------------------------------------------------------------------
diff --git a/frameworks/projects/mobiletheme/src/android4x.css b/frameworks/projects/mobiletheme/src/android4x.css
index d874051..5fee06f 100644
--- a/frameworks/projects/mobiletheme/src/android4x.css
+++ b/frameworks/projects/mobiletheme/src/android4x.css
@@ -245,6 +245,23 @@ VScrollBar
thumbColor: #333333;
}
+ViewMenu
+{
+ skinClass: ClassReference("spark.skins.android4.ViewMenuSkin");
+}
+
+ViewMenuItem
+{
+ iconPlacement : "left";
+ chromeColor : #FFFFFF;
+ focusColor: #DEDEDD;
+ paddingBottom: 8;
+ paddingLeft: 8;
+ paddingRight: 8;
+ paddingTop: 8;
+ skinClass : ClassReference("spark.skins.android4.ViewMenuItemSkin");
+}
+
ViewNavigator
{
skinClass: ClassReference("spark.skins.mobile.ViewNavigatorSkin");
http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/ca262c67/frameworks/projects/mobiletheme/src/spark/skins/android4/ViewMenuItemSkin.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/android4/ViewMenuItemSkin.as b/frameworks/projects/mobiletheme/src/spark/skins/android4/ViewMenuItemSkin.as
new file mode 100644
index 0000000..6a75c65
--- /dev/null
+++ b/frameworks/projects/mobiletheme/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();
+ }
+}
+}
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/ca262c67/frameworks/projects/mobiletheme/src/spark/skins/android4/ViewMenuSkin.mxml
----------------------------------------------------------------------
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/android4/ViewMenuSkin.mxml b/frameworks/projects/mobiletheme/src/spark/skins/android4/ViewMenuSkin.mxml
new file mode 100644
index 0000000..67fd754
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/android4/ViewMenuSkin.mxml
@@ -0,0 +1,183 @@
+<?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>