diff --git a/CrossPlatformModules.csproj b/CrossPlatformModules.csproj
index 9872c4ef1..8699cc45e 100644
--- a/CrossPlatformModules.csproj
+++ b/CrossPlatformModules.csproj
@@ -189,6 +189,30 @@
Designer
+
+ Designer
+
+
+ Designer
+
+
+ Designer
+
+
+ Designer
+
+
+ Designer
+
+
+ Designer
+
+
+ Designer
+
+
+ Designer
+
nordic.xml
@@ -995,6 +1019,9 @@
+
+ Designer
+
@@ -2004,7 +2031,7 @@
False
-
+
\ No newline at end of file
diff --git a/apps/ui-tests-app/action-bar/all.xml b/apps/ui-tests-app/action-bar/all.xml
new file mode 100644
index 000000000..a0936859c
--- /dev/null
+++ b/apps/ui-tests-app/action-bar/all.xml
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/ui-tests-app/action-bar/background.xml b/apps/ui-tests-app/action-bar/background.xml
new file mode 100644
index 000000000..a5510dc10
--- /dev/null
+++ b/apps/ui-tests-app/action-bar/background.xml
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/ui-tests-app/action-bar/color.xml b/apps/ui-tests-app/action-bar/color.xml
new file mode 100644
index 000000000..a5510dc10
--- /dev/null
+++ b/apps/ui-tests-app/action-bar/color.xml
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/ui-tests-app/mainPage.ts b/apps/ui-tests-app/mainPage.ts
index 8bf87fabf..34ab51eb4 100644
--- a/apps/ui-tests-app/mainPage.ts
+++ b/apps/ui-tests-app/mainPage.ts
@@ -1,48 +1,89 @@
import button = require("ui/button");
-import dialogs = require("ui/dialogs");
import frame = require("ui/frame");
import gridModule = require("ui/layouts/grid-layout");
import pages = require("ui/page");
import text = require("ui/text-view");
import fs = require("file-system");
import trace = require("trace");
+import observable = require("data/observable");
+import view = require("ui/core/view");
+import dialogs = require("ui/dialogs");
trace.enable();
trace.setCategories(trace.categories.Test);
-var list: string[] = ["pages", "bindings", "css", "dialogs", "image-view", "layouts", "modal-view", "nordic", "web-view"];
-
-// basePath is auto-changed when building multiple apps
var basePath = "";
-export function createPage() {
- var txtInput = new text.TextView();
- var btn = new button.Button();
- btn.text = "Run";
- btn.on(button.Button.tapEvent, function () {
- var filePath, fileName, i = 0;
- while (i < list.length) {
- filePath = fs.path.join(__dirname, list[i], txtInput.text);
- if ((fs.File.exists(filePath + ".xml") || (fs.File.exists(filePath + ".js")))) {
- fileName = basePath + list[i] + "/" + txtInput.text;
- break;
- }
- i++;
- }
- if (i < list.length) {
- frame.topmost().navigate(fileName);
- } else {
- dialogs.alert("Cannot find page: " + txtInput.text);
- }
- });
+var VM = new observable.Observable();
+var examples = new Map();
- var grid = new gridModule.GridLayout();
- grid.addRow(new gridModule.ItemSpec(1, gridModule.GridUnitType.auto));
- grid.addRow(new gridModule.ItemSpec());
- gridModule.GridLayout.setRow(txtInput, 1);
- grid.addChild(btn);
- grid.addChild(txtInput);
+export function pageLoaded(args) {
+ var page = args.object;
+ page.bindingContext = VM;
- var page = new pages.Page();
- page.content = grid;
- return page;
-}
\ No newline at end of file
+}
+
+export function selectExample() {
+ var ex: string = VM.get("selected");
+ if (examples.has(ex)) {
+ frame.topmost().navigate(basePath + examples.get(ex));
+ }
+ else {
+ dialogs.alert("Cannot find example: " + ex);
+ }
+}
+
+examples.set("basics", "bindings/basics");
+
+examples.set("actColor", "action-bar/color");
+examples.set("actBG", "action-bar/background");
+examples.set("actAll", "action-bar/all");
+
+examples.set("tabColor", "tab-view/color");
+examples.set("tabBG", "tab-view/background");
+examples.set("tabTabsBG", "tab-view/tabsBackground");
+examples.set("tabSelected", "tab-view/selected");
+examples.set("tabAll", "tab-view/all");
+
+examples.set("basics", "bindings/basics");
+examples.set("xmlbasics", "bindings/xmlbasics");
+
+examples.set("background", "css/background");
+examples.set("import", "css/import");
+examples.set("radius", "css/radius");
+examples.set("styles", "css/styles");
+
+examples.set("dialogs", "dialogs/dialogs");
+examples.set("view-model", "dialogs/view-model");
+
+examples.set("roundbtn", "image-view/roundbtn");
+
+examples.set("absolute", "layouts/absolute");
+examples.set("dock", "layouts/dock");
+examples.set("grid", "layouts/grid");
+examples.set("myview", "layouts/myview");
+examples.set("stack", "layouts/stack");
+examples.set("wrap", "layouts/wrap");
+
+examples.set("login-page", "modal-view/login-page");
+examples.set("modalview", "modal-view/modalview");
+
+examples.set("nordic", "nordic/nordic");
+
+examples.set("text", "pages/text");
+examples.set("background", "pages/background");
+examples.set("console", "pages/console");
+examples.set("gestures", "pages/gestures");
+examples.set("handlers", "pages/handlers");
+examples.set("htmlview", "pages/htmlview");
+examples.set("i61", "pages/i61");
+examples.set("i73", "pages/i73");
+examples.set("i86", "pages/i86");
+examples.set("listview_binding", "pages/listview_binding");
+examples.set("switchandprogress", "pages/switchandprogress");
+examples.set("textfield", "pages/textfield");
+
+examples.set("webview", "web-view/webview");
+examples.set("webviewhtmlwithimages", "web-view/webviewhtmlwithimages");
+examples.set("webviewlocalfile", "web-view/webviewlocalfile");
+
+//VM.set("selected", "tabAll");
\ No newline at end of file
diff --git a/apps/ui-tests-app/mainPage.xml b/apps/ui-tests-app/mainPage.xml
new file mode 100644
index 000000000..9e64e6a5e
--- /dev/null
+++ b/apps/ui-tests-app/mainPage.xml
@@ -0,0 +1,7 @@
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/ui-tests-app/tab-view/all.xml b/apps/ui-tests-app/tab-view/all.xml
new file mode 100644
index 000000000..5825d3d9b
--- /dev/null
+++ b/apps/ui-tests-app/tab-view/all.xml
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/ui-tests-app/tab-view/background.xml b/apps/ui-tests-app/tab-view/background.xml
new file mode 100644
index 000000000..547492011
--- /dev/null
+++ b/apps/ui-tests-app/tab-view/background.xml
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/ui-tests-app/tab-view/color.xml b/apps/ui-tests-app/tab-view/color.xml
new file mode 100644
index 000000000..e4dec7a65
--- /dev/null
+++ b/apps/ui-tests-app/tab-view/color.xml
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/ui-tests-app/tab-view/selected.xml b/apps/ui-tests-app/tab-view/selected.xml
new file mode 100644
index 000000000..3a8a12f60
--- /dev/null
+++ b/apps/ui-tests-app/tab-view/selected.xml
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/ui-tests-app/tab-view/tabsBackground.xml b/apps/ui-tests-app/tab-view/tabsBackground.xml
new file mode 100644
index 000000000..3a8a12f60
--- /dev/null
+++ b/apps/ui-tests-app/tab-view/tabsBackground.xml
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ui/tab-view/tab-view-common.ts b/ui/tab-view/tab-view-common.ts
index eac3fcbd3..00736e749 100644
--- a/ui/tab-view/tab-view-common.ts
+++ b/ui/tab-view/tab-view-common.ts
@@ -58,6 +58,7 @@ var TAB_VIEW = "TabView";
var ITEMS = "items";
var SELECTED_INDEX = "selectedIndex";
var SELECTED_COLOR = "selectedColor";
+var TABS_BACKGROUND_COLOR = "tabsBackgroundColor";
export module knownCollections {
export var items = "items";
@@ -83,6 +84,13 @@ var selectedColorProperty = new dependencyObservable.Property(
undefined,
dependencyObservable.PropertyMetadataSettings.None));
+var tabsBackgroundColorProperty = new dependencyObservable.Property(
+ TABS_BACKGROUND_COLOR,
+ TAB_VIEW,
+ new proxy.PropertyMetadata(
+ undefined,
+ dependencyObservable.PropertyMetadataSettings.None));
+
(selectedIndexProperty.metadata).onSetNativeValue = function (data: dependencyObservable.PropertyChangeData) {
var tabView = data.object;
tabView._onSelectedIndexPropertyChangedSetNativeValue(data);
@@ -97,6 +105,7 @@ export class TabView extends view.View implements definition.TabView, view.AddAr
public static itemsProperty = itemsProperty;
public static selectedIndexProperty = selectedIndexProperty;
public static selectedColorProperty = selectedColorProperty;
+ public static tabsBackgroundColorProperty = tabsBackgroundColorProperty;
public static selectedIndexChangedEvent = "selectedIndexChanged";
public _addArrayFromBuilder(name: string, value: Array) {
@@ -177,6 +186,14 @@ export class TabView extends view.View implements definition.TabView, view.AddAr
value instanceof color.Color ? value : new color.Color(value));
}
+ get tabsBackgroundColor(): color.Color {
+ return this._getValue(TabView.tabsBackgroundColorProperty);
+ }
+ set tabsBackgroundColor(value: color.Color) {
+ this._setValue(TabView.tabsBackgroundColorProperty,
+ value instanceof color.Color ? value : new color.Color(value));
+ }
+
public _onSelectedIndexPropertyChangedSetNativeValue(data: dependencyObservable.PropertyChangeData) {
var index = this.selectedIndex;
if (types.isUndefined(index)) {
diff --git a/ui/tab-view/tab-view.android.ts b/ui/tab-view/tab-view.android.ts
index 4f9515217..77982bc36 100644
--- a/ui/tab-view/tab-view.android.ts
+++ b/ui/tab-view/tab-view.android.ts
@@ -150,6 +150,14 @@ function selectedColorPropertyChanged(data: dependencyObservable.PropertyChangeD
}
(common.TabView.selectedColorProperty.metadata).onSetNativeValue = selectedColorPropertyChanged;
+function tabsBackgroundColorPropertyChanged(data: dependencyObservable.PropertyChangeData) {
+ var tabLayout = (data.object)._getAndroidTabView();
+ if (tabLayout && data.newValue instanceof color.Color) {
+ tabLayout.setBackgroundColor(data.newValue.android);
+ }
+}
+(common.TabView.tabsBackgroundColorProperty.metadata).onSetNativeValue = tabsBackgroundColorPropertyChanged;
+
export class TabView extends common.TabView {
private _grid: org.nativescript.widgets.GridLayout;
private _tabLayout: org.nativescript.widgets.TabLayout;
diff --git a/ui/tab-view/tab-view.d.ts b/ui/tab-view/tab-view.d.ts
index 2e80b72f0..f97073152 100644
--- a/ui/tab-view/tab-view.d.ts
+++ b/ui/tab-view/tab-view.d.ts
@@ -66,6 +66,11 @@ declare module "ui/tab-view" {
*/
selectedColor: color.Color;
+ /**
+ * Gets or sets the color used for background of the tab items.
+ */
+ tabsBackgroundColor: color.Color;
+
/**
* Gets the native [android widget](http://developer.android.com/reference/android/support/v4/view/ViewPager.html) that represents the user interface for this component. Valid only when running on Android OS.
*/
diff --git a/ui/tab-view/tab-view.ios.ts b/ui/tab-view/tab-view.ios.ts
index 4d93255e6..a6fa5719d 100644
--- a/ui/tab-view/tab-view.ios.ts
+++ b/ui/tab-view/tab-view.ios.ts
@@ -105,6 +105,14 @@ function selectedColorPropertyChanged(data: dependencyObservable.PropertyChangeD
}
(common.TabView.selectedColorProperty.metadata).onSetNativeValue = selectedColorPropertyChanged;
+function tabsBackgroundColorPropertyChanged(data: dependencyObservable.PropertyChangeData) {
+ var tabView = data.object;
+ if (data.newValue instanceof color.Color) {
+ tabView.ios.tabBar.barTintColor = data.newValue.ios;
+ }
+}
+(common.TabView.tabsBackgroundColorProperty.metadata).onSetNativeValue = tabsBackgroundColorPropertyChanged;
+
export class TabView extends common.TabView {
private _ios: UITabBarControllerImpl;
private _delegate: UITabBarControllerDelegateImpl;
@@ -179,6 +187,8 @@ export class TabView extends common.TabView {
var newControllers: NSMutableArray = NSMutableArray.alloc().initWithCapacity(length);
var newController: UIViewController;
+ var states = getTitleAttributesForStates(this);
+
for (i = 0; i < length; i++) {
item = newItems[i];
@@ -205,6 +215,9 @@ export class TabView extends common.TabView {
(tabBarItem).titlePositionAdjustment = { horizontal: 0, vertical: -20 };
}
}
+ tabBarItem.setTitleTextAttributesForState(states.normalState, UIControlState.UIControlStateNormal);
+ tabBarItem.setTitleTextAttributesForState(states.selectedState, UIControlState.UIControlStateSelected);
+
newController.tabBarItem = tabBarItem;
newControllers.addObject(newController);
}