From e52b0c4556ee5bc9b8d8d601093922aba6c2b171 Mon Sep 17 00:00:00 2001
From: vakrilov <alexander.vakrilov@telerik.com>
Date: Wed, 10 Jun 2015 15:14:28 +0300
Subject: [PATCH 1/9] Action bar progress

---
 CrossPlatformModules.csproj                   |  37 ++-
 apps/action-bar-demo/app.css                  |  13 +
 apps/action-bar-demo/app.ts                   |   7 +
 apps/action-bar-demo/main-page.ts             |   9 +
 apps/action-bar-demo/main-page.xml            |  11 +
 apps/action-bar-demo/package.json             |   2 +
 .../pages/action-items-icon.ts                |  12 +
 .../pages/action-items-icon.xml               |  14 +
 .../pages/action-items-text.ts                |  11 +
 .../pages/action-items-text.xml               |  14 +
 .../pages/navigation-button.ts                |  46 +++
 .../pages/navigation-button.xml               |  12 +
 apps/action-bar-demo/pages/page-title-icon.ts |  20 ++
 .../action-bar-demo/pages/page-title-icon.xml |   8 +
 apps/action-bar-demo/test-icon.png            | Bin 0 -> 1091 bytes
 apps/tests/pages/page16.ts                    |  50 +--
 apps/tests/pages/page17.ts                    |  22 +-
 apps/tests/pages/page17.xml                   |   9 +-
 apps/tests/ui/page/page-tests-common.ts       |  17 +-
 apps/tests/ui/page/page-tests.ios.ts          |  13 +-
 ui/action-bar/action-bar-common.ts            | 286 ++++++++++++++++++
 ui/action-bar/action-bar.android.ts           | 219 ++++++++++++++
 ui/action-bar/action-bar.d.ts                 |  84 +++++
 ui/action-bar/action-bar.ios.ts               | 140 +++++++++
 ui/action-bar/package.json                    |   2 +
 ui/builder/builder.ts                         |   2 +-
 ui/builder/component-builder.ts               |   4 +-
 ui/content-view/content-view.d.ts             |   4 +-
 ui/core/proxy.d.ts                            |   2 +-
 ui/enums/enums.d.ts                           |  27 +-
 ui/enums/enums.ts                             |  15 +-
 ui/frame/frame.android.ts                     |  41 +--
 ui/frame/frame.ios.ts                         |   7 +-
 ui/image/image-common.ts                      |   2 +-
 ui/page/page-common.ts                        | 174 ++---------
 ui/page/page.android.ts                       |   9 +-
 ui/page/page.d.ts                             |  70 +----
 ui/page/page.ios.ts                           |  60 +---
 38 files changed, 1105 insertions(+), 370 deletions(-)
 create mode 100644 apps/action-bar-demo/app.css
 create mode 100644 apps/action-bar-demo/app.ts
 create mode 100644 apps/action-bar-demo/main-page.ts
 create mode 100644 apps/action-bar-demo/main-page.xml
 create mode 100644 apps/action-bar-demo/package.json
 create mode 100644 apps/action-bar-demo/pages/action-items-icon.ts
 create mode 100644 apps/action-bar-demo/pages/action-items-icon.xml
 create mode 100644 apps/action-bar-demo/pages/action-items-text.ts
 create mode 100644 apps/action-bar-demo/pages/action-items-text.xml
 create mode 100644 apps/action-bar-demo/pages/navigation-button.ts
 create mode 100644 apps/action-bar-demo/pages/navigation-button.xml
 create mode 100644 apps/action-bar-demo/pages/page-title-icon.ts
 create mode 100644 apps/action-bar-demo/pages/page-title-icon.xml
 create mode 100644 apps/action-bar-demo/test-icon.png
 create mode 100644 ui/action-bar/action-bar-common.ts
 create mode 100644 ui/action-bar/action-bar.android.ts
 create mode 100644 ui/action-bar/action-bar.d.ts
 create mode 100644 ui/action-bar/action-bar.ios.ts
 create mode 100644 ui/action-bar/package.json

diff --git a/CrossPlatformModules.csproj b/CrossPlatformModules.csproj
index 0b2f72531..2e9ef179a 100644
--- a/CrossPlatformModules.csproj
+++ b/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>
@@ -71,6 +71,14 @@
     <TypeScriptCompile Include="apps\cuteness.unoptimized\reddit-app-view-model.ts" />
     <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\action-items-text.ts" />
+    <TypeScriptCompile Include="apps\action-bar-demo\pages\navigation-button.ts" />
+    <TypeScriptCompile Include="apps\action-bar-demo\pages\action-items-icon.ts" />
+    <TypeScriptCompile Include="apps\action-bar-demo\pages\page-title-icon.ts" />
     <TypeScriptCompile Include="apps\gallery-app\views\list-picker.ts">
       <DependentUpon>list-picker.xml</DependentUpon>
     </TypeScriptCompile>
@@ -391,6 +399,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 +675,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 +1631,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 +1655,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" />
diff --git a/apps/action-bar-demo/app.css b/apps/action-bar-demo/app.css
new file mode 100644
index 000000000..99315f958
--- /dev/null
+++ b/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;
+}
diff --git a/apps/action-bar-demo/app.ts b/apps/action-bar-demo/app.ts
new file mode 100644
index 000000000..519a85d36
--- /dev/null
+++ b/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();
diff --git a/apps/action-bar-demo/main-page.ts b/apps/action-bar-demo/main-page.ts
new file mode 100644
index 000000000..effdd9a66
--- /dev/null
+++ b/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"),
+    });
+}
+ 
diff --git a/apps/action-bar-demo/main-page.xml b/apps/action-bar-demo/main-page.xml
new file mode 100644
index 000000000..033cf41b2
--- /dev/null
+++ b/apps/action-bar-demo/main-page.xml
@@ -0,0 +1,11 @@
+<?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" />
+    </StackLayout>
+  </ScrollView>
+</Page>
\ No newline at end of file
diff --git a/apps/action-bar-demo/package.json b/apps/action-bar-demo/package.json
new file mode 100644
index 000000000..06e23a177
--- /dev/null
+++ b/apps/action-bar-demo/package.json
@@ -0,0 +1,2 @@
+{ "name" : "action-bar-demo",
+  "main" : "app.js" }
\ No newline at end of file
diff --git a/apps/action-bar-demo/pages/action-items-icon.ts b/apps/action-bar-demo/pages/action-items-icon.ts
new file mode 100644
index 000000000..5b8d5cd19
--- /dev/null
+++ b/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!");
+}
+
diff --git a/apps/action-bar-demo/pages/action-items-icon.xml b/apps/action-bar-demo/pages/action-items-icon.xml
new file mode 100644
index 000000000..d92e72c57
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/apps/action-bar-demo/pages/action-items-text.ts b/apps/action-bar-demo/pages/action-items-text.ts
new file mode 100644
index 000000000..19d962f6e
--- /dev/null
+++ b/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!");
+}
diff --git a/apps/action-bar-demo/pages/action-items-text.xml b/apps/action-bar-demo/pages/action-items-text.xml
new file mode 100644
index 000000000..00722c1e8
--- /dev/null
+++ b/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"  iosPosition="left"/>
+        <ActionItem text="right" tap="rightTap" iosPosition="right"/>
+        <ActionItem text="pop"   tap="popTap"   iosPosition="right"  androidPosition="popup"/>
+      </ActionBar.actionItems>
+    </ActionBar>
+  </Page.actionBar>
+  <StackLayout>
+    <Button text="button" />
+  </StackLayout>
+</Page>
\ No newline at end of file
diff --git a/apps/action-bar-demo/pages/navigation-button.ts b/apps/action-bar-demo/pages/navigation-button.ts
new file mode 100644
index 000000000..f49a680d4
--- /dev/null
+++ b/apps/action-bar-demo/pages/navigation-button.ts
@@ -0,0 +1,46 @@
+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 (j % 3 === 0) {
+        page.actionBar.androidIconVisibility = "always";
+    }
+    else if (j % 3 === 1) {
+        page.actionBar.androidIconVisibility = "never";
+    }
+    else if (j % 3 === 2) {
+        page.actionBar.androidIconVisibility = "auto";
+    }
+    j++;
+    console.log("Visibility changed to: " + page.actionBar.androidIconVisibility);
+}
+
+export function navTap(args: observable.EventData) {
+    console.log("navigation button tapped");
+}
diff --git a/apps/action-bar-demo/pages/navigation-button.xml b/apps/action-bar-demo/pages/navigation-button.xml
new file mode 100644
index 000000000..e19e648b3
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/apps/action-bar-demo/pages/page-title-icon.ts b/apps/action-bar-demo/pages/page-title-icon.ts
new file mode 100644
index 000000000..9b3c4762e
--- /dev/null
+++ b/apps/action-bar-demo/pages/page-title-icon.ts
@@ -0,0 +1,20 @@
+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 (i % 3 === 0) {
+        page.actionBar.icon = "res://ic_test";
+    }
+    else if (i % 3 === 1) {
+        page.actionBar.icon = "~/test-icon.png";
+    }
+    else if (i % 3 === 2) {
+        page.actionBar.icon = undefined;
+    }
+}
+
diff --git a/apps/action-bar-demo/pages/page-title-icon.xml b/apps/action-bar-demo/pages/page-title-icon.xml
new file mode 100644
index 000000000..6305817da
--- /dev/null
+++ b/apps/action-bar-demo/pages/page-title-icon.xml
@@ -0,0 +1,8 @@
+<Page>
+  <Page.actionBar>
+    <ActionBar title="Page Title" icon="res://ic_test"/>
+  </Page.actionBar>
+  <StackLayout>
+    <Button text="button" tap="buttonTap"/>
+  </StackLayout>
+</Page>
\ No newline at end of file
diff --git a/apps/action-bar-demo/test-icon.png b/apps/action-bar-demo/test-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..865d858aea55186f3ef37d0f08ad732bf3fd4023
GIT binary patch
literal 1091
zcmV-J1ibr+P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F8000CENkl<ZSVygw
zO;Q_I6ot=eDW0Mopv+R0Ad5mCBd-9l0>}zztsr6rYOlcZ3L>und5j#|kW^(Bu>z#2
zkou(V>mRH219an_QR>(4-1okF&V_j8^XrY@tVB4G&;(E;*v@}aQvo4>3Bhn)(dT~;
zgGu@h%kJM8ch3Oz0M-S30}xW0hzKQ2vkg4d8KEw+NjQ=FkirP){{1c(l@f3;_CFFl
zg%r%I7_3(GTtRkX-jY6nGf}@67VyiBUw^aYf06XwDtK<gUB5TJ`aXn<!UBG~_S+tL
z1*&&@6kL`O(7f?$%O&~*&&vw{W`G_52J2w$66KD6fin{40B!HR(gNlc{rqN0A3(=}
zg^YIFf65rftRvFyFkmSS4OW7GmKJc^>St?RWf7W2yX~&D6^SV&YeCqCj}?R|u<2En
z7O<@7@SnrLeZ0(b@YO%3__4GAJ92>jZL9yOhyVjHif{qJ2UsgFK)M8t0ZG8f-8q@H
zWkk(9anFfcqDD_mV<KT;CSYh@kP~ol-8})+2GQKK)HQ>J24=0GDA63wobK(e(~$55
z#01drt`!V(3^c~w3qW=xb$gM}NFFANY(f4ZQKQgItknchK?JLwU}jZapkA#a3=f0M
zmRG-&320pVJ&=Duy7a0Db}iUenKP6K9g2aVtGiZk`Vt-zBQiVhurc-@M0D?tg277`
zZ+j=L#=POFTsZivdyJ(zIU{O}yRvlhs(4?d`c%lOt=f0Q?@5>?qEG`JCveG01rVmr
zh@1dttJo7XfH-`t>f2M5xJ?&4Hei!#Z2i7~PZr6s@vxbiko_G2qg5upGcfMTl8qkf
z5IY1;Qssg+(k{+)*3xQ74LlEnXvv2n37Hv@oxu9SII~eV+Sl(q?T+;*-u9hc;KoM8
zp8XzQ0oA=d3WC={Xc4_?Mi~Q^5tOxfYDD({h5#;724MI9SixnH>1N$lpD17^A#`pD
zjdDhmK=@%LRws$IP82ajB~LY_wjvuo(N4&|kEv$A2m>1s+MT)ycY%%(453Eic!L3J
zBiBM28QCcdFJ-{K=T2^cD}gh21x1wa1nZeD$Xb`OPU{G~k19Hk8IZzx6{kh+f2$Ee
zc72=qvD&&8N}dL(^QI6QmHP%F!O^^;FHecFu=#1hw@9i1xM4)OlkzZ)B81zf=<EtC
z<q%J)Hpj&|zE%-eEHyEr&!C1@P1&p5%7DSh1!`U_CifV4s$#l6j=e^}#M<ab7}0ZS
zxD8;Yo^1CYRq&z6py~cgig0GOYC&|@>Yo>NQ#X>CDG=<%eeXzit_5*o-oM3C<D7^i
z_Fh!4>^za136qLCZpIVpqzj`2$OOxHwsZ6TvWj7m6Wew={{yiXxryZYMb-cS002ov
JPDHLkV1im={j&f7

literal 0
HcmV?d00001

diff --git a/apps/tests/pages/page16.ts b/apps/tests/pages/page16.ts
index 3d66f18b4..b349d1fa5 100644
--- a/apps/tests/pages/page16.ts
+++ b/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);
 
diff --git a/apps/tests/pages/page17.ts b/apps/tests/pages/page17.ts
index 6390bf553..45aa3756c 100644
--- a/apps/tests/pages/page17.ts
+++ b/apps/tests/pages/page17.ts
@@ -1,20 +1,36 @@
 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 (i % 3 === 0) {
+        currentPage.actionBar.icon = "res://ic_test";
+    }
+    else if (i % 3 === 1) {
+        currentPage.actionBar.icon = "~/test-icon.png";
+    }
+    else if (i % 3 === 2) {
+        currentPage.actionBar.icon = undefined;
+    }
+}
 
diff --git a/apps/tests/pages/page17.xml b/apps/tests/pages/page17.xml
index a1bd0a0c2..af6b5d26d 100644
--- a/apps/tests/pages/page17.xml
+++ b/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>
\ No newline at end of file
diff --git a/apps/tests/ui/page/page-tests-common.ts b/apps/tests/ui/page/page-tests-common.ts
index 380b65531..b65db608b 100644
--- a/apps/tests/ui/page/page-tests-common.ts
+++ b/apps/tests/ui/page/page-tests-common.ts
@@ -28,6 +28,7 @@ import stackLayoutModule = require("ui/layouts/stack-layout");
 import helper = require("../helper");
 import view = require("ui/core/view");
 import builder = require("ui/builder");
+import actionBar = require("ui/action-bar");
 
 export function addLabelToPage(page: PageModule.Page, text?: string) {
     var label = new LabelModule.Label();
@@ -44,14 +45,14 @@ export function test_menuItem_inherit_bindingContext() {
     var pageFactory = function (): PageModule.Page {
         page = new PageModule.Page();
         page.bindingContext = context;
-        var menuItem = new PageModule.MenuItem();
+        var menuItem = new actionBar.ActionItem();
 
         menuItem.bind({
             sourceProperty: "text",
             targetProperty: "text"
         });
 
-        page.optionsMenu.addItem(menuItem);
+        page.actionBar.actionItems.addItem(menuItem);
 
         label = new LabelModule.Label();
         label.text = "Text";
@@ -62,7 +63,7 @@ export function test_menuItem_inherit_bindingContext() {
     helper.navigate(pageFactory);
 
     try {
-        TKUnit.assertEqual(page.optionsMenu.getItemAt(0).text, "item", "menuItem.text should equal to 'item'");
+        TKUnit.assertEqual(page.actionBar.actionItems.getItemAt(0).text, "item", "menuItem.text should equal to 'item'");
     }
     finally {
         helper.goBack();
@@ -70,15 +71,15 @@ export function test_menuItem_inherit_bindingContext() {
 }
 
 export function test_menuItem_inherit_bindingContext_inXML() {
-    var p = <PageModule.Page>builder.parse("<Page><Page.optionsMenu><MenuItem text=\"{{ myProp }} \" /></Page.optionsMenu></Page>");
+    var p = <PageModule.Page>builder.parse("<Page><Page.actionItems><ActionItem text=\"{{ myProp }} \" /></Page.actionItems></Page>");
     p.bindingContext = { myProp: "success" };
 
-    var menuItem = p.optionsMenu.getItemAt(0);
+    var menuItem = p.actionBar.actionItems.getItemAt(0);
 
     TKUnit.assertEqual(menuItem.text, "success", "menuItem.text");
 };
 
-export function test_Setting_OptionsMenu_doesnt_thrown() {
+export function test_Setting_ActionItems_doesnt_thrown() {
 
     var page: PageModule.Page;
     var label: LabelModule.Label;
@@ -86,9 +87,9 @@ export function test_Setting_OptionsMenu_doesnt_thrown() {
 
     var pageFactory = function (): PageModule.Page {
         page = new PageModule.Page();
-        var menuItem = new PageModule.MenuItem();
+        var menuItem = new actionBar.ActionItem();
         menuItem.text = "Item";
-        page.optionsMenu.addItem(menuItem);
+        page.actionBar.actionItems.addItem(menuItem);
 
         label = new LabelModule.Label();
         label.text = "Text";
diff --git a/apps/tests/ui/page/page-tests.ios.ts b/apps/tests/ui/page/page-tests.ios.ts
index 6b2cd32f8..cc56b7937 100644
--- a/apps/tests/ui/page/page-tests.ios.ts
+++ b/apps/tests/ui/page/page-tests.ios.ts
@@ -4,6 +4,7 @@ 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(PageTestCommon, exports);
@@ -41,9 +42,9 @@ export function test_NavBar_isVisible_when_MenuItems_areSet() {
         page = new PageModule.Page();
         page.on(PageModule.Page.navigatedToEvent, handler);
 
-        var mi = new PageModule.MenuItem();
+        var mi = new actionBar.ActionItem();
         mi.text = "B";
-        page.optionsMenu.addItem(mi);
+        page.actionBar.actionItems.addItem(mi);
         label = new LabelModule.Label();
         label.text = "Text";
         page.content = label;
@@ -67,10 +68,10 @@ export function test_NavBarItemsAreClearedFromNativeWhenClearedFromNativeScript(
 
     var handler = function (data) {
         page.off(PageModule.Page.navigatedToEvent, handler);
-        var menuItems = page.optionsMenu.getItems();
+        var menuItems = page.actionBar.actionItems.getItems();
         var i;
         for (i = menuItems.length - 1; i >= 0; i--) {
-            page.optionsMenu.removeItem(menuItems[i]);
+            page.actionBar.actionItems.removeItem(menuItems[i]);
         }
     }
 
@@ -78,9 +79,9 @@ export function test_NavBarItemsAreClearedFromNativeWhenClearedFromNativeScript(
         page = new PageModule.Page();
         page.on(PageModule.Page.navigatedToEvent, handler);
 
-        var mi = new PageModule.MenuItem();
+        var mi = new actionBar.ActionItem();
         mi.text = "B";
-        page.optionsMenu.addItem(mi);
+        page.actionBar.actionItems.addItem(mi);
         label = new LabelModule.Label();
         label.text = "Text";
         page.content = label;
diff --git a/ui/action-bar/action-bar-common.ts b/ui/action-bar/action-bar-common.ts
new file mode 100644
index 000000000..8109373ac
--- /dev/null
+++ b/ui/action-bar/action-bar-common.ts
@@ -0,0 +1,286 @@
+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");
+
+var ACTION_ITEMS = "actionItems";
+
+export module knownCollections {
+    export var actionItems = "actionItems";
+}
+
+function onTitlePropertyChanged(data: dependencyObservable.PropertyChangeData) {
+    var actionBar = <ActionBar>data.object;
+    actionBar._onTitlePropertyChanged();
+}
+
+function onIconPropertyChanged(data: dependencyObservable.PropertyChangeData) {
+    var actionBar = <ActionBar>data.object;
+    actionBar._onIconPropertyChanged();
+}
+
+export class ActionBar extends bindable.Bindable implements dts.ActionBar {
+    public static titleProperty = new dependencyObservable.Property("title", "ActionBar", new proxy.PropertyMetadata(undefined, dependencyObservable.PropertyMetadataSettings.None, onTitlePropertyChanged));
+    public static iconProperty = new dependencyObservable.Property("icon", "ActionBar", new proxy.PropertyMetadata(undefined, dependencyObservable.PropertyMetadataSettings.None, onIconPropertyChanged));
+    public static androidIconVisibilityProperty = new dependencyObservable.Property("androidIconVisibility", "ActionBar", new proxy.PropertyMetadata("auto", dependencyObservable.PropertyMetadataSettings.None, onIconPropertyChanged));
+
+    private _actionItems: ActionItems;
+    private _navigationButton: NavigationButton;
+    private _page: pages.Page;
+
+    get title(): string {
+        return this._getValue(ActionBar.titleProperty);
+    }
+    set title(value: string) {
+        this._setValue(ActionBar.titleProperty, value);
+    }
+
+    get icon(): string {
+        return this._getValue(ActionBar.iconProperty);
+    }
+    set icon(value: string) {
+        this._setValue(ActionBar.iconProperty, value);
+    }
+
+    get androidIconVisibility(): string {
+        return this._getValue(ActionBar.androidIconVisibilityProperty);
+    }
+    set androidIconVisibility(value: string) {
+        this._setValue(ActionBar.androidIconVisibilityProperty, value);
+    }
+
+    get navigationButton(): NavigationButton {
+        return this._navigationButton;
+    }
+    set navigationButton(value: NavigationButton) {
+        if (this._navigationButton !== value) {
+            if (this._navigationButton) {
+                detachActionItem(this._navigationButton);
+            }
+
+            this._navigationButton = value;
+
+            if (this._navigationButton) {
+                attachActionItem(this._navigationButton, this);
+            }
+
+            this.updateActionBar();
+        }
+    }
+
+    get actionItems(): ActionItems {
+        return this._actionItems;
+    }
+    set actionItems(value: ActionItems) {
+        throw new Error("actionItems property is read-only");
+    }
+
+    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);
+    }
+
+    constructor() {
+        super();
+        this._actionItems = new ActionItems(this);
+    }
+
+    public static onTitleChanged
+
+    public updateActionBar() {
+        // 
+    }
+
+    public _onTitlePropertyChanged() {
+        //
+    }
+
+    public _onIconPropertyChanged() {
+        //
+    }
+
+    public _updateAndroidActionBar(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;
+        }
+    }
+
+    public shouldShow(): boolean {
+        if (this.title ||
+            this.icon ||
+            this.navigationButton ||
+            this.actionItems.getItems().length > 0) {
+
+            return true;
+        }
+
+        return false;
+    }
+}
+
+export class ActionItems implements dts.ActionItems {
+    private _items: Array<ActionItem> = new Array<ActionItem>();
+    private _actionBar: ActionBar;
+
+    constructor(actionBar: ActionBar) {
+        this._actionBar = actionBar;
+    }
+
+    public addItem(item: ActionItem): void {
+        if (!item) {
+            throw new Error("Cannot add empty item");
+        }
+
+        this._items.push(item);
+
+        attachActionItem(item, this._actionBar);
+
+        this.invalidate();
+    }
+
+    public removeItem(item: 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");
+        }
+
+        detachActionItem(item);
+
+        this._items.splice(itemIndex, 1);
+        this.invalidate();
+    }
+
+    public getItems(): Array<ActionItem> {
+        return this._items.slice();
+    }
+
+    public getItemAt(index: number): ActionItem {
+        if (index < 0 || index >= this._items.length) {
+            return undefined;
+        }
+
+        return this._items[index];
+    }
+
+    public setItems(items: Array<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.updateActionBar();
+        }
+    }
+}
+
+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 = <ActionItem>data.object;
+        if (menuItem.actionBar) {
+            menuItem.actionBar.updateActionBar();
+        }
+    }
+
+    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);
+    }
+
+    public _raiseTap() {
+        this._emit(ActionItem.tapEvent);
+    }
+
+    actionBar: ActionBar;
+}
+
+export class ActionItem extends ActionItemBase {
+    private _androidPosition: string = enums.AndroidActionItemPosition.actionBar;
+    private _iosPosition: string = enums.IOSActionItemPosition.right;
+
+    get androidPosition(): string {
+        return this._androidPosition;
+    }
+    set androidPosition(value: string) {
+        this._androidPosition = value;
+    }
+
+    get iosPosition(): string {
+        return this._iosPosition;
+    }
+    set iosPosition(value: string) {
+        this._iosPosition = value;
+    }
+}
+
+export class NavigationButton extends ActionItemBase {
+
+}
+
+function attachActionItem(item: ActionItemBase, bar: ActionBar) {
+    item.actionBar = this._actionBar;
+    item.bind({
+        sourceProperty: "bindingContext",
+        targetProperty: "bindingContext"
+    }, this._actionBar);
+}
+
+function detachActionItem(item: ActionItemBase) {
+    item.actionBar = undefined;
+    item.unbind("bindingContext");
+}
\ No newline at end of file
diff --git a/ui/action-bar/action-bar.android.ts b/ui/action-bar/action-bar.android.ts
new file mode 100644
index 000000000..8d74042c4
--- /dev/null
+++ b/ui/action-bar/action-bar.android.ts
@@ -0,0 +1,219 @@
+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");
+
+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 ActionBar extends common.ActionBar {
+    private _appResources: android.content.res.Resources;
+
+    constructor() {
+        super();
+
+        this._appResources = application.android.context.getResources();
+        this.actionItems
+    }
+
+    public updateActionBar() {
+        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 _updateAndroidActionBar(menu: android.view.IMenu) {
+        var actionBar: android.app.ActionBar = frame.topmost().android.actionBar;
+
+        this._addActionItems(menu);
+
+        // Set title
+        this._updateTitle(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) {
+                try {
+                    // TODO: Find a better way to set the icon instead of using reflection
+                    var drawableOrId = getDrawableOrResourceId(navButton.icon, this._appResources);
+                    if (!drawableOrId) {
+                        drawableOrId = 0;
+                    }
+
+                    var arr, arr2, method;
+                    if (types.isNumber(drawableOrId)) {
+                        arr[0] = java.lang.Integer.TYPE;
+                        method = actionBar.getClass().getMethod("setHomeAsUpIndicator", arr);
+
+                        arr2 = java.lang.reflect.Array.newInstance(java.lang.Object.class, 1);
+                        arr2[0] = new java.lang.Integer(drawableOrId);
+                        method.invoke(actionBar, arr2);
+                    } else {
+                        arr = java.lang.reflect.Array.newInstance(java.lang.Class.class, 1);
+                        arr[0] = android.graphics.drawable.Drawable.class;
+                        method = actionBar.getClass().getMethod("setHomeAsUpIndicator", arr);
+
+                        arr2 = java.lang.reflect.Array.newInstance(java.lang.Object.class, 1);
+                        arr2[0] = drawableOrId;
+                        method.invoke(actionBar, arr2);
+                    }
+                }
+                catch (e) {
+                    trace.write("Failed to set navigation icon: " + e, trace.categories.Error, trace.messageType.error);
+                }
+            }
+            actionBar.setDisplayHomeAsUpEnabled(true);
+        }
+        else {
+            actionBar.setDisplayHomeAsUpEnabled(false);
+        }
+    }
+
+    public _updateIcon(actionBar: android.app.ActionBar) {
+        var icon = this.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 iconVisibility: boolean;
+        if (this.androidIconVisibility === enums.AndroidActionBarIconVisibility.always) {
+            iconVisibility = true;
+        }
+
+        var visibility = getIconVisibility(this.androidIconVisibility);
+        actionBar.setDisplayShowHomeEnabled(visibility);
+    }
+
+    public _updateTitle(actionBar: android.app.ActionBar) {
+        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._updateTitle(frame.topmost().android.actionBar);
+        }
+    }
+
+    public _onIconPropertyChanged() {
+        if (frame.topmost().currentPage === this.page) {
+            this._updateIcon(frame.topmost().android.actionBar);
+        }
+    } 
+}
+
+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: common.ActionItem): number {
+    switch (menuItem.androidPosition) {
+        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;
+    }
+}
\ No newline at end of file
diff --git a/ui/action-bar/action-bar.d.ts b/ui/action-bar/action-bar.d.ts
new file mode 100644
index 000000000..d877c8bca
--- /dev/null
+++ b/ui/action-bar/action-bar.d.ts
@@ -0,0 +1,84 @@
+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 bindable.Bindable implements view.AddArrayFromBuilder, view.AddChildFromBuilder {
+        title: string;
+        icon: string;
+        androidIconVisibility: string;
+
+        navigationButton: NavigationButton;
+        actionItems: ActionItems;
+
+        page: pages.Page;
+
+        shouldShow(): boolean
+
+        updateActionBar();
+
+         //@private
+        _updateAndroidActionBar(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;
+
+        /**
+         * 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 {
+        androidPosition: string;
+        iosPosition: string;
+    }
+
+    export class NavigationButton extends ActionItemBase {
+
+    }
+}
\ No newline at end of file
diff --git a/ui/action-bar/action-bar.ios.ts b/ui/action-bar/action-bar.ios.ts
new file mode 100644
index 000000000..1eb88fd8e
--- /dev/null
+++ b/ui/action-bar/action-bar.ios.ts
@@ -0,0 +1,140 @@
+import common = require("ui/action-bar/action-bar-common");
+import definition = require("ui/action-bar");
+import imageSource = require("image-source");
+import frameModule = require("ui/frame");
+import enums = require("ui/enums");
+
+declare var exports;
+require("utils/module-merge").merge(common, exports);
+
+export class ActionBar extends common.ActionBar {
+    public updateActionBar() {
+        // 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;
+
+        // 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].iosPosition === 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: common.ActionItemBase): 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;
+    }
+}
+
+class TapBarItemHandlerImpl extends NSObject {
+    static new(): TapBarItemHandlerImpl {
+        return <TapBarItemHandlerImpl>super.new();
+    }
+
+    private _owner: definition.ActionItemBase;
+
+    public initWithOwner(owner: definition.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] }
+    };
+}
diff --git a/ui/action-bar/package.json b/ui/action-bar/package.json
new file mode 100644
index 000000000..8a58f8176
--- /dev/null
+++ b/ui/action-bar/package.json
@@ -0,0 +1,2 @@
+{ "name" : "action-bar",
+  "main" : "action-bar.js" }
\ No newline at end of file
diff --git a/ui/builder/builder.ts b/ui/builder/builder.ts
index 90f541586..060c4a325 100644
--- a/ui/builder/builder.ts
+++ b/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)) {
diff --git a/ui/builder/component-builder.ts b/ui/builder/component-builder.ts
index 7d20422c1..da691019e 100644
--- a/ui/builder/component-builder.ts
+++ b/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";
diff --git a/ui/content-view/content-view.d.ts b/ui/content-view/content-view.d.ts
index 8aed6b2ee..2d4eb766c 100644
--- a/ui/content-view/content-view.d.ts
+++ b/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
     }
 } 
\ No newline at end of file
diff --git a/ui/core/proxy.d.ts b/ui/core/proxy.d.ts
index 62d99c376..bce9fc113 100644
--- a/ui/core/proxy.d.ts
+++ b/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;
     }
diff --git a/ui/enums/enums.d.ts b/ui/enums/enums.d.ts
index 268302f8c..eed1541b0 100644
--- a/ui/enums/enums.d.ts
+++ b/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;
+    }
 }
\ No newline at end of file
diff --git a/ui/enums/enums.ts b/ui/enums/enums.ts
index bc3429fa3..ebaa1a3d8 100644
--- a/ui/enums/enums.ts
+++ b/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";
-}
\ No newline at end of file
+}
diff --git a/ui/frame/frame.android.ts b/ui/frame/frame.android.ts
index 45dc84146..5a8ee4b55 100644
--- a/ui/frame/frame.android.ts
+++ b/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._updateAndroidActionBar(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);
-}
\ No newline at end of file
+}
+
diff --git a/ui/frame/frame.ios.ts b/ui/frame/frame.ios.ts
index d8535e238..33680275e 100644
--- a/ui/frame/frame.ios.ts
+++ b/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.updateActionBar();
     }
 
     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
diff --git a/ui/image/image-common.ts b/ui/image/image-common.ts
index 87db37271..233d36265 100644
--- a/ui/image/image-common.ts
+++ b/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 {
diff --git a/ui/page/page-common.ts b/ui/page/page-common.ts
index 486ff033e..cd81004a4 100644
--- a/ui/page/page-common.ts
+++ b/ui/page/page-common.ts
@@ -5,10 +5,9 @@ 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";
@@ -28,11 +27,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 +39,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 +83,21 @@ 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._actionBar = value;
+            this._actionBar.page = this;
+        }
     }
 
     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,10 +216,6 @@ export class Page extends contentView.ContentView implements dts.Page, view.AddA
         return this._styleScope;
     }
 
-    public _invalidateOptionsMenu() {
-        // 
-    }
-
     private _applyCss() {
         if (this._cssApplied) {
             return;
@@ -233,133 +243,5 @@ 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");
-        }
-
-        this._items.push(item);
-        item.menu = this;
-        item.bind({
-            sourceProperty: "bindingContext",
-            targetProperty: "bindingContext"
-        }, this._page);
-
-        this.invalidate();
-    }
-
-    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;
 }
\ No newline at end of file
diff --git a/ui/page/page.android.ts b/ui/page/page.android.ts
index e1387e7ef..2a38284c2 100644
--- a/ui/page/page.android.ts
+++ b/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 */
diff --git a/ui/page/page.d.ts b/ui/page/page.d.ts
index 496c2b79a..267360ac7 100644
--- a/ui/page/page.d.ts
+++ b/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;
-    }
 }
\ No newline at end of file
diff --git a/ui/page/page.ios.ts b/ui/page/page.ios.ts
index 3caa48bd2..ea21da5ff 100644
--- a/ui/page/page.ios.ts
+++ b/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;
@@ -187,24 +156,3 @@ export class Page extends pageCommon.Page {
         }
     }
 }
-
-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] }
-    };
-}

From 5c86e042c19df92549ba71dd8ab2a15c7f0df932 Mon Sep 17 00:00:00 2001
From: vakrilov <alexander.vakrilov@telerik.com>
Date: Thu, 9 Jul 2015 13:48:58 +0300
Subject: [PATCH 2/9] Fix - nav button with reflection

---
 apps/action-bar-demo/pages/page-title-icon.ts |  18 +++++
 .../action-bar-demo/pages/page-title-icon.xml |   1 +
 apps/action-bar-demo/test-icon.png            | Bin 1091 -> 1304 bytes
 ui/action-bar/action-bar.android.ts           |  69 ++++++++++--------
 4 files changed, 59 insertions(+), 29 deletions(-)

diff --git a/apps/action-bar-demo/pages/page-title-icon.ts b/apps/action-bar-demo/pages/page-title-icon.ts
index 9b3c4762e..18c913276 100644
--- a/apps/action-bar-demo/pages/page-title-icon.ts
+++ b/apps/action-bar-demo/pages/page-title-icon.ts
@@ -18,3 +18,21 @@ export function buttonTap(args: observable.EventData) {
     }
 }
 
+
+var j = 0;
+export function visibilityTap(args: observable.EventData) {
+    var page = <pages.Page>view.getAncestor(<view.View>args.object, "Page")
+
+    if (j % 3 === 0) {
+        page.actionBar.androidIconVisibility = "always";
+    }
+    else if (j % 3 === 1) {
+        page.actionBar.androidIconVisibility = "never";
+    }
+    else if (j % 3 === 2) {
+        page.actionBar.androidIconVisibility = "auto";
+    }
+    j++;
+    console.log("Visibility changed to: " + page.actionBar.androidIconVisibility);
+}
+
diff --git a/apps/action-bar-demo/pages/page-title-icon.xml b/apps/action-bar-demo/pages/page-title-icon.xml
index 6305817da..2edb3ff80 100644
--- a/apps/action-bar-demo/pages/page-title-icon.xml
+++ b/apps/action-bar-demo/pages/page-title-icon.xml
@@ -4,5 +4,6 @@
   </Page.actionBar>
   <StackLayout>
     <Button text="button" tap="buttonTap"/>
+    <Button text="change main icon visibility" tap="visibilityTap"/>
   </StackLayout>
 </Page>
\ No newline at end of file
diff --git a/apps/action-bar-demo/test-icon.png b/apps/action-bar-demo/test-icon.png
index 865d858aea55186f3ef37d0f08ad732bf3fd4023..bf42af4aea371e83cb0f0ce668628bfa7ea080fa 100644
GIT binary patch
literal 1304
zcmV+z1?T#SP)<h;3K|Lk000e1NJLTq003YB003YJ1ONa4NRhv@000EvNkl<ZcmeI(
zOK4QrAHeZ1={(~DyD8{sV%k~}O3`XaUn*&8v*<1usTdPcl%%4?C{m@0s9hC{#;9Nm
ze?)7o5^2#o3tfm65&pC#FoM+@oBF8H#AG^&<0Q`fy2_&0x%Zxv%(;#*pYK|e3%_$c
z=Uk+qpumVA^_--WK?dohjXHunM?U5bV(B)EcrFxi0I{i+BJ$n=#G%&wA0Bb3mOK{Z
z4&u@+0_3fFM4=_*t&@mCC&*i!h(b5X3$xkHZzRaj$7Oah4H!feN&(Z@!DZrPNboCP
zF%wUf@)Key%{QbFg_8V_G-ByTrr?oEdJzNlFc%NJ#UsQ}{mjO&ar}iCtb<~V`T{ZB
zRtyUA5HZ|+d>Hc~;z9E<W)tE;>oKMUQS32?sG$TueoCm}Fpm+%c45q3M5*tXgjIy&
z1|Gn`2&HMn&T7(#Yt0z*0peOCPF5qX&Bd4i-LAvq!gY}T<^>Ge=CX7r;byYSmhUr+
z8bb$S+aXjOL2Ub-5Qe=;0<ozE6$=rY`gk1=yu*DYYbB_dYCHYqcw{2S$RJqrqaui4
zEyK6Ggl8h0Kyv&5$C!vm-lKa|BUEO)4}BXClru2OMO=&6^bfNzY%G5wwjD;rQN*?z
z6l2s5mw(72xG5opIJ5<W0`wq`eUF<q#IY`X7_$IzZ8c8T=KqN-?eGYnk~VN6GjO0e
z&Sb1gXftr2F?OU(afF3TB}kAmYB@>@$;%U&ftt-PVzbRN{~9%v`PV4yL=5*iMvbKt
zG1wo3J=@F~D8Vc|Fwf9Rc)+`OWC}kZmWJ4`czu}UYn~vM+KAw(ne5^h;-u-}XSPzR
z^^xyowsVPxq>1x?zT}PP=`(8wo){v@Jz_*@rHKmsxNB3~DY*+!K@<Ck5~GVGDYPY#
z|MZBntfLesb%;WXaZ<*5&RKst{b;*~WbGo$2$Nlq+lWh@1jsJTaxNiRyNkA%;|p&a
z6Ub%};!+LSyvTOPi{o~*MG?n(*+_t=wIUAf;b}oO(T6y83T>^3Yu9-nt0IR#xtk)a
z7H|V`Z4cU-5Ty=Kj8!eSvdn%BR%1AbD76x86^LS2n2uF|C7j?UDN=NBoW%sNn!!~>
zu{mh-^9WHaPBpqdB7rE@j}LvEMU)$&0UaxNf+%-}5m|?5l%Ww-pO8T`TEmExB3fl=
zK*b6&ntyME5xR(IHAJ<->_0)YI?sqLLo|!?8ct@AKr~y*h=qB8Xci-koiSWRG`mO0
z$ai6f_G9NDqTOajWdgm3c9l817VBmlqqGsx?ivBCg4}pE*Nj1~Bie1q$-U}T{Nz9t
zqFoQ;E&KgGM6(R@4gaSGjc;As5$*PpGsRp%H0vV7urS?-X6=N?q3OgC&FUGp9MP<o
zSIDtyh7heTFzgbd)gV<E(4f5un+!mi_TsI>kVef%SPQ^<&0l{d1~q66QWSu5TEkO^
zVbvPTc>o^)k{V053J**thA37}g~p5XRXh@AKcdtsniMC$g%F;q<Qn2y3;UGzJoCYO
z0XFauaqKiv*9~(sex8}}Y~jA+T*n+wTbmijGZ&(s3uJ7r#k*`~{ya+wkw>PmmM8<(
z7ipGH6=zsOggoV=oK>`Nns)9oK#COo+@+mU>|rHy@R2hG1qB5K1^)tOypHj&Ah#O;
O0000<MNUMnLSTY+D_SxD

literal 1091
zcmV-J1ibr+P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F8000CENkl<ZSVygw
zO;Q_I6ot=eDW0Mopv+R0Ad5mCBd-9l0>}zztsr6rYOlcZ3L>und5j#|kW^(Bu>z#2
zkou(V>mRH219an_QR>(4-1okF&V_j8^XrY@tVB4G&;(E;*v@}aQvo4>3Bhn)(dT~;
zgGu@h%kJM8ch3Oz0M-S30}xW0hzKQ2vkg4d8KEw+NjQ=FkirP){{1c(l@f3;_CFFl
zg%r%I7_3(GTtRkX-jY6nGf}@67VyiBUw^aYf06XwDtK<gUB5TJ`aXn<!UBG~_S+tL
z1*&&@6kL`O(7f?$%O&~*&&vw{W`G_52J2w$66KD6fin{40B!HR(gNlc{rqN0A3(=}
zg^YIFf65rftRvFyFkmSS4OW7GmKJc^>St?RWf7W2yX~&D6^SV&YeCqCj}?R|u<2En
z7O<@7@SnrLeZ0(b@YO%3__4GAJ92>jZL9yOhyVjHif{qJ2UsgFK)M8t0ZG8f-8q@H
zWkk(9anFfcqDD_mV<KT;CSYh@kP~ol-8})+2GQKK)HQ>J24=0GDA63wobK(e(~$55
z#01drt`!V(3^c~w3qW=xb$gM}NFFANY(f4ZQKQgItknchK?JLwU}jZapkA#a3=f0M
zmRG-&320pVJ&=Duy7a0Db}iUenKP6K9g2aVtGiZk`Vt-zBQiVhurc-@M0D?tg277`
zZ+j=L#=POFTsZivdyJ(zIU{O}yRvlhs(4?d`c%lOt=f0Q?@5>?qEG`JCveG01rVmr
zh@1dttJo7XfH-`t>f2M5xJ?&4Hei!#Z2i7~PZr6s@vxbiko_G2qg5upGcfMTl8qkf
z5IY1;Qssg+(k{+)*3xQ74LlEnXvv2n37Hv@oxu9SII~eV+Sl(q?T+;*-u9hc;KoM8
zp8XzQ0oA=d3WC={Xc4_?Mi~Q^5tOxfYDD({h5#;724MI9SixnH>1N$lpD17^A#`pD
zjdDhmK=@%LRws$IP82ajB~LY_wjvuo(N4&|kEv$A2m>1s+MT)ycY%%(453Eic!L3J
zBiBM28QCcdFJ-{K=T2^cD}gh21x1wa1nZeD$Xb`OPU{G~k19Hk8IZzx6{kh+f2$Ee
zc72=qvD&&8N}dL(^QI6QmHP%F!O^^;FHecFu=#1hw@9i1xM4)OlkzZ)B81zf=<EtC
z<q%J)Hpj&|zE%-eEHyEr&!C1@P1&p5%7DSh1!`U_CifV4s$#l6j=e^}#M<ab7}0ZS
zxD8;Yo^1CYRq&z6py~cgig0GOYC&|@>Yo>NQ#X>CDG=<%eeXzit_5*o-oM3C<D7^i
z_Fh!4>^za136qLCZpIVpqzj`2$OOxHwsZ6TvWj7m6Wew={{yiXxryZYMb-cS002ov
JPDHLkV1im={j&f7

diff --git a/ui/action-bar/action-bar.android.ts b/ui/action-bar/action-bar.android.ts
index 8d74042c4..52dad6d48 100644
--- a/ui/action-bar/action-bar.android.ts
+++ b/ui/action-bar/action-bar.android.ts
@@ -29,7 +29,7 @@ export class ActionBar extends common.ActionBar {
         }
     }
 
-    public _onAndroidItemSelected(itemId: number): boolean{
+    public _onAndroidItemSelected(itemId: number): boolean {
         var menuItem = this.actionItems.getItemAt(itemId - ACTION_ITEM_ID_OFFSET);
         if (menuItem) {
             menuItem._raiseTap();
@@ -66,34 +66,12 @@ export class ActionBar extends common.ActionBar {
         if (navButton) {
             // No API to set the icon in pre-lvl 18 
             if (API_LVL >= 18) {
-                try {
-                    // TODO: Find a better way to set the icon instead of using reflection
-                    var drawableOrId = getDrawableOrResourceId(navButton.icon, this._appResources);
-                    if (!drawableOrId) {
-                        drawableOrId = 0;
-                    }
-
-                    var arr, arr2, method;
-                    if (types.isNumber(drawableOrId)) {
-                        arr[0] = java.lang.Integer.TYPE;
-                        method = actionBar.getClass().getMethod("setHomeAsUpIndicator", arr);
-
-                        arr2 = java.lang.reflect.Array.newInstance(java.lang.Object.class, 1);
-                        arr2[0] = new java.lang.Integer(drawableOrId);
-                        method.invoke(actionBar, arr2);
-                    } else {
-                        arr = java.lang.reflect.Array.newInstance(java.lang.Class.class, 1);
-                        arr[0] = android.graphics.drawable.Drawable.class;
-                        method = actionBar.getClass().getMethod("setHomeAsUpIndicator", arr);
-
-                        arr2 = java.lang.reflect.Array.newInstance(java.lang.Object.class, 1);
-                        arr2[0] = drawableOrId;
-                        method.invoke(actionBar, arr2);
-                    }
-                }
-                catch (e) {
-                    trace.write("Failed to set navigation icon: " + e, trace.categories.Error, trace.messageType.error);
+                var drawableOrId = getDrawableOrResourceId(navButton.icon, this._appResources);
+                if (!drawableOrId) {
+                    drawableOrId = 0;
                 }
+
+                setHomeAsUpIndicator(actionBar, drawableOrId);
             }
             actionBar.setDisplayHomeAsUpEnabled(true);
         }
@@ -163,7 +141,40 @@ export class ActionBar extends common.ActionBar {
         if (frame.topmost().currentPage === this.page) {
             this._updateIcon(frame.topmost().android.actionBar);
         }
-    } 
+    }
+}
+
+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 {

From 53dc1c65bfa462ac6ed6624a18f1c13c84aad2db Mon Sep 17 00:00:00 2001
From: vakrilov <alexander.vakrilov@telerik.com>
Date: Fri, 10 Jul 2015 13:46:35 +0300
Subject: [PATCH 3/9] data binding

---
 CrossPlatformModules.csproj                   |  2 +
 apps/action-bar-demo/main-page.xml            |  1 +
 apps/action-bar-demo/pages/data-binding.ts    | 58 +++++++++++++++++++
 apps/action-bar-demo/pages/data-binding.xml   | 14 +++++
 apps/action-bar-demo/pages/page-title-icon.ts |  1 -
 ui/action-bar/action-bar-common.ts            | 33 +++++------
 ui/page/page-common.ts                        |  2 -
 7 files changed, 88 insertions(+), 23 deletions(-)
 create mode 100644 apps/action-bar-demo/pages/data-binding.ts
 create mode 100644 apps/action-bar-demo/pages/data-binding.xml

diff --git a/CrossPlatformModules.csproj b/CrossPlatformModules.csproj
index 2e9ef179a..800e0ad0a 100644
--- a/CrossPlatformModules.csproj
+++ b/CrossPlatformModules.csproj
@@ -61,6 +61,7 @@
   <Import Project="$(MSBuildBinPath)\Microsoft.CSharp.targets" />
   <Import Project="$(VSToolsPath)\WebApplications\Microsoft.WebApplication.targets" Condition="'$(VSToolsPath)' != ''" />
   <ItemGroup>
+    <TypeScriptCompile Include="apps\action-bar-demo\pages\data-binding.ts" />
     <TypeScriptCompile Include="apps\cuteness.unoptimized\app.ts" />
     <TypeScriptCompile Include="apps\cuteness.unoptimized\details-page.ts">
       <DependentUpon>details-page.xml</DependentUpon>
@@ -69,6 +70,7 @@
       <DependentUpon>main-page.xml</DependentUpon>
     </TypeScriptCompile>
     <TypeScriptCompile Include="apps\cuteness.unoptimized\reddit-app-view-model.ts" />
+    <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" />
diff --git a/apps/action-bar-demo/main-page.xml b/apps/action-bar-demo/main-page.xml
index 033cf41b2..9246e5bd6 100644
--- a/apps/action-bar-demo/main-page.xml
+++ b/apps/action-bar-demo/main-page.xml
@@ -6,6 +6,7 @@
       <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" />
     </StackLayout>
   </ScrollView>
 </Page>
\ No newline at end of file
diff --git a/apps/action-bar-demo/pages/data-binding.ts b/apps/action-bar-demo/pages/data-binding.ts
new file mode 100644
index 000000000..2832b7fb5
--- /dev/null
+++ b/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++;
+}
diff --git a/apps/action-bar-demo/pages/data-binding.xml b/apps/action-bar-demo/pages/data-binding.xml
new file mode 100644
index 000000000..558e4e9d6
--- /dev/null
+++ b/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 }}"  iosPosition="left"/>
+        <ActionItem icon="{{ secondItemIcon }}" tap="{{ secondItemTap }}" iosPosition="right"/>
+      </ActionBar.actionItems>
+    </ActionBar>
+  </Page.actionBar>
+  <StackLayout>
+    <Button text="button" tap="buttonTap"/>
+  </StackLayout>
+</Page>
\ No newline at end of file
diff --git a/apps/action-bar-demo/pages/page-title-icon.ts b/apps/action-bar-demo/pages/page-title-icon.ts
index 18c913276..0605e6f50 100644
--- a/apps/action-bar-demo/pages/page-title-icon.ts
+++ b/apps/action-bar-demo/pages/page-title-icon.ts
@@ -35,4 +35,3 @@ export function visibilityTap(args: observable.EventData) {
     j++;
     console.log("Visibility changed to: " + page.actionBar.androidIconVisibility);
 }
-
diff --git a/ui/action-bar/action-bar-common.ts b/ui/action-bar/action-bar-common.ts
index 8109373ac..586f69100 100644
--- a/ui/action-bar/action-bar-common.ts
+++ b/ui/action-bar/action-bar-common.ts
@@ -57,13 +57,13 @@ export class ActionBar extends bindable.Bindable implements dts.ActionBar {
     set navigationButton(value: NavigationButton) {
         if (this._navigationButton !== value) {
             if (this._navigationButton) {
-                detachActionItem(this._navigationButton);
+                this._navigationButton.actionBar = undefined;
             }
 
             this._navigationButton = value;
 
             if (this._navigationButton) {
-                attachActionItem(this._navigationButton, this);
+                this._navigationButton.actionBar = this;
             }
 
             this.updateActionBar();
@@ -130,6 +130,15 @@ export class ActionBar extends bindable.Bindable implements dts.ActionBar {
         }
     }
 
+    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 shouldShow(): boolean {
         if (this.title ||
             this.icon ||
@@ -157,9 +166,7 @@ export class ActionItems implements dts.ActionItems {
         }
 
         this._items.push(item);
-
-        attachActionItem(item, this._actionBar);
-
+        item.actionBar = this._actionBar;
         this.invalidate();
     }
 
@@ -173,9 +180,8 @@ export class ActionItems implements dts.ActionItems {
             throw new Error("Cannot find item to remove");
         }
 
-        detachActionItem(item);
-
         this._items.splice(itemIndex, 1);
+        item.actionBar = undefined;
         this.invalidate();
     }
 
@@ -271,16 +277,3 @@ export class ActionItem extends ActionItemBase {
 export class NavigationButton extends ActionItemBase {
 
 }
-
-function attachActionItem(item: ActionItemBase, bar: ActionBar) {
-    item.actionBar = this._actionBar;
-    item.bind({
-        sourceProperty: "bindingContext",
-        targetProperty: "bindingContext"
-    }, this._actionBar);
-}
-
-function detachActionItem(item: ActionItemBase) {
-    item.actionBar = undefined;
-    item.unbind("bindingContext");
-}
\ No newline at end of file
diff --git a/ui/page/page-common.ts b/ui/page/page-common.ts
index cd81004a4..a4ac991db 100644
--- a/ui/page/page-common.ts
+++ b/ui/page/page-common.ts
@@ -10,8 +10,6 @@ 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",

From 53c7bebfeca758b1039accadcacd027dd1073f5b Mon Sep 17 00:00:00 2001
From: vakrilov <alexander.vakrilov@telerik.com>
Date: Fri, 10 Jul 2015 18:47:12 +0300
Subject: [PATCH 4/9] Center View

---
 CrossPlatformModules.csproj                   |  8 +++-
 apps/action-bar-demo/main-page.xml            |  3 ++
 .../pages/center-view-segmented.ts            |  8 ++++
 .../pages/center-view-segmented.xml           | 18 ++++++++
 .../pages/center-view-stack.ts                |  8 ++++
 .../pages/center-view-stack.xml               | 16 +++++++
 apps/action-bar-demo/pages/center-view.ts     | 12 +++++
 apps/action-bar-demo/pages/center-view.xml    | 12 +++++
 apps/action-bar-demo/pages/page-title-icon.ts |  1 -
 ui/action-bar/action-bar-common.ts            | 44 ++++++++++++++++++-
 ui/action-bar/action-bar.android.ts           | 32 +++++++++-----
 ui/action-bar/action-bar.d.ts                 |  4 +-
 ui/action-bar/action-bar.ios.ts               | 34 ++++++++++++++
 ui/core/view.ios.ts                           |  4 ++
 ui/page/page-common.ts                        |  8 +++-
 ui/page/page.ios.ts                           | 10 +++++
 ui/styling/background.ios.ts                  |  4 ++
 17 files changed, 209 insertions(+), 17 deletions(-)
 create mode 100644 apps/action-bar-demo/pages/center-view-segmented.ts
 create mode 100644 apps/action-bar-demo/pages/center-view-segmented.xml
 create mode 100644 apps/action-bar-demo/pages/center-view-stack.ts
 create mode 100644 apps/action-bar-demo/pages/center-view-stack.xml
 create mode 100644 apps/action-bar-demo/pages/center-view.ts
 create mode 100644 apps/action-bar-demo/pages/center-view.xml

diff --git a/CrossPlatformModules.csproj b/CrossPlatformModules.csproj
index 800e0ad0a..a1551a6ca 100644
--- a/CrossPlatformModules.csproj
+++ b/CrossPlatformModules.csproj
@@ -61,6 +61,9 @@
   <Import Project="$(MSBuildBinPath)\Microsoft.CSharp.targets" />
   <Import Project="$(VSToolsPath)\WebApplications\Microsoft.WebApplication.targets" Condition="'$(VSToolsPath)' != ''" />
   <ItemGroup>
+    <TypeScriptCompile Include="apps\action-bar-demo\pages\center-view-stack.ts" />
+    <TypeScriptCompile Include="apps\action-bar-demo\pages\center-view-segmented.ts" />
+    <TypeScriptCompile Include="apps\action-bar-demo\pages\center-view.ts" />
     <TypeScriptCompile Include="apps\action-bar-demo\pages\data-binding.ts" />
     <TypeScriptCompile Include="apps\cuteness.unoptimized\app.ts" />
     <TypeScriptCompile Include="apps\cuteness.unoptimized\details-page.ts">
@@ -70,6 +73,9 @@
       <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" />
@@ -1722,7 +1728,7 @@
           <SaveServerSettingsInUserFile>False</SaveServerSettingsInUserFile>
         </WebProjectProperties>
       </FlavorProperties>
-      <UserProperties ui_2scroll-view_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2editable-text-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2absolute-layout-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2gallery-app_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2content-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2web-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2linear-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2absolute-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2dock-layout_2package_1json__JSONSchema="" ui_2layouts_2grid-layout_2package_1json__JSONSchema="" ui_2layouts_2wrap-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" />
+      <UserProperties ui_2layouts_2wrap-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2grid-layout_2package_1json__JSONSchema="" ui_2layouts_2dock-layout_2package_1json__JSONSchema="" ui_2layouts_2absolute-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2linear-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2web-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2content-view_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2gallery-app_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2absolute-layout-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2editable-text-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2scroll-view_2package_1json__JSONSchema="http://json.schemastore.org/package" />
     </VisualStudio>
   </ProjectExtensions>
 </Project>
\ No newline at end of file
diff --git a/apps/action-bar-demo/main-page.xml b/apps/action-bar-demo/main-page.xml
index 9246e5bd6..a4600175b 100644
--- a/apps/action-bar-demo/main-page.xml
+++ b/apps/action-bar-demo/main-page.xml
@@ -7,6 +7,9 @@
       <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>
\ No newline at end of file
diff --git a/apps/action-bar-demo/pages/center-view-segmented.ts b/apps/action-bar-demo/pages/center-view-segmented.ts
new file mode 100644
index 000000000..b0e39a583
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/apps/action-bar-demo/pages/center-view-segmented.xml b/apps/action-bar-demo/pages/center-view-segmented.xml
new file mode 100644
index 000000000..72a39296b
--- /dev/null
+++ b/apps/action-bar-demo/pages/center-view-segmented.xml
@@ -0,0 +1,18 @@
+<Page loaded="pageLoaded">
+  <Page.actionBar>
+    <ActionBar title="Title">
+      <ActionBar.centerView>
+        <SegmentedBar selectedIndex="{{ index }}">
+          <SegmentedBar.items>
+            <SegmentedBarItem title="Item 1" />
+            <SegmentedBarItem title="Item 2" />
+            <SegmentedBarItem title="Item 3" />
+          </SegmentedBar.items>
+        </SegmentedBar>
+      </ActionBar.centerView>
+    </ActionBar>
+  </Page.actionBar>
+  <StackLayout>
+    <Button text="{{ index }}" />
+  </StackLayout>
+</Page>
\ No newline at end of file
diff --git a/apps/action-bar-demo/pages/center-view-stack.ts b/apps/action-bar-demo/pages/center-view-stack.ts
new file mode 100644
index 000000000..b0e39a583
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/apps/action-bar-demo/pages/center-view-stack.xml b/apps/action-bar-demo/pages/center-view-stack.xml
new file mode 100644
index 000000000..3fe21f12e
--- /dev/null
+++ b/apps/action-bar-demo/pages/center-view-stack.xml
@@ -0,0 +1,16 @@
+<Page loaded="pageLoaded">
+  <Page.actionBar>
+    <ActionBar title="Title">
+      <ActionBar.centerView>
+        <StackLayout orientation="horizontal" verticalAlignment="center" horizontalAlignment="center">
+          <Button text="1st" />
+          <Button text="2nd" />
+          <Button text="3rd" />
+        </StackLayout>
+      </ActionBar.centerView>
+    </ActionBar>
+  </Page.actionBar>
+  <StackLayout>
+    <Button text="do nothong" />
+  </StackLayout>
+</Page>
\ No newline at end of file
diff --git a/apps/action-bar-demo/pages/center-view.ts b/apps/action-bar-demo/pages/center-view.ts
new file mode 100644
index 000000000..587c6adc4
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/apps/action-bar-demo/pages/center-view.xml b/apps/action-bar-demo/pages/center-view.xml
new file mode 100644
index 000000000..b1fa52122
--- /dev/null
+++ b/apps/action-bar-demo/pages/center-view.xml
@@ -0,0 +1,12 @@
+<Page loaded="pageLoaded">
+  <Page.actionBar>
+    <ActionBar title="Title">
+      <ActionBar.centerView>
+        <Button text="{{ centerText }}" tap="{{ centerTap }}" />
+      </ActionBar.centerView>
+    </ActionBar>
+  </Page.actionBar>
+  <StackLayout>
+    <Button text="do nothing" />
+  </StackLayout>
+</Page>
\ No newline at end of file
diff --git a/apps/action-bar-demo/pages/page-title-icon.ts b/apps/action-bar-demo/pages/page-title-icon.ts
index 0605e6f50..ba77f0153 100644
--- a/apps/action-bar-demo/pages/page-title-icon.ts
+++ b/apps/action-bar-demo/pages/page-title-icon.ts
@@ -18,7 +18,6 @@ export function buttonTap(args: observable.EventData) {
     }
 }
 
-
 var j = 0;
 export function visibilityTap(args: observable.EventData) {
     var page = <pages.Page>view.getAncestor(<view.View>args.object, "Page")
diff --git a/ui/action-bar/action-bar-common.ts b/ui/action-bar/action-bar-common.ts
index 586f69100..5eb977737 100644
--- a/ui/action-bar/action-bar-common.ts
+++ b/ui/action-bar/action-bar-common.ts
@@ -4,6 +4,9 @@ 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";
 
@@ -21,7 +24,7 @@ function onIconPropertyChanged(data: dependencyObservable.PropertyChangeData) {
     actionBar._onIconPropertyChanged();
 }
 
-export class ActionBar extends bindable.Bindable implements dts.ActionBar {
+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));
     public static iconProperty = new dependencyObservable.Property("icon", "ActionBar", new proxy.PropertyMetadata(undefined, dependencyObservable.PropertyMetadataSettings.None, onIconPropertyChanged));
     public static androidIconVisibilityProperty = new dependencyObservable.Property("androidIconVisibility", "ActionBar", new proxy.PropertyMetadata("auto", dependencyObservable.PropertyMetadataSettings.None, onIconPropertyChanged));
@@ -29,6 +32,7 @@ export class ActionBar extends bindable.Bindable implements dts.ActionBar {
     private _actionItems: ActionItems;
     private _navigationButton: NavigationButton;
     private _page: pages.Page;
+    private _centerView: view.View;
 
     get title(): string {
         return this._getValue(ActionBar.titleProperty);
@@ -77,6 +81,29 @@ export class ActionBar extends bindable.Bindable implements dts.ActionBar {
         throw new Error("actionItems property is read-only");
     }
 
+    get centerView(): view.View {
+        return this._centerView;
+    }
+    set centerView(value: view.View) {
+        if (this._centerView !== value) {
+            if (this._centerView) {
+                this._removeView(this._centerView);
+                this._centerView.style._resetValue(style.horizontalAlignmentProperty, observable.ValueSource.Inherited);
+                this._centerView.style._resetValue(style.verticalAlignmentProperty, observable.ValueSource.Inherited);
+            }
+
+            this._centerView = value;
+            
+            if (this._centerView) {
+                this._centerView.style._setValue(style.horizontalAlignmentProperty, enums.HorizontalAlignment.center, observable.ValueSource.Inherited);
+                this._centerView.style._setValue(style.verticalAlignmentProperty, enums.VerticalAlignment.center, observable.ValueSource.Inherited);
+                this._addView(this._centerView);
+            }
+            
+            this.updateActionBar();
+        }
+    }
+
     get page(): pages.Page {
         return this._page;
     }
@@ -90,6 +117,10 @@ export class ActionBar extends bindable.Bindable implements dts.ActionBar {
         }, this._page);
     }
 
+    get _childrenCount(): number {
+        return this.centerView ? 1 : 0;
+    }
+
     constructor() {
         super();
         this._actionItems = new ActionItems(this);
@@ -124,10 +155,13 @@ export class ActionBar extends bindable.Bindable implements dts.ActionBar {
     }
 
     public _addChildFromBuilder(name: string, value: any) {
-
         if (value instanceof NavigationButton) {
             this.navigationButton = value;
         }
+
+        if (value instanceof view.View) {
+            this.centerView = value;
+        }
     }
 
     public _onBindingContextChanged(oldValue: any, newValue: any) {
@@ -139,6 +173,12 @@ export class ActionBar extends bindable.Bindable implements dts.ActionBar {
         this._actionItems.getItems().forEach((item, i, arr) => { item.bindingContext = newValue; });
     }
 
+    public _eachChildView(callback: (child: view.View) => boolean) {
+        if (this.centerView) {
+            callback(this.centerView);
+        }
+    }
+
     public shouldShow(): boolean {
         if (this.title ||
             this.icon ||
diff --git a/ui/action-bar/action-bar.android.ts b/ui/action-bar/action-bar.android.ts
index 52dad6d48..b2978a900 100644
--- a/ui/action-bar/action-bar.android.ts
+++ b/ui/action-bar/action-bar.android.ts
@@ -51,14 +51,13 @@ export class ActionBar extends common.ActionBar {
         this._addActionItems(menu);
 
         // Set title
-        this._updateTitle(actionBar);
+        this._updateTitleAndCenterView(actionBar);
 
         // Set home icon
         this._updateIcon(actionBar);
 
         // Set navigation button
         this._updateNavigationButton(actionBar);
-
     }
 
     public _updateNavigationButton(actionBar: android.app.ActionBar) {
@@ -102,13 +101,25 @@ export class ActionBar extends common.ActionBar {
         actionBar.setDisplayShowHomeEnabled(visibility);
     }
 
-    public _updateTitle(actionBar: android.app.ActionBar) {
-        var title = this.title;
-        if (types.isDefined(title)) {
-            actionBar.setTitle(title);
-        } else {
-            var defaultLabel = application.android.nativeApp.getApplicationInfo().labelRes;
-            actionBar.setTitle(defaultLabel);
+    public _updateTitleAndCenterView(actionBar: android.app.ActionBar) {
+        if (this.centerView) {
+            actionBar.setCustomView(this.centerView.android);
+            actionBar.setDisplayShowCustomEnabled(true);
+            actionBar.setDisplayShowTitleEnabled(false);
+        }
+        else {
+            actionBar.setCustomView(null);
+            actionBar.setDisplayShowCustomEnabled(false);
+            actionBar.setDisplayShowTitleEnabled(true);
+
+            // No center 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);
+            }
         }
     }
 
@@ -119,7 +130,6 @@ export class ActionBar extends common.ActionBar {
             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);
@@ -133,7 +143,7 @@ export class ActionBar extends common.ActionBar {
 
     public _onTitlePropertyChanged() {
         if (frame.topmost().currentPage === this.page) {
-            this._updateTitle(frame.topmost().android.actionBar);
+            this._updateTitleAndCenterView(frame.topmost().android.actionBar);
         }
     }
 
diff --git a/ui/action-bar/action-bar.d.ts b/ui/action-bar/action-bar.d.ts
index d877c8bca..4745d7ca4 100644
--- a/ui/action-bar/action-bar.d.ts
+++ b/ui/action-bar/action-bar.d.ts
@@ -4,14 +4,16 @@
     import dependencyObservable = require("ui/core/dependency-observable");
     import bindable = require("ui/core/bindable");
     import pages = require("ui/page");
+    import contentView = require("ui/content-view");
     
-    export class ActionBar extends bindable.Bindable implements view.AddArrayFromBuilder, view.AddChildFromBuilder {
+    export class ActionBar extends view.View implements view.AddArrayFromBuilder, view.AddChildFromBuilder {
         title: string;
         icon: string;
         androidIconVisibility: string;
 
         navigationButton: NavigationButton;
         actionItems: ActionItems;
+        centerView: view.View;
 
         page: pages.Page;
 
diff --git a/ui/action-bar/action-bar.ios.ts b/ui/action-bar/action-bar.ios.ts
index 1eb88fd8e..2175ba740 100644
--- a/ui/action-bar/action-bar.ios.ts
+++ b/ui/action-bar/action-bar.ios.ts
@@ -3,6 +3,8 @@ import definition = 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);
@@ -23,6 +25,11 @@ export class ActionBar extends common.ActionBar {
         // Set Title
         navigationItem.title = this.title;
 
+        if (this.centerView && this.centerView.ios) {
+            console.log("setting center view: " + this.centerView.ios);
+            navigationItem.titleView = this.centerView.ios;
+        }
+
         // Find previous ViewController in the navigation stack
         var indexOfViewController = navController.viewControllers.indexOfObject(viewController);
         if (indexOfViewController !== NSNotFound && indexOfViewController > 0) {
@@ -116,6 +123,33 @@ export class ActionBar extends common.ActionBar {
         var navigationItem: UINavigationItem = (<UIViewController>this.page.ios).navigationItem;
         navigationItem.title = this.title;
     }
+
+    public onMeasure(widthMeasureSpec: number, heightMeasureSpec: number) {
+        if (this.centerView) {
+            var width = utils.layout.getMeasureSpecSize(widthMeasureSpec);
+
+            view.View.measureChild(this, this.centerView,
+                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.centerView, 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 {
diff --git a/ui/core/view.ios.ts b/ui/core/view.ios.ts
index 586e4c123..b8051da5b 100644
--- a/ui/core/view.ios.ts
+++ b/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.
diff --git a/ui/page/page-common.ts b/ui/page/page-common.ts
index a4ac991db..4a53bd854 100644
--- a/ui/page/page-common.ts
+++ b/ui/page/page-common.ts
@@ -124,7 +124,7 @@ export class Page extends contentView.ContentView implements dts.Page {
             cssFileName = fs.path.join(fs.knownFolders.currentApp().path, cssFileName.replace("~/", ""));
         }
         if (!this._cssFiles[cssFileName]) {
-            if (fs.File.exists(cssFileName)) {
+        if (fs.File.exists(cssFileName)) {
                 new fileSystemAccess.FileSystemAccess().readText(cssFileName, r => {
                     this._addCssInternal(r, cssFileName);
                     this._cssFiles[cssFileName] = true;
@@ -214,6 +214,12 @@ export class Page extends contentView.ContentView implements dts.Page {
         return this._styleScope;
     }
 
+    public _eachChildView(callback: (child: view.View) => boolean) {
+        super._eachChildView(callback);
+
+        callback(this.actionBar);
+    }
+
     private _applyCss() {
         if (this._cssApplied) {
             return;
diff --git a/ui/page/page.ios.ts b/ui/page/page.ios.ts
index ea21da5ff..255ac6779 100644
--- a/ui/page/page.ios.ts
+++ b/ui/page/page.ios.ts
@@ -155,4 +155,14 @@ export class Page extends pageCommon.Page {
             this.requestLayout();
         }
     }
+
+    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);
+    }
 }
diff --git a/ui/styling/background.ios.ts b/ui/styling/background.ios.ts
index dc973e620..ec3e59fa2 100644
--- a/ui/styling/background.ios.ts
+++ b/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;

From ff2e8e662579874c5d9f79627093b7b327942780 Mon Sep 17 00:00:00 2001
From: vakrilov <alexander.vakrilov@telerik.com>
Date: Tue, 14 Jul 2015 11:19:49 +0300
Subject: [PATCH 5/9] tests

---
 CrossPlatformModules.csproj                   |  37 +++--
 apps/tests/testRunner.ts                      |   1 +
 .../ui/action-bar/action-bar-tests-common.ts  | 136 ++++++++++++++++++
 .../ui/action-bar/action-bar-tests.android.ts |   4 +
 .../ui/action-bar/action-bar-tests.ios.ts     |  84 +++++++++++
 apps/tests/ui/helper.ts                       |  14 +-
 apps/tests/ui/page/page-tests-common.ts       |  78 ----------
 apps/tests/ui/page/page-tests.ios.ts          |  76 ----------
 apps/tests/ui/view/view-tests-common.ts       |   3 +-
 apps/tests/ui/view/view-tests.android.ts      |  35 +++--
 ui/action-bar/action-bar-common.ts            |  18 ++-
 ui/action-bar/action-bar.d.ts                 |   5 +-
 ui/page/page-common.ts                        |  13 +-
 13 files changed, 312 insertions(+), 192 deletions(-)
 create mode 100644 apps/tests/ui/action-bar/action-bar-tests-common.ts
 create mode 100644 apps/tests/ui/action-bar/action-bar-tests.android.ts
 create mode 100644 apps/tests/ui/action-bar/action-bar-tests.ios.ts

diff --git a/CrossPlatformModules.csproj b/CrossPlatformModules.csproj
index a1551a6ca..7d201e7d8 100644
--- a/CrossPlatformModules.csproj
+++ b/CrossPlatformModules.csproj
@@ -61,10 +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\center-view-stack.ts" />
-    <TypeScriptCompile Include="apps\action-bar-demo\pages\center-view-segmented.ts" />
-    <TypeScriptCompile Include="apps\action-bar-demo\pages\center-view.ts" />
-    <TypeScriptCompile Include="apps\action-bar-demo\pages\data-binding.ts" />
+    <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>
@@ -83,10 +94,15 @@
     <TypeScriptCompile Include="apps\action-bar-demo\main-page.ts">
       <DependentUpon>main-page.xml</DependentUpon>
     </TypeScriptCompile>
-    <TypeScriptCompile Include="apps\action-bar-demo\pages\action-items-text.ts" />
-    <TypeScriptCompile Include="apps\action-bar-demo\pages\navigation-button.ts" />
-    <TypeScriptCompile Include="apps\action-bar-demo\pages\action-items-icon.ts" />
-    <TypeScriptCompile Include="apps\action-bar-demo\pages\page-title-icon.ts" />
+    <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>
@@ -172,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>
@@ -1728,7 +1747,7 @@
           <SaveServerSettingsInUserFile>False</SaveServerSettingsInUserFile>
         </WebProjectProperties>
       </FlavorProperties>
-      <UserProperties ui_2layouts_2wrap-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2grid-layout_2package_1json__JSONSchema="" ui_2layouts_2dock-layout_2package_1json__JSONSchema="" ui_2layouts_2absolute-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2linear-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2web-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2content-view_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2gallery-app_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2absolute-layout-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2editable-text-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2scroll-view_2package_1json__JSONSchema="http://json.schemastore.org/package" />
+      <UserProperties ui_2scroll-view_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2editable-text-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2absolute-layout-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2gallery-app_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2content-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2web-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2linear-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2absolute-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2dock-layout_2package_1json__JSONSchema="" ui_2layouts_2grid-layout_2package_1json__JSONSchema="" ui_2layouts_2wrap-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" />
     </VisualStudio>
   </ProjectExtensions>
 </Project>
\ No newline at end of file
diff --git a/apps/tests/testRunner.ts b/apps/tests/testRunner.ts
index b40bec212..a39c70c74 100644
--- a/apps/tests/testRunner.ts
+++ b/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");
diff --git a/apps/tests/ui/action-bar/action-bar-tests-common.ts b/apps/tests/ui/action-bar/action-bar-tests-common.ts
new file mode 100644
index 000000000..953ed5522
--- /dev/null
+++ b/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_centerView_inherit_bindingContext_inXML() {
+    var p = <PageModule.Page>builder.parse(
+        "<Page> <Page.actionBar> <ActionBar> <ActionBar.centerView>" +
+        "<Button text=\"{{ myProp }} \" />" +
+        "</ActionBar.centerView> </ActionBar> </Page.actionBar> </Page>");
+    p.bindingContext = { myProp: "success" };
+
+    var centerBtn = <button.Button>p.actionBar.centerView;
+    TKUnit.assert(centerBtn instanceof button.Button, "cneterView not loaded correctly");
+    TKUnit.assertEqual(centerBtn.text, "success", "actionItem.text");
+};
+
+export function test_centerView_inXML() {
+    var p = <PageModule.Page>builder.parse(
+        "<Page> <Page.actionBar> <ActionBar> <ActionBar.centerView>" +
+        "<Button/>" +
+        "</ActionBar.centerView> </ActionBar> </Page.actionBar> </Page>");
+
+    var centerBtn = <button.Button>p.actionBar.centerView;
+    TKUnit.assert(centerBtn instanceof button.Button, "cneterView not loaded correctly");
+};
+
+export function test_centerView_inXML_short_definition() {
+    var p = <PageModule.Page>builder.parse(
+        "<Page> <Page.actionBar> <ActionBar>" +
+        "<Button/>" +
+        "</ActionBar> </Page.actionBar> </Page>");
+
+    var centerBtn = <button.Button>p.actionBar.centerView;
+    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();
+    }
+}
diff --git a/apps/tests/ui/action-bar/action-bar-tests.android.ts b/apps/tests/ui/action-bar/action-bar-tests.android.ts
new file mode 100644
index 000000000..61f25bd5f
--- /dev/null
+++ b/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);
diff --git a/apps/tests/ui/action-bar/action-bar-tests.ios.ts b/apps/tests/ui/action-bar/action-bar-tests.ios.ts
new file mode 100644
index 000000000..142b747e9
--- /dev/null
+++ b/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();
+    }
+}
\ No newline at end of file
diff --git a/apps/tests/ui/helper.ts b/apps/tests/ui/helper.ts
index 596f61f52..0932c0bff 100644
--- a/apps/tests/ui/helper.ts
+++ b/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; });
diff --git a/apps/tests/ui/page/page-tests-common.ts b/apps/tests/ui/page/page-tests-common.ts
index b65db608b..61f30d9f3 100644
--- a/apps/tests/ui/page/page-tests-common.ts
+++ b/apps/tests/ui/page/page-tests-common.ts
@@ -27,8 +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");
-import actionBar = require("ui/action-bar");
 
 export function addLabelToPage(page: PageModule.Page, text?: string) {
     var label = new LabelModule.Label();
@@ -36,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 actionBar.ActionItem();
-
-        menuItem.bind({
-            sourceProperty: "text",
-            targetProperty: "text"
-        });
-
-        page.actionBar.actionItems.addItem(menuItem);
-
-        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", "menuItem.text should equal to 'item'");
-    }
-    finally {
-        helper.goBack();
-    }
-}
-
-export function test_menuItem_inherit_bindingContext_inXML() {
-    var p = <PageModule.Page>builder.parse("<Page><Page.actionItems><ActionItem text=\"{{ myProp }} \" /></Page.actionItems></Page>");
-    p.bindingContext = { myProp: "success" };
-
-    var menuItem = p.actionBar.actionItems.getItemAt(0);
-
-    TKUnit.assertEqual(menuItem.text, "success", "menuItem.text");
-};
-
-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 menuItem = new actionBar.ActionItem();
-        menuItem.text = "Item";
-        page.actionBar.actionItems.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;
diff --git a/apps/tests/ui/page/page-tests.ios.ts b/apps/tests/ui/page/page-tests.ios.ts
index cc56b7937..0a74ea139 100644
--- a/apps/tests/ui/page/page-tests.ios.ts
+++ b/apps/tests/ui/page/page-tests.ios.ts
@@ -3,8 +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");
-import actionBar = require("ui/action-bar");
 
 declare var exports;
 require("utils/module-merge").merge(PageTestCommon, exports);
@@ -26,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 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();
-    }
-}
\ No newline at end of file
diff --git a/apps/tests/ui/view/view-tests-common.ts b/apps/tests/ui/view/view-tests-common.ts
index c64788a8f..5cbf31f46 100644
--- a/apps/tests/ui/view/view-tests-common.ts
+++ b/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);
diff --git a/apps/tests/ui/view/view-tests.android.ts b/apps/tests/ui/view/view-tests.android.ts
index 396b1d31a..5a26a2757 100644
--- a/apps/tests/ui/view/view-tests.android.ts
+++ b/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!");
     };
diff --git a/ui/action-bar/action-bar-common.ts b/ui/action-bar/action-bar-common.ts
index 5eb977737..a4ff40b97 100644
--- a/ui/action-bar/action-bar-common.ts
+++ b/ui/action-bar/action-bar-common.ts
@@ -93,13 +93,13 @@ export class ActionBar extends view.View implements dts.ActionBar {
             }
 
             this._centerView = value;
-            
+
             if (this._centerView) {
                 this._centerView.style._setValue(style.horizontalAlignmentProperty, enums.HorizontalAlignment.center, observable.ValueSource.Inherited);
                 this._centerView.style._setValue(style.verticalAlignmentProperty, enums.VerticalAlignment.center, observable.ValueSource.Inherited);
                 this._addView(this._centerView);
             }
-            
+
             this.updateActionBar();
         }
     }
@@ -288,11 +288,23 @@ export class ActionItemBase extends bindable.Bindable implements dts.ActionItemB
         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(ActionItem.tapEvent);
     }
 
-    actionBar: ActionBar;
 }
 
 export class ActionItem extends ActionItemBase {
diff --git a/ui/action-bar/action-bar.d.ts b/ui/action-bar/action-bar.d.ts
index 4745d7ca4..a9f41e46b 100644
--- a/ui/action-bar/action-bar.d.ts
+++ b/ui/action-bar/action-bar.d.ts
@@ -4,8 +4,7 @@
     import dependencyObservable = require("ui/core/dependency-observable");
     import bindable = require("ui/core/bindable");
     import pages = require("ui/page");
-    import contentView = require("ui/content-view");
-    
+
     export class ActionBar extends view.View implements view.AddArrayFromBuilder, view.AddChildFromBuilder {
         title: string;
         icon: string;
@@ -21,7 +20,7 @@
 
         updateActionBar();
 
-         //@private
+        //@private
         _updateAndroidActionBar(menu: android.view.IMenu);
         _onAndroidItemSelected(itemId: number): boolean
 
diff --git a/ui/page/page-common.ts b/ui/page/page-common.ts
index 4a53bd854..559f58f31 100644
--- a/ui/page/page-common.ts
+++ b/ui/page/page-common.ts
@@ -92,9 +92,11 @@ export class Page extends contentView.ContentView implements dts.Page {
         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);
         }
     }
 
@@ -124,7 +126,7 @@ export class Page extends contentView.ContentView implements dts.Page {
             cssFileName = fs.path.join(fs.knownFolders.currentApp().path, cssFileName.replace("~/", ""));
         }
         if (!this._cssFiles[cssFileName]) {
-        if (fs.File.exists(cssFileName)) {
+            if (fs.File.exists(cssFileName)) {
                 new fileSystemAccess.FileSystemAccess().readText(cssFileName, r => {
                     this._addCssInternal(r, cssFileName);
                     this._cssFiles[cssFileName] = true;
@@ -248,4 +250,13 @@ export class Page extends contentView.ContentView implements dts.Page {
         resetCssValuesFunc(this);
         view.eachDescendant(this, resetCssValuesFunc);
     }
+
+    public _addViewToNativeVisualTree(view: view.View): boolean {
+        // ActionBar is added to the native visual tree by default
+        if (view === this.actionBar) {
+            return true;
+        }
+
+        return super._addViewToNativeVisualTree(view);
+    }
 }
\ No newline at end of file

From 2cdf1e222be01634d2cd7856f0002eb21c606b02 Mon Sep 17 00:00:00 2001
From: vakrilov <alexander.vakrilov@telerik.com>
Date: Tue, 14 Jul 2015 13:26:17 +0300
Subject: [PATCH 6/9] CenterView renamed to TitleView

---
 .../pages/center-view-segmented.xml           |  4 +--
 .../pages/center-view-stack.xml               |  6 ++--
 apps/action-bar-demo/pages/center-view.xml    |  4 +--
 .../ui/action-bar/action-bar-tests-common.ts  | 22 ++++++------
 apps/tests/ui/view/view-tests-common.ts       |  8 ++---
 ui/action-bar/action-bar-common.ts            | 36 +++++++++----------
 ui/action-bar/action-bar.android.ts           | 12 +++----
 ui/action-bar/action-bar.d.ts                 |  2 +-
 ui/action-bar/action-bar.ios.ts               | 12 +++----
 9 files changed, 53 insertions(+), 53 deletions(-)

diff --git a/apps/action-bar-demo/pages/center-view-segmented.xml b/apps/action-bar-demo/pages/center-view-segmented.xml
index 72a39296b..c07b33df1 100644
--- a/apps/action-bar-demo/pages/center-view-segmented.xml
+++ b/apps/action-bar-demo/pages/center-view-segmented.xml
@@ -1,7 +1,7 @@
 <Page loaded="pageLoaded">
   <Page.actionBar>
     <ActionBar title="Title">
-      <ActionBar.centerView>
+      <ActionBar.titleView>
         <SegmentedBar selectedIndex="{{ index }}">
           <SegmentedBar.items>
             <SegmentedBarItem title="Item 1" />
@@ -9,7 +9,7 @@
             <SegmentedBarItem title="Item 3" />
           </SegmentedBar.items>
         </SegmentedBar>
-      </ActionBar.centerView>
+      </ActionBar.titleView>
     </ActionBar>
   </Page.actionBar>
   <StackLayout>
diff --git a/apps/action-bar-demo/pages/center-view-stack.xml b/apps/action-bar-demo/pages/center-view-stack.xml
index 3fe21f12e..36382ba52 100644
--- a/apps/action-bar-demo/pages/center-view-stack.xml
+++ b/apps/action-bar-demo/pages/center-view-stack.xml
@@ -1,13 +1,13 @@
 <Page loaded="pageLoaded">
   <Page.actionBar>
     <ActionBar title="Title">
-      <ActionBar.centerView>
-        <StackLayout orientation="horizontal" verticalAlignment="center" horizontalAlignment="center">
+      <ActionBar.titleView>
+        <StackLayout orientation="horizontal">
           <Button text="1st" />
           <Button text="2nd" />
           <Button text="3rd" />
         </StackLayout>
-      </ActionBar.centerView>
+      </ActionBar.titleView>
     </ActionBar>
   </Page.actionBar>
   <StackLayout>
diff --git a/apps/action-bar-demo/pages/center-view.xml b/apps/action-bar-demo/pages/center-view.xml
index b1fa52122..00fee52c1 100644
--- a/apps/action-bar-demo/pages/center-view.xml
+++ b/apps/action-bar-demo/pages/center-view.xml
@@ -1,9 +1,9 @@
 <Page loaded="pageLoaded">
   <Page.actionBar>
     <ActionBar title="Title">
-      <ActionBar.centerView>
+      <ActionBar.titleView>
         <Button text="{{ centerText }}" tap="{{ centerTap }}" />
-      </ActionBar.centerView>
+      </ActionBar.titleView>
     </ActionBar>
   </Page.actionBar>
   <StackLayout>
diff --git a/apps/tests/ui/action-bar/action-bar-tests-common.ts b/apps/tests/ui/action-bar/action-bar-tests-common.ts
index 953ed5522..0ece3b44f 100644
--- a/apps/tests/ui/action-bar/action-bar-tests-common.ts
+++ b/apps/tests/ui/action-bar/action-bar-tests-common.ts
@@ -50,7 +50,7 @@ export function test_actionBar_inherit_bindingContext_inXML() {
 export function test_actionItem_inherit_bindingContext_inXML() {
     var p = <PageModule.Page>builder.parse(
         "<Page> <Page.actionBar> <ActionBar> <ActionBar.actionItems>" +
-        "<ActionItem text=\"{{ myProp }} \" />" + 
+        "<ActionItem text=\"{{ myProp }} \" />" +
         "</ActionBar.actionItems> </ActionBar> </Page.actionBar> </Page>");
     p.bindingContext = { myProp: "success" };
 
@@ -70,35 +70,35 @@ export function test_navigationButton_inherit_bindingContext_inXML() {
     TKUnit.assertEqual(navButton.text, "success", "actionItem.text");
 };
 
-export function test_centerView_inherit_bindingContext_inXML() {
+export function test_titleView_inherit_bindingContext_inXML() {
     var p = <PageModule.Page>builder.parse(
-        "<Page> <Page.actionBar> <ActionBar> <ActionBar.centerView>" +
+        "<Page> <Page.actionBar> <ActionBar> <ActionBar.titleView>" +
         "<Button text=\"{{ myProp }} \" />" +
-        "</ActionBar.centerView> </ActionBar> </Page.actionBar> </Page>");
+        "</ActionBar.titleView> </ActionBar> </Page.actionBar> </Page>");
     p.bindingContext = { myProp: "success" };
 
-    var centerBtn = <button.Button>p.actionBar.centerView;
+    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_centerView_inXML() {
+export function test_titleView_inXML() {
     var p = <PageModule.Page>builder.parse(
-        "<Page> <Page.actionBar> <ActionBar> <ActionBar.centerView>" +
+        "<Page> <Page.actionBar> <ActionBar> <ActionBar.titleView>" +
         "<Button/>" +
-        "</ActionBar.centerView> </ActionBar> </Page.actionBar> </Page>");
+        "</ActionBar.titleView> </ActionBar> </Page.actionBar> </Page>");
 
-    var centerBtn = <button.Button>p.actionBar.centerView;
+    var centerBtn = <button.Button>p.actionBar.titleView;
     TKUnit.assert(centerBtn instanceof button.Button, "cneterView not loaded correctly");
 };
 
-export function test_centerView_inXML_short_definition() {
+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.centerView;
+    var centerBtn = <button.Button>p.actionBar.titleView;
     TKUnit.assert(centerBtn instanceof button.Button, "cneterView not loaded correctly");
 };
 
diff --git a/apps/tests/ui/view/view-tests-common.ts b/apps/tests/ui/view/view-tests-common.ts
index 5cbf31f46..ccb3568af 100644
--- a/apps/tests/ui/view/view-tests-common.ts
+++ b/apps/tests/ui/view/view-tests-common.ts
@@ -127,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;
         });
 
@@ -598,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;");
diff --git a/ui/action-bar/action-bar-common.ts b/ui/action-bar/action-bar-common.ts
index a4ff40b97..4011830b4 100644
--- a/ui/action-bar/action-bar-common.ts
+++ b/ui/action-bar/action-bar-common.ts
@@ -32,7 +32,7 @@ export class ActionBar extends view.View implements dts.ActionBar {
     private _actionItems: ActionItems;
     private _navigationButton: NavigationButton;
     private _page: pages.Page;
-    private _centerView: view.View;
+    private _titleView: view.View;
 
     get title(): string {
         return this._getValue(ActionBar.titleProperty);
@@ -81,23 +81,23 @@ export class ActionBar extends view.View implements dts.ActionBar {
         throw new Error("actionItems property is read-only");
     }
 
-    get centerView(): view.View {
-        return this._centerView;
+    get titleView(): view.View {
+        return this._titleView;
     }
-    set centerView(value: view.View) {
-        if (this._centerView !== value) {
-            if (this._centerView) {
-                this._removeView(this._centerView);
-                this._centerView.style._resetValue(style.horizontalAlignmentProperty, observable.ValueSource.Inherited);
-                this._centerView.style._resetValue(style.verticalAlignmentProperty, observable.ValueSource.Inherited);
+    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._centerView = value;
+            this._titleView = value;
 
-            if (this._centerView) {
-                this._centerView.style._setValue(style.horizontalAlignmentProperty, enums.HorizontalAlignment.center, observable.ValueSource.Inherited);
-                this._centerView.style._setValue(style.verticalAlignmentProperty, enums.VerticalAlignment.center, observable.ValueSource.Inherited);
-                this._addView(this._centerView);
+            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.updateActionBar();
@@ -118,7 +118,7 @@ export class ActionBar extends view.View implements dts.ActionBar {
     }
 
     get _childrenCount(): number {
-        return this.centerView ? 1 : 0;
+        return this.titleView ? 1 : 0;
     }
 
     constructor() {
@@ -160,7 +160,7 @@ export class ActionBar extends view.View implements dts.ActionBar {
         }
 
         if (value instanceof view.View) {
-            this.centerView = value;
+            this.titleView = value;
         }
     }
 
@@ -174,8 +174,8 @@ export class ActionBar extends view.View implements dts.ActionBar {
     }
 
     public _eachChildView(callback: (child: view.View) => boolean) {
-        if (this.centerView) {
-            callback(this.centerView);
+        if (this.titleView) {
+            callback(this.titleView);
         }
     }
 
diff --git a/ui/action-bar/action-bar.android.ts b/ui/action-bar/action-bar.android.ts
index b2978a900..efcd2f8ca 100644
--- a/ui/action-bar/action-bar.android.ts
+++ b/ui/action-bar/action-bar.android.ts
@@ -51,7 +51,7 @@ export class ActionBar extends common.ActionBar {
         this._addActionItems(menu);
 
         // Set title
-        this._updateTitleAndCenterView(actionBar);
+        this._updateTitleAndTitleView(actionBar);
 
         // Set home icon
         this._updateIcon(actionBar);
@@ -101,9 +101,9 @@ export class ActionBar extends common.ActionBar {
         actionBar.setDisplayShowHomeEnabled(visibility);
     }
 
-    public _updateTitleAndCenterView(actionBar: android.app.ActionBar) {
-        if (this.centerView) {
-            actionBar.setCustomView(this.centerView.android);
+    public _updateTitleAndTitleView(actionBar: android.app.ActionBar) {
+        if (this.titleView) {
+            actionBar.setCustomView(this.titleView.android);
             actionBar.setDisplayShowCustomEnabled(true);
             actionBar.setDisplayShowTitleEnabled(false);
         }
@@ -112,7 +112,7 @@ export class ActionBar extends common.ActionBar {
             actionBar.setDisplayShowCustomEnabled(false);
             actionBar.setDisplayShowTitleEnabled(true);
 
-            // No center view - show the title
+            // No title view - show the title
             var title = this.title;
             if (types.isDefined(title)) {
                 actionBar.setTitle(title);
@@ -143,7 +143,7 @@ export class ActionBar extends common.ActionBar {
 
     public _onTitlePropertyChanged() {
         if (frame.topmost().currentPage === this.page) {
-            this._updateTitleAndCenterView(frame.topmost().android.actionBar);
+            this._updateTitleAndTitleView(frame.topmost().android.actionBar);
         }
     }
 
diff --git a/ui/action-bar/action-bar.d.ts b/ui/action-bar/action-bar.d.ts
index a9f41e46b..0bfc68d40 100644
--- a/ui/action-bar/action-bar.d.ts
+++ b/ui/action-bar/action-bar.d.ts
@@ -12,7 +12,7 @@
 
         navigationButton: NavigationButton;
         actionItems: ActionItems;
-        centerView: view.View;
+        titleView: view.View;
 
         page: pages.Page;
 
diff --git a/ui/action-bar/action-bar.ios.ts b/ui/action-bar/action-bar.ios.ts
index 2175ba740..44dce1de3 100644
--- a/ui/action-bar/action-bar.ios.ts
+++ b/ui/action-bar/action-bar.ios.ts
@@ -25,9 +25,9 @@ export class ActionBar extends common.ActionBar {
         // Set Title
         navigationItem.title = this.title;
 
-        if (this.centerView && this.centerView.ios) {
-            console.log("setting center view: " + this.centerView.ios);
-            navigationItem.titleView = this.centerView.ios;
+        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
@@ -125,10 +125,10 @@ export class ActionBar extends common.ActionBar {
     }
 
     public onMeasure(widthMeasureSpec: number, heightMeasureSpec: number) {
-        if (this.centerView) {
+        if (this.titleView) {
             var width = utils.layout.getMeasureSpecSize(widthMeasureSpec);
 
-            view.View.measureChild(this, this.centerView,
+            view.View.measureChild(this, this.titleView,
                 utils.layout.makeMeasureSpec(width, utils.layout.AT_MOST),
                 utils.layout.makeMeasureSpec(this.navigationBarHeight, utils.layout.AT_MOST));
         }
@@ -138,7 +138,7 @@ export class ActionBar extends common.ActionBar {
     }
 
     public onLayout(left: number, top: number, right: number, bottom: number) {
-        view.View.layoutChild(this, this.centerView, 0, 0, right - left, this.navigationBarHeight);
+        view.View.layoutChild(this, this.titleView, 0, 0, right - left, this.navigationBarHeight);
         super.onLayout(left, top, right, bottom);
     }
 

From d5687a8e9cfd08bdec36cfbf4660d5cfeec06431 Mon Sep 17 00:00:00 2001
From: vakrilov <alexander.vakrilov@telerik.com>
Date: Tue, 14 Jul 2015 18:20:28 +0300
Subject: [PATCH 7/9] API changes - ios and android settings objcets

---
 .../pages/action-items-text.xml               |  6 +-
 apps/action-bar-demo/pages/data-binding.xml   |  4 +-
 .../pages/navigation-button.ts                | 22 +++---
 apps/action-bar-demo/pages/page-title-icon.ts | 42 ++++++-----
 apps/tests/pages/page17.ts                    | 19 +++--
 ui/action-bar/action-bar-common.ts            | 69 ++++-------------
 ui/action-bar/action-bar.android.ts           | 74 ++++++++++++++++---
 ui/action-bar/action-bar.d.ts                 | 22 +++++-
 ui/action-bar/action-bar.ios.ts               | 25 +++++--
 9 files changed, 165 insertions(+), 118 deletions(-)

diff --git a/apps/action-bar-demo/pages/action-items-text.xml b/apps/action-bar-demo/pages/action-items-text.xml
index 00722c1e8..40d8b5705 100644
--- a/apps/action-bar-demo/pages/action-items-text.xml
+++ b/apps/action-bar-demo/pages/action-items-text.xml
@@ -2,9 +2,9 @@
   <Page.actionBar>
     <ActionBar title="Title">
       <ActionBar.actionItems>
-        <ActionItem text="left"  tap="leftTap"  iosPosition="left"/>
-        <ActionItem text="right" tap="rightTap" iosPosition="right"/>
-        <ActionItem text="pop"   tap="popTap"   iosPosition="right"  androidPosition="popup"/>
+        <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>
diff --git a/apps/action-bar-demo/pages/data-binding.xml b/apps/action-bar-demo/pages/data-binding.xml
index 558e4e9d6..8e77e2b3d 100644
--- a/apps/action-bar-demo/pages/data-binding.xml
+++ b/apps/action-bar-demo/pages/data-binding.xml
@@ -3,8 +3,8 @@
     <ActionBar title="{{ title }}" icon="{{ mainIcon }}">
       <NavigationButton text="{{ navText }}" icon="{{ navIcon }}" tap="{{ navTap }}"/>
       <ActionBar.actionItems>
-        <ActionItem text="{{ firstItemText }}" tap="{{ firstItemTap }}"  iosPosition="left"/>
-        <ActionItem icon="{{ secondItemIcon }}" tap="{{ secondItemTap }}" iosPosition="right"/>
+        <ActionItem text="{{ firstItemText }}" tap="{{ firstItemTap }}"  ios.position="left"/>
+        <ActionItem icon="{{ secondItemIcon }}" tap="{{ secondItemTap }}" ios.position="right"/>
       </ActionBar.actionItems>
     </ActionBar>
   </Page.actionBar>
diff --git a/apps/action-bar-demo/pages/navigation-button.ts b/apps/action-bar-demo/pages/navigation-button.ts
index f49a680d4..b0a0fadf8 100644
--- a/apps/action-bar-demo/pages/navigation-button.ts
+++ b/apps/action-bar-demo/pages/navigation-button.ts
@@ -28,17 +28,19 @@ var j = 0;
 export function visibilityTap(args: observable.EventData) {
     var page = <pages.Page>view.getAncestor(<view.View>args.object, "Page")
 
-    if (j % 3 === 0) {
-        page.actionBar.androidIconVisibility = "always";
+    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);
     }
-    else if (j % 3 === 1) {
-        page.actionBar.androidIconVisibility = "never";
-    }
-    else if (j % 3 === 2) {
-        page.actionBar.androidIconVisibility = "auto";
-    }
-    j++;
-    console.log("Visibility changed to: " + page.actionBar.androidIconVisibility);
 }
 
 export function navTap(args: observable.EventData) {
diff --git a/apps/action-bar-demo/pages/page-title-icon.ts b/apps/action-bar-demo/pages/page-title-icon.ts
index ba77f0153..df808c206 100644
--- a/apps/action-bar-demo/pages/page-title-icon.ts
+++ b/apps/action-bar-demo/pages/page-title-icon.ts
@@ -5,16 +5,18 @@ 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 (i % 3 === 0) {
-        page.actionBar.icon = "res://ic_test";
-    }
-    else if (i % 3 === 1) {
-        page.actionBar.icon = "~/test-icon.png";
-    }
-    else if (i % 3 === 2) {
-        page.actionBar.icon = undefined;
+
+    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;
+        }
     }
 }
 
@@ -22,15 +24,17 @@ var j = 0;
 export function visibilityTap(args: observable.EventData) {
     var page = <pages.Page>view.getAncestor(<view.View>args.object, "Page")
 
-    if (j % 3 === 0) {
-        page.actionBar.androidIconVisibility = "always";
+    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);
     }
-    else if (j % 3 === 1) {
-        page.actionBar.androidIconVisibility = "never";
-    }
-    else if (j % 3 === 2) {
-        page.actionBar.androidIconVisibility = "auto";
-    }
-    j++;
-    console.log("Visibility changed to: " + page.actionBar.androidIconVisibility);
 }
diff --git a/apps/tests/pages/page17.ts b/apps/tests/pages/page17.ts
index 45aa3756c..52a4bd061 100644
--- a/apps/tests/pages/page17.ts
+++ b/apps/tests/pages/page17.ts
@@ -23,14 +23,17 @@ export function optionTap(args) {
 var i = 0;
 export function buttonTap(args: observable.EventData) {
     currentPage.actionBar.title = "hi " + i++;
-    if (i % 3 === 0) {
-        currentPage.actionBar.icon = "res://ic_test";
-    }
-    else if (i % 3 === 1) {
-        currentPage.actionBar.icon = "~/test-icon.png";
-    }
-    else if (i % 3 === 2) {
-        currentPage.actionBar.icon = undefined;
+
+    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;
+        }
     }
 }
 
diff --git a/ui/action-bar/action-bar-common.ts b/ui/action-bar/action-bar-common.ts
index 4011830b4..8433762f5 100644
--- a/ui/action-bar/action-bar-common.ts
+++ b/ui/action-bar/action-bar-common.ts
@@ -19,16 +19,9 @@ function onTitlePropertyChanged(data: dependencyObservable.PropertyChangeData) {
     actionBar._onTitlePropertyChanged();
 }
 
-function onIconPropertyChanged(data: dependencyObservable.PropertyChangeData) {
-    var actionBar = <ActionBar>data.object;
-    actionBar._onIconPropertyChanged();
-}
-
 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));
-    public static iconProperty = new dependencyObservable.Property("icon", "ActionBar", new proxy.PropertyMetadata(undefined, dependencyObservable.PropertyMetadataSettings.None, onIconPropertyChanged));
-    public static androidIconVisibilityProperty = new dependencyObservable.Property("androidIconVisibility", "ActionBar", new proxy.PropertyMetadata("auto", dependencyObservable.PropertyMetadataSettings.None, onIconPropertyChanged));
-
+    
     private _actionItems: ActionItems;
     private _navigationButton: NavigationButton;
     private _page: pages.Page;
@@ -41,20 +34,6 @@ export class ActionBar extends view.View implements dts.ActionBar {
         this._setValue(ActionBar.titleProperty, value);
     }
 
-    get icon(): string {
-        return this._getValue(ActionBar.iconProperty);
-    }
-    set icon(value: string) {
-        this._setValue(ActionBar.iconProperty, value);
-    }
-
-    get androidIconVisibility(): string {
-        return this._getValue(ActionBar.androidIconVisibilityProperty);
-    }
-    set androidIconVisibility(value: string) {
-        this._setValue(ActionBar.androidIconVisibilityProperty, value);
-    }
-
     get navigationButton(): NavigationButton {
         return this._navigationButton;
     }
@@ -117,6 +96,10 @@ export class ActionBar extends view.View implements dts.ActionBar {
         }, this._page);
     }
 
+    get android(): dts.AndroidActionBarSettings {
+        return undefined;
+    }
+
     get _childrenCount(): number {
         return this.titleView ? 1 : 0;
     }
@@ -136,10 +119,6 @@ export class ActionBar extends view.View implements dts.ActionBar {
         //
     }
 
-    public _onIconPropertyChanged() {
-        //
-    }
-
     public _updateAndroidActionBar(menu: android.view.IMenu) {
         //
     }
@@ -181,7 +160,7 @@ export class ActionBar extends view.View implements dts.ActionBar {
 
     public shouldShow(): boolean {
         if (this.title ||
-            this.icon ||
+            (this.android && this.android.icon) ||
             this.navigationButton ||
             this.actionItems.getItems().length > 0) {
 
@@ -193,14 +172,14 @@ export class ActionBar extends view.View implements dts.ActionBar {
 }
 
 export class ActionItems implements dts.ActionItems {
-    private _items: Array<ActionItem> = new Array<ActionItem>();
+    private _items: Array<dts.ActionItem> = new Array<dts.ActionItem>();
     private _actionBar: ActionBar;
 
     constructor(actionBar: ActionBar) {
         this._actionBar = actionBar;
     }
 
-    public addItem(item: ActionItem): void {
+    public addItem(item: dts.ActionItem): void {
         if (!item) {
             throw new Error("Cannot add empty item");
         }
@@ -210,7 +189,7 @@ export class ActionItems implements dts.ActionItems {
         this.invalidate();
     }
 
-    public removeItem(item: ActionItem): void {
+    public removeItem(item: dts.ActionItem): void {
         if (!item) {
             throw new Error("Cannot remove empty item");
         }
@@ -225,11 +204,11 @@ export class ActionItems implements dts.ActionItems {
         this.invalidate();
     }
 
-    public getItems(): Array<ActionItem> {
+    public getItems(): Array<dts.ActionItem> {
         return this._items.slice();
     }
 
-    public getItemAt(index: number): ActionItem {
+    public getItemAt(index: number): dts.ActionItem {
         if (index < 0 || index >= this._items.length) {
             return undefined;
         }
@@ -237,7 +216,7 @@ export class ActionItems implements dts.ActionItems {
         return this._items[index];
     }
 
-    public setItems(items: Array<ActionItem>) {
+    public setItems(items: Array<dts.ActionItem>) {
         // Remove all existing items
         while (this._items.length > 0) {
             this.removeItem(this._items[this._items.length - 1]);
@@ -268,7 +247,7 @@ export class ActionItemBase extends bindable.Bindable implements dts.ActionItemB
         "icon", "ActionItemBase", new dependencyObservable.PropertyMetadata(null, null, ActionItemBase.onItemChanged));
 
     private static onItemChanged(data: dependencyObservable.PropertyChangeData) {
-        var menuItem = <ActionItem>data.object;
+        var menuItem = <ActionItemBase>data.object;
         if (menuItem.actionBar) {
             menuItem.actionBar.updateActionBar();
         }
@@ -302,27 +281,7 @@ export class ActionItemBase extends bindable.Bindable implements dts.ActionItemB
     }
 
     public _raiseTap() {
-        this._emit(ActionItem.tapEvent);
-    }
-
-}
-
-export class ActionItem extends ActionItemBase {
-    private _androidPosition: string = enums.AndroidActionItemPosition.actionBar;
-    private _iosPosition: string = enums.IOSActionItemPosition.right;
-
-    get androidPosition(): string {
-        return this._androidPosition;
-    }
-    set androidPosition(value: string) {
-        this._androidPosition = value;
-    }
-
-    get iosPosition(): string {
-        return this._iosPosition;
-    }
-    set iosPosition(value: string) {
-        this._iosPosition = value;
+        this._emit(ActionItemBase.tapEvent);
     }
 }
 
diff --git a/ui/action-bar/action-bar.android.ts b/ui/action-bar/action-bar.android.ts
index efcd2f8ca..07bfb73f0 100644
--- a/ui/action-bar/action-bar.android.ts
+++ b/ui/action-bar/action-bar.android.ts
@@ -6,6 +6,7 @@ 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;
@@ -13,14 +14,71 @@ 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.actionItems
+        this._android = new AndroidActionBarSettings(this);
     }
 
     public updateActionBar() {
@@ -39,7 +97,6 @@ export class ActionBar extends common.ActionBar {
         if (this.navigationButton && itemId === (<any>android).R.id.home) {
             this.navigationButton._raiseTap();
             return true;
-
         }
 
         return false;
@@ -80,7 +137,7 @@ export class ActionBar extends common.ActionBar {
     }
 
     public _updateIcon(actionBar: android.app.ActionBar) {
-        var icon = this.icon;
+        var icon = this.android.icon;
         if (types.isDefined(icon)) {
             var drawableOrId = getDrawableOrResourceId(icon, this._appResources);
             if (drawableOrId) {
@@ -92,12 +149,7 @@ export class ActionBar extends common.ActionBar {
             actionBar.setIcon(defaultIcon);
         }
 
-        var iconVisibility: boolean;
-        if (this.androidIconVisibility === enums.AndroidActionBarIconVisibility.always) {
-            iconVisibility = true;
-        }
-
-        var visibility = getIconVisibility(this.androidIconVisibility);
+        var visibility = getIconVisibility(this.android.iconVisibility);
         actionBar.setDisplayShowHomeEnabled(visibility);
     }
 
@@ -211,8 +263,8 @@ function getDrawableOrResourceId(icon: string, resources: android.content.res.Re
     return undefined;
 }
 
-function getShowAsAction(menuItem: common.ActionItem): number {
-    switch (menuItem.androidPosition) {
+function getShowAsAction(menuItem: dts.ActionItem): number {
+    switch (menuItem.android.position) {
         case enums.AndroidActionItemPosition.actionBarIfRoom:
             return android.view.MenuItem.SHOW_AS_ACTION_IF_ROOM;
 
diff --git a/ui/action-bar/action-bar.d.ts b/ui/action-bar/action-bar.d.ts
index 0bfc68d40..53d73e676 100644
--- a/ui/action-bar/action-bar.d.ts
+++ b/ui/action-bar/action-bar.d.ts
@@ -7,13 +7,13 @@
 
     export class ActionBar extends view.View implements view.AddArrayFromBuilder, view.AddChildFromBuilder {
         title: string;
-        icon: string;
-        androidIconVisibility: string;
 
         navigationButton: NavigationButton;
         actionItems: ActionItems;
         titleView: view.View;
 
+        android: AndroidActionBarSettings;
+
         page: pages.Page;
 
         shouldShow(): boolean
@@ -55,6 +55,7 @@
 
         text: string;
         icon: string;
+        actionBar: ActionBar;
 
         /**
          * A basic method signature to hook an event listener (shortcut alias to the addEventListener method).
@@ -75,10 +76,23 @@
     }
 
     export class ActionItem extends ActionItemBase {
-        androidPosition: string;
-        iosPosition: string;
+        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 {
 
     }
diff --git a/ui/action-bar/action-bar.ios.ts b/ui/action-bar/action-bar.ios.ts
index 44dce1de3..694613d06 100644
--- a/ui/action-bar/action-bar.ios.ts
+++ b/ui/action-bar/action-bar.ios.ts
@@ -1,5 +1,5 @@
 import common = require("ui/action-bar/action-bar-common");
-import definition = require("ui/action-bar");
+import dts = require("ui/action-bar");
 import imageSource = require("image-source");
 import frameModule = require("ui/frame");
 import enums = require("ui/enums");
@@ -9,6 +9,19 @@ 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 updateActionBar() {
         // Page should be attached to frame to update the action bar.
@@ -75,7 +88,7 @@ export class ActionBar extends common.ActionBar {
 
         for (var i = 0; i < items.length; i++) {
             var barButtonItem = this.createBarButtonItem(items[i]);
-            if (items[i].iosPosition === enums.IOSActionItemPosition.left) {
+            if (items[i].ios.position === enums.IOSActionItemPosition.left) {
                 leftBarItems.push(barButtonItem);
             }
             else {
@@ -96,7 +109,7 @@ export class ActionBar extends common.ActionBar {
         navigationItem.setRightBarButtonItemsAnimated(rightArray, true);
     }
 
-    private createBarButtonItem(item: common.ActionItemBase): UIBarButtonItem {
+    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;
@@ -144,7 +157,7 @@ export class ActionBar extends common.ActionBar {
 
     protected get navigationBarHeight(): number {
         var navController = frameModule.topmost().ios.controller;
-        if(!navController){
+        if (!navController) {
             return 0;
         }
         var navigationBar = navController.navigationBar;
@@ -157,9 +170,9 @@ class TapBarItemHandlerImpl extends NSObject {
         return <TapBarItemHandlerImpl>super.new();
     }
 
-    private _owner: definition.ActionItemBase;
+    private _owner: dts.ActionItemBase;
 
-    public initWithOwner(owner: definition.ActionItemBase): TapBarItemHandlerImpl {
+    public initWithOwner(owner: dts.ActionItemBase): TapBarItemHandlerImpl {
         this._owner = owner;
         return this;
     }

From dde5fd6d5a628f4b06c59dbe3506ae7eb38c8d3a Mon Sep 17 00:00:00 2001
From: vakrilov <alexander.vakrilov@telerik.com>
Date: Tue, 14 Jul 2015 18:25:44 +0300
Subject: [PATCH 8/9] Renames

---
 ui/action-bar/action-bar-common.ts  | 12 ++++++------
 ui/action-bar/action-bar.android.ts |  4 ++--
 ui/action-bar/action-bar.d.ts       |  4 ++--
 ui/action-bar/action-bar.ios.ts     |  2 +-
 ui/frame/frame.android.ts           |  2 +-
 ui/frame/frame.ios.ts               |  2 +-
 6 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/ui/action-bar/action-bar-common.ts b/ui/action-bar/action-bar-common.ts
index 8433762f5..6220dff13 100644
--- a/ui/action-bar/action-bar-common.ts
+++ b/ui/action-bar/action-bar-common.ts
@@ -49,7 +49,7 @@ export class ActionBar extends view.View implements dts.ActionBar {
                 this._navigationButton.actionBar = this;
             }
 
-            this.updateActionBar();
+            this.update();
         }
     }
 
@@ -79,7 +79,7 @@ export class ActionBar extends view.View implements dts.ActionBar {
                 this._addView(this._titleView);
             }
 
-            this.updateActionBar();
+            this.update();
         }
     }
 
@@ -111,7 +111,7 @@ export class ActionBar extends view.View implements dts.ActionBar {
 
     public static onTitleChanged
 
-    public updateActionBar() {
+    public update() {
         // 
     }
 
@@ -119,7 +119,7 @@ export class ActionBar extends view.View implements dts.ActionBar {
         //
     }
 
-    public _updateAndroidActionBar(menu: android.view.IMenu) {
+    public _updateAndroid(menu: android.view.IMenu) {
         //
     }
 
@@ -232,7 +232,7 @@ export class ActionItems implements dts.ActionItems {
 
     private invalidate() {
         if (this._actionBar) {
-            this._actionBar.updateActionBar();
+            this._actionBar.update();
         }
     }
 }
@@ -249,7 +249,7 @@ export class ActionItemBase extends bindable.Bindable implements dts.ActionItemB
     private static onItemChanged(data: dependencyObservable.PropertyChangeData) {
         var menuItem = <ActionItemBase>data.object;
         if (menuItem.actionBar) {
-            menuItem.actionBar.updateActionBar();
+            menuItem.actionBar.update();
         }
     }
 
diff --git a/ui/action-bar/action-bar.android.ts b/ui/action-bar/action-bar.android.ts
index 07bfb73f0..1e35dbb8a 100644
--- a/ui/action-bar/action-bar.android.ts
+++ b/ui/action-bar/action-bar.android.ts
@@ -81,7 +81,7 @@ export class ActionBar extends common.ActionBar {
         this._android = new AndroidActionBarSettings(this);
     }
 
-    public updateActionBar() {
+    public update() {
         if (this.page && this.page.frame && this.page.frame.android && this.page.frame.android.activity) {
             this.page.frame.android.activity.invalidateOptionsMenu();
         }
@@ -102,7 +102,7 @@ export class ActionBar extends common.ActionBar {
         return false;
     }
 
-    public _updateAndroidActionBar(menu: android.view.IMenu) {
+    public _updateAndroid(menu: android.view.IMenu) {
         var actionBar: android.app.ActionBar = frame.topmost().android.actionBar;
 
         this._addActionItems(menu);
diff --git a/ui/action-bar/action-bar.d.ts b/ui/action-bar/action-bar.d.ts
index 53d73e676..8c454ef4a 100644
--- a/ui/action-bar/action-bar.d.ts
+++ b/ui/action-bar/action-bar.d.ts
@@ -18,10 +18,10 @@
 
         shouldShow(): boolean
 
-        updateActionBar();
+        update();
 
         //@private
-        _updateAndroidActionBar(menu: android.view.IMenu);
+        _updateAndroid(menu: android.view.IMenu);
         _onAndroidItemSelected(itemId: number): boolean
 
         _addArrayFromBuilder(name: string, value: Array<any>): void;
diff --git a/ui/action-bar/action-bar.ios.ts b/ui/action-bar/action-bar.ios.ts
index 694613d06..92f9c4b4b 100644
--- a/ui/action-bar/action-bar.ios.ts
+++ b/ui/action-bar/action-bar.ios.ts
@@ -23,7 +23,7 @@ export class ActionItem extends common.ActionItemBase implements dts.ActionItem
 }
 
 export class ActionBar extends common.ActionBar {
-    public updateActionBar() {
+    public update() {
         // Page should be attached to frame to update the action bar.
         if (!(this.page && this.page.parent)) {
             return;
diff --git a/ui/frame/frame.android.ts b/ui/frame/frame.android.ts
index 5a8ee4b55..69c4ce723 100644
--- a/ui/frame/frame.android.ts
+++ b/ui/frame/frame.android.ts
@@ -140,7 +140,7 @@ class PageFragmentBody extends android.app.Fragment {
 
         var page: pages.Page = this.entry.resolvedPage;
 
-        page.actionBar._updateAndroidActionBar(menu);
+        page.actionBar._updateAndroid(menu);
     }
 
     onOptionsItemSelected(item: android.view.IMenuItem) {
diff --git a/ui/frame/frame.ios.ts b/ui/frame/frame.ios.ts
index 33680275e..61e553f7b 100644
--- a/ui/frame/frame.ios.ts
+++ b/ui/frame/frame.ios.ts
@@ -196,7 +196,7 @@ class UINavigationControllerImpl extends UINavigationController implements UINav
             throw new Error("Page is already shown on another frame.");
         }
 
-        newPage.actionBar.updateActionBar();
+        newPage.actionBar.update();
     }
 
     public navigationControllerDidShowViewControllerAnimated(navigationController: UINavigationController, viewController: UIViewController, animated: boolean): void {

From 319ed1a55589a984eb51bae94534bdfc1648bfe9 Mon Sep 17 00:00:00 2001
From: vakrilov <alexander.vakrilov@telerik.com>
Date: Wed, 15 Jul 2015 09:59:16 +0300
Subject: [PATCH 9/9] Fix crash beacuse of cleared ref

---
 ui/action-bar/action-bar.android.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/ui/action-bar/action-bar.android.ts b/ui/action-bar/action-bar.android.ts
index 1e35dbb8a..50e476a82 100644
--- a/ui/action-bar/action-bar.android.ts
+++ b/ui/action-bar/action-bar.android.ts
@@ -204,6 +204,10 @@ export class ActionBar extends common.ActionBar {
             this._updateIcon(frame.topmost().android.actionBar);
         }
     }
+
+    public _clearAndroidReference() {
+        // don't clear _android field!
+    }
 }
 
 var setHomeAsUpIndicatorWithResoruceId: java.lang.reflect.Method;