Merge pull request #4084 from NativeScript/test-pages

Include new test pages and refactored layouts/myview

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 = <pageModule.Page>args.object;
-    page.bindingContext = new model.ViewModel();
+    page.bindingContext = new model.ViewModelWithPercentage();
 }
 
 export function onSetLeftSetTop(args: { eventName: string, object: any }) {

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 = <pageModule.Page>args.object;
-    page.bindingContext = new model.ViewModel();
+    page.bindingContext = new model.ViewModelWithPercentage();
 }
 
 export function onStretchLastChild(args: { eventName: string, object: any }) {

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 = <Page>args.object;
-    page.bindingContext = new model.ViewModel();
+    page.bindingContext = new model.ViewModelWithPercentage();
 }
 
 export function onAddRowColumn(args: { eventName: string, object: any }) {

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 = <View>args.object;
-        if (!PercentLength.equals(view.marginLeft, { value: 0.5, unit: "%"})) {
-            (<any>view).width = "50%";
-            (<any>view).height = "50%";
+        let view = args.object;
+        if (!PercentLength.equals(view.marginLeft, { value: 0.5, unit: "%" })) {
+            super.setWidthHeight(view, "50%", "50%");
         } else {
-            (<any>view).width = "75%";
-            (<any>view).height = "75%";
-        }
-    }
-
-    public onMinWidthMinHeight(args: { eventName: string, object: any }): void {
-        var view: 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 = <View>args.object;
-        if (!PercentLength.equals(view.marginLeft, { value: 0.1, unit: "%"})) {
-            (<any>view).marginLeft = "10%";
-            (<any>view).marginTop = "10%";
-            (<any>view).marginRight = "10%";
-            (<any>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 = <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 = <View>args.object;
-        view.visibility = "collapse";
-    }
-
-    public onVisibile(args: { eventName: string, object: any }): void {
-        var view: View = <View>args.object;
-
-        var layout = <LayoutBase>view.parent;
-
-        var child = layout.getViewById<View>("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 = <View>layout.getViewById("widthHeight");
-        if (!PercentLength.equals((<any>child).width, { value: 0.5, unit: "%"})) {
-            (<any>child).width = "50%";
-            (<any>child).height = "50%";
+        if (!PercentLength.equals((<any>child).width, { value: 0.5, unit: "%" })) {
+            super.setWidthHeight(child, "50%", "50%");
         } else {
-            (<any>child).width = "75%";
-            (<any>child).height = "75%";
+            super.setWidthHeight(child, "75%", "75%");
         }
 
         // MinWidthMinHeight
         child = <View>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 = <View>layout.getViewById("margins");
-        if (!PercentLength.equals((<any>child).marginLeft, { value: 0.1, unit: "%"})) {
-            (<any>child).marginLeft = "10%";
-            (<any>child).marginTop = "10%";
-            (<any>child).marginRight = "10%";
-            (<any>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 = <View>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 = <View>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);
         }
     }
 }

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 = <pageModule.Page>args.object;
-    page.bindingContext = new model.ViewModel();
+    page.bindingContext = new model.ViewModelWithPercentage();
 }
 
 export function onOrientation(args: { eventName: string, object: any }) {

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 = <pageModule.Page>args.object;
-    page.bindingContext = new model.ViewModel();
+    page.bindingContext = new model.ViewModelWithPercentage();
 }
 
 export function onOrientation(args: { eventName: string, object: any }) {

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 = <View>args.object;
+        this.setAllPositioningProperties(view);
+    }
+
+    public onCollapse(args: { eventName: string, object: any }): void {
+        var view: View = <View>args.object;
+        view.visibility = "collapse";
+    }
+
+    public onVisibile(args: { eventName: string, object: any }): void {
+        var view: View = <View>args.object;
+        var layout = <LayoutBase>view.parent;
+
+        var child = <View>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";
+        }
+    }
+}

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 = <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 = <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 = <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 = <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 = <View>args.object;
-        view.visibility = "collapse";
-    }
-
-    public onVisibile(args: { eventName: string, object: any }): void {
-        var view: View = <View>args.object;
-        var layout = <LayoutBase>view.parent;
-
-        var child = <View>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);
         }
     }
 }

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 = <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<String> {
+        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;
+    }
+}

apps/app/ui-tests-app/list-picker/issue_2895.xml

@@ -0,0 +1,6 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo">
+  <StackLayout>
+    <Button text="Toggle visibility" tap="{{ onTap }}" />
+    <ListPicker style="background-color: pink;" id="list_picker" items="{{ options }}" visibility="{{ showListPicker }}" />
+  </StackLayout>
+</Page>

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

@@ -0,0 +1,24 @@
+import { EventData } from "tns-core-modules/data/observable";
+import { MainPageViewModel } from "../mainPage";
+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;
+}
+
+export class SubMainPageViewModel extends MainPageViewModel {
+    constructor(container: WrapLayout, examples: Map<string, string>) {
+        super(container, examples);
+    }
+}

apps/app/ui-tests-app/list-picker/main-page.xml

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

apps/app/ui-tests-app/list-view/images-template.ts

@@ -0,0 +1,16 @@
+import { EventData, Observable } from 'tns-core-modules/data/observable';
+import { Page } from 'tns-core-modules/ui/page';
+
+export function navigatingTo(args: EventData) {
+    let page = <Page>args.object;
+    page.bindingContext = new ImagesTemplateViewModel();
+}
+
+export class ImagesTemplateViewModel extends Observable {
+
+    public items: Array<string> = ["res://icon", null, "~/ui-tests-app/list-view/no-image.png", null, "~/ui-tests-app/list-view/no-image.png", null, "res://icon", null];
+    constructor() {
+        super();
+
+    }
+}

apps/app/ui-tests-app/list-view/images-template.xml

@@ -0,0 +1,11 @@
+
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo">
+  <ListView items="{{ items }}"  loaded="onLoaded" itemLoading="onItemLoading" itemTap="onItemTap">
+      <ListView.itemTemplate>
+          <StackLayout>
+              <Label text="test" textWrap="true" />
+              <Image src="{{ $value }}" stretch="none" />
+          </StackLayout>
+      </ListView.itemTemplate>
+  </ListView>
+</Page>

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

@@ -0,0 +1,25 @@
+import { EventData } from "tns-core-modules/data/observable";
+import { MainPageViewModel } from "../mainPage";
+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("list-view-templates", "list-view/list-view");
+    examples.set("images-template", "list-view/images-template");
+
+    let viewModel = new SubMainPageViewModel(wrapLayout, examples);
+    page.bindingContext = viewModel;
+}
+
+export class SubMainPageViewModel extends MainPageViewModel {
+    constructor(container: WrapLayout, examples: Map<string, string>) {
+        super(container, examples);
+    }
+}

apps/app/ui-tests-app/list-view/main-page.xml

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

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

@@ -34,11 +34,12 @@ export function pageLoaded(args: EventData) {
     examples.set("animeBG", "animations/background");
     examples.set("transitions", "transitions/page0");
     examples.set("segStyle", "segmented-bar/all");
-    examples.set("list-view", "list-view/list-view");
+    examples.set("list-view", "list-view/main-page");
     examples.set("issues", "issues/main-page");
     examples.set("page", "page/main-page");
 
     examples.set("perf", "perf/main-page");
+    examples.set("list-picker", "list-picker/main-page");
 
     //examples.set("listview_binding", "pages/listview_binding");
     //examples.set("textfield", "text-field/text-field");