Property Support

Author: sitefinitysteve

demo/app/app.css

@@ -22,5 +22,5 @@ button {
     horizontal-align: right;
     vertical-align: top;
     color: #FFF;
-    background-color: #ff4081;
+    /*background-color: #ff4081;*/
 }

demo/app/main-page.xml

@@ -14,6 +14,7 @@
                 row="1"
                 icon="res://ic_add_white"
                 tap="fabTap"
+                backColor="#ff4081"
                 class="fab-button" />
     </grid-layout>
 </Page>

fab-common.js

@@ -1,8 +1,9 @@
 var view = require("ui/core/view");
 var color = require("color");
+var dObservable = require("ui/core/dependency-observable");
+var proxy = require("ui/core/proxy");
 
 var FloatingActionButton = (function (_super) {
-
     global.__extends(FloatingActionButton, _super);
 
     function FloatingActionButton() {
@@ -20,22 +21,26 @@ var FloatingActionButton = (function (_super) {
 
     Object.defineProperty(FloatingActionButton.prototype, "backColor", {
         get: function () {
-            return this.backColorProperty;
+            return this._getValue(FloatingActionButton.backColorProperty);
         },
-        set: function(value){
-            this.backColorProperty = new color.Color(value);
+        set: function (value) {
+            this._setValue(FloatingActionButton.backColorProperty, value);
         }
     });
 
     Object.defineProperty(FloatingActionButton.prototype, "icon", {
         get: function () {
-            return this.iconProperty;
+            return this._getValue(FloatingActionButton.iconProperty);
         },
-        set: function(value){
-            this.iconProperty = value;
+        set: function (value) {
+            this._setValue(FloatingActionButton.iconProperty, value);
         }
     });
 
+    //Expose for iOS
+    FloatingActionButton.backColorProperty = new dObservable.Property("backColor", "FloatingActionButton", new proxy.PropertyMetadata(0, dObservable.PropertyMetadataSettings.AffectsLayout));
+    FloatingActionButton.iconProperty = new dObservable.Property("icon", "FloatingActionButton", new proxy.PropertyMetadata(0, dObservable.PropertyMetadataSettings.AffectsLayout));
+    
     return FloatingActionButton;
 })(view.View);
 

fab.ios.js

@@ -12,9 +12,12 @@ var ImageSource = require("image-source");
 var stateChanged = require("ui/core/control-state-change");
 var style = require("ui/styling/style");
 var utils = require("utils/utils");
+var color = require("color");
 var enums = require("ui/enums");
 
- require("utils/module-merge").merge(common, module.exports);
+
+
+require("utils/module-merge").merge(common, module.exports);
 
 var FloatingActionButton = (function (_super) {
     global.__extends(FloatingActionButton, _super);
@@ -25,6 +28,7 @@ var FloatingActionButton = (function (_super) {
 
         var button = KCFloatingActionButton.alloc().init();
         this._ios = button;
+        
     }
 
     Object.defineProperty(FloatingActionButton.prototype, "ios", {
@@ -39,6 +43,7 @@ var FloatingActionButton = (function (_super) {
 
 exports.Fab = FloatingActionButton;
 
+/* SETUP CSS */
 var FloatingActionButtonStyler = (function () {
     function FloatingActionButtonStyler() {
     }
@@ -95,3 +100,13 @@ var FloatingActionButtonStyler = (function () {
 })();
 exports.FloatingActionButtonStyler = FloatingActionButtonStyler;
 FloatingActionButtonStyler.registerHandlers();
+
+
+/* SETUP PROPERTIES */
+function onBackColorPropertyChanged(data) {
+    if(color.Color.isValid(data.newValue)){
+        var fab = data.object;
+        fab.ios.buttonColor = new color.Color(data.newValue).ios;
+    }
+}
+common.Fab.backColorProperty.metadata.onSetNativeValue = onBackColorPropertyChanged;