Merge pull request #1793 from NativeScript/hhristov/navigation-events

Fix navigation events #1570
NativeScript · Mar 18, 2016 · b1ca9c4 · b1ca9c4
2 parents a2f20a5 + 2cabf02
commit b1ca9c4
Show file tree

Hide file tree

Showing 19 changed files with 408 additions and 236 deletions.
diff --git a/CrossPlatformModules.csproj b/CrossPlatformModules.csproj
@@ -84,6 +84,9 @@
     </TypeScriptCompile>
     <TypeScriptCompile Include="apps\animations\opacity.ts" />
     <TypeScriptCompile Include="apps\custom-root-view\app.ts" />
+    <TypeScriptCompile Include="apps\navigation-events-demo\app.ts" />
+    <TypeScriptCompile Include="apps\navigation-events-demo\page2.ts" />
+    <TypeScriptCompile Include="apps\navigation-events-demo\page1.ts" />
     <TypeScriptCompile Include="apps\perf-tests\NavigationTest\list-picker-page.ts" />
     <TypeScriptCompile Include="apps\perf-tests\custom-transition.android.ts" />
     <TypeScriptCompile Include="apps\perf-tests\custom-transition.ios.ts" />
@@ -146,6 +149,8 @@
     <Content Include="apps\custom-root-view\main-page.xml">
       <SubType>Designer</SubType>
     </Content>
+    <Content Include="apps\navigation-events-demo\page2.xml" />
+    <Content Include="apps\navigation-events-demo\page1.xml" />
     <Content Include="apps\perf-tests\NavigationTest\list-picker-page.xml" />
     <Content Include="apps\tests\ui\action-bar\ActionBar_BetweenTags.xml" />
     <Content Include="apps\tests\ui\action-bar\ActionBar_NumberAsText.xml" />
@@ -2096,6 +2101,9 @@
       <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
     </Content>
     <Content Include="apps\tests\file-system-access-tests\folder\file.expected" />
+    <Content Include="apps\navigation-events-demo\package.json">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </Content>
     <None Include="js-libs\esprima\LICENSE.BSD" />
     <Content Include="source-control.md" />
     <Content Include="ui\segmented-bar\package.json">

diff --git a/apps/navigation-events-demo/app.ts b/apps/navigation-events-demo/app.ts
@@ -0,0 +1,2 @@
+import application = require("application");
+application.start({ moduleName: "page1" });
diff --git a/apps/navigation-events-demo/package.json b/apps/navigation-events-demo/package.json
@@ -0,0 +1,4 @@
+{
+  "name": "navigation-events-demo",
+  "main": "app.js"
+}
diff --git a/apps/navigation-events-demo/page1.ts b/apps/navigation-events-demo/page1.ts
@@ -0,0 +1,38 @@
+import {Frame, topmost} from "ui/frame";
+
+export function loaded(args) {
+    console.log("+++Page 1 - LOADED");
+    console.log(`backStack.length=${topmost().backStack.length}`);
+}
+
+export function unloaded(args) {
+    console.log("+++Page 1 - UNLOADED");
+    console.log(`backStack.length=${topmost().backStack.length}`);
+}
+
+export function navigatingTo(args) {
+    console.log(`+++Page 1 - navigatingTo(isBack: ${args.isBackNavigation})`);
+    console.log(`backStack.length=${topmost().backStack.length}`);
+}
+
+export function navigatedTo(args) {
+    console.log(`+++Page 1 - navigatedTo(isBack: ${args.isBackNavigation})`);
+    console.log(`backStack.length=${topmost().backStack.length}`);
+}
+
+export function navigatingFrom(args) {
+    console.log(`+++Page 1 - navigatingFrom(isBack: ${args.isBackNavigation})`);
+    console.log(`backStack.length=${topmost().backStack.length}`);
+}
+
+export function navigatedFrom(args) {
+    console.log(`+++Page 1 - navigatedFrom(isBack: ${args.isBackNavigation})`);
+    console.log(`backStack.length=${topmost().backStack.length}`);
+}
+
+export function onTap(args) {
+    let frame: Frame = args.object.page.frame;
+    frame.navigate({
+        moduleName: "page2"
+    });
+}
diff --git a/apps/navigation-events-demo/page1.xml b/apps/navigation-events-demo/page1.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8" ?> 
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" 
+      loaded="loaded"
+      unloaded="unloaded"
+      navigatingFrom="navigatingFrom"
+      navigatingTo="navigatingTo"
+      navigatedFrom="navigatedFrom"
+      navigatedTo="navigatedTo">
+      <Button text="Navigate forward" tap="onTap" />
+</Page>
diff --git a/apps/navigation-events-demo/page2.ts b/apps/navigation-events-demo/page2.ts
@@ -0,0 +1,36 @@
+import {Frame, topmost} from "ui/frame";
+
+export function loaded(args) {
+    console.log("+++Page 2 - LOADED");
+    console.log(`backStack.length=${topmost().backStack.length}`);
+}
+
+export function unloaded(args) {
+    console.log("+++Page 2 - UNLOADED");
+    console.log(`backStack.length=${topmost().backStack.length}`);
+}
+
+export function navigatingTo(args) {
+    console.log(`+++Page 2 - navigatingTo(isBack: ${args.isBackNavigation})`);
+    console.log(`backStack.length=${topmost().backStack.length}`);
+}
+
+export function navigatedTo(args) {
+    console.log(`+++Page 2 - navigatedTo(isBack: ${args.isBackNavigation})`);
+    console.log(`backStack.length=${topmost().backStack.length}`);
+}
+
+export function navigatingFrom(args) {
+    console.log(`+++Page 2 - navigatingFrom(isBack: ${args.isBackNavigation})`);
+    console.log(`backStack.length=${topmost().backStack.length}`);
+}
+
+export function navigatedFrom(args) {
+    console.log(`+++Page 2 - navigatedFrom(isBack: ${args.isBackNavigation})`);
+    console.log(`backStack.length=${topmost().backStack.length}`);
+}
+
+export function onTap(args) {
+    let frame: Frame = args.object.page.frame;
+    frame.goBack();
+}
diff --git a/apps/navigation-events-demo/page2.xml b/apps/navigation-events-demo/page2.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8" ?> 
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" 
+      loaded="loaded"
+      unloaded="unloaded"
+      navigatingFrom="navigatingFrom"
+      navigatingTo="navigatingTo"
+      navigatedFrom="navigatedFrom"
+      navigatedTo="navigatedTo">
+      <Button text="Navigate back" tap="onTap" />
+</Page>
diff --git a/apps/tests/ui/page/modal-page.ts b/apps/tests/ui/page/modal-page.ts
@@ -1,20 +1,20 @@
-import {ShownModallyData} from "ui/page";
+import {topmost} from "ui/frame";
 import TKUnit = require("../../TKUnit");
-import frame = require("ui/frame");
-import page = require("ui/page");
-
-var modalPage: page.Page;
+import {Page, ShownModallyData} from "ui/page";
 
+export var modalPage: Page;
 export function onShowingModally(args) {
-    modalPage = <page.Page>args.object;
+    modalPage = <Page>args.object;
+    args.object.showingModally = true;
 }
 
 export function onShownModally(args: ShownModallyData) {
-    TKUnit.assertNotNull(modalPage);
-    TKUnit.wait(0.100);
+    let page = <Page>args.object;
+    TKUnit.assertNotNull(page);
     if (args.context) {
         args.context.shownModally = true;
     }
-    TKUnit.assert(frame.topmost().currentPage.modal = modalPage, "frame.topmost().currentPage.modal should be equal to the page instance on page.shownModally event handler.");
+
+    TKUnit.assertEqual(topmost().currentPage.modal, page, "frame.topmost().currentPage.modal should be equal to the page instance on page.shownModally event handler.");
     args.closeCallback("return value");
 }
diff --git a/apps/tests/ui/page/page-tests-common.ts b/apps/tests/ui/page/page-tests-common.ts
@@ -191,7 +191,7 @@ function _test_PageNavigation_EventSequence(withTransition: boolean) {
     if (withTransition) {
         var navigationTransition: FrameModule.NavigationTransition = {
             name: "slide",
-            duration: 1000,
+            duration: 100,
         };
         var navigationEntry: FrameModule.NavigationEntry = {
             create: pageFactory,
@@ -207,7 +207,7 @@ function _test_PageNavigation_EventSequence(withTransition: boolean) {
 
     helper.goBack();
 
-    var expectedEventSequence = ["navigatingTo", "loaded", "navigatedTo", "navigatingFrom", "navigatedFrom", "unloaded"];
+    var expectedEventSequence = ["navigatingTo", "loaded", "navigatedTo", "navigatingFrom", "unloaded", "navigatedFrom"];
     TKUnit.arrayAssert(eventSequence, expectedEventSequence, "Actual event sequence is not equal to expected. Actual: " + eventSequence + "; Expected: " + expectedEventSequence);
 }
 

diff --git a/apps/tests/ui/page/page-tests.ios.ts b/apps/tests/ui/page/page-tests.ios.ts
@@ -1,30 +1,30 @@
 import PageTestCommon = require("./page-tests-common");
-import PageModule = require("ui/page");
+import {Page, ShownModallyData} from "ui/page";
 import TKUnit = require("../../TKUnit");
-import LabelModule = require("ui/label");
+import {Label} from "ui/label";
 import helper = require("../helper");
-import view = require("ui/core/view");
-import frame = require("ui/frame");
+import {View} from "ui/core/view";
+import {EventData} from "data/observable";
 import uiUtils = require("ui/utils");
 
 global.moduleMerge(PageTestCommon, exports);
 
 export function test_NavigateToNewPage_InnerControl() {
-    var testPage: PageModule.Page;
-    var pageFactory = function (): PageModule.Page {
-        testPage = new PageModule.Page();
+    var testPage: Page;
+    var pageFactory = function (): Page {
+        testPage = new Page();
         PageTestCommon.addLabelToPage(testPage);
         return testPage;
     };
 
     helper.navigate(pageFactory);
     helper.goBack();
 
-    var label = <LabelModule.Label>testPage.content;
+    var label = <Label>testPage.content;
 
-    TKUnit.assert(label._context === undefined, "InnerControl._context should be undefined after navigate back.");
-    TKUnit.assert(label.android === undefined, "InnerControl.android should be undefined after navigate back.");
-    TKUnit.assert(label.isLoaded === false, "InnerControl.isLoaded should become false after navigating back");
+    TKUnit.assertEqual(label._context, undefined, "label._context should be undefined after navigate back.");
+    TKUnit.assertEqual(label.android, undefined, "label.android should be undefined after navigate back.");
+    TKUnit.assertFalse(label.isLoaded, "label.isLoaded should become false after navigating back");
 }
 
 export function test_WhenPageIsNavigatedToItCanShowAnotherPageAsModal() {
@@ -35,85 +35,118 @@ export function test_WhenPageIsNavigatedToItCanShowAnotherPageAsModal() {
 
     var modalClosed = false;
     var modalCloseCallback = function (returnValue: any) {
-        TKUnit.assert(ctx.shownModally, "Modal-page must be shown!");
-        TKUnit.assert(returnValue === "return value", "Modal-page must return value!");
-        TKUnit.assert(!frame.topmost().currentPage.modal, "frame.topmost().currentPage.modal should be undefined when no modal page is shown!");
-        TKUnit.wait(0.100);
+        TKUnit.assertTrue(ctx.shownModally, "Modal-page must be shown!");
+        TKUnit.assertEqual(returnValue, "return value", "Modal-page must return value!");
         modalClosed = true;
     }
+
+    let modalPage: Page;
+
+    let shownModally = 0;
+    var onShownModal = function (args: ShownModallyData) {
+        shownModally++;
+        modalPage.off(Page.shownModallyEvent, onShownModal);
+    }
+
+    let modalLoaded = 0;
+    var onModalLoaded = function (args: EventData) {
+        modalLoaded++;
+        modalPage.off(Page.loadedEvent, onModalLoaded);
+    }
+
+    let modalUnloaded = 0;
+    var onModalUnloaded = function (args: EventData) {
+        modalUnloaded++;
+        modalPage.off(Page.unloadedEvent, onModalUnloaded);
+        TKUnit.assertNull(masterPage.modal, "currentPage.modal should be undefined when no modal page is shown!");
+    }
 
     var navigatedToEventHandler = function (args) {
-        TKUnit.assert(!frame.topmost().currentPage.modal, "frame.topmost().currentPage.modal should be undefined when no modal page is shown!");
-        var basePath = "ui/page/";
-        args.object.showModal(basePath + "modal-page", ctx, modalCloseCallback, false);
+        let page = <Page>args.object;
+        TKUnit.assertNull(page.modal, "currentPage.modal should be undefined when no modal page is shown!");
+        let basePath = "ui/page/";
+        modalPage = page.showModal(basePath + "modal-page", ctx, modalCloseCallback, false);
+        TKUnit.assertTrue((<any>modalPage).showingModally, "showingModally");
+        modalPage.on(Page.shownModallyEvent, onShownModal);
+        modalPage.on(Page.loadedEvent, onModalLoaded);
+        modalPage.on(Page.unloadedEvent, onModalUnloaded);
     };
 
-    var masterPageFactory = function (): PageModule.Page {
-        masterPage = new PageModule.Page();
+    var masterPageFactory = function (): Page {
+        masterPage = new Page();
         masterPage.id = "newPage";
-        masterPage.on(PageModule.Page.navigatedToEvent, navigatedToEventHandler);
-        var label = new LabelModule.Label();
+        masterPage.on(Page.navigatedToEvent, navigatedToEventHandler);
+        var label = new Label();
         label.text = "Text";
         masterPage.content = label;
         return masterPage;
     };
 
     try {
         helper.navigate(masterPageFactory);
-        TKUnit.waitUntilReady(() => { return modalClosed; });
-        masterPage.off(view.View.loadedEvent, navigatedToEventHandler);
+
+        TKUnit.waitUntilReady(() => { return modalUnloaded > 0; });
+        TKUnit.assertEqual(shownModally, 1, "shownModally");
+        TKUnit.assertEqual(modalLoaded, 1,"modalLoaded");
+        TKUnit.assertEqual(modalUnloaded,1 , "modalUnloaded");
+
+        masterPage.off(Page.navigatedToEvent, navigatedToEventHandler);
     }
     finally {
         helper.goBack();
     }
 }
 
 export function test_WhenShowingModalPageUnloadedIsNotFiredForTheMasterPage() {
-    var masterPage;
-    var masterPageUnloaded = false;
-    var modalClosed = false;
-    var modalCloseCallback = function (returnValue: any) {
-        TKUnit.wait(0.100);
-        modalClosed = true;
+    let masterPage: Page;
+    let masterPageUnloaded = false;
+    let modalPage: Page;
+
+    let modalUnloaded = 0;
+    let onModalUnloaded = function (args: EventData) {
+        modalUnloaded++;
+        modalPage.off(Page.unloadedEvent, onModalUnloaded);
+        TKUnit.assertNull(masterPage.modal, "currentPage.modal should be undefined when no modal page is shown!");
     }
 
     var navigatedToEventHandler = function (args) {
         var basePath = "ui/page/";
-        args.object.showModal(basePath + "modal-page", null, modalCloseCallback, false);
+        modalPage = masterPage.showModal(basePath + "modal-page", null, null, false);
+        modalPage.on(Page.unloadedEvent, onModalUnloaded);
     };
 
     var unloadedEventHandler = function (args) {
         masterPageUnloaded = true;
     };
 
-    var masterPageFactory = function (): PageModule.Page {
-        masterPage = new PageModule.Page();
+    var masterPageFactory = function (): Page {
+        masterPage = new Page();
         masterPage.id = "master-page";
-        masterPage.on(PageModule.Page.navigatedToEvent, navigatedToEventHandler);
-        masterPage.on(view.View.unloadedEvent, unloadedEventHandler);
-        var label = new LabelModule.Label();
+        masterPage.on(Page.navigatedToEvent, navigatedToEventHandler);
+        masterPage.on(View.unloadedEvent, unloadedEventHandler);
+        var label = new Label();
         label.text = "Modal Page";
         masterPage.content = label;
         return masterPage;
     };
 
     try {
         helper.navigate(masterPageFactory);
-        TKUnit.waitUntilReady(() => { return modalClosed; });
+        TKUnit.waitUntilReady(() => { return modalUnloaded > 0; });
         TKUnit.assert(!masterPageUnloaded, "Master page should not raise 'unloaded' when showing modal!");
-        masterPage.off(view.View.loadedEvent, navigatedToEventHandler);
-        masterPage.off(view.View.unloadedEvent, unloadedEventHandler);
+        masterPage.off(View.loadedEvent, navigatedToEventHandler);
+        masterPage.off(View.unloadedEvent, unloadedEventHandler);
     }
     finally {
         helper.goBack();
     }
 }
 
 export function test_page_no_anctionBar_measure_no_spanUnderBackground_measure_layout_size_isCorrect() {
-    let page = new PageModule.Page();
+    let page = new Page();
     page.backgroundSpanUnderStatusBar = true;
     page.actionBarHidden = true;
-    let lbl = new LabelModule.Label();
+    let lbl = new Label();
     page.content = lbl;
 
     try {

diff --git a/tsconfig.json b/tsconfig.json
@@ -78,6 +78,9 @@
         "apps/modal-views-demo/app.ts",
         "apps/modal-views-demo/login-page.ts",
         "apps/modal-views-demo/main-page.ts",
+    "apps/navigation-events-demo/app.ts",
+    "apps/navigation-events-demo/page1.ts",
+    "apps/navigation-events-demo/page2.ts",
         "apps/notifications-demo/app.ts",
         "apps/notifications-demo/main-page.ts",
         "apps/orientation-demo/app.ts",

diff --git a/ui/core/view.d.ts b/ui/core/view.d.ts
@@ -471,7 +471,7 @@ declare module "ui/core/view" {
          * @param callback An optional parameter pointing to a specific listener. If not defined, all listeners for the event names will be removed.
          * @param thisArg An optional parameter which when set will be used to refine search of the correct callback which will be removed as event listener.
          */
-        off(eventNames: string | gestures.GestureTypes, callback?: any, thisArg?: any);
+        off(eventNames: string | gestures.GestureTypes, callback?: (data: observable.EventData) => void, thisArg?: any);
 
         /**
          * Raised when a loaded event occurs.