Skip to content

Commit 8de9482

Browse files
DimitarTodorovDimitarTodorov
authored
Merge pull request #55 from telerik/dtodorov/update-listview-demo
Update listview demo
2 parents c11ccc4 + fc67b97 commit 8de9482

18 files changed

+248
-27
lines changed

‎listview/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,4 @@ This is a demo application that showcases the plugin in action.
44

55
# Running the application
66

7-
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.
7+
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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { getItemList } from '../data';
22
import * as frameModule from "tns-core-modules/ui/frame";
33

44
const description = 'Getting Started';
5-
5+
// >> listview-getting-started-vue
66
export default {
77
name: 'GettingStarted',
88
description: description,
@@ -40,3 +40,4 @@ export default {
4040
}
4141
}
4242
};
43+
// << listview-getting-started-vue

‎listview/app/examples/GridLayout.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { simpleItemList } from '../data';
22
import * as frameModule from "tns-core-modules/ui/frame";
33

44
const description = 'Grid Layout';
5-
5+
// >> listvue-gridlayout-vue
66
export default {
77
name: 'GridLayoutList',
88
description: description,
@@ -41,3 +41,4 @@ export default {
4141
}
4242
}
4343
};
44+
// << listvue-gridlayout-vue

‎listview/app/examples/GroupScrollTo.ts

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import * as frameModule from "tns-core-modules/ui/frame";
2+
import { ObservableArray } from "tns-core-modules/data/observable-array";
3+
4+
5+
export class DataItem {
6+
public id: number;
7+
public name: string;
8+
public description: string;
9+
public category: string;
10+
11+
constructor(id: number, name: string, description: string, category: string) {
12+
this.id = id;
13+
this.name = name;
14+
this.description = description;
15+
this.category = category;
16+
}
17+
}
18+
19+
const description = 'Grouping with Scroll to Index';
20+
let items = [];
21+
for (let i = 0; i < 50; i++) {
22+
items.push(new DataItem(i, "item " + i, "description " + i, i % 2 === 0 ? "Group 1" : "Group 2"));
23+
}
24+
let dataItems = new ObservableArray<DataItem>(items);
25+
26+
export default {
27+
name: 'GroupScrollTo',
28+
description: description,
29+
template: `
30+
<Page>
31+
<ActionBar :title="title">
32+
<NavigationButton text="Back" android.systemIcon="ic_menu_back" @tap="onNavigationButtonTap"></NavigationButton>
33+
</ActionBar>
34+
<GridLayout rows="auto, *" rows="auto, *">
35+
<Button text="Scroll to 1 index" @tap="onScrollTo"></Button>
36+
<RadListView row="1" ref="myListView" for="item in itemList" :groupingFunction="getItemGroup">
37+
<v-template>
38+
<StackLayout>
39+
<Label fontSize="20" :text="item.name"/>
40+
<Label fontSize="14" :text="item.description"/>
41+
</StackLayout>
42+
</v-template>
43+
<v-template name="group">
44+
<GridLayout ios:height="50">
45+
<Label :text="item.category" backgroundColor="lightblue" padding="15"/>
46+
</GridLayout>
47+
</v-template>
48+
</RadListView>
49+
</GridLayout>
50+
</Page>
51+
`,
52+
data() {
53+
return {
54+
title: description,
55+
itemList: dataItems,
56+
};
57+
},
58+
methods: {
59+
onNavigationButtonTap() {
60+
frameModule.topmost().goBack();
61+
},
62+
getItemGroup(item) {
63+
return item.category;
64+
},
65+
onScrollTo() {
66+
this.$refs.myListView.nativeView.scrollToIndex(1);
67+
}
68+
}
69+
};

‎listview/app/examples/GroupWithHeaderFooter.ts

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import * as frameModule from "tns-core-modules/ui/frame";
2+
3+
const description = 'Group with header/footer';
4+
5+
export default {
6+
name: 'Group with header/footer',
7+
description: description,
8+
template: `
9+
<Page>
10+
<ActionBar :title="title">
11+
<NavigationButton text="Back" android.systemIcon="ic_menu_back" @tap="onNavigationButtonTap"></NavigationButton>
12+
</ActionBar>
13+
<GridLayout orientation="vertical" rows="auto, *">
14+
<StackLayout orientation="horizontal">
15+
<Button :text="isEnabled ? 'Disable grouping' : 'Enable grouping'" @tap="toggleGrouping"></Button>
16+
</StackLayout>
17+
<RadListView row="1" ref="myListView" for="item in itemList" :groupingFunction="getItemGroup">
18+
<v-template>
19+
<StackLayout class="item" orientation="vertical">
20+
<Label :text="item.name" class="nameLabel"></Label>
21+
</StackLayout>
22+
</v-template>
23+
<v-template name="header">
24+
<Label text="Header with height auto" backgroundColor="#65a565" fontSize="45"></Label>
25+
</v-template>
26+
<v-template name="footer">
27+
<Label text="Footer with height auto" backgroundColor="#7fff7f"></Label>
28+
</v-template>
29+
</RadListView>
30+
</GridLayout>
31+
</Page>
32+
`,
33+
data() {
34+
return {
35+
title: description,
36+
isEnabled: true,
37+
itemList: [
38+
{ name: 'Item 1', group: 'Ready' },
39+
{ name: 'Item 2', group: 'Completed' },
40+
{ name: 'Item 3', group: 'Completed' },
41+
{ name: 'Item 4', group: 'Ready' },
42+
{ name: 'Item 5', group: 'Completed' },
43+
{ name: 'Item 6', group: 'Completed' },
44+
],
45+
};
46+
},
47+
methods: {
48+
onNavigationButtonTap() {
49+
frameModule.topmost().goBack();
50+
},
51+
getItemGroup(item) {
52+
return item.group;
53+
},
54+
toggleGrouping() {
55+
let listView = this.$refs.myListView.nativeView;
56+
if (!listView.groupingFunction) {
57+
listView.groupingFunction = this.getItemGroup;
58+
this.isEnabled = true;
59+
} else {
60+
listView.groupingFunction = undefined;
61+
this.isEnabled = false;
62+
}
63+
}
64+
}
65+
};

‎listview/app/examples/ItemReorder.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { simpleItemList } from '../data';
22
import * as frameModule from "tns-core-modules/ui/frame";
33

44
const description = 'Item Reorder';
5-
5+
// >> listview-itemreorder-vue
66
export default {
77
name: 'ItemReorder',
88
description: description,
@@ -41,3 +41,4 @@ export default {
4141
}
4242
}
4343
};
44+
// << listview-itemreorder-vue

‎listview/app/examples/ItemSelection.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import * as frameModule from "tns-core-modules/ui/frame";
44
import { ObservableArray } from 'tns-core-modules/data/observable-array';
55

66
const description = 'Item Selection';
7-
7+
// >> listview-itemselection-vue
88
export default {
99
name: 'ItemSelection',
1010
description: description,
@@ -60,3 +60,4 @@ export default {
6060
}
6161
}
6262
};
63+
// << listview-itemselection-vue

‎listview/app/examples/LoadOnDemand.ts

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import { isIOS } from 'tns-core-modules/platform';
2+
import { RadListView } from 'nativescript-ui-listview';
3+
import { getItemList } from '../data';
4+
5+
const description = 'Load On Demand';
6+
7+
let allItems = getItemList(20);
8+
const chunkSize = 6;
9+
10+
const nextItems = () => {
11+
return allItems.splice(0, chunkSize);
12+
};
13+
14+
const initItems = () => {
15+
allItems = getItemList(20);
16+
return allItems.splice(0, chunkSize);
17+
};
18+
19+
export default {
20+
name: 'LoadOnDemand',
21+
description: description,
22+
template: `
23+
<Page>
24+
<ActionBar :title="title">
25+
<NavigationButton text="Back" android.systemIcon="ic_menu_back" @tap="onNavigationButtonTap"></NavigationButton>
26+
</ActionBar>
27+
<StackLayout>
28+
<RadListView for="item in itemList"
29+
loadOnDemandMode="Manual"
30+
@loadMoreDataRequested="onLoadMoreItemsRequested">
31+
<v-template>
32+
<StackLayout class="item p-10" orientation="vertical">
33+
<Label id="label" :text="item.name" class="nameLabel m-t-10"></Label>
34+
<Label id="label" :text="item.description" class="descriptionLabel"></Label>
35+
</StackLayout>
36+
</v-template>
37+
<v-template v-if="isIOS" name="loadondemand">
38+
<GridLayout style="background-color: white">
39+
<Label text="Load more" horizontalAlignment="center" verticalAlignment="center"></Label>
40+
</GridLayout>
41+
</v-template>
42+
</RadListView>
43+
</StackLayout>
44+
</Page>
45+
`,
46+
data () {
47+
return {
48+
title: description,
49+
itemList: initItems(),
50+
isIOS: isIOS,
51+
};
52+
},
53+
methods: {
54+
onLoadMoreItemsRequested(args) {
55+
const listView: RadListView = args.object;
56+
let self = this;
57+
if (allItems.length > 0) {
58+
setTimeout(function () {
59+
console.log('Loading more items...');
60+
nextItems().forEach(item => {
61+
self.itemList.push(item);
62+
});
63+
listView.notifyLoadOnDemandFinished();
64+
}, 1500);
65+
args.returnValue = true;
66+
} else {
67+
args.returnValue = false;
68+
listView.notifyLoadOnDemandFinished(true);
69+
}
70+
},
71+
onNavigationButtonTap() {
72+
this.$navigateBack();
73+
}
74+
}
75+
};

‎listview/app/examples/MultipleTemplates.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as frameModule from "tns-core-modules/ui/frame";
22

33
const description = 'Multiple Templates';
4-
4+
// >> listview-multipletemplates-itemselector-vue
55
export default {
66
name: 'MultipleTemplates',
77
description: 'Multiple Templates',
@@ -90,3 +90,4 @@ export default {
9090
},
9191
}
9292
};
93+
// << listview-multipletemplates-itemselector-vue

‎listview/app/examples/PullToRefresh.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as frameModule from "tns-core-modules/ui/frame";
22

33
const description = 'Pull To Refresh';
4-
4+
// >> listview-pulltorefresh-vue
55
export default {
66
name: 'PullToRefresh',
77
description: description,
@@ -74,3 +74,4 @@ export default {
7474
}
7575
}
7676
};
77+
// << listview-pulltorefresh-vue

‎listview/app/examples/ScrollTo.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import * as frameModule from "tns-core-modules/ui/frame";
33
import { ListViewItemSnapMode } from "nativescript-ui-listview";
44

55
const description = 'Scroll To Item';
6-
6+
// >> listview-scrolling-vue
77
export default {
88
name: 'ScrollTo',
99
description: description,
@@ -63,3 +63,4 @@ export default {
6363
}
6464
}
6565
};
66+
// << listview-scrolling-vue

‎listview/app/examples/StaggeredLayout.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as frameModule from "tns-core-modules/ui/frame";
22

33
const description = 'Staggered Layout';
4-
4+
// >> listview-staggeredlayout-vue
55
const words = ['One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine', 'Ten'];
66

77
const getRandomString = () => {
@@ -63,3 +63,4 @@ export default {
6363
}
6464
}
6565
};
66+
// << listview-staggeredlayout-vue

‎listview/app/examples/SwipeActions.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { getItemList } from '../data';
22
import * as frameModule from 'tns-core-modules/ui/frame';
33

44
const description = 'Swipe Actions';
5-
5+
// >> listview-swipeactions-vue
66
export default {
77
name: 'SwipeActions',
88
description: description,
@@ -72,3 +72,4 @@ export default {
7272
},
7373
}
7474
};
75+
// << listview-swipeactions-vue

‎listview/app/examples/index.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,16 @@ import ItemAnimations from './ItemAnimations';
55
import ItemLoading from './ItemLoading';
66
import ItemReorder from './ItemReorder';
77
import ItemSelection from './ItemSelection';
8+
import LoadOnDemand from './LoadOnDemand';
89
import MultipleTemplates from './MultipleTemplates';
910
import Observable from './Observable';
1011
import PullToRefresh from './PullToRefresh';
1112
import ScrollTo from './ScrollTo';
1213
import StaggeredLayout from './StaggeredLayout';
1314
import SwipeActions from './SwipeActions';
1415
import Group from './Group';
16+
import GroupScrollTo from './GroupScrollTo';
17+
import GroupWithHeaderFooter from './GroupWithHeaderFooter';
1518
import TemplateGroup from './TemplateGroup';
1619

1720
export const getExamples = () => {
@@ -25,8 +28,11 @@ export const getExamples = () => {
2528
ItemLoading,
2629
ItemReorder,
2730
ItemSelection,
31+
LoadOnDemand,
2832
MultipleTemplates,
2933
Group,
34+
GroupScrollTo,
35+
GroupWithHeaderFooter,
3036
TemplateGroup,
3137
ScrollTo,
3238
SwipeActions,

0 commit comments

Comments
 (0)