diff --git a/apps/tests/testRunner.ts b/apps/tests/testRunner.ts index 6f63cdd1a..21a988cab 100644 --- a/apps/tests/testRunner.ts +++ b/apps/tests/testRunner.ts @@ -80,6 +80,7 @@ allTests["SEARCH-BAR"] = require('./ui/search-bar/search-bar-tests'); allTests["CONNECTIVITY"] = require("./connectivity-tests"); allTests["ANIMATION"] = require("./ui/animation/animation-tests"); allTests["NAVIGATION"] = require("./navigation-tests"); +allTests["SEGMENTED-BAR"] = require("./ui/segmented-bar/segmented-bar-tests"); if (!isRunningOnEmulator()) { allTests["LOCATION"] = require("./location-tests"); diff --git a/apps/tests/ui/segmented-bar/segmented-bar-tests.ts b/apps/tests/ui/segmented-bar/segmented-bar-tests.ts index 8a6c20b68..473d390e5 100644 --- a/apps/tests/ui/segmented-bar/segmented-bar-tests.ts +++ b/apps/tests/ui/segmented-bar/segmented-bar-tests.ts @@ -191,4 +191,33 @@ export var testSettingSelectedIndexLargerThanCountShouldThrow = function () { segmentedBar.selectedIndex = 10; }, "Setting selectedIndex to a larger number should throw."); }); -} \ No newline at end of file +} + +export var testSelectedIndexChangedIsReisedCorrectlyIfSelectedIndexIsSet = function () { + var oldIndex; + var newIndex; + var segmentedBar = _createSegmentedBar(); + + segmentedBar.on(segmentedBarModule.SegmentedBar.selectedIndexChangedEvent, (args : segmentedBarModule.SelectedIndexChangedEventData) => { + oldIndex = args.oldIndex; + newIndex = args.newIndex; + }); + + segmentedBar.items = _createItems(10); + + helper.buildUIAndRunTest(segmentedBar, function (views: Array) { + var segmentedBar = views[0]; + + segmentedBar.selectedIndex = 6; + TKUnit.assertEqual(oldIndex, 0); + TKUnit.assertEqual(newIndex, 6); + + segmentedBar.selectedIndex = 3; + TKUnit.assertEqual(oldIndex, 6); + TKUnit.assertEqual(newIndex, 3); + + segmentedBar.selectedIndex = 9; + TKUnit.assertEqual(oldIndex, 3); + TKUnit.assertEqual(newIndex, 9); + }); +} diff --git a/ui/segmented-bar/segmented-bar-common.ts b/ui/segmented-bar/segmented-bar-common.ts index 091c47f5c..b90bc42f0 100644 --- a/ui/segmented-bar/segmented-bar-common.ts +++ b/ui/segmented-bar/segmented-bar-common.ts @@ -76,6 +76,7 @@ export class SegmentedBar extends view.View implements definition.SegmentedBar { 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 selectedIndexChangedEvent = "selectedIndexChanged"; public _onBindingContextChanged(oldValue: any, newValue: any) { super._onBindingContextChanged(oldValue, newValue); diff --git a/ui/segmented-bar/segmented-bar.android.ts b/ui/segmented-bar/segmented-bar.android.ts index 5097591bb..d0512dc4b 100644 --- a/ui/segmented-bar/segmented-bar.android.ts +++ b/ui/segmented-bar/segmented-bar.android.ts @@ -21,6 +21,9 @@ function onSelectedIndexPropertyChanged(data: dependencyObservable.PropertyChang view.selectedIndex = undefined; throw new Error("selectedIndex should be between [0, items.length - 1]"); } + + var args = { eventName: SegmentedBar.selectedIndexChangedEvent, object: view, oldIndex: data.oldValue, newIndex: data.newValue }; + view.notify(args); } } (common.SegmentedBar.selectedIndexProperty.metadata).onSetNativeValue = onSelectedIndexPropertyChanged; diff --git a/ui/segmented-bar/segmented-bar.d.ts b/ui/segmented-bar/segmented-bar.d.ts index 7c92d6d4d..d3ddec3cc 100644 --- a/ui/segmented-bar/segmented-bar.d.ts +++ b/ui/segmented-bar/segmented-bar.d.ts @@ -6,6 +6,7 @@ declare module "ui/segmented-bar" { import dependencyObservable = require("ui/core/dependency-observable"); import color = require("color"); import bindable = require("ui/core/bindable"); + import observable = require("data/observable"); /** * Represents a SegmentedBar item. @@ -17,6 +18,21 @@ declare module "ui/segmented-bar" { public title: string; } + /** + * Defines the data for the SegmentedBar.selectedIndexChanged event. + */ + export interface SelectedIndexChangedEventData extends observable.EventData { + /** + * The old selected index. + */ + oldIndex: number; + + /** + * The new selected index. + */ + newIndex: number; + } + /** * Represents a UI SegmentedBar component. */ @@ -50,5 +66,23 @@ declare module "ui/segmented-bar" { * Gets or sets the items dependency property of the SegmentedBar. */ public static itemsProperty: dependencyObservable.Property; + + /** + * String value used when hooking to the selectedIndexChanged event. + */ + public static selectedIndexChangedEvent: string; + + /** + * A basic method signature to hook an event listener (shortcut alias to the addEventListener method). + * @param eventNames - String corresponding to events (e.g. "propertyChange"). Optionally could be used more events separated by `,` (e.g. "propertyChange", "change"). + * @param callback - Callback function which will be executed when event is raised. + * @param thisArg - An optional parameter which will be used as `this` context for callback execution. + */ + on(eventNames: string, callback: (data: observable.EventData) => void, thisArg?: any); + + /** + * Raised when the selected index changes. + */ + on(event: "selectedIndexChanged", callback: (args: SelectedIndexChangedEventData) => void, thisArg?: any); } } \ No newline at end of file diff --git a/ui/segmented-bar/segmented-bar.ios.ts b/ui/segmented-bar/segmented-bar.ios.ts index f127a417f..a08a2ff91 100644 --- a/ui/segmented-bar/segmented-bar.ios.ts +++ b/ui/segmented-bar/segmented-bar.ios.ts @@ -21,6 +21,9 @@ function onSelectedIndexPropertyChanged(data: dependencyObservable.PropertyChang view.selectedIndex = undefined; throw new Error("selectedIndex should be between [0, items.length - 1]"); } + + var args = { eventName: SegmentedBar.selectedIndexChangedEvent, object: view, oldIndex: data.oldValue, newIndex: data.newValue }; + view.notify(args); } } (common.SegmentedBar.selectedIndexProperty.metadata).onSetNativeValue = onSelectedIndexPropertyChanged;