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 0ece3b44f..90a08f444 100644
--- a/apps/tests/ui/action-bar/action-bar-tests-common.ts
+++ b/apps/tests/ui/action-bar/action-bar-tests-common.ts
@@ -2,10 +2,79 @@
import LabelModule = require("ui/label");
import helper = require("../helper");
import builder = require("ui/builder");
-import actionBar = require("ui/action-bar");
import button = require("ui/button");
import PageModule = require("ui/page");
+//
+// # ActionBar
+// Using a ActionBar requires the action-bar module.
+// ``` JavaScript
+import actionBarModule = require("ui/action-bar");
+// ```
+//
+// ## Setting Title and Icon
+//```XML
+//
+//
+// {%raw%}{%endraw%}
+//
+// ...
+//
+//```
+//The icon can only be set in Android platform. Following the design guides it is automatically hidden in Lollipop versions (API level >= 20). You explicitly control its visibility with the `android.iconVisibility' property.
+//
+//
+// ## Setting Custom Title View
+//```XML
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+// ...
+//
+//```
+//
+// ## Setting Action Items
+//```XML
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+// ...
+//
+//```
+//
+//The position option is platform specific. The available values are as follows:
+// * **Android** - `actionBar`, `actionBarIfRoom` and `popup`. The default is `actionBar`.
+// * **iOS** - `left` and `right`. The default is `left`.
+//
+// ## Setting Navigation Button
+//```XML
+//
+//
+//
+//
+//
+// ...
+//
+//```
+//
+//
+
export function test_actionItem_inherit_bindingContext() {
var page: PageModule.Page;
var label: LabelModule.Label;
@@ -14,7 +83,7 @@ export function test_actionItem_inherit_bindingContext() {
var pageFactory = function (): PageModule.Page {
page = new PageModule.Page();
page.bindingContext = context;
- var actionItem = new actionBar.ActionItem();
+ var actionItem = new actionBarModule.ActionItem();
actionItem.bind({
sourceProperty: "text",
@@ -110,7 +179,7 @@ export function test_Setting_ActionItems_doesnt_thrown() {
var pageFactory = function (): PageModule.Page {
page = new PageModule.Page();
- var actionItem = new actionBar.ActionItem();
+ var actionItem = new actionBarModule.ActionItem();
actionItem.text = "Item";
page.actionBar.actionItems.addItem(actionItem);
diff --git a/ui/action-bar/action-bar-common.ts b/ui/action-bar/action-bar-common.ts
index 6220dff13..7f50ed917 100644
--- a/ui/action-bar/action-bar-common.ts
+++ b/ui/action-bar/action-bar-common.ts
@@ -158,7 +158,7 @@ export class ActionBar extends view.View implements dts.ActionBar {
}
}
- public shouldShow(): boolean {
+ public _shouldShow(): boolean {
if (this.title ||
(this.android && this.android.icon) ||
this.navigationButton ||
diff --git a/ui/action-bar/action-bar.d.ts b/ui/action-bar/action-bar.d.ts
index 8c454ef4a..4040d6386 100644
--- a/ui/action-bar/action-bar.d.ts
+++ b/ui/action-bar/action-bar.d.ts
@@ -1,42 +1,94 @@
-declare module "ui/action-bar" {
+/**
+ * Contains the action bar related classes.
+ */
+declare module "ui/action-bar" {
import observable = require("data/observable");
import view = require("ui/core/view");
import dependencyObservable = require("ui/core/dependency-observable");
import bindable = require("ui/core/bindable");
import pages = require("ui/page");
+ /**
+ * Provides an abstraction over the ActionBar (android) and NavigationBar (iOS).
+ */
export class ActionBar extends view.View implements view.AddArrayFromBuilder, view.AddChildFromBuilder {
+
+ /**
+ * Gets or sets the action bar title.
+ */
title: string;
- navigationButton: NavigationButton;
- actionItems: ActionItems;
+ /**
+ * Gets or sets the title view. When set - replaces the title with a custom view.
+ */
titleView: view.View;
-
+
+ /**
+ * Gets or sets the navigation button (a.k.a. the back button).
+ */
+ navigationButton: NavigationButton;
+
+ /**
+ * Gets the collection of action items.
+ */
+ actionItems: ActionItems;
+
+ /**
+ * Gets the android specific options of the action bar.
+ */
android: AndroidActionBarSettings;
+ /**
+ * Gets the page that contains the action bar.
+ */
page: pages.Page;
- shouldShow(): boolean
-
+ /**
+ * Updates the action bar.
+ */
update();
//@private
+ _shouldShow(): boolean
_updateAndroid(menu: android.view.IMenu);
_onAndroidItemSelected(itemId: number): boolean
_addArrayFromBuilder(name: string, value: Array): void;
_addChildFromBuilder(name: string, value: any): void;
-
//@endprivate
}
+ /**
+ * Represents a collection of ActionItems.
+ */
export class ActionItems {
+ /**
+ * Adds an item to the collection.
+ * @param item - the item to be added
+ */
addItem(item: ActionItem): void;
+
+ /**
+ * Removes an item to the collection.
+ * @param item - The item to be removed.
+ */
removeItem(item: ActionItem): void;
+
+ /**
+ * Gets an array of the current action items in the collection.
+ */
getItems(): Array;
+
+ /**
+ * Gets an item at a specified index.
+ * @param index - The index.
+ */
getItemAt(index: number): ActionItem;
}
+ /**
+ * Base class for action items.
+ */
export class ActionItemBase extends bindable.Bindable {
/**
* String value used when hooking to tap event.
@@ -53,8 +105,19 @@
*/
public static iconProperty: dependencyObservable.Property;
+ /**
+ * Gets or sets the text of the action item.
+ */
text: string;
+
+ /**
+ * Gets or sets the icon of the action item.
+ */
icon: string;
+
+ /**
+ * Gets the action bar that contains the action item.
+ */
actionBar: ActionBar;
/**
@@ -75,24 +138,70 @@
//@endprivate
}
+ /**
+ * Represents an action item in the action bar.
+ */
export class ActionItem extends ActionItemBase {
+ /**
+ * Gets the iOS specific options of the action item.
+ */
ios: IOSActionItemSettings;
+
+ /**
+ * Gets the Android specific options of the action item.
+ */
android: AndroidActionItemSettings;
}
+ /**
+ * Represents Android specific options of the action item.
+ */
export interface AndroidActionItemSettings {
+ /**
+ * Gets or sets the position of the action item in the 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.
+ */
position: string;
}
+ /**
+ * Represents iOS specific options of the action item.
+ */
export interface IOSActionItemSettings {
+ /**
+ * 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.
+ */
position: string;
}
+ /**
+ * Represents Android specific options of the action bar.
+ */
export interface AndroidActionBarSettings {
+
+ /**
+ * Gets or sets the action bar icon.
+ */
icon: string;
+
+ /**
+ * Gets or sets the visibility of the action bar icon.
+ * The icon is visible by default in pre-lollipop (API level < 20) versions of android and is hidden in lollipop (API level >= 20)
+ * The possible values are:
+ * 1. auto - the default behavior. This is the default value.
+ * 2. always - the icon is aways shown.
+ * 3. never - the icon is aways hidden.
+ */
iconVisibility: string;
}
-
+
+ /**
+ * Represents the navigation (a.k.a. "back") button.
+ */
export class NavigationButton extends ActionItemBase {
}
diff --git a/ui/frame/frame.ios.ts b/ui/frame/frame.ios.ts
index 61e553f7b..1d49afde6 100644
--- a/ui/frame/frame.ios.ts
+++ b/ui/frame/frame.ios.ts
@@ -84,7 +84,7 @@ export class Frame extends frameCommon.Frame {
case enums.NavigationBarVisibility.auto:
var pageInstance: pages.Page = page || this.currentPage;
- newValue = this.backStack.length > 0 || (pageInstance && pageInstance.actionBar.shouldShow());
+ newValue = this.backStack.length > 0 || (pageInstance && pageInstance.actionBar._shouldShow());
newValue = !!newValue; // Make sure it is boolean
break;
}