Merge pull request #433 from NativeScript/feature/app-nav-bar

Action bar

CrossPlatformModules.csproj

@@ -3,7 +3,7 @@
   <PropertyGroup>
     <VisualStudioVersion Condition="'$(VisualStudioVersion)' == ''">12.0</VisualStudioVersion>
     <VSToolsPath Condition="'$(VSToolsPath)' == ''">$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)</VSToolsPath>
-    <TypeScriptToolsVersion>1.4</TypeScriptToolsVersion>
+    <TypeScriptToolsVersion>1.5</TypeScriptToolsVersion>
     <ProjectGuid>{2313F1BF-1F2D-4F11-806A-87927FA6A7C0}</ProjectGuid>
     <ProjectTypeGuids>{349c5851-65df-11da-9384-00065b846f21};{fae04ec0-301f-11d3-bf4b-00c04f79efbc}</ProjectTypeGuids>
     <OutputType>Library</OutputType>
@@ -61,6 +61,21 @@
   <Import Project="$(MSBuildBinPath)\Microsoft.CSharp.targets" />
   <Import Project="$(VSToolsPath)\WebApplications\Microsoft.WebApplication.targets" Condition="'$(VSToolsPath)' != ''" />
   <ItemGroup>
+    <TypeScriptCompile Include="apps\action-bar-demo\pages\action-items-text.ts">
+      <DependentUpon>action-items-text.xml</DependentUpon>
+    </TypeScriptCompile>
+    <TypeScriptCompile Include="apps\action-bar-demo\pages\center-view-stack.ts">
+      <DependentUpon>center-view-stack.xml</DependentUpon>
+    </TypeScriptCompile>
+    <TypeScriptCompile Include="apps\action-bar-demo\pages\center-view-segmented.ts">
+      <DependentUpon>center-view-segmented.xml</DependentUpon>
+    </TypeScriptCompile>
+    <TypeScriptCompile Include="apps\action-bar-demo\pages\center-view.ts">
+      <DependentUpon>center-view.xml</DependentUpon>
+    </TypeScriptCompile>
+    <TypeScriptCompile Include="apps\action-bar-demo\pages\data-binding.ts">
+      <DependentUpon>data-binding.xml</DependentUpon>
+    </TypeScriptCompile>
     <TypeScriptCompile Include="apps\cuteness.unoptimized\app.ts" />
     <TypeScriptCompile Include="apps\cuteness.unoptimized\details-page.ts">
       <DependentUpon>details-page.xml</DependentUpon>
@@ -69,8 +84,25 @@
       <DependentUpon>main-page.xml</DependentUpon>
     </TypeScriptCompile>
     <TypeScriptCompile Include="apps\cuteness.unoptimized\reddit-app-view-model.ts" />
+    <Content Include="apps\action-bar-demo\pages\center-view-stack.xml" />
+    <Content Include="apps\action-bar-demo\pages\center-view-segmented.xml" />
+    <Content Include="apps\action-bar-demo\pages\center-view.xml" />
+    <Content Include="apps\action-bar-demo\pages\data-binding.xml" />
     <Content Include="apps\cuteness.unoptimized\reddit-item-view-model.ts" />
     <TypeScriptCompile Include="apps\cuteness.unoptimized\reddit-model.d.ts" />
+    <TypeScriptCompile Include="apps\action-bar-demo\app.ts" />
+    <TypeScriptCompile Include="apps\action-bar-demo\main-page.ts">
+      <DependentUpon>main-page.xml</DependentUpon>
+    </TypeScriptCompile>
+    <TypeScriptCompile Include="apps\action-bar-demo\pages\navigation-button.ts">
+      <DependentUpon>navigation-button.xml</DependentUpon>
+    </TypeScriptCompile>
+    <TypeScriptCompile Include="apps\action-bar-demo\pages\action-items-icon.ts">
+      <DependentUpon>action-items-icon.xml</DependentUpon>
+    </TypeScriptCompile>
+    <TypeScriptCompile Include="apps\action-bar-demo\pages\page-title-icon.ts">
+      <DependentUpon>page-title-icon.xml</DependentUpon>
+    </TypeScriptCompile>
     <TypeScriptCompile Include="apps\gallery-app\views\list-picker.ts">
       <DependentUpon>list-picker.xml</DependentUpon>
     </TypeScriptCompile>
@@ -156,6 +188,9 @@
     <TypeScriptCompile Include="apps\tests\fps-meter-tests.ts" />
     <TypeScriptCompile Include="apps\tests\trace-tests.ts" />
     <TypeScriptCompile Include="apps\tests\ui-test.ts" />
+    <TypeScriptCompile Include="apps\tests\ui\action-bar\action-bar-tests-common.ts" />
+    <TypeScriptCompile Include="apps\tests\ui\action-bar\action-bar-tests.android.ts" />
+    <TypeScriptCompile Include="apps\tests\ui\action-bar\action-bar-tests.ios.ts" />
     <TypeScriptCompile Include="apps\tests\ui\bindingContext_testPage.ts">
       <DependentUpon>bindingContext_testPage.xml</DependentUpon>
     </TypeScriptCompile>
@@ -391,6 +426,16 @@
     <TypeScriptCompile Include="ui\border\border.ts">
       <DependentUpon>border.d.ts</DependentUpon>
     </TypeScriptCompile>
+    <TypeScriptCompile Include="ui\action-bar\action-bar-common.ts">
+      <DependentUpon>action-bar.d.ts</DependentUpon>
+    </TypeScriptCompile>
+    <TypeScriptCompile Include="ui\action-bar\action-bar.android.ts">
+      <DependentUpon>action-bar.d.ts</DependentUpon>
+    </TypeScriptCompile>
+    <TypeScriptCompile Include="ui\action-bar\action-bar.d.ts" />
+    <TypeScriptCompile Include="ui\action-bar\action-bar.ios.ts">
+      <DependentUpon>action-bar.d.ts</DependentUpon>
+    </TypeScriptCompile>
     <TypeScriptCompile Include="ui\repeater\repeater.ts">
       <DependentUpon>repeater.d.ts</DependentUpon>
     </TypeScriptCompile>
@@ -657,6 +702,19 @@
     <Content Include="apps\cuteness.unoptimized\res\reddit-logo-transparent.png" />
     <Content Include="apps\cuteness.unoptimized\res\reddit-logo.png" />
     <Content Include="apps\cuteness.unoptimized\res\telerik-logo.png" />
+    <Content Include="apps\action-bar-demo\app.css" />
+    <Content Include="apps\action-bar-demo\main-page.xml" />
+    <Content Include="apps\action-bar-demo\pages\action-items-text.xml">
+      <SubType>Designer</SubType>
+    </Content>
+    <Content Include="apps\action-bar-demo\pages\action-items-icon.xml">
+      <SubType>Designer</SubType>
+    </Content>
+    <Content Include="apps\action-bar-demo\pages\page-title-icon.xml">
+      <SubType>Designer</SubType>
+    </Content>
+    <Content Include="apps\action-bar-demo\pages\navigation-button.xml" />
+    <Content Include="apps\action-bar-demo\test-icon.png" />
     <Content Include="apps\gallery-app\content\border.xml" />
     <Content Include="apps\gallery-app\app.css" />
     <Content Include="apps\gallery-app\views\list-picker.xml" />
@@ -1600,6 +1658,7 @@
     <Content Include="apps\cuteness.unoptimized\package.json">
       <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
     </Content>
+    <Content Include="apps\action-bar-demo\package.json" />
     <None Include="js-libs\esprima\LICENSE.BSD" />
     <Content Include="source-control.md" />
     <Content Include="ui\segmented-bar\package.json">
@@ -1623,6 +1682,9 @@
     <Content Include="js-libs\reworkcss-value\LICENSE" />
     <Content Include="js-libs\reworkcss-value\package.json" />
     <Content Include="js-libs\reworkcss-value\Readme.md" />
+    <Content Include="ui\action-bar\package.json">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </Content>
   </ItemGroup>
   <ItemGroup>
     <None Include="build\tslint.json" />

apps/action-bar-demo/app.css

@@ -0,0 +1,13 @@
+Page {
+    background-color: white;
+}
+
+ScrollView {
+    margin: 10;
+}
+
+.title {
+    horizontal-align: center;
+    font-size: 24;
+    margin: 6 0;
+}

apps/action-bar-demo/app.ts

@@ -0,0 +1,7 @@
+import application = require("application");
+application.mainModule = "main-page";
+
+// Needed only for build infrastructure
+application.cssFile = "app.css";
+
+application.start();

apps/action-bar-demo/main-page.ts

@@ -0,0 +1,9 @@
+import observable = require("data/observable");
+import frame = require("ui/frame");
+
+export function itemTap(args: observable.EventData) {
+    frame.topmost().navigate({
+        moduleName: "pages/" + args.object.get("tag"),
+    });
+}
+ 

apps/action-bar-demo/main-page.xml

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<Page>
+  <ScrollView>
+    <StackLayout>
+      <Button tap="itemTap" text="page title and icon" tag="page-title-icon" />
+      <Button tap="itemTap" text="navigation button" tag="navigation-button" />
+      <Button tap="itemTap" text="action items icons" tag="action-items-icon" />
+      <Button tap="itemTap" text="action items text" tag="action-items-text" />
+      <Button tap="itemTap" text="data binding" tag="data-binding" />
+      <Button tap="itemTap" text="center view" tag="center-view" />
+      <Button tap="itemTap" text="center segmented" tag="center-view-segmented" />
+      <Button tap="itemTap" text="center stack" tag="center-view-stack" />
+    </StackLayout>
+  </ScrollView>
+</Page>

apps/action-bar-demo/package.json

@@ -0,0 +1,2 @@
+{ "name" : "action-bar-demo",
+  "main" : "app.js" }

apps/action-bar-demo/pages/action-items-icon.ts

@@ -0,0 +1,12 @@
+export function leftTap(args) {
+    console.log("Left item tapped!");
+}
+
+export function rightTap(args) {
+    console.log("Right item tapped!");
+}
+
+export function popTap(args) {
+    console.log("Popup item tapped!");
+}
+

apps/action-bar-demo/pages/action-items-icon.xml

@@ -0,0 +1,14 @@
+<Page>
+  <Page.actionBar>
+    <ActionBar title="Title">
+      <ActionBar.actionItems>
+        <ActionItem tap="leftTap"  icon="~/test-icon.png" iosPosition="left"/>
+        <ActionItem tap="rightTap" icon="~/test-icon.png" iosPosition="right"/>
+        <ActionItem tap="popTap"   icon="res://ic_test"   iosPosition="right"  androidPosition="popup" text="pop"/>
+      </ActionBar.actionItems>
+    </ActionBar>
+  </Page.actionBar>
+  <StackLayout>
+    <Button text="button" />
+  </StackLayout>
+</Page>

apps/action-bar-demo/pages/action-items-text.ts

@@ -0,0 +1,11 @@
+export function leftTap(args) {
+    console.log("Left item tapped!");
+}
+
+export function rightTap(args) {
+    console.log("Right item tapped!");
+}
+
+export function popTap(args) {
+    console.log("Popup item tapped!");
+}

apps/action-bar-demo/pages/action-items-text.xml

@@ -0,0 +1,14 @@
+<Page>
+  <Page.actionBar>
+    <ActionBar title="Title">
+      <ActionBar.actionItems>
+        <ActionItem text="left"  tap="leftTap"  ios.position="left"/>
+        <ActionItem text="right" tap="rightTap" ios.position="right"/>
+        <ActionItem text="pop"   tap="popTap"   ios.position="right"  android.position="popup"/>
+      </ActionBar.actionItems>
+    </ActionBar>
+  </Page.actionBar>
+  <StackLayout>
+    <Button text="button" />
+  </StackLayout>
+</Page>

apps/action-bar-demo/pages/center-view-segmented.ts

@@ -0,0 +1,8 @@
+import observable = require("data/observable");
+import pages = require("ui/page");
+
+export function pageLoaded(args) {
+    var page = <pages.Page>args.object;
+    var vm = new observable.Observable();
+    page.bindingContext = vm;
+}

apps/action-bar-demo/pages/center-view-segmented.xml

@@ -0,0 +1,18 @@
+<Page loaded="pageLoaded">
+  <Page.actionBar>
+    <ActionBar title="Title">
+      <ActionBar.titleView>
+        <SegmentedBar selectedIndex="{{ index }}">
+          <SegmentedBar.items>
+            <SegmentedBarItem title="Item 1" />
+            <SegmentedBarItem title="Item 2" />
+            <SegmentedBarItem title="Item 3" />
+          </SegmentedBar.items>
+        </SegmentedBar>
+      </ActionBar.titleView>
+    </ActionBar>
+  </Page.actionBar>
+  <StackLayout>
+    <Button text="{{ index }}" />
+  </StackLayout>
+</Page>

apps/action-bar-demo/pages/center-view-stack.ts

@@ -0,0 +1,8 @@
+import observable = require("data/observable");
+import pages = require("ui/page");
+
+export function pageLoaded(args) {
+    var page = <pages.Page>args.object;
+    var vm = new observable.Observable();
+    page.bindingContext = vm;
+}

apps/action-bar-demo/pages/center-view-stack.xml

@@ -0,0 +1,16 @@
+<Page loaded="pageLoaded">
+  <Page.actionBar>
+    <ActionBar title="Title">
+      <ActionBar.titleView>
+        <StackLayout orientation="horizontal">
+          <Button text="1st" />
+          <Button text="2nd" />
+          <Button text="3rd" />
+        </StackLayout>
+      </ActionBar.titleView>
+    </ActionBar>
+  </Page.actionBar>
+  <StackLayout>
+    <Button text="do nothong" />
+  </StackLayout>
+</Page>

apps/action-bar-demo/pages/center-view.ts

@@ -0,0 +1,12 @@
+import observable = require("data/observable");
+import pages = require("ui/page");
+
+export function pageLoaded(args) {
+    var page = <pages.Page>args.object;
+    var vm = new observable.Observable();
+    vm.set("centerText", "center text");
+    vm.set("centerTap", function () {
+        console.log("Center view tapped!");
+    });
+    page.bindingContext = vm;
+}

apps/action-bar-demo/pages/center-view.xml

@@ -0,0 +1,12 @@
+<Page loaded="pageLoaded">
+  <Page.actionBar>
+    <ActionBar title="Title">
+      <ActionBar.titleView>
+        <Button text="{{ centerText }}" tap="{{ centerTap }}" />
+      </ActionBar.titleView>
+    </ActionBar>
+  </Page.actionBar>
+  <StackLayout>
+    <Button text="do nothing" />
+  </StackLayout>
+</Page>

apps/action-bar-demo/pages/data-binding.ts

@@ -0,0 +1,58 @@
+import observable = require("data/observable");
+import view = require("ui/core/view");
+import pages = require("ui/page");
+
+export function pageLoaded(args) {
+    var page = <pages.Page>args.object;
+    var vm = new observable.Observable();
+    vm.set("title", "title");
+    vm.set("navText", "navText");
+    vm.set("firstItemText", "txt");
+    vm.set("secondItemIcon", "res://ic_test");
+    vm.set("mainIcon", "res://ic_test");
+    vm.set("navIcon", "res://ic_test");
+    vm.set("firstItemTap", function () {
+        console.log("firstItemTap");
+    });
+    vm.set("secondItemTap", function () {
+        console.log("secondItemTap");
+    });
+    vm.set("navTap", function () {
+        console.log("navTap");
+    });
+    page.bindingContext = vm;
+}
+var i = 0;
+export function buttonTap(args) {
+    var page = <pages.Page>view.getAncestor(<view.View>args.object, "Page")
+    var vm = page.bindingContext;
+    var icon;
+    if (i % 3 === 0) {
+        icon = "res://ic_test";
+    }
+    else if (i % 3 === 1) {
+        icon = "~/action-bar-demo/test-icon.png";
+    }
+    else if (i % 3 === 2) {
+        icon = undefined;
+    }
+    vm.set("title", "title " + i);
+    vm.set("navText", "navText " + i);
+    vm.set("firstItemText", "txt " + i);
+    vm.set("secondItemIcon", icon);
+    vm.set("mainIcon", icon);
+    vm.set("navIcon", icon);
+    vm.set("firstItemTap", function () {
+        var j = i;
+        console.log("firstItemTap " + j);
+    });
+    vm.set("secondItemTap", function () {
+        var j = i;
+        console.log("secondItemTap " + j);
+    });
+    vm.set("navTap", function () {
+        var j = i;
+        console.log("navTap " + j);
+    });
+    i++;
+}

apps/action-bar-demo/pages/data-binding.xml

@@ -0,0 +1,14 @@
+<Page loaded="pageLoaded">
+  <Page.actionBar>
+    <ActionBar title="{{ title }}" icon="{{ mainIcon }}">
+      <NavigationButton text="{{ navText }}" icon="{{ navIcon }}" tap="{{ navTap }}"/>
+      <ActionBar.actionItems>
+        <ActionItem text="{{ firstItemText }}" tap="{{ firstItemTap }}"  ios.position="left"/>
+        <ActionItem icon="{{ secondItemIcon }}" tap="{{ secondItemTap }}" ios.position="right"/>
+      </ActionBar.actionItems>
+    </ActionBar>
+  </Page.actionBar>
+  <StackLayout>
+    <Button text="button" tap="buttonTap"/>
+  </StackLayout>
+</Page>

apps/action-bar-demo/pages/navigation-button.ts

@@ -0,0 +1,48 @@
+import observable = require("data/observable");
+import pages = require("ui/page");
+import action = require("ui/action-bar");
+import view = require("ui/core/view");
+
+var i = 0;
+export function buttonTap(args: observable.EventData) {
+    var page = <pages.Page>view.getAncestor(<view.View>args.object, "Page")
+
+    var navBtn = new action.NavigationButton();
+    navBtn.text = "nav " + i++;
+    if (i % 3 === 0) {
+        navBtn.icon = "res://ic_test";
+    }
+    else if (i % 3 === 1) {
+        navBtn.icon = "~/test-icon.png";
+    }
+    else if (i % 3 === 2) {
+        // no icon
+    }
+
+    navBtn.on("tap", navTap);
+
+    page.actionBar.navigationButton = navBtn;
+}
+
+var j = 0;
+export function visibilityTap(args: observable.EventData) {
+    var page = <pages.Page>view.getAncestor(<view.View>args.object, "Page")
+
+    if (page.actionBar.android) {
+        if (j % 3 === 0) {
+            page.actionBar.android.iconVisibility = "always";
+        }
+        else if (j % 3 === 1) {
+            page.actionBar.android.iconVisibility = "never";
+        }
+        else if (j % 3 === 2) {
+            page.actionBar.android.iconVisibility = "auto";
+        }
+        j++;
+        console.log("Visibility changed to: " + page.actionBar.android.iconVisibility);
+    }
+}
+
+export function navTap(args: observable.EventData) {
+    console.log("navigation button tapped");
+}

apps/action-bar-demo/pages/navigation-button.xml

@@ -0,0 +1,12 @@
+<Page>
+  <Page.actionBar>
+    <ActionBar title="Navigation Button">
+      <NavigationButton text="go back" icon="res://ic_test" tap="navTap"/>
+    </ActionBar>
+  </Page.actionBar>
+  
+  <StackLayout>
+    <Button text="button" tap="buttonTap"/>
+    <Button text="change icon visibility" tap="visibilityTap"/>
+  </StackLayout>
+</Page>

apps/action-bar-demo/pages/page-title-icon.ts

@@ -0,0 +1,40 @@
+import observable = require("data/observable");
+import pages = require("ui/page");
+import view = require("ui/core/view");
+
+var i = 0;
+export function buttonTap(args: observable.EventData) {
+    var page = <pages.Page>view.getAncestor(<view.View>args.object, "Page")
+    page.actionBar.title = "Title changed " + i++;
+
+    if (page.actionBar.android) {
+        if (i % 3 === 0) {
+            page.actionBar.android.icon = "res://ic_test";
+        }
+        else if (i % 3 === 1) {
+            page.actionBar.android.icon = "~/test-icon.png";
+        }
+        else if (i % 3 === 2) {
+            page.actionBar.android.icon = undefined;
+        }
+    }
+}
+
+var j = 0;
+export function visibilityTap(args: observable.EventData) {
+    var page = <pages.Page>view.getAncestor(<view.View>args.object, "Page")
+
+    if (page.actionBar.android) {
+        if (j % 3 === 0) {
+            page.actionBar.android.iconVisibility = "always";
+        }
+        else if (j % 3 === 1) {
+            page.actionBar.android.iconVisibility = "never";
+        }
+        else if (j % 3 === 2) {
+            page.actionBar.android.iconVisibility = "auto";
+        }
+        j++;
+        console.log("Visibility changed to: " + page.actionBar.android.iconVisibility);
+    }
+}

apps/action-bar-demo/pages/page-title-icon.xml

@@ -0,0 +1,9 @@
+<Page>
+  <Page.actionBar>
+    <ActionBar title="Page Title" icon="res://ic_test"/>
+  </Page.actionBar>
+  <StackLayout>
+    <Button text="button" tap="buttonTap"/>
+    <Button text="change main icon visibility" tap="visibilityTap"/>
+  </StackLayout>
+</Page>

apps/tests/pages/page16.ts

@@ -6,38 +6,38 @@ import frame = require("ui/frame");
 export function createPage() {
     var page = new pageModule.Page();
 
-    var iconItem = new pageModule.MenuItem();
-    iconItem.text = "TEST";
+    //var iconItem = new pageModule.MenuItem();
+    //iconItem.text = "TEST";
 
-    iconItem.icon = "~/app" + "/tests" + "/test-icon.png"; // use + to stop regex replace during build
-    iconItem.on("tap", () => {
-        console.log("Icon item tapped");
-    });
-    page.optionsMenu.addItem(iconItem);
+    //iconItem.icon = "~/app" + "/tests" + "/test-icon.png"; // use + to stop regex replace during build
+    //iconItem.on("tap", () => {
+    //    console.log("Icon item tapped");
+    //});
+    //page.optionsMenu.addItem(iconItem);
 
-    var textItem = new pageModule.MenuItem();
-    textItem.text = "SAVE";
-    textItem.on("tap", () => {
-        console.log("Save item tapped");
-    });
-    page.optionsMenu.addItem(textItem);
+    //var textItem = new pageModule.MenuItem();
+    //textItem.text = "SAVE";
+    //textItem.on("tap", () => {
+    //    console.log("Save item tapped");
+    //});
+    //page.optionsMenu.addItem(textItem);
 
     var stackLayout = new stackModule.StackLayout();
-    var count = 0;
+    //var count = 0;
     var btn1 = new buttonModule.Button();
     btn1.text = "add item";
-    btn1.on("tap", () => {
-        console.log("adding menu item");
+    //btn1.on("tap", () => {
+    //    console.log("adding menu item");
 
-        var newItem = new pageModule.MenuItem();
-        var text =  "item " + count;
-        newItem.text = text
-        newItem.on("tap", () => {
-            console.log("ITEM [" + text + "] tapped");
-        });
-        page.optionsMenu.addItem(newItem);
-        count++;
-    });
+    //    var newItem = new pageModule.MenuItem();
+    //    var text =  "item " + count;
+    //    newItem.text = text
+    //    newItem.on("tap", () => {
+    //        console.log("ITEM [" + text + "] tapped");
+    //    });
+    //    page.optionsMenu.addItem(newItem);
+    //    count++;
+    //});
 
     stackLayout.addChild(btn1);
 

apps/tests/pages/page17.ts

@@ -1,20 +1,39 @@
 import observable = require("data/observable");
+import action = require("ui/action-bar");
+
 import pages = require("ui/page");
 
+var currentPage:pages.Page;
 // Event handler for Page "loaded" event attached in main-page.xml
 export function pageLoaded(args: observable.EventData) {
     // Get the event sender
     var page = <pages.Page>args.object;
-
-    var textItem = new pages.MenuItem();
+    currentPage = page;
+    var textItem = new action.ActionItem();
     textItem.text = "from loaded";
     textItem.on("tap", () => {
         console.log("item added in page.loaded tapped!!!");
     });
-    page.optionsMenu.addItem(textItem);
+    page.actionBar.actionItems.addItem(textItem);
 }
 
 export function optionTap(args) {
     console.log("item added form XML tapped!!!");
 }
+var i = 0;
+export function buttonTap(args: observable.EventData) {
+    currentPage.actionBar.title = "hi " + i++;
+
+    if (currentPage.actionBar.android) {
+        if (i % 3 === 0) {
+            currentPage.actionBar.android.icon = "res://ic_test";
+        }
+        else if (i % 3 === 1) {
+            currentPage.actionBar.android.icon = "~/test-icon.png";
+        }
+        else if (i % 3 === 2) {
+            currentPage.actionBar.android.icon = undefined;
+        }
+    }
+}
 

apps/tests/pages/page17.xml

@@ -1,9 +1,6 @@
-<Page loaded="pageLoaded">
-  <Page.optionsMenu>
-    <MenuItem text="test" tap="optionTap" android.position="popup" />
-    <MenuItem text="with icon" tap="optionTap" icon="~/app/test-icon.png" android.position="actionBar" />
-  </Page.optionsMenu>
+<Page loaded="pageLoaded" title="MyPageTitle" icon="res://icon">
+ 
   <StackLayout>
-    <Button text="button" />
+    <Button text="button" tap="buttonTap"/>
   </StackLayout>
 </Page>

apps/tests/testRunner.ts

@@ -23,6 +23,7 @@ function isRunningOnEmulator(): boolean {
 }
 
 export var allTests = {};
+allTests["ACTION-BAR"] = require("./ui/action-bar/action-bar-tests");
 allTests["XML-DECLARATION"] = require("./xml-declaration/xml-declaration-tests");
 allTests["APPLICATION"] = require("./application-tests");
 allTests["DOCKLAYOUT"] = require("./layouts/dock-layout-tests");

apps/tests/ui/action-bar/action-bar-tests-common.ts

@@ -0,0 +1,136 @@
+import TKUnit = require("../../TKUnit");
+import LabelModule = require("ui/label");
+import helper = require("../helper");
+import builder = require("ui/builder");
+import actionBar = require("ui/action-bar");
+import button = require("ui/button");
+import PageModule = require("ui/page");
+
+export function test_actionItem_inherit_bindingContext() {
+    var page: PageModule.Page;
+    var label: LabelModule.Label;
+    var context = { text: "item" };
+
+    var pageFactory = function (): PageModule.Page {
+        page = new PageModule.Page();
+        page.bindingContext = context;
+        var actionItem = new actionBar.ActionItem();
+
+        actionItem.bind({
+            sourceProperty: "text",
+            targetProperty: "text"
+        });
+
+        page.actionBar.actionItems.addItem(actionItem);
+
+        label = new LabelModule.Label();
+        label.text = "Text";
+        page.content = label;
+        return page;
+    };
+
+    helper.navigate(pageFactory);
+
+    try {
+        TKUnit.assertEqual(page.actionBar.actionItems.getItemAt(0).text, "item", "actionItem.text");
+    }
+    finally {
+        helper.goBack();
+    }
+}
+
+export function test_actionBar_inherit_bindingContext_inXML() {
+    var p = <PageModule.Page>builder.parse(
+        "<Page> <Page.actionBar> <ActionBar title=\"{{ myProp }} \" /> </Page.actionBar> </Page>");
+    p.bindingContext = { myProp: "success" };
+
+    TKUnit.assertEqual(p.actionBar.title, "success", "actionBar.title");
+};
+
+export function test_actionItem_inherit_bindingContext_inXML() {
+    var p = <PageModule.Page>builder.parse(
+        "<Page> <Page.actionBar> <ActionBar> <ActionBar.actionItems>" +
+        "<ActionItem text=\"{{ myProp }} \" />" +
+        "</ActionBar.actionItems> </ActionBar> </Page.actionBar> </Page>");
+    p.bindingContext = { myProp: "success" };
+
+    var actionItem = p.actionBar.actionItems.getItemAt(0);
+
+    TKUnit.assertEqual(actionItem.text, "success", "actionItem.text");
+};
+
+export function test_navigationButton_inherit_bindingContext_inXML() {
+    var p = <PageModule.Page>builder.parse(
+        "<Page> <Page.actionBar> <ActionBar>" +
+        "<NavigationButton text=\"{{ myProp }} \" />" +
+        "</ActionBar> </Page.actionBar> </Page>");
+    p.bindingContext = { myProp: "success" };
+
+    var navButton = p.actionBar.navigationButton;
+    TKUnit.assertEqual(navButton.text, "success", "actionItem.text");
+};
+
+export function test_titleView_inherit_bindingContext_inXML() {
+    var p = <PageModule.Page>builder.parse(
+        "<Page> <Page.actionBar> <ActionBar> <ActionBar.titleView>" +
+        "<Button text=\"{{ myProp }} \" />" +
+        "</ActionBar.titleView> </ActionBar> </Page.actionBar> </Page>");
+    p.bindingContext = { myProp: "success" };
+
+    var centerBtn = <button.Button>p.actionBar.titleView;
+    TKUnit.assert(centerBtn instanceof button.Button, "cneterView not loaded correctly");
+    TKUnit.assertEqual(centerBtn.text, "success", "actionItem.text");
+};
+
+export function test_titleView_inXML() {
+    var p = <PageModule.Page>builder.parse(
+        "<Page> <Page.actionBar> <ActionBar> <ActionBar.titleView>" +
+        "<Button/>" +
+        "</ActionBar.titleView> </ActionBar> </Page.actionBar> </Page>");
+
+    var centerBtn = <button.Button>p.actionBar.titleView;
+    TKUnit.assert(centerBtn instanceof button.Button, "cneterView not loaded correctly");
+};
+
+export function test_titleView_inXML_short_definition() {
+    var p = <PageModule.Page>builder.parse(
+        "<Page> <Page.actionBar> <ActionBar>" +
+        "<Button/>" +
+        "</ActionBar> </Page.actionBar> </Page>");
+
+    var centerBtn = <button.Button>p.actionBar.titleView;
+    TKUnit.assert(centerBtn instanceof button.Button, "cneterView not loaded correctly");
+};
+
+export function test_Setting_ActionItems_doesnt_thrown() {
+
+    var page: PageModule.Page;
+    var label: LabelModule.Label;
+    var gotException = false;
+
+    var pageFactory = function (): PageModule.Page {
+        page = new PageModule.Page();
+        var actionItem = new actionBar.ActionItem();
+        actionItem.text = "Item";
+        page.actionBar.actionItems.addItem(actionItem);
+
+        label = new LabelModule.Label();
+        label.text = "Text";
+        page.content = label;
+        return page;
+    };
+
+    try {
+        helper.navigate(pageFactory);
+    }
+    catch (e) {
+        gotException = true;
+    }
+
+    try {
+        TKUnit.assert(!gotException, "Expected: false, Actual: " + gotException);
+    }
+    finally {
+        helper.goBack();
+    }
+}

apps/tests/ui/action-bar/action-bar-tests.android.ts

@@ -0,0 +1,4 @@
+import actionTestsCommon = require("./action-bar-tests-common");
+
+declare var exports;
+require("utils/module-merge").merge(actionTestsCommon, exports);

apps/tests/ui/action-bar/action-bar-tests.ios.ts

@@ -0,0 +1,84 @@
+import actionTestsCommon = require("./action-bar-tests-common");
+import PageModule = require("ui/page");
+import TKUnit = require("../../TKUnit");
+import LabelModule = require("ui/label");
+import helper = require("../helper");
+import view = require("ui/core/view");
+import actionBar = require("ui/action-bar");
+
+declare var exports;
+require("utils/module-merge").merge(actionTestsCommon, exports);
+
+export function test_NavBar_isVisible_when_MenuItems_areSet() {
+
+    var page: PageModule.Page;
+    var label: LabelModule.Label;
+    var navBarIsVisible = false;
+
+    var handler = function (data) {
+        page.off(PageModule.Page.navigatedToEvent, handler);
+        navBarIsVisible = (<any>page.frame.ios).showNavigationBar;
+    }
+
+    var pageFactory = function (): PageModule.Page {
+        page = new PageModule.Page();
+        page.on(PageModule.Page.navigatedToEvent, handler);
+
+        var mi = new actionBar.ActionItem();
+        mi.text = "B";
+        page.actionBar.actionItems.addItem(mi);
+        label = new LabelModule.Label();
+        label.text = "Text";
+        page.content = label;
+        return page;
+    };
+
+    helper.navigate(pageFactory);
+
+    try {
+        TKUnit.assert(navBarIsVisible, "Expected: true, Actual: " + navBarIsVisible);
+    }
+    finally {
+        page.off(view.View.loadedEvent, handler);
+        helper.goBack();
+    }
+}
+
+export function test_NavBarItemsAreClearedFromNativeWhenClearedFromNativeScript() {
+    var page: PageModule.Page;
+    var label: LabelModule.Label;
+
+    var handler = function (data) {
+        page.off(PageModule.Page.navigatedToEvent, handler);
+        var menuItems = page.actionBar.actionItems.getItems();
+        var i;
+        for (i = menuItems.length - 1; i >= 0; i--) {
+            page.actionBar.actionItems.removeItem(menuItems[i]);
+        }
+    }
+
+    var pageFactory = function (): PageModule.Page {
+        page = new PageModule.Page();
+        page.on(PageModule.Page.navigatedToEvent, handler);
+
+        var mi = new actionBar.ActionItem();
+        mi.text = "B";
+        page.actionBar.actionItems.addItem(mi);
+        label = new LabelModule.Label();
+        label.text = "Text";
+        page.content = label;
+        return page;
+    };
+
+    helper.navigate(pageFactory);
+
+    try {
+        var navigationItem: UINavigationItem = ((<UIViewController>page.ios).navigationItem);
+        var rightBarButtonItemsCount = navigationItem.rightBarButtonItems ? navigationItem.rightBarButtonItems.count : 0;
+        TKUnit.assertEqual(rightBarButtonItemsCount, 0, "After remove all items native items should be 0.");
+    }
+    finally {
+        page.off(view.View.loadedEvent, handler);
+        helper.goBack();
+    }
+}

apps/tests/ui/helper.ts

@@ -7,7 +7,7 @@ import TKUnit = require("../TKUnit");
 import utils = require("utils/utils");
 import types = require("utils/types");
 import styling = require("ui/styling");
-import platform = require("platform"); 
+import platform = require("platform");
 
 var DELTA = 0.1;
 
@@ -25,7 +25,7 @@ export function do_PageTest(test: (views: Array<view.View>) => void, content: vi
     navigate(pageFactory);
 
     try {
-        test([newPage, content, secondView, thirdView]);
+        test([newPage, content, secondView, thirdView, newPage.actionBar]);
     }
     finally {
         goBack();
@@ -45,7 +45,7 @@ export function do_PageTest_WithButton(test: (views: Array<view.View>) => void)
     navigate(pageFactory);
 
     try {
-        test([newPage, btn]);
+        test([newPage, btn, newPage.actionBar]);
     }
     finally {
         goBack();
@@ -69,7 +69,7 @@ export function do_PageTest_WithStackLayout_AndButton(test: (views: Array<view.V
     navigate(pageFactory);
 
     try {
-        test([newPage, stackLayout, btn]);
+        test([newPage, stackLayout, btn, newPage.actionBar]);
     }
     finally {
         goBack();
@@ -94,14 +94,14 @@ export function do_PageTest_WithStackLayout_AndButton_NavigatedBack(test: (views
     navigate(pageFactory);
 
     try {
-        test([newPage, stackLayout, btn]);
+        test([newPage, stackLayout, btn, newPage.actionBar]);
     }
     finally {
         goBack();
     }
 
     try {
-        assert([newPage, stackLayout, btn]);
+        assert([newPage, stackLayout, btn, newPage.actionBar]);
     }
     finally {
         // wait to ensure asynchronous navigation
@@ -198,7 +198,7 @@ export function buildUIWithWeakRefAndInteract<T extends view.View>(createFunc: (
     }
 }
 
-export function navigate(pageFactory: () => page.Page,  navigationContext?: any) {
+export function navigate(pageFactory: () => page.Page, navigationContext?: any) {
     var currentPage = frame.topmost().currentPage;
     frame.topmost().navigate({ create: pageFactory, animated: false, context: navigationContext });
     TKUnit.waitUntilReady(() => { return frame.topmost().currentPage !== currentPage; });

apps/tests/ui/page/page-tests-common.ts

@@ -27,7 +27,6 @@ import LabelModule = require("ui/label");
 import stackLayoutModule = require("ui/layouts/stack-layout");
 import helper = require("../helper");
 import view = require("ui/core/view");
-import builder = require("ui/builder");
 
 export function addLabelToPage(page: PageModule.Page, text?: string) {
     var label = new LabelModule.Label();
@@ -35,82 +34,6 @@ export function addLabelToPage(page: PageModule.Page, text?: string) {
     page.content = label;
 }
 
-export function test_menuItem_inherit_bindingContext() {
-
-    var page: PageModule.Page;
-    var label: LabelModule.Label;
-    var context = { text: "item" };
-
-    var pageFactory = function (): PageModule.Page {
-        page = new PageModule.Page();
-        page.bindingContext = context;
-        var menuItem = new PageModule.MenuItem();
-
-        menuItem.bind({
-            sourceProperty: "text",
-            targetProperty: "text"
-        });
-
-        page.optionsMenu.addItem(menuItem);
-
-        label = new LabelModule.Label();
-        label.text = "Text";
-        page.content = label;
-        return page;
-    };
-
-    helper.navigate(pageFactory);
-
-    try {
-        TKUnit.assertEqual(page.optionsMenu.getItemAt(0).text, "item", "menuItem.text should equal to 'item'");
-    }
-    finally {
-        helper.goBack();
-    }
-}
-
-export function test_menuItem_inherit_bindingContext_inXML() {
-    var p = <PageModule.Page>builder.parse("<Page><Page.optionsMenu><MenuItem text=\"{{ myProp }} \" /></Page.optionsMenu></Page>");
-    p.bindingContext = { myProp: "success" };
-
-    var menuItem = p.optionsMenu.getItemAt(0);
-
-    TKUnit.assertEqual(menuItem.text, "success", "menuItem.text");
-};
-
-export function test_Setting_OptionsMenu_doesnt_thrown() {
-
-    var page: PageModule.Page;
-    var label: LabelModule.Label;
-    var gotException = false;
-
-    var pageFactory = function (): PageModule.Page {
-        page = new PageModule.Page();
-        var menuItem = new PageModule.MenuItem();
-        menuItem.text = "Item";
-        page.optionsMenu.addItem(menuItem);
-
-        label = new LabelModule.Label();
-        label.text = "Text";
-        page.content = label;
-        return page;
-    };
-
-    try {
-        helper.navigate(pageFactory);
-    }
-    catch (e) {
-        gotException = true;
-    }
-
-    try {
-        TKUnit.assert(!gotException, "Expected: false, Actual: " + gotException);
-    }
-    finally {
-        helper.goBack();
-    }
-}
-
 export function test_AfterPageLoaded_is_called_NativeInstance_is_created() {
 
     var page: PageModule.Page;

apps/tests/ui/page/page-tests.ios.ts

@@ -3,7 +3,6 @@ import PageModule = require("ui/page");
 import TKUnit = require("../../TKUnit");
 import LabelModule = require("ui/label");
 import helper = require("../helper");
-import view = require("ui/core/view");
 
 declare var exports;
 require("utils/module-merge").merge(PageTestCommon, exports);
@@ -25,77 +24,3 @@ export function test_NavigateToNewPage_InnerControl() {
     TKUnit.assert(label.android === undefined, "InnerControl.android should be undefined after navigate back.");
     TKUnit.assert(label.isLoaded === false, "InnerControl.isLoaded should become false after navigating back");
 }
-
-export function test_NavBar_isVisible_when_MenuItems_areSet() {
-
-    var page: PageModule.Page;
-    var label: LabelModule.Label;
-    var navBarIsVisible = false;
-
-    var handler = function (data) {
-        page.off(PageModule.Page.navigatedToEvent, handler);
-        navBarIsVisible = (<any>page.frame.ios).showNavigationBar;
-    }
-
-    var pageFactory = function (): PageModule.Page {
-        page = new PageModule.Page();
-        page.on(PageModule.Page.navigatedToEvent, handler);
-
-        var mi = new PageModule.MenuItem();
-        mi.text = "B";
-        page.optionsMenu.addItem(mi);
-        label = new LabelModule.Label();
-        label.text = "Text";
-        page.content = label;
-        return page;
-    };
-
-    helper.navigate(pageFactory);
-
-    try {
-        TKUnit.assert(navBarIsVisible, "Expected: true, Actual: " + navBarIsVisible);
-    }
-    finally {
-        page.off(view.View.loadedEvent, handler);
-        helper.goBack();
-    }
-}
-
-export function test_NavBarItemsAreClearedFromNativeWhenClearedFromNativeScript() {
-    var page: PageModule.Page;
-    var label: LabelModule.Label;
-
-    var handler = function (data) {
-        page.off(PageModule.Page.navigatedToEvent, handler);
-        var menuItems = page.optionsMenu.getItems();
-        var i;
-        for (i = menuItems.length - 1; i >= 0; i--) {
-            page.optionsMenu.removeItem(menuItems[i]);
-        }
-    }
-
-    var pageFactory = function (): PageModule.Page {
-        page = new PageModule.Page();
-        page.on(PageModule.Page.navigatedToEvent, handler);
-
-        var mi = new PageModule.MenuItem();
-        mi.text = "B";
-        page.optionsMenu.addItem(mi);
-        label = new LabelModule.Label();
-        label.text = "Text";
-        page.content = label;
-        return page;
-    };
-
-    helper.navigate(pageFactory);
-
-    try {
-        var navigationItem: UINavigationItem = ((<UIViewController>page.ios).navigationItem);
-        var rightBarButtonItemsCount = navigationItem.rightBarButtonItems ? navigationItem.rightBarButtonItems.count : 0;
-        TKUnit.assertEqual(rightBarButtonItemsCount, 0, "After remove all items native items should be 0.");
-    }
-    finally {
-        page.off(view.View.loadedEvent, handler);
-        helper.goBack();
-    }
-}

apps/tests/ui/view/view-tests-common.ts

@@ -27,7 +27,8 @@ export var test_eachDescendant = function () {
         }
 
         viewModule.eachDescendant(frame.topmost(), callback);
-        TKUnit.assert(counter === 2);
+        // Descendants: page, actionBar, button
+        TKUnit.assertEqual(counter, 3, "descendants");
     }
 
     helper.do_PageTest_WithButton(test);
@@ -126,18 +127,18 @@ export var test_event_LoadedUnloaded_IsRaised = function () {
         var layoutUnloaded = false,
             buttonUnloaded = false;
 
-        views[1].on(viewModule.View.unloadedEvent,(data) => {
+        views[1].on(viewModule.View.unloadedEvent, (data) => {
             layoutUnloaded = true;
         });
 
-        views[2].on(viewModule.View.unloadedEvent,(data) => {
+        views[2].on(viewModule.View.unloadedEvent, (data) => {
             buttonUnloaded = true;
         });
 
         var newButton = new button.Button(),
             buttonLoaded = false;
 
-        newButton.on(viewModule.View.loadedEvent,(data) => {
+        newButton.on(viewModule.View.loadedEvent, (data) => {
             buttonLoaded = true;
         });
 
@@ -597,7 +598,7 @@ function _createLabelWithBorder(): viewModule.View {
 
 export var testIsVisible = function () {
     var lbl = new label.Label();
-    
+
     helper.buildUIAndRunTest(lbl, function (views: Array<viewModule.View>) {
         TKUnit.assert(lbl.visibility === enums.Visibility.visible, "Actual: " + lbl.visibility + "; Expected: " + enums.Visibility.visible);
         TKUnit.assert(lbl._isVisible, "Actual: " + lbl._isVisible + "; Expected: true;");

apps/tests/ui/view/view-tests.android.ts

@@ -21,7 +21,8 @@ export var test_event_onAttached_IsRaised = function () {
     trace.addEventListener(listener);
 
     var test = function (views: Array<view.View>) {
-        TKUnit.assertEqual(listener.receivedEvents.length, views.length, "onAttached calls");
+        // 4 onAttached calls: page, stack, button, actionBar
+        TKUnit.assertEqual(listener.receivedEvents.length, 4, "onAttached calls");
 
         var i;
         for (i = 0; i < listener.receivedEvents.length; i++) {
@@ -58,7 +59,8 @@ export var test_event_onContextChanged_IsRaised_WhenAttached = function () {
     trace.addEventListener(listener);
 
     var test = function (views: Array<view.View>) {
-        TKUnit.assertEqual(listener.receivedEvents.length, views.length, "onContextChanged calls");
+        // 4 onContextChanged calls: page, stack, button, actionBar
+        TKUnit.assertEqual(listener.receivedEvents.length, 4, "onContextChanged calls");
 
         var i;
         for (i = 0; i < listener.receivedEvents.length; i++) {
@@ -91,7 +93,7 @@ export var test_event_onContextChanged_IsRaised_WhenAttached_Dynamically = funct
 }
 
 export var test_event_onDetached_IsRaised = function () {
-    var cachedViews;
+    var cachedViews: Array<view.View>;
     var listener: Listener;
 
     var test = function (views: Array<view.View>) {
@@ -104,13 +106,18 @@ export var test_event_onDetached_IsRaised = function () {
 
     helper.do_PageTest_WithStackLayout_AndButton(test);
 
-    TKUnit.assertEqual(listener.receivedEvents.length, cachedViews.length, "onDetached calls");
+    // 4 detached calls: page, stack, button, actionBar
+    TKUnit.assertEqual(listener.receivedEvents.length, 4, "onDetached calls");
 
     var i
     var j;
     // _onDetached event is propagated to nested children first
-    for (i = 0, j = listener.receivedEvents.length - 1; i < listener.receivedEvents.length; i++, j--) {
-        TKUnit.assertEqual(listener.receivedEvents[i].sender, cachedViews[j]);
+    for (i = 0, j = listener.receivedEvents.length - 1; i < listener.receivedEvents.length; i++ , j--) {
+        // check the sender and remove
+        var index = cachedViews.indexOf(<view.View>listener.receivedEvents[i].sender);
+        TKUnit.assert(index >= 0, "_onDetached called for unknown sender");
+        cachedViews.splice(index, 1);
+
         TKUnit.assertEqual(listener.receivedEvents[i].name, "_onDetached");
     }
 
@@ -146,14 +153,14 @@ export var test_events_onDetachedAndRemovedFromNativeVisualTree_AreRaised_WhenNa
     };
 
     var assert = function (views: Array<view.View>) {
-        // one for the Button, one for the StackLayout and one for the Page.
-
-        TKUnit.assertEqual(onDetachedListener.receivedEvents.length, 3, "onDetached calls");
+        // 4 onDetached calls: page, stack, button, actionBar
+        TKUnit.assertEqual(onDetachedListener.receivedEvents.length, 4, "onDetached calls");
 
         TKUnit.assertEqual(onDetachedListener.receivedEvents[0].name, "_onDetached");
-        TKUnit.assertEqual(onDetachedListener.receivedEvents[0].sender, views[2]);
-        TKUnit.assertEqual(onDetachedListener.receivedEvents[1].sender, views[1]);
-        TKUnit.assertEqual(onDetachedListener.receivedEvents[2].sender, views[0]);
+        TKUnit.assertEqual(onDetachedListener.receivedEvents[0].sender, views[2]); // Button
+        TKUnit.assertEqual(onDetachedListener.receivedEvents[1].sender, views[1]); // Stack
+        TKUnit.assertEqual(onDetachedListener.receivedEvents[2].sender, views[3]); // ActionBar
+        TKUnit.assertEqual(onDetachedListener.receivedEvents[3].sender, views[0]); // Page
 
         // this is an event fired from CustomLayoutView when a child is removed from the native visual tree
         // therefore this event is fired for StackLayout and Button (which is inside StackLayout).
@@ -233,7 +240,7 @@ export var test_StylePropertiesDefaultValuesCache = function () {
 
         var defaultLabelFontSize = (<android.widget.TextView>(testLabel.android)).getTextSize();
         var defaultButtonFontSize = (<android.widget.Button>(testButton.android)).getTextSize();
-        
+
         testLabel.style.fontSize = testValue;
         testButton.style.fontSize = testValue;
 
@@ -248,7 +255,7 @@ export var test_StylePropertiesDefaultValuesCache = function () {
 
         actualLabelTextSize = (<android.widget.TextView>(testLabel.android)).getTextSize();
         actualButtonTextSize = (<android.widget.Button>(testButton.android)).getTextSize();
-        
+
         TKUnit.assert(actualLabelTextSize === defaultLabelFontSize, "Label text size should be default!");
         TKUnit.assert(actualButtonTextSize === defaultButtonFontSize, "Button text size should be default!");
     };

ui/action-bar/action-bar-common.ts

@@ -0,0 +1,290 @@
+import dts = require("ui/action-bar");
+import pages = require("ui/page");
+import bindable = require("ui/core/bindable");
+import dependencyObservable = require("ui/core/dependency-observable");
+import enums = require("ui/enums");
+import proxy = require("ui/core/proxy");
+import view = require("ui/core/view");
+import style = require("ui/styling/style");
+import observable = require("ui/core/dependency-observable");
+
+var ACTION_ITEMS = "actionItems";
+
+export module knownCollections {
+    export var actionItems = "actionItems";
+}
+
+function onTitlePropertyChanged(data: dependencyObservable.PropertyChangeData) {
+    var actionBar = <ActionBar>data.object;
+    actionBar._onTitlePropertyChanged();
+}
+
+export class ActionBar extends view.View implements dts.ActionBar {
+    public static titleProperty = new dependencyObservable.Property("title", "ActionBar", new proxy.PropertyMetadata(undefined, dependencyObservable.PropertyMetadataSettings.None, onTitlePropertyChanged));
+    
+    private _actionItems: ActionItems;
+    private _navigationButton: NavigationButton;
+    private _page: pages.Page;
+    private _titleView: view.View;
+
+    get title(): string {
+        return this._getValue(ActionBar.titleProperty);
+    }
+    set title(value: string) {
+        this._setValue(ActionBar.titleProperty, value);
+    }
+
+    get navigationButton(): NavigationButton {
+        return this._navigationButton;
+    }
+    set navigationButton(value: NavigationButton) {
+        if (this._navigationButton !== value) {
+            if (this._navigationButton) {
+                this._navigationButton.actionBar = undefined;
+            }
+
+            this._navigationButton = value;
+
+            if (this._navigationButton) {
+                this._navigationButton.actionBar = this;
+            }
+
+            this.update();
+        }
+    }
+
+    get actionItems(): ActionItems {
+        return this._actionItems;
+    }
+    set actionItems(value: ActionItems) {
+        throw new Error("actionItems property is read-only");
+    }
+
+    get titleView(): view.View {
+        return this._titleView;
+    }
+    set titleView(value: view.View) {
+        if (this._titleView !== value) {
+            if (this._titleView) {
+                this._removeView(this._titleView);
+                this._titleView.style._resetValue(style.horizontalAlignmentProperty, observable.ValueSource.Inherited);
+                this._titleView.style._resetValue(style.verticalAlignmentProperty, observable.ValueSource.Inherited);
+            }
+
+            this._titleView = value;
+
+            if (this._titleView) {
+                this._titleView.style._setValue(style.horizontalAlignmentProperty, enums.HorizontalAlignment.center, observable.ValueSource.Inherited);
+                this._titleView.style._setValue(style.verticalAlignmentProperty, enums.VerticalAlignment.center, observable.ValueSource.Inherited);
+                this._addView(this._titleView);
+            }
+
+            this.update();
+        }
+    }
+
+    get page(): pages.Page {
+        return this._page;
+    }
+    set page(value: pages.Page) {
+        this._page = value;
+
+        this.unbind("bindingContext");
+        this.bind({
+            sourceProperty: "bindingContext",
+            targetProperty: "bindingContext"
+        }, this._page);
+    }
+
+    get android(): dts.AndroidActionBarSettings {
+        return undefined;
+    }
+
+    get _childrenCount(): number {
+        return this.titleView ? 1 : 0;
+    }
+
+    constructor() {
+        super();
+        this._actionItems = new ActionItems(this);
+    }
+
+    public static onTitleChanged
+
+    public update() {
+        // 
+    }
+
+    public _onTitlePropertyChanged() {
+        //
+    }
+
+    public _updateAndroid(menu: android.view.IMenu) {
+        //
+    }
+
+    public _onAndroidItemSelected(itemId: number): boolean {
+        return false;
+    }
+
+    public _addArrayFromBuilder(name: string, value: Array<any>) {
+        if (name === ACTION_ITEMS) {
+            this.actionItems.setItems(value);
+        }
+    }
+
+    public _addChildFromBuilder(name: string, value: any) {
+        if (value instanceof NavigationButton) {
+            this.navigationButton = value;
+        }
+
+        if (value instanceof view.View) {
+            this.titleView = value;
+        }
+    }
+
+    public _onBindingContextChanged(oldValue: any, newValue: any) {
+        super._onBindingContextChanged(oldValue, newValue);
+        if (this._navigationButton) {
+            this._navigationButton.bindingContext = newValue;
+        }
+
+        this._actionItems.getItems().forEach((item, i, arr) => { item.bindingContext = newValue; });
+    }
+
+    public _eachChildView(callback: (child: view.View) => boolean) {
+        if (this.titleView) {
+            callback(this.titleView);
+        }
+    }
+
+    public shouldShow(): boolean {
+        if (this.title ||
+            (this.android && this.android.icon) ||
+            this.navigationButton ||
+            this.actionItems.getItems().length > 0) {
+
+            return true;
+        }
+
+        return false;
+    }
+}
+
+export class ActionItems implements dts.ActionItems {
+    private _items: Array<dts.ActionItem> = new Array<dts.ActionItem>();
+    private _actionBar: ActionBar;
+
+    constructor(actionBar: ActionBar) {
+        this._actionBar = actionBar;
+    }
+
+    public addItem(item: dts.ActionItem): void {
+        if (!item) {
+            throw new Error("Cannot add empty item");
+        }
+
+        this._items.push(item);
+        item.actionBar = this._actionBar;
+        this.invalidate();
+    }
+
+    public removeItem(item: dts.ActionItem): void {
+        if (!item) {
+            throw new Error("Cannot remove empty item");
+        }
+
+        var itemIndex = this._items.indexOf(item);
+        if (itemIndex < 0) {
+            throw new Error("Cannot find item to remove");
+        }
+
+        this._items.splice(itemIndex, 1);
+        item.actionBar = undefined;
+        this.invalidate();
+    }
+
+    public getItems(): Array<dts.ActionItem> {
+        return this._items.slice();
+    }
+
+    public getItemAt(index: number): dts.ActionItem {
+        if (index < 0 || index >= this._items.length) {
+            return undefined;
+        }
+
+        return this._items[index];
+    }
+
+    public setItems(items: Array<dts.ActionItem>) {
+        // Remove all existing items
+        while (this._items.length > 0) {
+            this.removeItem(this._items[this._items.length - 1]);
+        }
+
+        // Add new items
+        for (var i = 0; i < items.length; i++) {
+            this.addItem(items[i]);
+        }
+
+        this.invalidate();
+    }
+
+    private invalidate() {
+        if (this._actionBar) {
+            this._actionBar.update();
+        }
+    }
+}
+
+export class ActionItemBase extends bindable.Bindable implements dts.ActionItemBase {
+    public static tapEvent = "tap";
+
+    public static textProperty = new dependencyObservable.Property(
+        "text", "ActionItemBase", new dependencyObservable.PropertyMetadata("", null, ActionItemBase.onItemChanged));
+
+    public static iconProperty = new dependencyObservable.Property(
+        "icon", "ActionItemBase", new dependencyObservable.PropertyMetadata(null, null, ActionItemBase.onItemChanged));
+
+    private static onItemChanged(data: dependencyObservable.PropertyChangeData) {
+        var menuItem = <ActionItemBase>data.object;
+        if (menuItem.actionBar) {
+            menuItem.actionBar.update();
+        }
+    }
+
+    get text(): string {
+        return this._getValue(ActionItemBase.textProperty);
+    }
+    set text(value: string) {
+        this._setValue(ActionItemBase.textProperty, value);
+    }
+
+    get icon(): string {
+        return this._getValue(ActionItemBase.iconProperty);
+    }
+    set icon(value: string) {
+        this._setValue(ActionItemBase.iconProperty, value);
+    }
+
+    private _actionBar: ActionBar;
+    get actionBar(): ActionBar {
+        return this._actionBar;
+    }
+    set actionBar(value: ActionBar) {
+        if (value !== this._actionBar) {
+            this._actionBar = value;
+            if (this._actionBar) {
+                this.bindingContext = this._actionBar.bindingContext;
+            }
+        }
+    }
+
+    public _raiseTap() {
+        this._emit(ActionItemBase.tapEvent);
+    }
+}
+
+export class NavigationButton extends ActionItemBase {
+
+}

ui/action-bar/action-bar.android.ts

@@ -0,0 +1,296 @@
+import common = require("ui/action-bar/action-bar-common");
+import trace = require("trace");
+import frame = require("ui/frame");
+import types = require("utils/types");
+import utils = require("utils/utils");
+import imageSource = require("image-source");
+import enums = require("ui/enums");
+import application = require("application");
+import dts = require("ui/action-bar");
+
+var ACTION_ITEM_ID_OFFSET = 1000;
+var API_LVL = android.os.Build.VERSION.SDK_INT;
+
+declare var exports;
+require("utils/module-merge").merge(common, exports);
+
+export class ActionItem extends common.ActionItemBase implements dts.ActionItem {
+    private _androidPosition: dts.AndroidActionItemSettings = { position: enums.AndroidActionItemPosition.actionBar };
+
+    public get android(): dts.AndroidActionItemSettings {
+        return this._androidPosition;
+    }
+    public set android(value: dts.AndroidActionItemSettings) {
+        throw new Error("ActionItem.android is read-only");
+    }
+
+    // Not used in Android
+    public ios: dts.IOSActionItemSettings;
+}
+
+export class AndroidActionBarSettings implements dts.AndroidActionBarSettings {
+    private _actionBar: ActionBar;
+    private _icon: string;
+    private _iconVisibility: string = enums.AndroidActionBarIconVisibility.auto;
+
+    public get icon(): string {
+        return this._icon;
+    }
+    public set icon(value: string) {
+        if (value !== this._icon) {
+            this._icon = value;
+            this._actionBar._onIconPropertyChanged();
+        }
+    }
+
+    public get iconVisibility(): string {
+        return this._iconVisibility;
+    }
+    public set iconVisibility(value: string) {
+        if (value !== this._iconVisibility) {
+            this._iconVisibility = value;
+            this._actionBar._onIconPropertyChanged();
+        }
+    }
+
+    constructor(actionBar: ActionBar) {
+        this._actionBar = actionBar;
+    }
+}
+
+export class ActionBar extends common.ActionBar {
+    private _appResources: android.content.res.Resources;
+    private _android: AndroidActionBarSettings;
+
+    get android(): AndroidActionBarSettings {
+        return this._android;
+    }
+
+    set android(value: AndroidActionBarSettings) {
+        throw new Error("ActionBar.android is read-only");
+    }
+
+    get _nativeView() {
+        return undefined;
+    }
+
+    constructor() {
+        super();
+
+        this._appResources = application.android.context.getResources();
+        this._android = new AndroidActionBarSettings(this);
+    }
+
+    public update() {
+        if (this.page && this.page.frame && this.page.frame.android && this.page.frame.android.activity) {
+            this.page.frame.android.activity.invalidateOptionsMenu();
+        }
+    }
+
+    public _onAndroidItemSelected(itemId: number): boolean {
+        var menuItem = this.actionItems.getItemAt(itemId - ACTION_ITEM_ID_OFFSET);
+        if (menuItem) {
+            menuItem._raiseTap();
+            return true;
+        }
+
+        if (this.navigationButton && itemId === (<any>android).R.id.home) {
+            this.navigationButton._raiseTap();
+            return true;
+        }
+
+        return false;
+    }
+
+    public _updateAndroid(menu: android.view.IMenu) {
+        var actionBar: android.app.ActionBar = frame.topmost().android.actionBar;
+
+        this._addActionItems(menu);
+
+        // Set title
+        this._updateTitleAndTitleView(actionBar);
+
+        // Set home icon
+        this._updateIcon(actionBar);
+
+        // Set navigation button
+        this._updateNavigationButton(actionBar);
+    }
+
+    public _updateNavigationButton(actionBar: android.app.ActionBar) {
+        var navButton = this.navigationButton;
+        if (navButton) {
+            // No API to set the icon in pre-lvl 18 
+            if (API_LVL >= 18) {
+                var drawableOrId = getDrawableOrResourceId(navButton.icon, this._appResources);
+                if (!drawableOrId) {
+                    drawableOrId = 0;
+                }
+
+                setHomeAsUpIndicator(actionBar, drawableOrId);
+            }
+            actionBar.setDisplayHomeAsUpEnabled(true);
+        }
+        else {
+            actionBar.setDisplayHomeAsUpEnabled(false);
+        }
+    }
+
+    public _updateIcon(actionBar: android.app.ActionBar) {
+        var icon = this.android.icon;
+        if (types.isDefined(icon)) {
+            var drawableOrId = getDrawableOrResourceId(icon, this._appResources);
+            if (drawableOrId) {
+                actionBar.setIcon(drawableOrId);
+            }
+        }
+        else {
+            var defaultIcon = application.android.nativeApp.getApplicationInfo().icon;
+            actionBar.setIcon(defaultIcon);
+        }
+
+        var visibility = getIconVisibility(this.android.iconVisibility);
+        actionBar.setDisplayShowHomeEnabled(visibility);
+    }
+
+    public _updateTitleAndTitleView(actionBar: android.app.ActionBar) {
+        if (this.titleView) {
+            actionBar.setCustomView(this.titleView.android);
+            actionBar.setDisplayShowCustomEnabled(true);
+            actionBar.setDisplayShowTitleEnabled(false);
+        }
+        else {
+            actionBar.setCustomView(null);
+            actionBar.setDisplayShowCustomEnabled(false);
+            actionBar.setDisplayShowTitleEnabled(true);
+
+            // No title view - show the title
+            var title = this.title;
+            if (types.isDefined(title)) {
+                actionBar.setTitle(title);
+            } else {
+                var defaultLabel = application.android.nativeApp.getApplicationInfo().labelRes;
+                actionBar.setTitle(defaultLabel);
+            }
+        }
+    }
+
+    public _addActionItems(menu: android.view.IMenu) {
+        var items = this.actionItems.getItems();
+
+        for (var i = 0; i < items.length; i++) {
+            var item = items[i];
+            var menuItem = menu.add(android.view.Menu.NONE, i + ACTION_ITEM_ID_OFFSET, android.view.Menu.NONE, item.text);
+            if (item.icon) {
+                var drawableOrId = getDrawableOrResourceId(item.icon, this._appResources);
+                if (drawableOrId) {
+                    menuItem.setIcon(drawableOrId);
+                }
+            }
+
+            var showAsAction = getShowAsAction(item);
+            menuItem.setShowAsAction(showAsAction);
+        }
+    }
+
+    public _onTitlePropertyChanged() {
+        if (frame.topmost().currentPage === this.page) {
+            this._updateTitleAndTitleView(frame.topmost().android.actionBar);
+        }
+    }
+
+    public _onIconPropertyChanged() {
+        if (frame.topmost().currentPage === this.page) {
+            this._updateIcon(frame.topmost().android.actionBar);
+        }
+    }
+
+    public _clearAndroidReference() {
+        // don't clear _android field!
+    }
+}
+
+var setHomeAsUpIndicatorWithResoruceId: java.lang.reflect.Method;
+var setHomeAsUpIndicatorWithDrawable: java.lang.reflect.Method;
+function setHomeAsUpIndicator(actionBar: android.app.ActionBar, drawableOrId: any) {
+    try {
+        // TODO: Remove reflection as soon as AppCopmat libs are available
+        var paramsArr = java.lang.reflect.Array.newInstance(java.lang.Object.class, 1);
+        if (types.isNumber(drawableOrId)) {
+            if (!setHomeAsUpIndicatorWithResoruceId) {
+                // get setHomeAsUpIndicator(resourceId: number) method with reflection and cache it
+                let typeArr = java.lang.reflect.Array.newInstance(java.lang.Class.class, 1);
+                typeArr[0] = java.lang.Integer.TYPE;
+                setHomeAsUpIndicatorWithResoruceId = actionBar.getClass().getMethod("setHomeAsUpIndicator", typeArr);
+            }
+
+            paramsArr[0] = new java.lang.Integer(drawableOrId);
+            setHomeAsUpIndicatorWithResoruceId.invoke(actionBar, paramsArr);
+        } else {
+            if (!setHomeAsUpIndicatorWithDrawable) {
+                // get setHomeAsUpIndicator(drawable) method with reflection and cache it
+                let typeArr = java.lang.reflect.Array.newInstance(java.lang.Class.class, 1);
+                typeArr[0] = android.graphics.drawable.Drawable.class;
+                setHomeAsUpIndicatorWithDrawable = actionBar.getClass().getMethod("setHomeAsUpIndicator", typeArr);
+            }
+
+            paramsArr[0] = drawableOrId;
+            setHomeAsUpIndicatorWithDrawable.invoke(actionBar, paramsArr);
+        }
+    }
+    catch (e) {
+        trace.write("Failed to set navigation icon: " + e, trace.categories.Error, trace.messageType.error);
+    }
+}
+
+function getDrawableOrResourceId(icon: string, resources: android.content.res.Resources): any {
+    if (!types.isString(icon)) {
+        return undefined;
+    }
+
+    if (icon.indexOf(utils.RESOURCE_PREFIX) === 0) {
+        var resourceId: number = resources.getIdentifier(icon.substr(utils.RESOURCE_PREFIX.length), 'drawable', application.android.packageName);
+        if (resourceId > 0) {
+            return resourceId;
+        }
+    }
+    else {
+        var drawable: android.graphics.drawable.BitmapDrawable;
+        var is = imageSource.fromFileOrResource(icon);
+        if (is) {
+            drawable = new android.graphics.drawable.BitmapDrawable(is.android);
+        }
+
+        return drawable;
+    }
+
+    return undefined;
+}
+
+function getShowAsAction(menuItem: dts.ActionItem): number {
+    switch (menuItem.android.position) {
+        case enums.AndroidActionItemPosition.actionBarIfRoom:
+            return android.view.MenuItem.SHOW_AS_ACTION_IF_ROOM;
+
+        case enums.AndroidActionItemPosition.popup:
+            return android.view.MenuItem.SHOW_AS_ACTION_NEVER;
+
+        case enums.AndroidActionItemPosition.actionBar:
+        default:
+            return android.view.MenuItem.SHOW_AS_ACTION_ALWAYS;
+    }
+}
+
+function getIconVisibility(iconVisibility: string): boolean {
+    switch (iconVisibility) {
+        case enums.AndroidActionBarIconVisibility.always:
+            return true;
+
+        case enums.AndroidActionBarIconVisibility.never:
+            return false;
+
+        case enums.AndroidActionBarIconVisibility.auto:
+        default:
+            return API_LVL <= 20;
+    }
+}

ui/action-bar/action-bar.d.ts

@@ -0,0 +1,99 @@
+declare module "ui/action-bar" {
+    import observable = require("data/observable");
+    import view = require("ui/core/view");
+    import dependencyObservable = require("ui/core/dependency-observable");
+    import bindable = require("ui/core/bindable");
+    import pages = require("ui/page");
+
+    export class ActionBar extends view.View implements view.AddArrayFromBuilder, view.AddChildFromBuilder {
+        title: string;
+
+        navigationButton: NavigationButton;
+        actionItems: ActionItems;
+        titleView: view.View;
+
+        android: AndroidActionBarSettings;
+
+        page: pages.Page;
+
+        shouldShow(): boolean
+
+        update();
+
+        //@private
+        _updateAndroid(menu: android.view.IMenu);
+        _onAndroidItemSelected(itemId: number): boolean
+
+        _addArrayFromBuilder(name: string, value: Array<any>): void;
+        _addChildFromBuilder(name: string, value: any): void;
+
+        //@endprivate
+    }
+
+    export class ActionItems {
+        addItem(item: ActionItem): void;
+        removeItem(item: ActionItem): void;
+        getItems(): Array<ActionItem>;
+        getItemAt(index: number): ActionItem;
+    }
+
+    export class ActionItemBase extends bindable.Bindable {
+        /**
+         * String value used when hooking to tap event.
+         */
+        public static tapEvent: string;
+
+        /**
+         * Represents the observable property backing the text property.
+         */
+        public static textProperty: dependencyObservable.Property;
+
+        /**
+         * Represents the observable property backing the icon property.
+         */
+        public static iconProperty: dependencyObservable.Property;
+
+        text: string;
+        icon: string;
+        actionBar: ActionBar;
+
+        /**
+         * A basic method signature to hook an event listener (shortcut alias to the addEventListener method).
+         * @param eventNames - String corresponding to events (e.g. "propertyChange"). Optionally could be used more events separated by `,` (e.g. "propertyChange", "change"). 
+         * @param callback - Callback function which will be executed when event is raised.
+         * @param thisArg - An optional parameter which will be used as `this` context for callback execution.
+         */
+        on(eventNames: string, callback: (data: observable.EventData) => void);
+
+        /**
+         * Raised when a tap event occurs.
+         */
+        on(event: "tap", callback: (args: observable.EventData) => void);
+
+        //@private
+        _raiseTap(): void;
+        //@endprivate
+    }
+
+    export class ActionItem extends ActionItemBase {
+        ios: IOSActionItemSettings;
+        android: AndroidActionItemSettings;
+    }
+    
+    export interface AndroidActionItemSettings {
+        position: string;
+    }
+    
+    export interface IOSActionItemSettings {
+        position: string;
+    }
+
+    export interface AndroidActionBarSettings {
+        icon: string;
+        iconVisibility: string;
+    }
+    
+    export class NavigationButton extends ActionItemBase {
+
+    }
+}

ui/action-bar/action-bar.ios.ts

@@ -0,0 +1,187 @@
+import common = require("ui/action-bar/action-bar-common");
+import dts = require("ui/action-bar");
+import imageSource = require("image-source");
+import frameModule = require("ui/frame");
+import enums = require("ui/enums");
+import view = require("ui/core/view");
+import utils = require("utils/utils");
+
+declare var exports;
+require("utils/module-merge").merge(common, exports);
+
+export class ActionItem extends common.ActionItemBase implements dts.ActionItem {
+    private _ios: dts.IOSActionItemSettings = { position: enums.IOSActionItemPosition.left };
+    public get ios(): dts.IOSActionItemSettings {
+        return this._ios;
+    }
+    public set ios(value: dts.IOSActionItemSettings) {
+        throw new Error("ActionItem.android is read-only");
+    }
+
+    // Not used in IOS
+    public android: dts.AndroidActionItemSettings;
+}
+
+export class ActionBar extends common.ActionBar {
+    public update() {
+        // Page should be attached to frame to update the action bar.
+        if (!(this.page && this.page.parent)) {
+            return;
+        }
+
+        var viewController = (<UIViewController>this.page.ios);
+        var navigationItem: UINavigationItem = viewController.navigationItem;
+        var navController = frameModule.topmost().ios.controller;
+        var navigationBar = navController.navigationBar;
+        var previousController: UIViewController;
+
+        // Set Title
+        navigationItem.title = this.title;
+
+        if (this.titleView && this.titleView.ios) {
+            console.log("setting center view: " + this.titleView.ios);
+            navigationItem.titleView = this.titleView.ios;
+        }
+
+        // Find previous ViewController in the navigation stack
+        var indexOfViewController = navController.viewControllers.indexOfObject(viewController);
+        if (indexOfViewController !== NSNotFound && indexOfViewController > 0) {
+            previousController = navController.viewControllers[indexOfViewController - 1];
+        }
+   
+        // Set back button text
+        if (previousController) {
+            if (this.navigationButton) {
+                var tapHandler = TapBarItemHandlerImpl.new().initWithOwner(this.navigationButton);
+                var barButtonItem = UIBarButtonItem.alloc().initWithTitleStyleTargetAction(this.navigationButton.text, UIBarButtonItemStyle.UIBarButtonItemStylePlain, tapHandler, "tap");
+                previousController.navigationItem.backBarButtonItem = barButtonItem;
+            }
+            else {
+                previousController.navigationItem.backBarButtonItem = null;
+            }
+        }
+
+        // Set back button image
+        var img: imageSource.ImageSource;
+        if (this.navigationButton && this.navigationButton.icon) {
+            img = imageSource.fromFileOrResource(this.navigationButton.icon);
+        }
+
+        if (img && img.ios) {
+            var image = img.ios.imageWithRenderingMode(UIImageRenderingMode.UIImageRenderingModeAlwaysOriginal)
+            navigationBar.backIndicatorImage = image;
+            navigationBar.backIndicatorTransitionMaskImage = image;
+        }
+        else {
+            navigationBar.backIndicatorImage = null;
+            navigationBar.backIndicatorTransitionMaskImage = null;
+        }
+
+        // Populate action items
+        this.populateMenuItems(navigationItem);
+    }
+
+    private populateMenuItems(navigationItem: UINavigationItem) {
+        var items = this.actionItems.getItems();
+        var leftBarItems = [];
+        var rightBarItems = [];
+
+        for (var i = 0; i < items.length; i++) {
+            var barButtonItem = this.createBarButtonItem(items[i]);
+            if (items[i].ios.position === enums.IOSActionItemPosition.left) {
+                leftBarItems.push(barButtonItem);
+            }
+            else {
+                rightBarItems.push(barButtonItem);
+            }
+        }
+
+        var leftArray: NSMutableArray = leftBarItems.length > 0 ? NSMutableArray.new() : null;
+        leftBarItems.forEach((barItem, i, a) => leftArray.addObject(barItem));
+
+        // Right items should be added in reverse because they are added from right to left
+        var rightArray: NSMutableArray = rightBarItems.length > 0 ? NSMutableArray.new() : null;
+        rightBarItems.reverse();
+        rightBarItems.forEach((barItem, i, a) => rightArray.addObject(barItem));
+
+        navigationItem.leftItemsSupplementBackButton = true;
+        navigationItem.setLeftBarButtonItemsAnimated(leftArray, true);
+        navigationItem.setRightBarButtonItemsAnimated(rightArray, true);
+    }
+
+    private createBarButtonItem(item: dts.ActionItem): UIBarButtonItem {
+        var tapHandler = TapBarItemHandlerImpl.new().initWithOwner(item);
+        // associate handler with menuItem or it will get collected by JSC.
+        (<any>item).handler = tapHandler;
+
+        var barButtonItem: UIBarButtonItem;
+        if (item.icon) {
+            var img = imageSource.fromFileOrResource(item.icon);
+            if (img && img.ios) {
+                barButtonItem = UIBarButtonItem.alloc().initWithImageStyleTargetAction(img.ios, UIBarButtonItemStyle.UIBarButtonItemStylePlain, tapHandler, "tap");
+            }
+        }
+        else {
+            barButtonItem = UIBarButtonItem.alloc().initWithTitleStyleTargetAction(item.text, UIBarButtonItemStyle.UIBarButtonItemStylePlain, tapHandler, "tap");
+        }
+
+        return barButtonItem;
+    }
+
+    public _onTitlePropertyChanged() {
+        if (!this.page) {
+            return;
+        }
+
+        var navigationItem: UINavigationItem = (<UIViewController>this.page.ios).navigationItem;
+        navigationItem.title = this.title;
+    }
+
+    public onMeasure(widthMeasureSpec: number, heightMeasureSpec: number) {
+        if (this.titleView) {
+            var width = utils.layout.getMeasureSpecSize(widthMeasureSpec);
+
+            view.View.measureChild(this, this.titleView,
+                utils.layout.makeMeasureSpec(width, utils.layout.AT_MOST),
+                utils.layout.makeMeasureSpec(this.navigationBarHeight, utils.layout.AT_MOST));
+        }
+
+        this.setMeasuredDimension(0, 0);
+        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
+    }
+
+    public onLayout(left: number, top: number, right: number, bottom: number) {
+        view.View.layoutChild(this, this.titleView, 0, 0, right - left, this.navigationBarHeight);
+        super.onLayout(left, top, right, bottom);
+    }
+
+    protected get navigationBarHeight(): number {
+        var navController = frameModule.topmost().ios.controller;
+        if (!navController) {
+            return 0;
+        }
+        var navigationBar = navController.navigationBar;
+        return (navigationBar && !navController.navigationBarHidden) ? navigationBar.frame.size.height : 0;
+    }
+}
+
+class TapBarItemHandlerImpl extends NSObject {
+    static new(): TapBarItemHandlerImpl {
+        return <TapBarItemHandlerImpl>super.new();
+    }
+
+    private _owner: dts.ActionItemBase;
+
+    public initWithOwner(owner: dts.ActionItemBase): TapBarItemHandlerImpl {
+        this._owner = owner;
+        return this;
+    }
+
+    public tap(args) {
+        this._owner._raiseTap();
+    }
+
+    public static ObjCExposedMethods = {
+        "tap": { returns: interop.types.void, params: [interop.types.id] }
+    };
+}

ui/action-bar/package.json

@@ -0,0 +1,2 @@
+{ "name" : "action-bar",
+  "main" : "action-bar.js" }

ui/builder/builder.ts

@@ -312,7 +312,7 @@ function isKnownCollection(name: string, context: any): boolean {
     return KNOWNCOLLECTIONS in context && context[KNOWNCOLLECTIONS] && name in context[KNOWNCOLLECTIONS];
 }
 
-function addToComplexProperty(parent: componentBuilder.ComponentModule, complexProperty, elementModule: componentBuilder.ComponentModule) {
+function addToComplexProperty(parent: componentBuilder.ComponentModule, complexProperty: ComplexProperty, elementModule: componentBuilder.ComponentModule) {
     // If property name is known collection we populate array with elements.
     var parentComponent = <any>parent.component;
     if (isKnownCollection(complexProperty.name, parent.exports)) {

ui/builder/component-builder.ts

@@ -38,7 +38,9 @@ var MODULES = {
     "TimePicker": "ui/time-picker",
     "DatePicker": "ui/date-picker",
     "ListPicker": "ui/list-picker",
-    "MenuItem": "ui/page",
+    "ActionBar": "ui/action-bar",
+    "ActionItem": "ui/action-bar",
+    "NavigationButton": "ui/action-bar",
 };
 
 var ROW = "row";

ui/content-view/content-view.d.ts

@@ -8,7 +8,7 @@ declare module "ui/content-view" {
      * Represents a View that has a single child - content.
      * The View itself does not have visual representation and serves as a placeholder for its content in the logical tree.
      */
-    class ContentView extends view.View {
+    class ContentView extends view.View implements view.AddChildFromBuilder  {
         /**
          * Gets or sets the single child of the view.
          */
@@ -21,6 +21,8 @@ declare module "ui/content-view" {
          * @param newView The new content.
          */
         _onContentChanged(oldView: view.View, newView: view.View);
+
+        _addChildFromBuilder(name: string, value: any): void;
         //@endprivate
     }
 } 

ui/core/proxy.d.ts

@@ -53,7 +53,7 @@
         public _onPropertyChangedFromNative(property: dependencyObservable.Property, newValue: any): void;
 
         /**
-         * Syncronizes all properties with native values.
+         * Synchronizes all properties with native values.
          */
         public _syncNativeProperties(): void;
     }

ui/core/view.ios.ts

@@ -172,6 +172,10 @@ export class View extends viewCommon.View {
     }
 
     public layoutNativeView(left: number, top: number, right: number, bottom: number): void {
+        if (!this._nativeView) {
+            return;
+        }
+
         var frame = CGRectMake(left, top, right - left, bottom - top);
 
         // This is done because when rotated in iOS7 there is rotation applied on the first subview on the Window which is our frame.nativeView.view.

ui/enums/enums.d.ts

@@ -351,10 +351,19 @@
         export var always: string;
     }
 
+    /**
+     * Specifies the visibility of the application bar icon
+     */
+    export module AndroidActionBarIconVisibility {
+        export var auto: string;
+        export var never: string;
+        export var always: string;
+    }
+
     /**
      * Specifies android MenuItem position.
      */
-    module MenuItemPosition {
+    module AndroidActionItemPosition {
         /**
          * Always show this item as a button in an Action Bar.
          */
@@ -402,7 +411,6 @@
         export var bold: string;
     }
     
-    
     /**
      * Specifies background repeat.
      */
@@ -412,4 +420,19 @@
         export var repeatY: string;
         export var noRepeat: string;
     }
+
+    /**
+     * Specifies android MenuItem position.
+     */
+    module IOSActionItemPosition {
+        /**
+         * Show this item at the left of the navigation bar.
+         */
+        export var left: string;
+
+        /**
+         * Show this item at the right of the action bar.
+         */
+        export var right: string;
+    }
 }

ui/enums/enums.ts

@@ -93,12 +93,23 @@ export module NavigationBarVisibility {
     export var always: string = "always";
 }
 
-export module MenuItemPosition {
+export module AndroidActionBarIconVisibility {
+    export var auto: string = "auto";
+    export var never: string = "never";
+    export var always: string = "always";
+}
+
+export module AndroidActionItemPosition {
     export var actionBar: string = "actionBar";
     export var actionBarIfRoom: string = "actionBarIfRoom";
     export var popup: string = "popup";
 }
 
+export module IOSActionItemPosition {
+    export var left: string = "left";
+    export var right: string = "right";
+}
+
 export module ImageFormat {
     export var png: string = "png";
     export var jpeg: string = "jpeg";
@@ -119,4 +130,4 @@ export module BackgroundRepeat {
     export var repeatX: string = "repeat-x";
     export var repeatY: string = "repeat-y";
     export var noRepeat: string = "no-repeat";
-}
+}

ui/frame/frame.android.ts

@@ -6,7 +6,6 @@ import observable = require("data/observable");
 import utils = require("utils/utils");
 import view = require("ui/core/view");
 import application = require("application");
-import enums = require("ui/enums");
 
 declare var exports;
 require("utils/module-merge").merge(frameCommon, exports);
@@ -140,49 +139,18 @@ class PageFragmentBody extends android.app.Fragment {
         super.onCreateOptionsMenu(menu, inflater);
 
         var page: pages.Page = this.entry.resolvedPage;
-        var items = page.optionsMenu.getItems();
 
-        for (var i = 0; i < items.length; i++) {
-            var item = items[i];
-            var menuItem = menu.add(android.view.Menu.NONE, i, android.view.Menu.NONE, item.text);
-            if (item.icon) {
-                var androidApp = application.android;
-                var res = androidApp.context.getResources();
-                var id = res.getIdentifier(item.icon, 'drawable', androidApp.packageName);
-                if (id) {
-                    menuItem.setIcon(id);
-                }
-            }
-
-            var showAsAction = PageFragmentBody.getShowAsAction(item);
-            menuItem.setShowAsAction(showAsAction);
-        }
-    }
-
-    private static getShowAsAction(menuItem: pages.MenuItem): number {
-        switch (menuItem.android.position) {
-            case enums.MenuItemPosition.actionBarIfRoom:
-                return android.view.MenuItem.SHOW_AS_ACTION_IF_ROOM;
-
-            case enums.MenuItemPosition.popup:
-                return android.view.MenuItem.SHOW_AS_ACTION_NEVER;
-
-            case enums.MenuItemPosition.actionBar:
-            default:
-                return android.view.MenuItem.SHOW_AS_ACTION_ALWAYS;
-        }
+        page.actionBar._updateAndroid(menu);
     }
 
     onOptionsItemSelected(item: android.view.IMenuItem) {
         var page: pages.Page = this.entry.resolvedPage;
         var itemId = item.getItemId();
 
-        var menuItem = page.optionsMenu.getItemAt(itemId);
-        if (menuItem) {
-            menuItem._raiseTap();
+        if (page.actionBar._onAndroidItemSelected(itemId)) {
             return true;
         }
-
+       
         return super.onOptionsItemSelected(item);
     }
 }
@@ -696,4 +664,5 @@ function startActivity(activity: android.app.Activity, entry: definition.Navigat
     intent.setAction(android.content.Intent.ACTION_DEFAULT);
     // TODO: Put the navigation context (if any) in the intent
     activity.startActivity(intent);
-}
+}
+

ui/frame/frame.ios.ts

@@ -84,7 +84,7 @@ export class Frame extends frameCommon.Frame {
 
             case enums.NavigationBarVisibility.auto:
                 var pageInstance: pages.Page = page || this.currentPage;
-                newValue = this.backStack.length > 0 || (pageInstance && pageInstance.optionsMenu.getItems().length > 0);
+                newValue = this.backStack.length > 0 || (pageInstance && pageInstance.actionBar.shouldShow());
                 newValue = !!newValue; // Make sure it is boolean
                 break;
         }
@@ -191,11 +191,12 @@ class UINavigationControllerImpl extends UINavigationController implements UINav
             }
 
             frame._addView(newPage);
-            newPage._invalidateOptionsMenu();
         }
         else if (newPage.parent !== frame) {
             throw new Error("Page is already shown on another frame.");
         }
+
+        newPage.actionBar.update();
     }
 
     public navigationControllerDidShowViewControllerAnimated(navigationController: UINavigationController, viewController: UIViewController, animated: boolean): void {
@@ -227,6 +228,8 @@ class UINavigationControllerImpl extends UINavigationController implements UINav
         frame._currentEntry = newEntry;
         frame.updateNavigationBar();
 
+        frame.ios.controller.navigationBar.backIndicatorImage
+
         var newPage = newEntry.resolvedPage;
 
         // notify the page

ui/image/image-common.ts

@@ -39,7 +39,7 @@ function onSrcPropertyChanged(data: dependencyObservable.PropertyChangeData) {
         }
     }
     else if (value instanceof imageSource.ImageSource) {
-        // Support binding the imageSource trough the src propoerty
+        // Support binding the imageSource trough the src property
         image.imageSource = value;
     }
     else {

ui/page/page-common.ts

@@ -5,14 +5,11 @@ import frame = require("ui/frame");
 import styleScope = require("ui/styling/style-scope");
 import fs = require("file-system");
 import fileSystemAccess = require("file-system/file-system-access");
-import bindable = require("ui/core/bindable");
-import dependencyObservable = require("ui/core/dependency-observable");
-import enums = require("ui/enums");
 import frameCommon = require("ui/frame/frame-common");
+import actionBar = require("ui/action-bar");
+import dependencyObservable = require("ui/core/dependency-observable");
 import proxy = require("ui/core/proxy");
 
-var OPTIONS_MENU = "optionsMenu";
-
 var navigationBarHiddenProperty = new dependencyObservable.Property(
     "navigationBarHidden",
     "Page",
@@ -28,11 +25,7 @@ function onNavigationBarHiddenPropertyChanged(data: dependencyObservable.Propert
 
 (<proxy.PropertyMetadata>navigationBarHiddenProperty.metadata).onSetNativeValue = onNavigationBarHiddenPropertyChanged;
 
-export module knownCollections {
-    export var optionsMenu = "optionsMenu";
-}
-
-export class Page extends contentView.ContentView implements dts.Page, view.AddArrayFromBuilder {
+export class Page extends contentView.ContentView implements dts.Page {
     public static navigationBarHiddenProperty = navigationBarHiddenProperty;
     public static navigatingToEvent = "navigatingTo";
     public static navigatedToEvent = "navigatedTo";
@@ -44,11 +37,11 @@ export class Page extends contentView.ContentView implements dts.Page, view.AddA
 
     private _cssApplied: boolean;
     private _styleScope: styleScope.StyleScope = new styleScope.StyleScope();
-    private _optionsMenu: OptionsMenu;
+    private _actionBar: actionBar.ActionBar;
 
     constructor(options?: dts.Options) {
         super(options);
-        this._optionsMenu = new OptionsMenu(this);
+        this.actionBar = new actionBar.ActionBar();
     }
 
     public onLoaded() {
@@ -88,11 +81,23 @@ export class Page extends contentView.ContentView implements dts.Page, view.AddA
         this._refreshCss();
     }
 
-    get optionsMenu(): OptionsMenu {
-        return this._optionsMenu;
+    get actionBar(): actionBar.ActionBar {
+        return this._actionBar;
     }
-    set optionsMenu(value: OptionsMenu) {
-        throw new Error("optionsMenu property is read-only");
+    set actionBar(value: actionBar.ActionBar) {
+        if (!value) {
+            throw new Error("ActionBar cannot be null or undefined.");
+        }
+
+        if (this._actionBar !== value) {
+            if (this._actionBar) {
+                this._actionBar.page = undefined;
+                this._removeView(this._actionBar);
+            }
+            this._actionBar = value;
+            this._actionBar.page = this;
+            this._addView(this._actionBar);
+        }
     }
 
     private _refreshCss(): void {
@@ -175,6 +180,15 @@ export class Page extends contentView.ContentView implements dts.Page, view.AddA
         (<Page>page)._showNativeModalView(this, context, closeCallback, fullscreen);
     }
 
+    public _addChildFromBuilder(name: string, value: any) {
+        if (value instanceof actionBar.ActionBar) {
+            this.actionBar = value;
+        }
+        else {
+            super._addChildFromBuilder(name, value);
+        }
+    }
+
     protected _showNativeModalView(parent: Page, context: any, closeCallback: Function, fullscreen?: boolean) {
         //
     }
@@ -202,8 +216,10 @@ export class Page extends contentView.ContentView implements dts.Page, view.AddA
         return this._styleScope;
     }
 
-    public _invalidateOptionsMenu() {
-        // 
+    public _eachChildView(callback: (child: view.View) => boolean) {
+        super._eachChildView(callback);
+
+        callback(this.actionBar);
     }
 
     private _applyCss() {
@@ -233,133 +249,14 @@ export class Page extends contentView.ContentView implements dts.Page, view.AddA
 
         resetCssValuesFunc(this);
         view.eachDescendant(this, resetCssValuesFunc);
-
     }
 
-    public _addArrayFromBuilder(name: string, value: Array<any>) {
-        if (name === OPTIONS_MENU) {
-            this.optionsMenu.setItems(value);
-        }
-    }
-
-}
-
-export class OptionsMenu implements dts.OptionsMenu {
-    private _items: Array<MenuItem> = new Array<MenuItem>();
-    private _page: Page;
-
-    constructor(page: Page) {
-        this._page = page;
-    }
-
-    public addItem(item: MenuItem): void {
-        if (!item) {
-            throw new Error("Cannot add empty item");
+    public _addViewToNativeVisualTree(view: view.View): boolean {
+        // ActionBar is added to the native visual tree by default
+        if (view === this.actionBar) {
+            return true;
         }
 
-        this._items.push(item);
-        item.menu = this;
-        item.bind({
-            sourceProperty: "bindingContext",
-            targetProperty: "bindingContext"
-        }, this._page);
-
-        this.invalidate();
+        return super._addViewToNativeVisualTree(view);
     }
-
-    public removeItem(item: MenuItem): void {
-        if (!item) {
-            throw new Error("Cannot remove empty item");
-        }
-
-        var itemIndex = this._items.indexOf(item);
-        if (itemIndex < 0) {
-            throw new Error("Cannot find item to remove");
-        }
-
-        item.menu = undefined;
-        item.unbind("bindingContext");
-        this._items.splice(itemIndex, 1);
-        this.invalidate();
-    }
-
-    public getItems(): Array<MenuItem> {
-        return this._items.slice();
-    }
-
-    public getItemAt(index: number): MenuItem {
-        return this._items[index];
-    }
-
-    public setItems(items: Array<MenuItem>) {
-        // Remove all existing items
-        while (this._items.length > 0) {
-            this.removeItem(this._items[this._items.length - 1]);
-        }
-
-        // Add new items
-        for (var i = 0; i < items.length; i++) {
-            this.addItem(items[i]);
-        }
-
-        this.invalidate();
-    }
-
-    invalidate() {
-        if (this._page) {
-            this._page._invalidateOptionsMenu();
-        }
-    }
-}
-
-export class MenuItem extends bindable.Bindable implements dts.MenuItem {
-    public static tapEvent = "tap";
-
-    public static textProperty = new dependencyObservable.Property(
-        "text", "MenuItem", new dependencyObservable.PropertyMetadata("", null, MenuItem.onItemChanged));
-
-    public static iconProperty = new dependencyObservable.Property(
-        "icon", "MenuItem", new dependencyObservable.PropertyMetadata(null, null, MenuItem.onItemChanged));
-
-    private static onItemChanged(data: dependencyObservable.PropertyChangeData) {
-        var menuItem = <MenuItem>data.object;
-        if (menuItem.menu) {
-            menuItem.menu.invalidate();
-        }
-    }
-
-    private _android: dts.AndroidMenuItemOptions;
-
-    constructor() {
-        super();
-        if (global.android) {
-            this._android = {
-                position: enums.MenuItemPosition.actionBar
-            };
-        }
-    }
-
-    get android(): dts.AndroidMenuItemOptions {
-        return this._android;
-    }
-
-    get text(): string {
-        return this._getValue(MenuItem.textProperty);
-    }
-    set text(value: string) {
-        this._setValue(MenuItem.textProperty, value);
-    }
-
-    get icon(): string {
-        return this._getValue(MenuItem.iconProperty);
-    }
-    set icon(value: string) {
-        this._setValue(MenuItem.iconProperty, value);
-    }
-
-    public _raiseTap() {
-        this._emit(MenuItem.tapEvent);
-    }
-
-    menu: OptionsMenu;
 }

ui/page/page.android.ts

@@ -26,13 +26,12 @@ class DialogFragmentClass extends android.app.DialogFragment {
         window.setBackgroundDrawable(new android.graphics.drawable.ColorDrawable(android.graphics.Color.TRANSPARENT));
 
         if (this._fullscreen) {
-            window.setLayout(android.view.ViewGroup.LayoutParams.FILL_PARENT, android.view.ViewGroup.LayoutParams.FILL_PARENT);
+        window.setLayout(android.view.ViewGroup.LayoutParams.FILL_PARENT, android.view.ViewGroup.LayoutParams.FILL_PARENT);
         }
         
         return dialog;
     }
 };
-
 export class Page extends pageCommon.Page {
     private _isBackNavigation = false;
 
@@ -57,12 +56,6 @@ export class Page extends pageCommon.Page {
         super.onNavigatedFrom(isBackNavigation);
     }
 
-    public _invalidateOptionsMenu() {
-        if (this.frame && this.frame.android && this.frame.android.activity) {
-            this.frame.android.activity.invalidateOptionsMenu();
-        }
-    }
-
     /* tslint:disable */
     private _dialogFragment: DialogFragmentClass;
     /* tslint:enable */

ui/page/page.d.ts

@@ -6,8 +6,8 @@ declare module "ui/page" {
     import view = require("ui/core/view");
     import contentView = require("ui/content-view");
     import frame = require("ui/frame");
+    import actionBar = require("ui/action-bar");
     import dependencyObservable = require("ui/core/dependency-observable");
-    import bindable = require("ui/core/bindable");
 
     //@private
     import styleScope = require("ui/styling/style-scope");
@@ -18,7 +18,7 @@ declare module "ui/page" {
      */
     export interface NavigatedData extends observable.EventData {
         /**
-         * The navigation context (optional, may be undefined) passed to the page navigation evetns method.
+         * The navigation context (optional, may be undefined) passed to the page navigation events method.
          */
         context: any;
     }
@@ -39,13 +39,13 @@ declare module "ui/page" {
     }
 
     export module knownCollections {
-        export var optionsMenu: string;
+        export var actionItems: string;
     }
 
     /**
      * Represents a logical unit for navigation (inside Frame).
      */
-    export class Page extends contentView.ContentView implements view.AddArrayFromBuilder {
+    export class Page extends contentView.ContentView {
         /**
          * Dependency property used to hide the Navigation Bar in iOS and the Action Bar in Android.
          */
@@ -111,9 +111,9 @@ declare module "ui/page" {
         frame: frame.Frame;
 
         /**
-         * Gets the OptionsMenu for this page.
+         * Gets the ActionBar for this page.
          */
-        optionsMenu: OptionsMenu;
+        actionBar: actionBar.ActionBar;
 
         /**
          * A basic method signature to hook an event listener (shortcut alias to the addEventListener method).
@@ -157,8 +157,6 @@ declare module "ui/page" {
          */
         showModal(moduleName: string, context: any, closeCallback: Function, fullscreen?: boolean);
 
-        _addArrayFromBuilder(name: string, value: Array<any>): void;
-
         //@private
 
         /**
@@ -184,7 +182,6 @@ declare module "ui/page" {
         onNavigatedFrom(isBackNavigation: boolean): void;
 
         _getStyleScope(): styleScope.StyleScope;
-        _invalidateOptionsMenu();
         //@endprivate
     }
 
@@ -207,59 +204,4 @@ declare module "ui/page" {
          */
         exports?: any;
     }
-
-    export class OptionsMenu {
-        addItem(item: MenuItem): void;
-        removeItem(item: MenuItem): void;
-        getItems(): Array<MenuItem>;
-        getItemAt(index: number): MenuItem;
-    }
-
-    export class MenuItem extends bindable.Bindable {
-        /**
-         * String value used when hooking to tap event.
-         */
-        public static tapEvent: string;
-
-        /**
-         * Represents the observable property backing the text property.
-         */
-        public static textProperty: dependencyObservable.Property;
-
-        /**
-         * Represents the observable property backing the icon property.
-         */
-        public static iconProperty: dependencyObservable.Property;
-
-        text: string;
-        icon: string;
-        android: AndroidMenuItemOptions;
-
-        /**
-         * A basic method signature to hook an event listener (shortcut alias to the addEventListener method).
-         * @param eventNames - String corresponding to events (e.g. "propertyChange"). Optionally could be used more events separated by `,` (e.g. "propertyChange", "change"). 
-         * @param callback - Callback function which will be executed when event is raised.
-         * @param thisArg - An optional parameter which will be used as `this` context for callback execution.
-         */
-        on(eventNames: string, callback: (data: observable.EventData) => void);
-
-        /**
-         * Raised when a tap event occurs.
-         */
-        on(event: "tap", callback: (args: observable.EventData) => void);
-
-        //@private
-        _raiseTap(): void;
-        //@endprivate
-    }
-
-    interface AndroidMenuItemOptions {
-
-        /**
-         * Specify if android menuItem should appear in the actionBar or in the popup.
-         * Use values from enums MenuItemPosition.
-         * Changes after menuItem is created are not supported.
-         */
-        position: string;
-    }
 }

ui/page/page.ios.ts

@@ -1,7 +1,6 @@
 import pageCommon = require("ui/page/page-common");
 import definition = require("ui/page");
 import viewModule = require("ui/core/view");
-import imageSource = require("image-source");
 import trace = require("trace");
 import utils = require("utils/utils");
 
@@ -22,7 +21,7 @@ class UIViewControllerImpl extends UIViewController {
     }
 
     public didRotateFromInterfaceOrientation(fromInterfaceOrientation: number) {
-        trace.write(this._owner + " didRotateFromInterfaceOrientation(" + fromInterfaceOrientation+ ")", trace.categories.ViewHierarchy);
+        trace.write(this._owner + " didRotateFromInterfaceOrientation(" + fromInterfaceOrientation + ")", trace.categories.ViewHierarchy);
         if ((<any>this._owner)._isModal) {
             var parentBounds = (<any>this._owner)._UIModalPresentationFormSheet ? (<UIView>this._owner._nativeView).superview.bounds : UIScreen.mainScreen().bounds;
             utils.ios._layoutRootView(this._owner, parentBounds);
@@ -71,14 +70,14 @@ export class Page extends pageCommon.Page {
     }
 
     public onLoaded() {
-        // loaded/unloaded events are handeled in page viewWillAppear/viewDidDisappear
+        // loaded/unloaded events are handled in page viewWillAppear/viewDidDisappear
         if (this._enableLoadedEvents) {
             super.onLoaded();
         }
     }
-    
+
     public onUnloaded() {
-        // loaded/unloaded events are handeled in page viewWillAppear/viewDidDisappear
+        // loaded/unloaded events are handled in page viewWillAppear/viewDidDisappear
         if (this._enableLoadedEvents) {
             super.onUnloaded();
         }
@@ -116,36 +115,6 @@ export class Page extends pageCommon.Page {
         return this.ios.view;
     }
 
-    public _invalidateOptionsMenu() {
-        this.populateMenuItems();
-    }
-
-    public populateMenuItems() {
-        var items = this.optionsMenu.getItems();
-
-        var navigationItem: UINavigationItem = (<UIViewController>this.ios).navigationItem;
-        var array: NSMutableArray = items.length > 0 ? NSMutableArray.new() : null;
-
-        for (var i = 0; i < items.length; i++) {
-            var item = items[i];
-            var tapHandler = TapBarItemHandlerImpl.new().initWithOwner(item);
-            // associate handler with menuItem or it will get collected by JSC.
-            (<any>item).handler = tapHandler;
-
-            var barButtonItem: UIBarButtonItem;
-            if (item.icon) {
-                var img = imageSource.fromResource(item.icon);
-                barButtonItem = UIBarButtonItem.alloc().initWithImageStyleTargetAction(img.ios, UIBarButtonItemStyle.UIBarButtonItemStylePlain, tapHandler, "tap");
-            }
-            else {
-                barButtonItem = UIBarButtonItem.alloc().initWithTitleStyleTargetAction(item.text, UIBarButtonItemStyle.UIBarButtonItemStylePlain, tapHandler, "tap");
-            }
-
-            array.addObject(barButtonItem);
-        }
-
-        navigationItem.setRightBarButtonItemsAnimated(array, true);
-    }
 
     protected _showNativeModalView(parent: Page, context: any, closeCallback: Function, fullscreen?: boolean) {
         (<any>this)._isModal = true;
@@ -186,25 +155,14 @@ export class Page extends pageCommon.Page {
             this.requestLayout();
         }
     }
-}
-
-class TapBarItemHandlerImpl extends NSObject {
-    static new(): TapBarItemHandlerImpl {
-        return <TapBarItemHandlerImpl>super.new();
-    }
-
-    private _owner: definition.MenuItem;
-
-    public initWithOwner(owner: definition.MenuItem): TapBarItemHandlerImpl {
-        this._owner = owner;
-        return this;
-    }
-
-    public tap(args) {
-        this._owner._raiseTap();
-    }
-
-    public static ObjCExposedMethods = {
-        "tap": { returns: interop.types.void, params: [interop.types.id] }
-    };
+
+    public onMeasure(widthMeasureSpec: number, heightMeasureSpec: number) {
+        viewModule.View.measureChild(this, this.actionBar, widthMeasureSpec, heightMeasureSpec);
+        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
+    }
+
+    public onLayout(left: number, top: number, right: number, bottom: number) {
+        viewModule.View.layoutChild(this, this.actionBar, 0, 0, right - left, bottom - top);
+        super.onLayout(left, top, right, bottom);
+    }
 }

ui/styling/background.ios.ts

@@ -7,6 +7,10 @@ require("utils/module-merge").merge(common, exports);
 
 export module ios {
     export function createBackgroundUIColor(view: viewModule.View): UIColor {
+        if(!view._nativeView){
+            return null;
+        }
+        
         var background = <common.Background> view.style._getValue(style.backgroundInternalProperty);
         var frame = (<UIView>view._nativeView).frame;
         var boundsWidth = frame.size.width;