flex-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From bigosma...@apache.org
Subject [1/3] git commit: [flex-sdk] [refs/heads/release4.14.0] - Add skin for web and desktop version of BusyIndicator. Fix for https://issues.apache.org/jira/browse/FLEX-34690
Date Thu, 18 Dec 2014 20:31:35 GMT
Repository: flex-sdk
Updated Branches:
  refs/heads/release4.14.0 996e0f121 -> 6d8706d1e


Add skin for web and desktop version of BusyIndicator.
Fix for https://issues.apache.org/jira/browse/FLEX-34690


Project: http://git-wip-us.apache.org/repos/asf/flex-sdk/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-sdk/commit/82c789e6
Tree: http://git-wip-us.apache.org/repos/asf/flex-sdk/tree/82c789e6
Diff: http://git-wip-us.apache.org/repos/asf/flex-sdk/diff/82c789e6

Branch: refs/heads/release4.14.0
Commit: 82c789e6ac5375ac4c662fe4333398091511257e
Parents: 996e0f1
Author: OmPrakash Muppirala <bigosmallm@gmail.com>
Authored: Thu Dec 18 12:15:06 2014 -0800
Committer: OmPrakash Muppirala <bigosmallm@gmail.com>
Committed: Thu Dec 18 12:17:04 2014 -0800

----------------------------------------------------------------------
 frameworks/projects/spark/defaults.css          |   5 +
 frameworks/projects/spark/src/SparkClasses.as   |   1 +
 .../spark/src/spark/components/BusyIndicator.as |   6 +-
 .../src/spark/skins/spark/BusyIndicatorSkin.as  | 211 +++++++++++++++++++
 .../spark/skins/spark/assets/BusyIndicator.fxg  |  64 ++++++
 5 files changed, 285 insertions(+), 2 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/82c789e6/frameworks/projects/spark/defaults.css
----------------------------------------------------------------------
diff --git a/frameworks/projects/spark/defaults.css b/frameworks/projects/spark/defaults.css
index 0ced94e..d32f3ed 100644
--- a/frameworks/projects/spark/defaults.css
+++ b/frameworks/projects/spark/defaults.css
@@ -50,6 +50,11 @@ ButtonBar
     skinClass: ClassReference("spark.skins.spark.ButtonBarSkin");
 }
 
+BusyIndicator
+{
+	skinClass: ClassReference("spark.skins.spark.BusyIndicatorSkin");	
+}
+
 Callout
 {
     backgroundColor: #ffffff;

http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/82c789e6/frameworks/projects/spark/src/SparkClasses.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/spark/src/SparkClasses.as b/frameworks/projects/spark/src/SparkClasses.as
index 0aa207f..ac6cd00 100644
--- a/frameworks/projects/spark/src/SparkClasses.as
+++ b/frameworks/projects/spark/src/SparkClasses.as
@@ -54,6 +54,7 @@ import spark.skins.spark.BorderContainerSkin; BorderContainerSkin;
 import spark.skins.spark.ButtonSkin; ButtonSkin;
 import spark.skins.spark.DefaultButtonSkin; DefaultButtonSkin;
 import spark.skins.spark.ButtonBarSkin; ButtonBarSkin;
+import spark.skins.spark.BusyIndicatorSkin; BusyIndicatorSkin;
 import spark.skins.spark.ButtonBarFirstButtonSkin; ButtonBarFirstButtonSkin;
 import spark.skins.spark.ButtonBarMiddleButtonSkin; ButtonBarMiddleButtonSkin;
 import spark.skins.spark.ButtonBarLastButtonSkin; ButtonBarLastButtonSkin;

http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/82c789e6/frameworks/projects/spark/src/spark/components/BusyIndicator.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/spark/src/spark/components/BusyIndicator.as b/frameworks/projects/spark/src/spark/components/BusyIndicator.as
index 8230525..0086f74 100644
--- a/frameworks/projects/spark/src/spark/components/BusyIndicator.as
+++ b/frameworks/projects/spark/src/spark/components/BusyIndicator.as
@@ -67,8 +67,10 @@ package spark.components
 
 /**
  *  The BusyIndicator defines a component to display when a long-running 
- *  operation is in progress. This component creates a spinner with twelve spokes.
- *  The color of the spokes is controlled by the value of the <code>symbolColor</code>
style.
+ *  operation is in progress. 
+ *  For Web, Desktop and Android, a circle is drawn that rotates.  
+ *  For iOS, a spinner with twelve spoke is drawn.
+ *  The color of the circle or spokes is controlled by the value of the <code>symbolColor</code>
style.
  *  The transparency of this component can be modified using the <code>alpha</code>
property,
  *  but the alpha value of each spoke cannot be modified.
  *

http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/82c789e6/frameworks/projects/spark/src/spark/skins/spark/BusyIndicatorSkin.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/spark/src/spark/skins/spark/BusyIndicatorSkin.as b/frameworks/projects/spark/src/spark/skins/spark/BusyIndicatorSkin.as
new file mode 100644
index 0000000..90a6fc9
--- /dev/null
+++ b/frameworks/projects/spark/src/spark/skins/spark/BusyIndicatorSkin.as
@@ -0,0 +1,211 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.spark
+{
+	import flash.display.DisplayObject;
+	import flash.events.TimerEvent;
+	import flash.geom.Matrix;
+	import flash.utils.Timer;
+	
+	import mx.core.DPIClassification;
+	
+	import spark.components.BusyIndicator;
+	import spark.skins.ActionScriptSkinBase;
+	import spark.skins.spark.assets.BusyIndicator;
+	
+	public class BusyIndicatorSkin extends ActionScriptSkinBase
+	{
+		static private const DEFAULT_ROTATION_INTERVAL:Number = 50;
+		private var busyIndicatorClass:Class;
+		private var busyIndicator:DisplayObject;
+		private var busyIndicatorDiameter:Number;
+		private var rotationTimer:Timer;
+		private var rotationInterval:Number;
+		/**
+		 *  @private
+		 * 
+		 *  Current rotation of this component in degrees.
+		 */   
+		private var currentRotation:Number = 0;
+		private var symbolColor:uint;
+		private var symbolColorChanged:Boolean = false;		
+		
+		public function BusyIndicatorSkin()
+		{
+			super();
+			
+			busyIndicatorClass = spark.skins.spark.assets.BusyIndicator;
+			rotationInterval = getStyle("rotationInterval");
+			if (isNaN(rotationInterval))
+				rotationInterval = DEFAULT_ROTATION_INTERVAL;
+			if (rotationInterval < 16.6)
+				rotationInterval = 16.6;
+			
+			switch(applicationDPI) 
+			{	
+				case DPIClassification.DPI_640:
+				{
+					busyIndicatorDiameter = 144;
+					break;
+				}
+				case DPIClassification.DPI_480:
+				{
+					busyIndicatorDiameter = 108;
+					break;
+				}		
+				case DPIClassification.DPI_320:
+				{
+					busyIndicatorDiameter = 72;
+					break;
+				}
+				case DPIClassification.DPI_240:
+				{
+					busyIndicatorDiameter = 54;
+					break;
+				}
+				case DPIClassification.DPI_120:
+				{
+					busyIndicatorDiameter = 27;
+					break;
+				}
+				default://160 DPI
+				{
+					busyIndicatorDiameter = 36;
+					break;
+				}
+			}
+		}
+		
+		private var _hostComponent:spark.components.BusyIndicator;
+		
+		public function get hostComponent():spark.components.BusyIndicator
+		{
+			return _hostComponent;
+		}
+		
+		public function set hostComponent(value:spark.components.BusyIndicator):void 
+		{
+			_hostComponent = value;
+		}
+		
+		override protected function createChildren():void
+		{
+			busyIndicator = new busyIndicatorClass();
+			busyIndicator.width = busyIndicator.height = busyIndicatorDiameter;
+			addChild(busyIndicator);
+		}
+		
+		override protected function measure():void
+		{
+			measuredWidth = busyIndicatorDiameter;
+			measuredHeight = busyIndicatorDiameter;
+			
+			measuredMinHeight = busyIndicatorDiameter;
+			measuredMinWidth = busyIndicatorDiameter
+		}
+		
+		override protected function commitCurrentState():void
+		{
+			super.commitCurrentState();
+			if(currentState == "rotatingState")
+			{
+				startRotation();
+			}
+			else
+			{
+				stopRotation();
+			}
+		}
+		
+		override public function styleChanged(styleProp:String):void
+		{
+			var allStyles:Boolean = !styleProp || styleProp == "styleName";
+			
+			if (allStyles || styleProp == "symbolColor")
+			{
+				symbolColor = getStyle("symbolColor");
+				symbolColorChanged = true;
+				invalidateDisplayList();
+			}
+			super.styleChanged(styleProp);
+		}
+		
+		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
+		{
+			super.updateDisplayList(unscaledWidth,unscaledHeight);
+			if(symbolColorChanged)
+			{
+				colorizeSymbol();	
+				symbolColorChanged = false;
+			}
+		}
+		
+		private function colorizeSymbol():void
+		{
+			super.applyColorTransform(this.busyIndicator, 0x000000, symbolColor);
+		}		
+		
+		private function startRotation():void
+		{
+			rotationTimer = new Timer(rotationInterval);
+			if (!rotationTimer.hasEventListener(TimerEvent.TIMER))
+			{
+				rotationTimer.addEventListener(TimerEvent.TIMER, timerHandler);
+				rotationTimer.start();
+			}
+		}
+		
+		private function stopRotation():void
+		{
+			if (rotationTimer)
+			{
+				rotationTimer.removeEventListener(TimerEvent.TIMER, timerHandler);
+				rotationTimer.stop();
+				rotationTimer = null;
+			}
+		}
+		
+		/**
+		 *  @private
+		 * 
+		 *  Rotate the spinner once for each timer event.
+		 */
+		private function timerHandler(event:TimerEvent):void
+		{
+			currentRotation += rotationInterval;
+			if (currentRotation >= 360)
+				currentRotation = 0;
+			
+			rotate(busyIndicator,currentRotation,measuredWidth/2,measuredHeight/2);
+			event.updateAfterEvent();
+		}
+		
+		private var rotationMatrix:Matrix; 
+		private function rotate(obj:DisplayObject, angle:Number, aroundX:Number, aroundY:Number):void
+		{
+			rotationMatrix = new Matrix();
+			rotationMatrix.translate(-aroundX,-aroundY);
+			rotationMatrix.rotate(Math.PI*angle/180);
+			rotationMatrix.translate(aroundX,aroundY);
+			obj.transform.matrix = rotationMatrix;
+		}
+		
+	}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/82c789e6/frameworks/projects/spark/src/spark/skins/spark/assets/BusyIndicator.fxg
----------------------------------------------------------------------
diff --git a/frameworks/projects/spark/src/spark/skins/spark/assets/BusyIndicator.fxg b/frameworks/projects/spark/src/spark/skins/spark/assets/BusyIndicator.fxg
new file mode 100644
index 0000000..e04248f
--- /dev/null
+++ b/frameworks/projects/spark/src/spark/skins/spark/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>
\ No newline at end of file


Mime
View raw message