javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-16 11:42:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

Tsenov/auto complete (#4318)

Browse Source 
* 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
This commit is contained in:
SvetoslavTsenov
2017-06-06 16:06:21 +03:00
committed by GitHub
parent 855caf3e43
commit 51d1be5bb8
46 changed files with 507 additions and 372 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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;
let view = require("ui/core/view");
const page = <Page>args.object;
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("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);
page.bindingContext = viewModel;
return examples;
}
export class SubMainPageViewModel extends MainPageViewModel {
export class SubMainPageViewModel extends TestPageMainViewModel {
constructor(container: WrapLayout, examples: Map<string, string>) {
super(container, examples);
}

18
apps/app/ui-tests-app/bindings/main-page.ts
View File

@ -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;
let view = require("ui/core/view");
const page = <Page>args.object;
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("basics", "bindings/basics");
examples.set("xmlbasics", "bindings/xmlbasics");
let viewModel = new SubMainPageViewModel(wrapLayout, examples);
page.bindingContext = viewModel;
return examples;
}
export class SubMainPageViewModel extends MainPageViewModel {
export class SubMainPageViewModel extends TestPageMainViewModel {
constructor(container: WrapLayout, examples: Map<string, string>) {
super(container, examples);
}

0
apps/app/ui-tests-app/css/button-border.css → apps/app/ui-tests-app/button/button-border.css
View File

0
apps/app/ui-tests-app/css/button-border.xml → apps/app/ui-tests-app/button/button-border.xml
View File

24
apps/app/ui-tests-app/button/main-page.ts
View File

@ -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;
let view = require("ui/core/view");
let wrapLayout = view.getViewById(page, "wrapLayoutWithExamples");
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;
const page = <Page>args.object;
const wrapLayout = <WrapLayout>page.getViewById("wrapLayoutWithExamples");
page.bindingContext = new SubMainPageViewModel(wrapLayout, loadExamples());
}
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);
}

0
apps/app/ui-tests-app/css/styles.css → apps/app/ui-tests-app/button/styles.css
View File

0
apps/app/ui-tests-app/css/styles.ts → apps/app/ui-tests-app/button/styles.ts
View File

0
apps/app/ui-tests-app/css/styles.xml → apps/app/ui-tests-app/button/styles.xml
View File

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

@ -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>

14
apps/app/ui-tests-app/css/clip-path.xml
View File

@ -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>

27
apps/app/ui-tests-app/css/main-page.ts
View File

@ -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;
let view = require("ui/core/view");
const page = <Page>args.object;
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("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,21 +35,17 @@ 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");
examples.set("hint-text-color", "css/hint-text-color");
examples.set("combinators", "css/combinators");
examples.set("styled-formatted-text", "css/styled-formatted-text");
let viewModel = new SubMainPageViewModel(wrapLayout, examples);
page.bindingContext = viewModel;
return examples;
}
export class SubMainPageViewModel extends MainPageViewModel {
export class SubMainPageViewModel extends TestPageMainViewModel {
constructor(container: WrapLayout, examples: Map<string, string>) {
super(container, examples);
}

20
apps/app/ui-tests-app/events/main-page.ts
View File

@ -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;
let view = require("ui/core/view");
let wrapLayout = view.getViewById(page, "wrapLayoutWithExamples");
let examples: Map<string, string> = new Map<string, string>();
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("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);
viewModel.basePath="events";
page.bindingContext = viewModel;
return examples;
}
export class SubMainPageViewModel extends MainPageViewModel {
export class SubMainPageViewModel extends TestPageMainViewModel {
constructor(container: WrapLayout, examples: Map<string, string>) {
super(container, examples);
}

19
apps/app/ui-tests-app/flexbox/flexbox-main-page.ts
View File

@ -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;
let wrapLayout = <WrapLayout>getViewById(page, "wrapLayout");
let examples = new Map<string, string>();
const page = <Page>args.object;
const wrapLayout = <WrapLayout>page.getViewById("wrapLayoutWithExamples");
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,12 +18,11 @@ 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);
page.bindingContext = viewModel;
return examples;
}
export class FlexboxMainPageViewModel extends MainPageViewModel {
export class FlexboxMainPageViewModel extends TestPageMainViewModel {
constructor(container: WrapLayout, examples: Map<string, string>) {
super(container, examples);
}
}
}

21
apps/app/ui-tests-app/font/main-page.ts
View File

@ -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;
let view = require("ui/core/view");
let wrapLayout = view.getViewById(page, "wrapLayoutWithExamples");
let examples: Map<string, string> = new Map<string, string>();
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("fontbtn", "font/button");
examples.set("fontlbl", "font/label");
examples.set("fontfield", "font/text-field");
@ -19,12 +19,11 @@ export function pageLoaded(args: EventData) {
examples.set("customfonts", "font/custom-fonts");
examples.set("all-fonts", "font/all-fonts");
examples.set("awesome-3654", "font/font-awesome/issue-3654");
let viewModel = new SubMainPageViewModel(wrapLayout, examples);
page.bindingContext = viewModel;
return examples;
}
export class SubMainPageViewModel extends MainPageViewModel {
export class SubMainPageViewModel extends TestPageMainViewModel {
constructor(container: WrapLayout, examples: Map<string, string>) {
super(container, examples);
}

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

@ -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;
let view = require("ui/core/view");
const page = <Page>args.object;
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);
page.bindingContext = viewModel;
return examples;
}
export class SubMainPageViewModel extends MainPageViewModel {
export class SubMainPageViewModel extends TestPageMainViewModel {
constructor(container: WrapLayout, examples: Map<string, string>) {
super(container, examples);
}

19
apps/app/ui-tests-app/issues/main-page.ts
View File

@ -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;
let view = require("ui/core/view");
const page = <Page>args.object;
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);
page.bindingContext = viewModel;
return examples;
}
export class SubMainPageViewModel extends MainPageViewModel {
export class SubMainPageViewModel extends TestPageMainViewModel {
constructor(container: WrapLayout, examples: Map<string, string>) {
super(container, examples);
}

20
apps/app/ui-tests-app/layouts/main-page.ts
View File

@ -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;
let view = require("ui/core/view");
let wrapLayout = view.getViewById(page, "wrapLayoutWithExamples");
let examples: Map<string, string> = new Map<string, string>();
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("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);
page.bindingContext = viewModel;
return examples;
}
export class SubMainPageViewModel extends MainPageViewModel {
export class SubMainPageViewModel extends TestPageMainViewModel {
constructor(container: WrapLayout, examples: Map<string, string>) {
super(container, examples);
}

0
apps/app/ui-tests-app/css/list-picker.ts → apps/app/ui-tests-app/list-picker/list-picker.ts
View File

0
apps/app/ui-tests-app/css/list-picker.xml → apps/app/ui-tests-app/list-picker/list-picker.xml
View File

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

@ -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;
let view = require("ui/core/view");
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;
const page = <Page>args.object;
const wrapLayout = <WrapLayout>page.getViewById("wrapLayoutWithExamples");
page.bindingContext = new SubMainPageViewModel(wrapLayout, loadExamples());
}
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);
}

0
apps/app/ui-tests-app/css/listview.ts → apps/app/ui-tests-app/list-view/csslv.ts
View File

0
apps/app/ui-tests-app/css/listview.xml → apps/app/ui-tests-app/list-view/csslv.xml
View File

0
apps/app/ui-tests-app/css/listview_bg_separator_color.ts → apps/app/ui-tests-app/list-view/listview-bg-separator-color.ts
View File

0
apps/app/ui-tests-app/css/listview_bg_separator_color.xml → apps/app/ui-tests-app/list-view/listview-bg-separator-color.xml
View File

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

@ -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;
let view = require("ui/core/view");
const page = <Page>args.object;
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);
page.bindingContext = viewModel;
return examples;
}
export class SubMainPageViewModel extends MainPageViewModel {
export class SubMainPageViewModel extends TestPageMainViewModel {
constructor(container: WrapLayout, examples: Map<string, string>) {
super(container, examples);
}

133
apps/app/ui-tests-app/main-page-view-model.ts Normal file
View File

@ -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)
}
}
});
}
}

161
apps/app/ui-tests-app/mainPage.ts
View File

@ -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>();
let page = <Page>args.object;
let wrapLayout = page.getViewById<WrapLayout>("wrapLayoutWithExamples");
const page = <Page>args.object;
const wrapLayout = page.getViewById<WrapLayout>("wrapLayoutWithExamples");
const examples: Map<string, string> = new Map<string, string>();
examples.set("action-bar", "action-bar/main-page");
examples.set("bindings", "bindings/main-page");
examples.set("button","button/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("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("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);
page.bindingContext = viewModel;
var parent = page.getViewById('parentLayout');
var searchBar = page.getViewById('textView');
const parent = page.getViewById('parentLayout');
const 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;
}
}
}

8
apps/app/ui-tests-app/mainPage.xml
View File

@ -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>

17
apps/app/ui-tests-app/modal-view/modal-view.ts
View File

@ -1,16 +1,9 @@
import * as pages from "tns-core-modules/ui/page";
import * as labelModule from "tns-core-modules/ui/label";
import * as observable from "tns-core-modules/data/observable";
import { Page } from "tns-core-modules/ui/page";
import { Label } from "tns-core-modules/ui/label";
var page: pages.Page;
var label: labelModule.Label;
export function pageLoaded(args: observable.EventData) {
page = <pages.Page>args.object;
label = page.getViewById<labelModule.Label>("label");
}
export function onTap(args: observable.EventData) {
export function onTap(args) {
const page = <Page>args.object.page;
const label = page.getViewById<Label>("label");
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);

24
apps/app/ui-tests-app/page/main-page.ts
View File

@ -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;
let view = require("ui/core/view");
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;
const page = <Page>args.object;
const wrapLayout = <WrapLayout>page.getViewById("wrapLayoutWithExamples");
page.bindingContext = new SubMainPageViewModel(wrapLayout, loadExamples());
}
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);
}

25
apps/app/ui-tests-app/perf/main-page.ts
View File

@ -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;
let view = require("ui/core/view");
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;
const page = <Page>args.object;
const wrapLayout = <WrapLayout>page.getViewById("wrapLayoutWithExamples");
page.bindingContext = new SubMainPageViewModel(wrapLayout, loadExamples());
}
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);
}

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

@ -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);
}

BIN
apps/app/ui-tests-app/resources/images/inset-test.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 556 B

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

@ -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;
let view = require("ui/core/view");
let wrapLayout = view.getViewById(page, "wrapLayoutWithExamples");
let examples: Map<string, string> = new Map<string, string>();
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("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");
let viewModel = new SubMainPageViewModel(wrapLayout, examples);
page.bindingContext = viewModel;
return examples;
}
export class SubMainPageViewModel extends MainPageViewModel {
export class SubMainPageViewModel extends TestPageMainViewModel {
constructor(container: WrapLayout, examples: Map<string, string>) {
super(container, examples);
}

34
apps/app/ui-tests-app/test-example-model.ts Normal file
View File

@ -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)
}
}
}

94
apps/app/ui-tests-app/test-page-main-view-model.ts Normal file
View File

@ -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;
}
}

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

@ -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;
let view = require("ui/core/view");
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;
const page = <Page>args.object;
const wrapLayout = <WrapLayout>page.getViewById("wrapLayoutWithExamples");
page.bindingContext = new SubMainPageViewModel(wrapLayout, loadExamples());
}
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);
}

0
apps/app/ui-tests-app/css/text-field-border.css → apps/app/ui-tests-app/text-field/text-field-border.css
View File

0
apps/app/ui-tests-app/css/text-field-border.xml → apps/app/ui-tests-app/text-field/text-field-border.xml
View File

24
apps/app/ui-tests-app/text-view/main-page.ts Normal file
View File

@ -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);
}
}

6
apps/app/ui-tests-app/text-view/main-page.xml Normal file
View File

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

0
apps/app/ui-tests-app/css/text-view-border.css → apps/app/ui-tests-app/text-view/text-view-border.css
View File

0
apps/app/ui-tests-app/css/text-view-border.xml → apps/app/ui-tests-app/text-view/text-view-border.xml
View File

0
apps/app/ui-tests-app/css/textview-hint-color.ts → apps/app/ui-tests-app/text-view/textview-hint-color.ts
View File

0
apps/app/ui-tests-app/css/textview-hint-color.xml → apps/app/ui-tests-app/text-view/textview-hint-color.xml
View File

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

@ -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;
let view = require("ui/core/view");
let wrapLayout = view.getViewById(page, "wrapLayoutWithExamples");
let examples: Map<string, string> = new Map<string, string>();
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("webview", "web-view/web-view");
examples.set("webtest", "web-view/web-view-test");
examples.set("query", "web-view/query-params");
let viewModel = new SubMainPageViewModel(wrapLayout, examples);
page.bindingContext = viewModel;
return examples;
}
export class SubMainPageViewModel extends MainPageViewModel {
export class SubMainPageViewModel extends TestPageMainViewModel {
constructor(container: WrapLayout, examples: Map<string, string>) {
super(container, examples);
}