Update listview demo

listview/README.md

@@ -4,4 +4,4 @@ This is a demo application that showcases the plugin in action.
 
 # Running the application
 
-If you are coming here for the first time after cloning the repository make sure to build the plugin's code located in the `src` folder. To build it simply run the `npm run postclone` scripts in `src`. After that you can use the NativeScripty CLI commands like `tns run` as usual.
+Make sure you are using the latest NativeScript CLI version by running `npm i nativescript -g`. Then run `tns run android` or `tns run ios` depending on the platform you want to run the application on.

listview/app/examples/GettingStarted.ts

@@ -2,7 +2,7 @@ import { getItemList } from '../data';
 import * as frameModule from "tns-core-modules/ui/frame";
 
 const description = 'Getting Started';
-
+// >> listview-getting-started-vue
 export default {
   name: 'GettingStarted',
   description: description,
@@ -40,3 +40,4 @@ export default {
     }
   }
 };
+// << listview-getting-started-vue

listview/app/examples/GridLayout.ts

@@ -2,7 +2,7 @@ import { simpleItemList } from '../data';
 import * as frameModule from "tns-core-modules/ui/frame";
 
 const description = 'Grid Layout';
-
+// >> listvue-gridlayout-vue
 export default {
   name: 'GridLayoutList',
   description: description,
@@ -41,3 +41,4 @@ export default {
     }
   }
 };
+// << listvue-gridlayout-vue

listview/app/examples/GroupScrollTo.ts

@@ -0,0 +1,69 @@
+import * as frameModule from "tns-core-modules/ui/frame";
+import { ObservableArray } from "tns-core-modules/data/observable-array";
+
+
+export class DataItem {
+  public id: number;
+  public name: string;
+  public description: string;
+  public category: string;
+
+  constructor(id: number, name: string, description: string, category: string) {
+    this.id = id;
+    this.name = name;
+    this.description = description;
+    this.category = category;
+  }
+}
+
+const description = 'Grouping with Scroll to Index';
+let items = [];
+for (let i = 0; i < 50; i++) {
+  items.push(new DataItem(i, "item " + i, "description " + i, i % 2 === 0 ? "Group 1" : "Group 2"));
+}
+let dataItems = new ObservableArray<DataItem>(items);
+
+export default {
+  name: 'GroupScrollTo',
+  description: description,
+  template: `
+  <Page>
+    <ActionBar :title="title">
+      <NavigationButton text="Back" android.systemIcon="ic_menu_back" @tap="onNavigationButtonTap"></NavigationButton>
+    </ActionBar>
+    <GridLayout rows="auto, *" rows="auto, *">
+      <Button text="Scroll to 1 index" @tap="onScrollTo"></Button>
+      <RadListView row="1" ref="myListView" for="item in itemList" :groupingFunction="getItemGroup">
+        <v-template>
+          <StackLayout>
+            <Label fontSize="20" :text="item.name"/>
+            <Label fontSize="14" :text="item.description"/>
+          </StackLayout>
+        </v-template>
+        <v-template name="group">
+          <GridLayout ios:height="50">
+              <Label :text="item.category" backgroundColor="lightblue" padding="15"/>
+          </GridLayout>
+        </v-template>
+      </RadListView>
+    </GridLayout>
+  </Page>
+  `,
+  data() {
+    return {
+      title: description,
+      itemList: dataItems,
+    };
+  },
+  methods: {
+    onNavigationButtonTap() {
+      frameModule.topmost().goBack();
+    },
+    getItemGroup(item) {
+      return item.category;
+    },
+    onScrollTo() {
+      this.$refs.myListView.nativeView.scrollToIndex(1);
+    }
+  }
+};

listview/app/examples/GroupWithHeaderFooter.ts

@@ -0,0 +1,65 @@
+import * as frameModule from "tns-core-modules/ui/frame";
+
+const description = 'Group with header/footer';
+
+export default {
+  name: 'Group with header/footer',
+  description: description,
+  template: `
+  <Page>
+    <ActionBar :title="title">
+      <NavigationButton text="Back" android.systemIcon="ic_menu_back" @tap="onNavigationButtonTap"></NavigationButton>
+    </ActionBar>
+    <GridLayout orientation="vertical" rows="auto, *">
+      <StackLayout orientation="horizontal">
+        <Button :text="isEnabled ? 'Disable grouping' : 'Enable grouping'" @tap="toggleGrouping"></Button>
+      </StackLayout>
+      <RadListView row="1" ref="myListView" for="item in itemList" :groupingFunction="getItemGroup">
+        <v-template>
+          <StackLayout class="item" orientation="vertical">
+            <Label :text="item.name" class="nameLabel"></Label>
+          </StackLayout>
+        </v-template>
+        <v-template name="header">
+          <Label text="Header with height auto" backgroundColor="#65a565" fontSize="45"></Label>
+        </v-template>
+        <v-template name="footer">
+          <Label text="Footer with height auto" backgroundColor="#7fff7f"></Label>
+        </v-template>
+      </RadListView>
+    </GridLayout>
+  </Page>
+  `,
+  data() {
+    return {
+      title: description,
+      isEnabled: true,
+      itemList: [
+        { name: 'Item 1', group: 'Ready' },
+        { name: 'Item 2', group: 'Completed' },
+        { name: 'Item 3', group: 'Completed' },
+        { name: 'Item 4', group: 'Ready' },
+        { name: 'Item 5', group: 'Completed' },
+        { name: 'Item 6', group: 'Completed' },
+      ],
+    };
+  },
+  methods: {
+    onNavigationButtonTap() {
+      frameModule.topmost().goBack();
+    },
+    getItemGroup(item) {
+      return item.group;
+    },
+    toggleGrouping() {
+      let listView = this.$refs.myListView.nativeView;
+      if (!listView.groupingFunction) {
+        listView.groupingFunction = this.getItemGroup;
+        this.isEnabled = true;
+      } else {
+        listView.groupingFunction = undefined;
+        this.isEnabled = false;
+      }
+    }
+  }
+};

listview/app/examples/ItemReorder.ts

@@ -2,7 +2,7 @@ import { simpleItemList } from '../data';
 import * as frameModule from "tns-core-modules/ui/frame";
 
 const description = 'Item Reorder';
-
+// >> listview-itemreorder-vue
 export default {
   name: 'ItemReorder',
   description: description,
@@ -41,3 +41,4 @@ export default {
     }
   }
 };
+// << listview-itemreorder-vue

listview/app/examples/ItemSelection.ts

@@ -4,7 +4,7 @@ import * as frameModule from "tns-core-modules/ui/frame";
 import { ObservableArray } from 'tns-core-modules/data/observable-array';
 
 const description = 'Item Selection';
-
+// >> listview-itemselection-vue
 export default {
   name: 'ItemSelection',
   description: description,
@@ -60,3 +60,4 @@ export default {
     }
   }
 };
+// << listview-itemselection-vue

listview/app/examples/LoadOnDemand.ts

@@ -0,0 +1,75 @@
+import { isIOS } from 'tns-core-modules/platform';
+import { RadListView } from 'nativescript-ui-listview';
+import { getItemList } from '../data';
+
+const description = 'Load On Demand';
+
+let allItems = getItemList(20);
+const chunkSize = 6;
+
+const nextItems = () => {
+  return allItems.splice(0, chunkSize);
+};
+
+const initItems = () => {
+  allItems = getItemList(20);
+  return allItems.splice(0, chunkSize);
+};
+
+export default {
+  name: 'LoadOnDemand',
+  description: description,
+  template: `
+  <Page>
+    <ActionBar :title="title">
+      <NavigationButton text="Back" android.systemIcon="ic_menu_back" @tap="onNavigationButtonTap"></NavigationButton>
+    </ActionBar>
+    <StackLayout>
+      <RadListView for="item in itemList"
+                   loadOnDemandMode="Manual"
+                   @loadMoreDataRequested="onLoadMoreItemsRequested">
+        <v-template>
+          <StackLayout class="item p-10" orientation="vertical">
+            <Label id="label" :text="item.name" class="nameLabel m-t-10"></Label>
+            <Label id="label" :text="item.description" class="descriptionLabel"></Label>
+          </StackLayout>
+        </v-template>
+        <v-template v-if="isIOS" name="loadondemand">
+          <GridLayout style="background-color: white">
+            <Label text="Load more" horizontalAlignment="center" verticalAlignment="center"></Label>
+          </GridLayout>
+        </v-template>
+      </RadListView>
+    </StackLayout>
+  </Page>
+  `,
+  data () {
+    return {
+      title: description,
+      itemList: initItems(),
+      isIOS: isIOS,
+    };
+  },
+  methods: {
+    onLoadMoreItemsRequested(args) {
+      const listView: RadListView = args.object;
+      let self = this;
+      if (allItems.length > 0) {
+          setTimeout(function () {
+            console.log('Loading more items...');
+            nextItems().forEach(item => {
+              self.itemList.push(item);
+            });
+            listView.notifyLoadOnDemandFinished();
+          }, 1500);
+          args.returnValue = true;
+      } else {
+          args.returnValue = false;
+          listView.notifyLoadOnDemandFinished(true);
+      }
+    },
+    onNavigationButtonTap() {
+      this.$navigateBack();
+    }
+  }
+};

listview/app/examples/MultipleTemplates.ts

@@ -1,7 +1,7 @@
 import * as frameModule from "tns-core-modules/ui/frame";
 
 const description = 'Multiple Templates';
-
+// >> listview-multipletemplates-itemselector-vue
 export default {
   name: 'MultipleTemplates',
   description: 'Multiple Templates',
@@ -90,3 +90,4 @@ export default {
     },
   }
 };
+// << listview-multipletemplates-itemselector-vue

listview/app/examples/PullToRefresh.ts

@@ -1,7 +1,7 @@
 import * as frameModule from "tns-core-modules/ui/frame";
 
 const description = 'Pull To Refresh';
-
+// >> listview-pulltorefresh-vue
 export default {
   name: 'PullToRefresh',
   description: description,
@@ -74,3 +74,4 @@ export default {
     }
   }
 };
+// << listview-pulltorefresh-vue

listview/app/examples/ScrollTo.ts

@@ -3,7 +3,7 @@ import * as frameModule from "tns-core-modules/ui/frame";
 import { ListViewItemSnapMode } from "nativescript-ui-listview";
 
 const description = 'Scroll To Item';
-
+// >> listview-scrolling-vue
 export default {
   name: 'ScrollTo',
   description: description,
@@ -63,3 +63,4 @@ export default {
     }
   }
 };
+// << listview-scrolling-vue

listview/app/examples/StaggeredLayout.ts

@@ -1,7 +1,7 @@
 import * as frameModule from "tns-core-modules/ui/frame";
 
 const description = 'Staggered Layout';
-
+// >> listview-staggeredlayout-vue
 const words = ['One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine', 'Ten'];
 
 const getRandomString = () => {
@@ -63,3 +63,4 @@ export default {
     }
   }
 };
+// << listview-staggeredlayout-vue

listview/app/examples/SwipeActions.ts

@@ -2,7 +2,7 @@ import { getItemList } from '../data';
 import * as frameModule from 'tns-core-modules/ui/frame';
 
 const description = 'Swipe Actions';
-
+// >> listview-swipeactions-vue
 export default {
   name: 'SwipeActions',
   description: description,
@@ -72,3 +72,4 @@ export default {
     },
   }
 };
+// << listview-swipeactions-vue

listview/app/examples/index.ts

@@ -5,13 +5,16 @@ import ItemAnimations from './ItemAnimations';
 import ItemLoading from './ItemLoading';
 import ItemReorder from './ItemReorder';
 import ItemSelection from './ItemSelection';
+import LoadOnDemand from './LoadOnDemand';
 import MultipleTemplates from './MultipleTemplates';
 import Observable from './Observable';
 import PullToRefresh from './PullToRefresh';
 import ScrollTo from './ScrollTo';
 import StaggeredLayout from './StaggeredLayout';
 import SwipeActions from './SwipeActions';
 import Group from './Group';
+import GroupScrollTo from './GroupScrollTo';
+import GroupWithHeaderFooter from './GroupWithHeaderFooter';
 import TemplateGroup from './TemplateGroup';
 
 export const getExamples = () => {
@@ -25,8 +28,11 @@ export const getExamples = () => {
     ItemLoading,
     ItemReorder,
     ItemSelection,
+    LoadOnDemand,
     MultipleTemplates,
     Group,
+    GroupScrollTo,
+    GroupWithHeaderFooter,
     TemplateGroup,
     ScrollTo,
     SwipeActions,