Support for android.systemIcon in NavigationBar

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

@@ -65,17 +65,6 @@ import actionBarModule = require("ui/action-bar");
 // * **Android** - `actionBar`, `actionBarIfRoom` and `popup`. The default is `actionBar`.
 // * **iOS** - `left` and `right`. The default is `left`.
 //
-// ## Setting Navigation Button
-//```XML
-// <Page>
-//   <Page.actionBar>
-//     <ActionBar title="Title">
-//       <NavigationButton text="go back"/>
-//     </ActionBar>
-//   ...
-// </Page>
-//```
-// 
 // ## Displaying Platform-Specific System Icons on Action Items
 //```XML
 // <Page>
@@ -94,7 +83,8 @@ import actionBarModule = require("ui/action-bar");
 //
 //### iOS
 //Set `ios.systemIcon` to a number representing the iOS system item to be displayed.
-//Use this property instead of `ActionItemBase.icon` if you want to diplsay a built-in iOS system icon.
+//Use this property instead of `ActionItem.icon` if you want to diplsay a built-in iOS system icon.
+//Note: systemIcon is not supported on NavigationButton in iOS
 //The value should be a number from the `UIBarButtonSystemItem` enumeration
 //(https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIBarButtonItem_Class/#//apple_ref/c/tdef/UIBarButtonSystemItem)
 //0: Done
@@ -124,10 +114,23 @@ import actionBarModule = require("ui/action-bar");
 //
 //### Android
 //Set `android.systemIcon` the name of the system drawable resource to be displayed.
-//Use this property instead of `ActionItemBase.icon` if you want to diplsay a built-in Android system icon.
+//Use this property instead of `ActionItem.icon` if you want to diplsay a built-in Android system icon.
 //The value should be a string such as 'ic_menu_search' if you want to display the built-in Android Menu Search icon for example.
 //For a full list of Android drawable names, please visit http://androiddrawables.com
 //
+// ## Setting Navigation Button
+//```XML
+// <Page>
+//   <Page.actionBar>
+//     <ActionBar title="Title">
+//       <NavigationButton text="go back" android.systemIcon = "ic_menu_back"/>
+//     </ActionBar>
+//   ...
+// </Page>
+//```
+//Setting `text` for the navigation button is not supproted in Android. You can use `icon` or `android.systemIcon` to set the image in Android.
+//Setting `ios.systemIcon` for the navigation button is not supported in iOS.
+//
 // </snippet>
 
 export function test_actionItem_inherit_bindingContext() {

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

@@ -23,7 +23,7 @@ export class ActionBar extends view.View implements dts.ActionBar {
     public static titleProperty = new dependencyObservable.Property("title", "ActionBar", new proxy.PropertyMetadata(undefined, dependencyObservable.PropertyMetadataSettings.None, onTitlePropertyChanged));
     
     private _actionItems: ActionItems;
-    private _navigationButton: NavigationButton;
+    private _navigationButton: dts.NavigationButton;
     private _page: pages.Page;
     private _titleView: view.View;
 
@@ -34,10 +34,10 @@ export class ActionBar extends view.View implements dts.ActionBar {
         this._setValue(ActionBar.titleProperty, value);
     }
 
-    get navigationButton(): NavigationButton {
+    get navigationButton(): dts.NavigationButton {
         return this._navigationButton;
     }
-    set navigationButton(value: NavigationButton) {
+    set navigationButton(value: dts.NavigationButton) {
         if (this._navigationButton !== value) {
             if (this._navigationButton) {
                 this._navigationButton.actionBar = undefined;
@@ -126,7 +126,7 @@ export class ActionBar extends view.View implements dts.ActionBar {
     }
 
     public _addChildFromBuilder(name: string, value: any) {
-        if (value instanceof NavigationButton) {
+        if (value instanceof dts.NavigationButton) {
             this.navigationButton = value;
         }
 
@@ -229,34 +229,34 @@ export class ActionItems implements dts.ActionItems {
     }
 }
 
-export class ActionItemBase extends bindable.Bindable implements dts.ActionItemBase {
+export class ActionItem extends bindable.Bindable implements dts.ActionItem {
     public static tapEvent = "tap";
 
     public static textProperty = new dependencyObservable.Property(
-        "text", "ActionItemBase", new dependencyObservable.PropertyMetadata("", null, ActionItemBase.onItemChanged));
+        "text", "ActionItem", new dependencyObservable.PropertyMetadata("", null, ActionItem.onItemChanged));
 
     public static iconProperty = new dependencyObservable.Property(
-        "icon", "ActionItemBase", new dependencyObservable.PropertyMetadata(null, null, ActionItemBase.onItemChanged));
+        "icon", "ActionItem", new dependencyObservable.PropertyMetadata(null, null, ActionItem.onItemChanged));
 
     private static onItemChanged(data: dependencyObservable.PropertyChangeData) {
-        var menuItem = <ActionItemBase>data.object;
+        var menuItem = <ActionItem>data.object;
         if (menuItem.actionBar) {
             menuItem.actionBar.update();
         }
     }
 
     get text(): string {
-        return this._getValue(ActionItemBase.textProperty);
+        return this._getValue(ActionItem.textProperty);
     }
     set text(value: string) {
-        this._setValue(ActionItemBase.textProperty, value);
+        this._setValue(ActionItem.textProperty, value);
     }
 
     get icon(): string {
-        return this._getValue(ActionItemBase.iconProperty);
+        return this._getValue(ActionItem.iconProperty);
     }
     set icon(value: string) {
-        this._setValue(ActionItemBase.iconProperty, value);
+        this._setValue(ActionItem.iconProperty, value);
     }
 
     private _actionBar: ActionBar;
@@ -273,10 +273,10 @@ export class ActionItemBase extends bindable.Bindable implements dts.ActionItemB
     }
 
     public _raiseTap() {
-        this._emit(ActionItemBase.tapEvent);
+        this._emit(ActionItem.tapEvent);
     }
-}
 
-export class NavigationButton extends ActionItemBase {
+    public ios: dts.IOSActionItemSettings;
 
+    public android: dts.AndroidActionItemSettings;
 }

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

@@ -15,7 +15,7 @@ var ACTION_ITEM_ID_OFFSET = 1000;
 
 global.moduleMerge(common, exports);
 
-export class ActionItem extends common.ActionItemBase implements dts.ActionItem {
+export class ActionItem extends common.ActionItem {
     private _androidPosition: dts.AndroidActionItemSettings = {
         position: enums.AndroidActionItemPosition.actionBar,
         systemIcon: undefined
@@ -27,9 +27,6 @@ export class ActionItem extends common.ActionItemBase implements dts.ActionItem
     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 {
@@ -62,6 +59,10 @@ export class AndroidActionBarSettings implements dts.AndroidActionBarSettings {
     }
 }
 
+export class NavigationButton extends ActionItem {
+
+}
+
 export class ActionBar extends common.ActionBar {
     private _appResources: android.content.res.Resources;
     private _android: AndroidActionBarSettings;
@@ -142,8 +143,18 @@ export class ActionBar extends common.ActionBar {
     public _updateNavigationButton() {
         var navButton = this.navigationButton;
         if (navButton) {
-            var drawableOrId = getDrawableOrResourceId(navButton.icon, this._appResources);
+
-            this._toolbar.setNavigationIcon(drawableOrId);
+            if (navButton.android.systemIcon) {
+                // Try to look in the system resources.
+                let systemResourceId = getSystemResourceId(navButton.android.systemIcon);
+                if (systemResourceId) {
+                    this._toolbar.setNavigationIcon(systemResourceId);
+                }
+            }
+            else if (navButton.icon) {
+                let drawableOrId = getDrawableOrResourceId(navButton.icon, this._appResources);
+                this._toolbar.setNavigationIcon(drawableOrId);
+            }
 
             this._toolbar.setNavigationOnClickListener(new android.view.View.OnClickListener({
                 onClick: function (v) {
@@ -206,7 +217,7 @@ export class ActionBar extends common.ActionBar {
 
             if (item.android.systemIcon) {
                 // Try to look in the system resources.
-                let systemResourceId = android.content.res.Resources.getSystem().getIdentifier(item.android.systemIcon, "drawable", "android");
+                let systemResourceId = getSystemResourceId(item.android.systemIcon);
                 if (systemResourceId) {
                     menuItem.setIcon(systemResourceId);
                 }
@@ -321,3 +332,7 @@ function getIconVisibility(iconVisibility: string): boolean {
             return false;
     }
 }
+
+function getSystemResourceId(systemIcon: string): number {
+    return android.content.res.Resources.getSystem().getIdentifier(systemIcon, "drawable", "android");
+}

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

@@ -85,9 +85,9 @@ declare module "ui/action-bar" {
     }
 
     /**
-     * Base class for action items.
+     * Represents an action item in the action bar.
      */
-    export class ActionItemBase extends bindable.Bindable {
+    export class ActionItem extends bindable.Bindable {
         /**
          * String value used when hooking to tap event.
          */
@@ -134,12 +134,7 @@ declare module "ui/action-bar" {
         //@private
         _raiseTap(): void;
         //@endprivate
-    }
 
-    /**
-     * Represents an action item in the action bar.
-     */
-    export class ActionItem extends ActionItemBase {
         /**
          * Gets the iOS specific options of the action item.
          */
@@ -160,12 +155,13 @@ declare module "ui/action-bar" {
          *  1. actionBar - item is shown in the action bar.
          *  2. actionBarIfRoom - item is shown in the action bar if there is room for it. Otherwise it is put in the popup menu.
          *  3. popup - item is shown in the popup menu.
+         * Note: Property not applicable to NavigationButton
          */
         position: string;
         
         /**
          * Gets or sets the name of the system drawable resource to be displayed.
-         * Use this property instead of ActionItemBase.icon if you want to diplsay a built-in Android system icon.
+         * Use this property instead of ActionItem.icon if you want to diplsay a built-in Android system icon.
          * The value should be a string such as 'ic_menu_search' if you want to display the built-in Android Menu Search icon for example.
          * For a full list of Android drawable names, please visit http://androiddrawables.com
          */
@@ -180,12 +176,14 @@ declare module "ui/action-bar" {
          * Gets or sets the position of the action item in the action bar.
          *  1. left - items is shown at the left part of the navigation bar. This is the default value.
          *  2. right - items is shown at the right part of the navigation bar.
+         * Note: Property not applicable to NavigationButton
          */
         position: string;
 
         /**
          * Gets or sets a number representing the iOS system item to be displayed.
-         * Use this property instead of ActionItemBase.icon if you want to diplsay a built-in iOS system icon.
+         * Use this property instead of ActionItem.icon if you want to diplsay a built-in iOS system icon.
+         * Note: Property not applicable to NavigationButton
          * The value should be a number from the UIBarButtonSystemItem enumeration
          * (https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIBarButtonItem_Class/#//apple_ref/c/tdef/UIBarButtonSystemItem)
          *  0: Done
@@ -240,7 +238,7 @@ declare module "ui/action-bar" {
     /**
      * Represents the navigation (a.k.a. "back") button.
      */
-    export class NavigationButton extends ActionItemBase {
+    export class NavigationButton extends ActionItem {
 
     }
 

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

@@ -9,7 +9,7 @@ import types = require("utils/types");
 
 global.moduleMerge(common, exports);
 
-export class ActionItem extends common.ActionItemBase implements dts.ActionItem {
+export class ActionItem extends common.ActionItem {
     private _ios: dts.IOSActionItemSettings = {
         position: enums.IOSActionItemPosition.left,
         systemIcon: undefined
@@ -20,9 +20,10 @@ export class ActionItem extends common.ActionItemBase implements dts.ActionItem
     public set ios(value: dts.IOSActionItemSettings) {
         throw new Error("ActionItem.android is read-only");
     }
+}
+
+export class NavigationButton extends ActionItem {
 
-    // Not used in IOS
-    public android: dts.AndroidActionItemSettings;
 }
 
 export class ActionBar extends common.ActionBar {
@@ -214,9 +215,9 @@ export class ActionBar extends common.ActionBar {
 }
 
 class TapBarItemHandlerImpl extends NSObject {
-    private _owner: WeakRef<dts.ActionItemBase>;
+    private _owner: WeakRef<dts.ActionItem>;
 
-    public static initWithOwner(owner: WeakRef<dts.ActionItemBase>): TapBarItemHandlerImpl {
+    public static initWithOwner(owner: WeakRef<dts.ActionItem>): TapBarItemHandlerImpl {
         let handler = <TapBarItemHandlerImpl>TapBarItemHandlerImpl.new();
         handler._owner = owner;
         return handler;