Merge pull request #1136 from NativeScript/cankov/template-factory-function

Add Template factory function and use it in the ui/builder, Repeater and ListView components

apps/tests/ui/list-view/list-view-tests.ts

@@ -8,6 +8,7 @@ import observable = require("data/observable");
 import types = require("utils/types");
 import platform = require("platform");
 import utils = require("utils/utils");
+import { Label } from "ui/label";
 
 // <snippet module="ui/list-view" title="list-view">
 // # ListView
@@ -481,6 +482,28 @@ export class ListViewTest extends testModule.UITest<listViewModule.ListView> {
         TKUnit.assertEqual(secondNativeElementText, "2", "second element text");
         TKUnit.assertEqual(thirdNativeElementText, "3", "third element text");
     }
+    
+    public test_ItemTemplateFactoryFunction() {
+        var listView = this.testView;
+
+        listView.itemTemplate = () => {
+            var label = new Label();
+            label.id = "testLabel";
+            label.bind({ sourceProperty: "$value", targetProperty: "text", twoWay: false });
+            return label;
+        }
+        listView.items = [1, 2, 3];
+
+        TKUnit.waitUntilReady(() => { return this.getNativeViewCount(listView) === listView.items.length; }, ASYNC);
+
+        var firstNativeElementText = this.getTextFromNativeElementAt(listView, 0);
+        var secondNativeElementText = this.getTextFromNativeElementAt(listView, 1);
+        var thirdNativeElementText = this.getTextFromNativeElementAt(listView, 2);
+
+        TKUnit.assertEqual(firstNativeElementText, "1", "first element text");
+        TKUnit.assertEqual(secondNativeElementText, "2", "second element text");
+        TKUnit.assertEqual(thirdNativeElementText, "3", "third element text");
+    }
 
     public test_BindingListViewToASimpleArrayWithExpression() {
         var listView = this.testView;

apps/tests/ui/repeater/repeater-tests.ts

@@ -8,6 +8,7 @@ import layoutBaseModule = require("ui/layouts/layout-base");
 import fs = require("file-system");
 import pageModule = require("ui/page");
 import gestureModule = require("ui/gestures");
+import { Label } from "ui/label";
 
 // <snippet module="ui/repeater" title="repeater">
 // # Repeater
@@ -367,6 +368,28 @@ export function test_BindingRepeaterToASimpleArray() {
     helper.buildUIAndRunTest(repeater, testAction);
 }
 
+export function test_ItemTemplateFactoryFunction() {
+    var repeater = new repeaterModule.Repeater();
+
+    function testAction(views: Array<viewModule.View>) {
+        repeater.itemTemplate = () => {
+            var label = new Label();
+            label.id = "testLabel";
+            label.bind({ sourceProperty: "$value", targetProperty: "text", twoWay: false });
+            return label;
+        }
+        repeater.items = [1, 2, 3];
+
+        TKUnit.wait(ASYNC);
+
+        TKUnit.assertEqual(getChildAtText(repeater, 0), "1", "first element text");
+        TKUnit.assertEqual(getChildAtText(repeater, 1), "2", "second element text");
+        TKUnit.assertEqual(getChildAtText(repeater, 2), "3", "third element text");
+    }
+
+    helper.buildUIAndRunTest(repeater, testAction);
+}
+
 export function test_BindingRepeaterToASimpleArrayWithExpression() {
     var repeater = new repeaterModule.Repeater();
 

apps/tests/xml-declaration/template-builder-tests/simple-template-test.xml

@@ -0,0 +1,8 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd"
+      xmlns:tc="xml-declaration/template-builder-tests/template-view">
+	<tc:TemplateView id="template-view">
+		<tc:TemplateView.template>
+			<Button text="Click!" />
+		</tc:TemplateView.template>
+	</tc:TemplateView>
+</Page>

apps/tests/xml-declaration/template-builder-tests/template-view.ts

@@ -0,0 +1,33 @@
+import { View, Template } from "ui/core/view"
+import { PropertyChangeData, Property, PropertyMetadataSettings } from "ui/core/dependency-observable"
+import * as proxy from "ui/core/proxy"
+import { LayoutBase } from "ui/layouts/layout-base"
+import { parse } from "ui/builder"
+
+export module knownTemplates {
+    export var template = "template";
+}
+
+export class TemplateView extends LayoutBase {
+	public static templateProperty = new Property(
+        "template",
+        "TemplateView",
+        new proxy.PropertyMetadata(
+            undefined,
+            PropertyMetadataSettings.AffectsLayout,
+            null
+            )
+        );
+	
+    get template(): string | Template {
+        return this._getValue(TemplateView.templateProperty);
+    }
+	
+    set template(value: string | Template) {
+        this._setValue(TemplateView.templateProperty, value);
+    }
+	
+    public parseTemplate() {
+        this.addChild(parse(this.template));
+    }
+}

apps/tests/xml-declaration/xml-declaration-tests.ts

@@ -14,6 +14,8 @@ import stackLayoutModule = require("ui/layouts/stack-layout");
 import {Label} from "ui/label";
 import {Page} from "ui/page";
 import {Button} from "ui/button";
+import {View} from "ui/core/view";
+import {TemplateView} from "./template-builder-tests/template-view";
 import myCustomControlWithoutXml = require("./mymodule/MyControl");
 import listViewModule = require("ui/list-view");
 import helper = require("../ui/helper");
@@ -818,4 +820,19 @@ export function test_searchbar_donotcrash_whentext_isspace() {
     var sb = <searchBarModule.SearchBar>p.content;
 
     TKUnit.assertEqual(sb.text, " ");
-};
+};
+
+export function test_parse_template_property() {
+    var page = <Page>builder.load(fs.path.join(__dirname, "template-builder-tests/simple-template-test.xml"));
+    TKUnit.assert(page, "Expected root page.");
+    var templateView = <TemplateView>page.getViewById("template-view");
+    TKUnit.assert(templateView, "Expected TemplateView.");
+    TKUnit.assert(templateView.template, "Expected the template of the TemplateView to be defined");
+    
+    TKUnit.assertEqual(templateView.getChildrenCount(), 0, "Expected TemplateView initially to have no children.");
+    templateView.parseTemplate();
+    TKUnit.assertEqual(templateView.getChildrenCount(), 1, "Expected TemplateView initially to have 1 child.");
+    var button = <Button>templateView.getChildAt(0);
+    TKUnit.assert(button, "Expected the TemplateView's template to create a button child.");
+    TKUnit.assertEqual(button.text, "Click!", "Expected child Button to have text 'Click!'");
+}