Add layouts test pages.

CrossPlatformModules.csproj

@@ -198,6 +198,12 @@
     </TypeScriptCompile>
     <TypeScriptCompile Include="apps\editable-text-demo\model.ts" />
     <TypeScriptCompile Include="apps\tests\weak-event-listener-tests.ts" />
+    <TypeScriptCompile Include="apps\ui-tests-app\layouts\absolute.ts" />
+    <TypeScriptCompile Include="apps\ui-tests-app\layouts\dock.ts" />
+    <TypeScriptCompile Include="apps\ui-tests-app\layouts\grid.ts" />
+    <TypeScriptCompile Include="apps\ui-tests-app\layouts\myview.ts" />
+    <TypeScriptCompile Include="apps\ui-tests-app\layouts\stack.ts" />
+    <TypeScriptCompile Include="apps\ui-tests-app\layouts\wrap.ts" />
     <TypeScriptCompile Include="apps\ui-tests-app\pages\console.ts" />
     <TypeScriptCompile Include="apps\ui-tests-app\pages\i61.ts" />
     <TypeScriptCompile Include="apps\ui-tests-app\pages\i73.ts" />
@@ -628,6 +634,11 @@
     <Content Include="apps\tests\xml-declaration\mymodulewithxml\my-control-no-js.xml">
       <SubType>Designer</SubType>
     </Content>
+    <Content Include="apps\ui-tests-app\layouts\absolute.xml" />
+    <Content Include="apps\ui-tests-app\layouts\dock.xml" />
+    <Content Include="apps\ui-tests-app\layouts\grid.xml" />
+    <Content Include="apps\ui-tests-app\layouts\stack.xml" />
+    <Content Include="apps\ui-tests-app\layouts\wrap.xml" />
     <Content Include="apps\ui-tests-app\pages\i86.xml" />
     <Content Include="apps\template-blank\app.css" />
     <Content Include="apps\template-hello-world\app.css" />

apps/ui-tests-app/layouts/absolute.ts

@@ -0,0 +1,22 @@
+import pageModule = require("ui/page");
+import absoluteLayout = require("ui/layouts/absolute-layout");
+import model = require("./myview");
+
+var count = 0;
+
+export function onLoaded(args: { eventName: string, object: any }) {
+    var page = <pageModule.Page>args.object;
+    page.bindingContext = new model.ViewModel();
+}
+
+export function onSetLeftSetTop(args: { eventName: string, object: any }) {
+    var layout = args.object.parent;
+    var child = layout.getViewById("setLeftSetTop");
+    if(++count % 2 === 1) {
+        absoluteLayout.AbsoluteLayout.setLeft(child, 175);
+        absoluteLayout.AbsoluteLayout.setTop(child, 375);
+    } else {
+        absoluteLayout.AbsoluteLayout.setLeft(child, 0);
+        absoluteLayout.AbsoluteLayout.setTop(child, 400);
+    }
+}

apps/ui-tests-app/layouts/absolute.xml

@@ -0,0 +1,15 @@
+<Page loaded="onLoaded">
+  <AbsoluteLayout>
+    <!-- View Properties -->
+    <Button text="wh" tap="{{ onWidthHeight }}" id="widthHeight" style="background-color: lightblue;" />
+    <Button text="n" tap="{{ onMinWidthMinHeight }}" left="150" id="minWidthMinHeight" style="background-color: lightblue;" />
+    <Button text="m" tap="{{ onMargins }}" top="100" id="margins" style="background-color: lightblue;" />
+    <Button text="a" tap="{{ onAlignments }}" left="150" top="100" id="alignments" style="background-color: lightblue;" />
+    <Button text="c" tap="{{ onCollapse }}" top="200" id="collapse" style="background-color: lightblue;" />
+    <Button text="v" tap="{{ onVisibile }}" left="150" top="200" id="visible" style="background-color: lightblue;" />
+    <!-- Layout Properties -->
+    <Button text="p" tap="{{ onPaddings }}" top="300" id="paddings" style="background-color: lightgray;" />
+    <Button text="all" tap="{{ onAllProperties }}" left="150" top="300" id="allProperties" style="background-color: aquamarine;" />
+    <Button text="s" tap="onSetLeftSetTop" top="400" id="setLeftSetTop" style="background-color: lightgreen;" />
+  </AbsoluteLayout>
+</Page>

apps/ui-tests-app/layouts/dock.ts

@@ -0,0 +1,16 @@
+import pageModule = require("ui/page");
+import model = require("./myview");
+
+export function onLoaded(args: { eventName: string, object: any }) {
+    var page = <pageModule.Page>args.object;
+    page.bindingContext = new model.ViewModel();
+}
+
+export function onStretchLastChild(args: { eventName: string, object: any }) {
+    var layout = args.object.parent;
+    if(layout.stretchLastChild === true) {
+        layout.stretchLastChild = false;
+    } else {
+        layout.stretchLastChild = true;
+    }
+}

apps/ui-tests-app/layouts/dock.xml

@@ -0,0 +1,15 @@
+<Page loaded="onLoaded">
+  <DockLayout>
+    <!-- View Properties -->
+    <Button text="wh" tap="{{ onWidthHeight }}" id="widthHeight" style="background-color: lightblue;" />
+    <Button text="n" tap="{{ onMinWidthMinHeight }}" dock="right" id="minWidthMinHeight" style="background-color: lightblue;" />
+    <Button text="m" tap="{{ onMargins }}" dock="top" id="margins" style="background-color: lightblue;" />
+    <Button text="a" tap="{{ onAlignments }}" dock="top" id="alignments" style="background-color: lightblue;" />
+    <Button text="c" tap="{{ onCollapse }}" dock="bottom" id="collapse" style="background-color: lightblue;" />
+    <Button text="v" tap="{{ onVisibile }}" dock="bottom" id="visible" style="background-color: lightblue;" />
+    <!-- Layout Properties -->
+    <Button text="p" tap="{{ onPaddings }}" dock="top" id="paddings" style="background-color: lightgray;" />
+    <Button text="all" tap="{{ onAllProperties }}" dock="top" id="allProperties" style="background-color: aquamarine;" />
+    <Button text="tr" tap="onStretchLastChild" id="stretchLastChild" style="background-color: lightgreen;" />
+  </DockLayout>
+</Page>

apps/ui-tests-app/layouts/grid.ts

@@ -0,0 +1,43 @@
+import buttonModule = require("ui/button");
+import pageModule = require("ui/page");
+import gridLayoutModule = require("ui/layouts/grid-layout");
+import model = require("./myview");
+
+export function onLoaded(args: { eventName: string, object: any }) {
+    var page = <pageModule.Page>args.object;
+    page.bindingContext = new model.ViewModel();
+}
+
+export function onAddRowColumn(args: { eventName: string, object: any }) {
+    var layout = <gridLayoutModule.GridLayout>args.object.parent.parent;
+    var row = new gridLayoutModule.ItemSpec(1, gridLayoutModule.GridUnitType.auto);
+    var column = new gridLayoutModule.ItemSpec(1, gridLayoutModule.GridUnitType.auto);
+    layout.addRow(row);
+    layout.addColumn(column);
+
+    var btn0 = new buttonModule.Button();
+    var btn1 = new buttonModule.Button();
+    btn0.id = "b0";
+    btn1.id = "b1";
+    btn0.text = "b0";
+    btn1.text = "b1";
+    layout.addChild(btn0);
+    layout.addChild(btn1);
+    gridLayoutModule.GridLayout.setRow(btn0, 0);
+    gridLayoutModule.GridLayout.setColumn(btn0, 4);
+    gridLayoutModule.GridLayout.setRow(btn1, 4);
+    gridLayoutModule.GridLayout.setColumn(btn1, 0);
+    gridLayoutModule.GridLayout.setColumnSpan(btn1, 2);
+    gridLayoutModule.GridLayout.setRowSpan(btn0, 3);
+}
+
+export function onRemoveRowColumn(args: { eventName: string, object: any }) {
+    var layout = <gridLayoutModule.GridLayout>args.object.parent.parent;
+    var itemSpecs, count;
+    itemSpecs = layout.getRows();
+    count = itemSpecs.length;
+    layout.removeRow(itemSpecs[count - 1]);
+    itemSpecs = layout.getColumns();
+    count = itemSpecs.length;
+    layout.removeColumn(itemSpecs[count - 1]);
+}

apps/ui-tests-app/layouts/grid.xml

@@ -0,0 +1,18 @@
+<Page loaded="onLoaded">
+  <GridLayout rows="auto, 100, *, 50" columns="auto, 100, *, 50">
+    <!-- View Properties -->
+    <Button text="wh" tap="{{ onWidthHeight }}" id="widthHeight" style="background-color: lightblue;" />
+    <Button text="n" tap="{{ onMinWidthMinHeight }}" col="1" id="minWidthMinHeight" style="background-color: lightblue;" />
+    <Button text="m" tap="{{ onMargins }}" col="2" id="margins" style="background-color: lightblue;" />
+    <Button text="a" tap="{{ onAlignments }}" row="1" id="alignments" style="background-color: lightblue;" />
+    <Button text="c" tap="{{ onCollapse }}" row="1" col="1" id="collapse" style="background-color: lightblue;" />
+    <Button text="v" tap="{{ onVisibile }}" row="1" col="2" id="visible" style="background-color: lightblue;" />
+    <!-- Layout Properties -->
+    <Button text="p" tap="{{ onPaddings }}" row="2" id="paddings" style="background-color: lightgray;" />
+    <Button text="all" tap="{{ onAllProperties }}" row="2" col="1" id="allProperties" style="background-color: aquamarine;" />
+    <StackLayout row="2" col="2">
+      <Button text="1" tap="onAddRowColumn" id="addRowColumn" style="background-color: lightgreen;" />
+      <Button text="0" tap="onRemoveRowColumn" id="removeRowColumn" style="background-color: lightgreen;" />
+    </StackLayout>
+  </GridLayout>
+</Page>

apps/ui-tests-app/layouts/myview.ts

@@ -0,0 +1,167 @@
+import observable = require("data/observable");
+import enums = require("ui/enums");
+import view = require("ui/core/view");
+import layouts = require("ui/layouts/layout");
+
+export class ViewModel extends observable.Observable {
+
+    // View properties
+    public onWidthHeight(args: { eventName: string, object: any }): void {
+        var view: view.View = <view.View>args.object;
+        if (view.width !== 30) {
+            view.width = 30;
+            view.height = 50;
+        } else {
+            view.width = Number.NaN;
+            view.height = Number.NaN;
+        }
+    }
+
+    public onMinWidthMinHeight(args: { eventName: string, object: any }): void {
+        var view: view.View = <view.View>args.object;
+        if (view.minWidth !== 66) {
+            view.minWidth = 66;
+            view.minHeight = 55;
+        } else {
+            view.minWidth = 0;
+            view.minHeight = 0;
+        }
+    }
+
+    public onMargins(args: { eventName: string, object: any }): void {
+        var view: view.View = <view.View>args.object;
+        if (view.marginLeft !== 5) {
+            view.marginLeft = 5;
+            view.marginTop = 5;
+            view.marginRight = 5;
+            view.marginBottom = 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 = <view.View>args.object;
+        if (view.horizontalAlignment === enums.HorizontalAlignment.stretch) {
+            view.horizontalAlignment = enums.HorizontalAlignment.left;
+            view.verticalAlignment = enums.VerticalAlignment.top;
+        } else if (view.horizontalAlignment === enums.HorizontalAlignment.left) {
+            view.horizontalAlignment = enums.HorizontalAlignment.center;
+            view.verticalAlignment = enums.VerticalAlignment.center;
+        } else if (view.horizontalAlignment === enums.HorizontalAlignment.center) {
+            view.horizontalAlignment = enums.HorizontalAlignment.right;
+            view.verticalAlignment = enums.VerticalAlignment.bottom;
+        } else {
+            view.horizontalAlignment = enums.HorizontalAlignment.stretch;
+            view.verticalAlignment = enums.VerticalAlignment.stretch;
+        }
+    }
+
+    public onCollapse(args: { eventName: string, object: any }): void {
+        var view: view.View = <view.View>args.object;
+        view.visibility = enums.Visibility.collapse;
+    }
+
+    public onVisibile(args: { eventName: string, object: any }): void {
+        var view: view.View = <view.View>args.object;
+        var layout = <layouts.Layout>view.parent;
+
+        var child = layout.getViewById("collapse");
+        child.visibility = enums.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;
+        }
+    }
+
+    public onAllProperties(args: { eventName: string, object: any }): void {
+        var child;
+        var layout = args.object.parent;
+
+        // WidthHeight
+        child = layout.getViewById("widthHeight");
+        if (child.width !== 30) {
+            child.width = 30;
+            child.height = 50;
+        } else {
+            child.width = Number.NaN;
+            child.height = Number.NaN;
+        }
+
+        // MinWidthMinHeight
+        child = layout.getViewById("minWidthMinHeight");
+        if (child.minWidth !== 66) {
+            child.minWidth = 66;
+            child.minHeight = 55;
+        } else {
+            child.minWidth = 0;
+            child.minHeight = 0;
+        }
+
+        // Margins
+        child = layout.getViewById("margins");
+        if (child.marginLeft !== 5) {
+            child.marginLeft = 5;
+            child.marginTop = 5;
+            child.marginRight = 5;
+            child.marginBottom = 5;
+        } else {
+            child.marginLeft = 0;
+            child.marginTop = 0;
+            child.marginRight = 0;
+            child.marginBottom = 0;
+        }
+
+        // Alignments
+        child = layout.getViewById("alignments");
+        if (child.horizontalAlignment === enums.HorizontalAlignment.stretch) {
+            child.horizontalAlignment = enums.HorizontalAlignment.left;
+            child.verticalAlignment = enums.VerticalAlignment.top;
+        } else if (child.horizontalAlignment === enums.HorizontalAlignment.left) {
+            child.horizontalAlignment = enums.HorizontalAlignment.center;
+            child.verticalAlignment = enums.VerticalAlignment.center;
+        } else if (child.horizontalAlignment === enums.HorizontalAlignment.center) {
+            child.horizontalAlignment = enums.HorizontalAlignment.right;
+            child.verticalAlignment = enums.VerticalAlignment.bottom;
+        } else {
+            child.horizontalAlignment = enums.HorizontalAlignment.stretch;
+            child.verticalAlignment = enums.VerticalAlignment.stretch;
+        }
+
+        // Collapse
+        child = layout.getViewById("collapse");
+        if (child.visibility === enums.Visibility.visible) {
+            child.visibility = enums.Visibility.collapse;
+        } else {
+            child.visibility = enums.Visibility.visible;
+        }
+
+        // Paddings
+        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;
+        }
+    }
+}

apps/ui-tests-app/layouts/stack.ts

@@ -0,0 +1,17 @@
+import enums = require("ui/enums");
+import pageModule = require("ui/page");
+import model = require("./myview");
+
+export function onLoaded(args: { eventName: string, object: any }) {
+    var page = <pageModule.Page>args.object;
+    page.bindingContext = new model.ViewModel();
+}
+
+export function onOrientation(args: { eventName: string, object: any }) {
+    var layout = args.object.parent;
+    if(layout.orientation === enums.Orientation.vertical) {
+        layout.orientation = enums.Orientation.horizontal;
+    } else {
+        layout.orientation = enums.Orientation.vertical;
+    }
+}

apps/ui-tests-app/layouts/stack.xml

@@ -0,0 +1,15 @@
+<Page loaded="onLoaded">
+  <StackLayout>
+    <!-- View Properties -->
+    <Button text="wh" tap="{{ onWidthHeight }}" id="widthHeight" style="background-color: lightblue;" />
+    <Button text="n" tap="{{ onMinWidthMinHeight }}" id="minWidthMinHeight" style="background-color: lightblue;" />
+    <Button text="m" tap="{{ onMargins }}" id="margins" style="background-color: lightblue;" />
+    <Button text="a" tap="{{ onAlignments }}" id="alignments" style="background-color: lightblue;" />
+    <Button text="c" tap="{{ onCollapse }}" id="collapse" style="background-color: lightblue;" />
+    <Button text="v" tap="{{ onVisibile }}" id="visible" style="background-color: lightblue;" />
+    <!-- Layout Properties -->
+    <Button text="p" tap="{{ onPaddings }}" id="paddings" style="background-color: lightgray;" />
+    <Button text="all" tap="{{ onAllProperties }}" id="allProperties" style="background-color: aquamarine;" />
+    <Button text="o" tap="onOrientation" id="orientation" style="background-color: lightgreen;" />
+  </StackLayout>
+</Page>

apps/ui-tests-app/layouts/wrap.ts

@@ -0,0 +1,28 @@
+import enums = require("ui/enums");
+import pageModule = require("ui/page");
+import model = require("./myview");
+
+export function onLoaded(args: { eventName: string, object: any }) {
+    var page = <pageModule.Page>args.object;
+    page.bindingContext = new model.ViewModel();
+}
+
+export function onOrientation(args: { eventName: string, object: any }) {
+    var layout = args.object.parent;
+    if(layout.orientation === enums.Orientation.vertical) {
+        layout.orientation = enums.Orientation.horizontal;
+    } else {
+        layout.orientation = enums.Orientation.vertical;
+    }
+}
+
+export function onItemWidthItemHeight(args: { eventName: string, object: any }) {
+    var layout = args.object.parent;
+    if(layout.itemWidth !== 40) {
+        layout.itemWidth = 40;
+        layout.itemHeight = 60;
+    } else {
+        layout.itemWidth = Number.NaN;
+        layout.itemHeight = Number.NaN;
+    }
+}

apps/ui-tests-app/layouts/wrap.xml

@@ -0,0 +1,16 @@
+<Page loaded="onLoaded">
+  <WrapLayout>
+    <!-- View Properties -->
+    <Button text="wh" tap="{{ onWidthHeight }}" id="widthHeight" style="background-color: lightblue;" />
+    <Button text="n" tap="{{ onMinWidthMinHeight }}" id="minWidthMinHeight" style="background-color: lightblue;" />
+    <Button text="m" tap="{{ onMargins }}" id="margins" style="background-color: lightblue;" />
+    <Button text="a" tap="{{ onAlignments }}" id="alignments" style="background-color: lightblue;" />
+    <Button text="c" tap="{{ onCollapse }}" id="collapse" style="background-color: lightblue;" />
+    <Button text="v" tap="{{ onVisibile }}" id="visible" style="background-color: lightblue;" />
+    <!-- Layout Properties -->
+    <Button text="p" tap="{{ onPaddings }}" id="paddings" style="background-color: lightgray;" />
+    <Button text="all" tap="{{ onAllProperties }}" id="allProperties" style="background-color: aquamarine;" />
+    <Button text="o" tap="onOrientation" id="orientation" style="background-color: lightgreen;" />
+    <Button text="i" tap="onItemWidthItemHeight" id="itemWidthItemHeight" style="background-color: lightgreen;" />
+  </WrapLayout>
+</Page>