AffectsLayout done only for iOS. Android will invalidate itself when needed. (#2307)

tests/app/app/style_props.ts

@@ -1,13 +1,16 @@
 import style = require("ui/styling/style");
-import observable = require("ui/core/dependency-observable");
+import {PropertyMetadata, PropertyMetadataSettings} from "ui/core/dependency-observable";
 import styleProperty = require("ui/styling/style-property");
 import view = require("ui/core/view");
 import buttonModule = require("ui/button");
 import pages = require("ui/page");
 import stackLayoutDef = require("ui/layouts/stack-layout");
+import {isAndroid} from "platform";
 
-export var fontFamilyProperty = new styleProperty.Property("fontFamily", "font-family",
-    new observable.PropertyMetadata(undefined, observable.PropertyMetadataSettings.AffectsLayout));
+// on Android we explicitly set propertySettings to None because android will invalidate its layout (skip unnecessary native call).
+let AffectsLayout = isAndroid ? PropertyMetadataSettings.None : PropertyMetadataSettings.AffectsLayout;
+
+export var fontFamilyProperty = new styleProperty.Property("fontFamily", "font-family", new PropertyMetadata(undefined, AffectsLayout));
 
 export class MyTextViewStyler implements style.Styler {
     public static setFontFamilyProperty(view: view.View, newValue: any) {

tests/app/ui/label/label-tests.ts

@@ -152,14 +152,6 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
         }
     }
 
-    public test_Set_TextWrap_TNS() {
-        var label = this.testView;
-        label.textWrap = true;
-
-        var actual = label._getValue(LabelModule.Label.textWrapProperty);
-        TKUnit.assertEqual(actual, true);
-    }
-
     public test_Set_TextWrap_Native() {
         var testLabel = this.testView;
         testLabel.textWrap = true;

tns-core-modules/ui/activity-indicator/activity-indicator-common.ts

@@ -1,15 +1,11 @@
-import view = require("ui/core/view");
+import {View} from "ui/core/view";
 import definition = require("ui/activity-indicator");
-import dependencyObservable = require("ui/core/dependency-observable");
+import {PropertyMetadataSettings, Property} from "ui/core/dependency-observable";
 import proxy = require("ui/core/proxy");
 
-var busyProperty = new dependencyObservable.Property(
-    "busy",
-    "ActivityIndicator",
-    new proxy.PropertyMetadata(false, dependencyObservable.PropertyMetadataSettings.AffectsLayout)
-    );
+let busyProperty = new Property("busy", "ActivityIndicator", new proxy.PropertyMetadata(false));
 
-export class ActivityIndicator extends view.View implements definition.ActivityIndicator {
+export class ActivityIndicator extends View implements definition.ActivityIndicator {
 
     public static busyProperty = busyProperty;
 

tns-core-modules/ui/activity-indicator/activity-indicator.ios.ts

@@ -9,11 +9,16 @@ function onBusyPropertyChanged(data: dependencyObservable.PropertyChangeData) {
     if (!indicator.ios) {
         return;
     }
-
+ 
+ let activityIndicator = indicator.ios;
     if (data.newValue) {
-        indicator.ios.startAnimating();
+        activityIndicator.startAnimating();
     } else {
-        indicator.ios.stopAnimating();
+        activityIndicator.stopAnimating();
+    }
+
+    if (activityIndicator.hidesWhenStopped) {
+        indicator.requestLayout();
     }
 }
 

tns-core-modules/ui/button/button-common.ts

@@ -1,11 +1,16 @@
-import dependencyObservable = require("ui/core/dependency-observable");
+import {Property, PropertyMetadataSettings, PropertyChangeData} from "ui/core/dependency-observable";
 import view = require("ui/core/view");
 import definition = require("ui/button");
 import proxy = require("ui/core/proxy");
 import formattedString = require("text/formatted-string");
 import observable = require("data/observable");
 import * as weakEventListenerModule from "ui/core/weak-event-listener";
-import * as enumsModule from "ui/enums";
+import {WhiteSpace} from "ui/enums";
+
+import {isAndroid} from "platform";
+
+// on Android we explicitly set propertySettings to None because android will invalidate its layout (skip unnecessary native call).
+let AffectsLayout = isAndroid ? PropertyMetadataSettings.None : PropertyMetadataSettings.AffectsLayout;
 
 var weakEvents: typeof weakEventListenerModule;
 function ensureWeakEvents() {
@@ -14,35 +19,20 @@ function ensureWeakEvents() {
     }
 }
 
-var enums: typeof enumsModule;
-function ensureEnums() {
-    if (!enums) {
-        enums = require("ui/enums");
-    }
-}
+const textProperty = new Property("text", "Button", new proxy.PropertyMetadata("", AffectsLayout));
+const formattedTextProperty = new Property("formattedText", "Button", new proxy.PropertyMetadata("", AffectsLayout));
+const textWrapProperty = new Property("textWrap", "Button", new proxy.PropertyMetadata(false, AffectsLayout));
 
-var textProperty = new dependencyObservable.Property(
-    "text",
-    "Button",
-    new proxy.PropertyMetadata("", dependencyObservable.PropertyMetadataSettings.AffectsLayout)
-);
-
-var formattedTextProperty = new dependencyObservable.Property(
-    "formattedText",
-    "Button",
-    new proxy.PropertyMetadata("", dependencyObservable.PropertyMetadataSettings.AffectsLayout)
-);
-
-function onTextPropertyChanged(data: dependencyObservable.PropertyChangeData) {
+function onTextPropertyChanged(data: PropertyChangeData) {
     var button = <Button>data.object;
-    
+
     button._onTextPropertyChanged(data);
 
     button.style._updateTextDecoration();
-    button.style._updateTextTransform();   
+    button.style._updateTextTransform();
 }
 
-function onFormattedTextPropertyChanged(data: dependencyObservable.PropertyChangeData) {
+function onFormattedTextPropertyChanged(data: PropertyChangeData) {
     var button = <Button>data.object;
     button._onFormattedTextPropertyChanged(data);
 }
@@ -55,12 +45,7 @@ export class Button extends view.View implements definition.Button {
     public static tapEvent = "tap";
     public static textProperty = textProperty;
     public static formattedTextProperty = formattedTextProperty;
-
-    public static textWrapProperty = new dependencyObservable.Property(
-        "textWrap",
-        "Button",
-        new proxy.PropertyMetadata(false, dependencyObservable.PropertyMetadataSettings.AffectsLayout)
-    );
+    public static textWrapProperty = textWrapProperty;
 
     public _onBindingContextChanged(oldValue: any, newValue: any) {
         super._onBindingContextChanged(oldValue, newValue);
@@ -105,6 +90,13 @@ export class Button extends view.View implements definition.Button {
         this._setValue(Button.textWrapProperty, value);
     }
 
+    get whiteSpace(): string {
+        return this.style.whiteSpace;
+    }
+    set whiteSpace(value: string) {
+        this.style.whiteSpace = value;
+    }
+
     private onFormattedTextChanged(eventData: observable.PropertyChangeData) {
         var value = <formattedString.FormattedString>eventData.value;
         this._setFormattedTextPropertyToNative(value);
@@ -112,7 +104,7 @@ export class Button extends view.View implements definition.Button {
         this._onPropertyChangedFromNative(Button.textProperty, value.toString());
     }
 
-    public _onTextPropertyChanged(data: dependencyObservable.PropertyChangeData) {
+    public _onTextPropertyChanged(data: PropertyChangeData) {
         //
     }
 
@@ -120,7 +112,7 @@ export class Button extends view.View implements definition.Button {
         //
     }
 
-    public _onFormattedTextPropertyChanged(data: dependencyObservable.PropertyChangeData) {
+    public _onFormattedTextPropertyChanged(data: PropertyChangeData) {
         var newValue = <formattedString.FormattedString>data.newValue;
         if (newValue) {
             newValue.parent = this;
@@ -136,11 +128,9 @@ export class Button extends view.View implements definition.Button {
     }
 }
 
-function onTextWrapPropertyChanged(data: dependencyObservable.PropertyChangeData) {
+function onTextWrapPropertyChanged(data: PropertyChangeData) {
     var v = <view.View>data.object;
-    ensureEnums();
-
-    v.style.whiteSpace = data.newValue ? enums.WhiteSpace.normal : enums.WhiteSpace.nowrap;
+    v.style.whiteSpace = data.newValue ? WhiteSpace.normal : WhiteSpace.nowrap;
 }
 
 (<proxy.PropertyMetadata>Button.textWrapProperty.metadata).onSetNativeValue = onTextWrapPropertyChanged;

tns-core-modules/ui/button/button.d.ts

@@ -51,6 +51,12 @@ declare module "ui/button" {
          */
         formattedText: formattedString.FormattedString;
 
+        /**
+         * Gets or sets text whiteSpace.
+         * "normal" or "nowrap"
+         */
+        whiteSpace: string;
+
         /**
          * A basic method signature to hook an event listener (shortcut alias to the addEventListener method).
          * @param eventNames - String corresponding to events (e.g. "propertyChange"). Optionally could be used more events separated by `,` (e.g. "propertyChange", "change"). 

tns-core-modules/ui/label/label-common.ts

@@ -1,37 +1,13 @@
 import definition = require("ui/label");
-import dependencyObservable = require("ui/core/dependency-observable");
-import proxy = require("ui/core/proxy");
 import textBase = require("ui/text-base");
-import view = require("ui/core/view");
-import * as enumsModule from "ui/enums";
-
-var enums: typeof enumsModule;
-function ensureEnums() {
-    if (!enums) {
-        enums = require("ui/enums");
-    }
-}
+import {WhiteSpace} from "ui/enums";
 
 export class Label extends textBase.TextBase implements definition.Label {
-    public static textWrapProperty = new dependencyObservable.Property(
-        "textWrap",
-        "Label",
-        new proxy.PropertyMetadata(false, dependencyObservable.PropertyMetadataSettings.AffectsLayout)
-        );
 
     get textWrap(): boolean {
-        return this._getValue(Label.textWrapProperty);
+        return this.style.whiteSpace === WhiteSpace.normal;
     }
     set textWrap(value: boolean) {
-        this._setValue(Label.textWrapProperty, value);
+        this.style.whiteSpace = value ? WhiteSpace.normal : WhiteSpace.nowrap;
     }
-}
-
-function onTextWrapPropertyChanged(data: dependencyObservable.PropertyChangeData) {
-    var v = <view.View>data.object;
-    ensureEnums();
-
-    v.style.whiteSpace = data.newValue ? enums.WhiteSpace.normal : enums.WhiteSpace.nowrap;
-}
-
-(<proxy.PropertyMetadata>Label.textWrapProperty.metadata).onSetNativeValue = onTextWrapPropertyChanged;
+}

tns-core-modules/ui/progress/progress-common.ts

@@ -1,24 +1,16 @@
 import definition = require("ui/progress");
-import view = require("ui/core/view");
-import dependencyObservable = require("ui/core/dependency-observable");
+import {View} from "ui/core/view";
+import {Property} from "ui/core/dependency-observable";
 import proxy = require("ui/core/proxy");
 
-export class Progress extends view.View implements definition.Progress {
-    public static valueProperty = new dependencyObservable.Property(
-        "value",
-        "Progress",
-        new proxy.PropertyMetadata(0, dependencyObservable.PropertyMetadataSettings.AffectsLayout)
-        );
-
-    public static maxValueProperty = new dependencyObservable.Property(
-        "maxValue",
-        "Progress",
-        new proxy.PropertyMetadata(100, dependencyObservable.PropertyMetadataSettings.AffectsLayout)
-        );
+export class Progress extends View implements definition.Progress {
+    public static valueProperty = new Property("value", "Progress", new proxy.PropertyMetadata(0));
+    public static maxValueProperty = new Property("maxValue", "Progress", new proxy.PropertyMetadata(100));
 
     constructor() {
         super();
 
+        // This calls make both platforms have default values from 0 to 100.
         this.maxValue = 100;
         this.value = 0;
     }

tns-core-modules/ui/search-bar/search-bar-common.ts

@@ -1,24 +1,21 @@
 import definition = require("ui/search-bar");
-import view = require("ui/core/view");
-import dependencyObservable = require("ui/core/dependency-observable");
-import proxy = require("ui/core/proxy");
-import color = require("color");
+import {View} from "ui/core/view";
+import {Property, PropertyMetadataSettings} from "ui/core/dependency-observable";
+import {PropertyMetadata} from "ui/core/proxy";
+import {Color} from "color";
+import {isAndroid} from "platform";
 
-export class SearchBar extends view.View implements definition.SearchBar {
+// on Android we explicitly set propertySettings to None because android will invalidate its layout (skip unnecessary native call).
+let AffectsLayout = isAndroid ? PropertyMetadataSettings.None : PropertyMetadataSettings.AffectsLayout;
+
+export class SearchBar extends View implements definition.SearchBar {
     public static submitEvent = "submit";
     public static clearEvent = "clear";
 
-    public static textFieldBackgroundColorProperty = new dependencyObservable.Property("textFieldBackgroundColor", "SearchBar", new proxy.PropertyMetadata(undefined))
-
-    public static textFieldHintColorProperty = new dependencyObservable.Property("textFieldHintColor", "SearchBar", new proxy.PropertyMetadata(undefined))
-	
-    public static hintProperty = new dependencyObservable.Property("hint", "SearchBar", new proxy.PropertyMetadata(""))
-
-    public static textProperty = new dependencyObservable.Property(
-        "text",
-        "SearchBar",
-        new proxy.PropertyMetadata("", dependencyObservable.PropertyMetadataSettings.AffectsLayout)
-        );
+    public static textFieldBackgroundColorProperty = new Property("textFieldBackgroundColor", "SearchBar", new PropertyMetadata(undefined));
+    public static textFieldHintColorProperty = new Property("textFieldHintColor", "SearchBar", new PropertyMetadata(undefined));
+    public static hintProperty = new Property("hint", "SearchBar", new PropertyMetadata(""));
+    public static textProperty = new Property("text", "SearchBar", new PropertyMetadata("", AffectsLayout));
 
     get text(): string {
         return this._getValue(SearchBar.textProperty);
@@ -34,22 +31,22 @@ export class SearchBar extends view.View implements definition.SearchBar {
         this._setValue(SearchBar.hintProperty, value);
     }
 
-    get textFieldBackgroundColor(): color.Color {
+    get textFieldBackgroundColor(): Color {
         return this._getValue(SearchBar.textFieldBackgroundColorProperty);
     }
-    set textFieldBackgroundColor(value: color.Color) {
+    set textFieldBackgroundColor(value: Color) {
         this._setValue(SearchBar.textFieldBackgroundColorProperty,
-            value instanceof color.Color ? value : new color.Color(<any>value));
+            value instanceof Color ? value : new Color(<any>value));
     }
-	
-	get textFieldHintColor(): color.Color {
+
+    get textFieldHintColor(): Color {
         return this._getValue(SearchBar.textFieldHintColorProperty);
     }
-    set textFieldHintColor(value: color.Color) {
+    set textFieldHintColor(value: Color) {
         this._setValue(SearchBar.textFieldHintColorProperty,
-            value instanceof color.Color ? value : new color.Color(<any>value));
+            value instanceof Color ? value : new Color(<any>value));
     }
-	
+
     public dismissSoftInput() {
         //
     }

tns-core-modules/ui/tab-view/tab-view-common.ts

@@ -1,17 +1,21 @@
 import definition = require("ui/tab-view");
-import view = require("ui/core/view");
-import dependencyObservable = require("ui/core/dependency-observable");
-import proxy = require("ui/core/proxy");
+import {View, AddArrayFromBuilder} from "ui/core/view";
+import {PropertyMetadataSettings, Property, PropertyChangeData} from "ui/core/dependency-observable";
+import {Bindable} from "ui/core/bindable";
+import {isAndroid} from "platform";
+import {PropertyMetadata} from "ui/core/proxy";
 import types = require("utils/types");
 import trace = require("trace");
-import bindable = require("ui/core/bindable");
 import color = require("color");
 
+// on Android we explicitly set propertySettings to None because android will invalidate its layout (skip unnecessary native call).
+let AffectsLayout = isAndroid ? PropertyMetadataSettings.None : PropertyMetadataSettings.AffectsLayout;
+
 export var traceCategory = "TabView";
 
-export class TabViewItem extends bindable.Bindable implements definition.TabViewItem {
+export class TabViewItem extends Bindable implements definition.TabViewItem {
     private _title: string = "";
-    private _view: view.View;
+    private _view: View;
     private _iconSource: string;
 
     get title(): string {
@@ -25,15 +29,16 @@ export class TabViewItem extends bindable.Bindable implements definition.TabView
         }
     }
 
-    get view(): view.View {
+    get view(): View {
         return this._view;
     }
 
-    set view(value: view.View) {
+    set view(value: View) {
         if (this._view !== value) {
             if (this._view) {
                 throw new Error("Changing the view of an already loaded TabViewItem is not currently supported.");
             }
+
             this._view = value;
         }
     }
@@ -63,45 +68,23 @@ var TABS_BACKGROUND_COLOR = "tabsBackgroundColor";
 export module knownCollections {
     export var items = "items";
 }
-var itemsProperty = new dependencyObservable.Property(
-    ITEMS,
-    TAB_VIEW,
-    new proxy.PropertyMetadata(
-        undefined,
-        dependencyObservable.PropertyMetadataSettings.AffectsLayout));
 
-var selectedIndexProperty = new dependencyObservable.Property(
-    SELECTED_INDEX,
-    TAB_VIEW,
-    new proxy.PropertyMetadata(
-        undefined,
-        dependencyObservable.PropertyMetadataSettings.AffectsLayout));
+var itemsProperty = new Property(ITEMS, TAB_VIEW, new PropertyMetadata(undefined, AffectsLayout));
+var selectedIndexProperty = new Property(SELECTED_INDEX, TAB_VIEW, new PropertyMetadata(undefined, AffectsLayout));
+var selectedColorProperty = new Property(SELECTED_COLOR, TAB_VIEW, new PropertyMetadata(undefined));
+var tabsBackgroundColorProperty = new Property(TABS_BACKGROUND_COLOR, TAB_VIEW, new PropertyMetadata(undefined));
 
-var selectedColorProperty = new dependencyObservable.Property(
-    SELECTED_COLOR,
-    TAB_VIEW,
-    new proxy.PropertyMetadata(
-        undefined,
-        dependencyObservable.PropertyMetadataSettings.None));
-
-var tabsBackgroundColorProperty = new dependencyObservable.Property(
-    TABS_BACKGROUND_COLOR,
-    TAB_VIEW,
-    new proxy.PropertyMetadata(
-        undefined,
-        dependencyObservable.PropertyMetadataSettings.None));
-
-(<proxy.PropertyMetadata>selectedIndexProperty.metadata).onSetNativeValue = function (data: dependencyObservable.PropertyChangeData) {
+(<PropertyMetadata>selectedIndexProperty.metadata).onSetNativeValue = function (data: PropertyChangeData) {
     var tabView = <TabView>data.object;
     tabView._onSelectedIndexPropertyChangedSetNativeValue(data);
 };
 
-(<proxy.PropertyMetadata>itemsProperty.metadata).onSetNativeValue = function (data: dependencyObservable.PropertyChangeData) {
+(<PropertyMetadata>itemsProperty.metadata).onSetNativeValue = function (data: PropertyChangeData) {
     var tabView = <TabView>data.object;
     tabView._onItemsPropertyChangedSetNativeValue(data);
 }
 
-export class TabView extends view.View implements definition.TabView, view.AddArrayFromBuilder {
+export class TabView extends View implements definition.TabView, AddArrayFromBuilder {
     public static itemsProperty = itemsProperty;
     public static selectedIndexProperty = selectedIndexProperty;
     public static selectedColorProperty = selectedColorProperty;
@@ -121,7 +104,7 @@ export class TabView extends view.View implements definition.TabView, view.AddAr
         this._setValue(TabView.itemsProperty, value);
     }
 
-    public _onItemsPropertyChangedSetNativeValue(data: dependencyObservable.PropertyChangeData) {
+    public _onItemsPropertyChangedSetNativeValue(data: PropertyChangeData) {
         if (trace.enabled) {
             trace.write("TabView.__onItemsPropertyChangedSetNativeValue(" + data.oldValue + " -> " + data.newValue + ");", traceCategory);
         }
@@ -213,7 +196,7 @@ export class TabView extends view.View implements definition.TabView, view.AddAr
             value instanceof color.Color ? value : new color.Color(<any>value));
     }
 
-    public _onSelectedIndexPropertyChangedSetNativeValue(data: dependencyObservable.PropertyChangeData) {
+    public _onSelectedIndexPropertyChangedSetNativeValue(data: PropertyChangeData) {
         var index = this.selectedIndex;
         if (types.isUndefined(index)) {
             return;
@@ -227,7 +210,7 @@ export class TabView extends view.View implements definition.TabView, view.AddAr
         }
     }
 
-    get _selectedView(): view.View {
+    get _selectedView(): View {
         var _items = this.items;
         var _selectedIndex = this.selectedIndex;
 
@@ -254,7 +237,7 @@ export class TabView extends view.View implements definition.TabView, view.AddAr
         return 0;
     }
 
-    public _eachChildView(callback: (child: view.View) => boolean) {
+    public _eachChildView(callback: (child: View) => boolean) {
         var _items = this.items;
 
         if (!_items) {

tsconfig.json

@@ -14,6 +14,7 @@
     "exclude": [
         "node_modules",
         "tests/node_modules",
+        "tests/platforms",
         "bin",
         "build",
         "Deploy",