Implemented #364: Ability to use built-in system icons on ActionBarItems.

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

@@ -1,9 +1,17 @@
-export function leftTap(args) {
+export function searchTap(args) {
-    console.log("Left item tapped!");
+    console.log("Search item tapped!");
 }
 
-export function rightTap(args) {
+export function cameraTap(args) {
-    console.log("Right item tapped!");
+    console.log("Camera item tapped!");
+}
+
+export function trashTap(args) {
+    console.log("Trash item tapped!");
+}
+
+export function iconTap(args) {
+    console.log("Icon item tapped!");
 }
 
 export function popTap(args) {

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

@@ -2,9 +2,11 @@
   <Page.actionBar>
     <ActionBar title="Title">
       <ActionBar.actionItems>
-        <ActionItem tap="leftTap"  icon="~/test-icon.png" iosPosition="left"/>
+        <ActionItem tap="searchTap" ios.Position="left" ios.systemIcon="12" android.systemIcon="ic_menu_search"/>
-        <ActionItem tap="rightTap" icon="~/test-icon.png" iosPosition="right"/>
+        <ActionItem tap="cameraTap" ios.Position="right" ios.systemIcon="15" android.systemIcon="ic_menu_camera"/>
-        <ActionItem tap="popTap"   icon="res://ic_test"   iosPosition="right"  androidPosition="popup" text="pop"/>
+        <ActionItem tap="trashTap" ios.Position="right" ios.systemIcon="16" android.systemIcon="ic_menu_delete"/>
+        <ActionItem tap="iconTap" ios.position="right" icon="~/test-icon.png" />
+        <ActionItem tap="popTap" ios.position="right" android.position="popup" text="pop"/>        
       </ActionBar.actionItems>
     </ActionBar>
   </Page.actionBar>

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

@@ -16,7 +16,10 @@ var ACTION_ITEM_ID_OFFSET = 1000;
 global.moduleMerge(common, exports);
 
 export class ActionItem extends common.ActionItemBase implements dts.ActionItem {
-    private _androidPosition: dts.AndroidActionItemSettings = { position: enums.AndroidActionItemPosition.actionBar };
+    private _androidPosition: dts.AndroidActionItemSettings = {
+        position: enums.AndroidActionItemPosition.actionBar,
+        systemIcon: undefined
+    };
 
     public get android(): dts.AndroidActionItemSettings {
         return this._androidPosition;
@@ -200,11 +203,22 @@ export class ActionBar extends common.ActionBar {
         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) {
+
+            if (item.android.systemIcon) {
+                // Try to look in the system resources.
+                let systemResourceId = android.content.res.Resources.getSystem().getIdentifier(item.android.systemIcon, "drawable", "android");
+                if (systemResourceId) {
+                    menuItem.setIcon(systemResourceId);
+                }
+            }
+            else if (item.icon) {
                 var drawableOrId = getDrawableOrResourceId(item.icon, this._appResources);
                 if (drawableOrId) {
                     menuItem.setIcon(drawableOrId);
                 }
+                else {
+                    throw new Error("Error loading icon from " + item.icon);
+                }
             }
 
             var showAsAction = getShowAsAction(item);

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

@@ -162,6 +162,14 @@ declare module "ui/action-bar" {
          *  3. popup - item is shown in the popup menu.
          */
         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.
+         * 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
+         */
+        systemIcon: string;
     }
     
     /**
@@ -174,6 +182,38 @@ declare module "ui/action-bar" {
          *  2. right - items is shown at the right part of the navigation bar.
          */
         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.
+         * 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
+         *  1: Cancel
+         *  2: Edit
+         *  3: Save
+         *  4: Add
+         *  5: FlexibleSpace
+         *  6: FixedSpace
+         *  7: Compose
+         *  8: Reply
+         *  9: Action
+         * 10: Organize
+         * 11: Bookmarks
+         * 12: Search
+         * 13: Refresh
+         * 14: Stop
+         * 15: Camera
+         * 16: Trash
+         * 17: Play
+         * 18: Pause
+         * 19: Rewind
+         * 20: FastForward
+         * 21: Undo
+         * 22: Redo
+         * 23: PageCurl
+         */
+        systemIcon: number;
     }
 
     /**

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

@@ -5,11 +5,15 @@ import frameModule = require("ui/frame");
 import enums = require("ui/enums");
 import view = require("ui/core/view");
 import utils = require("utils/utils");
+import types = require("utils/types");
 
 global.moduleMerge(common, exports);
 
 export class ActionItem extends common.ActionItemBase implements dts.ActionItem {
-    private _ios: dts.IOSActionItemSettings = { position: enums.IOSActionItemPosition.left };
+    private _ios: dts.IOSActionItemSettings = {
+        position: enums.IOSActionItemPosition.left,
+        systemIcon: undefined
+    };
     public get ios(): dts.IOSActionItemSettings {
         return this._ios;
     }
@@ -119,11 +123,18 @@ export class ActionBar extends common.ActionBar {
         (<any>item).handler = tapHandler;
 
         var barButtonItem: UIBarButtonItem;
-        if (item.icon) {
+
+        if (types.isNumber(item.ios.systemIcon)) {
+            barButtonItem = UIBarButtonItem.alloc().initWithBarButtonSystemItemTargetAction(item.ios.systemIcon, tapHandler, "tap");
+        }
+        else if (item.icon) {
             var img = imageSource.fromFileOrResource(item.icon);
             if (img && img.ios) {
                 barButtonItem = UIBarButtonItem.alloc().initWithImageStyleTargetAction(img.ios, UIBarButtonItemStyle.UIBarButtonItemStylePlain, tapHandler, "tap");
             }
+            else {
+                throw new Error("Error loading icon from " + item.icon);
+            }
         }
         else {
             barButtonItem = UIBarButtonItem.alloc().initWithTitleStyleTargetAction(item.text + "", UIBarButtonItemStyle.UIBarButtonItemStylePlain, tapHandler, "tap");