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!'");
+}

tsconfig.json

@@ -320,6 +320,7 @@
         "apps/tests/xml-declaration/mymodule/MyControl.ts",
         "apps/tests/xml-declaration/mymodulewithxml/MyControl.ts",
         "apps/tests/xml-declaration/xml-declaration-tests.ts",
+        "apps/tests/xml-declaration/template-builder-tests/template-view.ts",
         "apps/tests/xml-parser-tests/xml-parser-tests.ts",
         "apps/transforms/app.ts",
         "apps/transforms/main-page.ts",

ui/builder/builder.d.ts

@@ -4,7 +4,7 @@
 
     export function load(fileName: string, exports?: any): view.View;
     export function load(options: LoadOptions): view.View;
-    export function parse(value: string, exports?: any): view.View;
+    export function parse(value: string | view.Template, exports?: any): view.View;
 
     export interface LoadOptions {
         path: string;

ui/builder/builder.ts

@@ -21,20 +21,24 @@ function isCurentPlatform(value: string): boolean {
     return value && value.toLowerCase() === platform.device.os.toLowerCase();
 }
 
-export function parse(value: string, context: any): view.View {
-    var viewToReturn: view.View;
-
-    if (context instanceof view.View) {
-        context = getExports(context);
+export function parse(value: string | view.Template, context: any): view.View {
+    if (types.isString(value)) {
+        var viewToReturn: view.View;
+    
+        if (context instanceof view.View) {
+            context = getExports(context);
+        }
+    
+        var componentModule = parseInternal(<string>value, context);
+    
+        if (componentModule) {
+            viewToReturn = componentModule.component;
+        }
+    
+        return viewToReturn;
+    } else if (types.isFunction(value)) {
+        return (<view.Template>value)();
     }
-
-    var componentModule = parseInternal(value, context);
-
-    if (componentModule) {
-        viewToReturn = componentModule.component;
-    }
-
-    return viewToReturn;
 }
 
 function parseInternal(value: string, context: any): componentBuilder.ComponentModule {
@@ -104,6 +108,7 @@ function parseInternal(value: string, context: any): componentBuilder.ComponentM
 
                 if (templateBuilderDef.isKnownTemplate(name, parent.exports)) {
                     templateBuilder = new templateBuilderDef.TemplateBuilder({
+                        context: parent ? getExports(parent.component) : null, // Passing 'context' won't work if you set "codeFile" on the page
                         parent: parent,
                         name: name,
                         elementName: args.elementName,

ui/builder/template-builder.d.ts

@@ -1,6 +1,7 @@
 //@private
 declare module "ui/builder/template-builder" {
     import xml = require("xml");
+    import page = require("ui/page");
     import componentBuilder = require("ui/builder/component-builder");
 
     class TemplateBuilder {
@@ -18,6 +19,7 @@ declare module "ui/builder/template-builder" {
     export function isKnownTemplate(name: string, exports: any): boolean;
 
     interface TemplateProperty {
+        context?: any;
         parent: componentBuilder.ComponentModule;
         name: string;
         elementName: string;

ui/builder/template-builder.ts

@@ -1,14 +1,19 @@
 import definition = require("ui/builder/template-builder");
+import builder = require("ui/builder");
+import view = require("ui/core/view");
+import page = require("ui/page");
 import xml = require("xml");
 
 var KNOWNTEMPLATES = "knownTemplates";
 
 export class TemplateBuilder {
+    private _context: any;
     private _items: Array<string>;
     private _templateProperty: definition.TemplateProperty;
     private _nestingLevel: number;
 
     constructor(templateProperty: definition.TemplateProperty) {
+        this._context = templateProperty.context;
         this._items = new Array<string>();
         this._templateProperty = templateProperty;
         this._nestingLevel = 0;
@@ -56,7 +61,10 @@ export class TemplateBuilder {
 
     private build() {
         if (this._templateProperty.name in this._templateProperty.parent.component) {
-            this._templateProperty.parent.component[this._templateProperty.name] = this._items.join("");
+            var xml = this._items.join("");
+            var context = this._context;
+            var template: view.Template = () => builder.parse(xml, context);
+            this._templateProperty.parent.component[this._templateProperty.name] = template;
         }
     }
 }

ui/core/view.d.ts

@@ -511,6 +511,18 @@ declare module "ui/core/view" {
      */
     export class CustomLayoutView extends View {
     }
+    
+    /**
+     * Defines an interface for a View factory function.
+     * Commonly used to specify the visualization of data objects.
+     */
+    interface Template {
+        /**
+         * Call signature of the factory function.
+         * Returns a new View instance.
+         */
+        (): View;
+    }
 
     /**
      * Defines an interface for adding arrays declared in xml.

ui/list-view/list-view-common.ts

@@ -8,6 +8,7 @@ import builder = require("ui/builder");
 import label = require("ui/label");
 import color = require("color");
 import weakEvents = require("ui/core/weak-event-listener");
+import types = require("utils/types");
 
 var ITEMS = "items";
 var ITEMTEMPLATE = "itemTemplate";
@@ -91,10 +92,10 @@ export class ListView extends view.View implements definition.ListView {
         this._setValue(ListView.itemsProperty, value);
     }
 
-    get itemTemplate(): string {
+    get itemTemplate(): string | view.Template {
         return this._getValue(ListView.itemTemplateProperty);
     }
-    set itemTemplate(value: string) {
+    set itemTemplate(value: string | view.Template) {
         this._setValue(ListView.itemTemplateProperty, value);
     }
 

ui/list-view/list-view.d.ts

@@ -78,7 +78,7 @@ declare module "ui/list-view" {
         /**
          * Gets or set the item template of the ListView. 
          */
-        itemTemplate: string;
+        itemTemplate: string | view.Template;
 
         /**
          * Gets or set the items separator line color of the ListView. 

ui/repeater/repeater.d.ts

@@ -32,9 +32,9 @@ declare module "ui/repeater" {
         items: any;
 
         /**
-         * Gets or set the item template of the Repeater. 
+         * Gets or set the item template of the Repeater.
          */
-        itemTemplate: string;
+        itemTemplate: string | view.Template;
         
         /**
          * Gets or set the items layout of the Repeater. Default value is StackLayout with orientation="vertical".

ui/repeater/repeater.ts

@@ -90,10 +90,10 @@ export class Repeater extends viewModule.CustomLayoutView implements definition.
         this._setValue(Repeater.itemsProperty, value);
     }
 
-    get itemTemplate(): string {
+    get itemTemplate(): string | viewModule.Template {
         return this._getValue(Repeater.itemTemplateProperty);
     }
-    set itemTemplate(value: string) {
+    set itemTemplate(value: string | viewModule.Template) {
         this._setValue(Repeater.itemTemplateProperty, value);
     }