diff --git a/CrossPlatformModules.csproj b/CrossPlatformModules.csproj
index 62e95a62f..bb95f4f6c 100644
--- a/CrossPlatformModules.csproj
+++ b/CrossPlatformModules.csproj
@@ -189,6 +189,9 @@
Designer
+
+ Designer
+
Designer
@@ -229,6 +232,9 @@
Designer
+
+ system-icons.xml
+
all.xml
@@ -2098,7 +2104,7 @@
False
-
+
-
+
\ 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
index 5b8d5cd19..49eff383f 100644
--- a/apps/action-bar-demo/pages/action-items-icon.ts
+++ b/apps/action-bar-demo/pages/action-items-icon.ts
@@ -1,9 +1,17 @@
-export function leftTap(args) {
- console.log("Left item tapped!");
+export function searchTap(args) {
+ console.log("Search item tapped!");
}
-export function rightTap(args) {
- console.log("Right item tapped!");
+export function cameraTap(args) {
+ 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) {
diff --git a/apps/action-bar-demo/pages/action-items-icon.xml b/apps/action-bar-demo/pages/action-items-icon.xml
index d92e72c57..41e6d4232 100644
--- a/apps/action-bar-demo/pages/action-items-icon.xml
+++ b/apps/action-bar-demo/pages/action-items-icon.xml
@@ -2,9 +2,11 @@
-
-
-
+
+
+
+
+
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 ef1a27e66..c7d956ee8 100644
--- a/apps/tests/ui/action-bar/action-bar-tests-common.ts
+++ b/apps/tests/ui/action-bar/action-bar-tests-common.ts
@@ -76,6 +76,58 @@ import actionBarModule = require("ui/action-bar");
//
//```
//
+// ## Displaying Platform-Specific System Icons on Action Items
+//```XML
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+// ...
+//
+//```
+//
+//### 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.
+//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
+//
+//### 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.
+//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
+//
//
export function test_actionItem_inherit_bindingContext() {
diff --git a/apps/ui-tests-app/action-bar/system-icons.ts b/apps/ui-tests-app/action-bar/system-icons.ts
new file mode 100644
index 000000000..ac77dc39d
--- /dev/null
+++ b/apps/ui-tests-app/action-bar/system-icons.ts
@@ -0,0 +1,5 @@
+import frame = require("ui/frame");
+
+export function navigate(args) {
+ frame.topmost().navigate("action-bar/clean");
+}
\ No newline at end of file
diff --git a/apps/ui-tests-app/action-bar/system-icons.xml b/apps/ui-tests-app/action-bar/system-icons.xml
new file mode 100644
index 000000000..827b8bff1
--- /dev/null
+++ b/apps/ui-tests-app/action-bar/system-icons.xml
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/ui-tests-app/mainPage.ts b/apps/ui-tests-app/mainPage.ts
index 96db5a781..d0efad4c9 100644
--- a/apps/ui-tests-app/mainPage.ts
+++ b/apps/ui-tests-app/mainPage.ts
@@ -35,6 +35,7 @@ export function selectExample() {
examples.set("actColor", "action-bar/color");
examples.set("actBG", "action-bar/background");
examples.set("actStyle", "action-bar/all");
+examples.set("actSystemIcons", "action-bar/system-icons");
examples.set("basics", "bindings/basics");
examples.set("xmlbasics", "bindings/xmlbasics");
diff --git a/tsconfig.json b/tsconfig.json
index f56083587..75cfbfa7e 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -328,6 +328,7 @@
"apps/ui-tests-app/action-bar/background.ts",
"apps/ui-tests-app/action-bar/clean.ts",
"apps/ui-tests-app/action-bar/color.ts",
+ "apps/ui-tests-app/action-bar/system-icons.ts",
"apps/ui-tests-app/app.ts",
"apps/ui-tests-app/bindings/basics.ts",
"apps/ui-tests-app/bindings/xmlbasics.ts",
diff --git a/ui/action-bar/action-bar.android.ts b/ui/action-bar/action-bar.android.ts
index aae2524c7..ac03be14a 100644
--- a/ui/action-bar/action-bar.android.ts
+++ b/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);
diff --git a/ui/action-bar/action-bar.d.ts b/ui/action-bar/action-bar.d.ts
index 7841dcc8a..be578f9b4 100644
--- a/ui/action-bar/action-bar.d.ts
+++ b/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;
}
/**
diff --git a/ui/action-bar/action-bar.ios.ts b/ui/action-bar/action-bar.ios.ts
index 2040c9f1d..8538dfe74 100644
--- a/ui/action-bar/action-bar.ios.ts
+++ b/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 {
(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");