Merge pull request #373 from NativeScript/niliev/application

docs: extend application article

Author: tsonevn

app/ng-framework-modules-category/application/application-events/application-events.component.html

@@ -0,0 +1,6 @@
+<GridLayout sdkExampleTitle sdkToggleNavButton>
+    <Label class="body p-15" text="Refer to the component file for details on application events usage."
+        textWrap="true"></Label>
+    <!-- >> app-check-target-html -->
+    <!-- << app-check-target-html -->
+</GridLayout>

app/ng-framework-modules-category/application/application-events/application-events.component.ts

@@ -0,0 +1,92 @@
+import { Component } from "@angular/core";
+
+import {
+    on,
+    ApplicationEventData,
+    launchEvent, LaunchEventData,
+    resumeEvent,
+    exitEvent,
+    uncaughtErrorEvent, UnhandledErrorEventData,
+    displayedEvent,
+    lowMemoryEvent,
+    orientationChangedEvent, OrientationChangedEventData,
+    suspendEvent
+} from "tns-core-modules/application";
+
+let launchListener,
+    suspendListener,
+    resumeListener,
+    exitListener,
+    displayedListener,
+    lowMemoryListener,
+    orientationChangedListener,
+    uncaughtErrorListener;
+
+@Component({
+    moduleId: module.id,
+    templateUrl: "./app-checking-target.component.html"
+})
+export class ApplicationEventsComponent {
+    public isItemVisible: boolean;
+
+    constructor() {
+        // >> application-events-launch-ng
+        launchListener = (args: LaunchEventData) => {
+            console.log("The appication was launched!");
+        };
+        on(launchEvent, launchListener);
+        // << application-events-launch-ng
+
+        // >> application-events-suspend-ng
+        suspendListener = (args: ApplicationEventData) => {
+            console.log("The appication was suspended!");
+        };
+        on(suspendEvent, suspendListener);
+        // << application-events-suspend-ng
+
+        // >> application-events-resume-ng
+        resumeListener = (args: ApplicationEventData) => {
+            console.log("The appication was resumed!");
+        };
+        on(resumeEvent, resumeListener);
+        // << application-events-resume-ng
+
+        // >> application-events-exit-ng
+        exitListener = (args: ApplicationEventData) => {
+            console.log("The appication was closed!");
+        };
+        on(exitEvent, exitListener);
+        // << application-events-exit-ng
+
+        // >> application-events-displayed-ng
+        displayedListener = (args: ApplicationEventData) => {
+            console.log("NativeScript displayedEvent!");
+        };
+        on(displayedEvent, displayedListener);
+        // << application-events-displayed-ng
+
+        // >> application-events-low-memory-ng
+        lowMemoryListener = (args: ApplicationEventData) => {
+            // the instance that has raised the event
+            console.log("Instance: ", args.object);
+        };
+        on(lowMemoryEvent, lowMemoryListener);
+        // << application-events-low-memory-ng
+
+        // >> application-events-orientation-ng
+        orientationChangedListener = (args: OrientationChangedEventData) => {
+            // orientationChangedEventData.newValue: "portrait" | "landscape" | "unknown"
+            console.log("Orientation: ", args.newValue);
+        };
+        on(orientationChangedEvent, orientationChangedListener);
+        // << application-events-orientation-ng
+
+        // >> application-events-error-ng
+        uncaughtErrorListener = (args: UnhandledErrorEventData) => {
+            // UnhandledErrorEventData.error: NativeScriptError
+            console.log("NativeScript Error: ", args.error);
+        };
+        on(uncaughtErrorEvent, uncaughtErrorListener);
+        // << application-events-error-ng
+    }
+}

app/ng-framework-modules-category/application/application-events/article.md

@@ -0,0 +1,31 @@
+
+The application module provides cross-platform application events to handle different application states.
+With the provided application events the user can handle launch, resume, suspend and exit states or provide logic
+related to the screen orientation, uncaught errors and low memory events.
+
+Use the application method `on` to add event listeners.
+
+### Launch Event
+<snippet id='application-events-launch-ng'/>
+
+### Suspend Event
+<snippet id='application-events-suspend-ng'/>
+
+### Resume Event
+<snippet id='application-events-resume-ng'/>
+
+### Exit Event
+<snippet id='application-events-exit-ng'/>
+
+### Displayed Event
+<snippet id='application-events-displayed-ng'/>
+
+### Low Memory Event
+<snippet id='application-events-low-memory-ng'/>
+
+### Orientation Changed Event
+<snippet id='application-events-orientation-ng'/>
+
+### Uncaught Error Event
+<snippet id='application-events-error-ng'/>
+

app/ng-framework-modules-category/application/application-examples.component.ts

@@ -5,6 +5,7 @@ let menuLinks = [
     new Link("Checking Target Platform", "/application/check-target"),
     new Link("Using Android Specifics", "/application/using-android"),
     new Link("Using iOS Specifics", "/application/using-ios"),
+    new Link("Application Events", "/application/application-events")
 ];
 
 @Component({

app/ng-framework-modules-category/application/application-examples.module.ts

@@ -5,6 +5,7 @@ import { ApplicationExamplesComponent } from "./application-examples.component";
 import { AppCheckingTargetExampleComponent } from "./app-checking-target/app-checking-target.component";
 import { AppUsingAndroidExampleComponent } from "./app-using-android-specifics/app-using-android-specifics.component";
 import { AppUsingIosExampleComponent } from "./app-using-ios-specifics/app-using-ios-specifics.component";
+import { ApplicationEventsComponent } from "./application-events/application-events.component";
 import { TitleAndNavButtonModule } from "../../directives/title-and-nav-button.module";
 
 export const routerConfig = [
@@ -26,6 +27,11 @@ export const routerConfig = [
         path: "using-ios",
         component: AppUsingIosExampleComponent,
         data: { title: "Using iOS Specifics" }
+    },
+    {
+        path: "application-events",
+        component: ApplicationEventsComponent,
+        data: { title: "Application Events" }
     }
 ];