OptionsMenu XML support

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);
+    }
 }

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;

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;
     }
-} 
+
+    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
+    }
+} 
+