mirror of
https://github.com/NativeScript/NativeScript.git
synced 2025-08-17 21:01:34 +08:00
Merge pull request #2451 from NativeScript/tsenov/ui-tests
Update main page
This commit is contained in:
SvetoslavTsenov
138
apps/app/ui-tests-app/main-page-view-model.ts
Normal file
138
apps/app/ui-tests-app/main-page-view-model.ts
Normal file
@ -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<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");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@ -1,112 +1,48 @@
|
|||||||
import frame = require("ui/frame");
|
import { EventData } from "data/observable";
|
||||||
import pages = require("ui/page");
|
import { Page } from "ui/page";
|
||||||
import trace = require("trace");
|
import { MianPageViewModel } from "./main-page-view-model";
|
||||||
import observable = require("data/observable");
|
import buttonModule = require("ui/button");
|
||||||
import dialogs = require("ui/dialogs");
|
import observableArray = require("data/observable-array");
|
||||||
|
import colorModule = require("color");
|
||||||
|
import * as platform from "platform";
|
||||||
|
|
||||||
trace.enable();
|
var wrapLayout: any;
|
||||||
trace.setCategories(trace.categories.Test);
|
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();
|
||||||
|
page.bindingContext = viewModel;
|
||||||
|
|
||||||
var basePath = "";
|
if (!isInitialized) {
|
||||||
var VM = new observable.Observable();
|
loadButtons();
|
||||||
var examples = new Map<string, string>();
|
isInitialized = true;
|
||||||
|
|
||||||
export function pageLoaded(args) {
|
|
||||||
var page = <pages.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);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
examples.set("actColor", "action-bar/color");
|
function loadButtons() {
|
||||||
examples.set("actBG", "action-bar/background");
|
var count = 0;
|
||||||
examples.set("actStyle", "action-bar/all");
|
|
||||||
examples.set("actIcons", "action-bar/system-icons");
|
|
||||||
examples.set("actView", "action-bar/action-view");
|
|
||||||
|
|
||||||
examples.set("basics", "bindings/basics");
|
viewModel.examples.forEach((element, key) => {
|
||||||
examples.set("xmlbasics", "bindings/xmlbasics");
|
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");
|
btn.text = key;
|
||||||
examples.set("formatted", "css/decoration-transform-formattedtext");
|
wrapLayout.addChild(btn)
|
||||||
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");
|
|
||||||
@ -1,7 +1,10 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8" ?>
|
<?xml version="1.0" encoding="UTF-8" ?>
|
||||||
<Page loaded="pageLoaded">
|
<Page loaded="pageLoaded">
|
||||||
<GridLayout rows="auto, *">
|
<GridLayout rows="auto, auto, *">
|
||||||
<Button automationText="btn" text="Run" tap="selectExample" />
|
<Button automationText="btn" text="Run" tap="{{ loadExampleFromRun }}" />
|
||||||
<TextView automationText="tv" row="1" text="{{ selected }}"/>
|
<TextView automationText="tv" row="1" text="{{ exampleName }}"/>
|
||||||
|
<ScrollView orientation="vertical" row="3" >
|
||||||
|
<WrapLayout id="wrapLayoutWithExamples"/>
|
||||||
|
</ScrollView>
|
||||||
</GridLayout>
|
</GridLayout>
|
||||||
</Page>
|
</Page>
|
||||||
Reference in New Issue
Block a user