Update to the new renderer API.

- Kill the ViewNode class.
- Return View instances from renderer.
- Add a ViewContainer view (based on ContentView) that attaches children
  directly to its parent and keeps track of insert positions.
- Update the ng-sample app
- Broke the complex properties hack. We'll have to support components
  such as TabView with custom components/directives.

Author: hdeshev

ng-sample/app/renderer-test.ts

@@ -11,32 +11,19 @@ export class TemplatedComponent {
 	selector: 'renderer-test',
     directives: [TemplatedComponent],
 	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 *ngIf='showDetails' [text]='detailsText'></TextView>
-            <Label text='==============================' fontSize='20'></Label>
-            <StackLayout #more *ngIf='showDetails' orientation='vertical'>
-                <TextField *ngFor='#detailLine of detailLines' [text]='detailLine'></TextField>
-            </StackLayout>
-            <Label text='==============================' fontSize='20'></Label>
+    <StackLayout orientation='vertical'>
+        <templated-component *ngIf='showDetails'></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 *ngIf='showDetails' [text]='detailsText'></TextView>
+        <Label text='==============================' fontSize='20'></Label>
+        <StackLayout #more *ngIf='showDetails' orientation='vertical'>
+            <TextField *ngFor='#detailLine of detailLines' [text]='detailLine'></TextField>
         </StackLayout>
-      </TabViewItem.view>
-    </TabViewItem>
-    <TabViewItem title="Second Tab">
-      <TabViewItem.view>
-        <Label text="Completely different tab!"></Label>
-      </TabViewItem.view>
-    </TabViewItem>
-  </TabView.items>
-</TabView>
+        <Label text='==============================' fontSize='20'></Label>
+    </StackLayout>
 `,
 })
 export class RendererTest {

ng-sample/app/title.html

@@ -1 +1,2 @@
+<Switch></Switch>
 <Label text="Hello, external templates"></Label>

src/nativescript-angular/application.ts

@@ -13,8 +13,8 @@ import {platform, ComponentRef, PLATFORM_DIRECTIVES, PLATFORM_PIPES} from 'angul
 import {bind, provide, Provider} from 'angular2/src/core/di';
 import {DOM} from 'angular2/src/platform/dom/dom_adapter';
 
-import {Renderer} from 'angular2/src/core/render/api';
-import {NativeScriptRenderer} from './renderer';
+import {RootRenderer, Renderer} from 'angular2/src/core/render/api';
+import {NativeScriptRootRenderer, NativeScriptRenderer} from './renderer';
 import {NativeScriptDomAdapter} from './dom_adapter';
 import {XHR} from 'angular2/src/compiler/xhr';
 import {FileSystemXHR} from './xhr';
@@ -34,6 +34,8 @@ export function nativeScriptBootstrap(appComponentType: any,
   NativeScriptDomAdapter.makeCurrent();
 
   let nativeScriptProviders: ProviderArray = [
+      NativeScriptRootRenderer,
+      provide(RootRenderer, {useClass: NativeScriptRootRenderer}),
       NativeScriptRenderer,
       provide(Renderer, {useClass: NativeScriptRenderer}),
       provide(XHR, {useClass: FileSystemXHR}),