flex-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From aha...@apache.org
Subject [1/5] git commit: [flex-asjs] - Add support for background-image to buttons on the AS side. Simple class selectors now work as well, and fx:Style in MXML
Date Wed, 24 Apr 2013 17:39:41 GMT
Updated Branches:
  refs/heads/develop 91ca636f7 -> ab3a320ba


Add support for background-image to buttons on the AS side.  Simple class selectors now work
as well, and fx:Style in MXML


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

Branch: refs/heads/develop
Commit: c05efd712930c1ec981b3fb97b15d54355144f1c
Parents: 91ca636
Author: Alex Harui <aharui@apache.org>
Authored: Tue Apr 23 14:22:26 2013 -0700
Committer: Alex Harui <aharui@apache.org>
Committed: Tue Apr 23 14:22:26 2013 -0700

----------------------------------------------------------------------
 examples/FlexJSTest_again/src/ButtonImageDown.png  |  Bin 0 -> 206 bytes
 examples/FlexJSTest_again/src/ButtonImageOver.png  |  Bin 0 -> 266 bytes
 examples/FlexJSTest_again/src/ButtonImageUp.png    |  Bin 0 -> 236 bytes
 examples/FlexJSTest_again/src/MyInitialView.mxml   |   17 ++
 .../as/src/org/apache/flex/core/CSSTextField.as    |    8 +-
 .../org/apache/flex/core/SimpleCSSValuesImpl.as    |   68 ++++++++-
 frameworks/as/src/org/apache/flex/core/UIBase.as   |   14 ++
 frameworks/as/src/org/apache/flex/core/ViewBase.as |    5 +
 .../org/apache/flex/html/staticControls/Button.as  |   16 ++-
 .../html/staticControls/beads/CSSTextButtonBead.as |  117 ++++++++-------
 .../src/org/apache/flex/utils/SolidBorderUtil.as   |   39 +++++
 11 files changed, 218 insertions(+), 66 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c05efd71/examples/FlexJSTest_again/src/ButtonImageDown.png
----------------------------------------------------------------------
diff --git a/examples/FlexJSTest_again/src/ButtonImageDown.png b/examples/FlexJSTest_again/src/ButtonImageDown.png
new file mode 100644
index 0000000..0cf7f8a
Binary files /dev/null and b/examples/FlexJSTest_again/src/ButtonImageDown.png differ

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c05efd71/examples/FlexJSTest_again/src/ButtonImageOver.png
----------------------------------------------------------------------
diff --git a/examples/FlexJSTest_again/src/ButtonImageOver.png b/examples/FlexJSTest_again/src/ButtonImageOver.png
new file mode 100644
index 0000000..2f78d59
Binary files /dev/null and b/examples/FlexJSTest_again/src/ButtonImageOver.png differ

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c05efd71/examples/FlexJSTest_again/src/ButtonImageUp.png
----------------------------------------------------------------------
diff --git a/examples/FlexJSTest_again/src/ButtonImageUp.png b/examples/FlexJSTest_again/src/ButtonImageUp.png
new file mode 100644
index 0000000..927e1c8
Binary files /dev/null and b/examples/FlexJSTest_again/src/ButtonImageUp.png differ

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c05efd71/examples/FlexJSTest_again/src/MyInitialView.mxml
----------------------------------------------------------------------
diff --git a/examples/FlexJSTest_again/src/MyInitialView.mxml b/examples/FlexJSTest_again/src/MyInitialView.mxml
index e656a94..640c72e 100644
--- a/examples/FlexJSTest_again/src/MyInitialView.mxml
+++ b/examples/FlexJSTest_again/src/MyInitialView.mxml
@@ -61,6 +61,22 @@ limitations under the License.
 			}
         ]]>
     </fx:Script>
+	<fx:Style>
+		@namespace basic "library://ns.apache.org/flexjs/basic";
+		
+		.skinned {
+			background-image: "ButtonImageUp.png";
+		}
+		
+		.skinned:hover {
+			background-image: "ButtonImageOver.png";
+		}
+		
+		.skinned:active {
+			background-image: "ButtonImageDown.png";
+		}
+
+	</fx:Style>
 	<basic:Label id="lbl" x="100" y="25" >
 		<basic:beads>
 			<basic:SimpleBinding eventName="labelTextChanged"
@@ -112,6 +128,7 @@ limitations under the License.
 		</basic:beads>
 	</basic:DropDownList>
 	<basic:TextButton text="OK" x="200" y="230" click="dispatchEvent(new CustomEvent('buttonClicked'))"
/>
+	<basic:TextButton text="Skinned" x="200" y="260" className="skinned" click="dispatchEvent(new
CustomEvent('buttonClicked'))" />
 	
 	<basic:ComboBox id="comboBox" x="320" y="200" width="100" change="dispatchEvent(new CustomEvent('comboBoxChanged'))">
 		<basic:beads>

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c05efd71/frameworks/as/src/org/apache/flex/core/CSSTextField.as
----------------------------------------------------------------------
diff --git a/frameworks/as/src/org/apache/flex/core/CSSTextField.as b/frameworks/as/src/org/apache/flex/core/CSSTextField.as
index a71174d..7ffa12b 100644
--- a/frameworks/as/src/org/apache/flex/core/CSSTextField.as
+++ b/frameworks/as/src/org/apache/flex/core/CSSTextField.as
@@ -35,7 +35,13 @@ package org.apache.flex.core
 			var tf: TextFormat = new TextFormat();
 			tf.font = ValuesManager.valuesImpl.getValue(this, "fontFamily") as String;
 			tf.size = ValuesManager.valuesImpl.getValue(this, "fontSize");
-			tf.color = ValuesManager.valuesImpl.getValue(this, "color");			
+			tf.color = ValuesManager.valuesImpl.getValue(this, "color");
+			var padding:Object = ValuesManager.valuesImpl.getValue(this, "padding");
+			if (padding != null)
+			{
+				tf.leftMargin = padding;
+				tf.rightMargin = padding;
+			}
 			defaultTextFormat = tf;
 			super.text = value;
 		}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c05efd71/frameworks/as/src/org/apache/flex/core/SimpleCSSValuesImpl.as
----------------------------------------------------------------------
diff --git a/frameworks/as/src/org/apache/flex/core/SimpleCSSValuesImpl.as b/frameworks/as/src/org/apache/flex/core/SimpleCSSValuesImpl.as
index 73b316e..129060e 100644
--- a/frameworks/as/src/org/apache/flex/core/SimpleCSSValuesImpl.as
+++ b/frameworks/as/src/org/apache/flex/core/SimpleCSSValuesImpl.as
@@ -39,11 +39,21 @@ package org.apache.flex.core
 
         public function init(mainClass:Object):void
         {
-            this.mainClass = mainClass;
-            var mainClassName:String = getQualifiedClassName(mainClass);
-            var styleClassName:String = "_" + mainClassName + "_Styles";
-            var c:Class = ApplicationDomain.currentDomain.getDefinition(styleClassName) as
Class;
-            values = {};
+			var styleClassName:String;
+			var c:Class;
+			if (!values)
+			{
+				values = {};
+	            this.mainClass = mainClass;
+	            var mainClassName:String = getQualifiedClassName(mainClass);
+				styleClassName = "_" + mainClassName + "_Styles";
+				c = ApplicationDomain.currentDomain.getDefinition(styleClassName) as Class;
+			}
+			else
+			{
+				var className:String = getQualifiedClassName(mainClass);
+				c = ApplicationDomain.currentDomain.getDefinition(className) as Class;
+			}
             generateCSSStyleDeclarations(c["factoryFunctions"], c["data"]);
         }
         
@@ -138,8 +148,11 @@ package org.apache.flex.core
             for (var i:int = 0; i < n; i++)
             {
                 var segmentName:String = arr[i];
+				if (segmentName.charAt(0) == "#" || segmentName.charAt(0) == ".")
+					continue;
+				
                 var c:int = segmentName.lastIndexOf(".");
-                if (c != -1)
+                if (c > -1)	// it is 0 for class selectors
                 {
                     segmentName = segmentName.substr(0, c) + "::" + segmentName.substr(c
+ 1);
                     arr[i] = segmentName;
@@ -153,13 +166,50 @@ package org.apache.flex.core
 		public function getValue(thisObject:Object, valueName:String, state:String = null, attrs:Object
= null):Object
 		{
 			var value:*;
-			var className:String = getQualifiedClassName(thisObject);
+			var o:Object;
+			var className:String;
+			var selectorName:String;
+			
+			if ("className" in thisObject)
+			{
+				className = thisObject.className;
+				if (state)
+				{
+					selectorName = className + ":" + state;
+					o = values["." + selectorName];
+					if (o)
+					{
+						value = o[valueName];
+						if (value !== undefined)
+							return value;
+					}
+				}
+				
+				o = values["." + className];
+				if (o)
+				{
+					value = o[valueName];
+					if (value !== undefined)
+						return value;
+				}
+			}
+			
+			className = getQualifiedClassName(thisObject);
 			while (className != "Object")
 			{
 				if (state)
-					className += ":" + state;
+				{
+					selectorName = className + ":" + state;
+					o = values[selectorName];
+					if (o)
+					{
+						value = o[valueName];
+						if (value !== undefined)
+							return value;
+					}
+				}
 				
-	            var o:Object = values[className];
+	            o = values[className];
 	            if (o)
 	            {
 	                value = o[valueName];

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c05efd71/frameworks/as/src/org/apache/flex/core/UIBase.as
----------------------------------------------------------------------
diff --git a/frameworks/as/src/org/apache/flex/core/UIBase.as b/frameworks/as/src/org/apache/flex/core/UIBase.as
index 3b1eb9e..0d93b94 100644
--- a/frameworks/as/src/org/apache/flex/core/UIBase.as
+++ b/frameworks/as/src/org/apache/flex/core/UIBase.as
@@ -94,6 +94,20 @@ package org.apache.flex.core
 			}
 		}
 		
+		private var _className:String;
+		public function get className():String
+		{
+			return _className;
+		}
+		public function set className(value:String):void
+		{
+			if (_className != value)
+			{
+				_className = value;
+				dispatchEvent(new Event("classNameChanged"));
+			}
+		}
+		
 		// beads declared in MXML are added to the strand.
 		// from AS, just call addBead()
 		public var beads:Array;

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c05efd71/frameworks/as/src/org/apache/flex/core/ViewBase.as
----------------------------------------------------------------------
diff --git a/frameworks/as/src/org/apache/flex/core/ViewBase.as b/frameworks/as/src/org/apache/flex/core/ViewBase.as
index 3ea4bb5..91f569e 100644
--- a/frameworks/as/src/org/apache/flex/core/ViewBase.as
+++ b/frameworks/as/src/org/apache/flex/core/ViewBase.as
@@ -18,6 +18,7 @@
 ////////////////////////////////////////////////////////////////////////////////
 package org.apache.flex.core
 {
+	import org.apache.flex.core.ValuesManager;
 	import org.apache.flex.events.Event;	
 	import org.apache.flex.utils.MXMLDataInterpreter;
 
@@ -33,6 +34,10 @@ package org.apache.flex.core
 		{
 			_applicationModel = model;
 			dispatchEvent(new Event("modelChanged"));
+			
+			// each MXML file can also have styles in fx:Style block
+			ValuesManager.valuesImpl.init(this);
+			
 			MXMLDataInterpreter.generateMXMLProperties(this, MXMLProperties);
 			MXMLDataInterpreter.generateMXMLInstances(this, this, MXMLDescriptor);
 		}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c05efd71/frameworks/as/src/org/apache/flex/html/staticControls/Button.as
----------------------------------------------------------------------
diff --git a/frameworks/as/src/org/apache/flex/html/staticControls/Button.as b/frameworks/as/src/org/apache/flex/html/staticControls/Button.as
index 1077526..ce74237 100644
--- a/frameworks/as/src/org/apache/flex/html/staticControls/Button.as
+++ b/frameworks/as/src/org/apache/flex/html/staticControls/Button.as
@@ -107,7 +107,21 @@ package org.apache.flex.html.staticControls
 				dispatchEvent(new Event("idChanged"));
 			}
 		}
-		
+
+		private var _className:String;
+		public function get className():String
+		{
+			return _className;
+		}
+		public function set className(value:String):void
+		{
+			if (_className != value)
+			{
+				_className = value;
+				dispatchEvent(new Event("classNameChanged"));
+			}
+		}
+
         // beads declared in MXML are added to the strand.
         // from AS, just call addBead()
         public var beads:Array;

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c05efd71/frameworks/as/src/org/apache/flex/html/staticControls/beads/CSSTextButtonBead.as
----------------------------------------------------------------------
diff --git a/frameworks/as/src/org/apache/flex/html/staticControls/beads/CSSTextButtonBead.as
b/frameworks/as/src/org/apache/flex/html/staticControls/beads/CSSTextButtonBead.as
index 19d4841..f3c30da 100644
--- a/frameworks/as/src/org/apache/flex/html/staticControls/beads/CSSTextButtonBead.as
+++ b/frameworks/as/src/org/apache/flex/html/staticControls/beads/CSSTextButtonBead.as
@@ -18,8 +18,13 @@
 ////////////////////////////////////////////////////////////////////////////////
 package org.apache.flex.html.staticControls.beads
 {
+	import flash.display.Loader;
 	import flash.display.Shape;
 	import flash.display.SimpleButton;
+	import flash.display.Sprite;
+	import flash.events.Event;
+	import flash.net.URLRequest;
+	import flash.text.TextField;
 	import flash.text.TextFieldType;
 	
 	import org.apache.flex.core.CSSTextField;
@@ -27,20 +32,18 @@ package org.apache.flex.html.staticControls.beads
 	import org.apache.flex.core.ITextModel;
 	import org.apache.flex.core.ValuesManager;
 	import org.apache.flex.events.Event;
+	import org.apache.flex.utils.SolidBorderUtil;
 
 	public class CSSTextButtonBead implements ITextButtonBead
 	{
 		public function CSSTextButtonBead()
 		{
+			upSprite = new Sprite();
+			downSprite = new Sprite();
+			overSprite = new Sprite();
 			upTextField = new CSSTextField();
 			downTextField = new CSSTextField();
 			overTextField = new CSSTextField();
-			upTextField.border = true;
-			downTextField.border = true;
-			overTextField.border = true;
-			upTextField.background = true;
-			downTextField.background = true;
-			overTextField.background = true;
 			upTextField.selectable = false;
 			upTextField.type = TextFieldType.DYNAMIC;
 			downTextField.selectable = false;
@@ -50,7 +53,9 @@ package org.apache.flex.html.staticControls.beads
 			upTextField.autoSize = "left";
 			downTextField.autoSize = "left";
 			overTextField.autoSize = "left";
-
+			upSprite.addChild(upTextField);
+			downSprite.addChild(downTextField);
+			overSprite.addChild(overTextField);
 		}
 		
 		private var textModel:ITextModel;
@@ -69,69 +74,63 @@ package org.apache.flex.html.staticControls.beads
 			shape.graphics.beginFill(0xCCCCCC);
 			shape.graphics.drawRect(0, 0, 10, 10);
 			shape.graphics.endFill();
-			SimpleButton(value).upState = upTextField;
-			SimpleButton(value).downState = downTextField;
-			SimpleButton(value).overState = overTextField;
+			SimpleButton(value).upState = upSprite;
+			SimpleButton(value).downState = downSprite;
+			SimpleButton(value).overState = overSprite;
 			SimpleButton(value).hitTestState = shape;
 			if (textModel.text !== null)
 				text = textModel.text;
 			if (textModel.html !== null)
 				html = textModel.html;
-			var defaultBorderStyles:Object = ValuesManager.valuesImpl.getValue(value, "border");
-			var defaultBackgroundColor:Object = ValuesManager.valuesImpl.getValue(value, "backgroundColor");
-			var borderStyles:Object = ValuesManager.valuesImpl.getValue(value, "border", "hover");
-			var borderColor:uint;
-			var borderThickness:uint;
-			var borderStyle:String;
-			if (!borderStyles)
-				borderStyles = defaultBorderStyles;
-			if (borderStyles is Array)
-			{
-				borderColor = borderStyles[2];
-				borderStyle = borderStyles[1];
-				borderThickness = borderStyles[0];
-				overTextField.borderColor = borderColor;
-				overTextField.border = borderStyle != "none";
-			}
-			var backgroundColor:Object = ValuesManager.valuesImpl.getValue(value, "backgroundColor",
"hover");
-			if (backgroundColor == null)
-				backgroundColor = defaultBackgroundColor;
-			overTextField.backgroundColor = backgroundColor as uint;
+
+			setupSkin(overSprite, overTextField, "hover");
+			setupSkin(downSprite, downTextField, "active");
+			setupSkin(upSprite, upTextField);
+		}
+	
+		private function setupSkin(sprite:Sprite, textField:TextField, state:String = null):void
+		{
 			
-			borderStyles = ValuesManager.valuesImpl.getValue(value, "border", "active");
-			if (!borderStyles)
-				borderStyles = defaultBorderStyles;
-			if (borderStyles is Array)
+			var backgroundImage:Object = ValuesManager.valuesImpl.getValue(_strand, "backgroundImage",
state);
+			if (backgroundImage)
 			{
-				borderColor = borderStyles[2];
-				borderStyle = borderStyles[1];
-				borderThickness = borderStyles[0];
-				downTextField.borderColor = borderColor;
-				downTextField.border = borderStyle != "none";
+				var loader:Loader = new Loader();
+				sprite.addChildAt(loader, 0);
+				loader.load(new URLRequest(backgroundImage as String));
+				loader.contentLoaderInfo.addEventListener(flash.events.Event.COMPLETE, function (e:flash.events.Event):void
{ 
+					textField.y = (sprite.height - textField.height) / 2;
+					textField.x = (sprite.width - textField.width) / 2;
+					updateHitArea();
+				});
 			}
-			backgroundColor = ValuesManager.valuesImpl.getValue(value, "backgroundColor", "active");
-			if (backgroundColor == null)
-				backgroundColor = defaultBackgroundColor;
-			downTextField.backgroundColor = backgroundColor as uint;
-
-			borderStyles = defaultBorderStyles;
-			if (borderStyles is Array)
+			else
 			{
-				borderColor = borderStyles[2];
-				borderStyle = borderStyles[1];
-				borderThickness = borderStyles[0];
-				upTextField.borderColor = borderColor;
-				upTextField.border = borderStyle != "none";
+				var borderColor:uint;
+				var borderThickness:uint;
+				var borderStyle:String;
+				var borderStyles:Object = ValuesManager.valuesImpl.getValue(_strand, "border", state);
+				if (borderStyles is Array)
+				{
+					borderColor = borderStyles[2];
+					borderStyle = borderStyles[1];
+					borderThickness = borderStyles[0];
+				}
+				var padding:Object = ValuesManager.valuesImpl.getValue(_strand, "padding", state);
+				var backgroundColor:Object = ValuesManager.valuesImpl.getValue(_strand, "backgroundColor",
state);
+				SolidBorderUtil.drawBorder(sprite.graphics, 
+					0, 0, textField.textWidth + Number(padding) * 2, textField.textHeight + Number(padding)
* 2,
+					borderColor, backgroundColor, borderThickness);
+				textField.y = (sprite.height - textField.height) / 2;
+				textField.x = (sprite.width - textField.width) / 2;
 			}
-			upTextField.backgroundColor = defaultBackgroundColor as uint;
 		}
 		
-		private function textChangeHandler(event:Event):void
+		private function textChangeHandler(event:org.apache.flex.events.Event):void
 		{
 			text = textModel.text;
 		}
 		
-		private function htmlChangeHandler(event:Event):void
+		private function htmlChangeHandler(event:org.apache.flex.events.Event):void
 		{
 			html = textModel.html;
 		}
@@ -139,6 +138,9 @@ package org.apache.flex.html.staticControls.beads
 		private var upTextField:CSSTextField;
 		private var downTextField:CSSTextField;
 		private var overTextField:CSSTextField;
+		private var upSprite:Sprite;
+		private var downSprite:Sprite;
+		private var overSprite:Sprite;
 		
 		public function get text():String
 		{
@@ -149,9 +151,14 @@ package org.apache.flex.html.staticControls.beads
 			upTextField.text = value;
 			downTextField.text = value;
 			overTextField.text = value;
+			updateHitArea();
+		}
+		
+		private function updateHitArea():void
+		{
 			shape.graphics.clear();
 			shape.graphics.beginFill(0xCCCCCC);
-			shape.graphics.drawRect(0, 0, upTextField.textWidth, upTextField.textHeight);
+			shape.graphics.drawRect(0, 0, upSprite.width, upSprite.height);
 			shape.graphics.endFill();
 			
 		}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c05efd71/frameworks/as/src/org/apache/flex/utils/SolidBorderUtil.as
----------------------------------------------------------------------
diff --git a/frameworks/as/src/org/apache/flex/utils/SolidBorderUtil.as b/frameworks/as/src/org/apache/flex/utils/SolidBorderUtil.as
new file mode 100644
index 0000000..cb43da1
--- /dev/null
+++ b/frameworks/as/src/org/apache/flex/utils/SolidBorderUtil.as
@@ -0,0 +1,39 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 org.apache.flex.utils
+{
+	import flash.display.Graphics;
+
+public class SolidBorderUtil
+{
+	public static function drawBorder(g:Graphics, x:Number, y:Number, 
+									  width:Number, height:Number,
+									  color:uint, backgroundColor:Object = null, 
+									  thickness:int = 1, alpha:Number = 1.0):void
+	{
+		g.lineStyle(thickness, color, alpha);
+		if (backgroundColor != null)
+			g.beginFill(uint(backgroundColor));	
+		
+		g.drawRect(x, y, width, height);
+		if (backgroundColor != null)
+			g.endFill();
+	}
+}
+}


Mime
View raw message