Tsenov/auto complete (#4318)

* Init steps

* Implement logic for auto-complete for all test pages

* Init steps

* Implement logic for auto-complete for all test pages

* Expose TestPageMainViewModel

* Merge

* Improve check if example is already loaded in collection

* Reorder tests

* Fix tslint

* Include csslv

* Include new image source

apps/app/ui-tests-app/action-bar/main-page.ts

@@ -1,15 +1,16 @@
 import { EventData } from "tns-core-modules/data/observable";
-import { MainPageViewModel } from "../mainPage";
+import { TestPageMainViewModel } from "../test-page-main-view-model";
 import { WrapLayout } from "tns-core-modules/ui/layouts/wrap-layout";
 import { Page } from "tns-core-modules/ui/page";
 
 export function pageLoaded(args: EventData) {
-    let page = <Page>args.object;
+    const page = <Page>args.object;
-    let view = require("ui/core/view");
+    const wrapLayout = <WrapLayout>page.getViewById("wrapLayoutWithExamples");
+    page.bindingContext = new SubMainPageViewModel(wrapLayout, loadExamples());
+}
 
-    let wrapLayout = view.getViewById(page, "wrapLayoutWithExamples");
+export function loadExamples() {
-
+    const examples = new Map<string, string>();
-    let examples: Map<string, string> = new Map<string, string>();
     examples.set("actColor", "action-bar/color");
     examples.set("actBG", "action-bar/background");
     examples.set("actStyle", "action-bar/all");
@@ -21,11 +22,10 @@ export function pageLoaded(args: EventData) {
     examples.set("modalHiddenActBar", "action-bar/modal-test-hidden-action-bar");
     examples.set("modalShownActBar", "action-bar/modal-test-with-action-bar");
 
-    let viewModel = new SubMainPageViewModel(wrapLayout, examples);
+    return examples;
-    page.bindingContext = viewModel;
 }
 
-export class SubMainPageViewModel extends MainPageViewModel {
+export class SubMainPageViewModel extends TestPageMainViewModel {
     constructor(container: WrapLayout, examples: Map<string, string>) {
         super(container, examples);
     }

apps/app/ui-tests-app/bindings/main-page.ts

@@ -1,23 +1,23 @@
 import { EventData } from "tns-core-modules/data/observable";
-import { MainPageViewModel } from "../mainPage";
+import { TestPageMainViewModel } from "../test-page-main-view-model";
 import { WrapLayout } from "tns-core-modules/ui/layouts/wrap-layout";
 import { Page } from "tns-core-modules/ui/page";
 
 export function pageLoaded(args: EventData) {
-    let page = <Page>args.object;
+    const page = <Page>args.object;
-    let view = require("ui/core/view");
+    const wrapLayout = <WrapLayout>page.getViewById("wrapLayoutWithExamples");
+    page.bindingContext = new SubMainPageViewModel(wrapLayout, loadExamples());
+}
 
-    let wrapLayout = view.getViewById(page, "wrapLayoutWithExamples");
+export function loadExamples() {
-
+    const examples = new Map<string, string>();
-    let examples: Map<string, string> = new Map<string, string>();
     examples.set("basics", "bindings/basics");
     examples.set("xmlbasics", "bindings/xmlbasics");
 
-    let viewModel = new SubMainPageViewModel(wrapLayout, examples);
+    return examples;
-    page.bindingContext = viewModel;
 }
 
-export class SubMainPageViewModel extends MainPageViewModel {
+export class SubMainPageViewModel extends TestPageMainViewModel {
     constructor(container: WrapLayout, examples: Map<string, string>) {
         super(container, examples);
     }

apps/app/ui-tests-app/button/main-page.ts

@@ -1,21 +1,23 @@
 import { EventData } from "tns-core-modules/data/observable";
-import { MainPageViewModel } from "../mainPage";
+import { TestPageMainViewModel } from "../test-page-main-view-model";
 import { WrapLayout } from "tns-core-modules/ui/layouts/wrap-layout";
 import { Page } from "tns-core-modules/ui/page";
 
 export function pageLoaded(args: EventData) {
-    let page = <Page>args.object;
+    const page = <Page>args.object;
-    let view = require("ui/core/view");
+    const wrapLayout = <WrapLayout>page.getViewById("wrapLayoutWithExamples");
-    let wrapLayout = view.getViewById(page, "wrapLayoutWithExamples");
+    page.bindingContext = new SubMainPageViewModel(wrapLayout, loadExamples());
-
-    let examples: Map<string, string> = new Map<string, string>();
-    examples.set("btn-wrap-text-alignment-4266", "button/btn-wrap-text-alignment-4266");
-    
-    let viewModel = new SubMainPageViewModel(wrapLayout, examples);
-    page.bindingContext = viewModel;
 }
 
-export class SubMainPageViewModel extends MainPageViewModel {
+export function loadExamples() {
+    const examples = new Map<string, string>();
+    examples.set("btn-wrap-text-alignment-4266", "button/btn-wrap-text-alignment-4266");
+    examples.set("button-border", "button/button-border");
+    examples.set("styles", "button/styles");
+    return examples;
+}
+
+export class SubMainPageViewModel extends TestPageMainViewModel {
     constructor(container: WrapLayout, examples: Map<string, string>) {
         super(container, examples);
     }

apps/app/ui-tests-app/css/clip-path-inset.xml

@@ -1,33 +1,33 @@
 <Page>
     <GridLayout rows="*,*,*,*,*" columns="*,*" automationText="clipPath">
         <StackLayout col="0" colSpan="2" row="0" width="100" height="100" style.backgroundColor="magenta">
-            <Button width="100" height="100" text="no clip-path" style="background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;" />
+            <Button width="100" height="100" text="no clip-path" style="background-image: url('~/ui-tests-app/resources/images/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;" />
         </StackLayout>
         
         <StackLayout col="0" row="1" width="100" height="100" style.backgroundColor="magenta">
-            <Button width="100" height="100" text="inset(10)" style="clip-path: inset(10); background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;" />
+            <Button width="100" height="100" text="inset(10)" style="clip-path: inset(10); background-image: url('~/ui-tests-app/resources/images/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;" />
         </StackLayout>
         <StackLayout col="0" row="2" width="100" height="100" style.backgroundColor="magenta">
-            <Button width="100" height="100" text="inset(10 20)" style="clip-path: inset(10 20); background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;" />
+            <Button width="100" height="100" text="inset(10 20)" style="clip-path: inset(10 20); background-image: url('~/ui-tests-app/resources/images/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;" />
         </StackLayout>
         <StackLayout col="0" row="3" width="100" height="100" style.backgroundColor="magenta">
-            <Button width="100" height="100" text="inset(10 20 30)" style="clip-path: inset(10 20 30); background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;" />
+            <Button width="100" height="100" text="inset(10 20 30)" style="clip-path: inset(10 20 30); background-image: url('~/ui-tests-app/resources/images/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;" />
         </StackLayout>
         <StackLayout col="0" row="4" width="100" height="100" style.backgroundColor="magenta">
-            <Button width="100" height="100" text="inset(10 20 30 40)" style="clip-path: inset(10 20 30 40); background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;" />
+            <Button width="100" height="100" text="inset(10 20 30 40)" style="clip-path: inset(10 20 30 40); background-image: url('~/ui-tests-app/resources/images/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;" />
         </StackLayout>
         
         <StackLayout col="1" row="1" width="100" height="100" style.backgroundColor="magenta">
-            <Button width="100" height="100" text="inset(10%)" style="clip-path: inset(10%); background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;" />
+            <Button width="100" height="100" text="inset(10%)" style="clip-path: inset(10%); background-image: url('~/ui-tests-app/resources/images/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;" />
         </StackLayout>
         <StackLayout col="1" row="2" width="100" height="100" style.backgroundColor="magenta">
-            <Button width="100" height="100" text="inset(10% 20%)" style="clip-path: inset(10% 20%); background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;" />
+            <Button width="100" height="100" text="inset(10% 20%)" style="clip-path: inset(10% 20%); background-image: url('~/ui-tests-app/resources/images/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;" />
         </StackLayout>
         <StackLayout col="1" row="3" width="100" height="100" style.backgroundColor="magenta">
-            <Button width="100" height="100" text="inset(10% 20% 30%)" style="clip-path: inset(10% 20% 30%); background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;" />
+            <Button width="100" height="100" text="inset(10% 20% 30%)" style="clip-path: inset(10% 20% 30%); background-image: url('~/ui-tests-app/resources/images/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;" />
         </StackLayout>
         <StackLayout col="1" row="4" width="100" height="100" style.backgroundColor="magenta">
-            <Button width="100" height="100" text="inset(10% 20% 30% 40%)" style="clip-path: inset(10% 20% 30% 40%); background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;" />
+            <Button width="100" height="100" text="inset(10% 20% 30% 40%)" style="clip-path: inset(10% 20% 30% 40%); background-image: url('~/ui-tests-app/resources/images/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;" />
         </StackLayout>
 
     </GridLayout>

apps/app/ui-tests-app/css/clip-path.xml

@@ -1,25 +1,25 @@
 <Page>
     <GridLayout columns="*,*" rows="*,*,*,*" automationText="clipPath">
         <StackLayout col="0" colSpan="2" row="0" width="100" height="100" style.backgroundColor="magenta">
-            <Button text="no clip-path" width="100" height="100" style="background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;"/>
+            <Button text="no clip-path" width="100" height="100" style="background-image: url('~/ui-tests-app/resources/images/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;"/>
         </StackLayout>
         <StackLayout col="0" row="1" width="100" height="100" style.backgroundColor="magenta">
-            <Button text="rect" width="100" height="100" style="clip-path: rect(10% 90 90% 10); background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;"/>
+            <Button text="rect" width="100" height="100" style="clip-path: rect(10% 90 90% 10); background-image: url('~/ui-tests-app/resources/images/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;"/>
         </StackLayout>
         <StackLayout col="1" row="1" width="100" height="100" style.backgroundColor="magenta">
-            <Button text="inset" width="100" height="100" style="clip-path: inset(15%); background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;"/>
+            <Button text="inset" width="100" height="100" style="clip-path: inset(15%); background-image: url('~/ui-tests-app/resources/images/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;"/>
         </StackLayout>
         <StackLayout col="0" row="2" width="100" height="100" style.backgroundColor="magenta">
-            <Button text="circle" width="100" height="100" style="clip-path: circle(80% at 55% 40%); background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;"/>
+            <Button text="circle" width="100" height="100" style="clip-path: circle(80% at 55% 40%); background-image: url('~/ui-tests-app/resources/images/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;"/>
         </StackLayout>
         <StackLayout col="1" row="2" width="100" height="100" style.backgroundColor="magenta">
-            <Button text="ellipse" width="100" height="100" style=" clip-path: ellipse(45% 25% at 45% 55%); background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;"/>
+            <Button text="ellipse" width="100" height="100" style=" clip-path: ellipse(45% 25% at 45% 55%); background-image: url('~/ui-tests-app/resources/images/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;"/>
         </StackLayout>
         <StackLayout col="0" row="3" width="100" height="100" style.backgroundColor="magenta">
-            <Button text="polygon"  width="100" height="100" style=" clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;"/>
+            <Button text="polygon"  width="100" height="100" style=" clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);background-image: url('~/ui-tests-app/resources/images/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;"/>
         </StackLayout>
         <StackLayout col="1" row="3" width="100" height="100" style.backgroundColor="magenta">
-            <Button text="image polygon" width="100" height="100" style=" clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;"/>
+            <Button text="image polygon" width="100" height="100" style=" clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);background-image: url('~/ui-tests-app/resources/images/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;"/>
         </StackLayout>
     </GridLayout>
 </Page>

apps/app/ui-tests-app/css/main-page.ts

@@ -1,20 +1,19 @@
 import { EventData } from "tns-core-modules/data/observable";
-import { MainPageViewModel } from "../mainPage";
+import { TestPageMainViewModel } from "../test-page-main-view-model";
 import { WrapLayout } from "tns-core-modules/ui/layouts/wrap-layout";
 import { Page } from "tns-core-modules/ui/page";
 
 export function pageLoaded(args: EventData) {
-    let page = <Page>args.object;
+    const page = <Page>args.object;
-    let view = require("ui/core/view");
+    const wrapLayout = <WrapLayout>page.getViewById("wrapLayoutWithExamples");
+    page.bindingContext = new SubMainPageViewModel(wrapLayout, loadExamples());
+}
 
-    let wrapLayout = view.getViewById(page, "wrapLayoutWithExamples");
+export function loadExamples() {
-
+    const examples = new Map<string, string>();
-    let examples: Map<string, string> = new Map<string, string>();
     examples.set("background", "css/background");
     examples.set("formatted", "css/decoration-transform-formattedtext");
-    examples.set("csslv", "css/listview");
     examples.set("radius", "css/radius");
-    examples.set("styles", "css/styles");
     examples.set("spacing", "css/letter-spacing");
     examples.set("decoration", "css/text-decoration");
     examples.set("transform", "css/text-transform");
@@ -29,8 +28,6 @@ export function pageLoaded(args: EventData) {
     examples.set("transform-decoration-color", "css/transform-decoration-color");
     examples.set("layout-border", "css/layout-border");
     examples.set("label-border", "css/label-border");
-    examples.set("button-border", "css/button-border");
-    examples.set("text-field-border", "css/text-field-border");
     examples.set("text-view-border", "css/text-view-border");
     examples.set("image-border", "css/image-border");
     examples.set("layouts-border-overlap", "css/layouts-border-overlap");
@@ -38,9 +35,6 @@ export function pageLoaded(args: EventData) {
     examples.set("all-uniform-border", "css/all-uniform-border");
     examples.set("all-non-uniform-border", "css/all-non-uniform-border");
     examples.set("margins-paddings-with-percentage", "css/margins-paddings-with-percentage");
-    examples.set("list-picker", "css/list-picker");
-    examples.set("listview", "css/listview");
-    examples.set("listview_bg_separator_color", "css/listview_bg_separator_color");
     examples.set("padding-and-border", "css/padding-and-border");
     examples.set("border-playground", "css/border-playground");
     examples.set("textview-hint-color", "css/textview-hint-color");
@@ -48,11 +42,10 @@ export function pageLoaded(args: EventData) {
     examples.set("combinators", "css/combinators");
     examples.set("styled-formatted-text", "css/styled-formatted-text");
     
-    let viewModel = new SubMainPageViewModel(wrapLayout, examples);
+    return examples;
-    page.bindingContext = viewModel;
 }
 
-export class SubMainPageViewModel extends MainPageViewModel {
+export class SubMainPageViewModel extends TestPageMainViewModel {
     constructor(container: WrapLayout, examples: Map<string, string>) {
         super(container, examples);
     }

apps/app/ui-tests-app/events/main-page.ts

@@ -1,16 +1,16 @@
 import { EventData } from "tns-core-modules/data/observable";
-import { MainPageViewModel } from "../mainPage";
+import { TestPageMainViewModel } from "../test-page-main-view-model";
 import { WrapLayout } from "tns-core-modules/ui/layouts/wrap-layout";
 import { Page } from "tns-core-modules/ui/page";
 
 export function pageLoaded(args: EventData) {
-    let page = <Page>args.object;
+    const page = <Page>args.object;
-    let view = require("ui/core/view");
+    const wrapLayout = <WrapLayout>page.getViewById("wrapLayoutWithExamples");
-
+    page.bindingContext = new SubMainPageViewModel(wrapLayout, loadExamples());
-    let wrapLayout = view.getViewById(page, "wrapLayoutWithExamples");
+}
-
-    let examples: Map<string, string> = new Map<string, string>();
 
+export function loadExamples() {
+    const examples = new Map<string, string>();
     examples.set("gestures", "gestures");
     examples.set("touch", "touch-event");
     examples.set("pan", "pan-event");
@@ -20,12 +20,10 @@ export function pageLoaded(args: EventData) {
     examples.set("i73", "i73");
     examples.set("i86", "i86");
 
-    let viewModel = new SubMainPageViewModel(wrapLayout, examples);
+    return examples;
-    viewModel.basePath="events";
-    page.bindingContext = viewModel;
 }
 
-export class SubMainPageViewModel extends MainPageViewModel {
+export class SubMainPageViewModel extends TestPageMainViewModel {
     constructor(container: WrapLayout, examples: Map<string, string>) {
         super(container, examples);
     }

apps/app/ui-tests-app/flexbox/flexbox-main-page.ts

@@ -1,14 +1,16 @@
 import { EventData } from "tns-core-modules/data/observable";
-import { MainPageViewModel } from "../mainPage";
+import { TestPageMainViewModel } from "../test-page-main-view-model";
 import { WrapLayout } from "tns-core-modules/ui/layouts/wrap-layout";
 import { Page } from "tns-core-modules/ui/page";
-import { getViewById } from "tns-core-modules/ui/core/view"
 
 export function pageLoaded(args: EventData) {
-    let page = <Page>args.object;
+    const page = <Page>args.object;
-    let wrapLayout = <WrapLayout>getViewById(page, "wrapLayout");
+    const wrapLayout = <WrapLayout>page.getViewById("wrapLayoutWithExamples");
-    let examples = new Map<string, string>();
+    page.bindingContext = new FlexboxMainPageViewModel(wrapLayout, loadExamples());
+}
 
+export function loadExamples() {
+    const examples = new Map<string, string>();
     examples.set("flexboxall", "flexbox/flexbox");
     examples.set("flexboxcss", "flexbox/flexbox-css");
     examples.set("flexboxdemo", "flexbox/flexbox-demo");
@@ -16,11 +18,10 @@ export function pageLoaded(args: EventData) {
     examples.set("flex-perf", "flexbox/flexbox-perf-comparison");
     examples.set("flexbox-4143", "flexbox/flexbox-4143");
 
-    let viewModel = new FlexboxMainPageViewModel(wrapLayout, examples);
+    return examples;
-    page.bindingContext = viewModel;
 }
 
-export class FlexboxMainPageViewModel extends MainPageViewModel {
+export class FlexboxMainPageViewModel extends TestPageMainViewModel {
     constructor(container: WrapLayout, examples: Map<string, string>) {
         super(container, examples);
     }

apps/app/ui-tests-app/font/main-page.ts

@@ -1,16 +1,16 @@
 import { EventData } from "tns-core-modules/data/observable";
-import { MainPageViewModel } from "../mainPage";
+import { TestPageMainViewModel } from "../test-page-main-view-model";
 import { WrapLayout } from "tns-core-modules/ui/layouts/wrap-layout";
 import { Page } from "tns-core-modules/ui/page";
 
 export function pageLoaded(args: EventData) {
-    let page = <Page>args.object;
+    const page = <Page>args.object;
-    let view = require("ui/core/view");
+    const wrapLayout = <WrapLayout>page.getViewById("wrapLayoutWithExamples");
-
+    page.bindingContext = new SubMainPageViewModel(wrapLayout, loadExamples());
-    let wrapLayout = view.getViewById(page, "wrapLayoutWithExamples");
+}
-
-    let examples: Map<string, string> = new Map<string, string>();
 
+export function loadExamples() {
+    const examples = new Map<string, string>();
     examples.set("fontbtn", "font/button");
     examples.set("fontlbl", "font/label");
     examples.set("fontfield", "font/text-field");
@@ -20,11 +20,10 @@ export function pageLoaded(args: EventData) {
     examples.set("all-fonts", "font/all-fonts");
     examples.set("awesome-3654", "font/font-awesome/issue-3654");
 
-    let viewModel = new SubMainPageViewModel(wrapLayout, examples);
+    return examples;
-    page.bindingContext = viewModel;
 }
 
-export class SubMainPageViewModel extends MainPageViewModel {
+export class SubMainPageViewModel extends TestPageMainViewModel {
     constructor(container: WrapLayout, examples: Map<string, string>) {
         super(container, examples);
     }

apps/app/ui-tests-app/image-view/main-page.ts

@@ -1,24 +1,23 @@
 import { EventData } from "tns-core-modules/data/observable";
-import { MainPageViewModel } from "../mainPage";
+import { TestPageMainViewModel } from "../test-page-main-view-model";
 import { WrapLayout } from "tns-core-modules/ui/layouts/wrap-layout";
 import { Page } from "tns-core-modules/ui/page";
 
 export function pageLoaded(args: EventData) {
-    let page = <Page>args.object;
+    const page = <Page>args.object;
-    let view = require("ui/core/view");
+    const wrapLayout = <WrapLayout>page.getViewById("wrapLayoutWithExamples");
-
+    page.bindingContext = new SubMainPageViewModel(wrapLayout, loadExamples());
-    let wrapLayout = view.getViewById(page, "wrapLayoutWithExamples");
+}
-
-    let examples: Map<string, string> = new Map<string, string>();
 
+export function loadExamples() {
+    const examples = new Map<string, string>();
     examples.set("roundbtn", "image-view/rounded-buttons");
     examples.set("roundimg", "image-view/rounded-images");
 
-    let viewModel = new SubMainPageViewModel(wrapLayout, examples);
+    return examples;
-    page.bindingContext = viewModel;
 }
 
-export class SubMainPageViewModel extends MainPageViewModel {
+export class SubMainPageViewModel extends TestPageMainViewModel {
     constructor(container: WrapLayout, examples: Map<string, string>) {
         super(container, examples);
     }

apps/app/ui-tests-app/issues/main-page.ts

@@ -1,16 +1,16 @@
 import { EventData } from "tns-core-modules/data/observable";
-import { MainPageViewModel } from "../mainPage";
+import { TestPageMainViewModel } from "../test-page-main-view-model";
 import { WrapLayout } from "tns-core-modules/ui/layouts/wrap-layout";
 import { Page } from "tns-core-modules/ui/page";
 
 export function pageLoaded(args: EventData) {
-    let page = <Page>args.object;
+    const page = <Page>args.object;
-    let view = require("ui/core/view");
+    const wrapLayout = <WrapLayout>page.getViewById("wrapLayoutWithExamples");
-
+    page.bindingContext = new SubMainPageViewModel(wrapLayout, loadExamples());
-    let wrapLayout = view.getViewById(page, "wrapLayoutWithExamples");
+}
-
-    let examples: Map<string, string> = new Map<string, string>();
 
+export function loadExamples() {
+    const examples = new Map<string, string>();    
     examples.set("2911", "issues/issue-2911");
     examples.set("2674", "issues/issue-2674");
     examples.set("2942", "issues/issue-2942");
@@ -25,11 +25,10 @@ export function pageLoaded(args: EventData) {
     examples.set("tabview-with-scrollview_4022","issues/tabview-with-scrollview_4022");
     examples.set("3354-ios", "issues/issue-3354");
 
-    let viewModel = new SubMainPageViewModel(wrapLayout, examples);
+    return examples;
-    page.bindingContext = viewModel;
 }
 
-export class SubMainPageViewModel extends MainPageViewModel {
+export class SubMainPageViewModel extends TestPageMainViewModel {
     constructor(container: WrapLayout, examples: Map<string, string>) {
         super(container, examples);
     }

apps/app/ui-tests-app/layouts/main-page.ts

@@ -1,33 +1,31 @@
 import { EventData } from "tns-core-modules/data/observable";
-import { MainPageViewModel } from "../mainPage";
+import { TestPageMainViewModel } from "../test-page-main-view-model";
 import { WrapLayout } from "tns-core-modules/ui/layouts/wrap-layout";
 import { Page } from "tns-core-modules/ui/page";
 
 export function pageLoaded(args: EventData) {
-    let page = <Page>args.object;
+    const page = <Page>args.object;
-    let view = require("ui/core/view");
+    const wrapLayout = <WrapLayout>page.getViewById("wrapLayoutWithExamples");
-
+    page.bindingContext = new SubMainPageViewModel(wrapLayout, loadExamples());
-    let wrapLayout = view.getViewById(page, "wrapLayoutWithExamples");
+}
-
-    let examples: Map<string, string> = new Map<string, string>();
 
+export function loadExamples() {
+    const examples = new Map<string, string>();    
     examples.set("absolute", "layouts/absolute");
     examples.set("dock", "layouts/dock");
     examples.set("grid", "layouts/grid");
     examples.set("stack", "layouts/stack");
     examples.set("wrap", "layouts/wrap");
-
     examples.set("pabsolute", "layouts-percent/absolute");
     examples.set("pdock", "layouts-percent/dock");
     examples.set("pgrid", "layouts-percent/grid");
     examples.set("pstack", "layouts-percent/stack");
     examples.set("pwrap", "layouts-percent/wrap");
 
-    let viewModel = new SubMainPageViewModel(wrapLayout, examples);
+    return examples;
-    page.bindingContext = viewModel;
 }
 
-export class SubMainPageViewModel extends MainPageViewModel {
+export class SubMainPageViewModel extends TestPageMainViewModel {
     constructor(container: WrapLayout, examples: Map<string, string>) {
         super(container, examples);
     }

apps/app/ui-tests-app/list-picker/main-page.ts

@@ -1,23 +1,22 @@
 import { EventData } from "tns-core-modules/data/observable";
-import { MainPageViewModel } from "../mainPage";
+import { TestPageMainViewModel } from "../test-page-main-view-model";
 import { WrapLayout } from "tns-core-modules/ui/layouts/wrap-layout";
 import { Page } from "tns-core-modules/ui/page";
 
 export function pageLoaded(args: EventData) {
-    let page = <Page>args.object;
+    const page = <Page>args.object;
-    let view = require("ui/core/view");
+    const wrapLayout = <WrapLayout>page.getViewById("wrapLayoutWithExamples");
-
+    page.bindingContext = new SubMainPageViewModel(wrapLayout, loadExamples());
-    let wrapLayout = view.getViewById(page, "wrapLayoutWithExamples");
-
-    let examples: Map<string, string> = new Map<string, string>();
-    
-    examples.set("issue_2895", "list-picker/issue_2895");
-
-    let viewModel = new SubMainPageViewModel(wrapLayout, examples);
-    page.bindingContext = viewModel;
 }
 
-export class SubMainPageViewModel extends MainPageViewModel {
+export function loadExamples() {
+    const examples = new Map<string, string>();
+    examples.set("issue_2895", "list-picker/issue_2895");
+    examples.set("list-picker", "list-picker/list-picker");
+    return examples;
+}
+
+export class SubMainPageViewModel extends TestPageMainViewModel {
     constructor(container: WrapLayout, examples: Map<string, string>) {
         super(container, examples);
     }

apps/app/ui-tests-app/list-view/main-page.ts

@@ -1,25 +1,26 @@
 import { EventData } from "tns-core-modules/data/observable";
-import { MainPageViewModel } from "../mainPage";
+import { TestPageMainViewModel } from "../test-page-main-view-model";
 import { WrapLayout } from "tns-core-modules/ui/layouts/wrap-layout";
 import { Page } from "tns-core-modules/ui/page";
 
 export function pageLoaded(args: EventData) {
-    let page = <Page>args.object;
+    const page = <Page>args.object;
-    let view = require("ui/core/view");
+    const wrapLayout = <WrapLayout>page.getViewById("wrapLayoutWithExamples");
-
+    page.bindingContext = new SubMainPageViewModel(wrapLayout, loadExamples());
-    let wrapLayout = view.getViewById(page, "wrapLayoutWithExamples");
+}
-
-    let examples: Map<string, string> = new Map<string, string>();
 
+export function loadExamples() {
+    const examples = new Map<string, string>();    
     examples.set("list-view-templates", "list-view/list-view");
     examples.set("images-template", "list-view/images-template");
     examples.set("bindings", "list-view/listview-binding");
+    examples.set("listview-bg-separator-color", "list-view/listview-bg-separator-color");
+    examples.set("csslv", "list-view/csslv");
 
-    let viewModel = new SubMainPageViewModel(wrapLayout, examples);
+    return examples;
-    page.bindingContext = viewModel;
 }
 
-export class SubMainPageViewModel extends MainPageViewModel {
+export class SubMainPageViewModel extends TestPageMainViewModel {
     constructor(container: WrapLayout, examples: Map<string, string>) {
         super(container, examples);
     }

apps/app/ui-tests-app/main-page-view-model.ts

@@ -0,0 +1,133 @@
+import { ObservableArray } from "tns-core-modules/data/observable-array";
+import { TestExample } from "./test-example-model";
+import { TestPageMainViewModel } from "./test-page-main-view-model";
+import { WrapLayout } from "tns-core-modules/ui/layouts/wrap-layout";
+import { ListView } from "tns-core-modules/ui/list-view";
+import * as frame from "tns-core-modules/ui/frame";
+import * as dialogs from "tns-core-modules/ui/dialogs";
+
+export class MainPageViewModel extends TestPageMainViewModel {
+
+    private _exampleName: string;
+    private _allExamples: ObservableArray<TestExample>;
+    public static ALL_EXAMPLES: ObservableArray<TestExample>;
+    public static _examplesDictionary: Map<string, TestExample>;
+
+    constructor(buttonsPanel: WrapLayout, examples: Map<string, string>) {
+        super(buttonsPanel, examples);
+        if (MainPageViewModel.ALL_EXAMPLES === undefined || MainPageViewModel.ALL_EXAMPLES.length === 0) {
+            MainPageViewModel.ALL_EXAMPLES = new ObservableArray<TestExample>();
+            MainPageViewModel._examplesDictionary = new Map<string, TestExample>();
+            this._allExamples = new ObservableArray<TestExample>();
+            this.loadAllExamplesRecursive(this.examples);
+            let listView = <ListView>buttonsPanel.page.getViewById("allExamplesListView");
+            listView.visibility = "hidden";
+        }
+        this.filterListView(this.exampleName);
+        this.toggleExamplePanels(this.allExamples);
+    }
+
+    get exampleName(): string {
+        return this._exampleName;
+    }
+
+    set exampleName(value: string) {
+        if (this._exampleName !== value) {
+            this._exampleName = value;
+            this.notifyPropertyChange("exampleName", value);
+            this.filterListView(value);
+        }
+    }
+
+    get allExamples(): ObservableArray<TestExample> {
+        return this._allExamples;
+    }
+
+    set allExamples(array: ObservableArray<TestExample>) {
+        if (this._allExamples !== array) {
+            this._allExamples = array
+            this.notifyPropertyChange("allExamples", array);
+            this.toggleExamplePanels(array);
+        }
+    }
+
+    public loadExampleFromListView(example) {
+        let exmaplePath = this.allExamples.getItem(example.index).path;
+        frame.topmost().navigate(MainPageViewModel.APP_NAME + "/" + exmaplePath);
+    }
+
+    public loadExmaple() {
+        if (this.exampleName === "" || this.exampleName === null || this.exampleName === undefined) {
+            return;
+        }
+        let selectedExample = this.exampleName.toLocaleLowerCase().trim();
+        this.exampleName = selectedExample;
+        if (selectedExample.indexOf("/") > 0) {
+            try {
+                frame.topmost().navigate(MainPageViewModel.APP_NAME + "/" + selectedExample);
+            } catch (error) {
+                dialogs.alert("Cannot find example: " + selectedExample);
+            }
+        } else {
+            this.selectExample(this.exampleName.toLocaleLowerCase());
+        }
+    }
+
+    private filterListView(value: string) {
+        if (value !== "" && value !== undefined) {
+            let array = MainPageViewModel.ALL_EXAMPLES.filter((testExample, index, array) => {
+                return testExample.path.toLowerCase().indexOf(value.toLowerCase()) >= 0
+                    || testExample.name.toLowerCase().indexOf(value.toLowerCase()) >= 0;
+            });
+            this.allExamples = new ObservableArray(array);
+        } else {
+            this.allExamples = null;
+        }
+    }
+
+    private checkIfExampleAlreadyExists(dictionary: Map<string, TestExample>, value: string): boolean {
+        if (dictionary.has(value)) {
+            return true;
+        }
+
+        return false;
+    }
+
+    private toggleExamplePanels(array: ObservableArray<TestExample>) {
+        let listView = <ListView>this.buttonsPanel.page.getViewById("allExamplesListView");
+        if (array !== null && array !== undefined && array.length > 0) {
+            this.buttonsPanel.visibility = "hidden";
+            listView.visibility = "visible";
+        } else {
+            this.buttonsPanel.visibility = "visible";
+            listView.visibility = "hidden";
+        }
+    }
+
+    private loadAllExamplesRecursive(examples: Map<string, string>) {
+        examples.forEach((value, key, map) => {
+            let requiredExample = "~/" + MainPageViewModel.APP_NAME + "/" + value;
+            if (value.indexOf("main") > 0) {
+                try {
+                    let module = require(requiredExample);
+                    if (module.loadExamples !== undefined) {
+                        var currentExamples = new Map<string, string>();
+                        currentExamples = module.loadExamples();
+                        currentExamples.forEach((v, key, map) => {
+                            this.loadAllExamplesRecursive(currentExamples);
+                        });
+                    }
+                } catch (error) {
+                    console.log(error.message);
+                }
+            } else {
+                if (!this.checkIfExampleAlreadyExists(MainPageViewModel._examplesDictionary, value)) {
+                    const testExample = new TestExample(key, value);
+                    this._allExamples.push(testExample);
+                    MainPageViewModel.ALL_EXAMPLES.push(testExample);
+                    MainPageViewModel._examplesDictionary.set(value, testExample)
+                }
+            }
+        });
+    }
+}

apps/app/ui-tests-app/mainPage.ts

@@ -1,180 +1,41 @@
 import { EventData } from "tns-core-modules/data/observable";
+import { MainPageViewModel } from "./main-page-view-model";
 import { Page } from "tns-core-modules/ui/page";
-import * as buttonModule from "tns-core-modules/ui/button";
-import * as colorModule from "tns-core-modules/color";
-import * as platform from "tns-core-modules/platform";
-import * as frame from "tns-core-modules/ui/frame";
-import * as trace from "tns-core-modules/trace";
-import * as observable from "tns-core-modules/data/observable";
-import * as dialogs from "tns-core-modules/ui/dialogs";
 import { WrapLayout } from "tns-core-modules/ui/layouts/wrap-layout";
 
 export function pageLoaded(args: EventData) {
-    let examples: Map<string, string> = new Map<string, string>();
+    const page = <Page>args.object;
-
+    const wrapLayout = page.getViewById<WrapLayout>("wrapLayoutWithExamples");
-    let page = <Page>args.object;
+    const examples: Map<string, string> = new Map<string, string>();
-    let wrapLayout = page.getViewById<WrapLayout>("wrapLayoutWithExamples");
-    
     examples.set("action-bar", "action-bar/main-page");
-    
     examples.set("bindings", "bindings/main-page");
     examples.set("button", "button/main-page");
-
     examples.set("css", "css/main-page");
-
     examples.set("dialogs", "dialogs/dialogs");
-    
     examples.set("events", "events/main-page");
-    
     examples.set("fonts", "font/main-page");
     examples.set("flexbox", "flexbox/flexbox-main-page");
     examples.set("htmlview", "html-view/html-view");
-
     examples.set("image-view", "image-view/main-page");
     examples.set("issues", "issues/main-page");
-
     examples.set("layouts", "layouts/main-page");
     examples.set("list-picker", "list-picker/main-page");
     examples.set("list-view", "list-view/main-page");
-
     examples.set("modalview", "modal-view/modal-view");
-
     examples.set("page", "page/main-page");
     examples.set("perf", "perf/main-page");
-
     examples.set("segStyle", "segmented-bar/all");
-
     examples.set("tab-view", "tab-view/main-page");
     examples.set("timePicker", "time-picker/time-picker");
     examples.set("text-field", "text-field/main-page");
-
     examples.set("webview", "web-view/main-page");
+    page.bindingContext = new MainPageViewModel(wrapLayout, examples);
 
-    let viewModel = new MainPageViewModel(wrapLayout, examples);
+    const parent = page.getViewById('parentLayout');
-    page.bindingContext = viewModel;
+    const searchBar = page.getViewById('textView');
-
-    var parent = page.getViewById('parentLayout');
-    var searchBar = page.getViewById('textView');
-
     if (parent.android) {
         parent.android.setFocusableInTouchMode(true);
         parent.android.setFocusable(true);
         searchBar.android.clearFocus();
     }
 }
-
-export class MainPageViewModel extends observable.Observable {
-    private _exampleName: string;
-    private colors = ["#ff0000", "#0000cc", "#33cc33", "#33cc33"];
-
-    public basePath: string = "";
-    public examples: Map<string, string> = new Map<string, string>();
-
-    constructor(private panel: WrapLayout, private _examples: Map<string, string>) {
-        super();
-        trace.enable();
-        trace.setCategories(trace.categories.Test);
-        this.examples = _examples;
-
-        if (this.shouldLoadBtns()) {
-            this.sortMap(this.examples);
-            this.loadButtons();
-        }
-    }
-
-    get exampleName(): string {
-        return this._exampleName;
-    }
-
-    set exampleName(value: string) {
-        if (this._exampleName !== value) {
-            this._exampleName = value;
-            this.notifyPropertyChange("exampleName", value)
-        }
-    }
-
-    public loadExample(exampleName: string) {
-        console.log("exampleName EXAMPLE: " + exampleName);
-        this.selectExample(exampleName);
-    }
-
-    public loadExmaple() {
-        let selectedExample = this.exampleName.toLocaleLowerCase().trim();
-        this.exampleName = selectedExample;
-        if (selectedExample.indexOf("/") > 0) {
-            try {
-                frame.topmost().navigate("ui-tests-app/" + selectedExample);                
-            } catch (error) {
-                dialogs.alert("Cannot find example: " + selectedExample);
-            }
-        } else {
-            this.selectExample(this.exampleName.toLocaleLowerCase());
-        }
-    }
-
-    private shouldLoadBtns(): boolean {
-        return this.panel.getChildrenCount() <= 0;
-    }
-
-    private selectExample(selectedExample: any) {
-        console.log(" EXAMPLE: " + selectedExample);
-
-        if (this.examples.has(selectedExample)) {
-            frame.topmost().navigate("ui-tests-app/" + this.basePath + "/"+ this.examples.get(selectedExample));
-        }
-        else {
-            dialogs.alert("Cannot find example: " + selectedExample);
-        }
-    }
-
-    private loadButtons() {
-        var count = 0;
-
-        this.examples.forEach((element, key) => {
-            var btn = new buttonModule.Button();
-
-            if (platform.isAndroid) {
-                btn.style.height = 25;
-                btn.style.fontSize = 10;
-                btn.style.margin = "0";
-                btn.style.padding = "0";
-            } else {
-                btn.style.padding = "5";
-            }
-
-            btn.style.color = new colorModule.Color(this.colors[count++ % 3]);
-            btn.on(buttonModule.Button.tapEvent, function (eventData) {
-                let text = btn.text;
-                this.loadExample(text);
-            }, this);
-
-            btn.text = key;
-            this.panel.addChild(btn)
-        });
-    }
-
-    private sortMap(map: Map<string, string>) {
-        let arrayOfKeys = new Array<string>();
-        map.forEach((value, key, map) => {
-            arrayOfKeys.push(key);
-        })
-
-        arrayOfKeys.sort((a, b) => {
-            if (a < b) {
-                return -1;
-            }
-            if (a > b) {
-                return 1;
-            }
-            return a.localeCompare(b);
-        })
-
-        let sortedExamples = new Map<string, string>();
-        arrayOfKeys.forEach((k) => {
-            sortedExamples.set(k, this.examples.get(k));
-        })
-
-        this.examples.clear();
-        this.examples = sortedExamples;
-    }
-}

apps/app/ui-tests-app/mainPage.xml

@@ -8,5 +8,13 @@
     <ScrollView row="1">
       <WrapLayout id="wrapLayoutWithExamples"/>
     </ScrollView>
+    <ListView items="{{ allExamples }}" row="1" itemTap="{{ loadExampleFromListView }}" id="allExamplesListView">
+        <ListView.itemTemplate>
+        <GridLayout columns="*,*">
+            <Label text="{{ name }}" />
+            <Label text="{{ path }}" col="1"/>           
+        </GridLayout>
+        </ListView.itemTemplate>
+    </ListView>
   </GridLayout>
 </Page> 

apps/app/ui-tests-app/modal-view/modal-view.ts

@@ -1,16 +1,9 @@
-import * as pages from "tns-core-modules/ui/page";
+import { Page } from "tns-core-modules/ui/page";
-import * as labelModule from "tns-core-modules/ui/label";
+import { Label } from "tns-core-modules/ui/label";
-import * as observable from "tns-core-modules/data/observable";
 
-var page: pages.Page;
+export function onTap(args) {
-var label: labelModule.Label;
+    const page = <Page>args.object.page;
-
+    const label = page.getViewById<Label>("label");
-export function pageLoaded(args: observable.EventData) {
-    page = <pages.Page>args.object;
-    label = page.getViewById<labelModule.Label>("label");
-}
-
-export function onTap(args: observable.EventData) {
     var fullscreen = (<any>args.object).text.indexOf("(full-screen)") !== -1;
     page.showModal("ui-tests-app/modal-view/login-page", "context", function (username: string, password: string) {
         console.log(username + "/" + password);

apps/app/ui-tests-app/page/main-page.ts

@@ -1,23 +1,21 @@
 import { EventData } from "tns-core-modules/data/observable";
-import { MainPageViewModel } from "../mainPage";
+import { TestPageMainViewModel } from "../test-page-main-view-model";
 import { WrapLayout } from "tns-core-modules/ui/layouts/wrap-layout";
 import { Page } from "tns-core-modules/ui/page";
 
 export function pageLoaded(args: EventData) {
-    let page = <Page>args.object;
+    const page = <Page>args.object;
-    let view = require("ui/core/view");
+    const wrapLayout = <WrapLayout>page.getViewById("wrapLayoutWithExamples");
-
+    page.bindingContext = new SubMainPageViewModel(wrapLayout, loadExamples());
-    let wrapLayout = view.getViewById(page, "wrapLayoutWithExamples");
-
-    let examples: Map<string, string> = new Map<string, string>();
-
-    examples.set("statusBar", "page/page-status-bar-css");
-
-    let viewModel = new SubMainPageViewModel(wrapLayout, examples);
-    page.bindingContext = viewModel;
 }
 
-export class SubMainPageViewModel extends MainPageViewModel {
+export function loadExamples() {
+    const examples = new Map<string, string>();    
+    examples.set("statusBar", "page/page-status-bar-css");
+    return examples;
+}
+
+export class SubMainPageViewModel extends TestPageMainViewModel {
     constructor(container: WrapLayout, examples: Map<string, string>) {
         super(container, examples);
     }

apps/app/ui-tests-app/perf/main-page.ts

@@ -1,23 +1,22 @@
 import { EventData } from "tns-core-modules/data/observable";
-import { MainPageViewModel } from "../mainPage";
+import { TestPageMainViewModel } from "../test-page-main-view-model";
 import { WrapLayout } from "tns-core-modules/ui/layouts/wrap-layout";
 import { Page } from "tns-core-modules/ui/page";
 
 export function pageLoaded(args: EventData) {
-    let page = <Page>args.object;
+    const page = <Page>args.object;
-    let view = require("ui/core/view");
+    const wrapLayout = <WrapLayout>page.getViewById("wrapLayoutWithExamples");
-
+    page.bindingContext = new SubMainPageViewModel(wrapLayout, loadExamples());
-    let wrapLayout = view.getViewById(page, "wrapLayoutWithExamples");
-
-    let examples: Map<string, string> = new Map<string, string>();
-    examples.set("properties", "perf/properties/main-page");
-    examples.set("memory-leaks", "perf/memory-leaks/main-page");
-
-    let viewModel = new SubMainPageViewModel(wrapLayout, examples);
-    page.bindingContext = viewModel;
 }
 
-export class SubMainPageViewModel extends MainPageViewModel {
+export function loadExamples() {
+    const examples = new Map<string, string>();    
+    examples.set("properties", "perf/properties/main-page");
+    examples.set("memory-leaks", "perf/memory-leaks/main-page");
+    return examples;
+}
+
+export class SubMainPageViewModel extends TestPageMainViewModel {
     constructor(container: WrapLayout, examples: Map<string, string>) {
         super(container, examples);
     }

apps/app/ui-tests-app/perf/memory-leaks/main-page.ts

@@ -1,5 +1,5 @@
 import { EventData } from "tns-core-modules/data/observable";
-import { MainPageViewModel } from "../../mainPage";
+import { TestPageMainViewModel } from "../../test-page-main-view-model";
 import { WrapLayout } from "tns-core-modules/ui/layouts/wrap-layout";
 import { Page } from "tns-core-modules/ui/page";
 import { isAndroid } from "tns-core-modules/platform";
@@ -18,7 +18,7 @@ export function pageLoaded(args: EventData) {
     page.bindingContext = viewModel;
 }
 
-export class SubMainPageViewModel extends MainPageViewModel {
+export class SubMainPageViewModel extends TestPageMainViewModel {
     constructor(container: WrapLayout, examples: Map<string, string>) {
         super(container, examples);
     }

apps/app/ui-tests-app/tab-view/main-page.ts

@@ -1,16 +1,16 @@
 import { EventData } from "tns-core-modules/data/observable";
-import { MainPageViewModel } from "../mainPage";
+import { TestPageMainViewModel } from "../test-page-main-view-model";
 import { WrapLayout } from "tns-core-modules/ui/layouts/wrap-layout";
 import { Page } from "tns-core-modules/ui/page";
 
 export function pageLoaded(args: EventData) {
-    let page = <Page>args.object;
+    const page = <Page>args.object;
-    let view = require("ui/core/view");
+    const wrapLayout = <WrapLayout>page.getViewById("wrapLayoutWithExamples");
-
+    page.bindingContext = new SubMainPageViewModel(wrapLayout, loadExamples());
-    let wrapLayout = view.getViewById(page, "wrapLayoutWithExamples");
+}
-
-    let examples: Map<string, string> = new Map<string, string>();
 
+export function loadExamples() {
+    const examples = new Map<string, string>();    
     examples.set("tabColor", "tab-view/color");
     examples.set("tabBG", "tab-view/background");
     examples.set("tabTabsBG", "tab-view/tabsBackground");
@@ -20,12 +20,10 @@ export function pageLoaded(args: EventData) {
     examples.set("tabViewCss", "tab-view/tab-view-css");
     examples.set("tab-view-icons", "tab-view/tab-view-icon");
     examples.set("text-transform", "tab-view/text-transform");
-
+    return examples;
-    let viewModel = new SubMainPageViewModel(wrapLayout, examples);
-    page.bindingContext = viewModel;
 }
 
-export class SubMainPageViewModel extends MainPageViewModel {
+export class SubMainPageViewModel extends TestPageMainViewModel {
     constructor(container: WrapLayout, examples: Map<string, string>) {
         super(container, examples);
     }

apps/app/ui-tests-app/test-example-model.ts

@@ -0,0 +1,34 @@
+import { Observable } from "tns-core-modules/data/observable";
+
+export class TestExample extends Observable {
+    private _name: string;
+    private _path: string;
+
+    constructor(name: string, path: string) {
+        super();
+        this._name = name;
+        this._path = path;
+    }
+
+    get name(): string {
+        return this._name;
+    }
+
+    set name(value: string) {
+        if (this._name !== value) {
+            this._name = value;
+            this.notifyPropertyChange('name', value)
+        }
+    }
+
+    get path(): string {
+        return this._path;
+    }
+
+    set path(value: string) {
+        if (this._path !== value) {
+            this._path = value;
+            this.notifyPropertyChange('path', value)
+        }
+    }
+}

apps/app/ui-tests-app/test-page-main-view-model.ts

@@ -0,0 +1,94 @@
+import { Observable } from "tns-core-modules/data/observable";
+import { Button } from "tns-core-modules/ui/button";
+import { Color } from "tns-core-modules/color";
+import { WrapLayout } from "tns-core-modules/ui/layouts/wrap-layout";
+import * as dialogs from "tns-core-modules/ui/dialogs";
+import * as frame from "tns-core-modules/ui/frame";
+import * as platform from "tns-core-modules/platform";
+
+export class TestPageMainViewModel extends Observable {
+    private _colors = ["#ff0000", "#0000cc", "#33cc33", "#33cc33"];
+
+    public static APP_NAME: string = "ui-tests-app";
+    public basePath: string = "";
+    public examples: Map<string, string> = new Map<string, string>();
+
+    constructor(protected buttonsPanel: WrapLayout, private _examples: Map<string, string>) {
+        super();
+        this.examples = _examples;
+        if (this.shouldLoadBtns()) {
+            this.sortMap(this.examples);
+            this.loadButtons();
+        }
+    }
+
+    protected selectExample(selectedExample: any) {
+        console.log(" EXAMPLE: " + selectedExample);
+
+        if (this.examples.has(selectedExample)) {
+            frame.topmost().navigate(TestPageMainViewModel.APP_NAME + "/" + this.basePath + "/" + this.examples.get(selectedExample));
+        } else {
+            dialogs.alert("Cannot find example: " + selectedExample);
+        }
+    }
+
+    protected loadExample(exampleName: string) {
+        console.log("exampleName EXAMPLE: " + exampleName);
+        this.selectExample(exampleName);
+    }
+
+    private shouldLoadBtns(): boolean {
+        return this.buttonsPanel.getChildrenCount() <= 0;
+    }
+
+    private loadButtons() {
+        var count = 0;
+
+        this.examples.forEach((element, key) => {
+            var btn = new Button();
+
+            if (platform.isAndroid) {
+                btn.style.height = 25;
+                btn.style.fontSize = 10;
+                btn.style.margin = "0";
+                btn.style.padding = "0";
+            } else {
+                btn.style.padding = "5";
+            }
+
+            btn.style.color = new Color(this._colors[count++ % 3]);
+            btn.on(Button.tapEvent, function (eventData) {
+                let text = btn.text;
+                this.loadExample(text);
+            }, this);
+
+            btn.text = key;
+            this.buttonsPanel.addChild(btn)
+        });
+    }
+
+    private sortMap(map: Map<string, string>) {
+        let arrayOfKeys = new Array<string>();
+        map.forEach((value, key, map) => {
+            arrayOfKeys.push(key);
+        })
+
+        arrayOfKeys.sort((a, b) => {
+            if (a < b) {
+                return -1;
+            }
+            if (a > b) {
+                return 1;
+            }
+            return a.localeCompare(b);
+        })
+
+        let sortedExamples = new Map<string, string>();
+        arrayOfKeys.forEach((k) => {
+            sortedExamples.set(k, this.examples.get(k));
+        })
+
+        this.examples.clear();
+        this.examples = sortedExamples;
+    }
+}

apps/app/ui-tests-app/text-field/main-page.ts

@@ -1,23 +1,23 @@
 import { EventData } from "tns-core-modules/data/observable";
-import { MainPageViewModel } from "../mainPage";
+import { TestPageMainViewModel } from "../test-page-main-view-model";
 import { WrapLayout } from "tns-core-modules/ui/layouts/wrap-layout";
 import { Page } from "tns-core-modules/ui/page";
 
 export function pageLoaded(args: EventData) {
-    let page = <Page>args.object;
+    const page = <Page>args.object;
-    let view = require("ui/core/view");
+    const wrapLayout = <WrapLayout>page.getViewById("wrapLayoutWithExamples");
-
+    page.bindingContext = new SubMainPageViewModel(wrapLayout, loadExamples());
-    let wrapLayout = view.getViewById(page, "wrapLayoutWithExamples");
-
-    let examples: Map<string, string> = new Map<string, string>();
-    examples.set("secured-text-field", "text-field/secured-text-field-4135");
-    examples.set("max-length", "text-field/max-length");
-
-    let viewModel = new SubMainPageViewModel(wrapLayout, examples);
-    page.bindingContext = viewModel;
 }
 
-export class SubMainPageViewModel extends MainPageViewModel {
+export function loadExamples() {
+    const examples = new Map<string, string>();
+    examples.set("secured-text-field", "text-field/secured-text-field-4135");
+    examples.set("max-length", "text-field/max-length");
+    examples.set("text-field-border", "text-field/text-field-border");
+    return examples;
+}
+
+export class SubMainPageViewModel extends TestPageMainViewModel {
     constructor(container: WrapLayout, examples: Map<string, string>) {
         super(container, examples);
     }

apps/app/ui-tests-app/text-view/main-page.ts

@@ -0,0 +1,24 @@
+import { EventData } from "tns-core-modules/data/observable";
+import { TestPageMainViewModel } from "../test-page-main-view-model";
+import { WrapLayout } from "tns-core-modules/ui/layouts/wrap-layout";
+import { Page } from "tns-core-modules/ui/page";
+
+export function pageLoaded(args: EventData) {
+    const page = <Page>args.object;
+    const wrapLayout = <WrapLayout>page.getViewById("wrapLayoutWithExamples");
+    page.bindingContext = new SubMainPageViewModel(wrapLayout, loadExamples());
+}
+
+export function loadExamples() {
+    const examples = new Map<string, string>();
+    examples.set("secured-text-field", "text-field/secured-text-field-4135");
+    examples.set("max-length", "text-field/max-length");
+    examples.set("text-field-border", "text-field/text-field-border");
+    return examples;
+}
+
+export class SubMainPageViewModel extends TestPageMainViewModel {
+    constructor(container: WrapLayout, examples: Map<string, string>) {
+        super(container, examples);
+    }
+}

apps/app/ui-tests-app/text-view/main-page.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<Page loaded="pageLoaded">
+    <ScrollView orientation="vertical" row="1">
+        <WrapLayout id="wrapLayoutWithExamples"/>
+    </ScrollView>
+</Page>

apps/app/ui-tests-app/web-view/main-page.ts

@@ -1,25 +1,23 @@
 import { EventData } from "tns-core-modules/data/observable";
-import { MainPageViewModel } from "../mainPage";
+import { TestPageMainViewModel } from "../test-page-main-view-model";
 import { WrapLayout } from "tns-core-modules/ui/layouts/wrap-layout";
 import { Page } from "tns-core-modules/ui/page";
 
 export function pageLoaded(args: EventData) {
-    let page = <Page>args.object;
+    const page = <Page>args.object;
-    let view = require("ui/core/view");
+    const wrapLayout = <WrapLayout>page.getViewById("wrapLayoutWithExamples");
-
+    page.bindingContext = new SubMainPageViewModel(wrapLayout, loadExamples());
-    let wrapLayout = view.getViewById(page, "wrapLayoutWithExamples");
+}
-
-    let examples: Map<string, string> = new Map<string, string>();
 
+export function loadExamples() {
+    const examples = new Map<string, string>();
     examples.set("webview", "web-view/web-view");
     examples.set("webtest", "web-view/web-view-test");
     examples.set("query", "web-view/query-params");
-
+    return examples;
-    let viewModel = new SubMainPageViewModel(wrapLayout, examples);
-    page.bindingContext = viewModel;
 }
 
-export class SubMainPageViewModel extends MainPageViewModel {
+export class SubMainPageViewModel extends TestPageMainViewModel {
     constructor(container: WrapLayout, examples: Map<string, string>) {
         super(container, examples);
     }