From 0dd8f985c4247c0bc7609b414b02178f3d1aed60 Mon Sep 17 00:00:00 2001
From: Panayot Cankov <Panayot.Cankov@telerik.com>
Date: Wed, 25 Jan 2017 13:17:33 +0200
Subject: [PATCH] Add animations demo to the gallery app, make vertical
 alignment center and visibility collapsed backward compatible

---
 apps/app/gallery-app/animations/bkg.png       | Bin 0 -> 311 bytes
 .../gallery-app/animations/configurable.ts    | 175 ++++++++++++++++++
 .../gallery-app/animations/configurable.xml   |  36 ++++
 apps/app/gallery-app/animations/model.ts      |  37 ++++
 apps/app/gallery-app/animations/opacity.css   |  27 +++
 apps/app/gallery-app/animations/opacity.ts    |  47 +++++
 apps/app/gallery-app/animations/opacity.xml   |  35 ++++
 apps/app/gallery-app/animations/package.json  |   2 +
 apps/app/gallery-app/animations/test-icon.png | Bin 0 -> 1304 bytes
 apps/app/gallery-app/main-page.xml            |   6 +
 .../data/observable/observable.d.ts           |   7 +
 tns-core-modules/ui/core/view-common.ts       |  15 +-
 12 files changed, 376 insertions(+), 11 deletions(-)
 create mode 100644 apps/app/gallery-app/animations/bkg.png
 create mode 100644 apps/app/gallery-app/animations/configurable.ts
 create mode 100644 apps/app/gallery-app/animations/configurable.xml
 create mode 100644 apps/app/gallery-app/animations/model.ts
 create mode 100644 apps/app/gallery-app/animations/opacity.css
 create mode 100644 apps/app/gallery-app/animations/opacity.ts
 create mode 100644 apps/app/gallery-app/animations/opacity.xml
 create mode 100644 apps/app/gallery-app/animations/package.json
 create mode 100644 apps/app/gallery-app/animations/test-icon.png

diff --git a/apps/app/gallery-app/animations/bkg.png b/apps/app/gallery-app/animations/bkg.png
new file mode 100644
index 0000000000000000000000000000000000000000..fa059ba75757ee3886a8fa6b4ad4e7cba46142f1
GIT binary patch
literal 311
zcmeAS@N?(olHy`uVBq!ia0vp^Mj*_=1SBWM%0B~AjKx9jP7LeL$-D$|SkfJR9T^xl
z_H+M9WCij$3p^r=85sBugD~Uq{1qucL5ULAh?3y^w370~qEv>0#LT=By}Z;C1rt33
zJ=4@yqg0@p6`n4RArbCxuN!h5HV|n}WSzs8|MtR8yJG)K+`CR)II5aps(+OApt+>Z
zKOV^*hAg&s3A{1cOz#Rdram~g?MDXZj>l^f&jnd{Kh$a6EP}!?%)hqeeE5;3D4`=o
zj&}n3AM@?svf!@pl|x6>Zx!Atyk?ND>39B-z3HOeU%S`5dop?Ry*XQtM{=cW&RP0n
r{Tji$YcFr!_gLrXnMh%~69W1>69hV1_WscYx|zY#)z4*}Q$iB}A7yx<

literal 0
HcmV?d00001

diff --git a/apps/app/gallery-app/animations/configurable.ts b/apps/app/gallery-app/animations/configurable.ts
new file mode 100644
index 000000000..1f2aa4d08
--- /dev/null
+++ b/apps/app/gallery-app/animations/configurable.ts
@@ -0,0 +1,175 @@
+import * as observable from "data/observable";
+import * as pages from "ui/page";
+import * as buttonModule from "ui/button";
+import * as abs from "ui/layouts/absolute-layout";
+import * as animationModule from "ui/animation";
+import * as colorModule from "color";
+import * as model from "./model";
+import * as enums from "ui/enums";
+import * as frame from "ui/frame";
+import * as trace from "trace";
+
+var vm = new model.ViewModel();
+
+var page: pages.Page;
+var panel: abs.AbsoluteLayout;
+var button1: buttonModule.Button;
+var button2: buttonModule.Button;
+var button3: buttonModule.Button;
+var buttonAnimation: animationModule.Animation;
+var panelAnimation: animationModule.Animation;
+
+export function pageLoaded(args: observable.EventData) {
+    page = <pages.Page>args.object;
+    page.bindingContext = vm;
+    panel = page.getViewById<abs.AbsoluteLayout>("panel1");
+    button1 = page.getViewById<buttonModule.Button>("button1");
+    button2 = page.getViewById<buttonModule.Button>("button2");
+    button3 = page.getViewById<buttonModule.Button>("button3");
+
+
+    trace.enable();
+    trace.addCategories(trace.categories.concat(trace.categories.Animation));
+}
+
+export function onSlideOut(args: observable.EventData) {
+    console.log("onSlideOut");
+    var curve = enums.AnimationCurve.easeOut;
+
+    var buttonAnimations = [
+        { target: button1, translate: { x: -240, y: 0 }, scale: { x: 0.5, y: 0.5 }, opacity: 0, duration: vm.duration, delay: 0, iterations: vm.iterations, curve: curve },
+        { target: button2, translate: { x: -240, y: 0 }, scale: { x: 0.5, y: 0.5 }, opacity: 0, duration: vm.duration, delay: vm.duration, iterations: vm.iterations, curve: curve },
+        { target: button3, translate: { x: -240, y: 0 }, scale: { x: 0.5, y: 0.5 }, opacity: 0, duration: vm.duration, delay: vm.duration * 2, iterations: vm.iterations, curve: curve },
+    ]
+    buttonAnimation = new animationModule.Animation(buttonAnimations, vm.playSequentially);
+
+    panelAnimation = panel.createAnimation({ opacity: 0, scale: { x: 0.5, y: 0.5 }, rotate: -360, backgroundColor: new colorModule.Color("red"), duration: vm.duration, iterations: vm.iterations, curve: enums.AnimationCurve.easeInOut });
+
+    buttonAnimation.play()
+        .then(() => panelAnimation.play())
+        .catch((e) => console.log(e.message));
+}
+
+export function onSlideIn(args: observable.EventData) {
+    console.log("onSlideIn");
+    var curve = enums.AnimationCurve.easeIn;
+
+    panelAnimation = panel.createAnimation({ opacity: 1, scale: { x: 1, y: 1 }, rotate: 0, backgroundColor: new colorModule.Color("yellow"), duration: vm.duration, iterations: vm.iterations, curve: enums.AnimationCurve.easeInOut });
+
+    var buttonAnimations = [
+        { target: button3, translate: { x: 0, y: 0 }, scale: { x: 1, y: 1 }, opacity: 1, duration: vm.duration, delay: 0, iterations: vm.iterations, curve: curve },
+        { target: button2, translate: { x: 0, y: 0 }, scale: { x: 1, y: 1 }, opacity: 1, duration: vm.duration, delay: vm.duration, iterations: vm.iterations, curve: curve },
+        { target: button1, translate: { x: 0, y: 0 }, scale: { x: 1, y: 1 }, opacity: 1, duration: vm.duration, delay: vm.duration * 2, iterations: vm.iterations, curve: curve },
+    ]
+    buttonAnimation = new animationModule.Animation(buttonAnimations, vm.playSequentially);
+
+    panelAnimation.play()
+        .then(() => buttonAnimation.play())
+        .catch((e) => console.log(e.message));
+}
+
+export function onCancel(args: observable.EventData) {
+    console.log("onCancel");
+    if (panelAnimation && panelAnimation.isPlaying) {
+        panelAnimation.cancel();
+    }
+    if (buttonAnimation && buttonAnimation.isPlaying) {
+        buttonAnimation.cancel();
+    }
+}
+
+export function onTap(args: observable.EventData) {
+    console.log((<any>args.object).text);
+}
+
+export function onSingle(args: observable.EventData) {
+    console.log("onSingle");
+    button1.animate({
+        opacity: 0.75,
+        backgroundColor: new colorModule.Color("Red"),
+        translate: { x: 100, y: 100 },
+        scale: { x: 2, y: 2 },
+        rotate: 180,
+        duration: vm.duration,
+        delay: 0,
+        iterations: vm.iterations,
+        curve: enums.AnimationCurve.linear,
+    })
+        .then(() => console.log("Animation finished"))
+        .catch((e) => console.log(e.message));
+}
+
+export function onSequence(args: observable.EventData) {
+    console.log("onSequence");
+    
+    button3.animate({
+        translate: { x: 80, y: -40 },
+        scale: { x: 0.9, y: 0.3 },
+        rotate: 25,
+        duration: 1000
+    })
+    .then(() => button3.animate({
+        translate: { x: 0, y: -80 },
+        scale: { x: 0.5, y: 0.5 },
+        rotate: -25,
+        duration: 1000
+    }))
+    .then(() => button3.animate({
+        translate: { x: -80, y: -40 },
+        scale: { x: 0.5, y: 0.9 },
+        rotate: 45,
+        duration: 1000
+    }))
+    .then(() => button3.animate({
+        translate: { x: 0, y: 0 },
+        scale: { x: 1, y: 1 },
+        rotate: 0,
+        duration: 1000
+    }))
+    .then(() => console.log("Animation finished"))
+    .catch((e) => console.log(e.message));
+}
+
+export function onInterrupted(args: observable.EventData) {
+    console.log("onInterrupt");
+    
+    setTimeout(() => {
+        button3.animate({
+            translate: { x: 80, y: -40 },
+            scale: { x: 0.9, y: 0.3 },
+            rotate: 25,
+            duration: 1000
+        });    
+    }, 700 * 0);
+    
+    setTimeout(function() {
+        button3.animate({
+            translate: { x: 0, y: -80 },
+            scale: { x: 0.5, y: 0.5 },
+            rotate: -25,
+            duration: 1000
+        })
+    }, 700 * 1);
+    
+    setTimeout(function() {
+        button3.animate({
+            translate: { x: -80, y: -40 },
+            scale: { x: 0.5, y: 0.9 },
+            rotate: 45,
+            duration: 1000
+        })
+    }, 700 * 2);
+    
+    setTimeout(function() {
+        button3.animate({
+            translate: { x: 0, y: 0 },
+            scale: { x: 1, y: 1 },
+            rotate: 0,
+            duration: 1000
+        })
+    }, 700 * 3);
+}
+
+export function onOpacity(args: observable.EventData) {
+    frame.topmost().navigate("./opacity");
+}
diff --git a/apps/app/gallery-app/animations/configurable.xml b/apps/app/gallery-app/animations/configurable.xml
new file mode 100644
index 000000000..8b939ab70
--- /dev/null
+++ b/apps/app/gallery-app/animations/configurable.xml
@@ -0,0 +1,36 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded" id="mainPage">
+  <StackLayout orientation="vertical">
+    <StackLayout orientation="vertical" backgroundColor="LightGray" paddingTop="5" paddingBottom="5">
+      
+      <Label text="{{ duration, 'Duration: ' + duration + ' ms' }}" width="180" />
+      <Slider minValue="0" maxValue="10000" value="{{ duration }}" margin="0 15" />
+
+      <Label text="{{ iterations, 'Iterations: ' + iterations + ' times' }}" width="180" />
+      <Slider minValue="0" maxValue="10" value="{{ iterations }}" margin="0 15" />
+
+      <StackLayout orientation="horizontal" horizontalAlignment="center">
+        <Label text="Play Sequentially?"/>
+        <Switch marginLeft="10" checked="{{ playSequentially }}"/>
+      </StackLayout>
+      
+      <StackLayout orientation="horizontal" marginTop="5" marginBottom="5" horizontalAlignment="center" paddingLeft="5" paddingRight="5">
+        <Button text="Out" tap="onSlideOut" width="40" marginLeft="5" marginRight="5" />
+        <Button text="In" tap="onSlideIn" width="40" marginLeft="5" marginRight="5" />
+        <Button text="Single" tap="onSingle" width="70" marginLeft="5" marginRight="5" />
+        <Button text="Cancel" tap="onCancel" width="70" marginLeft="5" marginRight="5" />
+        <Button text="Opacity" tap="onOpacity" width="70" marginLeft="5" marginRight="5" />
+      </StackLayout>
+      
+      <StackLayout orientation="horizontal" marginTop="5" marginBottom="5" horizontalAlignment="center" paddingLeft="5" paddingRight="5">>
+        <Button text="Sequence" width="80" marginLeft="5" marginRight="5" tap="onSequence" />
+        <Button text="Interrupted" width="80" marginLeft="5" marginRight="5" tap="onInterrupted" />
+      </StackLayout>
+      
+    </StackLayout>
+    <AbsoluteLayout id="panel1" backgroundColor="Yellow" width="300" height="190" clipToBounds="true" marginTop="10">
+      <Button id="button1" text="Button 1" backgroundColor="White" width="180" height="50" left="60" top="10" tap="onTap" borderWidth="1" borderColor="red" />
+      <Button id="button2" text="Button 2" backgroundColor="White" width="180" height="50" left="60" top="70" tap="onTap" borderWidth="1" borderColor="red" />
+      <Button id="button3" text="Button 3" backgroundColor="White" width="180" height="50" left="60" top="130" tap="onTap" borderWidth="1" borderColor="red" />
+    </AbsoluteLayout>
+  </StackLayout>
+</Page> 
\ No newline at end of file
diff --git a/apps/app/gallery-app/animations/model.ts b/apps/app/gallery-app/animations/model.ts
new file mode 100644
index 000000000..8123a1c26
--- /dev/null
+++ b/apps/app/gallery-app/animations/model.ts
@@ -0,0 +1,37 @@
+import observable = require("data/observable");
+
+export class ViewModel extends observable.Observable {
+    constructor() {
+        super();
+
+        this._duration = 3000;
+        this._iterations = 1;
+    }
+
+    private _playSequentially: boolean;
+    get playSequentially(): boolean {
+        return this._playSequentially;
+    }
+    set playSequentially(value: boolean) {
+        this._playSequentially = value;
+        this.notify({ object: this, eventName: observable.Observable.propertyChangeEvent, propertyName: "playSequentially", value: value });
+    }
+
+    private _duration: number;
+    get duration(): number {
+        return this._duration;
+    }
+    set duration(value: number) {
+        this._duration = value;
+        this.notify({ object: this, eventName: observable.Observable.propertyChangeEvent, propertyName: "duration", value: value });
+    }
+
+    private _iterations: number;
+    get iterations(): number {
+        return this._iterations;
+    }
+    set iterations(value: number) {
+        this._iterations = value;
+        this.notify({ object: this, eventName: observable.Observable.propertyChangeEvent, propertyName: "iterations", value: value });
+    }
+}
\ No newline at end of file
diff --git a/apps/app/gallery-app/animations/opacity.css b/apps/app/gallery-app/animations/opacity.css
new file mode 100644
index 000000000..cc08e1485
--- /dev/null
+++ b/apps/app/gallery-app/animations/opacity.css
@@ -0,0 +1,27 @@
+.complex {
+    width: 45;
+    height: 45;
+    margin: 1;
+    background-image: url('~/gallery-app/animations/bkg.png'); 
+    background-repeat:repeat-x; 
+    background-position: 20% 80%; 
+    background-color: lightyellow; 
+    background-size: 25% 50%; 
+    border-radius: 20; 
+    border-width: 4; 
+    border-color: red;
+}
+
+.simple {
+    width: 45;
+    height: 45;
+    margin: 1;
+    border-radius: 20;
+    background-color: lightgreen; 
+}
+
+.none {
+    width: 45;
+    height: 45;
+    margin: 1;
+}
\ No newline at end of file
diff --git a/apps/app/gallery-app/animations/opacity.ts b/apps/app/gallery-app/animations/opacity.ts
new file mode 100644
index 000000000..5b9e6d8de
--- /dev/null
+++ b/apps/app/gallery-app/animations/opacity.ts
@@ -0,0 +1,47 @@
+import observable = require("data/observable");
+import pages = require("ui/page");
+import view = require("ui/core/view");
+import animationModule = require("ui/animation");
+import slider = require("ui/slider");
+import wrapLayout = require("ui/layouts/wrap-layout");
+
+var page: pages.Page;
+var opacitySlider: slider.Slider;
+var container: wrapLayout.WrapLayout; 
+
+export function pageLoaded(args: observable.EventData) {
+    page = <pages.Page>args.object;
+    opacitySlider = page.getViewById<slider.Slider>("opacitySlider");
+    container = page.getViewById<wrapLayout.WrapLayout>("container");
+}
+
+export function onSetOpacity(args: observable.EventData) {
+    var newOpacity = opacitySlider.value / 100;
+    container.eachChildView((view: view.View) => {
+        view.opacity = newOpacity;
+        return true;
+    });
+}
+
+var animationSet: animationModule.Animation;
+export function onAnimateOpacity(args: observable.EventData) {
+    var newOpacity = opacitySlider.value / 100;
+    var animationDefinitions = new Array<animationModule.AnimationDefinition>();
+    container.eachChildView((view: view.View) => {
+        animationDefinitions.push({
+            target: view,
+            opacity: newOpacity,
+            duration: 5000
+        });
+        return true;
+    });
+
+    animationSet = new animationModule.Animation(animationDefinitions);
+    animationSet.play();
+}
+
+export function onReset(args: observable.EventData) {
+    if (animationSet.isPlaying) {
+        animationSet.cancel();
+    }
+}
diff --git a/apps/app/gallery-app/animations/opacity.xml b/apps/app/gallery-app/animations/opacity.xml
new file mode 100644
index 000000000..a7dd16d3b
--- /dev/null
+++ b/apps/app/gallery-app/animations/opacity.xml
@@ -0,0 +1,35 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded" id="opacityPage">
+  <StackLayout orientation="vertical">
+    <StackLayout orientation="vertical">
+      <Label text="opacity" width="180" />
+      <Slider id="opacitySlider" minValue="0" maxValue="100" width="180" />
+      <Button text="Set" tap="onSetOpacity"/>
+      <Button text="Animate" tap="onAnimateOpacity"/>
+      <Button text="Reset" tap="onReset"/>
+    </StackLayout>
+    <WrapLayout orientation="horizontal" id="container">
+      
+      <StackLayout class="complex"/>
+      <Button text="Button" class="complex"/>
+      <Label text="Label" class="complex"/>
+      <Image src="~/test-icon.png" class="complex"/>
+      <TextField text="TextField" class="complex"/>
+      <TextView text="TextView" class="complex"/>
+
+      <StackLayout class="simple"/>
+      <Button text="Button" class="simple"/>
+      <Label text="Label" class="simple"/>
+      <Image src="~/test-icon.png" class="simple"/>
+      <TextField text="TextField" class="simple"/>
+      <TextView text="TextView" class="simple"/>
+
+      <StackLayout class="none"/>
+      <Button text="Button" class="none"/>
+      <Label text="Label" class="none"/>
+      <Image src="~/test-icon.png" class="none"/>
+      <TextField text="TextField" class="none"/>
+      <TextView text="TextView" class="none"/>
+
+    </WrapLayout>
+  </StackLayout>
+</Page> 
\ No newline at end of file
diff --git a/apps/app/gallery-app/animations/package.json b/apps/app/gallery-app/animations/package.json
new file mode 100644
index 000000000..be8391bcb
--- /dev/null
+++ b/apps/app/gallery-app/animations/package.json
@@ -0,0 +1,2 @@
+{ "name" : "animations",
+  "main" : "app.js" }
\ No newline at end of file
diff --git a/apps/app/gallery-app/animations/test-icon.png b/apps/app/gallery-app/animations/test-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..bf42af4aea371e83cb0f0ce668628bfa7ea080fa
GIT binary patch
literal 1304
zcmV+z1?T#SP)<h;3K|Lk000e1NJLTq003YB003YJ1ONa4NRhv@000EvNkl<ZcmeI(
zOK4QrAHeZ1={(~DyD8{sV%k~}O3`XaUn*&8v*<1usTdPcl%%4?C{m@0s9hC{#;9Nm
ze?)7o5^2#o3tfm65&pC#FoM+@oBF8H#AG^&<0Q`fy2_&0x%Zxv%(;#*pYK|e3%_$c
z=Uk+qpumVA^_--WK?dohjXHunM?U5bV(B)EcrFxi0I{i+BJ$n=#G%&wA0Bb3mOK{Z
z4&u@+0_3fFM4=_*t&@mCC&*i!h(b5X3$xkHZzRaj$7Oah4H!feN&(Z@!DZrPNboCP
zF%wUf@)Key%{QbFg_8V_G-ByTrr?oEdJzNlFc%NJ#UsQ}{mjO&ar}iCtb<~V`T{ZB
zRtyUA5HZ|+d>Hc~;z9E<W)tE;>oKMUQS32?sG$TueoCm}Fpm+%c45q3M5*tXgjIy&
z1|Gn`2&HMn&T7(#Yt0z*0peOCPF5qX&Bd4i-LAvq!gY}T<^>Ge=CX7r;byYSmhUr+
z8bb$S+aXjOL2Ub-5Qe=;0<ozE6$=rY`gk1=yu*DYYbB_dYCHYqcw{2S$RJqrqaui4
zEyK6Ggl8h0Kyv&5$C!vm-lKa|BUEO)4}BXClru2OMO=&6^bfNzY%G5wwjD;rQN*?z
z6l2s5mw(72xG5opIJ5<W0`wq`eUF<q#IY`X7_$IzZ8c8T=KqN-?eGYnk~VN6GjO0e
z&Sb1gXftr2F?OU(afF3TB}kAmYB@>@$;%U&ftt-PVzbRN{~9%v`PV4yL=5*iMvbKt
zG1wo3J=@F~D8Vc|Fwf9Rc)+`OWC}kZmWJ4`czu}UYn~vM+KAw(ne5^h;-u-}XSPzR
z^^xyowsVPxq>1x?zT}PP=`(8wo){v@Jz_*@rHKmsxNB3~DY*+!K@<Ck5~GVGDYPY#
z|MZBntfLesb%;WXaZ<*5&RKst{b;*~WbGo$2$Nlq+lWh@1jsJTaxNiRyNkA%;|p&a
z6Ub%};!+LSyvTOPi{o~*MG?n(*+_t=wIUAf;b}oO(T6y83T>^3Yu9-nt0IR#xtk)a
z7H|V`Z4cU-5Ty=Kj8!eSvdn%BR%1AbD76x86^LS2n2uF|C7j?UDN=NBoW%sNn!!~>
zu{mh-^9WHaPBpqdB7rE@j}LvEMU)$&0UaxNf+%-}5m|?5l%Ww-pO8T`TEmExB3fl=
zK*b6&ntyME5xR(IHAJ<->_0)YI?sqLLo|!?8ct@AKr~y*h=qB8Xci-koiSWRG`mO0
z$ai6f_G9NDqTOajWdgm3c9l817VBmlqqGsx?ivBCg4}pE*Nj1~Bie1q$-U}T{Nz9t
zqFoQ;E&KgGM6(R@4gaSGjc;As5$*PpGsRp%H0vV7urS?-X6=N?q3OgC&FUGp9MP<o
zSIDtyh7heTFzgbd)gV<E(4f5un+!mi_TsI>kVef%SPQ^<&0l{d1~q66QWSu5TEkO^
zVbvPTc>o^)k{V053J**thA37}g~p5XRXh@AKcdtsniMC$g%F;q<Qn2y3;UGzJoCYO
z0XFauaqKiv*9~(sex8}}Y~jA+T*n+wTbmijGZ&(s3uJ7r#k*`~{ya+wkw>PmmM8<(
z7ipGH6=zsOggoV=oK>`Nns)9oK#COo+@+mU>|rHy@R2hG1qB5K1^)tOypHj&Ah#O;
O0000<MNUMnLSTY+D_SxD

literal 0
HcmV?d00001

diff --git a/apps/app/gallery-app/main-page.xml b/apps/app/gallery-app/main-page.xml
index 5262bcabb..312610b4a 100644
--- a/apps/app/gallery-app/main-page.xml
+++ b/apps/app/gallery-app/main-page.xml
@@ -40,6 +40,12 @@
         <Button tag="views/list-picker" text="ListPicker" tap="itemTap" />
         <Button tag="views/segmented-bar" text="SegmentedBar" tap="itemTap" />
       </StackLayout>
+
+      <Label class="title" text="Animations" />
+      <StackLayout>
+        <Button tag="animations/configurable" text="configurable" tap="itemTap" />
+        <Button tag="animations/opacity" text="opacity" tap="itemTap" />
+      </StackLayout>
     </StackLayout>
   </ScrollView>
 </Page>
\ No newline at end of file
diff --git a/tns-core-modules/data/observable/observable.d.ts b/tns-core-modules/data/observable/observable.d.ts
index 30a12e9d4..c26c62bd0 100644
--- a/tns-core-modules/data/observable/observable.d.ts
+++ b/tns-core-modules/data/observable/observable.d.ts
@@ -65,6 +65,13 @@ declare module "data/observable" {
      * Observable is used when you want to be notified when a change occurs. Use on/off methods to add/remove listener.
      */
     class Observable {
+
+        /**
+         * Please note that should you be using the `new Observable({})` constructor, it is **obsolete** since v3.0,
+         * and you have to migrate to the "data/observable" `fromObject({})` or the `fromObjectRecursive({})` functions.
+         */
+        constructor();
+
         /**
          * String value used when hooking to propertyChange event.
          */
diff --git a/tns-core-modules/ui/core/view-common.ts b/tns-core-modules/ui/core/view-common.ts
index f0e55d371..c0f3453e7 100644
--- a/tns-core-modules/ui/core/view-common.ts
+++ b/tns-core-modules/ui/core/view-common.ts
@@ -1250,16 +1250,8 @@ export namespace VerticalAlignment {
     export const BOTTOM: "bottom" = "bottom";
     export const STRETCH: "stretch" = "stretch";
     export const isValid = makeValidator<VerticalAlignment>(TOP, MIDDLE, BOTTOM, STRETCH);
-    export const parse = value => {
-        const lower = value && value.toLowerCase();
-        if (lower === "canter") {
-            return MIDDLE;
-        } else if (isValid(lower)) {
-            return lower;
-        } else {
-            throw new Error("Invalid value: " + value);
-        }
-    }
+    export const parse = (value: string) => value.toLowerCase() === "center" ? MIDDLE : parseStrict(value);
+    const parseStrict = makeParser<VerticalAlignment>(isValid);
 }
 
 export const verticalAlignmentProperty = new CssProperty<Style, VerticalAlignment>({ name: "verticalAlignment", cssName: "vertical-align", defaultValue: VerticalAlignment.STRETCH, affectsLayout: isIOS, valueConverter: VerticalAlignment.parse });
@@ -2025,7 +2017,8 @@ export namespace Visibility {
     export const HIDDEN: "hidden" = "hidden";
     export const COLLAPSE: "collapse" = "collapse";
     export const isValid = makeValidator<Visibility>(VISIBLE, HIDDEN, COLLAPSE);
-    export const parse = makeParser<Visibility>(isValid);
+    export const parse = (value: string) => value.toLowerCase() === "collapsed" ? COLLAPSE : parseStrict(value);
+    const parseStrict = makeParser<Visibility>(isValid);
 }
 
 export const visibilityProperty = new CssProperty<Style, Visibility>({