Skip to content

Commit 1719bfc

Browse files
tgpetrovtgpetrov
committed
Add more load on demand examples
1 parent ef07f37 commit 1719bfc

16 files changed

+444
-22
lines changed

‎sdkAngular/app/app.routing.ts

+28-7
Original file line numberDiff line numberDiff line change
@@ -54,13 +54,6 @@ let APP_ROUTES: Routes = [
5454
"title": "Selection states"
5555
}
5656
},
57-
{
58-
path: "ListViewLoadOnDemandComponent",
59-
loadChildren: './listview/listview-examples.module#ListViewExamplesModule',
60-
data: {
61-
"title": "Load on Demand"
62-
}
63-
},
6457
{
6558
path: "ListViewPullToRefreshComponent",
6659
loadChildren: './listview/listview-examples.module#ListViewExamplesModule',
@@ -131,6 +124,34 @@ let APP_ROUTES: Routes = [
131124
"title": "Item separators"
132125
}
133126
},
127+
{
128+
path: "ListViewDynamicSizeAutoComponent",
129+
loadChildren: './listview/listview-examples.module#ListViewExamplesModule',
130+
data: {
131+
"title": "Auto with Dynamic Size"
132+
}
133+
},
134+
{
135+
path: "ListViewDynamicSizeManualComponent",
136+
loadChildren: './listview/listview-examples.module#ListViewExamplesModule',
137+
data: {
138+
"title": "Manual with Dynamic Size"
139+
}
140+
},
141+
{
142+
path: "ListViewFixedSizeAutoComponent",
143+
loadChildren: './listview/listview-examples.module#ListViewExamplesModule',
144+
data: {
145+
"title": "Auto with Fixed Size"
146+
}
147+
},
148+
{
149+
path: "ListViewFixedSizeManualComponent",
150+
loadChildren: './listview/listview-examples.module#ListViewExamplesModule',
151+
data: {
152+
"title": "Manual with Fixed Size"
153+
}
154+
},
134155
{
135156
path: "SideDrawerGettingStartedComponent",
136157
loadChildren: './sidedrawer/sidedrawer-examples.module#SideDrawerExamplesModule',

‎sdkAngular/app/listview/listview-examples.module.ts

+8-2
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,10 @@ import { ListViewItemSelectionMultipleComponent } from './item-selection/listvie
1919
import { ListViewItemSelectionProgrammaticComponent } from './item-selection/listview-item-selection-programmatic.component';
2020
import { ListViewItemSelectionComponent } from './item-selection/listview-item-selection.component';
2121
import { ListViewItemSeparatorComponent } from './item-separator/listview-item-separator.component';
22-
import { ListViewLoadOnDemandComponent } from './load-on-demand/listview-load-on-demand.component';
22+
import { ListViewDynamicSizeAutoComponent } from './load-on-demand/dynamic-size-auto/listview-dynamic-size-auto.component';
23+
import { ListViewDynamicSizeManualComponent } from './load-on-demand/dynamic-size-manual/listview-dynamic-size-manual.component';
24+
import { ListViewFixedSizeAutoComponent } from './load-on-demand/fixed-size-auto/listview-fixed-size-auto.component';
25+
import { ListViewFixedSizeManualComponent } from './load-on-demand/fixed-size-manual/listview-fixed-size-manual.component';
2326
import { ListViewMultipleTemplatesComponent } from './multiple-templates/listview-multiple-templates.component';
2427
import { ListViewObservableArrayComponent } from './observable-array/listview-observable-array.component';
2528
import { ListViewPullToRefreshComponent } from './pull-to-refresh/listview-pull-to-refresh.component';
@@ -61,7 +64,10 @@ import { CommonDirectivesModule } from '../navigation/directives/common-directiv
6164
ListViewItemSelectionProgrammaticComponent,
6265
ListViewItemSelectionComponent,
6366
ListViewItemSeparatorComponent,
64-
ListViewLoadOnDemandComponent,
67+
ListViewDynamicSizeAutoComponent,
68+
ListViewDynamicSizeManualComponent,
69+
ListViewFixedSizeAutoComponent,
70+
ListViewFixedSizeManualComponent,
6571
ListViewMultipleTemplatesComponent,
6672
ListViewObservableArrayComponent,
6773
ListViewPullToRefreshComponent,

‎sdkAngular/app/listview/listview-examples.routing.ts

+8-2
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,10 @@ import { ListViewItemSelectionMultipleComponent } from './item-selection/listvie
1515
import { ListViewItemSelectionProgrammaticComponent } from './item-selection/listview-item-selection-programmatic.component';
1616
import { ListViewItemSelectionComponent } from './item-selection/listview-item-selection.component';
1717
import { ListViewItemSeparatorComponent } from './item-separator/listview-item-separator.component';
18-
import { ListViewLoadOnDemandComponent } from './load-on-demand/listview-load-on-demand.component';
18+
import { ListViewDynamicSizeAutoComponent } from './load-on-demand/dynamic-size-auto/listview-dynamic-size-auto.component';
19+
import { ListViewDynamicSizeManualComponent } from './load-on-demand/dynamic-size-manual/listview-dynamic-size-manual.component';
20+
import { ListViewFixedSizeAutoComponent } from './load-on-demand/fixed-size-auto/listview-fixed-size-auto.component';
21+
import { ListViewFixedSizeManualComponent } from './load-on-demand/fixed-size-manual/listview-fixed-size-manual.component';
1922
import { ListViewMultipleTemplatesComponent } from './multiple-templates/listview-multiple-templates.component';
2023
import { ListViewObservableArrayComponent } from './observable-array/listview-observable-array.component';
2124
import { ListViewPullToRefreshComponent } from './pull-to-refresh/listview-pull-to-refresh.component';
@@ -44,7 +47,10 @@ export const routes: Routes = [
4447
{ path: 'ListViewItemSelectionProgrammaticComponent', component: ListViewItemSelectionProgrammaticComponent },
4548
{ path: 'ListViewItemSelectionComponent', component: ListViewItemSelectionComponent },
4649
{ path: 'ListViewItemSeparatorComponent', component: ListViewItemSeparatorComponent },
47-
{ path: 'ListViewLoadOnDemandComponent', component: ListViewLoadOnDemandComponent },
50+
{ path: 'ListViewDynamicSizeAutoComponent', component: ListViewDynamicSizeAutoComponent },
51+
{ path: 'ListViewDynamicSizeManualComponent', component: ListViewDynamicSizeManualComponent },
52+
{ path: 'ListViewFixedSizeAutoComponent', component: ListViewFixedSizeAutoComponent },
53+
{ path: 'ListViewFixedSizeManualComponent', component: ListViewFixedSizeManualComponent },
4854
{ path: 'ListViewMultipleTemplatesComponent', component: ListViewMultipleTemplatesComponent },
4955
{ path: 'ListViewObservableArrayComponent', component: ListViewObservableArrayComponent },
5056
{ path: 'ListViewPullToRefreshComponent', component: ListViewPullToRefreshComponent },

‎sdkAngular/app/listview/load-on-demand/listview-load-on-demand.component.css renamed to ‎sdkAngular/app/listview/load-on-demand/dynamic-size-auto/listview-dynamic-size-auto.component.css

File renamed without changes.

‎sdkAngular/app/listview/load-on-demand/dynamic-size-auto/listview-dynamic-size-auto.component.html

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<GridLayout tkExampleTitle tkToggleNavButton>
2+
<RadListView [items]="dataItems" loadOnDemandMode="Auto" (loadMoreDataRequested)="onLoadMoreItemsRequested($event)">
3+
<ng-template tkListItemTemplate let-item="item">
4+
<StackLayout class="itemTemplateStackLayout" orientation="vertical">
5+
<StackLayout class="innerOtemTemplateStackLayout" orientation="horizontal">
6+
<Image *tkIfIOS [src]="item.image" stretch="aspectFit" width="100"></Image>
7+
<FrescoDrawee *tkIfAndroid height="100" width="100" [imageUri]="item.image"></FrescoDrawee>
8+
9+
<StackLayout class="labelsStackLayout" orientation="vertical">
10+
<Label class="labelName" [text]="item.name"></Label>
11+
<Label class="labelTitle" [text]="item.title" textWrap="true"></Label>
12+
<Label class="labelText" text="{{item.text}} + {{item.text}} + {{item.text}}" textWrap="true"></Label>
13+
</StackLayout>
14+
</StackLayout>
15+
</StackLayout>
16+
</ng-template>
17+
</RadListView>
18+
</GridLayout>

‎sdkAngular/app/listview/load-on-demand/dynamic-size-auto/listview-dynamic-size-auto.component.ts

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import { Component, OnInit, ChangeDetectorRef } from "@angular/core";
2+
import { ObservableArray } from "tns-core-modules/data/observable-array";
3+
import { DataItem } from "../../dataItem";
4+
import { ListViewLinearLayout, ListViewEventData, RadListView, ListViewLoadOnDemandMode } from "nativescript-pro-ui/listview";
5+
import * as applicationModule from "tns-core-modules/application";
6+
import * as Timer from "tns-core-modules/timer";
7+
var posts = require("../../../listview/posts.json")
8+
9+
@Component({
10+
moduleId: module.id,
11+
selector: "tk-listview-dynamic-size-auto",
12+
templateUrl: "listview-dynamic-size-auto.component.html",
13+
styleUrls: ["listview-dynamic-size-auto.component.css"]
14+
})
15+
16+
export class ListViewDynamicSizeAutoComponent implements OnInit {
17+
private _dataItems: ObservableArray<DataItem>;
18+
private _numberOfAddedItems;
19+
private layout: ListViewLinearLayout;
20+
21+
constructor(private _changeDetectionRef: ChangeDetectorRef) {
22+
}
23+
24+
ngOnInit() {
25+
this.layout = new ListViewLinearLayout();
26+
this.layout.scrollDirection = "Vertical";
27+
this.initDataItems();
28+
this._changeDetectionRef.detectChanges();
29+
}
30+
31+
public get dataItems(): ObservableArray<DataItem> {
32+
return this._dataItems;
33+
}
34+
35+
public onLoadMoreItemsRequested(args: ListViewEventData) {
36+
var that = new WeakRef(this);
37+
Timer.setTimeout(function () {
38+
var listView: RadListView = args.object;
39+
var initialNumberOfItems = that.get()._numberOfAddedItems;
40+
for (var i = that.get()._numberOfAddedItems; i < initialNumberOfItems + 2; i++) {
41+
if (i > posts.names.length - 1) {
42+
listView.loadOnDemandMode = ListViewLoadOnDemandMode[ListViewLoadOnDemandMode.None];
43+
break;
44+
}
45+
46+
var imageUri = applicationModule.android ? posts.images[i].toLowerCase() : posts.images[i];
47+
that.get()._dataItems.push(new DataItem(i, posts.names[i], "This is item description", posts.titles[i], posts.text[i], "res://" + imageUri));
48+
that.get()._numberOfAddedItems++;
49+
}
50+
51+
listView.notifyLoadOnDemandFinished();
52+
}, 1000);
53+
args.returnValue = true;
54+
}
55+
56+
private initDataItems() {
57+
this._dataItems = new ObservableArray<DataItem>();
58+
this._numberOfAddedItems = 0;
59+
for (var i = 0; i < posts.names.length - 15; i++) {
60+
this._numberOfAddedItems++;
61+
if (applicationModule.android) {
62+
this._dataItems.push(new DataItem(i, posts.names[i], "This is item description", posts.titles[i], posts.text[i], "res://" + posts.images[i].toLowerCase()));
63+
}
64+
else {
65+
this._dataItems.push(new DataItem(i, posts.names[i], "This is item description", posts.titles[i], posts.text[i], "res://" + posts.images[i]));
66+
}
67+
}
68+
}
69+
}

‎sdkAngular/app/listview/load-on-demand/dynamic-size-manual/listview-dynamic-size-manual.component.css

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
.itemTemplateStackLayout {
2+
padding: 5 10 5 10;
3+
background-color: #7fff7f;
4+
}
5+
6+
.innerOtemTemplateStackLayout {
7+
padding: 10;
8+
background-color: #65a565;
9+
}
10+
11+
.labelsStackLayout {
12+
margin-left: 15;
13+
}
14+
15+
.labelName {
16+
font-size: 20;
17+
margin-bottom: 8;
18+
}
19+
20+
.labelTitle {
21+
font-size: 14;
22+
font-weight: bold;
23+
}
24+
25+
.labelText {
26+
font-size: 12;
27+
color: white;
28+
}
29+
30+
.loadOnDemandItemGridLayout {
31+
background-color: #7fff7f;
32+
color: black;
33+
}

‎sdkAngular/app/listview/load-on-demand/dynamic-size-manual/listview-dynamic-size-manual.component.html

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<GridLayout tkExampleTitle tkToggleNavButton>
2+
<RadListView [items]="dataItems" loadOnDemandMode="Manual" (loadMoreDataRequested)="onLoadMoreItemsRequested($event)">
3+
<ng-template tkListItemTemplate let-item="item">
4+
<StackLayout class="itemTemplateStackLayout" orientation="vertical">
5+
<StackLayout class="innerOtemTemplateStackLayout" orientation="horizontal">
6+
<Image *tkIfIOS [src]="item.image" stretch="aspectFit" width="100"></Image>
7+
<FrescoDrawee *tkIfAndroid height="100" width="100" [imageUri]="item.image"></FrescoDrawee>
8+
9+
<StackLayout class="labelsStackLayout" orientation="vertical">
10+
<Label class="labelName" [text]="item.name"></Label>
11+
<Label class="labelTitle" [text]="item.title" textWrap="true"></Label>
12+
<Label class="labelText" text="{{item.text}} + {{item.text}} + {{item.text}}" textWrap="true"></Label>
13+
</StackLayout>
14+
</StackLayout>
15+
</StackLayout>
16+
</ng-template>
17+
18+
<div *tkIfIOS>
19+
<GridLayout *tkListLoadOnDemandTemplate class="loadOnDemandItemGridLayout">
20+
<Label text="Load More" horizontalAlignment="center" verticalAlignment="center"></Label>
21+
</GridLayout>
22+
</div>
23+
</RadListView>
24+
</GridLayout>

‎sdkAngular/app/listview/load-on-demand/dynamic-size-manual/listview-dynamic-size-manual.component.ts

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import { Component, OnInit, ChangeDetectorRef } from "@angular/core";
2+
import { ObservableArray } from "tns-core-modules/data/observable-array";
3+
import { DataItem } from "../../dataItem";
4+
import { ListViewLinearLayout, ListViewEventData, RadListView, ListViewLoadOnDemandMode } from "nativescript-pro-ui/listview";
5+
import * as applicationModule from "tns-core-modules/application";
6+
import * as Timer from "tns-core-modules/timer";
7+
var posts = require("../../../listview/posts.json")
8+
9+
@Component({
10+
moduleId: module.id,
11+
selector: "tk-listview-dynamic-size-manual",
12+
templateUrl: "listview-dynamic-size-manual.component.html",
13+
styleUrls: ["listview-dynamic-size-manual.component.css"]
14+
})
15+
16+
export class ListViewDynamicSizeManualComponent implements OnInit {
17+
private _dataItems: ObservableArray<DataItem>;
18+
private _numberOfAddedItems;
19+
private layout: ListViewLinearLayout;
20+
21+
constructor(private _changeDetectionRef: ChangeDetectorRef) {
22+
}
23+
24+
ngOnInit() {
25+
this.layout = new ListViewLinearLayout();
26+
this.layout.scrollDirection = "Vertical";
27+
this.initDataItems();
28+
this._changeDetectionRef.detectChanges();
29+
}
30+
31+
public get dataItems(): ObservableArray<DataItem> {
32+
return this._dataItems;
33+
}
34+
35+
public onLoadMoreItemsRequested(args: ListViewEventData) {
36+
var that = new WeakRef(this);
37+
Timer.setTimeout(function () {
38+
var listView: RadListView = args.object;
39+
var initialNumberOfItems = that.get()._numberOfAddedItems;
40+
for (var i = that.get()._numberOfAddedItems; i < initialNumberOfItems + 2; i++) {
41+
if (i > posts.names.length - 1) {
42+
listView.loadOnDemandMode = ListViewLoadOnDemandMode[ListViewLoadOnDemandMode.None];
43+
break;
44+
}
45+
46+
var imageUri = applicationModule.android ? posts.images[i].toLowerCase() : posts.images[i];
47+
that.get()._dataItems.push(new DataItem(i, posts.names[i], "This is item description", posts.titles[i], posts.text[i], "res://" + imageUri));
48+
that.get()._numberOfAddedItems++;
49+
}
50+
51+
listView.notifyLoadOnDemandFinished();
52+
}, 1000);
53+
args.returnValue = true;
54+
}
55+
56+
private initDataItems() {
57+
this._dataItems = new ObservableArray<DataItem>();
58+
this._numberOfAddedItems = 0;
59+
for (var i = 0; i < posts.names.length - 15; i++) {
60+
this._numberOfAddedItems++;
61+
if (applicationModule.android) {
62+
this._dataItems.push(new DataItem(i, posts.names[i], "This is item description", posts.titles[i], posts.text[i], "res://" + posts.images[i].toLowerCase()));
63+
}
64+
else {
65+
this._dataItems.push(new DataItem(i, posts.names[i], "This is item description", posts.titles[i], posts.text[i], "res://" + posts.images[i]));
66+
}
67+
}
68+
}
69+
}

‎sdkAngular/app/listview/load-on-demand/fixed-size-auto/listview-fixed-size-auto.component.css

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
.itemTemplateStackLayout {
2+
padding: 5 10 5 10;
3+
background-color: #7fff7f;
4+
}
5+
6+
.innerOtemTemplateStackLayout {
7+
padding: 10;
8+
background-color: #65a565;
9+
}
10+
11+
.labelsStackLayout {
12+
margin-left: 15;
13+
}
14+
15+
.labelName {
16+
font-size: 20;
17+
margin-bottom: 8;
18+
}
19+
20+
.labelTitle {
21+
font-size: 14;
22+
font-weight: bold;
23+
}
24+
25+
.labelText {
26+
font-size: 12;
27+
color: white;
28+
}
29+
30+
.loadOnDemandItemGridLayout {
31+
background-color: #7fff7f;
32+
color: black;
33+
}

‎sdkAngular/app/listview/load-on-demand/fixed-size-auto/listview-fixed-size-auto.component.html

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<GridLayout tkExampleTitle tkToggleNavButton>
2+
<RadListView [items]="dataItems" loadOnDemandMode="Auto" (loadMoreDataRequested)="onLoadMoreItemsRequested($event)">
3+
<ng-template tkListItemTemplate let-item="item">
4+
<StackLayout class="itemTemplateStackLayout" orientation="vertical">
5+
<StackLayout class="innerOtemTemplateStackLayout" orientation="horizontal">
6+
<Image *tkIfIOS [src]="item.image" stretch="aspectFit" width="100"></Image>
7+
<FrescoDrawee *tkIfAndroid height="100" width="100" [imageUri]="item.image"></FrescoDrawee>
8+
9+
<StackLayout class="labelsStackLayout" orientation="vertical">
10+
<Label class="labelName" [text]="item.name"></Label>
11+
<Label class="labelTitle" [text]="item.title" textWrap="true"></Label>
12+
<Label class="labelText" [text]="item.text" textWrap="true"></Label>
13+
</StackLayout>
14+
</StackLayout>
15+
</StackLayout>
16+
</ng-template>
17+
18+
<ListViewLinearLayout *tkIfIOS tkListViewLayout itemHeight="120"></ListViewLinearLayout>
19+
</RadListView>
20+
</GridLayout>

0 commit comments

Comments
 (0)