From 70756fb1156e31a8edf9c7f7bb00fa17b59baf4a Mon Sep 17 00:00:00 2001
From: Erjan Gavalji <erjan.gavalji@gmail.com>
Date: Tue, 3 Mar 2015 10:34:44 +0200
Subject: [PATCH] OptionsMenu XML support

---
 CrossPlatformModules.csproj     |   8 +++
 apps/tests/pages/page16.ts      |  55 ++++++++++++++++++++
 apps/tests/pages/page17.ts      |  20 ++++++++
 apps/tests/pages/page17.xml     |   9 ++++
 apps/tests/test-icon.png        | Bin 0 -> 4918 bytes
 ui/builder/component-builder.ts |   1 +
 ui/frame/frame-common.ts        |   4 ++
 ui/frame/frame.android.ts       |  40 +++++++++++++++
 ui/frame/frame.d.ts             |   1 +
 ui/page/page-common.ts          |  87 +++++++++++++++++++++++++++++++-
 ui/page/page.android.ts         |   3 +-
 ui/page/page.d.ts               |  37 ++++++++++++--
 12 files changed, 260 insertions(+), 5 deletions(-)
 create mode 100644 apps/tests/pages/page16.ts
 create mode 100644 apps/tests/pages/page17.ts
 create mode 100644 apps/tests/pages/page17.xml
 create mode 100644 apps/tests/test-icon.png

diff --git a/CrossPlatformModules.csproj b/CrossPlatformModules.csproj
index 98b8b41c8..eca1d024d 100644
--- a/CrossPlatformModules.csproj
+++ b/CrossPlatformModules.csproj
@@ -118,8 +118,12 @@
     <TypeScriptCompile Include="apps\tests\layouts\layout-helper.ts" />
     <TypeScriptCompile Include="apps\tests\layouts\wrap-layout-tests.ts" />
     <TypeScriptCompile Include="apps\tests\pages\page12.ts" />
+    <TypeScriptCompile Include="apps\tests\pages\page16.ts" />
     <TypeScriptCompile Include="apps\tests\pages\page15.ts" />
     <TypeScriptCompile Include="apps\tests\pages\page13.ts" />
+    <TypeScriptCompile Include="apps\tests\pages\page17.ts">
+      <DependentUpon>page17.xml</DependentUpon>
+    </TypeScriptCompile>
     <TypeScriptCompile Include="apps\tests\pages\property-bindings.ts" />
     <TypeScriptCompile Include="apps\tests\platform-tests.ts" />
     <TypeScriptCompile Include="apps\tests\fps-meter-tests.ts" />
@@ -578,6 +582,10 @@
     <Content Include="apps\tests\file-name-resolver-tests\files\test.ios.land.xml" />
     <Content Include="apps\tests\file-name-resolver-tests\files\test.android.minWH600.xml" />
     <Content Include="apps\tests\file-name-resolver-tests\files\test.xml" />
+    <Content Include="apps\tests\pages\page17.xml">
+      <SubType>Designer</SubType>
+    </Content>
+    <Content Include="apps\tests\test-icon.png" />
     <Content Include="apps\ui-tests-app\pages\i86.xml" />
     <Content Include="apps\template-blank\app.css" />
     <Content Include="apps\template-hello-world\app.css" />
diff --git a/apps/tests/pages/page16.ts b/apps/tests/pages/page16.ts
new file mode 100644
index 000000000..3d66f18b4
--- /dev/null
+++ b/apps/tests/pages/page16.ts
@@ -0,0 +1,55 @@
+import pageModule = require("ui/page");
+import buttonModule = require("ui/button");
+import stackModule = require("ui/layouts/stack-layout");
+import frame = require("ui/frame");
+
+export function createPage() {
+    var page = new pageModule.Page();
+
+    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);
+
+    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 btn1 = new buttonModule.Button();
+    btn1.text = "add 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++;
+    });
+
+    stackLayout.addChild(btn1);
+
+    var btn2 = new buttonModule.Button();
+    btn2.text = "navigate";
+    btn2.on("tap", () => {
+        var nextPage = "app/tests/pages/page16";
+        frame.topmost().navigate(nextPage);
+    });
+
+    stackLayout.addChild(btn2);
+
+    page.content = stackLayout;
+    return page;
+}
\ No newline at end of file
diff --git a/apps/tests/pages/page17.ts b/apps/tests/pages/page17.ts
new file mode 100644
index 000000000..6390bf553
--- /dev/null
+++ b/apps/tests/pages/page17.ts
@@ -0,0 +1,20 @@
+import observable = require("data/observable");
+import pages = require("ui/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();
+    textItem.text = "from loaded";
+    textItem.on("tap", () => {
+        console.log("item added in page.loaded tapped!!!");
+    });
+    page.optionsMenu.addItem(textItem);
+}
+
+export function optionTap(args) {
+    console.log("item added form XML tapped!!!");
+}
+
diff --git a/apps/tests/pages/page17.xml b/apps/tests/pages/page17.xml
new file mode 100644
index 000000000..fe7e9d1f2
--- /dev/null
+++ b/apps/tests/pages/page17.xml
@@ -0,0 +1,9 @@
+<Page loaded="pageLoaded">
+  <Page.optionsMenu>
+    <MenuItem text="test" tap="optionTap"/>
+    <MenuItem text="with icon" tap="optionTap" icon="~/app/test-icon.png"/>
+  </Page.optionsMenu>
+  <StackLayout>
+    <Button text="button" />
+  </StackLayout>
+</Page>
\ No newline at end of file
diff --git a/apps/tests/test-icon.png b/apps/tests/test-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..add1ce15d7477b400746e55468e587caa12c17f1
GIT binary patch
literal 4918
zcmV-66Upp}P)<h;3K|Lk000e1NJLTq002k;002k`1^@s6RqeA!000vGNkl<Zc-rlp
z32;=`m4@XQQyx1rmCQ_%acUBer)r$cB=Jl<sTwjFdoreQ1PFrwp#=omS1b?+B+$Nq
zR)mlMvq@-UM=U~sBm)9tW3w2u8OIo7gTd?wNwm79R_o09?|ZlPy46xYEnuATt@;bx
z{ocLjeD|Dl?|rYai_3TIyY^lCOKL$Wr~ff9?fCS-^!HZ<q#iyPlzQk=aB4$iNa}u5
zXzD(K@OOL`lziwCu2HT%9*KMZBB2DPo*3<)^6sX9q=qYjiS?bq$@K(<q&SznHYll{
zaBpDB!7JzseSWK<c&D8Bd%xr(1^$WquLma95)_<VXQL3I+Fn%G?H<`zKw=&FCG7he
zV_>XrPYNwK`;%#jhsylpYfb*~dnh15Q6MWQaSugi?5BjKCn%@l0xjQmjY@0p(Z+)Y
zs(P=Tc6?wF!rwPE7{qtD2G_>(J<}H)5dFwL(Z7HEUh<n?Yw}GvREDu1Uou2bOig$v
zaq7H1&C}-9u+cT-&kBg&O|$dfrQFKTsJy<3w!CYhbq6i9_H7HTthLax-5pf8tAmzQ
zchKUUitzVB7QS1#*Fq(HZDoT++*`(d<dk2aS-J0u{xJ^5gM8z7?8L(fu;sC0<CS>i
zw^QQkF8Ib))6_UcfeE`Qb>(T{(E39bT2pTkAo6!80*C^Q07XjsIj)oUEZVMozq-ys
z>lt!sT@xj*IL%SCTa1bEA)mO~Pd(<p_aBc19G`iIVtnT8G)|tgohHX@Bfojolu>-1
z);E~M%)`mNZHjaDU}U5S?b1m7ObbhbLO<v)w@UfEn88=>H&XhVk7*i1f*n3F+sQj-
zr_np^(Clvv%pX%4hIr1cukxC;mAqM#W2z`_$uTN>+d!*0b)*xH;4INVDN?nxrc3fO
z2}^=<1Sxx~@+Z=@wBA6m1xJNFu*)-=#Wup$M+(OyqT%}<vuln_nz@<0qPK`TvwZta
zF`K#Dx{U4-jsqyDH&XVnWR2<#Qs$Np%BfP)uc+z<NAfO$eI7Gd(KSbWV@^N&=-|xU
zadzUH8^|MS0~g>Uw6@+PjE0d}TNOidb-<B8mOGFZR&S6n4#vw;AuZUfd|py#q#4<V
z33g75+DH?lcb<Xm4?V3W%-nH&eB?R-CvD9qV#XG-Q4kDt6g@q`kucuc(_LCnjv)0E
zMX)1dlL889m%Q>E!CrSLYWuN=nr`k<JL}yeDj3ds%3FU~7@NM4joH){Jra<8^q`j5
z!_fj+vA0Y1pll#HiXs(|HHtPVcBO4lfM%6nVn~%VHoStyy}9%4hXQBZj9uwt!^&uU
zL^<WGyDVl7v$V9v!cJJ&84Imop+K*$RhIRVdS$;;x{vofdmY085bSk?YAx2kYe8ut
z$tXm>=pW-?JdBI+VF&DiT>zD`UP;4DhBPj`oW_Kd0@9+vjhq>EBgTZ5nE@!P;tMfb
z7#PdA-gfhTr`1sj$O=bwP)dT5knE$V{D8i30StB~uTvr{W9>zHBeay<f=fHxqibCU
z1<sh16VJGXR9<rnF6MkbF9yPZsT=wR2<^xxoi@><g@alqrG=!8qW%Daov=5lQh_wD
z=oF0(Dkis(b=TnAfC0TReft`87?pKcgenG-fY$Eo8z6HBi5;*udbDsvx@aNw5Jmk3
zlu)4*^^lZ(G%B!|#zbygJs>y}W;gtDWKc=F_v|Vv*wHQq7ziM=t9LrB#aJ6XfKy!G
z1xZHHU;~<8&INwEk@rYjXk^gZcKFzDKyG1Mca08SOSv0wQ+!3opa4QUc((H!iy#1k
zGApmssGt&Z3$Lo~--d9;fnSUaEH=-~Jt_(vI<*JX*BT_7sh!x#M_+>^pm}A=XAuhy
z)5yRQvwP&e7yBMPk=r)7N3N%=%|?nVRXRo#C8~h>x{BGiFK%>-rT<Z_Vz4`21q6R$
z*K!nXGSC}gl{7lMYD1sk{K{kV(2+r9&9O!2L}&JZk_G_~TK!2&zxF|8`}K|cmI^4z
z0id}ID3<?>&Ob@6fo09`SvR0j;k$yyMQ-5TXuGu|gr&6(4H6)OiMWpSeJ9-?K(HJ3
z!;e@MP)rH$xHlMi$*-W15xatQ0~#5+xnbs_lQf4rfUJNtbqE6&4-gRApRacI`7Bnd
z6A*UP0+3pN;>)`L!LJxq5t;9kEBmakID2e<(lxl;kW$e?vx`+gYn6`e3pJMIfwoRo
z^)XAIPV;(KPXKaMpy3bvf`7BtaQc<rqt^pU4e;H0^n_Rc@8sA$)(-F|!ckj?WSR{I
zAhae!Cl_b^&x85`NSj{T`lAJe|MrO9LGax<ps?*}GxE<;^lGJpn34|LI;4rBH97#b
znTa}d_;dPFr|u_;dTZY@KCn7UFIj)!AN-uTiqkCnB*Ay*fI_xb&nsyXH-fICG?S|t
z_AE{daU0Qx7dxF^XW>gWAGYXvCapJeaiZ6*UXIcWe$H5BrnxI`k}LbJ<FUrhk8tx$
zJ3uncw5ypOK<#GCWCuMkI(O(!vl2zUz16^3YE7L^K)Wn9tCyqnf}c?g2%n7#-+Ia^
zplONkT*D0rI~heWcB`3;B5dmPL<XFzIi}AkocOg+BpB_}!__(g6)_;2=+UfRGJ4=A
z{GGnSOr9~d*PH?h%{<-w=8AR^cD+VXxjsN>h=iQ29dz-!^Hl5L6F-)53B?LV^JrD?
zxB^gl@6iK4-(0Bx@=t#Mu2VqM^DmkKsK+SM)FSM7bpfhY9*1IogQD%MUAx<9eIO4g
zP>$xY>Pnq}3ac&MYLBDn0iejY+9@piV}nybGnU>I7f10;Jw=gBwH18;glEN2-N{Z}
z_v|~>X@#PF-VEs-cgaqR&C2B{dZN_miCE5A!@fHO6!n%t00LF}D6&sAY~}T|#XFSe
z*YeHB<y)P)wg>263kLV2pXGb>rnbdlYITnuGlests1-)%fFhO|nP!`ys)Zy0X;V$F
zp^J8?uVU2KF^B-Oj#T@cPyAXixF7v2+pTwEEH<fSjUEjg5j_C3j8kl>$vL3VA|qei
zCZY&8J4!VPNw1-KTu;(ADz9QPHY!f;Kcz3#s*hU4^%?5@=m+~7JuQE`r8^wE)RNH?
zwzQ2x3Ux$KNMS35F(BlmeH7WJ8jb~e8j39*T;V;H1chioG1hb9$5NlBzUM+eSe<l5
z?)KhOOB+3*3@E6;*ro%Ju_cs4O%Eh&>h!eis;-A@kc5R*P|q>s+~rQ|z3692wa&=h
zrUTA$GyB?3Aw?z%T4Hp*%m*)Ny@60e$RYF)f-=?YA>q8Fr=id$sSnz;prAwNoI8s+
z!*7g|)RQ@iudc|g>JCSnS`jLo(4sa9W}gEWw|wOkP(XgmX@<l%nMCM;vKG<|4WvSy
zfEI31jwbSuD`7!MH@sAI*6tff)FSkeze67&Y!f6L`?_O|o~4MMHbf5tdT`n)AiuoE
znxF!MAd0+{kkGL`BpfF7G^{}Jnnxv4I7mX+8C!JJ>|+;{opJ6qeSolkvWH`nS}L62
zLKDL=5PWxj7RzbOW0DliL=k%E#1SNfD~=F)8fISZzQs9Cg(U@8@156?Y77zY;j#4V
zO6@JSX=Ph?%p3si6s$&1K>h=onsYDLDInj4cYOU9HB%s>NDFDXxf>*G0QEGiK(VD=
z=Qt?|3_?A^Y2N8O{>Dy9-=uHcOpaWqa5#Db3R=m3Q49I7@6I2&rr&tMj{$)w$cAtS
z_K;*v%GU`9s}^>%;+UcyRU|MiG(5)W)RAg+CoSSNw$s|jfV$Nj6^@cxZ5#+j@@HSC
z<u#E{%FTb)^<3IF>&_Pf66d9W#GRp2dq~)4=xNF8yEd0nHo!DOoze5+Q4b*OwYtG!
zg&=w)9Mm3;p2^vFzSRFK`SdF#Ad0X<_#q5~C8TA_U|1rt&(PDbT46sTCEq5@aUfjV
zWEhl3-D39*J8j?;sc@EXYAtRhKh&PwCh|(VQmp?M9dkZ(_07H~!VcjF(h^dLgv83#
z2?#5d+&f8Wf!V9%?T$eKl+LLQJC(H3!fE4)M`{^pYF;x<VPD~MA6~8gYN%KG^{;$$
z8hPn!7GVfT=v+d=Y+#?Er^Qz&+X9?}py<`zf!XV$&pQVU2)p&rUf@j2Ya!q4M)FF(
z`4xQb%iHHC#>Sn=nv!*wm%jTVM<t}7LZ!F?QnpS&^UIZO0W@P(*FMTdt2N^PPT-ZT
z#W*lPsa*R2Cz#;`6}ET5;nWgv*tf~-<JfuUGU0Qd-p~K~)mcCD&bZMcAaRaP6OdYM
zAZ2Ya>oPR1%xpc=iF4h`uDw)m!Y@Du(o(pd*}^e#&0#o;9*{5l1UO#oBYf@8FJOj_
znSFev&%#@xBS7-wjsXd?fB_e7Zs%p$c`C$~c5MypC80SKe~*J|e_L{;*)g1)CYq9U
zkGvP$BDYz`R>9Z)0D9uZ--rBiQqtunZ-#^peMKZa5Ci!yHu5ssP8N$rK<W+D+_lQ8
z7olzuq#|`Fft_q^>&Gi?wkNToox!vTTVeCmJO$2Vz*%^kJd-as{mZK}|FzHQrD=cl
zdPq%%SH^X61Sw;qi8?wuoI;vYVz#b);md6m(Tn6YILY?~3<R4J%G-N}lm0cqH~2V^
zpDBLN<(X%m8ykD(QvqqgEinKFn#x5kZG9`5&1R>NVv3cOBvjptgxM+Ffo#5KNS|Kq
z>=PW=G{4lulWE{dZJ{Y_vyTQ2e1dPn#{ssde?5Gb+r-36t&`HODUdSn@__d#rSbu_
zwY5=ud%FMy!yJK{Rg9GcJ6J`b{ZK+>&##QMU?d#a6IasO1&3|+V%sOBeNFHMKEb!a
z_^CAV^Y4avtzIxO`AY&MuLU=8u%pDX`_$UnN+y#@fYL^j7F6^a6iWrtK(ysOi!Lyj
zFxV8k21khd3Y?6a!uE;Dm+8N~iWk7Afz%%R_7v-%hKKB~nUM4ad8A$?&x{)sUvh_<
zo14jCFp$w`w23AysF|y{ST4b8!eUTRP#+}kLG<CbjlF?^4X_0^#jI@Ph(}7@5H?TX
z34SfGW;c9MeHzsEtjo}$FTEaKe{@13LrS?qv8%4r-Me?Gsi}!tT3UJp6}7^|#gbQ(
z0xY)*ECrZZm&El2im)=Zwf7DNw!o(7<+o{4`gNL^@)eEeiTzXLzN7F#`0@}MirEjI
z{_E#nag99miF?B5G%58m`DI@v|J>^olz*Fo7T=|if<_80Y@)ED7C!wy;DXCrdh9>)
zjY59;DlB`k^ER^k-Ve$*356{+QpB=W3SVjvV}$Zp7&Dm1h7Ey>Zc{+s4f5oan!qVF
zKH(C>dFMQAhYy2Mn0spYiQ12!e)cEBhllR{&^`V$8lQNHXXpxt@HG+2UL4Ziobx_e
zjUxZ2<nUoIhqv{)yv*j|aL8JO4V%$c?07e6zQ;XN^IAn8Q@AhmiM}UiH;J*l7v2?P
zd#2wMwoFLABBEwo{6!ibTKgevhV7~k54GVRr2T`-kRgA3W!lDuvGYD9L=%jGQC3hH
zx5$eNxliUj;eb!pec_A*CY)5E^{8Bf^*SvOD-`Y<V_>XFJmy3mTc(qH{O1JQ{%6|e
z2G}ZWR&0MH?J0G@S6*_>SnU>b#x!pJ1!0r~1!E_rT^BPdVPTfNHNYga-XyQ{&QySi
zNa4ObWwh`Z6J^9CN-!4)Ho-R7sM`9J%Oh?>)R6tJpZ(kDm=O^TSH{Gi7qf=2cIVVX
z{$obrfJf@rVwT~QCj*0nV)i9C2NK^eP+{PnbS%|3tWcC_xh%$#U|<7m`ROlQ=df+V
zR2zr5d_xWS{6p4DE>Aw`{_?2IjiY8AZygi+F})G@XBs>IGhsL!7@zc|5?KJ2a@7hA
z&O&fpEBQID5inFBN^SX4L<=SYV_+<diLqe=Y!Nmowms?c4Y%*9%jOHL|NEOCzZfyh
zV^zb*=;KDWIcLR;3Rpb5<K|zqMi(3uj&cM@!FdJ1WsMXV?z|F><64J4(3b+`JdK%q
zjz-QpVH`GT)d7qR8&q4KeVD6NzaEdUex%Oa=<omV`N-e7FWEaH^5C7(F{j9F&Kcp1
z0_+o!if~kjqd>sZ2%lNM=WDe<&=>kd-~TzTpcZ3cOxC}vHVk!nOdDnl|IG2Htd~`z
zr@io7@4P=usr+EX^miIZ&pt_`XMaQznxeA`JdN;~BK|(+v~myMi$4A^x#9!#iN4h_
zURK9^=5dP}XK9Di@^4tL;guW9|3}Xci~r4t#EN0w#Rpys-0|`2kqtLoqmHzUntj|n
zD*8C5%Q1`V%%i41O+RuU-{Bfui+gY{`cV6NP3`-+$1$Dy0tzSQzhynIrogNC=V&ZX
z)>Qmn0zWFjZ?{-sszTMz0@Q0f)q7r5`*>dM^XYFZnBHJvtB?N?($85hsx|9(>XQ6>
oRm0TJUQ)05xq8nJ9yOHz2m3SHcXAYB2><{907*qoM6N<$f;`fMa{vGU

literal 0
HcmV?d00001

diff --git a/ui/builder/component-builder.ts b/ui/builder/component-builder.ts
index ed1083bf0..86d8f4e6c 100644
--- a/ui/builder/component-builder.ts
+++ b/ui/builder/component-builder.ts
@@ -37,6 +37,7 @@ var MODULES = {
     "TimePicker": "ui/time-picker",
     "DatePicker": "ui/date-picker",
     "ListPicker": "ui/list-picker",
+    "MenuItem": "ui/page",
 };
 
 var ROW = "row";
diff --git a/ui/frame/frame-common.ts b/ui/frame/frame-common.ts
index 3a07a5041..7122f7d76 100644
--- a/ui/frame/frame-common.ts
+++ b/ui/frame/frame-common.ts
@@ -370,6 +370,10 @@ export class Frame extends view.CustomLayoutView implements definition.Frame {
     public _removeViewFromNativeVisualTree(child: view.View): void {
         child._isAddedToNativeVisualTree = false;
     }
+
+    public _invalidateOptionsMenu() {
+        // 
+    }
 }
 
 var _topmost = function (): Frame {
diff --git a/ui/frame/frame.android.ts b/ui/frame/frame.android.ts
index 5c65ed5d8..dee5d7fc6 100644
--- a/ui/frame/frame.android.ts
+++ b/ui/frame/frame.android.ts
@@ -6,6 +6,7 @@ import observable = require("data/observable");
 import utils = require("utils/utils");
 import view = require("ui/core/view");
 import application = require("application");
+import imageSource = require("image-source");
 
 declare var exports;
 require("utils/module-merge").merge(frameCommon, exports);
@@ -37,6 +38,7 @@ class PageFragmentBody extends android.app.Fragment {
     onCreate(savedInstanceState: android.os.Bundle) {
         super.onCreate(savedInstanceState);
         trace.write(this.getTag() + ".onCreate(); savedInstanceState: " + savedInstanceState, trace.categories.NativeLifecycle);
+        super.setHasOptionsMenu(true);
     }
 
     onCreateView(inflater: android.view.LayoutInflater, container: android.view.ViewGroup, savedInstanceState: android.os.Bundle): android.view.View {
@@ -132,6 +134,38 @@ class PageFragmentBody extends android.app.Fragment {
         super.onDetach();
         trace.write(this.getTag() + ".onDetach();", trace.categories.NativeLifecycle);
     }
+
+    onCreateOptionsMenu(menu: android.view.IMenu, inflater: android.view.MenuInflater) {
+        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, item.priority, item.text);
+            if (item.icon) {
+                var img = imageSource.fromFile(item.icon);
+                var drawable = new android.graphics.drawable.BitmapDrawable(img.android);
+                menuItem.setIcon(drawable);
+            }
+
+            menuItem.setShowAsAction(android.view.MenuItem.SHOW_AS_ACTION_ALWAYS);
+        }
+    }
+
+    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();
+            return true;
+        }
+       
+        super.onOptionsItemSelected(item);
+    }
 }
 
 function onFragmentShown(fragment: PageFragmentBody) {
@@ -314,6 +348,12 @@ export class Frame extends frameCommon.Frame {
     public _clearAndroidReference() {
         // we should keep the reference to underlying native object, since frame can contain many pages.
     }
+
+    public _invalidateOptionsMenu() {
+        if (this.android && this.android.activity) {
+            this.android.activity.invalidateOptionsMenu();
+        }
+    }
 }
 
 declare module com {
diff --git a/ui/frame/frame.d.ts b/ui/frame/frame.d.ts
index 3829c3026..880c82567 100644
--- a/ui/frame/frame.d.ts
+++ b/ui/frame/frame.d.ts
@@ -84,6 +84,7 @@ declare module "ui/frame" {
 
         //@private
         _processNavigationQueue(page: pages.Page);
+        _invalidateOptionsMenu();
         //@endprivate
     }
 
diff --git a/ui/page/page-common.ts b/ui/page/page-common.ts
index cb2cca780..3dcf09a53 100644
--- a/ui/page/page-common.ts
+++ b/ui/page/page-common.ts
@@ -5,19 +5,30 @@ 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 trace = require("trace");
+import observable = require("data/observable");
+
+var OPTIONS_MENU = "optionsMenu";
 
 export module knownEvents {
     export var navigatedTo = "navigatedTo";
+    export var tap = "tap";
 }
 
-export class Page extends contentView.ContentView implements dts.Page {
+export module knownCollections {
+    export var optionsMenu = "optionsMenu";
+}
+
+export class Page extends contentView.ContentView implements dts.Page, view.AddArrayFromBuilder {
     private _navigationContext: any;
 
     private _cssApplied: boolean;
     private _styleScope: styleScope.StyleScope = new styleScope.StyleScope();
+    private _optionsMenu: OptionsMenu;
 
     constructor(options?: dts.Options) {
         super(options);
+        this._optionsMenu = new OptionsMenu(this);
     }
 
     public onLoaded() {
@@ -40,6 +51,13 @@ export class Page extends contentView.ContentView implements dts.Page {
         this._refreshCss();
     }
 
+    get optionsMenu(): OptionsMenu {
+        return this._optionsMenu;
+    }
+    set optionsMenu(value: OptionsMenu) {
+        throw new Error("optionsMenu property is read-only");
+    }
+
     private _refreshCss(): void {
         if (this._cssApplied) {
             this._resetCssValues();
@@ -131,4 +149,71 @@ export class Page extends contentView.ContentView implements dts.Page {
         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);
+        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");
+        }
+
+        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>) {
+        this._items = items;
+        this.invalidate();
+    }
+
+    private invalidate() {
+        if (this._page.frame) {
+            this._page.frame._invalidateOptionsMenu();
+        }
+    }
+}
+
+export class MenuItem extends observable.Observable implements dts.MenuItem {
+    public text: string = "";
+    public icon: string;
+    public priority: number = 0;
+
+    public _raiseTap() {
+        this._emit(knownEvents.tap);
+    }
 }
\ No newline at end of file
diff --git a/ui/page/page.android.ts b/ui/page/page.android.ts
index c29a97933..584bf1344 100644
--- a/ui/page/page.android.ts
+++ b/ui/page/page.android.ts
@@ -2,7 +2,8 @@
 import definition = require("ui/page");
 import trace = require("trace");
 
-module.exports.knownEvents = pageCommon.knownEvents;
+declare var exports;
+require("utils/module-merge").merge(pageCommon, exports);
 
 export class Page extends pageCommon.Page {
     private _isBackNavigation = false;
diff --git a/ui/page/page.d.ts b/ui/page/page.d.ts
index b5873806b..ede0ea2bd 100644
--- a/ui/page/page.d.ts
+++ b/ui/page/page.d.ts
@@ -30,10 +30,14 @@ declare module "ui/page" {
         export var navigatedTo: string;
     }
 
+    export module knownCollections {
+        export var optionsMenu: string;
+    }
+
     /**
      * Represents a logical unit for navigation (inside Frame).
      */
-    export class Page extends contentView.ContentView {
+    export class Page extends contentView.ContentView implements view.AddArrayFromBuilder {
 
         constructor(options?: Options)
 
@@ -64,6 +68,11 @@ declare module "ui/page" {
          */
         frame: frame.Frame;
 
+        /**
+         * Gets the OptionsMenu for this page.
+         */
+        optionsMenu: OptionsMenu;
+
         /**
          * A method called before navigating to the page.
          * @param context - The data passed to the page through the NavigationEntry.context property.
@@ -88,7 +97,8 @@ declare module "ui/page" {
         onNavigatedFrom(isBackNavigation: boolean): void;
 
         //@private
-        _getStyleScope(): styleScope.StyleScope
+        _getStyleScope(): styleScope.StyleScope;
+        _addArrayFromBuilder(name: string, value: Array<any>): void;
         //@endprivate
 
         on(event: string, callback: (data: observable.EventData) => void);
@@ -118,4 +128,25 @@ declare module "ui/page" {
          */
         exports?: any;
     }
-} 
\ No newline at end of file
+
+    export class OptionsMenu {
+        addItem(item: MenuItem): void;
+        removeItem(item: MenuItem): void;
+        getItems(): Array<MenuItem>;
+        getItemAt(index: number): MenuItem;
+    }
+
+    export class MenuItem extends observable.Observable {
+        text: string;
+        icon: string;
+        priority: number;
+
+        on(event: string, callback: (data: observable.EventData) => void);
+        on(event: "tap", callback: (args: observable.EventData) => void);
+
+        //@private
+        _raiseTap();
+        //@endprivate
+    }
+} 
+