From a88bb7488e94f8585d8af713790d96113431759a Mon Sep 17 00:00:00 2001 From: SvetoslavTsenov Date: Mon, 1 May 2017 15:06:48 +0300 Subject: [PATCH] Include new test pages and refactored layouts mayview view model --- .../ui-tests-app/layouts-percent/absolute.ts | 2 +- apps/app/ui-tests-app/layouts-percent/dock.ts | 2 +- apps/app/ui-tests-app/layouts-percent/grid.ts | 2 +- .../ui-tests-app/layouts-percent/myview.ts | 163 ++++-------------- .../app/ui-tests-app/layouts-percent/stack.ts | 2 +- apps/app/ui-tests-app/layouts-percent/wrap.ts | 2 +- apps/app/ui-tests-app/layouts/myview-base.ts | 75 ++++++++ apps/app/ui-tests-app/layouts/myview.ts | 137 +++------------ .../ui-tests-app/list-picker/issue_2895.ts | 39 +++++ .../ui-tests-app/list-picker/issue_2895.xml | 6 + .../app/ui-tests-app/list-picker/main-page.ts | 24 +++ .../ui-tests-app/list-picker/main-page.xml | 6 + .../ui-tests-app/list-view/images-template.ts | 16 ++ .../list-view/images-template.xml | 11 ++ apps/app/ui-tests-app/list-view/main-page.ts | 25 +++ apps/app/ui-tests-app/list-view/main-page.xml | 6 + apps/app/ui-tests-app/mainPage.ts | 3 +- 17 files changed, 273 insertions(+), 248 deletions(-) create mode 100644 apps/app/ui-tests-app/layouts/myview-base.ts create mode 100644 apps/app/ui-tests-app/list-picker/issue_2895.ts create mode 100644 apps/app/ui-tests-app/list-picker/issue_2895.xml create mode 100644 apps/app/ui-tests-app/list-picker/main-page.ts create mode 100644 apps/app/ui-tests-app/list-picker/main-page.xml create mode 100644 apps/app/ui-tests-app/list-view/images-template.ts create mode 100644 apps/app/ui-tests-app/list-view/images-template.xml create mode 100644 apps/app/ui-tests-app/list-view/main-page.ts create mode 100644 apps/app/ui-tests-app/list-view/main-page.xml diff --git a/apps/app/ui-tests-app/layouts-percent/absolute.ts b/apps/app/ui-tests-app/layouts-percent/absolute.ts index 7d2418ed0..41794a3fa 100644 --- a/apps/app/ui-tests-app/layouts-percent/absolute.ts +++ b/apps/app/ui-tests-app/layouts-percent/absolute.ts @@ -6,7 +6,7 @@ var count = 0; export function onLoaded(args: { eventName: string, object: any }) { var page = args.object; - page.bindingContext = new model.ViewModel(); + page.bindingContext = new model.ViewModelWithPercentage(); } export function onSetLeftSetTop(args: { eventName: string, object: any }) { diff --git a/apps/app/ui-tests-app/layouts-percent/dock.ts b/apps/app/ui-tests-app/layouts-percent/dock.ts index 6f5bf1251..b648c689d 100644 --- a/apps/app/ui-tests-app/layouts-percent/dock.ts +++ b/apps/app/ui-tests-app/layouts-percent/dock.ts @@ -3,7 +3,7 @@ import * as model from "./myview"; export function onLoaded(args: { eventName: string, object: any }) { var page = args.object; - page.bindingContext = new model.ViewModel(); + page.bindingContext = new model.ViewModelWithPercentage(); } export function onStretchLastChild(args: { eventName: string, object: any }) { diff --git a/apps/app/ui-tests-app/layouts-percent/grid.ts b/apps/app/ui-tests-app/layouts-percent/grid.ts index e925de927..b7e56ef45 100644 --- a/apps/app/ui-tests-app/layouts-percent/grid.ts +++ b/apps/app/ui-tests-app/layouts-percent/grid.ts @@ -5,7 +5,7 @@ import { GridLayout, ItemSpec, GridUnitType } from "tns-core-modules/ui/layouts/ export function onLoaded(args: { eventName: string, object: any }) { var page = args.object; - page.bindingContext = new model.ViewModel(); + page.bindingContext = new model.ViewModelWithPercentage(); } export function onAddRowColumn(args: { eventName: string, object: any }) { diff --git a/apps/app/ui-tests-app/layouts-percent/myview.ts b/apps/app/ui-tests-app/layouts-percent/myview.ts index a8136d3bd..92ae630f0 100644 --- a/apps/app/ui-tests-app/layouts-percent/myview.ts +++ b/apps/app/ui-tests-app/layouts-percent/myview.ts @@ -1,166 +1,69 @@ -import { LayoutBase, View, Observable, HorizontalAlignment, VerticalAlignment, Visibility, PercentLength, Length } from "tns-core-modules/ui/layouts/layout-base"; +import { View, PercentLength } from "tns-core-modules/ui/layouts/layout-base"; +import { ViewModelBase } from "../layouts/myview-base"; -export class ViewModel extends Observable { +export class ViewModelWithPercentage extends ViewModelBase { + + constructor() { + super(); + } // View properties public onWidthHeight(args: { eventName: string, object: any }): void { - var view: View = args.object; - if (!PercentLength.equals(view.marginLeft, { value: 0.5, unit: "%"})) { - (view).width = "50%"; - (view).height = "50%"; + let view = args.object; + if (!PercentLength.equals(view.marginLeft, { value: 0.5, unit: "%" })) { + super.setWidthHeight(view, "50%", "50%"); } else { - (view).width = "75%"; - (view).height = "75%"; - } - } - - public onMinWidthMinHeight(args: { eventName: string, object: any }): void { - var view: View = args.object; - if (!PercentLength.equals(view.marginLeft, 105)) { - view.minWidth = 105; - view.minHeight = 55; - } else { - view.minWidth = 0; - view.minHeight = 0; + super.setWidthHeight(view, "75%", "75%"); } } public onMargins(args: { eventName: string, object: any }): void { - var view: View = args.object; - if (!PercentLength.equals(view.marginLeft, { value: 0.1, unit: "%"})) { - (view).marginLeft = "10%"; - (view).marginTop = "10%"; - (view).marginRight = "10%"; - (view).marginBottom = "10%"; + let view = args.object; + if (!PercentLength.equals(view.marginLeft, { value: 0.1, unit: "%" })) { + super.setMargins(view, "10%", "10%", "10%", "10%"); } else { - view.marginLeft = 0; - view.marginTop = 0; - view.marginRight = 0; - view.marginBottom = 0; - } - } - - public onAlignments(args: { eventName: string, object: any }): void { - var view: View = args.object; - - if (view.horizontalAlignment === "stretch") { - view.horizontalAlignment = "left"; - view.verticalAlignment = "top"; - } else if (view.horizontalAlignment === "left") { - view.horizontalAlignment = "center"; - view.verticalAlignment = "middle"; - } else if (view.horizontalAlignment === "center") { - view.horizontalAlignment = "right"; - view.verticalAlignment = "bottom"; - } else { - view.horizontalAlignment = "stretch"; - view.verticalAlignment = "stretch"; - } - } - - public onCollapse(args: { eventName: string, object: any }): void { - var view: View = args.object; - view.visibility = "collapse"; - } - - public onVisibile(args: { eventName: string, object: any }): void { - var view: View = args.object; - - var layout = view.parent; - - var child = layout.getViewById("collapse"); - child.visibility = "visible"; - } - - // Layout properties - public onPaddings(args: { eventName: string, object: any }): void { - var layout: LayoutBase = args.object.parent; - if (!Length.equals(layout.paddingLeft, 5)) { - layout.paddingLeft = 5; - layout.paddingTop = 5; - layout.paddingRight = 5; - layout.paddingBottom = 5; - } else { - layout.paddingLeft = 0; - layout.paddingTop = 0; - layout.paddingRight = 0; - layout.paddingBottom = 0; + super.setMargins(view, 0, 0, 0, 0); } } public onAllProperties(args: { eventName: string, object: any }): void { - var child: View; - var layout: LayoutBase = args.object.parent; + let child: any; + let layout: any = args.object.parent; // WidthHeight child = layout.getViewById("widthHeight"); - if (!PercentLength.equals((child).width, { value: 0.5, unit: "%"})) { - (child).width = "50%"; - (child).height = "50%"; + if (!PercentLength.equals((child).width, { value: 0.5, unit: "%" })) { + super.setWidthHeight(child, "50%", "50%"); } else { - (child).width = "75%"; - (child).height = "75%"; + super.setWidthHeight(child, "75%", "75%"); } // MinWidthMinHeight child = layout.getViewById("minWidthMinHeight"); - if (!Length.equals(child.minWidth, 105)) { - child.minWidth = 105; - child.minHeight = 55; + if (child.minWidth !== 105) { + super.setWidthHeight(child, 105, 55); } else { - child.minWidth = 0; - child.minHeight = 0; + super.setWidthHeight(child, 0, 0); } // Margins - child = layout.getViewById("margins"); - if (!PercentLength.equals((child).marginLeft, { value: 0.1, unit: "%"})) { - (child).marginLeft = "10%"; - (child).marginTop = "10%"; - (child).marginRight = "10%"; - (child).marginBottom = "10%"; + child = layout.getViewById("margins"); + if (!PercentLength.equals((child).marginLeft, { value: 0.1, unit: "%" })) { + super.setMargins(child, "10%", "10%", "10%", "10%"); } else { - child.marginLeft = 0; - child.marginTop = 0; - child.marginRight = 0; - child.marginBottom = 0; + super.setMargins(child, 0, 0, 0, 0); } // Alignments - child = layout.getViewById("alignments"); - if (child.horizontalAlignment === HorizontalAlignment.STRETCH) { - child.horizontalAlignment = HorizontalAlignment.LEFT; - child.verticalAlignment = VerticalAlignment.TOP; - } else if (child.horizontalAlignment === HorizontalAlignment.LEFT) { - child.horizontalAlignment = HorizontalAlignment.CENTER; - child.verticalAlignment = VerticalAlignment.MIDDLE; - } else if (child.horizontalAlignment === HorizontalAlignment.CENTER) { - child.horizontalAlignment = HorizontalAlignment.RIGHT; - child.verticalAlignment = VerticalAlignment.BOTTOM; - } else { - child.horizontalAlignment = HorizontalAlignment.STRETCH; - child.verticalAlignment = VerticalAlignment.STRETCH; - } - - // Collapse - child = layout.getViewById("collapse"); - if (child.visibility === Visibility.VISIBLE) { - child.visibility = Visibility.COLLAPSE; - } else { - child.visibility = Visibility.VISIBLE; - } + child = layout.getViewById("alignments"); + super.setAllPositioningProperties(child); + super.toggleVisibility(child); // Paddings - if (!Length.equals(layout.paddingLeft, 5)) { - layout.paddingLeft = 5; - layout.paddingTop = 5; - layout.paddingRight = 5; - layout.paddingBottom = 5; + if (layout.paddingLeft !== 5) { + super.setPaddings(layout, 5, 5, 5, 5); } else { - layout.paddingLeft = 0; - layout.paddingTop = 0; - layout.paddingRight = 0; - layout.paddingBottom = 0; + super.setPaddings(layout, 0, 0, 0, 0); } } } diff --git a/apps/app/ui-tests-app/layouts-percent/stack.ts b/apps/app/ui-tests-app/layouts-percent/stack.ts index e048fa9f1..92a714ba9 100644 --- a/apps/app/ui-tests-app/layouts-percent/stack.ts +++ b/apps/app/ui-tests-app/layouts-percent/stack.ts @@ -4,7 +4,7 @@ import * as model from "./myview"; export function onLoaded(args: { eventName: string, object: any }) { var page = args.object; - page.bindingContext = new model.ViewModel(); + page.bindingContext = new model.ViewModelWithPercentage(); } export function onOrientation(args: { eventName: string, object: any }) { diff --git a/apps/app/ui-tests-app/layouts-percent/wrap.ts b/apps/app/ui-tests-app/layouts-percent/wrap.ts index 07553668c..69c5b421e 100644 --- a/apps/app/ui-tests-app/layouts-percent/wrap.ts +++ b/apps/app/ui-tests-app/layouts-percent/wrap.ts @@ -4,7 +4,7 @@ import * as model from "./myview"; export function onLoaded(args: { eventName: string, object: any }) { var page = args.object; - page.bindingContext = new model.ViewModel(); + page.bindingContext = new model.ViewModelWithPercentage(); } export function onOrientation(args: { eventName: string, object: any }) { diff --git a/apps/app/ui-tests-app/layouts/myview-base.ts b/apps/app/ui-tests-app/layouts/myview-base.ts new file mode 100644 index 000000000..bb98a7265 --- /dev/null +++ b/apps/app/ui-tests-app/layouts/myview-base.ts @@ -0,0 +1,75 @@ +import { LayoutBase, View, Observable } from "tns-core-modules/ui/layouts/layout-base"; + +export class ViewModelBase extends Observable { + + public onAlignments(args: { eventName: string, object: any }): void { + var view: View = args.object; + this.setAllPositioningProperties(view); + } + + public onCollapse(args: { eventName: string, object: any }): void { + var view: View = args.object; + view.visibility = "collapse"; + } + + public onVisibile(args: { eventName: string, object: any }): void { + var view: View = args.object; + var layout = view.parent; + + var child = layout.getViewById("collapse"); + child.visibility = "visible"; + } + + // Layout properties + public onPaddings(args: { eventName: string, object: any }): void { + var layout = args.object.parent; + if (layout.marginLeft !== 5) { + this.setPaddings(layout, 5, 5, 5, 5); + } else { + this.setPaddings(layout, 0, 0, 0, 0); + } + } + + protected setWidthHeight(child: any, width: any, height: any) { + child.width = width; + child.height = height; + } + + protected setMargins(child: any, marginLeft: any, marginTop: any, marginRight: any, marginBottom: any) { + child.marginLeft = marginLeft; + child.marginTop = marginTop; + child.marginRight = marginRight; + child.marginBottom = marginBottom; + } + + protected setPaddings(child: any, paddingLeft: any, paddingTop: any, paddingRight: any, paddingBottom: any) { + child.marginLeft = paddingLeft; + child.marginTop = paddingTop; + child.marginRight = paddingRight; + child.marginBottom = paddingBottom; + } + + protected setAllPositioningProperties(child: any) { + if (child.horizontalAlignment === "stretch") { + child.horizontalAlignment = "left"; + child.verticalAlignment = "top"; + } else if (child.horizontalAlignment === "left") { + child.horizontalAlignment = "center"; + child.verticalAlignment = "middle"; + } else if (child.horizontalAlignment === "center") { + child.horizontalAlignment = "right"; + child.verticalAlignment = "bottom"; + } else { + child.horizontalAlignment = "stretch"; + child.verticalAlignment = "stretch"; + } + } + + protected toggleVisibility(child) { + if (child.visibility === "visible") { + child.visibility = "collapse"; + } else { + child.visibility = "visible"; + } + } +} diff --git a/apps/app/ui-tests-app/layouts/myview.ts b/apps/app/ui-tests-app/layouts/myview.ts index a00ac0f06..937b7d082 100644 --- a/apps/app/ui-tests-app/layouts/myview.ts +++ b/apps/app/ui-tests-app/layouts/myview.ts @@ -1,164 +1,77 @@ -import { LayoutBase, View, Observable, HorizontalAlignment, VerticalAlignment, Visibility} from "tns-core-modules/ui/layouts/layout-base"; +import { View } from "tns-core-modules/ui/layouts/layout-base"; +import { ViewModelBase } from "./myview-base"; -export class ViewModel extends Observable { +export class ViewModel extends ViewModelBase { + + constructor() { + super(); + } // View properties public onWidthHeight(args: { eventName: string, object: any }): void { var view: View = args.object; if (view.width !== 30) { - view.width = 30; - view.height = 50; + super.setWidthHeight(view, 105, 55); } else { - view.width = Number.NaN; - view.height = Number.NaN; + super.setWidthHeight(view, 0, 0); } } public onMinWidthMinHeight(args: { eventName: string, object: any }): void { var view: View = args.object; if (view.minWidth !== 105) { - view.minWidth = 105; - view.minHeight = 55; + super.setWidthHeight(view, 105, 55); } else { - view.minWidth = 0; - view.minHeight = 0; + super.setWidthHeight(view, 0, 0); } } public onMargins(args: { eventName: string, object: any }): void { var view: View = args.object; if (view.marginLeft !== 5) { - view.marginLeft = 5; - view.marginTop = 5; - view.marginRight = 5; - view.marginBottom = 5; + super.setMargins(view, 5, 5, 5, 5); } else { - view.marginLeft = 0; - view.marginTop = 0; - view.marginRight = 0; - view.marginBottom = 0; - } - } - - public onAlignments(args: { eventName: string, object: any }): void { - var view: View = args.object; - if (view.horizontalAlignment === "stretch") { - view.horizontalAlignment = "left"; - view.verticalAlignment = "top"; - } else if (view.horizontalAlignment === "left") { - view.horizontalAlignment = "center"; - view.verticalAlignment = "middle"; - } else if (view.horizontalAlignment === "center") { - view.horizontalAlignment = "right"; - view.verticalAlignment = "bottom"; - } else { - view.horizontalAlignment = "stretch"; - view.verticalAlignment = "stretch"; - } - } - - public onCollapse(args: { eventName: string, object: any }): void { - var view: View = args.object; - view.visibility = "collapse"; - } - - public onVisibile(args: { eventName: string, object: any }): void { - var view: View = args.object; - var layout = view.parent; - - var child = layout.getViewById("collapse"); - child.visibility = "visible"; - } - - // Layout properties - public onPaddings(args: { eventName: string, object: any }): void { - var layout = args.object.parent; - if (layout.paddingLeft !== 5) { - layout.paddingLeft = 5; - layout.paddingTop = 5; - layout.paddingRight = 5; - layout.paddingBottom = 5; - } else { - layout.paddingLeft = 0; - layout.paddingTop = 0; - layout.paddingRight = 0; - layout.paddingBottom = 0; + super.setMargins(view, 0, 0, 0, 0); } } public onAllProperties(args: { eventName: string, object: any }): void { - var child; - var layout = args.object.parent; + let child; + let layout = args.object.parent; // WidthHeight child = layout.getViewById("widthHeight"); if (child.width !== 30) { - child.width = 30; - child.height = 50; + super.setWidthHeight(child, 30, 50); } else { - child.width = Number.NaN; - child.height = Number.NaN; + super.setWidthHeight(child, Number.NaN, Number.NaN); } // MinWidthMinHeight child = layout.getViewById("minWidthMinHeight"); if (child.minWidth !== 105) { - child.minWidth = 105; - child.minHeight = 55; + super.setWidthHeight(child, 105, 55); } else { - child.minWidth = 0; - child.minHeight = 0; + super.setWidthHeight(child, 0, 0); } - // Margins child = layout.getViewById("margins"); if (child.marginLeft !== 5) { - child.marginLeft = 5; - child.marginTop = 5; - child.marginRight = 5; - child.marginBottom = 5; + super.setMargins(child, 5, 5, 5, 5); } else { - child.marginLeft = 0; - child.marginTop = 0; - child.marginRight = 0; - child.marginBottom = 0; + super.setMargins(child, 0, 0, 0, 0); } // Alignments child = layout.getViewById("alignments"); - if (child.horizontalAlignment === HorizontalAlignment.STRETCH) { - child.horizontalAlignment = HorizontalAlignment.LEFT; - child.verticalAlignment = VerticalAlignment.TOP; - } else if (child.horizontalAlignment === HorizontalAlignment.LEFT) { - child.horizontalAlignment = HorizontalAlignment.CENTER; - child.verticalAlignment = VerticalAlignment.MIDDLE; - } else if (child.horizontalAlignment === HorizontalAlignment.CENTER) { - child.horizontalAlignment = HorizontalAlignment.RIGHT; - child.verticalAlignment = VerticalAlignment.BOTTOM; - } else { - child.horizontalAlignment = HorizontalAlignment.STRETCH; - child.verticalAlignment = VerticalAlignment.MIDDLE; - } - - // Collapse - child = layout.getViewById("collapse"); - if (child.visibility === Visibility.VISIBLE) { - child.visibility = Visibility.COLLAPSE; - } else { - child.visibility = Visibility.VISIBLE; - } + super.setAllPositioningProperties(child); + super.toggleVisibility(child); // Paddings if (layout.paddingLeft !== 5) { - layout.paddingLeft = 5; - layout.paddingTop = 5; - layout.paddingRight = 5; - layout.paddingBottom = 5; + super.setPaddings(layout, 5, 5, 5, 5); } else { - layout.paddingLeft = 0; - layout.paddingTop = 0; - layout.paddingRight = 0; - layout.paddingBottom = 0; + super.setPaddings(layout, 0, 0, 0, 0); } } } diff --git a/apps/app/ui-tests-app/list-picker/issue_2895.ts b/apps/app/ui-tests-app/list-picker/issue_2895.ts new file mode 100644 index 000000000..154e3c31e --- /dev/null +++ b/apps/app/ui-tests-app/list-picker/issue_2895.ts @@ -0,0 +1,39 @@ +import { Page } from 'tns-core-modules/ui/page'; +import { Observable } from "tns-core-modules/data/observable"; +import { EventData } from "tns-core-modules/ui/core/view"; + +export function navigatingTo(args: EventData) { + let page = args.object; + page.bindingContext = new ListPickerView(); +} + +export class ListPickerView extends Observable { + + private _showListPicker: string = "collapsed"; + private _isVisisble: boolean; + + constructor() { + super(); + this._isVisisble = false; + } + + get options(): Array { + return ["options1", "options2", "options3", "options1", "options2", "options3"]; + } + + get showListPicker(): string { + return this._showListPicker; + } + + set showListPicker(value: string) { + if (this._showListPicker !== value) { + this._showListPicker = value; + this.notifyPropertyChange("showListPicker", value) + } + } + + public onTap() { + this._isVisisble ? this.showListPicker = "collapsed" : this.showListPicker = "visible"; + this._isVisisble = !this._isVisisble; + } +} \ No newline at end of file diff --git a/apps/app/ui-tests-app/list-picker/issue_2895.xml b/apps/app/ui-tests-app/list-picker/issue_2895.xml new file mode 100644 index 000000000..c469ea192 --- /dev/null +++ b/apps/app/ui-tests-app/list-picker/issue_2895.xml @@ -0,0 +1,6 @@ + + +