incubator-flex-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From que...@apache.org
Subject svn commit: r1302054 - in /incubator/flex/whiteboard/quetwo/MobileAlert: ./ src/org/apache/spark/components/ src/org/apache/spark/components/skins/
Date Sun, 18 Mar 2012 03:01:12 GMT
Author: quetwo
Date: Sun Mar 18 03:01:12 2012
New Revision: 1302054

URL: http://svn.apache.org/viewvc?rev=1302054&view=rev
Log:
Added button skins for MobileAlert.  Made some corrections to iOS Alert Skin.

Added:
    incubator/flex/whiteboard/quetwo/MobileAlert/src/org/apache/spark/components/skins/AndroidButtonSkin.mxml
    incubator/flex/whiteboard/quetwo/MobileAlert/src/org/apache/spark/components/skins/AppleOSButtonSkin.mxml
Modified:
    incubator/flex/whiteboard/quetwo/MobileAlert/README.txt
    incubator/flex/whiteboard/quetwo/MobileAlert/src/org/apache/spark/components/MobileAlert.as
    incubator/flex/whiteboard/quetwo/MobileAlert/src/org/apache/spark/components/skins/AppleOSAlertSkin.mxml

Modified: incubator/flex/whiteboard/quetwo/MobileAlert/README.txt
URL: http://svn.apache.org/viewvc/incubator/flex/whiteboard/quetwo/MobileAlert/README.txt?rev=1302054&r1=1302053&r2=1302054&view=diff
==============================================================================
--- incubator/flex/whiteboard/quetwo/MobileAlert/README.txt (original)
+++ incubator/flex/whiteboard/quetwo/MobileAlert/README.txt Sun Mar 18 03:01:12 2012
@@ -29,9 +29,12 @@ identical to the mx component, with the 
   
 If you use this in other locales other than en_US, you will need to add the proper resource
bundles.
 
+3/18/2012 Notes :
+  - Button skins were added.  Needs testing on different devices (iOS and Android) to see
how they "feel" 
+
 3/17/2012 Notes :
   - iOS Skin now included.  Still need to commit the button skins.
-  - Now extens SkinnablePopUpComponent rather than SkinnablePopUpContainer contributed by
Tink.  Still need
+  - Now extends SkinnablePopUpComponent rather than SkinnablePopUpContainer contributed by
Tink.  Still need
      to work on Modal stuff, but this is much ligher weight. 
 
 3/15/2012 Notes :

Modified: incubator/flex/whiteboard/quetwo/MobileAlert/src/org/apache/spark/components/MobileAlert.as
URL: http://svn.apache.org/viewvc/incubator/flex/whiteboard/quetwo/MobileAlert/src/org/apache/spark/components/MobileAlert.as?rev=1302054&r1=1302053&r2=1302054&view=diff
==============================================================================
--- incubator/flex/whiteboard/quetwo/MobileAlert/src/org/apache/spark/components/MobileAlert.as
(original)
+++ incubator/flex/whiteboard/quetwo/MobileAlert/src/org/apache/spark/components/MobileAlert.as
Sun Mar 18 03:01:12 2012
@@ -31,6 +31,7 @@ package org.apache.spark.components
 	import mx.resources.ResourceManager;
 	
 	import org.apache.spark.components.skins.AndroidAlertSkin;
+	import org.apache.spark.components.skins.AndroidButtonSkin;
 	import org.apache.spark.components.skins.AppleOSAlertSkin;
 	import org.apache.spark.components.supportClasses.SkinnablePopUpComponent;
 	
@@ -241,7 +242,8 @@ package org.apache.spark.components
 									iconClass:Class = null,
 									defaultButtonIndex:uint = 0,
 									modal:Boolean = true,
-									forcedSkin:Class = null):MobileAlert
+									forcedSkin:Class = null,
+									buttonSkin:Class = null):MobileAlert
 		{
 			var mobileAlert:MobileAlert = new MobileAlert();
 			mobileAlert.title = title;
@@ -276,11 +278,20 @@ package org.apache.spark.components
 				{
 					// we are on an iOS device
 					forcedSkin = AppleOSAlertSkin;
+					
 				}
 				else
 				{
 					// we are assumed to be on an android device.
 					forcedSkin = AndroidAlertSkin;
+					mobileAlert.buttonStyle = AndroidButtonSkin;
+				}
+			}
+			else
+			{
+				if (buttonSkin != null)
+				{
+					mobileAlert.buttonStyle = buttonSkin;
 				}
 			}
 			
@@ -378,6 +389,7 @@ package org.apache.spark.components
 		private var _buttons:Vector.<Button>;
 		private var _title:String = "";
 		private var _message:String = "";
+		private var _buttonStyle:Class;
 		
 		/**
 		 *  The title to display in this alert dialog box.
@@ -488,6 +500,26 @@ package org.apache.spark.components
 			invalidateSkinState();
 		}
 		
+		/**
+		 *  The style class to set the buttons to.
+		 *
+		 *  @default null
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 9
+		 *  @playerversion AIR 1.1
+		 *  @productversion Flex 3
+		 */
+		public function get buttonStyle():Class
+		{
+			return _buttonStyle;
+		}
+		
+		public function set buttonStyle(value:Class):void
+		{
+			_buttonStyle = value;
+		}
+		
 		//-----------------------------------------------------
 		// Private functions used by other functions within this component
 		//-----------------------------------------------------
@@ -531,10 +563,11 @@ package org.apache.spark.components
 			
 			for (var i:int = 0; i < _buttons.length ; i++)
 			{
+				if (_buttonStyle != null)
+				  _buttons[i].setStyle("skinClass",_buttonStyle);
 				_buttons[i].buttonMode = true;
 				_buttons[i].height = buttonBarGroup.height - 7;
 				_buttons[i].percentWidth = 50;
-				_buttons[i].setStyle("fontSize",12); // I should not be doing this.  Will need to create
a buttonSkin to contain some of these properties.
 				_buttons[i].addEventListener(MouseEvent.CLICK, onButtonTouch, false, 0, true);
 				buttonBarGroup.addElement(_buttons[i]);
 			}

Added: incubator/flex/whiteboard/quetwo/MobileAlert/src/org/apache/spark/components/skins/AndroidButtonSkin.mxml
URL: http://svn.apache.org/viewvc/incubator/flex/whiteboard/quetwo/MobileAlert/src/org/apache/spark/components/skins/AndroidButtonSkin.mxml?rev=1302054&view=auto
==============================================================================
--- incubator/flex/whiteboard/quetwo/MobileAlert/src/org/apache/spark/components/skins/AndroidButtonSkin.mxml
(added)
+++ incubator/flex/whiteboard/quetwo/MobileAlert/src/org/apache/spark/components/skins/AndroidButtonSkin.mxml
Sun Mar 18 03:01:12 2012
@@ -0,0 +1,137 @@
+<?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 the Spark Button component.  
+
+       @see spark.components.Button
+        
+      @langversion 3.0
+      @playerversion Flash 10
+      @playerversion AIR 1.5
+      @productversion Flex 4
+-->
+<s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
+             xmlns:s="library://ns.adobe.com/flex/spark" 
+             xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
+             minWidth="21" minHeight="21" 
+             alpha.disabled="0.5">
+     
+    <fx:Metadata>
+        <![CDATA[ 
+        /** 
+         * @copy spark.skins.spark.ApplicationSkin#hostComponent
+         */
+        [HostComponent("spark.components.Button")]
+        ]]>
+    </fx:Metadata>
+    
+    <fx:Script fb:purpose="styling">
+        <![CDATA[         
+            import spark.components.Group;
+            /* Define the skin elements that should not be colorized. 
+            For button, the graphics are colorized but the label is not. */
+            static private const exclusions:Array = ["labelDisplay"];
+            
+            /** 
+             * @private
+             */     
+            override public function get colorizeExclusions():Array {return exclusions;}
+            
+            /**
+             * @private
+             */
+            override protected function initializationComplete():void
+            {
+                useChromeColor = true;
+                super.initializationComplete();
+            }  
+            
+            /**
+             *  @private
+             */
+            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number)
: void
+            {
+                super.updateDisplayList(unscaledWidth, unscaledHeight);
+            }
+            
+        ]]>        
+    </fx:Script>
+        
+    <!-- states -->
+    <s:states>
+        <s:State name="up" />
+        <s:State name="over" />
+        <s:State name="down" />
+        <s:State name="disabled" />
+		<s:State name="default" />
+    </s:states>
+    
+    <!-- layer 1: shadow -->
+    <!--- @private -->
+    <s:Rect id="shadow" left="-1" right="-1" top="-1" bottom="-1" radiusX="1">
+        <s:fill>
+            <s:LinearGradient rotation="90">
+                <s:GradientEntry color="0x000000" 
+                                 color.down="0xFFFFFF"
+                                 alpha="0.01"
+                                 alpha.down="0" />
+                <s:GradientEntry color="0x000000" 
+                                 color.down="0xFFFFFF" 
+                                 alpha="0.07"
+                                 alpha.down="0.5" />
+            </s:LinearGradient>
+        </s:fill>
+    </s:Rect>
+    
+    <!-- layer 2: fill -->
+    <!--- @private -->
+    <s:Rect id="fill" left="1" right="1" top="1" bottom="1" radiusX="1">
+        <s:fill>
+            <s:LinearGradient rotation="90">
+                <s:GradientEntry color="0xcccccc" 
+                                 color.down="0xAAAAAA" />
+                <s:GradientEntry color="0xe4e4e4" 
+                                 color.over="0x9FA0A1" />
+            </s:LinearGradient>
+        </s:fill>
+    </s:Rect>
+    
+    <!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is
less than 1 -->
+    <!--- @private -->
+    <s:Rect id="border" left="0" right="0" top="0" bottom="0" width="69" height="20" radiusX="1">
+        <s:stroke>
+            <s:LinearGradientStroke rotation="90" weight="1">
+				<s:GradientEntry color="0x808080" ratio="0" />
+				<s:GradientEntry color="0x464646" ratio="1"/>
+            </s:LinearGradientStroke>
+        </s:stroke>
+    </s:Rect>
+    
+    <!-- layer 8: text -->
+    <!--- @copy spark.components.supportClasses.ButtonBase#labelDisplay  -->
+    <s:Label id="labelDisplay"
+             textAlign="center"
+             maxDisplayedLines="1"
+             horizontalCenter="0" verticalCenter="1" verticalAlign="middle"
+             left="10" right="10" top="2" bottom="2" fontSize="12">
+    </s:Label>
+    
+</s:SparkButtonSkin>

Modified: incubator/flex/whiteboard/quetwo/MobileAlert/src/org/apache/spark/components/skins/AppleOSAlertSkin.mxml
URL: http://svn.apache.org/viewvc/incubator/flex/whiteboard/quetwo/MobileAlert/src/org/apache/spark/components/skins/AppleOSAlertSkin.mxml?rev=1302054&r1=1302053&r2=1302054&view=diff
==============================================================================
--- incubator/flex/whiteboard/quetwo/MobileAlert/src/org/apache/spark/components/skins/AppleOSAlertSkin.mxml
(original)
+++ incubator/flex/whiteboard/quetwo/MobileAlert/src/org/apache/spark/components/skins/AppleOSAlertSkin.mxml
Sun Mar 18 03:01:12 2012
@@ -92,7 +92,7 @@ limitations under the License.
 			</s:stroke>
         </s:Rect>		
 				
-		<s:Path id="glossPath" x="0" width="0" y="0" winding="evenOdd" data="M 529.2 -0.1 L
22.8 -0.1 C 11.75 -0.1 0.05 12.45 0.05 23.5 L 0.05 39.8 C 88.7 50.95 185.2 60.35 280.7 60.35
C 375.7 60.35 463.7 51 551.95 39.95 L 551.95 23.5 C 551.95 12.45 540.25 -0.1 529.2 -0.1">
+		<s:Path blendMode="screen" id="glossPath" x="0" width="0" y="0" winding="evenOdd" data="M
529.2 -0.1 L 22.8 -0.1 C 11.75 -0.1 0.05 12.45 0.05 23.5 L 0.05 39.8 C 88.7 50.95 185.2 60.35
280.7 60.35 C 375.7 60.35 463.7 51 551.95 39.95 L 551.95 23.5 C 551.95 12.45 540.25 -0.1 529.2
-0.1">
 			<s:fill>
 				<s:LinearGradient rotation="90">
 					<s:GradientEntry color="#cacaca" ratio="0" alpha=".5" />
@@ -101,6 +101,15 @@ limitations under the License.
 			</s:fill>
 		</s:Path>
 		
+		<s:Rect id="border" left="0" right="0" top="0" bottom="0" radiusX="8">
+			<s:stroke>
+				<s:LinearGradientStroke weight="2" rotation="90">
+					<s:GradientEntry color="#e2e3e4" ratio="0" />
+					<s:GradientEntry color="#b2b7c2" ratio=".2" />
+				</s:LinearGradientStroke>
+			</s:stroke>
+		</s:Rect>	
+		
     </s:Group>
 	
 	<s:Group id="contents" top="0" left="0" right="0" bottom="0">
@@ -113,10 +122,18 @@ limitations under the License.
 		
 			<s:Label id="titleDisplay" maxDisplayedLines="1"
 					 left="5" right="5" top="8" minHeight="30"
-					 verticalAlign="middle" textAlign="center" fontWeight="bold" color="#ffffff" />
+					 verticalAlign="middle" textAlign="center" fontWeight="bold" color="#ffffff">
+				<s:filters>
+					<s:DropShadowFilter alpha="1" angle="-90" color="0x000000" distance="1" blurX="1"
/>
+				</s:filters>
+			</s:Label>
 			
 			<s:Label id="messageDisplay" left="10" right="10" top="45" minHeight="30" color="#ffffff"
paddingBottom="5"
-					 textAlign="center" verticalAlign="middle" fontSize="14" maxWidth="{Math.max(titleDisplay.width
+ 46,200)}" />
+					 textAlign="center" verticalAlign="middle" fontSize="14" maxWidth="{Math.max(titleDisplay.width
+ 46,200)}">
+				<s:filters>
+					<s:DropShadowFilter alpha="1" angle="-90" color="0x000000" distance="1" blurX="1"
/>
+				</s:filters>
+			</s:Label>
 			
 		</s:Group>
 		

Added: incubator/flex/whiteboard/quetwo/MobileAlert/src/org/apache/spark/components/skins/AppleOSButtonSkin.mxml
URL: http://svn.apache.org/viewvc/incubator/flex/whiteboard/quetwo/MobileAlert/src/org/apache/spark/components/skins/AppleOSButtonSkin.mxml?rev=1302054&view=auto
==============================================================================
--- incubator/flex/whiteboard/quetwo/MobileAlert/src/org/apache/spark/components/skins/AppleOSButtonSkin.mxml
(added)
+++ incubator/flex/whiteboard/quetwo/MobileAlert/src/org/apache/spark/components/skins/AppleOSButtonSkin.mxml
Sun Mar 18 03:01:12 2012
@@ -0,0 +1,147 @@
+<?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 the Spark Button component.  
+
+       @see spark.components.Button
+        
+      @langversion 3.0
+      @playerversion Flash 10
+      @playerversion AIR 1.5
+      @productversion Flex 4
+-->
+<s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
+             xmlns:s="library://ns.adobe.com/flex/spark" 
+             xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
+             minWidth="21" minHeight="21" 
+             alpha.disabled="0.5">
+     
+    <fx:Metadata>
+        <![CDATA[ 
+        /** 
+         * @copy spark.skins.spark.ApplicationSkin#hostComponent
+         */
+        [HostComponent("spark.components.Button")]
+        ]]>
+    </fx:Metadata>
+    
+    <fx:Script fb:purpose="styling">
+        <![CDATA[         
+            import spark.components.Group;
+            /* Define the skin elements that should not be colorized. 
+            For button, the graphics are colorized but the label is not. */
+            static private const exclusions:Array = ["labelDisplay"];
+            
+            /** 
+             * @private
+             */     
+            override public function get colorizeExclusions():Array {return exclusions;}
+            
+            /**
+             * @private
+             */
+            override protected function initializationComplete():void
+            {
+                useChromeColor = true;
+                super.initializationComplete();
+            }  
+            
+            /**
+             *  @private
+             */
+            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number)
: void
+            {
+                super.updateDisplayList(unscaledWidth, unscaledHeight);
+            }
+            
+        ]]>        
+    </fx:Script>
+        
+    <!-- states -->
+    <s:states>
+        <s:State name="up" />
+        <s:State name="over" />
+        <s:State name="down" />
+        <s:State name="disabled" />
+		<s:State name="default" />
+    </s:states>
+    
+    <!-- layer 1: shadow -->
+    <!--- @private -->
+    <s:Rect id="shadow" left="-1" right="-1" top="-1" bottom="-1" radiusX="2">
+        <s:fill>
+            <s:LinearGradient rotation="90">
+                <s:GradientEntry color="0x000000" 
+                                 color.down="0xFFFFFF"
+                                 alpha="0.01"
+                                 alpha.down="0" />
+                <s:GradientEntry color="0x000000" 
+                                 color.down="0xFFFFFF" 
+                                 alpha="0.07"
+                                 alpha.down="0.5" />
+            </s:LinearGradient>
+        </s:fill>
+    </s:Rect>
+    
+    <!-- layer 2: fill -->
+    <!--- @private -->
+	
+	<s:Rect id="fill" left="1" right="1" top="1" bottom="1" radiusX="2" blendMode="screen">
+        <s:fill>
+            <s:LinearGradient rotation="90">
+				<s:GradientEntry color="#d6d6d6" 
+								 alpha="0.8"
+								 ratio="0"/>
+				<s:GradientEntry color="#717377" 
+								 alpha="0.8"
+								 ratio="0.5"/>
+				<s:GradientEntry color="#4a4b4e" 
+								 alpha="0.8"
+								 ratio="0.51"/>
+				<s:GradientEntry color="#66676a" 
+                                 alpha="0.8"
+								 ratio="1"/>
+            </s:LinearGradient>
+        </s:fill>
+    </s:Rect>
+
+    <!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is
less than 1 -->
+    <!--- @private -->
+    <s:Rect id="border" left="0" right="0" top="0" bottom="0" width="69" height="20" radiusX="2">
+        <s:stroke>
+			<s:SolidColorStroke alpha="0.9" color="#000000" weight="1" />
+        </s:stroke>
+    </s:Rect>
+    
+    <!-- layer 8: text -->
+    <!--- @copy spark.components.supportClasses.ButtonBase#labelDisplay  -->
+	
+	<s:Label id="labelDisplay"
+             textAlign="center"
+             maxDisplayedLines="1"
+             horizontalCenter="0" verticalCenter="1" verticalAlign="middle"
+             left="10" right="10" top="2" bottom="2" color="#ffffff" fontSize="12">
+		<s:filters>
+			<s:DropShadowFilter alpha="1" angle="-90" color="0x000000" distance="1" blurX="1" />
+		</s:filters>
+    </s:Label>
+    
+</s:SparkButtonSkin>



Mime
View raw message