update

Author: bradmartin

.npmignore

@@ -5,5 +5,5 @@ nativescript-fab.sln
 .sln
 *.sln
 demo/
-sample1.png
-sample2.png
+screens/
+

README.md

@@ -8,25 +8,33 @@ XML widget to create the Material Design Floating Action Button for Android Nati
 
 ### Screenshot
 ---------------
-![FAB Screenshot](sample.png)
+![FAB Screenshot](screens/fab.png)
 
 ## Usage
 
 #### XML
 ##### **NOTE** The sample XML here will position the FAB on top of the ListView. There is no need for absolute positioning.
 ```XML
-<Page xmlns="http://schemas.nativescript.org/tns.xsd"
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded"
       xmlns:FAB="nativescript-floatingactionbutton">
-    <grid-layout rows="auto, *, auto">
-        <list-view row="1">                            
-            <list-view.itemTemplate>
-                <label text="Hello" />                            
-            </list-view.itemTemplate>                            
-        </list-view>
-        <android row="1">
-	        <FAB:fab tap="fabTap" icon="ic_menu_camera"  backColor="#ff4081"  rippleColor="#f1f1f1" class="fab-button" />                        
-        </android>  
-   </grid-layout>
+    <Page.actionBar>
+        <ActionBar title="Native FAB" backgroundColor="#3F51B5" color="#fff" />
+    </Page.actionBar>
+    <grid-layout rows="auto, *">
+        <list-view row="1" items="{{ users }}">
+            <list-view.itemTemplate>
+                <label text="{{ name }}" textWrap="true" fontSize="18" margin="20" />
+            </list-view.itemTemplate>
+        </list-view>
+        <android row="1">
+            <FAB:fab tap="fabTap"
+                             row="1"
+                             icon="res://ic_add_white"
+                             backColor="#ff4081"
+                             rippleColor="#f1f1f1"
+                             class="fab-button" />
+        </android>
+    </grid-layout>
 </Page>
 ```
 

demo/app/main-page.js

@@ -1,6 +1,22 @@
 var app = require("application");
+var observable = require("data/observable");
 var platformModule = require("platform");
 var color = require("color");
+  
+var users = [
+    { name: 'Billy Bob' },
+    { name: 'Tweeder' }, 
+    { name: 'Mox' },
+    { name: 'Coach' },
+    { name: 'Lance' },
+    { name: 'Johnson' },
+    { name: 'William' },
+    { name: 'Franklin' },
+    { name: 'Napoleon' },
+];
+var viewModel = new observable.Observable({
+    users: users
+});
 
 function pageLoaded(args) {
     var page = args.object; 
@@ -9,5 +25,6 @@ function pageLoaded(args) {
         var window = app.android.startActivity.getWindow(); 
         window.setStatusBarColor(new color.Color("#303F9F").android);
     }
+    page.bindingContext = viewModel;
 }
 exports.pageLoaded = pageLoaded;

demo/app/main-page.xml

@@ -1,18 +1,21 @@
-<Page xmlns="http://schemas.nativescript.org/tns.xsd"
-      xmlns:FAB="nativescript-floatingactionbutton" loaded="pageLoaded">
-    <Page.actionBar>
-    <ActionBar title="NativeScript-SignaturePad" color="#fff" backgroundColor="#3F51B5" />
-  </Page.actionBar>
-        <StackLayout>
-            <grid-layout rows="auto, *" id="main-content">
-                <label text="Native FAB down there..." class="title" row="0" />
-
-                <FAB:fab tap="fabTap"
-                         row="1"
-                         icon="res://ic_add_white"
-                         backColor="#ff4081"
-                         rippleColor="#f1f1f1"
-                         class="fab-button" />
-            </grid-layout>
-        </StackLayout>
-</Page>
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded"
+      xmlns:FAB="nativescript-floatingactionbutton">
+    <Page.actionBar>
+        <ActionBar title="Native FAB" backgroundColor="#3F51B5" color="#fff" />
+    </Page.actionBar>
+    <grid-layout rows="auto, *">
+        <list-view row="1" items="{{ users }}">
+            <list-view.itemTemplate>
+                <label text="{{ name }}" textWrap="true" fontSize="18" margin="20" />
+            </list-view.itemTemplate>
+        </list-view>
+        <android row="1">
+            <FAB:fab tap="fabTap"
+                             row="1"
+                             icon="res://ic_add_white"
+                             backColor="#ff4081"
+                             rippleColor="#f1f1f1"
+                             class="fab-button" />
+        </android>
+    </grid-layout>
+</Page>

fab.android.js

@@ -30,7 +30,7 @@
              this._android.setBackgroundTintList(android.content.res.ColorStateList.valueOf(this.backColor.android));
 
         if(this.icon){
-          iconDrawable = null;
+          var iconDrawable = null;
 
           if(ImageSource.isFileOrResourcePath(this.icon)){
             iconDrawable = ImageSource.fromFileOrResource(this.icon);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nativescript-floatingactionbutton",
-  "version": "0.1.71",
+  "version": "0.1.8",
   "description": "A NativeScript plugin to provide an XML widget to implement the Material Design Floating Action Button in an Android app.",
    "main": "fab.js",
   "nativescript": {