Support setting complex properties - e.x. TabViewItems

Author: vakrilov

ng-sample/app/renderer-test.ts

@@ -12,20 +12,33 @@ export class TemplatedComponent {
 })
 @View({
     directives: [NgIf, NgFor, TemplatedComponent],
-	template: `
-<StackLayout orientation='vertical'>
-    <templated-component></templated-component>
-    <Label [class.valid]="isValid" [class.invalid]="!isValid" text='Name' fontSize='20' verticalAlignment='center' padding='20'></Label>
-    <TextField #name text='John' fontSize='20' padding='20'></TextField>
-    <Button [text]='buttonText' (tap)='onSave($event, name.text, $el)'></Button>
-    <Button text='Toggle details' (tap)='onToggleDetails()'></Button>
-    <TextView *ng-if='showDetails' [text]='detailsText'></TextView>
-    <Label text='==============================' fontSize='20'></Label>
-    <StackLayout #more *ng-if='showDetails' orientation='vertical'>
-        <TextField *ng-for='#detailLine of detailLines' [text]='detailLine'></TextField>
-    </StackLayout>
-    <Label text='==============================' fontSize='20'></Label>
-</StackLayout>
+	template: `    
+<TabView>
+  <TabView.items>
+    <TabViewItem title="First Tab">
+      <TabViewItem.view>
+        <StackLayout orientation='vertical'>
+            <templated-component></templated-component>
+            <Label [class.valid]="isValid" [class.invalid]="!isValid" text='Name' fontSize='20' verticalAlignment='center' padding='20'></Label>
+            <TextField #name text='John' fontSize='20' padding='20'></TextField>
+            <Button [text]='buttonText' (tap)='onSave($event, name.text, $el)'></Button>
+            <Button text='Toggle details' (tap)='onToggleDetails()'></Button>
+            <TextView *ng-if='showDetails' [text]='detailsText'></TextView>
+            <Label text='==============================' fontSize='20'></Label>
+            <StackLayout #more *ng-if='showDetails' orientation='vertical'>
+                <TextField *ng-for='#detailLine of detailLines' [text]='detailLine'></TextField>
+            </StackLayout>
+            <Label text='==============================' fontSize='20'></Label>
+        </StackLayout>
+      </TabViewItem.view>
+    </TabViewItem>
+    <TabViewItem title="Second Tab">
+      <TabViewItem.view>
+        <Label text="Completely different tab!"></Label>
+      </TabViewItem.view>
+    </TabViewItem>
+  </TabView.items>
+</TabView>
 `,
 })
 export class RendererTest {

src/nativescript-angular/element-registry.ts

@@ -70,6 +70,7 @@ registerElement("Slider", {className: "Slider", moduleName: "ui/slider"});
 registerElement("StackLayout", {className: "StackLayout", moduleName: "ui/layouts/stack-layout"});
 registerElement("Switch", {className: "Switch", moduleName: "ui/switch"});
 registerElement("TabView", {className: "TabView", moduleName: "ui/tab-view"});
+registerElement("TabViewItem", {className: "TabViewItem", moduleName: "ui/tab-view"});
 registerElement("TextField", {className: "TextField", moduleName: "ui/text-field"});
 registerElement("TextView", {className: "TextView", moduleName: "ui/text-view"});
 registerElement("TimePicker", {className: "TimePicker", moduleName: "ui/time-picker"});

src/nativescript-angular/view_node.ts

@@ -13,6 +13,7 @@ import {Switch} from 'ui/switch';
 import {LayoutBase} from 'ui/layouts/layout-base';
 import gestures = require("ui/gestures");
 import {ViewClass, getViewClass, isKnownView} from './element-registry';
+import {isString} from "utils/types";
 
 type EventHandler = (args: EventData) => void;
 
@@ -28,11 +29,11 @@ export class ViewNode {
     private cssClasses: Map<string, boolean> = new Map<string, boolean>();
     private static whiteSpaceSplitter = /\s+/;
 
-    public children:Array<ViewNode> = [];
+    public children: Array<ViewNode> = [];
 
     constructor(public parentNode: ViewNode,
-                public viewName: string,
-                attrNameAndValues: string[]) {
+        public viewName: string,
+        attrNameAndValues: string[]) {
         this.setAttributeValues(attrNameAndValues);
 
         if (this.parentNode)
@@ -57,7 +58,7 @@ export class ViewNode {
             return this._parentView
 
         if (this.parentNode) {
-            if(this.parentNode.viewName !== "template" && this.parentNode.nativeView) {
+            if (this.parentNode.viewName !== "template" && this.parentNode.nativeView) {
                 this._parentView = this.parentNode.nativeView;
             } else {
                 this._parentView = this.parentNode.parentNativeView;
@@ -69,6 +70,10 @@ export class ViewNode {
         return this._parentView;
     }
 
+    get isComplexProperty(): boolean {
+        return ViewNode.isComplexProperty(this.viewName);
+    }
+
     public attachToView(atIndex: number = -1) {
         console.log('ViewNode.attachToView ' + this.viewName);
         if (this._attachedToView) {
@@ -84,9 +89,11 @@ export class ViewNode {
         this.children.forEach(child => {
             child.attachToView();
         });
+
+        this.postAttachUI();
     }
 
-    private createUI(attachAtIndex: number) {
+    private createUI(attachAtIndex: number): boolean {
         if (!isKnownView(this.viewName))
             return;
 
@@ -118,12 +125,41 @@ export class ViewNode {
             }
         } else if ((<any>this.parentNativeView)._addChildFromBuilder) {
             (<any>this.parentNativeView)._addChildFromBuilder(this.viewName, this.nativeView);
-        } else {
+        } else if (this.parentNode.isComplexProperty) {
+            // complex property - we will deal with this in postAttachUI()            
+        }
+        else {
             console.log('parentNativeView: ' + this.parentNativeView);
             throw new Error("Parent view can't have children! " + this.parentNativeView);
         }
     }
 
+    private postAttachUI() {
+        if (this.isComplexProperty) {
+            let nativeParent = <any>this.parentNativeView;
+            if (!nativeParent) {
+                return;
+            }
+
+            let propertyName = ViewNode.getComplexPropertyName(this.viewName);
+            let realChildren = [];
+            for (let child of this.children) {
+                if (child.nativeView) {
+                    realChildren.push(child.nativeView);
+                }
+            }
+            if (realChildren.length > 0) {
+                if (nativeParent._addArrayFromBuilder) {
+                    nativeParent._addArrayFromBuilder(propertyName, realChildren);
+                }
+                else {
+                    this.parentNode.setAttribute(propertyName, realChildren[0]);
+                }
+            }
+        }
+    }
+
+
     private static propertyMaps: Map<Function, Map<string, string>> = new Map<Function, Map<string, string>>();
 
     private static getProperties(instance: any): Map<string, string> {
@@ -142,6 +178,21 @@ export class ViewNode {
         return ViewNode.propertyMaps.get(type);
     }
 
+    private static isComplexProperty(name: string): boolean {
+        return isString(name) && name.indexOf(".") !== -1;
+    }
+
+    private static getComplexPropertyName(fullName: string): string {
+        var name: string;
+
+        if (isString(fullName)) {
+            var names = fullName.split(".");
+            name = names[names.length - 1];
+        }
+
+        return name;
+    }
+
     private configureUI() {
         if (this.attributes.size == 0)
             return;
@@ -337,7 +388,6 @@ export class ViewNode {
             this.nativeView.cssClass = classValue;
         }
     }
-
 }
 
 export class DummyViewNode extends ViewNode {