ActionBar and TabView colors

apps/ui-tests-app/action-bar/all.xml

@@ -0,0 +1,13 @@
+<Page>
+  <Page.actionBar>
+    <ActionBar title="Page Title" style="background-color: blue; color: yellow;">
+      <NavigationButton text="go back"/>
+      <ActionBar.actionItems>
+        <ActionItem text="ITEM" />
+      </ActionBar.actionItems>
+    </ActionBar>
+  </Page.actionBar>
+  <StackLayout>
+    <Button text="do nothing"/>
+  </StackLayout>
+</Page>

apps/ui-tests-app/action-bar/background.xml

@@ -0,0 +1,13 @@
+<Page>
+  <Page.actionBar>
+    <ActionBar title="Page Title" style="background-color: green;">
+      <NavigationButton text="go back"/>
+      <ActionBar.actionItems>
+        <ActionItem text="ITEM" />
+      </ActionBar.actionItems>
+    </ActionBar>
+  </Page.actionBar>
+  <StackLayout>
+    <Button text="do nothing"/>
+  </StackLayout>
+</Page>

apps/ui-tests-app/action-bar/color.xml

@@ -0,0 +1,13 @@
+<Page>
+  <Page.actionBar>
+    <ActionBar title="Page Title" style="background-color: green;">
+      <NavigationButton text="go back"/>
+      <ActionBar.actionItems>
+        <ActionItem text="ITEM" />
+      </ActionBar.actionItems>
+    </ActionBar>
+  </Page.actionBar>
+  <StackLayout>
+    <Button text="do nothing"/>
+  </StackLayout>
+</Page>

apps/ui-tests-app/mainPage.ts

@@ -1,48 +1,89 @@
 import button = require("ui/button");
-import dialogs = require("ui/dialogs");
 import frame = require("ui/frame");
 import gridModule = require("ui/layouts/grid-layout");
 import pages = require("ui/page");
 import text = require("ui/text-view");
 import fs = require("file-system");
 import trace = require("trace");
+import observable = require("data/observable");
+import view = require("ui/core/view");
+import dialogs = require("ui/dialogs");
 
 trace.enable();
 trace.setCategories(trace.categories.Test);
 
-var list: string[] = ["pages", "bindings", "css", "dialogs", "image-view", "layouts", "modal-view", "nordic", "web-view"];
-
-// basePath is auto-changed when building multiple apps
 var basePath = "";
-export function createPage() {
-    var txtInput = new text.TextView();
-    var btn = new button.Button();
-    btn.text = "Run";
-    btn.on(button.Button.tapEvent, function () {
-        var filePath, fileName, i = 0;
-        while (i < list.length) {
-            filePath = fs.path.join(__dirname, list[i], txtInput.text);
-            if ((fs.File.exists(filePath + ".xml") || (fs.File.exists(filePath + ".js")))) {
-                fileName = basePath + list[i] + "/" + txtInput.text;
-                break;
-            }
-            i++;
-        }
-        if (i < list.length) {
-            frame.topmost().navigate(fileName);
-        } else {
-            dialogs.alert("Cannot find page: " + txtInput.text);
-        }
-    });
+var VM = new observable.Observable();
+var examples = new Map<string, string>();
 
-    var grid = new gridModule.GridLayout();
-    grid.addRow(new gridModule.ItemSpec(1, gridModule.GridUnitType.auto));
-    grid.addRow(new gridModule.ItemSpec());
-    gridModule.GridLayout.setRow(txtInput, 1);
-    grid.addChild(btn);
-    grid.addChild(txtInput);
+export function pageLoaded(args) {
+    var page = <pages.Page>args.object;
+    page.bindingContext = VM;
 
-    var page = new pages.Page();
-    page.content = grid;
-    return page;
-}
+}
+
+export function selectExample() {
+    var ex: string = VM.get("selected");
+    if (examples.has(ex)) {
+        frame.topmost().navigate(basePath + examples.get(ex));
+    }
+    else {
+        dialogs.alert("Cannot find example: " + ex);
+    }
+}
+
+examples.set("basics", "bindings/basics");
+
+examples.set("actColor", "action-bar/color");
+examples.set("actBG",   "action-bar/background");
+examples.set("actAll", "action-bar/all");
+
+examples.set("tabColor", "tab-view/color");
+examples.set("tabBG", "tab-view/background");
+examples.set("tabTabsBG", "tab-view/tabsBackground");
+examples.set("tabSelected", "tab-view/selected");
+examples.set("tabAll", "tab-view/all");
+
+examples.set("basics", "bindings/basics");
+examples.set("xmlbasics", "bindings/xmlbasics");
+
+examples.set("background", "css/background");
+examples.set("import", "css/import");
+examples.set("radius", "css/radius");
+examples.set("styles", "css/styles");
+
+examples.set("dialogs", "dialogs/dialogs");
+examples.set("view-model", "dialogs/view-model");
+
+examples.set("roundbtn", "image-view/roundbtn");
+
+examples.set("absolute", "layouts/absolute");
+examples.set("dock", "layouts/dock");
+examples.set("grid", "layouts/grid");
+examples.set("myview", "layouts/myview");
+examples.set("stack", "layouts/stack");
+examples.set("wrap", "layouts/wrap");
+
+examples.set("login-page", "modal-view/login-page");
+examples.set("modalview", "modal-view/modalview");
+
+examples.set("nordic", "nordic/nordic");
+
+examples.set("text", "pages/text");
+examples.set("background", "pages/background");
+examples.set("console", "pages/console");
+examples.set("gestures", "pages/gestures");
+examples.set("handlers", "pages/handlers");
+examples.set("htmlview", "pages/htmlview");
+examples.set("i61", "pages/i61");
+examples.set("i73", "pages/i73");
+examples.set("i86", "pages/i86");
+examples.set("listview_binding", "pages/listview_binding");
+examples.set("switchandprogress", "pages/switchandprogress");
+examples.set("textfield", "pages/textfield");
+
+examples.set("webview", "web-view/webview");
+examples.set("webviewhtmlwithimages", "web-view/webviewhtmlwithimages");
+examples.set("webviewlocalfile", "web-view/webviewlocalfile");
+
+//VM.set("selected", "tabAll");

apps/ui-tests-app/mainPage.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<Page loaded="pageLoaded">
+  <GridLayout rows="auto, *">
+    <Button text="Run" tap="selectExample" />
+    <TextView row="1" text="{{ selected }}"/>
+  </GridLayout>
+</Page>

apps/ui-tests-app/tab-view/all.xml

@@ -0,0 +1,20 @@
+<Page>
+  <TabView style="color: yellow; background-color: green;" selectedColor="red" tabsBackgroundColor="blue">
+    <TabView.items>
+      <TabViewItem title="First">
+        <TabViewItem.view>
+          <GridLayout>
+            <Label text="First View" verticalAlignment="center" horizontalAlignment="center"/>
+          </GridLayout>
+        </TabViewItem.view>
+      </TabViewItem>
+      <TabViewItem title="Second">
+        <TabViewItem.view>
+          <GridLayout>
+            <Label text="Second View" verticalAlignment="center" horizontalAlignment="center"/>
+          </GridLayout>
+        </TabViewItem.view>
+      </TabViewItem>
+    </TabView.items>
+  </TabView>
+</Page>

apps/ui-tests-app/tab-view/background.xml

@@ -0,0 +1,20 @@
+<Page>
+  <TabView style="background-color: green;">
+    <TabView.items>
+      <TabViewItem title="First">
+        <TabViewItem.view>
+          <GridLayout>
+            <Label text="First View" verticalAlignment="center" horizontalAlignment="center"/>
+          </GridLayout>
+        </TabViewItem.view>
+      </TabViewItem>
+      <TabViewItem title="Second">
+        <TabViewItem.view>
+          <GridLayout>
+            <Label text="Second View" verticalAlignment="center" horizontalAlignment="center"/>
+          </GridLayout>
+        </TabViewItem.view>
+      </TabViewItem>
+    </TabView.items>
+  </TabView>
+</Page>

apps/ui-tests-app/tab-view/color.xml

@@ -0,0 +1,20 @@
+<Page>
+  <TabView style="color: green;">
+    <TabView.items>
+      <TabViewItem title="First">
+        <TabViewItem.view>
+          <GridLayout>
+            <Label text="First View" verticalAlignment="center" horizontalAlignment="center"/>
+          </GridLayout>
+        </TabViewItem.view>
+      </TabViewItem>
+      <TabViewItem title="Second">
+        <TabViewItem.view>
+          <GridLayout>
+            <Label text="Second View" verticalAlignment="center" horizontalAlignment="center"/>
+          </GridLayout>
+        </TabViewItem.view>
+      </TabViewItem>
+    </TabView.items>
+  </TabView>
+</Page>

apps/ui-tests-app/tab-view/selected.xml

@@ -0,0 +1,20 @@
+<Page>
+  <TabView selectedColor="green">
+    <TabView.items>
+      <TabViewItem title="First">
+        <TabViewItem.view>
+          <GridLayout>
+            <Label text="First View" verticalAlignment="center" horizontalAlignment="center"/>
+          </GridLayout>
+        </TabViewItem.view>
+      </TabViewItem>
+      <TabViewItem title="Second">
+        <TabViewItem.view>
+          <GridLayout>
+            <Label text="Second View" verticalAlignment="center" horizontalAlignment="center"/>
+          </GridLayout>
+        </TabViewItem.view>
+      </TabViewItem>
+    </TabView.items>
+  </TabView>
+</Page>

apps/ui-tests-app/tab-view/tabsBackground.xml

@@ -0,0 +1,20 @@
+<Page>
+  <TabView selectedColor="green">
+    <TabView.items>
+      <TabViewItem title="First">
+        <TabViewItem.view>
+          <GridLayout>
+            <Label text="First View" verticalAlignment="center" horizontalAlignment="center"/>
+          </GridLayout>
+        </TabViewItem.view>
+      </TabViewItem>
+      <TabViewItem title="Second">
+        <TabViewItem.view>
+          <GridLayout>
+            <Label text="Second View" verticalAlignment="center" horizontalAlignment="center"/>
+          </GridLayout>
+        </TabViewItem.view>
+      </TabViewItem>
+    </TabView.items>
+  </TabView>
+</Page>