Skip to content

Commit 7b82803

Browse files
sitefinitystevesitefinitysteve
committed
Add Listview to the demo
1 parent 37b47e2 commit 7b82803

File tree

5 files changed

+145
-39
lines changed

5 files changed

+145
-39
lines changed

‎demo/app/app.css

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,8 +63,10 @@ CheckBox{
6363
horizontal-align: left;
6464
margin-bottom: 10;
6565
width: 100%;
66+
background-color: transparent;
6667
}
6768

6869
.title{
6970

70-
}
71+
}
72+

‎demo/app/main-page.css

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
#tabViewContainer{
2+
background-color: #363b58;
3+
color: #fff;
4+
}
5+
6+
ListView{
7+
background-color: transparent;
8+
color: #FFF;
9+
}
10+
11+
.list-check{
12+
font-weight: bold;
13+
font-size: 14;
14+
color: black;
15+
margin: 2%, 0, 2%, 2%;
16+
}
17+
18+
.list-item{
19+
padding: 10 10;
20+
}

‎demo/app/main-page.ts

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -37,11 +37,14 @@ export function onTapTest(args){
3737
model.updateMessage(box.checked);
3838
}
3939

40-
export function onDumpModel(args: any){
40+
export function onRepeaterItemTap(args: any){
4141
var label = <Label>page.getViewById("modelDumpLabel");
42-
label.text = JSON.stringify(model.data.getItem(0));
43-
}
42+
let data = new Array<DataItem>();
43+
console.log(model.data.length);
44+
45+
model.data.forEach(x => function(value: DataItem, index: number, array: Array<DataItem>){
46+
console.log(value);
47+
});
4448

45-
export function onPropertyChanged(args: any){
46-
console.log("Property Changed");
49+
label.text = JSON.stringify(data);
4750
}

‎demo/app/main-page.xml

Lines changed: 50 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -3,39 +3,57 @@
33
xmlns:CheckBox="nativescript-checkbox" loaded="pageLoaded">
44
<ActionBar title="Native Checkbox" />
55

6-
<ScrollView>
7-
<StackLayout id="wrapper">
8-
<Label text="Functions" class="title" />
9-
<StackLayout class="listitem">
10-
<GridLayout columns="*, auto" class="demosection">
11-
<CheckBox:CheckBox id="toggleTest" col="0" text="toggle()" checked="false" style="margin-right: 10" />
12-
<Button col="1" text="GO" tap="onToggleTest" class="button" />
13-
</GridLayout>
14-
</StackLayout>
6+
<TabView id="tabViewContainer">
7+
<TabView.items>
8+
<TabViewItem title="General" class="tab-item">
9+
<TabViewItem.view>
10+
<ScrollView>
11+
<StackLayout id="wrapper">
12+
<Label text="Functions" class="title" />
13+
<StackLayout class="listitem">
14+
<GridLayout columns="*, auto" class="demosection">
15+
<CheckBox:CheckBox id="toggleTest" col="0" text="toggle()" checked="false" style="margin-right: 10" />
16+
<Button col="1" text="GO" tap="onToggleTest" class="button" />
17+
</GridLayout>
18+
</StackLayout>
19+
20+
<Label text="Events" class="title" />
21+
<StackLayout class="listitem">
22+
<CheckBox:CheckBox text="tap test" checked="false" tap="onTapTest" />
23+
<Label text="{{ eventLabel }}" textWrap="true" class="message" />
24+
</StackLayout>
1525

16-
<Label text="Bound to Repeater" class="title" />
17-
<StackLayout class="demosection">
18-
<Repeater items="{{ data }}">
19-
<Repeater.itemTemplate>
20-
<StackLayout class="listitem" >
21-
<CheckBox:CheckBox text="{{ text }}" checked="{{ checked }}" fillColor="{{ color }}" tintColor="{{ color }}" propertyChanged="onPropertyChanged" />
22-
</StackLayout>
23-
</Repeater.itemTemplate>
24-
</Repeater>
25-
</StackLayout>
26-
27-
<Label text="Events" class="title" />
28-
<StackLayout class="listitem">
29-
<CheckBox:CheckBox text="tap test" checked="false" tap="onTapTest" />
30-
<Label text="{{ eventLabel }}" textWrap="true" class="message" />
31-
</StackLayout>
26+
<Label text="Bound to Repeater" class="title" />
27+
<StackLayout class="demosection">
28+
<Repeater items="{{ data }}">
29+
<Repeater.itemTemplate>
30+
<StackLayout class="listitem" >
31+
<CheckBox:CheckBox text="{{ text }}" checked="{{ checked }}" fillColor="{{ color }}" tintColor="{{ color }}" tap="onRepeaterItemTap" />
32+
</StackLayout>
33+
</Repeater.itemTemplate>
34+
</Repeater>
35+
<Label id="modelDumpLabel" textWrap="true" class="message" />
36+
</StackLayout>
37+
38+
>
39+
</StackLayout>
40+
</ScrollView>
41+
42+
</TabViewItem.view>
43+
</TabViewItem>
44+
<TabViewItem title="Listview" class="tab-item">
45+
<TabViewItem.view>
46+
<ListView items="{{ uberData }}" separatorColor="#d0d0d0">
47+
<ListView.itemTemplate>
48+
<StackLayout class="list-item" >
49+
<CheckBox:CheckBox class="list-check" text="{{ text }}" checked="{{ checked }}" fillColor="{{ color }}" tintColor="{{ color }}" propertyChanged="onPropertyChanged" />
50+
</StackLayout>
51+
</ListView.itemTemplate>
52+
</ListView>
53+
</TabViewItem.view>
54+
</TabViewItem>
55+
</TabView.items>
56+
</TabView>
3257

33-
<Label text="Debug" class="title" />
34-
<StackLayout class="listitem">
35-
<Button text="View Model" tap="onDumpModel" class="button" style="horizontal-align: left;" />
36-
<Label id="modelDumpLabel" textWrap="true" class="message" />
37-
</StackLayout>
38-
</StackLayout>
39-
</ScrollView>
4058

4159
</Page>

‎demo/app/main-view-model.ts

Lines changed: 64 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@ import observableArrayModule = require("data/observable-array");
77

88
export class HelloWorldModel extends Observable {
99
public data: observableArrayModule.ObservableArray<DataItem>;
10-
private _eventLabel: string;
10+
public uberData: observableArrayModule.ObservableArray<DataItem>;
11+
private _eventLabel: string = "Click text or checkbox";
1112
private _state: string;
1213
private _eventCount: number;
1314

@@ -20,6 +21,68 @@ export class HelloWorldModel extends Observable {
2021
this.data.push(new DataItem("Nathan Walker", true, "#57bbed"));
2122
this.data.push(new DataItem("Steve McNiven-Scott", false, "#7559e7"));
2223
this.data.push(new DataItem("Ron Burgundy", true, "#eb5481"));
24+
25+
this.uberData = new observableArrayModule.ObservableArray<DataItem>();
26+
//Copy\paste ...hacky I know, dont have time to make this elegant atm :)
27+
this.uberData.push(new DataItem("Brad Martin", false, "#eab557"));
28+
this.uberData.push(new DataItem("Nathan Walker", true, "#57bbed"));
29+
this.uberData.push(new DataItem("Steve McNiven-Scott", false, "#7559e7"));
30+
this.uberData.push(new DataItem("Ron Burgundy", true, "#eb5481"));
31+
32+
this.uberData.push(new DataItem("Brad Martin", false, "#eab557"));
33+
this.uberData.push(new DataItem("Nathan Walker", true, "#57bbed"));
34+
this.uberData.push(new DataItem("Steve McNiven-Scott", false, "#7559e7"));
35+
this.uberData.push(new DataItem("Ron Burgundy", true, "#eb5481"));
36+
37+
this.uberData.push(new DataItem("Brad Martin", false, "#eab557"));
38+
this.uberData.push(new DataItem("Nathan Walker", true, "#57bbed"));
39+
this.uberData.push(new DataItem("Steve McNiven-Scott", false, "#7559e7"));
40+
this.uberData.push(new DataItem("Ron Burgundy", true, "#eb5481"));
41+
42+
this.uberData.push(new DataItem("Brad Martin", false, "#eab557"));
43+
this.uberData.push(new DataItem("Nathan Walker", true, "#57bbed"));
44+
this.uberData.push(new DataItem("Steve McNiven-Scott", false, "#7559e7"));
45+
this.uberData.push(new DataItem("Ron Burgundy", true, "#eb5481"));
46+
47+
this.uberData.push(new DataItem("Brad Martin", false, "#eab557"));
48+
this.uberData.push(new DataItem("Nathan Walker", true, "#57bbed"));
49+
this.uberData.push(new DataItem("Steve McNiven-Scott", false, "#7559e7"));
50+
this.uberData.push(new DataItem("Ron Burgundy", true, "#eb5481"));
51+
52+
this.uberData.push(new DataItem("Brad Martin", false, "#eab557"));
53+
this.uberData.push(new DataItem("Nathan Walker", true, "#57bbed"));
54+
this.uberData.push(new DataItem("Steve McNiven-Scott", false, "#7559e7"));
55+
this.uberData.push(new DataItem("Ron Burgundy", true, "#eb5481"));
56+
57+
this.uberData.push(new DataItem("Brad Martin", false, "#eab557"));
58+
this.uberData.push(new DataItem("Nathan Walker", true, "#57bbed"));
59+
this.uberData.push(new DataItem("Steve McNiven-Scott", false, "#7559e7"));
60+
this.uberData.push(new DataItem("Ron Burgundy", true, "#eb5481"));
61+
62+
this.uberData.push(new DataItem("Brad Martin", false, "#eab557"));
63+
this.uberData.push(new DataItem("Nathan Walker", true, "#57bbed"));
64+
this.uberData.push(new DataItem("Steve McNiven-Scott", false, "#7559e7"));
65+
this.uberData.push(new DataItem("Ron Burgundy", true, "#eb5481"));
66+
67+
this.uberData.push(new DataItem("Brad Martin", false, "#eab557"));
68+
this.uberData.push(new DataItem("Nathan Walker", true, "#57bbed"));
69+
this.uberData.push(new DataItem("Steve McNiven-Scott", false, "#7559e7"));
70+
this.uberData.push(new DataItem("Ron Burgundy", true, "#eb5481"));
71+
72+
this.uberData.push(new DataItem("Brad Martin", false, "#eab557"));
73+
this.uberData.push(new DataItem("Nathan Walker", true, "#57bbed"));
74+
this.uberData.push(new DataItem("Steve McNiven-Scott", false, "#7559e7"));
75+
this.uberData.push(new DataItem("Ron Burgundy", true, "#eb5481"));
76+
77+
this.uberData.push(new DataItem("Brad Martin", false, "#eab557"));
78+
this.uberData.push(new DataItem("Nathan Walker", true, "#57bbed"));
79+
this.uberData.push(new DataItem("Steve McNiven-Scott", false, "#7559e7"));
80+
this.uberData.push(new DataItem("Ron Burgundy", true, "#eb5481"));
81+
82+
this.uberData.push(new DataItem("Brad Martin", false, "#eab557"));
83+
this.uberData.push(new DataItem("Nathan Walker", true, "#57bbed"));
84+
this.uberData.push(new DataItem("Steve McNiven-Scott", false, "#7559e7"));
85+
this.uberData.push(new DataItem("Ron Burgundy", true, "#eb5481"));
2386
}
2487

2588
get eventLabel(): string {

0 commit comments

Comments
 (0)