Frobit setting inline style from code

apps/tests/pages/background-test.ts

@@ -1,10 +1,13 @@
 import view = require("ui/core/view");
+import pages = require("ui/page");
+
 export function applyTap(args) {
-    var el = view.getViewById(view.getAncestor(args.object, "Page"), "test-element");
+    var page = <pages.Page>view.getAncestor(args.object, "Page");
-    (<any>el).style = args.object.tag;
+    var css = "#test-element { " + args.object.tag + " }";
+    page.css = css;
 }
 
 export function resetTap(args) {
-    var el = view.getViewById(view.getAncestor(args.object, "Page"), "test-element");
+    var page = <pages.Page>view.getAncestor(args.object, "Page");
-    (<any>el).style = "";
+    page.css = "";
 }

apps/tests/ui/style/style-properties-tests.ts

@@ -310,7 +310,7 @@ export function test_setting_font_shorthand_property() {
 
 function test_font_shorthand_property(short: string, family: string, size: number, style: string, weight:string) {
     var testView = new buttonModule.Button();
-    (<any>testView).style = "font: " + short;
+    (<any>testView.style)["font"] = short;
 
     TKUnit.assertEqual(testView.style.fontFamily, family, "style.fontFamily");
     TKUnit.assertEqual(testView.style.fontStyle, style, "style.fontStyle");

apps/tests/ui/style/style-tests.ts

@@ -748,19 +748,12 @@ export function test_setInlineStyle_setsLocalValues() {
     });
 }
 
-export function test_setInlineStyle_resetsLocalValues() {
+export function test_setStyle_throws() {
     var testButton = new buttonModule.Button();
-    testButton.text = "Test";
-    testButton.style.fontSize = 10;
-    var stack = new stackModule.StackLayout();
-    stack.addChild(testButton);
 
-    helper.buildUIAndRunTest(stack, function (views: Array<viewModule.View>) {
+    TKUnit.assertThrows(function () {
-        (<any>testButton)._applyInlineStyle("color: red;");
+        (<any>testButton).style = "background-color: red;";
-        helper.assertViewColor(testButton, "#FF0000", dependencyObservableModule.ValueSource.Local);
+    }, "View.style property is read-only.");
-        TKUnit.assert(types.isUndefined(testButton.style.fontSize), "Setting inline style should reset font size");
-        TKUnit.assertEqual(testButton.style._getValueSource(styling.properties.fontSizeProperty), dependencyObservableModule.ValueSource.Default, "valueSource");
-    });
 }
 
 export var test_CSS_isAppliedOnPage = function () {

apps/ui-tests-app/pages/background.ts

@@ -1,10 +1,13 @@
 import view = require("ui/core/view");
+import pages = require("ui/page");
+
 export function applyTap(args) {
-    var el = view.getViewById(view.getAncestor(args.object, "Page"), "test-element");
+    var page = <pages.Page>view.getAncestor(args.object, "Page");
-    (<any>el).style = args.object.tag;
+    var css = "#test-element { " + args.object.tag + " }";
+    page.css = css;
 }
 
 export function resetTap(args) {
-    var el = view.getViewById(view.getAncestor(args.object, "Page"), "test-element");
+    var page = <pages.Page>view.getAncestor(args.object, "Page");
-    (<any>el).style = "";
+    page.css = "";
 }

text/span-common.ts

@@ -157,7 +157,7 @@ export class Span extends bindable.Bindable implements definition.Span, view.App
     }
 
     public updateSpanModifiers(parent: formattedString.FormattedString) {
-        // a virtual method overriden in platform specific implementations.
+        // a virtual method overridden in platform specific implementations.
         if (this._isInEditMode) {
             throw new Error("Cannot update span modifiers during update!");
         }
@@ -180,7 +180,7 @@ export class Span extends bindable.Bindable implements definition.Span, view.App
         this.updateAndNotify();
     }
 
-    public applyXmlAttribute(attribute, value): boolean {
+    public _applyXmlAttribute(attribute, value): boolean {
         if (attribute === "fontAttributes") {
             if (value.indexOf(",")) {
                 var fontAttr = value.split(",");

ui/builder/component-builder.ts

@@ -174,8 +174,8 @@ export function setPropertyValue(instance: view.View, instanceModule: Object, ex
     } else {
         var attrHandled = false;
 
-        if ((<any>instance).applyXmlAttribute) {
+        if ((<any>instance)._applyXmlAttribute) {
-            attrHandled = (<any>instance).applyXmlAttribute(propertyName, propertyValue);
+            attrHandled = (<any>instance)._applyXmlAttribute(propertyName, propertyValue);
         }
 
         if (!attrHandled) {

ui/core/view-common.ts

@@ -389,7 +389,7 @@ export class View extends proxy.ProxyObject implements definition.View {
         return this._style;
     }
     set style(value) {
-        this._applyInlineStyle(value);
+        throw new Error("View.style property is read-only.");
     }
 
     get isLayoutValid(): boolean {
@@ -763,7 +763,6 @@ export class View extends proxy.ProxyObject implements definition.View {
         if (types.isString(inlineStyle)) {
             try {
                 this.style._beginUpdate();
-                this.style._resetLocalValues();
                 styleScope.applyInlineSyle(this, <string>inlineStyle);
             } finally {
                 this.style._endUpdate();
@@ -942,6 +941,15 @@ export class View extends proxy.ProxyObject implements definition.View {
         this._requestedVisualState = state;
     }
 
+    public _applyXmlAttribute(attribute, value): boolean {
+        if (attribute === "style") {
+            this._applyInlineStyle(value);
+            return true;
+        }
+
+        return false;
+    }
+
     public _updateLayout() {
         // needed for iOS.
     }

ui/core/view.d.ts

@@ -94,7 +94,7 @@ declare module "ui/core/view" {
      * This class is the base class for all UI components. 
      * A View occupies a rectangular area on the screen and is responsible for drawing and layouting of all UI components within. 
      */
-    export class View extends proxy.ProxyObject {
+    export class View extends proxy.ProxyObject implements ApplyXmlAttributes {
         /**
          * Gets or sets the corner radius of the view.
          */
@@ -441,6 +441,8 @@ declare module "ui/core/view" {
 
         _updateLayout(): void;
 
+        _applyXmlAttribute(attribute, value): boolean;
+
         /**
          * Called my measure method to cache measureSpecs.
          */
@@ -515,6 +517,6 @@ declare module "ui/core/view" {
          * @param attrValue - the value of the attribute (bold)
          * Should return true if this attribute is handled and there is no need default handler to process it.
          */
-        applyXmlAttribute(attributeName: string, attrValue: any): boolean;
+        _applyXmlAttribute(attributeName: string, attrValue: any): boolean;
     }
 }

ui/layouts/grid-layout/grid-layout.ts

@@ -446,7 +446,7 @@ export class GridLayout extends layouts.Layout implements definition.GridLayout,
         }
     }
 
-    applyXmlAttribute(attributeName: string, attributeValue: any): boolean {
+    _applyXmlAttribute(attributeName: string, attributeValue: any): boolean {
         if (attributeName === "columns") {
             this.setColumns(attributeValue);
             return true;
@@ -456,7 +456,7 @@ export class GridLayout extends layouts.Layout implements definition.GridLayout,
             return true;
         }
 
-        return false;
+        return super._applyXmlAttribute(attributeName, attributeValue);
     }
 
     private static parseItemSpecs(value: string): Array<ItemSpec> {

ui/styling/style.ts

@@ -25,7 +25,7 @@ var noStylingClasses = {};
 
 export class Style extends observable.DependencyObservable implements styling.Style {
     private _view: view.View;
-    private _inUpdate = false;
+    private _updateCounter = 0;
     private _nativeSetters = new Map<dependencyObservable.Property, any>();
 
     get color(): color.Color {
@@ -265,14 +265,19 @@ export class Style extends observable.DependencyObservable implements styling.St
     }
 
     public _beginUpdate() {
-        this._inUpdate = true;
+        this._updateCounter++;
     }
 
     public _endUpdate() {
-        this._inUpdate = false;
+        this._updateCounter--;
+        if (this._updateCounter < 0) {
+            throw new Error("style._endUpdate() called, but no update is in progress.");
+        }
+        if (this._updateCounter === 0) {
             this._nativeSetters.forEach((newValue, property, map) => { this._applyStyleProperty(property, newValue); });
             this._nativeSetters.clear();
         }
+    }
 
     public _resetCssValues() {
         var that = this;
@@ -334,7 +339,7 @@ export class Style extends observable.DependencyObservable implements styling.St
     }
 
     private _applyStyleProperty(property: dependencyObservable.Property, newValue: any) {
-        if (this._inUpdate) {
+        if (this._updateCounter > 0) {
             this._nativeSetters.set(property, newValue);
             return;
         }
@@ -486,6 +491,7 @@ function onBackgroundImagePropertyChanged(data: observable.PropertyChangeData) {
     var style = <Style>data.object;
     var url: string = data.newValue;
     var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
+    var isValid = false;
 
     if (types.isString(data.newValue)) {
         var pattern: RegExp = /url\(('|")(.*?)\1\)/;
@@ -498,9 +504,11 @@ function onBackgroundImagePropertyChanged(data: observable.PropertyChangeData) {
             var base64Data = url.split(",")[1];
             if (types.isDefined(base64Data)) {
                 style._setValue(backgroundInternalProperty, currentBackground.withImage(imageSource.fromBase64(base64Data)));
+                isValid = true;
             }
         } else if (utils.isFileOrResourcePath(url)) {
             style._setValue(backgroundInternalProperty, currentBackground.withImage(imageSource.fromFileOrResource(url)));
+            isValid = true;
         } else if (url.indexOf("http") !== -1) {
             style["_url"] = url;
             style._setValue(backgroundInternalProperty, currentBackground.withImage(undefined));
@@ -509,8 +517,13 @@ function onBackgroundImagePropertyChanged(data: observable.PropertyChangeData) {
                     style._setValue(backgroundInternalProperty, currentBackground.withImage(r));
                 }
             });
+            isValid = true;
         }
     }
+
+    if (!isValid) {
+        style._setValue(backgroundInternalProperty, currentBackground.withImage(undefined));
+    }
 }
 
 function onBackgroundColorPropertyChanged(data: observable.PropertyChangeData) {