Skip to content

Commit 91f6fd8

Browse files
tsonevntsonevn
authoredJan 12, 2018
Merge pull request #254 from NativeScript/tsonevn_activityindicator_http
adding extended example, which shows how to use ActivityIndicator dur…
·
6.05.4
2 parents d69b727 + 460c517 commit 91f6fd8

File tree

6 files changed

+98
-2
lines changed

6 files changed

+98
-2
lines changed
 

‎app/App_Resources/iOS/Info.plist

+15
Original file line numberDiff line numberDiff line change
@@ -48,5 +48,20 @@
4848
<key>NSAllowsArbitraryLoads</key>
4949
<true/>
5050
</dict>
51+
<key>NSAppTransportSecurity</key>
52+
<dict>
53+
<key>NSExceptionDomains</key>
54+
<dict>
55+
<key>fakeresponse.com</key>
56+
<dict>
57+
<key>NSIncludesSubdomains</key>
58+
<true/>
59+
<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
60+
<true/>
61+
<key>NSTemporaryExceptionMinimumTLSVersion</key>
62+
<string>TLSv1.1</string>
63+
</dict>
64+
</dict>
65+
</dict>
5166
</dict>
5267
</plist>

‎app/ui-category/activity-indicator/activity-indicator-examples.component.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@ import { Component, ChangeDetectionStrategy } from "@angular/core";
22
import { Link } from "./../../link";
33

44
let menuLinks = [
5-
new Link("Set busy property", "/activity-indicator/setting-busy")
5+
new Link("Set busy property", "/activity-indicator/setting-busy"),
6+
new Link("Set busy property(during HTTP Request)", "/activity-indicator/setting-busy-http-request")
67
];
78

89
@Component({

‎app/ui-category/activity-indicator/activity-indicator-examples.module.ts

+10-1
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
22
import { NativeScriptRouterModule } from "nativescript-angular/router";
33
import { NativeScriptCommonModule } from "nativescript-angular/common";
4+
import { NativeScriptHttpClientModule } from "nativescript-angular/http-client";
45
import { ActivityIndicatorExamplesComponent } from "./activity-indicator-examples.component";
56
import { SettingBusyComponent } from "./setting-busy/setting-busy.component";
7+
import { SettingBusyHttpRequestComponent } from "./setting-busy-http-request/setting-busy-http-request.component";
68
import { TitleAndNavButtonModule } from "../../directives/title-and-nav-button.module";
79

810
export const routerConfig = [
@@ -14,6 +16,11 @@ export const routerConfig = [
1416
path: "setting-busy",
1517
component: SettingBusyComponent,
1618
data: { title: "Set busy property" }
19+
},
20+
{
21+
path: "setting-busy-http-request",
22+
component: SettingBusyHttpRequestComponent,
23+
data: { title: "Set busy property(during HTTP Request)" }
1724
}
1825
];
1926

@@ -23,11 +30,13 @@ export const routerConfig = [
2330
TitleAndNavButtonModule,
2431
NativeScriptCommonModule,
2532
NativeScriptRouterModule,
33+
NativeScriptHttpClientModule,
2634
NativeScriptRouterModule.forChild(routerConfig)
2735
],
2836
declarations: [
2937
ActivityIndicatorExamplesComponent,
30-
SettingBusyComponent
38+
SettingBusyComponent,
39+
SettingBusyHttpRequestComponent
3140
]
3241
})
3342

‎app/ui-category/activity-indicator/setting-busy-http-request/article.md

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
Extended example, desmostrating how to use ActivityIndicator during HTTP request
2+
3+
Setting an activity indicator in the HTML:
4+
<snippet id='activity-indicator-setting-busy-html'/>
5+
6+
Setting an activity indicator’s `busy` property value:
7+
<snippet id='activity-indicator-setting-busy-code'/>

‎app/ui-category/activity-indicator/setting-busy-http-request/setting-busy-http-request.component.html

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<GridLayout sdkExampleTitle sdkToggleNavButton rows=" auto auto, auto, auto, auto" columns="*, 2*">
2+
<!-- >> activity-indicator-setting-busy-html -->
3+
<Label class="p-15" row="0" col="0" colSpan="2" textAlignment="center" text="The response of the HTTP request will be returned with 5 sec. delay." textWrap="true"></Label>
4+
5+
<Label class="p-15" row="1" col="0" text="IP" textWrap="true"></Label>
6+
<Label class="p-15" row="2" col="0" text="Status" textWrap="true"></Label>
7+
<Label class="p-15" row="3" col="0" text="Slept" textWrap="true"></Label>
8+
<Label class="p-15" row="4" col="0" text="Response" textWrap="true"></Label>
9+
10+
<Label class="p-15" row="1" col="1" [text]="originatingIp" textWrap="true"></Label>
11+
<Label class="p-15" row="2" col="1" [text]="status" textWrap="true"></Label>
12+
<Label class="p-15" row="3" col="1" text="{{ slept + ' seconds'}}" textWrap="true"></Label>
13+
<Label class="p-15" row="4" col="1" [text]="response" textWrap="true"></Label>
14+
15+
<ActivityIndicator row="0" rowSpan="5" colSpan="2" #activityIndicator [busy]="isBusy" class="activity-indicator"></ActivityIndicator>
16+
<!-- << activity-indicator-setting-busy-html -->
17+
</GridLayout>

‎app/ui-category/activity-indicator/setting-busy-http-request/setting-busy-http-request.component.ts

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
// >> activity-indicator-setting-busy-code
2+
import { Component, AfterViewInit } from "@angular/core";
3+
import { HttpClient, HttpHeaders, HttpResponse } from "@angular/common/http";
4+
5+
@Component({
6+
moduleId: module.id,
7+
templateUrl: "./setting-busy-http-request.component.html"
8+
})
9+
export class SettingBusyHttpRequestComponent implements AfterViewInit {
10+
public originatingIp = "";
11+
public status = "";
12+
public slept = "_";
13+
public response = "";
14+
public isBusy = true;
15+
private serverUrl = "http://www.fakeresponse.com/api/?sleep=5";
16+
17+
constructor(private http: HttpClient) {}
18+
19+
ngAfterViewInit() {
20+
let headers = this.createRequestHeader();
21+
this.http.get(this.serverUrl, { headers: headers })
22+
.subscribe(
23+
data => {
24+
this.originatingIp = data["meta"]["originating_ip"];
25+
this.status = data["status"];
26+
this.slept = data["slept"];
27+
this.response = data["response"];
28+
this.isBusy = false;
29+
},
30+
err => {
31+
console.log("Error occured.");
32+
console.log(err);
33+
}
34+
);
35+
}
36+
37+
private createRequestHeader() {
38+
let headers = new HttpHeaders();
39+
// set headers here e.g.
40+
headers.append("AuthKey", "my-key");
41+
headers.append("AuthToken", "my-token");
42+
headers.append("Content-Type", "application/json");
43+
44+
return headers;
45+
}
46+
}
47+
// << activity-indicator-setting-busy-code

0 commit comments

Comments
 (0)
Please sign in to comment.