Merge pull request #178 from NativeScript/feature/page-navigation-events

Page navigation events

apps/perf-tests/controls-page.ts

@@ -39,7 +39,7 @@ export class ControlsPage extends pagesModule.Page implements definition.Control
         this.content = this._mainLayout;
     }
 
-    public onNavigatedTo(context: any) {
+    public onNavigatedTo() {
         trace.write("Creating " + this._count + " controls...", trace.categories.Test, trace.messageType.info);
         this._infoLabel.text = "Creating " + this._count + " controls...";
         var startTime = new Date().getMilliseconds();

apps/tests/layouts/wrap-layout-tests.ts

@@ -152,7 +152,7 @@ export function testChangeItemWidth() {
         wrapLayout.itemWidth = 50;
 
         TKUnit.waitUntilReady(() => {
-            return wrapLayout.getChildAt(wrapLayout.getChildrenCount() - 1).isLayoutValid;
+            return wrapLayout.isLayoutValid;
         });
 
         var actualValue = viewModule.getViewById(wrapLayout, "1")._getCurrentLayoutBounds().left;
@@ -185,7 +185,7 @@ export function testChangeItemHeight() {
         wrapLayout.itemHeight = 50;
 
         TKUnit.waitUntilReady(() => {
-            return wrapLayout.getChildAt(wrapLayout.getChildrenCount() - 1).isLayoutValid;
+            return wrapLayout.isLayoutValid;
         });
 
         var actualValue = viewModule.getViewById(wrapLayout, "1")._getCurrentLayoutBounds().top;
@@ -236,7 +236,7 @@ export function testPaddingRight() {
         layoutHelper.assertMeasure(btn2, 80, 50);
 
         // There should be no space left for the button on the first row,
-        // because fo the padding (200 - 100 - 30) = 70 button wants 80  
+        // because for the padding (200 - 100 - 30) = 70 button wants 80  
         layoutHelper.assertLayout(btn1, 0, 0, 100, 50, "button1");
         layoutHelper.assertLayout(btn2, 0, 50, 80, 50, "button2");
     });

apps/tests/testRunner.ts

@@ -23,6 +23,7 @@ function isRunningOnEmulator(): boolean {
 }
 
 export var allTests = {};
+allTests["APPLICATION"] = require("./application-tests");
 allTests["DOCKLAYOUT"] = require("./layouts/dock-layout-tests");
 allTests["WRAPLAYOUT"] = require("./layouts/wrap-layout-tests");
 allTests["ABSOLUTELAYOUT"] = require("./layouts/absolute-layout-tests");
@@ -31,7 +32,6 @@ allTests["STACKLAYOUT"] = require("./layouts/stack-layout-tests");
 allTests["PLATFORM"] = require("./platform-tests");
 allTests["STYLE-PROPERTIES"] = require("./ui/style/style-properties-tests");
 allTests["SCROLL-VIEW"] = require("./ui/scroll-view/scroll-view-tests");
-allTests["APPLICATION"] = require("./application-tests");
 allTests["FILE SYSTEM"] = require("./file-system-tests");
 allTests["HTTP"] = require("./http-tests");
 allTests["APPLICATION SETTINGS"] = require("./application-settings-tests");

apps/tests/ui/helper.ts

@@ -198,9 +198,9 @@ export function buildUIWithWeakRefAndInteract<T extends view.View>(createFunc: (
     }
 }
 
-export function navigate(pageFactory: () => page.Page) {
+export function navigate(pageFactory: () => page.Page,  navigationContext?: any) {
     var currentPage = frame.topmost().currentPage;
-    frame.topmost().navigate({ create: pageFactory, animated: false });
+    frame.topmost().navigate({ create: pageFactory, animated: false, context: navigationContext });
     TKUnit.waitUntilReady(() => { return frame.topmost().currentPage !== currentPage; });
 }
 

apps/tests/ui/page/page-tests-common.ts

@@ -225,29 +225,36 @@ export var test_NavigateToNewPage = function () {
 
 export var test_PageNavigation_EventSequence = function () {
     var testPage: PageModule.Page;
+    var context = { property: "this is the context" };
     var eventSequence = [];
     var pageFactory = function () {
         testPage = new PageModule.Page();
         addLabelToPage(testPage);
-        testPage.onNavigatingFrom = function () {
-            eventSequence.push("onNavigatingFrom");
-        }
 
-        testPage.onNavigatedFrom = function () {
+        testPage.on(PageModule.Page.navigatingToEvent, function (data: PageModule.NavigatedData) {
-            eventSequence.push("onNavigatedFrom");
-        }
-
-        testPage.onNavigatingTo = function () {
             eventSequence.push("onNavigatingTo");
-        }
+            TKUnit.assertEqual(data.context, context, "onNavigatingTo: navigationContext");
+        });
 
-        testPage.onNavigatedTo = function () {
+        testPage.on(PageModule.Page.navigatedToEvent, function (data: PageModule.NavigatedData) {
             eventSequence.push("onNavigatedTo");
-        }
+            TKUnit.assertEqual(data.context, context, "onNavigatedTo : navigationContext");
+        });
+
+        testPage.on(PageModule.Page.navigatingFromEvent, function (data: PageModule.NavigatedData) {
+            eventSequence.push("onNavigatingFrom");
+            TKUnit.assertEqual(data.context, context, "onNavigatingFrom: navigationContext");
+        });
+
+        testPage.on(PageModule.Page.navigatedFromEvent, function (data: PageModule.NavigatedData) {
+            eventSequence.push("onNavigatedFrom");
+            TKUnit.assertEqual(data.context, context, "onNavigatedFrom: navigationContext");
+        });
+
         return testPage;
     };
 
-    helper.navigate(pageFactory);
+    helper.navigate(pageFactory, context);
     helper.goBack();
 
     var expectedEventSequence = ["onNavigatingTo", "onNavigatedTo", "onNavigatingFrom", "onNavigatedFrom"];
@@ -263,9 +270,9 @@ export var test_NavigateTo_WithContext = function () {
     var testPage: PageModule.Page;
     var pageFactory = function (): PageModule.Page {
         testPage = new PageModule.Page();
-        testPage.onNavigatedTo = function (context) {
+        testPage.on(PageModule.Page.navigatedToEvent, function () {
             ////console.log(JSON.stringify(context));
-        }
+        });
         return testPage;
     };
     var navEntry = {

ui/frame/frame.android.ts

@@ -197,7 +197,7 @@ function onFragmentShown(fragment: PageFragmentBody) {
 
     // notify the page
     frame._addView(page);
-    page.onNavigatedTo(entry.entry.context);
+    page.onNavigatedTo();
     frame._processNavigationQueue(page);
 }
 

ui/frame/frame.ios.ts

@@ -222,7 +222,7 @@ class UINavigationControllerImpl extends UINavigationController implements UINav
         var newPage = newEntry.resolvedPage;
 
         // notify the page
-        newPage.onNavigatedTo(newEntry.entry.context);
+        newPage.onNavigatedTo();
         frame._processNavigationQueue(newPage);
     }
 

ui/page/page-common.ts

@@ -17,7 +17,10 @@ export module knownCollections {
 }
 
 export class Page extends contentView.ContentView implements dts.Page, view.AddArrayFromBuilder {
+    public static navigatingToEvent = "navigatingTo";
     public static navigatedToEvent = "navigatedTo";
+    public static navigatingFromEvent = "navigatingFrom";
+    public static navigatedFromEvent = "navigatedFrom";
     public static shownModallyEvent = "shownModally";
 
     private _navigationContext: any;
@@ -96,23 +99,37 @@ export class Page extends contentView.ContentView implements dts.Page, view.AddA
 
     public onNavigatingTo(context: any) {
         this._navigationContext = context;
+
+        this.notify({
+            eventName: Page.navigatingToEvent,
+            object: this,
+            context: this.navigationContext
+        });
     }
 
-    public onNavigatedTo(context: any) {
+    public onNavigatedTo() {
-        this._navigationContext = context;
         this.notify({
             eventName: Page.navigatedToEvent,
             object: this,
-            context: context
+            context: this.navigationContext
         });
     }
 
     public onNavigatingFrom() {
-        //
+        this.notify({
+            eventName: Page.navigatingFromEvent,
+            object: this,
+            context: this.navigationContext
+        });
     }
 
     public onNavigatedFrom(isBackNavigation: boolean) {
-        // TODO: Should we clear navigation context here or somewhere else
+        this.notify({
+            eventName: Page.navigatedFromEvent,
+            object: this,
+            context: this.navigationContext
+        });
+
         this._navigationContext = undefined;
     }
 

ui/page/page.d.ts

@@ -14,11 +14,11 @@ declare module "ui/page" {
     //@endprivate
 
     /**
-     * Defines the data for the Page.navigatedTo event.
+     * Defines the data for the page navigation events.
      */
     export interface NavigatedData extends observable.EventData {
         /**
-         * The navigation context (optional, may be undefined) passed to the Page.onNavigatedTo method.
+         * The navigation context (optional, may be undefined) passed to the page navigation evetns method.
          */
         context: any;
     }
@@ -46,11 +46,31 @@ declare module "ui/page" {
      * Represents a logical unit for navigation (inside Frame).
      */
     export class Page extends contentView.ContentView implements view.AddArrayFromBuilder {
+        /**
+         * String value used when hooking to shownModally event.
+         */
+        public static shownModallyEvent: string;
+
+        /**
+         * String value used when hooking to navigatingTo event.
+         */
+        public static navigatingToEvent: string;
+
         /**
          * String value used when hooking to navigatedTo event.
          */
         public static navigatedToEvent: string;
 
+        /**
+         * String value used when hooking to navigatingFrom event.
+         */
+        public static navigatingFromEvent: string;
+
+        /**
+         * String value used when hooking to navigatedFrom event.
+         */
+        public static navigatedFromEvent: string;
+
         constructor(options?: Options)
 
         /**
@@ -85,29 +105,6 @@ declare module "ui/page" {
          */
         optionsMenu: OptionsMenu;
 
-        /**
-         * A method called before navigating to the page.
-         * @param context - The data passed to the page through the NavigationEntry.context property.
-         */
-        onNavigatingTo(context: any): void;
-
-        /**
-         * A method called after navigated to the page.
-         * @param context - The data passed to the page through the NavigationEntry.context property.
-         */
-        onNavigatedTo(context: any): void;
-
-        /**
-         * A method called before navigating from the page.
-         */
-        onNavigatingFrom(): void;
-
-        /**
-         * A method called after navigated from the page.
-         * @param isBackNavigation - True if the Page is being navigated from using the Frame.goBack() method, false otherwise.
-         */
-        onNavigatedFrom(isBackNavigation: boolean): void;
-
         /**
          * 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"). 
@@ -117,14 +114,24 @@ declare module "ui/page" {
         on(eventNames: string, callback: (data: observable.EventData) => void, thisArg?: any);
 
         /**
-         * Raised when navigation to the page is finished.
+         * Raised when navigation to the page has started.
+         */
+        on(event: "navigatingTo", callback: (args: NavigatedData) => void, thisArg?: any);
+
+        /**
+         * Raised when navigation to the page has finished.
          */
         on(event: "navigatedTo", callback: (args: NavigatedData) => void, thisArg?: any);
 
         /**
-         * String value used when hooking to shownModally event.
+         * Raised when navigation from the page has started.
          */
-        public static shownModallyEvent: string;
+        on(event: "navigatingFrom", callback: (args: NavigatedData) => void, thisArg?: any);
+
+        /**
+         * Raised when navigation from the page has finished.
+         */
+        on(event: "navigatedFrom", callback: (args: NavigatedData) => void, thisArg?: any);
         
         /**
          * Raised when the page is shown as a modal dialog.
@@ -142,6 +149,29 @@ declare module "ui/page" {
         _addArrayFromBuilder(name: string, value: Array<any>): void;
 
         //@private
+
+        /**
+         * A method called before navigating to the page.
+         * @param context - The data passed to the page through the NavigationEntry.context property.
+         */
+        onNavigatingTo(context: any): void;
+
+        /**
+         * A method called after navigated to the page.
+         */
+        onNavigatedTo(): void;
+
+        /**
+         * A method called before navigating from the page.
+         */
+        onNavigatingFrom(): void;
+
+        /**
+         * A method called after navigated from the page.
+         * @param isBackNavigation - True if the Page is being navigated from using the Frame.goBack() method, false otherwise.
+         */
+        onNavigatedFrom(isBackNavigation: boolean): void;
+
         _getStyleScope(): styleScope.StyleScope;
         _invalidateOptionsMenu();
         //@endprivate