diff --git a/CrossPlatformModules.csproj b/CrossPlatformModules.csproj
index c98199ee1..0baa7d804 100644
--- a/CrossPlatformModules.csproj
+++ b/CrossPlatformModules.csproj
@@ -657,8 +657,12 @@
-
-
+
+ fonts-test.xml
+
+
+ background-test.xml
+
Designer
@@ -1665,7 +1669,7 @@
False
-
+
\ No newline at end of file
diff --git a/apps/tests/pages/background-test.ts b/apps/tests/pages/background-test.ts
index ba507f48f..9c82bb920 100644
--- a/apps/tests/pages/background-test.ts
+++ b/apps/tests/pages/background-test.ts
@@ -1,15 +1,12 @@
import observable = require("data/observable");
import pages = require("ui/page");
-
-var vm = new observable.Observable();
-// Event handler for Page "loaded" event attached in main-page.xml
-export function pageLoaded(args: observable.EventData) {
- vm.set("style", "background-image: url('~/pages/test2.png'); \nborder-color: green; \nborder-radius: 20; \nborder-width: 4;");
- // Get the event sender
- var page = args.object;
- page.bindingContext = vm;
+import view = require("ui/core/view");
+export function applyTap(args) {
+ var el = view.getViewById(view.getAncestor(args.object, "Page"), "test-element");
+ (el).style = args.object.tag;
}
-export function applyTap(args){
- args.object.parent.style = vm.get("style");
+export function resetTap(args) {
+ var el = view.getViewById(view.getAncestor(args.object, "Page"), "test-element");
+ (el).style = "";
}
\ No newline at end of file
diff --git a/apps/tests/pages/background-test.xml b/apps/tests/pages/background-test.xml
index 01e51e5e7..018f7ed2a 100644
--- a/apps/tests/pages/background-test.xml
+++ b/apps/tests/pages/background-test.xml
@@ -1,6 +1,31 @@
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ui/styling/background-common.ts b/ui/styling/background-common.ts
index 8dba89aca..7521526b2 100644
--- a/ui/styling/background-common.ts
+++ b/ui/styling/background-common.ts
@@ -1,11 +1,7 @@
import imageSource = require("image-source");
import colorModule = require("color");
-import viewModule = require("ui/core/view");
-import style = require("ui/styling/style");
import types = require("utils/types");
-import view = require("ui/core/view");
import enums = require("ui/enums");
-import utils = require("utils/utils");
import dts = require("ui/styling/background");
import cssValue = require("js-libs/reworkcss-value");
@@ -64,7 +60,6 @@ export class Background implements dts.Background {
posY: 0,
}
-
// repeat
if (this.repeat) {
switch (this.repeat.toLowerCase()) {
@@ -89,7 +84,7 @@ export class Background implements dts.Background {
// size
if (this.size) {
let values = cssValue.parse(this.size);
- console.log("this.size values: " + JSON.stringify(values));
+
if (values.length === 2) {
let vx = values[0];
let vy = values[1];
@@ -132,8 +127,6 @@ export class Background implements dts.Background {
// position
if (this.position) {
let values = cssValue.parse(this.position);
- console.log("this.position values: " + JSON.stringify(values));
-
let spaceX = width - imageWidth;
let spaceY = height - imageHeight;
diff --git a/ui/styling/background.android.ts b/ui/styling/background.android.ts
index 4e0c906c6..0b33ab5cb 100644
--- a/ui/styling/background.android.ts
+++ b/ui/styling/background.android.ts
@@ -1,10 +1,3 @@
-import imageSource = require("image-source");
-import colorModule = require("color");
-import viewModule = require("ui/core/view");
-import style = require("ui/styling/style");
-import types = require("utils/types");
-import view = require("ui/core/view");
-import enums = require("ui/enums");
import utils = require("utils/utils");
import common = require("ui/styling/background-common");
import dts = require("ui/styling/background");
@@ -81,7 +74,6 @@ export module ad {
if (this.background && !this.background.isEmpty() && boundsWidth > 0 && boundsHeight > 0) {
var radius = this._cornerRadius * this._density;
var stroke = this._borderWidth * this._density;
- var bounds = this.getBounds();
// TODO: check this path
var path = new android.graphics.Path();
diff --git a/ui/styling/background.d.ts b/ui/styling/background.d.ts
index 83704681a..dbbdde074 100644
--- a/ui/styling/background.d.ts
+++ b/ui/styling/background.d.ts
@@ -2,11 +2,6 @@ declare module "ui/styling/background" {
import imageSource = require("image-source");
import colorModule = require("color");
import viewModule = require("ui/core/view");
- import style = require("ui/styling/style");
- import types = require("utils/types");
- import view = require("ui/core/view");
- import enums = require("ui/enums");
- import utils = require("utils/utils");
export interface BackgroundDrawParams {
repeatX: boolean;
diff --git a/ui/styling/background.ios.ts b/ui/styling/background.ios.ts
index d06c90ab7..d8c3527be 100644
--- a/ui/styling/background.ios.ts
+++ b/ui/styling/background.ios.ts
@@ -1,13 +1,6 @@
-import imageSource = require("image-source");
-import colorModule = require("color");
import viewModule = require("ui/core/view");
import style = require("ui/styling/style");
-import types = require("utils/types");
-import view = require("ui/core/view");
-import enums = require("ui/enums");
-import utils = require("utils/utils");
import common = require("ui/styling/background-common");
-import dts = require("ui/styling/background");
declare var exports;
require("utils/module-merge").merge(common, exports);
@@ -19,14 +12,11 @@ export module ios {
var result: UIColor;
if (background && !background.isEmpty() && frame.size.width > 0 && frame.size.height) {
- console.log("Frame: " + NSStringFromCGRect(frame));
-
if (!background.image) {
result = background.color.ios;
}
else {
var img = background.image.ios;
- console.log("ImageSize: " + NSStringFromCGSize(img.size));
var params = background.getDrawParams(frame.size.width, frame.size.height);
if (params.sizeX > 0 && params.sizeY > 0) {
@@ -53,19 +43,16 @@ export module ios {
var h = params.repeatY ? frame.size.height : img.size.height;
CGContextSetPatternPhase(context, CGSizeMake(params.posX, params.posY));
- console.log("context" + context);
params.posX = params.repeatX ? 0 : params.posX;
params.posY = params.repeatY ? 0 : params.posY;
var patternRect = CGRectMake(params.posX, params.posY, w, h);
- console.log("patternRect: " + NSStringFromCGRect(patternRect));
img.drawAsPatternInRect(patternRect);
}
var bkgImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
- console.log("bkgImage.size: " + NSStringFromCGSize(bkgImage.size));
result = UIColor.alloc().initWithPatternImage(bkgImage);
}
return result;
diff --git a/ui/styling/font.ios.ts b/ui/styling/font.ios.ts
index 022ba4648..26f45bd07 100644
--- a/ui/styling/font.ios.ts
+++ b/ui/styling/font.ios.ts
@@ -96,9 +96,6 @@ function resolveFontDescriptor(fontFamilyValue: string, symbolicTraits: number):
// This is an actual font - don't apply symbolic traits
result = UIFontDescriptor.fontDescriptorWithNameSize(fontFamily, 0);
}
- else {
- // TODO: Handle custom fonts when they are supported.
- }
if (result) {
return result;
diff --git a/ui/styling/stylers.android.ts b/ui/styling/stylers.android.ts
index cc6be6c1a..3b17aeb7b 100644
--- a/ui/styling/stylers.android.ts
+++ b/ui/styling/stylers.android.ts
@@ -15,7 +15,8 @@ import background = require("ui/styling/background");
declare var exports;
require("utils/module-merge").merge(stylersCommon, exports);
-function onBorderPropertyChanged(v: view.View) {
+var _defaultBackgrounds = new Map();
+function onBackgroundOrBorderPropertyChanged(v: view.View) {
if (!v._nativeView) {
return;
}
@@ -28,6 +29,11 @@ function onBorderPropertyChanged(v: view.View) {
var bkg = nativeView.getBackground();
if (!(bkg instanceof background.ad.BorderGradientDrawable)) {
bkg = new background.ad.BorderGradientDrawable();
+ let viewClass = types.getClass(view);
+ if (!_defaultBackgrounds.has(viewClass)) {
+ _defaultBackgrounds.set(viewClass, nativeView.getBackground());
+ }
+
nativeView.setBackground(bkg);
}
@@ -40,49 +46,23 @@ function onBorderPropertyChanged(v: view.View) {
bkg.borderColor = v.borderColor ? v.borderColor.android : android.graphics.Color.TRANSPARENT;
bkg.background = backgroundValue;
}
+ else {
+ // reset the value with the default native value
+ let viewClass = types.getClass(view);
+ if (_defaultBackgrounds.has(viewClass)) {
+ v.android.setBackgroundDrawable(_defaultBackgrounds.get(viewClass));
+ }
+ }
}
export class DefaultStyler implements definition.stylers.Styler {
- //Background image methods
- private static setBackgroundInternalProperty(view: view.View, newValue: any) {
- onBorderPropertyChanged(view);
+ //Background and borders methods
+ private static setBackgroundBorderProperty(view: view.View, newValue: any, defaultValue: any) {
+ onBackgroundOrBorderPropertyChanged(view);
}
- private static resetBackgroundInternalProperty(view: view.View, nativeValue: any) {
- if (types.isDefined(nativeValue)) {
- (view.android).setBackgroundDrawable(nativeValue)
- }
- }
-
- private static getNativeBackgroundInternalProperty(view: view.View): any {
- return view.android.getBackground();
- }
-
- //Border width methods
- private static setBorderWidthProperty(view: view.View, newValue: any) {
- onBorderPropertyChanged(view);
- }
-
- private static resetBorderWidthProperty(view: view.View, nativeValue: any) {
- //TODO
- }
-
- //Border color methods
- private static setBorderColorProperty(view: view.View, newValue: any) {
- onBorderPropertyChanged(view);
- }
-
- private static resetBorderColorProperty(view: view.View, nativeValue: any) {
- //TODO
- }
-
- //Corner radius methods
- private static setBorderRadiusProperty(view: view.View, newValue: any) {
- onBorderPropertyChanged(view);
- }
-
- private static resetBorderRadiusProperty(view: view.View, nativeValue: any) {
- //TODO
+ private static resetBackgroundBorderProperty(view: view.View, nativeValue: any) {
+ onBackgroundOrBorderPropertyChanged(view);
}
//Visibility methods
@@ -123,11 +103,6 @@ export class DefaultStyler implements definition.stylers.Styler {
}
public static registerHandlers() {
- style.registerHandler(style.backgroundInternalProperty, new stylersCommon.StylePropertyChangedHandler(
- DefaultStyler.setBackgroundInternalProperty,
- DefaultStyler.resetBackgroundInternalProperty,
- DefaultStyler.getNativeBackgroundInternalProperty));
-
style.registerHandler(style.visibilityProperty, new stylersCommon.StylePropertyChangedHandler(
DefaultStyler.setVisibilityProperty,
DefaultStyler.resetVisibilityProperty));
@@ -144,17 +119,16 @@ export class DefaultStyler implements definition.stylers.Styler {
DefaultStyler.setMinHeightProperty,
DefaultStyler.resetMinHeightProperty))
- style.registerHandler(style.borderWidthProperty, new stylersCommon.StylePropertyChangedHandler(
- DefaultStyler.setBorderWidthProperty,
- DefaultStyler.resetBorderWidthProperty));
+ // Use the same handler for all background/border properties
+ // Note: There is no default value getter - the default value is handled in onBackgroundOrBorderPropertyChanged
+ var borderHandler = new stylersCommon.StylePropertyChangedHandler(
+ DefaultStyler.setBackgroundBorderProperty,
+ DefaultStyler.resetBackgroundBorderProperty);
- style.registerHandler(style.borderColorProperty, new stylersCommon.StylePropertyChangedHandler(
- DefaultStyler.setBorderColorProperty,
- DefaultStyler.resetBorderColorProperty));
-
- style.registerHandler(style.borderRadiusProperty, new stylersCommon.StylePropertyChangedHandler(
- DefaultStyler.setBorderRadiusProperty,
- DefaultStyler.resetBorderRadiusProperty));
+ style.registerHandler(style.backgroundInternalProperty, borderHandler);
+ style.registerHandler(style.borderWidthProperty, borderHandler);
+ style.registerHandler(style.borderColorProperty, borderHandler);
+ style.registerHandler(style.borderRadiusProperty, borderHandler);
}
}