Add TabView example page.

Author: hdeshev

app/app.css

@@ -3,5 +3,10 @@
 }
 
 label {
-    text-align: center;   
-}
+    text-align: center;
+}
+
+.tab-view-container { 
+    font-family: 'Courier'; /* Enabling this results in the error and shows a blank TabView */
+}
+

app/app.routes.ts

@@ -20,6 +20,8 @@ import { ListViewWithNestedTemplateComponent } from "./listView/nestedTemplate/l
 import { ModalTest, ModalTestWithPushStrategy, ModalContent } from "./modal/modal-dialogs/modal-dialog.component";
 import { ModalViewMainPageComponent } from "./modal/modal-view-main-page";
 
+import { TabViewComponent } from "./tab-view/tab-view.component";
+
 import { NavigationOptionsComponent } from "./navigation-options/navigation-options.component";
 import { NavigationInfoComponent } from "./navigation-options/navigation-info.component";
 import { MainComponent } from "./main/main-page-router-outlet";
@@ -53,6 +55,8 @@ export const routes = [
     routeEntry({ path: 'modal/modal-dialogs', component: ModalTest, data: { title: "modal" } }),
     routeEntry({ path: 'modal/modal-dialogs-push', component: ModalTestWithPushStrategy, data: { title: "modal(onPush)" } }),
 
+    routeEntry({ path: 'tab-view', component: TabViewComponent, data: { title: "tab-view", isNavigatable: true } }),
+
     routeEntry({ path: 'nav-options', component: NavigationOptionsComponent, data: { title: "nav-options", isNavigatable: true} }),
     routeEntry({ path: 'nav-info', component: NavigationInfoComponent, data: { title: "nav-info" } }),
 ];

app/main/main-page-router-outlet.ts

@@ -6,30 +6,28 @@ import * as platform from "platform";
     selector: "main",
     template: `
     <WrapLayout id='mainView' [orientation]="orientation">
-        <Button *ngFor="let route of routers" [text]="route.data.title" [nsRouterLink]="route.path" [color]="route.data.isNavigatable == true ? 'red':'blue'" height="40"></Button>  
+        <Button *ngFor="let page of pages" [text]="page.data.title" [nsRouterLink]="page.path" color="red" height="40"></Button>  
     </WrapLayout>
     `,
 })
 export class MainComponent {
-    private _routers = [];
+    private _pages = [];
     private _routes = require("../app.routes").routes
     private _orientation: string = "vertical";
 
     constructor() {
-        let routs = this._routes.filter((item) => {
-            let isNavigatable = item.data.isNavigatable != undefined && item.data.isNavigatable == true && item.path != '';
-            console.log("Page route:" + item.path + "; page name: " + item.data.title + "; isNavigatable: " + isNavigatable);
-            return isNavigatable;
+        let navigatableRoutes = this._routes.filter((item) => {
+            return item.data.isNavigatable == true && item.path != '';
         });
 
-        this._routers = routs;
+        this._pages = navigatableRoutes;
         if (platform.isAndroid) {
             this._orientation = "horizontal";
         }
     }
 
-    get routers() {
-        return this._routers;
+    get pages() {
+        return this._pages;
     }
 
     get orientation() {

app/tab-view/tab-view.component.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'tab-view-component',
+    template: ` 
+    <Grid class="tab-view-container">
+        <TabView sdkExampleTitle sdkToggleNavButton>
+            <StackLayout *tabItem="{title: 'Overview'}" >
+                <Label text="Test Label"></Label>
+            </StackLayout>
+        </TabView>
+    </Grid>
+            `,
+})
+
+export class TabViewComponent {
+}