Add binding basic test pages.

CrossPlatformModules.csproj

@@ -208,6 +208,8 @@
     </TypeScriptCompile>
     <TypeScriptCompile Include="apps\editable-text-demo\model.ts" />
     <TypeScriptCompile Include="apps\tests\weak-event-listener-tests.ts" />
+    <TypeScriptCompile Include="apps\ui-tests-app\bindings\dbxmlbasics.ts" />
+    <TypeScriptCompile Include="apps\ui-tests-app\bindings\dbbasics.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" />
@@ -699,6 +701,7 @@
     <Content Include="apps\tests\xml-declaration\mymodulewithxml\my-control-no-js.xml">
       <SubType>Designer</SubType>
     </Content>
+    <Content Include="apps\ui-tests-app\bindings\dbxmlbasics.xml" />
     <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" />

apps/ui-tests-app/bindings/dbbasics.ts

@@ -0,0 +1,62 @@
+import pageModule = require("ui/page");
+import buttonModule = require("ui/button");
+import textFieldModule = require("ui/text-field");
+import stackLayoutModule = require("ui/layouts/stack-layout");
+import observableModule = require("data/observable");
+
+export function createPage() {
+
+    var page = new pageModule.Page();
+    var stack = new stackLayoutModule.StackLayout();
+    var sourceOneWay = new observableModule.Observable();
+    var sourceTwoWay = new observableModule.Observable();
+    var targetOneWay = new textFieldModule.TextField();
+    var targetTwoWay = new textFieldModule.TextField();
+    var buttonOneWay = new buttonModule.Button();
+    var buttonTwoWay = new buttonModule.Button();
+    
+    // OneWay Binding
+
+    var bindingOptionOneWay = {
+        sourceProperty: "textSource",
+        targetProperty: "text",
+        twoWay: false
+    };
+
+    targetOneWay.bind(bindingOptionOneWay, sourceOneWay);
+    sourceOneWay.set("textSource", "OneWay");
+
+    buttonOneWay.on(buttonModule.Button.loadedEvent, function () {
+        buttonOneWay.text = sourceOneWay.get("textSource");
+    });
+    buttonOneWay.on(buttonModule.Button.tapEvent, function () {
+        buttonOneWay.text = sourceOneWay.get("textSource");
+    });
+
+    stack.addChild(targetOneWay);
+    stack.addChild(buttonOneWay);
+    
+    // TwoWay Binding
+    
+    var bindingOptionTwoWay = {
+        sourceProperty: "textSource",
+        targetProperty: "text",
+        twoWay: true
+    };
+
+    targetTwoWay.bind(bindingOptionTwoWay, sourceTwoWay);
+    sourceTwoWay.set("textSource", "TwoWay");
+
+    buttonTwoWay.on(buttonModule.Button.loadedEvent, function () {
+        buttonTwoWay.text = sourceTwoWay.get("textSource");
+    });
+    buttonTwoWay.on(buttonModule.Button.tapEvent, function () {
+        buttonTwoWay.text = sourceTwoWay.get("textSource");
+    });
+
+    stack.addChild(targetTwoWay);
+    stack.addChild(buttonTwoWay);
+
+    page.content = stack;
+    return page;
+}

apps/ui-tests-app/bindings/dbxmlbasics.ts

@@ -0,0 +1,42 @@
+import buttonModule = require("ui/button");
+import stackLayoutModule = require("ui/layouts/stack-layout");
+import textFieldModule = require("ui/text-field");
+import observable = require("data/observable");
+
+export function stack0Loaded(args: observable.EventData) {
+    var source = new observable.Observable();
+    var stack0 = <stackLayoutModule.StackLayout>args.object;
+    var target = stack0.getViewById<textFieldModule.TextField>("tf");
+    var button = stack0.getViewById<textFieldModule.TextField>("btn");
+    var bindingOptions = {
+        sourceProperty: "textSource",
+        targetProperty: "text",
+        twoWay: true
+    };
+    target.bind(bindingOptions, source);
+    source.set("textSource", "Text");
+
+    button.on(buttonModule.Button.tapEvent, function () {
+        button.text = source.get("textSource");
+    });
+}
+
+export function stack1Loaded(args: observable.EventData) {
+    var stack1 = <stackLayoutModule.StackLayout>args.object;
+    stack1.bindingContext = { text: "Label" };
+}
+
+export function stack2Loaded(args: observable.EventData) {
+    var stack2 = <stackLayoutModule.StackLayout>args.object;
+    stack2.bindingContext = {
+        myProperty: "Button",
+        myFunction: () => {
+            console.log("### onTap event ###");
+        }
+    };
+}
+
+export function stack3Loaded(args: observable.EventData) {
+    var stack3 = <stackLayoutModule.StackLayout>args.object;
+    stack3.bindingContext = { myItems: [{ text: "Label1" }, { text: "Label2" }] };
+}

apps/ui-tests-app/bindings/dbxmlbasics.xml

@@ -0,0 +1,21 @@
+<Page>
+  <StackLayout>
+    <StackLayout loaded="stack0Loaded" orientation="horizontal">
+      <TextField id="tf" text="{{ textSource }}" />
+      <Button id="btn" />
+    </StackLayout>
+    <StackLayout loaded="stack1Loaded">
+      <Label id="label" text="{{ text }}" />
+    </StackLayout>
+    <StackLayout loaded="stack2Loaded">
+      <Button id="button" text="{{ myProperty }}" tap="{{ myFunction }}" />
+    </StackLayout>
+    <StackLayout loaded="stack3Loaded">
+      <ListView id="listView" items="{{ myItems }}">
+        <ListView.itemTemplate>
+          <Label id="item" text="{{ text }}"  />
+        </ListView.itemTemplate>
+      </ListView>
+    </StackLayout>
+  </StackLayout>
+</Page>

apps/ui-tests-app/mainPage.ts

@@ -10,7 +10,7 @@ import trace = require("trace");
 trace.enable();
 trace.setCategories(trace.categories.Test);
 
-var list: string[] = ["pages", "layouts", "modal-view"];
+var list: string[] = ["pages", "layouts", "modal-view", "bindings"];
 
 // basePath is auto-changed when building multiple apps
 var basePath = "";