Repository: flex-asjs Updated Branches: refs/heads/develop d3b4e7434 -> d54c90d92
improve CSS support to handle FlatUI-like CSS for Buttons Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/3ceb21b6 Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/3ceb21b6 Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/3ceb21b6 Branch: refs/heads/develop Commit: 3ceb21b6ac5cb4592945db21b739d55490b2c629 Parents: 6487085 Author: Alex Harui <aha...@apache.org> Authored: Thu Jul 9 12:42:47 2015 -0700 Committer: Alex Harui <aha...@apache.org> Committed: Thu Jul 9 12:42:47 2015 -0700 ---------------------------------------------------------------------- frameworks/projects/Core/as/src/CoreClasses.as | 3 +- .../as/src/org/apache/flex/core/CSSTextField.as | 27 +- .../org/apache/flex/core/SimpleCSSValuesImpl.as | 17 +- .../as/src/org/apache/flex/core/UIButtonBase.as | 6 +- .../as/src/org/apache/flex/utils/CSSUtils.as | 299 +++++++++++++++++++ .../org/apache/flex/utils/SolidBorderUtil.as | 12 +- .../src/org/apache/flex/utils/StringTrimmer.as | 175 +++++++++++ frameworks/projects/HTML/as/defaults.css | 28 +- .../org/apache/flex/html/beads/CSSButtonView.as | 56 +++- .../apache/flex/html/beads/CSSTextButtonView.as | 83 +++-- 10 files changed, 638 insertions(+), 68 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/3ceb21b6/frameworks/projects/Core/as/src/CoreClasses.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/Core/as/src/CoreClasses.as b/frameworks/projects/Core/as/src/CoreClasses.as index 43abbdc..337e5f3 100644 --- a/frameworks/projects/Core/as/src/CoreClasses.as +++ b/frameworks/projects/Core/as/src/CoreClasses.as @@ -81,14 +81,15 @@ internal class CoreClasses import org.apache.flex.events.utils.MouseUtils; MouseUtils; import org.apache.flex.geom.Point; Point; import org.apache.flex.geom.Rectangle; Rectangle; - import org.apache.flex.utils.UIUtils; UIUtils; import org.apache.flex.utils.BinaryData; BinaryData; import org.apache.flex.utils.BeadMetrics; BeadMetrics; + import org.apache.flex.utils.CSSUtils; CSSUtils; import org.apache.flex.utils.dbg.DOMPathUtil; DOMPathUtil; import org.apache.flex.utils.EffectTimer; EffectTimer; import org.apache.flex.utils.MixinManager; MixinManager; import org.apache.flex.utils.PNGEncoder; PNGEncoder; import org.apache.flex.utils.SolidBorderUtil; SolidBorderUtil; + import org.apache.flex.utils.StringTrimmer; StringTrimmer; import org.apache.flex.utils.Timer; Timer; import org.apache.flex.utils.UIUtils; UIUtils; http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/3ceb21b6/frameworks/projects/Core/as/src/org/apache/flex/core/CSSTextField.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/Core/as/src/org/apache/flex/core/CSSTextField.as b/frameworks/projects/Core/as/src/org/apache/flex/core/CSSTextField.as index 12248b8..e32b199 100644 --- a/frameworks/projects/Core/as/src/org/apache/flex/core/CSSTextField.as +++ b/frameworks/projects/Core/as/src/org/apache/flex/core/CSSTextField.as @@ -24,6 +24,7 @@ package org.apache.flex.core import org.apache.flex.core.ValuesManager; import org.apache.flex.events.Event; + import org.apache.flex.utils.CSSUtils; /** * The CSSTextField class implements CSS text styles in a TextField. @@ -64,11 +65,23 @@ package org.apache.flex.core /** * @private + * The parentDrawsBackground property is set if the CSSTextField + * shouldn't draw a background + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public var parentDrawsBackground:Boolean; + + /** + * @private */ override public function set text(value:String):void { var sp:Object = parent; - if (!sp) + if (styleParent) sp = styleParent; sp.addEventListener("classNameChanged", updateStyles); @@ -96,16 +109,14 @@ package org.apache.flex.core tf.align = "right"; autoSize = TextFieldAutoSize.NONE; } - var backgroundColor:Object = ValuesManager.valuesImpl.getValue(sp, "background-color"); - if (backgroundColor != null) + if (!parentDrawsBackground) { - this.background = true; - if (backgroundColor is String) + var backgroundColor:Object = ValuesManager.valuesImpl.getValue(sp, "background-color"); + if (backgroundColor != null) { - backgroundColor = backgroundColor.replace("#", "0x"); - backgroundColor = uint(backgroundColor); + this.background = true; + this.backgroundColor = CSSUtils.toColor(backgroundColor); } - this.backgroundColor = backgroundColor as uint; } defaultTextFormat = tf; super.text = value; http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/3ceb21b6/frameworks/projects/Core/as/src/org/apache/flex/core/SimpleCSSValuesImpl.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/Core/as/src/org/apache/flex/core/SimpleCSSValuesImpl.as b/frameworks/projects/Core/as/src/org/apache/flex/core/SimpleCSSValuesImpl.as index 4e4bbaf..bbbd6c0 100644 --- a/frameworks/projects/Core/as/src/org/apache/flex/core/SimpleCSSValuesImpl.as +++ b/frameworks/projects/Core/as/src/org/apache/flex/core/SimpleCSSValuesImpl.as @@ -25,7 +25,8 @@ package org.apache.flex.core import org.apache.flex.events.EventDispatcher; import org.apache.flex.events.ValueChangeEvent; - + import org.apache.flex.utils.CSSUtils; + /** * The SimpleCSSValuesImpl class implements a minimal set of * CSS lookup rules that is sufficient for most applications. @@ -481,13 +482,7 @@ package org.apache.flex.core */ public function convertColor(value:Object):uint { - if (!(value is String)) - return uint(value); - - var stringValue:String = value as String; - if (stringValue.charAt(0) == '#') - return uint(stringValue.substr(1)); - return uint(stringValue); + return CSSUtils.toColor(value); } /** @@ -518,10 +513,8 @@ package org.apache.flex.core if (isNaN(n)) { if (value.charAt(0) == "#") - { - value = value.replace("#", "0x"); - n = parseInt(value); - obj[pieces[0]] = n; + { + obj[pieces[0]] = CSSUtils.toColor(value); } else { http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/3ceb21b6/frameworks/projects/Core/as/src/org/apache/flex/core/UIButtonBase.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/Core/as/src/org/apache/flex/core/UIButtonBase.as b/frameworks/projects/Core/as/src/org/apache/flex/core/UIButtonBase.as index 5a93300..4656329 100644 --- a/frameworks/projects/Core/as/src/org/apache/flex/core/UIButtonBase.as +++ b/frameworks/projects/Core/as/src/org/apache/flex/core/UIButtonBase.as @@ -280,8 +280,7 @@ package org.apache.flex.core { var w:Number = _width; if (isNaN(w)) w = $width; - var metrics:UIMetrics = BeadMetrics.getMetrics(this); - return w + metrics.left + metrics.right; + return w; } else return explicitWidth; @@ -331,8 +330,7 @@ package org.apache.flex.core { var h:Number = _height; if (isNaN(h)) h = $height; - var metrics:UIMetrics = BeadMetrics.getMetrics(this); - return h + metrics.top + metrics.bottom; + return h; } else return explicitHeight; http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/3ceb21b6/frameworks/projects/Core/as/src/org/apache/flex/utils/CSSUtils.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/Core/as/src/org/apache/flex/utils/CSSUtils.as b/frameworks/projects/Core/as/src/org/apache/flex/utils/CSSUtils.as new file mode 100644 index 0000000..b023c4f --- /dev/null +++ b/frameworks/projects/Core/as/src/org/apache/flex/utils/CSSUtils.as @@ -0,0 +1,299 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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 +{ + + /** + * The CSSUtils class is a collection of static functions that provide utility + * features for managing CSS values. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public class CSSUtils + { + /** + * @private + */ + public function CSSUtils() + { + throw new Error("CSSUtils should not be instantiated."); + } + + /** + * Converts a String to number. + * + * @param str The String. + * @param reference A Number that will be used to convert percentages. + * + * @return Number. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public static function toNumber(str:String, reference:Number = 0):Number + { + var c:int = str.indexOf("px"); + if (c != -1) + return Number(str.substr(0, c)); + + c = str.indexOf("%"); + if (c != -1) + return Number(str.substr(0, c)) * reference / 100; + + return Number(str); + } + + /** + * Converts a value describing a color to a uint + * + * @param value The value. + * + * @return uint of the color. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public static function toColor(value:Object):uint + { + return toColorWithAlpha(value) & 0xFFFFFF; + } + + /** + * Converts a value describing a color and alpha in a uint + * + * @param value The value. + * + * @return uint of the color. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public static function toColorWithAlpha(value:Object):uint + { + if (!(value is String)) + return uint(value); + + var c:int; + var c2:int; + + var stringValue:String = value as String; + if (stringValue.charAt(0) == '#') + { + if (stringValue.length == 4) + return uint("0x" + stringValue.charAt(1) + stringValue.charAt(1) + + stringValue.charAt(2) + stringValue.charAt(2) + + stringValue.charAt(3) + stringValue.charAt(3)); + return uint("0x" + stringValue.substr(1)); + } + else if ((c = stringValue.indexOf("rgb(")) != -1) + { + c2 = stringValue.indexOf(")"); + stringValue = stringValue.substring(c + 4, c2); + var parts3:Array = stringValue.split(","); + return (uint(parts3[0]) << 16 + + uint(parts3[1]) << 8 + + uint(parts3[2])); + } + else if ((c = stringValue.indexOf("rgba(")) != -1) + { + c2 = stringValue.indexOf(")"); + stringValue = stringValue.substring(c + 4, c2); + var parts4:Array = stringValue.split(","); + return (uint(parts4[3]) << 24 + + uint(parts3[0]) << 16 + + uint(parts3[1]) << 8 + + uint(parts3[2])); + } + + if (colorMap.hasOwnProperty(stringValue)) + return colorMap[stringValue]; + return uint(stringValue); + } + + /** + * Computes paddingLeft or marginLeft. + * + * @param value The value of padding-left or margin-left. + * @param values The value of padding or margin. + * @param reference A Number that will be used to convert percentages. + * + * @return Number. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public static function getLeftValue(value:Object, values:Object, reference:Number = NaN):Number + { + if (value is Number) + return value as Number; + + if (value != null) + return toNumber(value as String, reference); + if (values is Array) + { + var arr:Array = values as Array; + var n:int = arr.length; + // shouldn't be n == 1. values would not be an array + var index:int = n < 3 ? 1 : 3; + value = arr[index]; + if (value is String) + return toNumber(value as String, reference); + return value as Number; + } + return toNumber(values as String, reference); + } + + /** + * Computes paddingRight or marginRight. + * + * @param value The value of padding-right or margin-right. + * @param values The value of padding or margin. + * @param reference A Number that will be used to convert percentages. + * + * @return Number. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public static function getRightValue(value:Object, values:Object, reference:Number = NaN):Number + { + if (value is Number) + return value as Number; + + if (value != null) + return toNumber(value as String, reference); + if (values is Array) + { + var arr:Array = values as Array; + value = arr[1]; + if (value is String) + return toNumber(value as String, reference); + return value as Number; + } + return toNumber(values as String, reference); + } + + /** + * Computes paddingTop or marginTop. + * + * @param value The value of padding-top or margin-top. + * @param values The value of padding or margin. + * @param reference A Number that will be used to convert percentages. + * + * @return Number. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public static function getTopValue(value:Object, values:Object, reference:Number = NaN):Number + { + if (value is Number) + return value as Number; + + if (value != null) + return toNumber(value as String, reference); + if (values is Array) + { + var arr:Array = values as Array; + value = arr[0]; + if (value is String) + return toNumber(value as String, reference); + return value as Number; + } + return toNumber(values as String, reference); + } + + /** + * Computes paddingBottom or marginBottom. + * + * @param value The value of padding-bottom or margin-bottom. + * @param values The value of padding or margin. + * @param reference A Number that will be used to convert percentages. + * + * @return Number. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public static function getBottomValue(value:Object, values:Object, reference:Number = NaN):Number + { + if (value is Number) + return value as Number; + + if (value != null) + return toNumber(value as String, reference); + if (values is Array) + { + var arr:Array = values as Array; + var n:int = arr.length; + // shouldn't be n == 1. values would not be an array + var index:int = n == 2 ? 0 : 2; + value = arr[index]; + if (value is String) + return toNumber(value as String, reference); + return value as Number; + } + return toNumber(values as String, reference); + } + + /** + * The map of color names to uints. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public static var colorMap:Object = { + white: 0xFFFFFF, + silver: 0xC0C0C0, + gray: 0x808080, + black: 0x000000, + red: 0xFF0000, + maroon: 0x800000, + yellow: 0xFFFF00, + olive: 0x808000, + lime: 0x00FF00, + green: 0x008000, + aqua: 0x00FFFF, + teal: 0x008080, + blue: 0x0000FF, + navy: 0x000080, + fuchsia: 0xFF00FF, + purple: 0x800080 + } + } +} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/3ceb21b6/frameworks/projects/Core/as/src/org/apache/flex/utils/SolidBorderUtil.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/Core/as/src/org/apache/flex/utils/SolidBorderUtil.as b/frameworks/projects/Core/as/src/org/apache/flex/utils/SolidBorderUtil.as index 8c65c79..aca4275 100644 --- a/frameworks/projects/Core/as/src/org/apache/flex/utils/SolidBorderUtil.as +++ b/frameworks/projects/Core/as/src/org/apache/flex/utils/SolidBorderUtil.as @@ -56,15 +56,19 @@ 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 + thickness:int = 1, alpha:Number = 1.0, + ellipseWidth:Number = NaN, ellipseHeight:Number = NaN):void { g.clear(); - g.lineStyle(thickness, color, alpha); + g.lineStyle(thickness, color, thickness == 0 ? 0 : 1); if (backgroundColor != null) - g.beginFill(uint(backgroundColor)); + g.beginFill(uint(backgroundColor), alpha); - g.drawRect(x, y, width, height); + if (!isNaN(ellipseWidth)) + g.drawRoundRect(x, y, width, height, ellipseWidth, ellipseHeight); + else + g.drawRect(x, y, width, height); if (backgroundColor != null) g.endFill(); } http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/3ceb21b6/frameworks/projects/Core/as/src/org/apache/flex/utils/StringTrimmer.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/Core/as/src/org/apache/flex/utils/StringTrimmer.as b/frameworks/projects/Core/as/src/org/apache/flex/utils/StringTrimmer.as new file mode 100644 index 0000000..b6de591 --- /dev/null +++ b/frameworks/projects/Core/as/src/org/apache/flex/utils/StringTrimmer.as @@ -0,0 +1,175 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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 +{ + + /** + * The StringTrimmer class is a collection of static functions that provide utility + * features for trimming whitespace off Strings. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public class StringTrimmer + { + /** + * @private + */ + public function StringTrimmer() + { + throw new Error("StringTrimmer should not be instantiated."); + } + + /** + * Removes all whitespace characters from the beginning and end + * of the specified string. + * + * @param str The String whose whitespace should be trimmed. + * + * @return Updated String where whitespace was removed from the + * beginning and end. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public static function trim(str:String):String + { + if (str == null) return ''; + + var startIndex:int = 0; + while (isWhitespace(str.charAt(startIndex))) + ++startIndex; + + var endIndex:int = str.length - 1; + while (isWhitespace(str.charAt(endIndex))) + --endIndex; + + if (endIndex >= startIndex) + return str.slice(startIndex, endIndex + 1); + else + return ""; + } + + /** + * Removes all whitespace characters from the beginning and end + * of each element in an Array, where the Array is stored as a String. + * + * @param value The String whose whitespace should be trimmed. + * + * @param separator The String that delimits each Array element in the string. + * + * @return Array where whitespace was removed from the + * beginning and end of each element. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public static function splitAndTrim(value:String, delimiter:String):Array + { + if (value != "" && value != null) + { + var items:Array = value.split(delimiter); + + var len:int = items.length; + for (var i:int = 0; i < len; i++) + { + items[i] = StringTrimmer.trim(items[i]); + } + return items; + } + + return []; + } + + /** + * Removes all whitespace characters from the beginning and end + * of each element in an Array, where the Array is stored as a String. + * + * @param value The String whose whitespace should be trimmed. + * + * @param separator The String that delimits each Array element in the string. + * + * @return Updated String where whitespace was removed from the + * beginning and end of each element. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public static function trimArrayElements(value:String, delimiter:String):String + { + if (value != "" && value != null) + { + var items:Array = splitAndTrim(value, delimiter); + if (items.length > 0) + { + value = items.join(delimiter); + } + } + + return value; + } + + /** + * Returns <code>true</code> if the specified string is + * a single space, tab, carriage return, newline, or formfeed character. + * + * @param str The String that is is being queried. + * + * @return <code>true</code> if the specified string is + * a single space, tab, carriage return, newline, or formfeed character. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public static function isWhitespace(character:String):Boolean + { + switch (character) + { + case " ": + case "\t": + case "\r": + case "\n": + case "\f": + // non breaking space + case "\u00A0": + // line seperator + case "\u2028": + // paragraph seperator + case "\u2029": + // ideographic space + case "\u3000": + return true; + + default: + return false; + } + } + + } +} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/3ceb21b6/frameworks/projects/HTML/as/defaults.css ---------------------------------------------------------------------- diff --git a/frameworks/projects/HTML/as/defaults.css b/frameworks/projects/HTML/as/defaults.css index 7d57d1b..81658b2 100644 --- a/frameworks/projects/HTML/as/defaults.css +++ b/frameworks/projects/HTML/as/defaults.css @@ -25,6 +25,8 @@ { font-family: "Arial"; font-size: 12px; + color: #34495e; + background-color: #fff; } *:active @@ -47,23 +49,31 @@ Button { - background-color: #d8d8d8; - border: 1px solid #000000; - padding: 4px; + color: #fff; + background-color: #1abc9c; + padding: 10px 15px; + font-size: 15px; + font-weight: normal; + line-height: 1.4; + border: none; + border-radius: 4px; + -webkit-transition: border .25s linear, color .25s linear, background-color .25s linear; + transition: border .25s linear, color .25s linear, background-color .25s linear; + + -webkit-font-smoothing: subpixel-antialiased; } Button:hover { - background-color: #9fa0a1; - border: 1px solid #000000; - padding: 4px; + color: #fff; + background-color: #48c9b0; + border-color: #48c9b0; } Button:active { - background-color: #929496; - border: 1px solid #000000; - padding: 4px; + outline: none; + box-shadow: none; } ButtonBar http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/3ceb21b6/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/CSSButtonView.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/CSSButtonView.as b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/CSSButtonView.as index f93ca3e..a40c7a9 100644 --- a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/CSSButtonView.as +++ b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/CSSButtonView.as @@ -18,6 +18,7 @@ //////////////////////////////////////////////////////////////////////////////// package org.apache.flex.html.beads { + import flash.display.DisplayObject; import flash.display.Loader; import flash.display.Shape; import flash.display.SimpleButton; @@ -25,12 +26,14 @@ package org.apache.flex.html.beads import flash.events.Event; import flash.net.URLRequest; - import org.apache.flex.core.BeadViewBase; + import org.apache.flex.core.BeadViewBase; import org.apache.flex.core.IBeadView; import org.apache.flex.core.IStrand; import org.apache.flex.core.ITextModel; import org.apache.flex.core.ValuesManager; + import org.apache.flex.utils.CSSUtils; import org.apache.flex.utils.SolidBorderUtil; + import org.apache.flex.utils.StringTrimmer; /** * The CSSButtonView class is the default view for @@ -103,6 +106,8 @@ package org.apache.flex.html.beads borderStyle = borderStyles[1]; borderThickness = borderStyles[0]; } + else if (borderStyles is String) + borderStyle = borderStyles as String; var value:Object = ValuesManager.valuesImpl.getValue(_strand, "border-style", state); if (value != null) borderStyle = value as String; @@ -112,23 +117,58 @@ package org.apache.flex.html.beads value = ValuesManager.valuesImpl.getValue(_strand, "border-thickness", state); if (value != null) borderThickness = value as uint; + if (borderStyle == "none") + { + borderStyle = "solid"; + borderThickness = 0; + } + + var borderRadius:String; + var borderEllipseWidth:Number = NaN; + var borderEllipseHeight:Number = NaN; + value = ValuesManager.valuesImpl.getValue(_strand, "border-radius", state); + if (value != null) + { + if (value is Number) + borderEllipseWidth = value as Number; + else + { + borderRadius = value as String; + var arr:Array = StringTrimmer.splitAndTrim(borderRadius, "/"); + borderEllipseWidth = CSSUtils.toNumber(arr[0]); + if (arr.length > 1) + borderEllipseHeight = CSSUtils.toNumber(arr[1]); + } + } var padding:Object = ValuesManager.valuesImpl.getValue(_strand, "padding", state); var paddingLeft:Object = ValuesManager.valuesImpl.getValue(_strand, "padding-left", state); var paddingRight:Object = ValuesManager.valuesImpl.getValue(_strand, "padding-right", state); var paddingTop:Object = ValuesManager.valuesImpl.getValue(_strand, "padding-top", state); var paddingBottom:Object = ValuesManager.valuesImpl.getValue(_strand, "padding-bottom", state); - if (paddingLeft == null) paddingLeft = padding; - if (paddingRight == null) paddingRight = padding; - if (paddingTop == null) paddingTop = padding; - if (paddingBottom == null) paddingBottom = padding; + var pl:Number = CSSUtils.getLeftValue(paddingLeft, padding, DisplayObject(_strand).width); + var pr:Number = CSSUtils.getRightValue(paddingRight, padding, DisplayObject(_strand).width); + var pt:Number = CSSUtils.getTopValue(paddingTop, padding, DisplayObject(_strand).height); + var pb:Number = CSSUtils.getBottomValue(paddingBottom, padding, DisplayObject(_strand).height); var backgroundColor:Object = ValuesManager.valuesImpl.getValue(_strand, "background-color", state); + var bgColor:uint; + var bgAlpha:Number = 1; + if (backgroundColor != null) + { + bgColor = CSSUtils.toColorWithAlpha(backgroundColor); + if (bgColor & 0xFF000000) + { + bgAlpha = bgColor >> 24 / 255; + bgColor = bgColor & 0xFFFFFF; + } + } if (borderStyle == "solid") { SolidBorderUtil.drawBorder(sprite.graphics, - 0, 0, sprite.width + Number(paddingLeft) + Number(paddingRight), - sprite.height + Number(paddingTop) + Number(paddingBottom), - borderColor, backgroundColor, borderThickness); + 0, 0, sprite.width + pl + pr, + sprite.height + pt + pb, + borderColor, backgroundColor == null ? null : bgColor, borderThickness, bgAlpha, + borderEllipseWidth, borderEllipseHeight); } } http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/3ceb21b6/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/CSSTextButtonView.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/CSSTextButtonView.as b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/CSSTextButtonView.as index a250dff..fd48998 100644 --- a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/CSSTextButtonView.as +++ b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/CSSTextButtonView.as @@ -37,7 +37,9 @@ package org.apache.flex.html.beads import org.apache.flex.events.Event; import org.apache.flex.events.IEventDispatcher; import org.apache.flex.html.TextButton; - import org.apache.flex.utils.SolidBorderUtil; + import org.apache.flex.utils.CSSUtils; + import org.apache.flex.utils.SolidBorderUtil; + import org.apache.flex.utils.StringTrimmer; /** * The CSSTextButtonView class is the default view for @@ -106,6 +108,12 @@ package org.apache.flex.html.beads shape.graphics.beginFill(0xCCCCCC); shape.graphics.drawRect(0, 0, 10, 10); shape.graphics.endFill(); + upTextField.styleParent = _strand; + downTextField.styleParent = _strand; + overTextField.styleParent = _strand; + upTextField.parentDrawsBackground = true; + downTextField.parentDrawsBackground = true; + overTextField.parentDrawsBackground = true; SimpleButton(value).upState = upSprite; SimpleButton(value).downState = downSprite; SimpleButton(value).overState = overSprite; @@ -125,7 +133,8 @@ package org.apache.flex.html.beads { setupSkin(overSprite, overTextField, "hover"); setupSkin(downSprite, downTextField, "active"); - setupSkin(upSprite, upTextField); + setupSkin(upSprite, upTextField); + updateHitArea(); } private function setupSkin(sprite:Sprite, textField:TextField, state:String = null):void @@ -146,6 +155,8 @@ package org.apache.flex.html.beads borderStyle = borderStyles[1]; borderThickness = borderStyles[0]; } + else if (borderStyles is String) + borderStyle = borderStyles as String; var value:Object = ValuesManager.valuesImpl.getValue(_strand, "border-style", state); if (value != null) borderStyle = value as String; @@ -155,29 +166,66 @@ package org.apache.flex.html.beads value = ValuesManager.valuesImpl.getValue(_strand, "border-thickness", state); if (value != null) borderThickness = value as uint; + if (borderStyle == "none") + { + borderStyle = "solid"; + borderThickness = 0; + } + + var borderRadius:String; + var borderEllipseWidth:Number = NaN; + var borderEllipseHeight:Number = NaN; + value = ValuesManager.valuesImpl.getValue(_strand, "border-radius", state); + if (value != null) + { + if (value is Number) + borderEllipseWidth = value as Number; + else + { + borderRadius = value as String; + var arr:Array = StringTrimmer.splitAndTrim(borderRadius, "/"); + borderEllipseWidth = CSSUtils.toNumber(arr[0]); + if (arr.length > 1) + borderEllipseHeight = CSSUtils.toNumber(arr[1]); + } + } + var padding:Object = ValuesManager.valuesImpl.getValue(_strand, "padding", state); var paddingLeft:Object = ValuesManager.valuesImpl.getValue(_strand, "padding-left", state); var paddingRight:Object = ValuesManager.valuesImpl.getValue(_strand, "padding-right", state); var paddingTop:Object = ValuesManager.valuesImpl.getValue(_strand, "padding-top", state); var paddingBottom:Object = ValuesManager.valuesImpl.getValue(_strand, "padding-bottom", state); - if (paddingLeft == null) paddingLeft = padding; - if (paddingRight == null) paddingRight = padding; - if (paddingTop == null) paddingTop = padding; - if (paddingBottom == null) paddingBottom = padding; + var pl:Number = CSSUtils.getLeftValue(paddingLeft, padding, DisplayObject(_strand).width); + var pr:Number = CSSUtils.getRightValue(paddingRight, padding, DisplayObject(_strand).width); + var pt:Number = CSSUtils.getTopValue(paddingTop, padding, DisplayObject(_strand).height); + var pb:Number = CSSUtils.getBottomValue(paddingBottom, padding, DisplayObject(_strand).height); + var backgroundColor:Object = ValuesManager.valuesImpl.getValue(_strand, "background-color", state); + var bgColor:uint; + var bgAlpha:Number = 1; + if (backgroundColor != null) + { + bgColor = CSSUtils.toColorWithAlpha(backgroundColor); + if (bgColor & 0xFF000000) + { + bgAlpha = bgColor >> 24 / 255; + bgColor = bgColor & 0xFFFFFF; + } + } if (borderStyle == "solid") { var useWidth:Number = Math.max(sw,textField.textWidth); var useHeight:Number = Math.max(sh,textField.textHeight); - if ((useWidth-Number(paddingLeft)-Number(paddingRight)-2*borderThickness) < textField.textWidth) - useWidth = textField.textWidth+Number(paddingLeft)+Number(paddingRight)+2*borderThickness; - if ((useHeight-Number(paddingTop)-Number(paddingBottom)-2*borderThickness) < textField.textHeight) - useHeight = textField.textHeight+Number(paddingTop)+Number(paddingBottom)+2*borderThickness; + if ((useWidth-pl-pr-2*borderThickness) < textField.textWidth) + useWidth = textField.textWidth+pl+pr+2*borderThickness; + if ((useHeight-pt-pb-2*borderThickness) < textField.textHeight) + useHeight = textField.textHeight+pt+pb+2*borderThickness; SolidBorderUtil.drawBorder(sprite.graphics, 0, 0, useWidth, useHeight, - borderColor, backgroundColor, borderThickness); + borderColor, backgroundColor == null ? null : bgColor, borderThickness, bgAlpha, + borderEllipseWidth, borderEllipseHeight); textField.y = (useHeight - textField.textHeight) / 2; textField.x = (useWidth - textField.textWidth) / 2; } @@ -207,16 +255,7 @@ package org.apache.flex.html.beads textField.textColor = Number(textColor); } } - - private function drawSkin() : void - { - setupSkin(overSprite, overTextField, "hover"); - setupSkin(downSprite, downTextField, "active"); - setupSkin(upSprite, upTextField); - - updateHitArea(); - } - + private function textChangeHandler(event:org.apache.flex.events.Event):void { text = textModel.text; @@ -229,7 +268,7 @@ package org.apache.flex.html.beads private function sizeChangeHandler(event:org.apache.flex.events.Event):void { - drawSkin(); + setupSkins(); } private var upTextField:CSSTextField;
