refctor: add dialogs example

.eslintrc

@@ -16,7 +16,7 @@
         "block-spacing": "error",
         "brace-style": [
             "error",
-            "stroustrup",
+            "1tbs",
             { "allowSingleLine": true }
         ],
         "camelcase": "error",

app/application/overview.md

@@ -2,6 +2,11 @@ The Application module provides abstraction over the platform-specific Applicati
 The module lets you manage the lifecycle of your NativeScript applications from starting the application 
 to handling application events and creating platform-specific logic.
 
+* [Application Events](#application-events)
+* [Check Platform](#check-platform)
+* [Android Broadcast Receiver](#Aandroid-broadcast-receiver)
+* [iOS Notification Observer](#ios-notification-observer)
+
 The pre-required `application` module is used throughout the following code snippets.
 
 <snippet id='application-import-ts'/>

app/main-page.js

@@ -9,8 +9,8 @@ const navigationLinks = [
     new link("Borders", "ui/borders/borders-page"),
     new link("Color", "color/color-page"),
     new link("DatePicker", "ui/date-picker/date-picker-page"),
-
-    new link("Dialogs", "/dialogs"),
+    new link("Dialogs", "ui/dialogs/dialogs-page"),
+
     new link("Layouts", "/layouts"),
     new link("TimePicker", "ui/time-picker/time-picker-page"),
     new link("ScrollView", "/scroll-view"),

app/ui/action-bar/overview.md

@@ -1,3 +1,6 @@
 The `ActionBar` is NativeScript’s abstraction over the Android `ActionBar` and iOS `NavigationBar`. 
 It represents a toolbar at the top of the activity window, and can have a title, 
 application-level navigation, as well as other custom interactive items.
+
+* [Basics](#basics)
+* [Code Behind](#code-behind)

app/ui/activity-indicator/code-behind/article.md

@@ -1,2 +1,2 @@
 Dynamic code-behind creationg of `ActivityIndicator` and showing the indicator while image is loading.
-<snippet id="activity-indicator-code-behind"/>
+<snippet id='activity-indicator-code-behind'/>

app/ui/activity-indicator/overview.md

@@ -1,3 +1,7 @@
 The `ActivityIndicator` represents a UI widget which displays a progress indicator hinting the user 
 for some background operation running like loading image, data, accepting a request, etc. 
 We can control its behavior by setting or binding to its boolean property `busy`.
+
+* [Basics](#basics)
+* [Styling](#styling)
+* [Code Behind](#code-behind)

app/ui/animations/overview.md

@@ -1,6 +1,10 @@
 One of the ways to improve the attractiveness of your application is by adding animations. 
 NativeScript exposes a simple and easy, but powerful enough API to allow animating almost every native element in your application.
 
+* [Animated Properties](#animated-properties)
+* [Chained Animations](#chained-animations)
+* [Animating Multiple Views](#animating-multiple-views)
+
 For your convenience, we exposed two ways of creating animations - Imperative (`Animation` class from `ui/animation` module) and Declarative (`CSS3` keyframe animations).
 The Imperative way provides full control of any animation by calling animation methods directly via the NativeScript `ui/animation` module.
 The declarative way uses the familiar CSS3 animations API and create CSS keyframe animations. 

app/ui/borders/overview.md

@@ -1,2 +1,6 @@
 NativeScript supports the creation of rounded corners through a subset of CSS properties.
-The supported CSS vorder properties are `border-width`, `border-color`, `border-radius`.
+The supported CSS vorder properties are `border-width`, `border-color`, `border-radius`.
+
+* [Basics](#basics)
+* [Border Radius](#border-radius)
+* [Code Behind](#code-behind)

app/ui/button/overview.md

@@ -1,2 +1,6 @@
 The `Button` widget provides a standard button widget that reacts to a `tap` event.
-<snippet id='import-button-widget'/>
+<snippet id='import-button-widget'/>
+
+* [Basics](#basics)
+* [Styling](#styling)
+* [Code Behind](#code-behind)

app/ui/date-picker/overview.md

@@ -1,3 +1,6 @@
 NativeScript provides a `DatePicker` control that enables the user to choose a date as a ready-to-use dialog. 
 Every date part can be picked separately by its corresponding section of the control - for day, month and year.
 
+* [Basics](#basics)
+* [Styling](#styling)
+* [Code Behind](#code-behind)

app/ui/dialogs/action/action-page.js

@@ -0,0 +1,38 @@
+exports.onNavigatedTo = function (args) {
+    /*
+    // >> dialog-action-web
+    action("Your message", "Cancel", ["Option1", "Option2"]).then((result) => {
+        console.log("Dialog result: " + result);
+        if(result === "Options1") {
+            // Do action1
+        } else if(result === "Option2") {
+            // Do action2
+        }
+    });
+    // << dialog-action-web
+    */
+
+    showActionDialog();
+};
+
+function showActionDialog() {
+    // >> dialog-action
+    const actionOptions = {
+        title: "Your Title",
+        message: "Your message",
+        cancelButtonText: "Cancel",
+        actions: ["Option1", "Option2"],
+        cancelable: true // Android only
+    };
+
+    action(actionOptions).then((result) => {
+        console.log("Dialog result: ", result);
+        if (result === "Options1") {
+            // Do action 1
+        } else if (result === "Option2") {
+            // Do action 2
+        }
+    });
+    // << dialog-action
+}
+exports.showActionDialog = showActionDialog;

app/ui/dialogs/action/action-page.xml

@@ -0,0 +1,8 @@
+<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="onLoaded" navigatedTo="onNavigatedTo">
+    <Page.actionBar>
+		<ActionBar title="Action"/>
+	</Page.actionBar>
+    <StackLayout verticalAlignment="middle">
+        <Button text="Show Action Dialog" tap="showActionDialog" class="btn btn-primary btn-active"/>
+    </StackLayout>
+</Page>

app/ui/dialogs/action/article.md

@@ -0,0 +1,9 @@
+An Action Dialog will require a particular activity from the user.
+The `action` method accepts multiple parametes or an `ActionOptions` object 
+with keys `title`, `message`, `cancelBUttonText`, `actions`, and `cancelable`(Android only property).
+
+Action with parameters (Web browser style).
+<snippet id='dialog-alert-web'/>
+
+Action with `ActionOptions` object.
+<snippet id='dialog-alert'/>

app/ui/dialogs/alert/alert-page.js

@@ -0,0 +1,27 @@
+exports.onNavigatedTo = function (args) {
+    /*
+    // >> dialog-alert-web
+    alert("Your message").then(() => {
+        console.log("Dialog closed!");
+    });
+    // << dialog-alert-web
+    */
+
+    showAlertDialog();
+};
+
+function showAlertDialog() {
+    // >> dialog-alert
+    const alertOptions = {
+        title: "Your Title",
+        message: "Your message",
+        okButtonText: "OK",
+        cancelable: false // [Android only] Gets or sets if the dialog can be canceled by taping outside of the dialog.
+    };
+
+    alert(alertOptions).then(() => {
+        console.log("Dialog closed!");
+    });
+    // << dialog-alert
+}
+exports.showAlertDialog = showAlertDialog;

app/ui/dialogs/alert/alert-page.xml

@@ -0,0 +1,8 @@
+<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="onLoaded" navigatedTo="onNavigatedTo">
+    <Page.actionBar>
+		<ActionBar title="Alert"/>
+	</Page.actionBar>
+	    <StackLayout verticalAlignment="middle">
+        <Button text="Show Alert Dialog" tap="showAlertDialog" class="btn btn-primary btn-active"/>
+    </StackLayout>
+</Page>

app/ui/dialogs/alert/article.md

@@ -0,0 +1,9 @@
+An Alert Dialog will notify the user for an action that has happened.
+The `alert` method accepts string value to be displayed as the alert message or `AlertOptions` object 
+with keys `title`, `message`, `okBUttonText`, and `cancelable`(Android only property).
+
+Alert with string message (Web browser style).
+<snippet id='dialog-alert-web'/>
+
+Alert with `AlertOptions` object.
+<snippet id='dialog-alert'/>

app/ui/dialogs/confirm/article.md

@@ -0,0 +1,7 @@
+A Confirm Dialog will expect the user to accept or reject the action that is about the happen.
+
+Confirm with parameters (Web browser style).
+<snippet id='dialog-confirm-web'/>
+
+Confirm with `ConfirmOptions` object.
+<snippet id='dialog-confirm'/>

app/ui/dialogs/confirm/confirm-page.js

@@ -0,0 +1,29 @@
+exports.onNavigatedTo = function (args) {
+    /*
+    // >> dialog-confirm-web
+    confirm("Your message").then((result) => {
+        console.log("Dialog result: ", result);
+    });
+    // << dialog-confirm-web
+    */
+
+   showConfirmDialog();
+};
+
+function showConfirmDialog() {
+    // >> dialog-confirm
+    const confirmOptions = {
+        title: "Your title",
+        message: "Your message",
+        okButtonText: "Ok",
+        cancelButtonText: "Cancel",
+        neutralButtonText: "Neutral"
+    };
+    confirm(confirmOptions)
+        .then((result) => {
+            // result can be true/false/undefined
+            console.log(result);
+        });
+    // << dialog-confirm
+}
+exports.showConfirmDialog = showConfirmDialog;

app/ui/dialogs/confirm/confirm-page.xml

@@ -0,0 +1,8 @@
+<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="onLoaded" navigatedTo="onNavigatedTo">
+    <Page.actionBar>
+		<ActionBar title="Confirm"/>
+	</Page.actionBar>
+	    <StackLayout verticalAlignment="middle">
+        <Button text="Show Confirm Dialog" tap="showConfirmDialog" class="btn btn-primary btn-active"/>
+    </StackLayout>
+</Page>

app/ui/dialogs/dialogs-page.js

@@ -0,0 +1,17 @@
+const ListViewLinksModel = require("../../links-view-model");
+const link = require("../../link");
+const navigationLinks = [
+    new link("Alert", "/ui/dialogs/alert/alert-page"),
+    new link("Action", "/ui/dialogs/action/action-page"),
+    new link("Confirm", "/ui/dialogs/confirm/confirm-page"),
+    new link("Login", "/ui/dialogs/login/login-page"),
+    new link("Prompt", "/ui/dialogs/prompt/prompt-page")
+];
+function onNavigatingTo(args) {
+    const page = args.object;
+    page.bindingContext = new ListViewLinksModel({
+        links: navigationLinks,
+        actionBarTitle: args.context.title
+    });
+}
+exports.onNavigatingTo = onNavigatingTo;

app/ui/dialogs/dialogs-page.xml

@@ -0,0 +1,6 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:myList="components" navigatingTo="onNavigatingTo">
+    <Page.actionBar>
+		<ActionBar title="{{ actionBarTitle == null ? '' : actionBarTitle }}" icon="" class="action-bar"/>
+	</Page.actionBar>
+	<myList:list/>
+</Page>

app/ui/dialogs/end.md

@@ -0,0 +1,8 @@
+
+**API Reference for the** [Dialogs module](https://docs.nativescript.org/api-reference/modules/_ui_dialogs_)
+
+**API Reference for the** [ActionOptions interface](https://docs.nativescript.org/api-reference/interfaces/_ui_dialogs_.actionoptions)
+**API Reference for the** [AlertOptions interface](https://docs.nativescript.org/api-reference/interfaces/_ui_dialogs_.alertoptions)
+**API Reference for the** [ConfirmOptions interface](https://docs.nativescript.org/api-reference/interfaces/_ui_dialogs_.confirmoptions)
+**API Reference for the** [LoginOptions interface](https://docs.nativescript.org/api-reference/interfaces/_ui_dialogs_.loginoptions)
+**API Reference for the** [PromptOptions interface](https://docs.nativescript.org/api-reference/interfaces/_ui_dialogs_.promptoptions)

app/ui/dialogs/login/article.md

@@ -0,0 +1,7 @@
+A Login Dialog will wait for the user to input their credentials.
+
+login with parameters (Web browser style).
+<snippet id='dialog-login-web'/>
+
+login with `ConfirmOptions` object.
+<snippet id='dialog-login'/>

app/ui/dialogs/login/login-page.js

@@ -0,0 +1,31 @@
+exports.onNavigatedTo = function (args) {
+    /*
+    // >> dialog-login-web
+    login("Your message", "Username", "Password").then((r) => {
+        console.log("Dialog result: ", r.result);
+        console.log(`User: ${r.userName}  Password: ${r.password}`, r.userName, r.password);
+    });
+    // << dialog-login-web
+    */
+
+    showLoginDialog();
+};
+
+function showLoginDialog() {
+    // >> dialog-login
+    const loginOptions = {
+        title: "Your title",
+        message: "Your message",
+        okButtonText: "Login",
+        cancelButtonText: "Cancel",
+        neutralButtonText: "Neutral",
+        userName: "Username",
+        password: "Password"
+    };
+    login(loginOptions).then((r) => {
+        console.log("Dialog result: ", r.result);
+        console.log(`User: ${r.userName}  Password: ${r.password}`, r.userName, r.password);
+    });
+    // << dialog-login
+}
+exports.showLoginDialog = showLoginDialog;

app/ui/dialogs/login/login-page.xml

@@ -0,0 +1,8 @@
+<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="onLoaded" navigatedTo="onNavigatedTo">
+    <Page.actionBar>
+		<ActionBar title="Login"/>
+	</Page.actionBar>
+	    <StackLayout verticalAlignment="middle">
+        <Button text="Show Login Dialog" tap="showLoginDialog" class="btn btn-primary btn-active"/>
+    </StackLayout>
+</Page>

app/ui/dialogs/overview.md

@@ -0,0 +1,14 @@
+NativeScript lets us create dialogs in your app in a manner similar to the web browser. 
+We can create alerts, confirmations, prompts, logins and dialogs that require action.
+The module `tns-core-modules/ui/dialogs` is loaded globally in every NativeScript applicaiton so 
+there is no need for explicit require/import of the module.
+
+* [Alert](#alert)
+* [Confirm](#confirm)
+* [Prompt](#prompt)
+* [Login](#login)
+* [Action](#action)
+
+> **NOTE**: You can call dialog functions with parameters similar to the web browser API or the `options` object. All dialog functions return a `Promise` object. **In both iOS and Android, dialogs will not block your code execution!**
+
+> **TIP**: You can try [this NativeScript Playground project](https://play.nativescript.org/?template=play-ng&id=dWQhV7) to see all of this article’s examples in action on your device.

app/ui/dialogs/prompt/article.md

@@ -0,0 +1,7 @@
+A Prompt Dialog will request for an input.
+
+Prompt with parameters (Web browser style).
+<snippet id='dialog-prompt-web'/>
+
+Prompt with `ConfirmOptions` object.
+<snippet id='dialog-prompt'/>

app/ui/dialogs/prompt/prompt-page.js

@@ -0,0 +1,31 @@
+exports.onNavigatedTo = function (args) {
+    /*
+    // >> dialog-prompt-web
+    prompt("Your message", "Default text").then((r) => {
+        console.log("Dialog result: ", r.result);
+        console.log("Text: ", r.text);
+    });
+    // << dialog-prompt-web
+    */
+
+    showPromptDialog();
+};
+
+function showPromptDialog() {
+    // >> dialog-prompt
+    const promptOptions = {
+        title: "Your title",
+        message: "Your message",
+        okButtonText: "Ok",
+        cancelButtonText: "Cancel",
+        neutralButtonText: "Neutral",
+        defaultText: "Default",
+        inputType: "password" // text, password, or email
+    };
+    prompt(promptOptions).then((r) => {
+        console.log("Dialog result: ", r.result);
+        console.log("Text: ", r.text);
+    });
+    // << dialog-prompt
+}
+exports.showPromptDialog = showPromptDialog;