Implement new logic for loading ui tests

apps/app/ui-tests-app/action-bar/action-item-position.ts

@@ -0,0 +1,39 @@
+import { EventData } from "data/observable";
+import { Page } from "ui/page";
+import observable = require("data/observable");
+
+export function navigatingTo(args: EventData) {
+    let page = <Page>args.object;
+    page.bindingContext = new ActionItemPostitionView();
+}
+
+export class ActionItemPostitionView extends observable.Observable {
+    private _values = ["-i---", "---i---", "---i-"];
+    private _count: number;
+    private _text: string;
+
+    constructor() {
+        super();
+        this._count = 0;
+    }
+
+    get text(): string {
+        return this._text;
+    }
+
+    set text(value: string) {
+        if (this._text !== value) {
+            this._text = value;
+            this.notifyPropertyChange("text", value)
+        }
+    }
+
+    public onTap() {
+        this.change();
+    }
+
+    public change() {
+        let index = this._count++ % 3;
+        this.text = this._values[index];
+    }
+}

apps/app/ui-tests-app/action-bar/action-item-position.xml

@@ -0,0 +1,16 @@
+<Page 
+  xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo">
+  <Page.actionBar>
+    <ActionBar>
+    <NavigationButton text="Go Back" android.systemIcon="ic_menu_back"></NavigationButton>
+      <ActionItem ios.position="right" >
+        <Button text="{{ text }}" backgroundColor="red" tap="change"/>
+      </ActionItem>
+    </ActionBar>
+  </Page.actionBar>
+  <StackLayout>
+    <Label text="Tap to change the text in the actionbar" class="title"/>
+    <Button text="Tap" tap="{{ onTap }}" />
+    <Label text="{{ text }}"/> 
+  </StackLayout>
+</Page>

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

@@ -0,0 +1,28 @@
+import { EventData } from "data/observable";
+import { MianPageViewModel } from "../mainPage";
+import { WrapLayout } from "ui/layouts/wrap-layout";
+import { Page } from "ui/page";
+
+export function pageLoaded(args: EventData) {
+    let page = <Page>args.object;
+    let view = require("ui/core/view");
+
+    let wrapLayout = view.getViewById(page, "wrapLayoutWithExamples");
+
+    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");
+    examples.set("actIcons", "action-bar/system-icons");
+    examples.set("actView", "action-bar/action-view");
+    examples.set("actionItemPosition", "action-bar/action-item-position");
+
+    let viewModel = new SubMianPageViewModel(wrapLayout, examples);
+    page.bindingContext = viewModel;
+}
+
+export class SubMianPageViewModel extends MianPageViewModel {
+    constructor(container: WrapLayout, examples: Map<string, string>) {
+        super(container, examples);
+    }
+}

apps/app/ui-tests-app/action-bar/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/bindings/main-page.ts

@@ -0,0 +1,24 @@
+import { EventData } from "data/observable";
+import { MianPageViewModel } from "../mainPage";
+import { WrapLayout } from "ui/layouts/wrap-layout";
+import { Page } from "ui/page";
+
+export function pageLoaded(args: EventData) {
+    let page = <Page>args.object;
+    let view = require("ui/core/view");
+
+    let wrapLayout = view.getViewById(page, "wrapLayoutWithExamples");
+
+    let examples: Map<string, string> = new Map<string, string>();
+    examples.set("basics", "bindings/basics");
+    examples.set("xmlbasics", "bindings/xmlbasics");
+
+    let viewModel = new SubMianPageViewModel(wrapLayout, examples);
+    page.bindingContext = viewModel;
+}
+
+export class SubMianPageViewModel extends MianPageViewModel {
+    constructor(container: WrapLayout, examples: Map<string, string>) {
+        super(container, examples);
+    }
+}

apps/app/ui-tests-app/bindings/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/css/main-page.ts

@@ -0,0 +1,36 @@
+import { EventData } from "data/observable";
+import { MianPageViewModel } from "../mainPage";
+import { WrapLayout } from "ui/layouts/wrap-layout";
+import { Page } from "ui/page";
+
+export function pageLoaded(args: EventData) {
+    let page = <Page>args.object;
+    let view = require("ui/core/view");
+
+    let wrapLayout = view.getViewById(page, "wrapLayoutWithExamples");
+
+    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("tabmore", "css/tab-view-more");
+    examples.set("spacing", "css/letter-spacing");
+    examples.set("decoration", "css/text-decoration");
+    examples.set("transform", "css/text-transform");
+    examples.set("whitespace", "css/white-space");
+    examples.set("switch", "css/views");
+    examples.set("zindex", "css/zindex");
+    examples.set("clipPath", "css/clip-path");
+    examples.set("padding", "css/padding");
+
+    let viewModel = new SubMianPageViewModel(wrapLayout, examples);
+    page.bindingContext = viewModel;
+}
+
+export class SubMianPageViewModel extends MianPageViewModel {
+    constructor(container: WrapLayout, examples: Map<string, string>) {
+        super(container, examples);
+    }
+}

apps/app/ui-tests-app/css/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/css/padding.xml

@@ -1,8 +1,8 @@
 <Page xmlns="http://schemas.nativescript.org/tns.xsd" >
   <StackLayout automationText="padding">
-    <Label id="label" text="Label" backgroundColor="red"/>
-    <TextField id="textField" text="TextField" backgroundColor="green"/>
-    <TextView id="textView" text="TextView" backgroundColor="blue"/>
-    <Button id="button" text="Button" backgroundColor="yellow"/>
+    <Label id="label" text="Label" backgroundColor="red" style="padding:50"/>
+    <TextField id="textField" text="TextField" backgroundColor="green" style="padding:50"/>
+    <TextView id="textView" text="TextView" backgroundColor="blue" style="padding:50"/>
+    <Button id="button" text="Button" backgroundColor="yellow" style="padding:50"/>
   </StackLayout>
 </Page>

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

@@ -0,0 +1,28 @@
+import { EventData } from "data/observable";
+import { MianPageViewModel } from "../mainPage";
+import { WrapLayout } from "ui/layouts/wrap-layout";
+import { Page } from "ui/page";
+
+export function pageLoaded(args: EventData) {
+    let page = <Page>args.object;
+    let view = require("ui/core/view");
+
+    let wrapLayout = view.getViewById(page, "wrapLayoutWithExamples");
+
+    let examples: Map<string, string> = new Map<string, string>();
+
+    examples.set("fontbtn", "font/button");
+    examples.set("fontlbl", "font/label");
+    examples.set("fontfield", "font/text-field");
+    examples.set("fontview", "font/text-view");
+    examples.set("nordic", "nordic/nordic");
+
+    let viewModel = new SubMianPageViewModel(wrapLayout, examples);
+    page.bindingContext = viewModel;
+}
+
+export class SubMianPageViewModel extends MianPageViewModel {
+    constructor(container: WrapLayout, examples: Map<string, string>) {
+        super(container, examples);
+    }
+}

apps/app/ui-tests-app/font/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/image-view/main-page.ts

@@ -0,0 +1,25 @@
+import { EventData } from "data/observable";
+import { MianPageViewModel } from "../mainPage";
+import { WrapLayout } from "ui/layouts/wrap-layout";
+import { Page } from "ui/page";
+
+export function pageLoaded(args: EventData) {
+    let page = <Page>args.object;
+    let view = require("ui/core/view");
+
+    let wrapLayout = view.getViewById(page, "wrapLayoutWithExamples");
+
+    let examples: Map<string, string> = new Map<string, string>();
+    
+    examples.set("roundbtn", "image-view/rounded-buttons");
+    examples.set("roundimg", "image-view/rounded-images");
+
+    let viewModel = new SubMianPageViewModel(wrapLayout, examples);
+    page.bindingContext = viewModel;
+}
+
+export class SubMianPageViewModel extends MianPageViewModel {
+    constructor(container: WrapLayout, examples: Map<string, string>) {
+        super(container, examples);
+    }
+}

apps/app/ui-tests-app/image-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/layouts/main-page.ts

@@ -0,0 +1,36 @@
+import { EventData } from "data/observable";
+import { MianPageViewModel } from "../mainPage";
+import { WrapLayout } from "ui/layouts/wrap-layout";
+import { Page } from "ui/page";
+
+export function pageLoaded(args: EventData) {
+    let page = <Page>args.object;
+    let view = require("ui/core/view");
+
+    let wrapLayout = view.getViewById(page, "wrapLayoutWithExamples");
+
+    let examples: Map<string, string> = new Map<string, string>();
+
+    examples.set("absolute", "layouts/absolute");
+    examples.set("dock", "layouts/dock");
+    examples.set("grid", "layouts/grid");
+    examples.set("myview", "layouts/myview");
+    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("pmyview", "layouts-percent/myview");
+    examples.set("pstack", "layouts-percent/stack");
+    examples.set("pwrap", "layouts-percent/wrap");
+
+    let viewModel = new SubMianPageViewModel(wrapLayout, examples);
+    page.bindingContext = viewModel;
+}
+
+export class SubMianPageViewModel extends MianPageViewModel {
+    constructor(container: WrapLayout, examples: Map<string, string>) {
+        super(container, examples);
+    }
+}

apps/app/ui-tests-app/layouts/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/main-page-view-model.ts

@@ -1,136 +0,0 @@
-import frame = require("ui/frame");
-import trace = require("trace");
-import observable = require("data/observable");
-import dialogs = require("ui/dialogs");
-
-export class MianPageViewModel extends observable.Observable {
-    private _exampleName: string;
-    private basePath: string = "";
-
-    public examples: Map<string, string> = new Map<string, string>();
-
-    constructor() {
-        super();
-        trace.enable();
-        trace.setCategories(trace.categories.Test);
-        this.refresh();
-    }
-
-    get exampleName(): string {
-        return this._exampleName;
-    }
-
-    set exampleName(value: string) {
-        if (this._exampleName !== value) {
-            this._exampleName = value;
-            this.notifyPropertyChange("exampleName", value)
-        }
-    }
-
-    public loadExample(exampleName: any) {
-        console.log("exampleName EXAMLE: " + exampleName);
-        this.selectExample(exampleName);
-    }
-
-    public loadExampleFromRun(){
-        this.selectExample(this.exampleName);
-    }
-
-    private selectExample(selectedExample: any) {
-        console.log(" EXAMLE: " + 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 refresh() {
-        this.examples.set("actColor", "action-bar/color");
-        this.examples.set("actBG", "action-bar/background");
-        this.examples.set("actStyle", "action-bar/all");
-        this.examples.set("actIcons", "action-bar/system-icons");
-        this.examples.set("actView", "action-bar/action-view");
-
-        this.examples.set("basics", "bindings/basics");
-        this.examples.set("xmlbasics", "bindings/xmlbasics");
-
-        this.examples.set("background", "css/background");
-        this.examples.set("formatted", "css/decoration-transform-formattedtext");
-        this.examples.set("csslv", "css/listview");
-        this.examples.set("radius", "css/radius");
-        this.examples.set("styles", "css/styles");
-        this.examples.set("tabmore", "css/tab-view-more");
-        this.examples.set("spacing", "css/letter-spacing");
-        this.examples.set("decoration", "css/text-decoration");
-        this.examples.set("transform", "css/text-transform");
-        this.examples.set("whitespace", "css/white-space");
-        this.examples.set("switch", "css/views");
-        this.examples.set("zindex", "css/zindex");
-        this.examples.set("clipPath", "css/clip-path");
-        this.examples.set("dialogs", "dialogs/dialogs");
-
-        this.examples.set("fontbtn", "font/button");
-        this.examples.set("fontlbl", "font/label");
-        this.examples.set("fontfield", "font/text-field");
-        this.examples.set("fontview", "font/text-view");
-
-        this.examples.set("customfonts", "font/custom-fonts");
-        this.examples.set("material", "font/material-icons");
-        this.examples.set("tabfont", "font/tab-view");
-
-        this.examples.set("htmlview", "html-view/html-view");
-
-        this.examples.set("roundbtn", "image-view/rounded-buttons");
-        this.examples.set("roundimg", "image-view/rounded-images");
-
-        this.examples.set("absolute", "layouts/absolute");
-        this.examples.set("dock", "layouts/dock");
-        this.examples.set("grid", "layouts/grid");
-        this.examples.set("myview", "layouts/myview");
-        this.examples.set("stack", "layouts/stack");
-        this.examples.set("wrap", "layouts/wrap");
-
-        this.examples.set("pabsolute", "layouts-percent/absolute");
-        this.examples.set("pdock", "layouts-percent/dock");
-        this.examples.set("pgrid", "layouts-percent/grid");
-        this.examples.set("pmyview", "layouts-percent/myview");
-        this.examples.set("pstack", "layouts-percent/stack");
-        this.examples.set("pwrap", "layouts-percent/wrap");
-
-        this.examples.set("modalview", "modal-view/modal-view");
-        this.examples.set("nordic", "nordic/nordic");
-
-        this.examples.set("padding", "padding/padding");
-        this.examples.set("timePicker", "time-picker/time-picker");
-        this.examples.set("gestures", "pages/gestures");
-        this.examples.set("touch", "pages/touch-event");
-        this.examples.set("pan", "pages/pan-event");
-        this.examples.set("handlers", "pages/handlers");
-
-        this.examples.set("animeBG", "animations/background");
-        this.examples.set("transitions", "transitions/page0");
-
-        //examples.set("listview_binding", "pages/listview_binding");
-        this.examples.set("console", "pages/console");
-        this.examples.set("i61", "pages/i61");
-        this.examples.set("i73", "pages/i73");
-        this.examples.set("i86", "pages/i86");
-
-        this.examples.set("segStyle", "segmented-bar/all");
-
-        this.examples.set("tabColor", "tab-view/color");
-        this.examples.set("tabBG", "tab-view/background");
-        this.examples.set("tabTabsBG", "tab-view/tabsBackground");
-        this.examples.set("tabSelected", "tab-view/selected");
-        this.examples.set("tabStyle", "tab-view/all");
-
-        //examples.set("textfield", "text-field/text-field");
-
-        this.examples.set("webview", "web-view/web-view");
-        this.examples.set("webtest", "web-view/web-view-test");
-    }
-}
-

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

@@ -1,47 +1,225 @@
 import { EventData } from "data/observable";
 import { Page } from "ui/page";
-import { MianPageViewModel } from "./main-page-view-model";
 import buttonModule = require("ui/button");
 import colorModule = require("color");
 import * as platform from "platform";
+import frame = require("ui/frame");
+import trace = require("trace");
+import observable = require("data/observable");
+import dialogs = require("ui/dialogs");
+import { WrapLayout } from "ui/layouts/wrap-layout";
+
+var examples: Map<string, string> = new Map<string, string>();
+//should be removed
+var oldExamples: Map<string, string> = new Map<string, string>();
 
-var wrapLayout: any;
-var page: Page;
-var colors = ["#ff0000", "#0000cc", "#33cc33", "#33cc33"];
-var viewModel: MianPageViewModel;
-var isInitialized: boolean = false;
-// Event handler for Page "navigatingTo" event attached in main-page.xml
 export function pageLoaded(args: EventData) {
-    // Get the event sender
-    page = <Page>args.object;
-    var view = require("ui/core/view");
-    wrapLayout = view.getViewById(page, "wrapLayoutWithExamples");
-    viewModel = new MianPageViewModel();
+    let page = <Page>args.object;
+    let view = require("ui/core/view");
+    let wrapLayout = <WrapLayout>view.getViewById(page, "wrapLayoutWithExamples");
+
+    examples.set("action-bar", "action-bar/main-page");
+    examples.set("bindings", "bindings/main-page");
+    examples.set("css", "css/main-page");
+    examples.set("fonts", "font/main-page");
+    examples.set("image-view", "image-view/main-page");
+    examples.set("tab-view", "tab-view/main-page");
+    examples.set("layouts", "layouts/main-page");
+    examples.set("pages-events", "pages/main-page");
+
+    examples.set("modalview", "modal-view/modal-view");
+    examples.set("dialogs", "dialogs/dialogs");
+    examples.set("htmlview", "html-view/html-view");
+    examples.set("timePicker", "time-picker/time-picker");
+    examples.set("animeBG", "animations/background");
+    examples.set("transitions", "transitions/page0");
+    examples.set("segStyle", "segmented-bar/all");
+    examples.set("webview", "web-view/web-view");
+
+    //examples.set("listview_binding", "pages/listview_binding");
+    //examples.set("textfield", "text-field/text-field");
+
+    let viewModel = new MianPageViewModel(wrapLayout, examples);
     page.bindingContext = viewModel;
 
-    if (!isInitialized) {
-        loadButtons();
-        isInitialized = true;
+     var parent = page.getViewById('parentLayout');
+     var searchBar = page.getViewById('textView');
+
+    if (parent.android) {
+        parent.android.setFocusableInTouchMode(true);
+        parent.android.setFocusable(true);
+        searchBar.android.clearFocus();
     }
+
+    refresh();
 }
 
-function loadButtons() {
-    var count = 0;
+// should be removes
+export function refresh() {
+    oldExamples.set("actStyle", "action-bar/all");
+    oldExamples.set("actIcons", "action-bar/system-icons");
+    oldExamples.set("actView", "action-bar/action-view");
 
-    viewModel.examples.forEach((element, key) => {
-        var btn = new buttonModule.Button();
-        if (platform.isIOS) {
-            btn.style.margin = "5";
-        }else{
-            btn.style.margin = "0";
+    oldExamples.set("basics", "bindings/basics");
+    oldExamples.set("xmlbasics", "bindings/xmlbasics");
+
+    oldExamples.set("background", "css/background");
+    oldExamples.set("formatted", "css/decoration-transform-formattedtext");
+    oldExamples.set("csslv", "css/listview");
+    oldExamples.set("radius", "css/radius");
+    oldExamples.set("styles", "css/styles");
+    oldExamples.set("tabmore", "css/tab-view-more");
+    oldExamples.set("spacing", "css/letter-spacing");
+    oldExamples.set("decoration", "css/text-decoration");
+    oldExamples.set("transform", "css/text-transform");
+    oldExamples.set("whitespace", "css/white-space");
+    oldExamples.set("switch", "css/views");
+    oldExamples.set("zindex", "css/zindex");
+    oldExamples.set("clipPath", "css/clip-path");
+    oldExamples.set("dialogs", "dialogs/dialogs");
+
+    oldExamples.set("fontbtn", "font/button");
+    oldExamples.set("fontlbl", "font/label");
+    oldExamples.set("fontfield", "font/text-field");
+    oldExamples.set("fontview", "font/text-view");
+
+    oldExamples.set("customfonts", "font/custom-fonts");
+    oldExamples.set("material", "font/material-icons");
+    oldExamples.set("tabfont", "font/tab-view");
+
+    oldExamples.set("htmlview", "html-view/html-view");
+
+    oldExamples.set("roundbtn", "image-view/rounded-buttons");
+    oldExamples.set("roundimg", "image-view/rounded-images");
+
+    oldExamples.set("absolute", "layouts/absolute");
+    oldExamples.set("dock", "layouts/dock");
+    oldExamples.set("grid", "layouts/grid");
+    oldExamples.set("myview", "layouts/myview");
+    oldExamples.set("stack", "layouts/stack");
+    oldExamples.set("wrap", "layouts/wrap");
+
+    oldExamples.set("pabsolute", "layouts-percent/absolute");
+    oldExamples.set("pdock", "layouts-percent/dock");
+    oldExamples.set("pgrid", "layouts-percent/grid");
+    oldExamples.set("pmyview", "layouts-percent/myview");
+    oldExamples.set("pstack", "layouts-percent/stack");
+    oldExamples.set("pwrap", "layouts-percent/wrap");
+
+    oldExamples.set("modalview", "modal-view/modal-view");
+    oldExamples.set("nordic", "nordic/nordic");
+
+    oldExamples.set("padding", "padding/padding");
+    oldExamples.set("timePicker", "time-picker/time-picker");
+    oldExamples.set("gestures", "pages/gestures");
+    oldExamples.set("touch", "pages/touch-event");
+    oldExamples.set("pan", "pages/pan-event");
+    oldExamples.set("handlers", "pages/handlers");
+
+    oldExamples.set("animeBG", "animations/background");
+    oldExamples.set("transitions", "transitions/page0");
+
+    //oldExamples.set("listview_binding", "pages/listview_binding");
+    oldExamples.set("console", "pages/console");
+    oldExamples.set("i61", "pages/i61");
+    oldExamples.set("i73", "pages/i73");
+    oldExamples.set("i86", "pages/i86");
+
+    oldExamples.set("segStyle", "segmented-bar/all");
+
+    oldExamples.set("tabColor", "tab-view/color");
+    oldExamples.set("tabBG", "tab-view/background");
+    oldExamples.set("tabTabsBG", "tab-view/tabsBackground");
+    oldExamples.set("tabSelected", "tab-view/selected");
+    oldExamples.set("tabStyle", "tab-view/all");
+
+    //oldExamples.set("textfield", "text-field/text-field");
+
+    oldExamples.set("webview", "web-view/web-view");
+    oldExamples.set("webtest", "web-view/web-view-test");
+}
+
+export class MianPageViewModel extends observable.Observable {
+    private _exampleName: string;
+    private basePath: string = "";
+    private colors = ["#ff0000", "#0000cc", "#33cc33", "#33cc33"];
+
+    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.loadButtons();
         }
-        btn.style.color = new colorModule.Color(colors[count++ % 3]);
-        btn.on(buttonModule.Button.tapEvent, function (eventData) {
-            let text = btn.text;
-            viewModel.loadExample(text);
-        }, this);
+    }
 
-        btn.text = key;
-        wrapLayout.addChild(btn)
-    });
+    get exampleName(): string {
+        return this._exampleName;
+    }
+
+    set exampleName(value: string) {
+        if (this._exampleName !== value) {
+            this._exampleName = value;
+            this.notifyPropertyChange("exampleName", value)
+        }
+    }
+
+    public loadExample(exampleName: any) {
+        console.log("exampleName EXAMLE: " + exampleName);
+        this.selectExample(exampleName);
+    }
+
+    public loadOldExmaples() {
+        if (oldExamples.has(this.exampleName)) {
+            frame.topmost().navigate("ui-tests-app/" + this.basePath + oldExamples.get(this.exampleName));
+        }
+        else {
+            dialogs.alert("Cannot find example: " + this.exampleName);
+        }
+    }
+
+    private shouldLoadBtns(): boolean {
+        return this.panel.getChildrenCount() <= 0;
+    }
+
+    private selectExample(selectedExample: any) {
+        console.log(" EXAMLE: " + 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)
+        });
+    }
 }

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

@@ -1,10 +1,15 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <Page loaded="pageLoaded">
-  <GridLayout rows="auto, auto, *">
-    <Button automationText="btn" text="Run" tap="{{ loadExampleFromRun }}" />
-    <TextView automationText="tv" row="1" text="{{ exampleName }}"/>
-    <ScrollView orientation="vertical" row="3" >
+  <GridLayout rows="auto, *, *">
+    <StackLayout id="parentLayout">
+      <TextView automationText="tv" id="textView" text="{{ exampleName }}"/>
+      <Button automationText="btn" id="btnRun" text="Run" tap="{{ loadOldExmaples }}"/>
+    </StackLayout>
+    <ScrollView row="1">
       <WrapLayout id="wrapLayoutWithExamples"/>
     </ScrollView>
+    <ScrollView row="2">
+      <WrapLayout id="wrapLayoutWithOldExamples"/>
+    </ScrollView>
   </GridLayout>
 </Page>

apps/app/ui-tests-app/padding/padding.css

@@ -1,3 +0,0 @@
-TextField, TextView, Button, Label {
-    padding: 50;
-}

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

@@ -0,0 +1,31 @@
+import { EventData } from "data/observable";
+import { MianPageViewModel } from "../mainPage";
+import { WrapLayout } from "ui/layouts/wrap-layout";
+import { Page } from "ui/page";
+
+export function pageLoaded(args: EventData) {
+    let page = <Page>args.object;
+    let view = require("ui/core/view");
+
+    let wrapLayout = view.getViewById(page, "wrapLayoutWithExamples");
+
+    let examples: Map<string, string> = new Map<string, string>();
+
+    examples.set("gestures", "pages/gestures");
+    examples.set("touch", "pages/touch-event");
+    examples.set("pan", "pages/pan-event");
+    examples.set("handlers", "pages/handlers");
+    examples.set("console", "pages/console");
+    examples.set("i61", "pages/i61");
+    examples.set("i73", "pages/i73");
+    examples.set("i86", "pages/i86");
+
+    let viewModel = new SubMianPageViewModel(wrapLayout, examples);
+    page.bindingContext = viewModel;
+}
+
+export class SubMianPageViewModel extends MianPageViewModel {
+    constructor(container: WrapLayout, examples: Map<string, string>) {
+        super(container, examples);
+    }
+}

apps/app/ui-tests-app/pages/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/tab-view/main-page.ts

@@ -0,0 +1,31 @@
+import { EventData } from "data/observable";
+import { MianPageViewModel } from "../mainPage";
+import { WrapLayout } from "ui/layouts/wrap-layout";
+import { Page } from "ui/page";
+
+export function pageLoaded(args: EventData) {
+    let page = <Page>args.object;
+    let view = require("ui/core/view");
+
+    let wrapLayout = view.getViewById(page, "wrapLayoutWithExamples");
+
+    let examples: Map<string, string> = new Map<string, string>();
+
+    examples.set("gestures", "pages/gestures");
+    examples.set("touch", "pages/touch-event");
+    examples.set("pan", "pages/pan-event");
+    examples.set("handlers", "pages/handlers");
+    examples.set("console", "pages/console");
+    examples.set("i61", "pages/i61");
+    examples.set("i73", "pages/i73");
+    examples.set("i86", "pages/i86");
+
+    let viewModel = new SubMianPageViewModel(wrapLayout, examples);
+    page.bindingContext = viewModel;
+}
+
+export class SubMianPageViewModel extends MianPageViewModel {
+    constructor(container: WrapLayout, examples: Map<string, string>) {
+        super(container, examples);
+    }
+}

apps/app/ui-tests-app/tab-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>