From 70a97b1451cd8520ace3949e2553ac3c74e23327 Mon Sep 17 00:00:00 2001
From: Vasil Chimev <Vasil.Chimev@telerik.com>
Date: Fri, 10 Jul 2015 11:09:04 +0300
Subject: [PATCH] Add dialogs test page.

---
 CrossPlatformModules.csproj             |  5 ++
 apps/ui-tests-app/dialogs/dialogs.ts    | 10 +++
 apps/ui-tests-app/dialogs/dialogs.xml   | 10 +++
 apps/ui-tests-app/dialogs/view-model.ts | 90 +++++++++++++++++++++++++
 apps/ui-tests-app/mainPage.ts           |  2 +-
 apps/ui-tests-app/pages/background.xml  |  1 +
 6 files changed, 117 insertions(+), 1 deletion(-)
 create mode 100644 apps/ui-tests-app/dialogs/dialogs.ts
 create mode 100644 apps/ui-tests-app/dialogs/dialogs.xml
 create mode 100644 apps/ui-tests-app/dialogs/view-model.ts

diff --git a/CrossPlatformModules.csproj b/CrossPlatformModules.csproj
index a44d0d1e4..3b8907020 100644
--- a/CrossPlatformModules.csproj
+++ b/CrossPlatformModules.csproj
@@ -212,6 +212,10 @@
       <DependentUpon>xmlbasics.xml</DependentUpon>
     </TypeScriptCompile>
     <TypeScriptCompile Include="apps\ui-tests-app\bindings\basics.ts" />
+    <TypeScriptCompile Include="apps\ui-tests-app\dialogs\dialogs.ts">
+	      <DependentUpon>dialogs.xml</DependentUpon>
+    </TypeScriptCompile>
+    <TypeScriptCompile Include="apps\ui-tests-app\dialogs\view-model.ts" />
     <TypeScriptCompile Include="apps\ui-tests-app\layouts\absolute.ts" />
     <TypeScriptCompile Include="apps\ui-tests-app\layouts\dock.ts" />
     <TypeScriptCompile Include="apps\ui-tests-app\layouts\grid.ts" />
@@ -709,6 +713,7 @@
     <Content Include="apps\tests\xml-declaration\mymodulewithxml\MyControl.css" />
     <Content Include="apps\tests\xml-declaration\mymodule\MyControl.css" />
     <Content Include="apps\ui-tests-app\bindings\xmlbasics.xml" />
+    <Content Include="apps\ui-tests-app\dialogs\dialogs.xml" />
     <Content Include="apps\ui-tests-app\layouts\absolute.xml" />
     <Content Include="apps\ui-tests-app\layouts\dock.xml" />
     <Content Include="apps\ui-tests-app\layouts\grid.xml" />
diff --git a/apps/ui-tests-app/dialogs/dialogs.ts b/apps/ui-tests-app/dialogs/dialogs.ts
new file mode 100644
index 000000000..43dce02a8
--- /dev/null
+++ b/apps/ui-tests-app/dialogs/dialogs.ts
@@ -0,0 +1,10 @@
+import pages = require("ui/page");
+import observable = require("data/observable");
+import vmModule = require("./view-model");
+
+var viewModel = vmModule.settingsViewModel;
+
+export function pageLoaded(args: observable.EventData) {
+    var page = <pages.Page>args.object;
+    page.bindingContext = viewModel;
+}
\ No newline at end of file
diff --git a/apps/ui-tests-app/dialogs/dialogs.xml b/apps/ui-tests-app/dialogs/dialogs.xml
new file mode 100644
index 000000000..730fbd8bb
--- /dev/null
+++ b/apps/ui-tests-app/dialogs/dialogs.xml
@@ -0,0 +1,10 @@
+<Page loaded="pageLoaded">
+  <StackLayout>
+    <Label text="{{ name }}" style="text-align:center;" />
+    <Button text="action" tap="{{ actionName }}" />
+    <Button text="alert" tap="{{ alertName }}" />
+    <Button text="confirm" tap="{{ confirmName }}" />
+    <Button text="login" tap="{{ loginName }}" />
+    <Button text="prompt" tap="{{ promptName }}" />  
+  </StackLayout>
+</Page>
\ No newline at end of file
diff --git a/apps/ui-tests-app/dialogs/view-model.ts b/apps/ui-tests-app/dialogs/view-model.ts
new file mode 100644
index 000000000..bb9868614
--- /dev/null
+++ b/apps/ui-tests-app/dialogs/view-model.ts
@@ -0,0 +1,90 @@
+import dialogs = require("ui/dialogs");
+import observable = require("data/observable");
+import appSettings = require("application-settings");
+
+var name = "Harold Finch";
+
+export class SettingsViewModel extends observable.Observable {
+
+    get name(): string {
+        return name;
+    }
+
+    set name(value: string) {
+        name = value;
+    }
+
+    public actionName(args: observable.EventData) {
+        dialogs.action({
+            message: "Change the name?",
+            cancelButtonText: "Close",
+            actions: ["Yes", "No"]
+        }).then((actionResult) => {
+            console.log("### Result: " + actionResult);
+            if (actionResult === "Yes") {
+                this.set("name", "John Reese");
+            }
+        });
+    }
+
+    public alertName(args: observable.EventData) {
+        dialogs.alert({
+            title: "Name",
+            message: "The name will change.",
+            okButtonText: "OK"
+        }).then((alertResult) => {
+            console.log("### Result: " + alertResult);
+            this.set("name", "John Reese");
+        });
+    }
+
+    public confirmName(args: observable.EventData) {
+        dialogs.confirm({
+            title: "Name",
+            message: "Do you want to change the name?",
+            cancelButtonText: "No",
+            neutralButtonText: "Ignore",
+            okButtonText: "Yes"
+        }).then((confirmResult) => {
+            console.log("### Result: " + confirmResult);
+            if (confirmResult) {
+                this.set("name", "John Reese");
+            }
+        });
+    }
+
+    public loginName(args: observable.EventData) {
+        dialogs.login({
+            title: "Name",
+            message: "Enter name:",
+            cancelButtonText: "Cancel",
+            neutralButtonText: "Ignore",
+            okButtonText: "OK",
+            userName: "John",
+            password: "Reese"
+        }).then((loginResult) => {
+            console.log("### Result: " + loginResult.result + ", UserName: " + loginResult.userName + ", Password: " + loginResult.password);
+            if (loginResult.result) {
+                this.set("name", loginResult.userName + " " + loginResult.password);
+            }
+        });
+    }
+
+    public promptName(args: observable.EventData) {
+        dialogs.prompt({
+            title: "Name",
+            message: "Enter name:",
+            cancelButtonText: "Cancel",
+            neutralButtonText: "Ignore",
+            okButtonText: "OK",
+            defaultText: "John Reese",
+            inputType: dialogs.inputType.text
+        }).then((promptResult) => {
+            console.log("### Result: " + promptResult.result + ", Text: " + promptResult.text);
+            if (promptResult.result) {
+                this.set("name", promptResult.text);
+            }
+        });
+    }
+}
+export var settingsViewModel = new SettingsViewModel();
\ No newline at end of file
diff --git a/apps/ui-tests-app/mainPage.ts b/apps/ui-tests-app/mainPage.ts
index 4b05362b8..04db476de 100644
--- a/apps/ui-tests-app/mainPage.ts
+++ b/apps/ui-tests-app/mainPage.ts
@@ -10,7 +10,7 @@ import trace = require("trace");
 trace.enable();
 trace.setCategories(trace.categories.Test);
 
-var list: string[] = ["pages", "layouts", "modal-view", "bindings"];
+var list: string[] = ["pages", "layouts", "modal-view", "bindings", "dialogs"];
 
 // basePath is auto-changed when building multiple apps
 var basePath = "";
diff --git a/apps/ui-tests-app/pages/background.xml b/apps/ui-tests-app/pages/background.xml
index eb937d228..93064360e 100644
--- a/apps/ui-tests-app/pages/background.xml
+++ b/apps/ui-tests-app/pages/background.xml
@@ -22,6 +22,7 @@
       <Button width="50" height="50" text="4.4" tap="applyTap" tag="margin: 20; background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: left bottom;"/>
       <Button width="50" height="50" text="4.5" tap="applyTap" tag="margin: 20; background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: 20% 80%;"/>
       <Button width="50" height="50" text="4.6" tap="applyTap" tag="margin: 20; background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: 20 80;"/>
+
       <!-- Size -->
       <Button width="50" height="50" text="5.1" tap="applyTap" tag="margin: 20; background-color: lightgreen; background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: center center; background-size: 100px 100px;"/>
       <Button width="50" height="50" text="5.2" tap="applyTap" tag="margin: 20; background-color: lightgreen; background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: center center; background-size: 100% 100%;"/>