diff --git a/apps/tests/ui/border/border-tests-native.android.ts b/apps/tests/ui/border/border-tests-native.android.ts index 6500c4b74..0d9ad838d 100644 --- a/apps/tests/ui/border/border-tests-native.android.ts +++ b/apps/tests/ui/border/border-tests-native.android.ts @@ -1,34 +1,31 @@ import borderModule = require("ui/border"); -import utils = require("utils/utils"); - -var density = utils.layout.getDisplayDensity(); export function getNativeBorderWidth(border: borderModule.Border): number { - var bkg = (border.android).getBackground(); + var bkg = (border.android).getBackground(); - return bkg && bkg.getStroke ? bkg.getStroke() / density : -1; + return bkg ? bkg.borderWidth : -1; } export function getNativeCornerRadius(border: borderModule.Border): number { - var bkg = (border.android).getBackground(); + var bkg = (border.android).getBackground(); - return bkg && bkg.getCornerRadius ? bkg.getCornerRadius() / density : -1; + return bkg ? bkg.cornerRadius : -1; } export function checkNativeBorderColor(border: borderModule.Border): boolean { - var bkg = (border.android).getBackground(); + var bkg = (border.android).getBackground(); - return border.borderColor && bkg && bkg.getBorderColor && bkg.getBorderColor() === border.borderColor.android; + return border.borderColor && bkg && bkg.borderColor === border.borderColor.android; } export function checkNativeBackgroundColor(border: borderModule.Border): boolean { - var bkg = (border.android).getBackground(); + var bkg = (border.android).getBackground(); - return border.backgroundColor && bkg && bkg.getBackgroundColor && bkg.getBackgroundColor() === border.backgroundColor.android; + return border.backgroundColor && bkg && bkg.backgroundColor === border.backgroundColor.android; } export function checkNativeBackgroundImage(border: borderModule.Border): boolean { - var bkg = (border.android).getBackground(); + var bkg = (border.android).getBackground(); - return bkg && bkg.getBitmap && bkg.getBitmap() !== undefined; + return bkg && bkg.bitmap !== undefined; } \ No newline at end of file diff --git a/apps/tests/ui/border/border-tests.ts b/apps/tests/ui/border/border-tests.ts index 1302ac755..c9e8ce7e5 100644 --- a/apps/tests/ui/border/border-tests.ts +++ b/apps/tests/ui/border/border-tests.ts @@ -80,8 +80,8 @@ export var testBackgroundImage = function () { helper.buildUIAndRunTest(border, function (views: Array) { var page = views[1]; - page.css = "Border { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC;') }"; + page.css = "Border { background-image: url('http://www.google.com/images/errors/logo_sm_2.png') }"; - TKUnit.assert(borderTestsNative.checkNativeBackgroundImage(border), "Style background-image not loaded correctly from data URI."); + TKUnit.assert(borderTestsNative.checkNativeBackgroundImage(border), "Style background-image not loaded correctly."); }); } \ No newline at end of file diff --git a/ui/border/border.android.ts b/ui/border/border.android.ts index 576be53f8..25b1d1cda 100644 --- a/ui/border/border.android.ts +++ b/ui/border/border.android.ts @@ -2,6 +2,7 @@ import proxy = require("ui/core/proxy"); import dependencyObservable = require("ui/core/dependency-observable"); import utils = require("utils/utils"); +import styleModule = require("ui/styling/style"); // merge the exports of the common file with the exports of this file declare var exports; @@ -15,76 +16,108 @@ function onBorderPropertyChanged(data: dependencyObservable.PropertyChangeData) (borderCommon.Border.cornerRadiusProperty.metadata).onSetNativeValue = onBorderPropertyChanged; (borderCommon.Border.borderWidthProperty.metadata).onSetNativeValue = onBorderPropertyChanged; (borderCommon.Border.borderColorProperty.metadata).onSetNativeValue = onBorderPropertyChanged; +//(styleModule.backgroundColorProperty.metadata).onSetNativeValue = onBorderPropertyChanged; export class Border extends borderCommon.Border { - public _updateAndroidBorder(bmp?: android.graphics.Bitmap) { + public _updateAndroidBorder() { if (!this._nativeView) { return; } - (this._nativeView).setBackgroundDrawable(new BorderGradientDrawable(this.borderWidth, - this.borderColor ? this.borderColor.android : android.graphics.Color.TRANSPARENT, - this.backgroundColor ? this.backgroundColor.android : android.graphics.Color.TRANSPARENT, - this.cornerRadius, - bmp)); + var viewGroup = this._nativeView; + + var bkg = viewGroup.getBackground(); + + if (!(bkg instanceof BorderGradientDrawable)) { + bkg = new BorderGradientDrawable(); + viewGroup.setBackground(bkg); + } + + bkg.borderWidth = this.borderWidth; + bkg.cornerRadius = this.cornerRadius; + bkg.borderColor = this.borderColor ? this.borderColor.android : android.graphics.Color.TRANSPARENT; + bkg.backgroundColor = this.backgroundColor ? this.backgroundColor.android : android.graphics.Color.TRANSPARENT; + + var value = this.style._getValue(styleModule.backgroundImageSourceProperty); + bkg.bitmap = value ? value.android : undefined; } } class BorderGradientDrawable extends android.graphics.drawable.GradientDrawable { - private paint: android.graphics.Paint; - private stroke: number; - private cornerRadius: number; - private backgroundColor: number; - private borderColor: number; - private bitmap: android.graphics.Bitmap + private _density = utils.layout.getDisplayDensity(); - constructor(borderWidth: number, borderColor: number, backgroundColor: number, cornerRadius: number, bitmap?: android.graphics.Bitmap) { + constructor() { super(); - this.bitmap = bitmap; - - if (bitmap) { - this.paint = new android.graphics.Paint(); - } else { - this.backgroundColor = backgroundColor; - this.setColor(backgroundColor); - } - - var density = utils.layout.getDisplayDensity(); - - this.stroke = borderWidth * density; - this.borderColor = borderColor; - this.setStroke(this.stroke, this.borderColor); - - this.cornerRadius = cornerRadius * density; - this.setCornerRadius(this.cornerRadius); - return global.__native(this); } - public getStroke(): number { - return this.stroke; + private _borderWidth: number; + get borderWidth(): number { + return this._borderWidth; + } + set borderWidth(value: number) { + if (this._borderWidth !== value) { + this._borderWidth = value; + + this.setStroke(this._borderWidth * this._density, this._borderColor); + } } - public getCornerRadius(): number { - return this.cornerRadius; + private _cornerRadius: number; + get cornerRadius(): number { + return this._cornerRadius; + } + set cornerRadius(value: number) { + if (this._cornerRadius !== value) { + this._cornerRadius = value; + + this.setCornerRadius(this._cornerRadius); + } } - public getBackgroundColor(): number { - return this.backgroundColor; + private _borderColor: number; + get borderColor(): number { + return this._borderColor; + } + set borderColor(value: number) { + if (this._borderColor !== value) { + this._borderColor = value; + + this.setStroke(this._borderWidth * this._density, this._borderColor); + } } - public getBorderColor(): number { - return this.borderColor; + private _backgroundColor: number; + get backgroundColor(): number { + return this._backgroundColor; + } + set backgroundColor(value: number) { + if (this._backgroundColor !== value) { + this._backgroundColor = value; + + this.setColor(this._backgroundColor); + } } - public getBitmap(): android.graphics.Bitmap { - return this.bitmap; + private _bitmap: android.graphics.Bitmap + get bitmap(): android.graphics.Bitmap { + return this._bitmap; + } + set bitmap(value: android.graphics.Bitmap) { + if (this._bitmap !== value) { + this._bitmap = value; + + this.invalidateSelf(); + } } public draw(canvas: android.graphics.Canvas): void { - if (this.paint) { - canvas.drawBitmap(this.bitmap, this.stroke, this.stroke, this.paint); + if (this.bitmap) { + this.setColor(android.graphics.Color.TRANSPARENT); + + var stroke = this._borderWidth * this._density; + canvas.drawBitmap(this.bitmap, stroke, stroke, undefined); } super.draw(canvas); } diff --git a/ui/border/border.d.ts b/ui/border/border.d.ts index 560af09a9..6f8770306 100644 --- a/ui/border/border.d.ts +++ b/ui/border/border.d.ts @@ -30,7 +30,7 @@ declare module "ui/border" { borderColor: color.Color; //@private - _updateAndroidBorder(bmp?: android.graphics.Bitmap); + _updateAndroidBorder(); //@endprivate } } \ No newline at end of file diff --git a/ui/styling/stylers.android.ts b/ui/styling/stylers.android.ts index 836c5c0bb..9c12833d5 100644 --- a/ui/styling/stylers.android.ts +++ b/ui/styling/stylers.android.ts @@ -356,40 +356,35 @@ export class BorderStyler implements definition.stylers.Styler { border._updateAndroidBorder(); } + private static getNativeBackgroundValue(view: view.View): any { + return view.android.getBackground(); + } + //Background image methods private static setBackgroundImageSourceProperty(view: view.View, newValue: any) { var border = view; - border._updateAndroidBorder(newValue); + border._updateAndroidBorder(); } private static resetBackgroundImageSourceProperty(view: view.View, nativeValue: any) { var border = view; - if (types.isDefined(nativeValue)) { - (view.android).setBackgroundDrawable(nativeValue); - border._updateAndroidBorder(); - } + border._updateAndroidBorder(); } private static getNativeBackgroundImageSourceValue(view: view.View): any { - var drawable = view.android.getBackground(); - - if (drawable instanceof android.graphics.drawable.GradientDrawable) { - return drawable; - } - - return undefined; + return view.android.getBackground(); } public static registerHandlers() { style.registerHandler(style.backgroundColorProperty, new stylersCommon.StylePropertyChangedHandler( BorderStyler.setBackgroundProperty, - BorderStyler.resetBackgroundProperty), "Border"); + BorderStyler.resetBackgroundProperty, + BorderStyler.getNativeBackgroundValue), "Border"); style.registerHandler(style.backgroundImageSourceProperty, new stylersCommon.StylePropertyChangedHandler( BorderStyler.setBackgroundImageSourceProperty, BorderStyler.resetBackgroundImageSourceProperty, BorderStyler.getNativeBackgroundImageSourceValue), "Border"); - } }