diff --git a/apps/tests/ui/segmented-bar/segmented-bar-tests.ts b/apps/tests/ui/segmented-bar/segmented-bar-tests.ts index a9352840a..8a6c20b68 100644 --- a/apps/tests/ui/segmented-bar/segmented-bar-tests.ts +++ b/apps/tests/ui/segmented-bar/segmented-bar-tests.ts @@ -29,7 +29,7 @@ function _createSegmentedBar(): segmentedBarModule.SegmentedBar { function _createItems(count: number): Array { var items = new Array(); for (var i = 0; i < count; i++) { - items.push({ title: i + "" }); + items.push(new segmentedBarModule.SegmentedBarItem({ title: i + "" })); } return items; } diff --git a/ui/segmented-bar/segmented-bar-common.ts b/ui/segmented-bar/segmented-bar-common.ts index a81994929..5ac8b9e64 100644 --- a/ui/segmented-bar/segmented-bar-common.ts +++ b/ui/segmented-bar/segmented-bar-common.ts @@ -4,11 +4,32 @@ import proxy = require("ui/core/proxy"); import dependencyObservable = require("ui/core/dependency-observable"); import color = require("color"); import types = require("utils/types"); +import bindable = require("ui/core/bindable"); export module knownCollections { export var items = "items"; } +export class SegmentedBarItem extends bindable.Bindable implements definition.SegmentedBarItem { + private _title: string; + public _parent: SegmentedBar; + + get title(): string { + return this._title; + } + + set title(value: string) { + if (this._title !== value) { + this._title = value; + this._update(); + } + } + + public _update() { + // + } +} + export class SegmentedBar extends view.View implements definition.SegmentedBar { public _addArrayFromBuilder(name: string, value: Array) { if (name === "items") { @@ -52,7 +73,19 @@ export class SegmentedBar extends view.View implements definition.SegmentedBar { value instanceof color.Color ? value : new color.Color(value)); } - public static selectedBackgroundColorProperty = new dependencyObservable.Property("selectedBackgroundColor", "SegmentedBar", new proxy.PropertyMetadata(undefined)) - public static selectedIndexProperty = new dependencyObservable.Property("selectedIndex", "SegmentedBar", new proxy.PropertyMetadata(undefined)) - public static itemsProperty = new dependencyObservable.Property("items", "SegmentedBar", new proxy.PropertyMetadata(undefined)) + public static selectedBackgroundColorProperty = new dependencyObservable.Property("selectedBackgroundColor", "SegmentedBar", new proxy.PropertyMetadata(undefined)); + public static selectedIndexProperty = new dependencyObservable.Property("selectedIndex", "SegmentedBar", new proxy.PropertyMetadata(undefined)); + public static itemsProperty = new dependencyObservable.Property("items", "SegmentedBar", new proxy.PropertyMetadata(undefined)); + + public _onBindingContextChanged(oldValue: any, newValue: any) { + super._onBindingContextChanged(oldValue, newValue); + if (this.items && this.items.length > 0) { + var i = 0; + var length = this.items.length; + for (; i < length; i++) { + console.log(`this.items[i].bindingContext = ${newValue};`); + this.items[i].bindingContext = newValue; + } + } + } } \ No newline at end of file diff --git a/ui/segmented-bar/segmented-bar.android.ts b/ui/segmented-bar/segmented-bar.android.ts index c76a2f372..4f91ec0df 100644 --- a/ui/segmented-bar/segmented-bar.android.ts +++ b/ui/segmented-bar/segmented-bar.android.ts @@ -31,6 +31,12 @@ function onItemsPropertyChanged(data: dependencyObservable.PropertyChangeData) { return; } + var oldItems = >data.oldValue; + if (oldItems && oldItems.length) { + for (var i = 0; i < oldItems.length; i++) { + (oldItems[i])._parent = null; + } + } view.android.clearAllTabs(); var newItems = >data.newValue; @@ -39,7 +45,8 @@ function onItemsPropertyChanged(data: dependencyObservable.PropertyChangeData) { if (newItems && newItems.length) { for (var i = 0; i < newItems.length; i++) { - var title = newItems[i].title; + (newItems[i])._parent = view; + var title = "" + newItems[i].title; var tab = view.android.newTabSpec(i + ""); tab.setIndicator(title); @@ -109,6 +116,19 @@ class SegmentedBarColorDrawable extends android.graphics.drawable.ColorDrawable } } +export class SegmentedBarItem extends common.SegmentedBarItem { + public _update() { + if (this._parent && this._parent.android) { + // TabHost.TabSpec.setIndicator DOES NOT WORK once the title has been set. + // http://stackoverflow.com/questions/2935781/modify-tab-indicator-dynamically-in-android + var tabIndex = this._parent.items.indexOf(this); + var titleTextViewId = 16908310; // http://developer.android.com/reference/android/R.id.html#title + var titleTextView = this._parent.android.getTabWidget().getChildAt(tabIndex).findViewById(titleTextViewId); + titleTextView.setText("" + this.title); + } + } +} + export class SegmentedBar extends common.SegmentedBar { private _android: OurTabHost; public _listener: android.widget.TabHost.OnTabChangeListener; diff --git a/ui/segmented-bar/segmented-bar.d.ts b/ui/segmented-bar/segmented-bar.d.ts index 0806e56ba..7c92d6d4d 100644 --- a/ui/segmented-bar/segmented-bar.d.ts +++ b/ui/segmented-bar/segmented-bar.d.ts @@ -5,15 +5,16 @@ declare module "ui/segmented-bar" { import view = require("ui/core/view"); import dependencyObservable = require("ui/core/dependency-observable"); import color = require("color"); + import bindable = require("ui/core/bindable"); /** * Represents a SegmentedBar item. */ - interface SegmentedBarItem { + class SegmentedBarItem extends bindable.Bindable { /** * Gets or sets the title of the SegmentedBarItem. */ - title: string; + public title: string; } /** diff --git a/ui/segmented-bar/segmented-bar.ios.ts b/ui/segmented-bar/segmented-bar.ios.ts index d5adeee19..094101c6e 100644 --- a/ui/segmented-bar/segmented-bar.ios.ts +++ b/ui/segmented-bar/segmented-bar.ios.ts @@ -31,15 +31,20 @@ function onItemsPropertyChanged(data: dependencyObservable.PropertyChangeData) { return; } - var newItems = >data.newValue; - + var oldItems = >data.oldValue; + if (oldItems && oldItems.length) { + for (var i = 0; i < oldItems.length; i++) { + (oldItems[i])._parent = null; + } + } view._adjustSelectedIndex(newItems); - view.ios.removeAllSegments(); + var newItems = >data.newValue; if (newItems && newItems.length) { for (var i = 0; i < newItems.length; i++) { view.ios.insertSegmentWithTitleAtIndexAnimated(newItems[i].title, i, false); + (newItems[i])._parent = view; } if (view.ios.selectedSegmentIndex !== view.selectedIndex) { @@ -61,6 +66,15 @@ function onSelectedBackgroundColorPropertyChanged(data: dependencyObservable.Pro } (common.SegmentedBar.selectedBackgroundColorProperty.metadata).onSetNativeValue = onSelectedBackgroundColorPropertyChanged; +export class SegmentedBarItem extends common.SegmentedBarItem { + public _update() { + if (this._parent) { + var tabIndex = this._parent.items.indexOf(this); + this._parent.ios.setTitleForSegmentAtIndex("" + this.title, tabIndex); + } + } +} + export class SegmentedBar extends common.SegmentedBar { private _ios: UISegmentedControl; private _selectionHandler: NSObject;