diff --git a/apps/app/ui-tests-app/main-page-view-model.ts b/apps/app/ui-tests-app/main-page-view-model.ts new file mode 100644 index 000000000..240eb0409 --- /dev/null +++ b/apps/app/ui-tests-app/main-page-view-model.ts @@ -0,0 +1,138 @@ +import frame = require("ui/frame"); +import pages = require("ui/page"); +import trace = require("trace"); +import observable = require("data/observable"); +import dialogs = require("ui/dialogs"); +import observableArray = require("data/observable-array"); + +export class MianPageViewModel extends observable.Observable { + private _exampleName: string; + private basePath: string = ""; + + public examples: Map = new Map(); + + 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"); + } +} + diff --git a/apps/app/ui-tests-app/mainPage.ts b/apps/app/ui-tests-app/mainPage.ts index d02e7ccd8..73fd42baa 100644 --- a/apps/app/ui-tests-app/mainPage.ts +++ b/apps/app/ui-tests-app/mainPage.ts @@ -1,112 +1,48 @@ -import frame = require("ui/frame"); -import pages = require("ui/page"); -import trace = require("trace"); -import observable = require("data/observable"); -import dialogs = require("ui/dialogs"); +import { EventData } from "data/observable"; +import { Page } from "ui/page"; +import { MianPageViewModel } from "./main-page-view-model"; +import buttonModule = require("ui/button"); +import observableArray = require("data/observable-array"); +import colorModule = require("color"); +import * as platform from "platform"; -trace.enable(); -trace.setCategories(trace.categories.Test); +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 = args.object; + var view = require("ui/core/view"); + wrapLayout = view.getViewById(page, "wrapLayoutWithExamples"); + viewModel = new MianPageViewModel(); + page.bindingContext = viewModel; -var basePath = ""; -var VM = new observable.Observable(); -var examples = new Map(); - -export function pageLoaded(args) { - var page = args.object; - page.bindingContext = VM; - VM.set("selected", ""); -} - -export function selectExample() { - var ex: string = VM.get("selected"); - if (examples.has(ex)) { - frame.topmost().navigate("ui-tests-app/" + basePath + examples.get(ex)); - } - else { - dialogs.alert("Cannot find example: " + ex); + if (!isInitialized) { + loadButtons(); + isInitialized = true; } } -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"); +function loadButtons() { + var count = 0; -examples.set("basics", "bindings/basics"); -examples.set("xmlbasics", "bindings/xmlbasics"); + viewModel.examples.forEach((element, key) => { + var btn = new buttonModule.Button(); + if (platform.isIOS) { + btn.style.margin = "5"; + }else{ + btn.style.margin = "0"; + } + btn.style.color = new colorModule.Color(colors[count++ % 3]); + btn.on(buttonModule.Button.tapEvent, function (eventData) { + let text = btn.text; + viewModel.loadExample(text); + }, this); -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("dialogs", "dialogs/dialogs"); - -examples.set("fontbtn", "font/button"); -examples.set("fontlbl", "font/label"); -examples.set("fontfield", "font/text-field"); -examples.set("fontview", "font/text-view"); - -examples.set("customfonts", "font/custom-fonts"); -examples.set("material", "font/material-icons"); -examples.set("tabfont", "font/tab-view"); - -examples.set("htmlview", "html-view/html-view"); - -examples.set("roundbtn", "image-view/rounded-buttons"); -examples.set("roundimg", "image-view/rounded-images"); - -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"); - -examples.set("modalview", "modal-view/modal-view"); -examples.set("nordic", "nordic/nordic"); - -examples.set("padding", "padding/padding"); -examples.set("timePicker", "time-picker/time-picker"); -examples.set("gestures", "pages/gestures"); -examples.set("touch", "pages/touch-event"); -examples.set("pan", "pages/pan-event"); -examples.set("handlers", "pages/handlers"); - -examples.set("animeBG", "animations/background"); -examples.set("transitions", "transitions/page0"); - -//examples.set("listview_binding", "pages/listview_binding"); -examples.set("console", "pages/console"); -examples.set("i61", "pages/i61"); -examples.set("i73", "pages/i73"); -examples.set("i86", "pages/i86"); - -examples.set("segStyle", "segmented-bar/all"); - -examples.set("tabColor", "tab-view/color"); -examples.set("tabBG", "tab-view/background"); -examples.set("tabTabsBG", "tab-view/tabsBackground"); -examples.set("tabSelected", "tab-view/selected"); -examples.set("tabStyle", "tab-view/all"); - -//examples.set("textfield", "text-field/text-field"); - -examples.set("webview", "web-view/web-view"); -examples.set("webtest", "web-view/web-view-test"); + btn.text = key; + wrapLayout.addChild(btn) + }); +} \ No newline at end of file diff --git a/apps/app/ui-tests-app/mainPage.xml b/apps/app/ui-tests-app/mainPage.xml index c6ad3a862..8073190f8 100644 --- a/apps/app/ui-tests-app/mainPage.xml +++ b/apps/app/ui-tests-app/mainPage.xml @@ -1,7 +1,10 @@ - -