Merge pull request #228 from NativeScript/nnikolov/TabViewExample

Added example for TabView.

Author: Nedyalko Nikolov

ng-sample/app/app.ts

@@ -17,6 +17,7 @@ import trace = require("trace");
 trace.enable();
 
 import {RendererTest} from './examples/renderer-test';
+import {TabViewTest} from './examples/tab-view/tab-view-test';
 import {Benchmark} from './performance/benchmark';
 import {ListTest} from './examples/list/list-test';
 import {ListTestAsync} from "./examples/list/list-test-async";
@@ -27,7 +28,8 @@ import {ModalTest} from "./examples/modal/modal-test";
 import {PlatfromDirectivesTest} from "./examples/platform-directives/platform-directives-test";
 import {RouterOutletTest} from "./examples/navigation/router-outlet-test";
 
-nativeScriptBootstrap(RendererTest);
+//nativeScriptBootstrap(RendererTest);
+nativeScriptBootstrap(TabViewTest);
 //nativeScriptBootstrap(Benchmark);
 //nativeScriptBootstrap(ListTest);
 //nativeScriptBootstrap(ListTestAsync);

ng-sample/app/examples/tab-view/tab-view-test.html

@@ -0,0 +1,11 @@
+<TabView selectedIndex="1" selectedColor="#FF0000">
+    <StackLayout *tabItem="{title: 'Profile', iconSource: '~/icon.png'}" >
+        <Label text="First tab item"></Label>
+    </StackLayout>
+    <StackLayout *tabItem="{title: 'Stats'}">
+        <Label text="Second tab item"></Label>
+    </StackLayout>
+    <StackLayout *tabItem="{title: 'Settings'}">
+        <Label text="Third tab item"></Label>
+    </StackLayout>
+</TabView>

ng-sample/app/examples/tab-view/tab-view-test.ts

@@ -0,0 +1,13 @@
+import {Component} from '@angular/core';
+
+@Component({
+	selector: 'tab-view-test',
+	templateUrl: './examples/tab-view/tab-view-test.html' 
+})
+export class TabViewTest {
+    //public selectedIndex: number;
+    
+    constructor() {
+        //this.selectedIndex = 1;
+    }
+}

ng-sample/app/icon.png

@@ -0,0 +1,16 @@
+import {isBlank, isNumber} from '@angular/core/src/facade/lang';
+
+export function convertToInt(value): number {
+    let normalizedValue;
+        if (isBlank(value)) {
+            normalizedValue = 0;
+        } else {
+            if (isNumber(value)) {
+                normalizedValue = value;
+            } else {
+                let parsedValue = parseInt(value.toString());
+                normalizedValue = isNaN(parsedValue) ? 0 : parsedValue;
+            }
+        }
+    return Math.round(normalizedValue);
+}

src/nativescript-angular/common/utils.ts

@@ -1,5 +1,7 @@
 import {ElementRef, Directive, Input, TemplateRef, ViewContainerRef} from "@angular/core";
 import {TabView, TabViewItem} from "ui/tab-view";
+import * as utils from '../common/utils';
+import {isBlank} from '@angular/core/src/facade/lang';
 
 @Directive({
     selector: 'TabView',
@@ -14,8 +16,9 @@ export class TabViewDirective {
         return this._selectedIndex;
     }
 
-    set selectedIndex(value: number) {
-        this._selectedIndex = value;
+    set selectedIndex(value) {
+        debugger;
+        this._selectedIndex = utils.convertToInt(value);
         if (this.viewInitialized) {
             this.tabView.selectedIndex = this._selectedIndex;
         }
@@ -27,7 +30,11 @@ export class TabViewDirective {
 
     ngAfterViewInit() {
         this.viewInitialized = true;
-        this.tabView.selectedIndex = this._selectedIndex;
+        debugger;
+        console.log("this._selectedIndex: " + this._selectedIndex);
+        if (!isBlank(this._selectedIndex)) {
+            this.tabView.selectedIndex = this._selectedIndex;
+        }
     }
 }
 
@@ -49,6 +56,8 @@ export class TabViewItemDirective {
     ngOnInit() {
         this.item = new TabViewItem();
         this.item.title = this.config.title;
+        
+        this.item.iconSource = this.config.iconSource;
 
         const viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
         //Filter out text nodes, etc

src/nativescript-angular/directives/tab-view.ts

@@ -3,6 +3,7 @@ import {NG_VALUE_ACCESSOR} from '@angular/common/src/forms/directives/control_va
 import {isBlank, isNumber} from '@angular/core/src/facade/lang';
 import {BaseValueAccessor} from './base-value-accessor';
 import {View} from "ui/core/view";
+import * as utils from '../common/utils';
 
 const SELECTED_INDEX_VALUE_ACCESSOR = provide(NG_VALUE_ACCESSOR, { useExisting: forwardRef(() => SelectedIndexValueAccessor), multi: true });
 
@@ -33,18 +34,7 @@ export class SelectedIndexValueAccessor extends BaseValueAccessor<SelectableView
     private viewInitialized: boolean;
 
     writeValue(value: any): void {
-        let normalizedValue;
-        if (isBlank(value)) {
-            normalizedValue = 0;
-        } else {
-            if (isNumber(value)) {
-                normalizedValue = value;
-            } else {
-                let parsedValue = parseInt(value);
-                normalizedValue = isNaN(parsedValue) ? 0 : parsedValue;
-            }
-        }
-        this._normalizedValue = Math.round(normalizedValue);
+        this._normalizedValue = utils.convertToInt(value);
         if (this.viewInitialized) {
             this.view.selectedIndex = this._normalizedValue;
         }