Skip to content

Commit 5882000

Browse files
SvetoslavTsenovSvetoslavTsenov
committed
Include test pages for ListView
1 parent 0aec282 commit 5882000

File tree

8 files changed

+202
-30
lines changed

8 files changed

+202
-30
lines changed

‎app/binding/binding-page.ts

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,29 @@
1-
import {Component} from "@angular/core";
1+
import { Component } from "@angular/core";
22

33
@Component({
44
selector: "binding",
5-
templateUrl: 'binding/binding-page.xml'
5+
template: `
6+
<StackLayout>
7+
<TextField hint="oneWayDataBinding" automationText="tfOneWayBinding" keyboardType="email" [text]="oneWayDataBinding" autocorrect="false" autocapitalizationType="none"></TextField>
8+
<TextField hint="twoWayDataBindingBanana" automationText="tfTwoWayBinding" keyboardType="email" [(ngModel)]="twoWayDataBinding" autocorrect="false" autocapitalizationType="none"></TextField>
9+
<TextField hint="" automationText="tfCurlyBracket" keyboardType="email" text="{{ curlyBracket }}" autocorrect="false" autocapitalizationType="none"></TextField>
10+
<Label automationText="lbCurlyBracketBinding" text='Label with curlyBaracket binding: {{ twoWayDataBinding }}'></Label>
11+
<Label automationText="lbDate" [text]='completedDate | date:"fullDate"' ></Label>
12+
<StackLayout orientation="horizontal">
13+
<Button (tap)="changeValues()" automationText="changeValues" text="update from code" ></Button>
14+
<Button (tap)="getValues()" automationText="getValues" text="get" width="80" height="40"></Button>
15+
</StackLayout>
16+
<TextView [text]="results" automationText="tvResults" textWrap="true"></TextView>
17+
</StackLayout>
18+
`
619
})
720

821
export class BindingComponent {
922
private _oneWayDataBinding: string;
1023
private _twoWayDataBinding: string;
1124
private _curlyBracket: string;
1225
private _result: string;
26+
public completedDate: Date = new Date("2016-06-03");
1327

1428
constructor() {
1529
this.refresh();
@@ -53,9 +67,9 @@ export class BindingComponent {
5367
}
5468

5569
private refresh() {
56-
this._oneWayDataBinding = "one-way";
57-
this._twoWayDataBinding = "two-way";
58-
this._curlyBracket = "curly-bracket";
70+
this._oneWayDataBinding = "1";
71+
this._twoWayDataBinding = "2";
72+
this._curlyBracket = "3";
5973
this._result = ""
6074
}
6175
}

‎app/binding/binding-page.xml

Lines changed: 0 additions & 12 deletions
This file was deleted.

‎app/listView/asyncPipeTemplate/async-pipe-template.ts

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import { Observable as RxObservable } from 'rxjs/Observable';
2+
import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
3+
4+
export class DataItem {
5+
constructor(public id: number, public name: string) { }
6+
}
7+
8+
@Component({
9+
selector: 'list-test-async',
10+
template: `
11+
<GridLayout rows='*,60'>
12+
<ListView [items]="myItems | async">
13+
<template let-item="item" let-i="index" let-odd="odd" let-even="even">
14+
<StackLayout [class.odd]="odd" [class.even]="even">
15+
<Label [text]='"index: " + item.name'></Label>
16+
</StackLayout>
17+
</template>
18+
</ListView>
19+
<TextView row='1' [text]='output' automationText="tvResult" textWrap="true"></TextView>
20+
</GridLayout>
21+
`,
22+
changeDetection: ChangeDetectionStrategy.OnPush
23+
})
24+
export class ListViewAsyncPipeComponent {
25+
public myItems: RxObservable<Array<DataItem>>;
26+
public output: string;
27+
28+
constructor() {
29+
var items = [];
30+
for (var i = 0; i < 3; i++) {
31+
items.push(new DataItem(i, "data item " + i));
32+
}
33+
34+
var subscr;
35+
this.myItems = RxObservable.create(subscriber => {
36+
subscr = subscriber;
37+
subscriber.next(items);
38+
return function () {
39+
console.log("Unsubscribe called!!!");
40+
this.output = "Unsubscribe called!!!";
41+
}
42+
});
43+
44+
let counter = 2;
45+
let intervalId = setInterval(() => {
46+
counter++;
47+
items.push(new DataItem(counter, "data item " + counter));
48+
subscr.next(items);
49+
}, 500);
50+
51+
setTimeout(() => {
52+
clearInterval(intervalId);
53+
}, 5000);
54+
}
55+
}

‎app/listView/commonTemplate/list-view-page.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.odd {
2+
background-color: red;
3+
}
4+
5+
.even {
6+
background-color: blue;
7+
}

‎app/listView/commonTemplate/list-view-page.ts

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
2+
3+
@Component({
4+
selector: 'list-test',
5+
styleUrls: ['./listView/commonTemplate/list-view-page.css'],
6+
template: `
7+
<StackLayout>
8+
<ListView [items]="myItems" (itemTap)="onItemTap($event)">
9+
<template let-item="item" let-i="index" let-odd="odd" let-even="even">
10+
<StackLayout [class.odd]="odd" [class.even]="even">
11+
<Label [text]='"index: " + i'></Label>
12+
<Label [text]='"[" + item.id +"] " + item.name'></Label>
13+
</StackLayout>
14+
</template>
15+
</ListView>
16+
<TextView [text]="results" automationText="tvResults" textWrap="true"></TextView>
17+
</StackLayout>
18+
`,
19+
changeDetection: ChangeDetectionStrategy.OnPush
20+
})
21+
22+
export class ListViewComponent {
23+
public myItems: Array<DataItem>;
24+
public results: string;
25+
private counter: number;
26+
27+
constructor() {
28+
this.results = '';
29+
this.myItems = [];
30+
this.counter = 0;
31+
for (var i = 0; i < 5; i++) {
32+
this.myItems.push(new DataItem(i, "data item " + i));
33+
this.counter = i;
34+
}
35+
}
36+
37+
public onItemTap(args) {
38+
this.results += "ItemTapped: " + args.index + "; \n";
39+
}
40+
}
41+
42+
43+
class DataItem {
44+
constructor(public id: number, public name: string) { }
45+
}

‎app/listView/customTemplate/list-view-item-template.ts

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
2+
3+
@Component({
4+
selector: 'custom-template',
5+
template: `
6+
<StackLayout>
7+
<Label *ngFor="let element of data.list" [text]="element.text"></Label>
8+
</StackLayout>
9+
`
10+
})
11+
export class CustomTemplate {
12+
@Input() data: any;
13+
constructor() { }
14+
}
15+
16+
@Component({
17+
selector: 'list-test',
18+
directives: [CustomTemplate],
19+
template: `
20+
<GridLayout rows="*">
21+
<ListView [items]="myItems">
22+
<template let-item="item">
23+
<custom-template [data]="item"></custom-template>
24+
</template>
25+
</ListView>
26+
</GridLayout>
27+
`,
28+
changeDetection: ChangeDetectionStrategy.OnPush
29+
})
30+
export class ListViewControlComponent {
31+
public myItems: Array<any>;
32+
private counter: number;
33+
34+
constructor() {
35+
var list = [{ "text": "a" }, { "text": "b" }];
36+
var list1 = [{ "text": "c" }, { "text": "d" }];
37+
this.myItems = [{ "list": list }, { "list": list1 }];
38+
}
39+
}
40+

‎app/listView/listViewMainPage/list-view-main-page.ts

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import {Component} from "@angular/core";
2+
import {NS_ROUTER_DIRECTIVES} from "nativescript-angular/router";
3+
4+
@Component({
5+
selector: "main",
6+
directives: [NS_ROUTER_DIRECTIVES],
7+
template: `
8+
<StackLayout>
9+
<Button text="ListView" [nsRouterLink]="['ListView']"></Button>
10+
<Button text="ListViewCustomTemplate" [nsRouterLink]="['ListViewCustomTemplate']"></Button>
11+
<Button text="ListViewAsyncPipe" [nsRouterLink]="['ListViewAsyncPipe']"></Button>
12+
</StackLayout>
13+
`,
14+
})
15+
export class ListViewMainPageComponent { }

‎app/main/main-page-router-outlet.ts

Lines changed: 21 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,18 @@
1-
import {Component} from "@angular/core";
2-
import {RouteConfig} from '@angular/router-deprecated';
3-
import {NS_ROUTER_DIRECTIVES} from "nativescript-angular/router";
4-
import {ActionBarTest} from "../action-bar/action-bar-test";
5-
import {FirstComponentActionBar} from "../action-bar/action-bar-first.component";
6-
import {SecondComponentActionBar} from "../action-bar/action-bar-second.component";
7-
import {AppComponent} from "../template/app.component";
8-
import {FirstComponent} from "../components/first.component";
9-
import {SecondComponent} from "../components/second.component";
10-
import {NavigationTestRouter} from "../router/router-outlet";
11-
import {BindingComponent} from "../binding/binding-page";
1+
import { Component } from "@angular/core";
2+
import { RouteConfig } from '@angular/router-deprecated';
3+
import { NS_ROUTER_DIRECTIVES } from "nativescript-angular/router";
4+
import { ActionBarTest } from "../action-bar/action-bar-test";
5+
import { FirstComponentActionBar } from "../action-bar/action-bar-first.component";
6+
import { SecondComponentActionBar } from "../action-bar/action-bar-second.component";
7+
import { AppComponent } from "../template/app.component";
8+
import { FirstComponent } from "../components/first.component";
9+
import { SecondComponent } from "../components/second.component";
10+
import { NavigationTestRouter } from "../router/router-outlet";
11+
import { BindingComponent } from "../binding/binding-page";
12+
import { ListViewComponent } from "../listView/commonTemplate/list-view-page";
13+
import { ListViewControlComponent } from "../listView/customTemplate/list-view-item-template";
14+
import { ListViewAsyncPipeComponent } from "../listView/asyncPipeTemplate/async-pipe-template"
15+
import { ListViewMainPageComponent } from "../listView/listViewMainPage/list-view-main-page"
1216

1317
@Component({
1418
selector: "main",
@@ -20,12 +24,12 @@ import {BindingComponent} from "../binding/binding-page";
2024
<Button text="First" [nsRouterLink]="['First']"></Button>
2125
<Button text="Second" [nsRouterLink]="['Second']"></Button>
2226
<Button text="Router" [nsRouterLink]="['Router']"></Button>
23-
<!--<Button text="ActionBar" [nsRouterLink]="['ActionBar']"></Button>-->
2427
<StackLayout orientation="horizontal" horizontalAlignment="center">
2528
<Button text="ActionBar1" [nsRouterLink]="['FirstActionBar']"></Button>
2629
<Button text="ActionBar2" [nsRouterLink]="['SecondActionBar']"></Button>
2730
</StackLayout>
28-
<Button text="Binding" [nsRouterLink]="['Binding']"></Button>
31+
<Button text="Binding" [nsRouterLink]="['Binding']"></Button>
32+
<Button text="ListViewTests" [nsRouterLink]="['ListViewMainPage']"></Button>
2933
</StackLayout>
3034
`,
3135
})
@@ -46,6 +50,10 @@ class MainComponent { }
4650
{ path: '/first-action-bar', component: FirstComponentActionBar, name: 'FirstActionBar' },
4751
{ path: '/second-action-bar', component: SecondComponentActionBar, name: 'SecondActionBar' },
4852
{ path: '/binding', component: BindingComponent, name: 'Binding' },
53+
{ path: '/listView/commonTemplate', component: ListViewComponent, name: 'ListView' },
54+
{ path: '/listView/listViewMainPage', component: ListViewMainPageComponent, name: 'ListViewMainPage' },
55+
{ path: '/listView/customTemplate', component: ListViewControlComponent, name: 'ListViewCustomTemplate' },
56+
{ path: '/listView/asyncPipeTemplate', component: ListViewAsyncPipeComponent, name: 'ListViewAsyncPipe' },
4957

5058
])
5159
export class NavigationMainPageRouter { }

0 commit comments

Comments
 (0)