javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-15 19:26:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Fix navigation events https://github.com/NativeScript/NativeScript/issues/1570
This commit is contained in:
Hristo Hristov
2016-03-18 17:24:16 +02:00
parent a2f20a54b2 2cabf02215
commit b1ca9c41ac
19 changed files with 408 additions and 236 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
CrossPlatformModules.csproj
View File

@ -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">

2
apps/navigation-events-demo/app.ts Normal file
View File

@ -0,0 +1,2 @@
import application = require("application");
application.start({ moduleName: "page1" });

4
apps/navigation-events-demo/package.json Normal file
View File

@ -0,0 +1,4 @@
{
"name": "navigation-events-demo",
"main": "app.js"
}

38
apps/navigation-events-demo/page1.ts Normal file
View File

@ -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"
});
}

10
apps/navigation-events-demo/page1.xml Normal file
View File

@ -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>

36
apps/navigation-events-demo/page2.ts Normal file
View File

@ -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();
}

10
apps/navigation-events-demo/page2.xml Normal file
View File

@ -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>

18
apps/tests/ui/page/modal-page.ts
View File

@ -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");
}

4
apps/tests/ui/page/page-tests-common.ts
View File

@ -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);
}

115
apps/tests/ui/page/page-tests.ios.ts
View File

@ -1,18 +1,18 @@
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;
};
@ -20,11 +20,11 @@ export function test_NavigateToNewPage_InnerControl() {
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,24 +35,48 @@ 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;
@ -60,8 +84,13 @@ export function test_WhenPageIsNavigatedToItCanShowAnotherPageAsModal() {
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();
@ -69,29 +98,33 @@ export function test_WhenPageIsNavigatedToItCanShowAnotherPageAsModal() {
}
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;
@ -99,10 +132,10 @@ export function test_WhenShowingModalPageUnloadedIsNotFiredForTheMasterPage() {
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();
@ -110,10 +143,10 @@ export function test_WhenShowingModalPageUnloadedIsNotFiredForTheMasterPage() {
}
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 {

3
tsconfig.json
View File

@ -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",

2
ui/core/view.d.ts vendored
View File

@ -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.

13
ui/frame/frame-common.ts
View File

@ -231,7 +231,7 @@ export class Frame extends CustomLayoutView implements definition.Frame {
var entry = this._navigationQueue[0].entry;
var currentNavigationPage = entry.resolvedPage;
if (page !== currentNavigationPage) {
throw new Error(`Corrupted navigation stack; page: ${page.id}; currentNavigationPage: ${currentNavigationPage.id}`);
throw new Error(`Corrupted navigation stack; page: ${page}; currentNavigationPage: ${currentNavigationPage}`);
}
// remove completed operation.
@ -275,7 +275,6 @@ export class Frame extends CustomLayoutView implements definition.Frame {
private performNavigation(navigationContext: NavigationContext) {
var navContext = navigationContext.entry;
this._onNavigatingTo(navContext, navigationContext.isBackNavigation);
// TODO: This should happen once navigation is completed.
if (navigationContext.entry.entry.clearHistory) {
@ -285,15 +284,15 @@ export class Frame extends CustomLayoutView implements definition.Frame {
this._backStack.push(this._currentEntry);
}
this._onNavigatingTo(navContext, navigationContext.isBackNavigation);
this._navigateCore(navContext);
this._onNavigatedTo(navContext, false);
}
private performGoBack(navigationContext: NavigationContext) {
var navContext = navigationContext.entry;
this._onNavigatingTo(navContext, navigationContext.isBackNavigation);
this._goBackCore(navContext);
this._onNavigatedTo(navContext, true);
}
public _goBackCore(backstackEntry: definition.BackstackEntry) {
@ -312,12 +311,6 @@ export class Frame extends CustomLayoutView implements definition.Frame {
backstackEntry.resolvedPage.onNavigatingTo(backstackEntry.entry.context, isBack);
}
public _onNavigatedTo(backstackEntry: definition.BackstackEntry, isBack: boolean) {
if (this.currentPage) {
this.currentPage.onNavigatedFrom(isBack);
}
}
public get animated(): boolean {
return this._animated;
}

151
ui/frame/frame.ios.ts
View File

@ -31,13 +31,16 @@ export class Frame extends frameCommon.Frame {
constructor() {
super();
this._ios = new iOSFrame(this);
// When there is a 40px high "in-call" status bar, nobody moves the navigationBar top from 20 to 40 and it remains underneath the status bar.
var that = this;
let frameRef = new WeakRef(this);
application.ios.addNotificationObserver(UIApplicationDidChangeStatusBarFrameNotification, (notification: NSNotification) => {
that._handleHigherInCallStatusBarIfNeeded();
if (this._ios.controller.owner.currentPage) {
this._ios.controller.owner.currentPage.requestLayout();
let frame = frameRef.get();
if (frame) {
frame._handleHigherInCallStatusBarIfNeeded();
if (frame.currentPage) {
frame.currentPage.requestLayout();
}
}
});
}
@ -61,7 +64,7 @@ export class Frame extends frameCommon.Frame {
}
public _navigateCore(backstackEntry: definition.BackstackEntry) {
trace.write(`${this}._navigateCore(pageId: ${backstackEntry.resolvedPage.id}, backstackVisible: ${this._isEntryBackstackVisible(backstackEntry) }, clearHistory: ${backstackEntry.entry.clearHistory}), navDepth: ${navDepth}`, trace.categories.Navigation);
trace.write(`${this}._navigateCore(page: ${backstackEntry.resolvedPage}, backstackVisible: ${this._isEntryBackstackVisible(backstackEntry)}, clearHistory: ${backstackEntry.entry.clearHistory}), navDepth: ${navDepth}`, trace.categories.Navigation);
var viewController: UIViewController = backstackEntry.resolvedPage.ios;
if (!viewController) {
throw new Error("Required page does not have a viewController created.");
@ -132,7 +135,7 @@ export class Frame extends frameCommon.Frame {
public _goBackCore(backstackEntry: definition.BackstackEntry) {
navDepth = backstackEntry[NAV_DEPTH];
trace.write(`${this}._goBackCore(pageId: ${backstackEntry.resolvedPage.id}, backstackVisible: ${this._isEntryBackstackVisible(backstackEntry) }, clearHistory: ${backstackEntry.entry.clearHistory}), navDepth: ${navDepth}`, trace.categories.Navigation);
trace.write(`${this}._goBackCore(page: ${backstackEntry.resolvedPage}, backstackVisible: ${this._isEntryBackstackVisible(backstackEntry)}, clearHistory: ${backstackEntry.entry.clearHistory}), navDepth: ${navDepth}`, trace.categories.Navigation);
if (!this._shouldSkipNativePop) {
var controller = backstackEntry.resolvedPage.ios;
@ -292,6 +295,10 @@ export class Frame extends frameCommon.Frame {
}
}
public _onNavigatingTo(backstackEntry: definition.BackstackEntry, isBack: boolean) {
//
}
_handleHigherInCallStatusBarIfNeeded() {
let statusBarHeight = uiUtils.ios.getStatusBarHeight();
if (!this._ios ||
@ -391,100 +398,6 @@ class UINavigationControllerImpl extends UINavigationController implements UINav
}
}
public navigationControllerWillShowViewControllerAnimated(navigationController: UINavigationController, viewController: UIViewController, animated: boolean): void {
trace.write(`UINavigationControllerImpl.navigationControllerWillShowViewControllerAnimated(${navigationController}, ${viewController}, ${animated})`, trace.categories.NativeLifecycle);
// In this method we need to layout the new page otherwise page will be shown empty and update after that which is bad UX.
let frame = this._owner.get();
if (!frame) {
return;
}
let newEntry: definition.BackstackEntry = viewController[ENTRY];
let newPage = newEntry.resolvedPage;
if (!newPage.parent) {
if (!frame._currentEntry) {
// First navigation
frame._currentEntry = newEntry;
}
else {
frame._navigateToEntry = newEntry;
}
frame._addView(newPage);
frame.remeasureFrame();
}
else if (newPage.parent !== frame) {
throw new Error("Page is already shown on another frame.");
}
newPage.actionBar.update();
//HACK: https://github.com/NativeScript/NativeScript/issues/1021
viewController["willShowCalled"] = true;
}
public navigationControllerDidShowViewControllerAnimated(navigationController: UINavigationController, viewController: UIViewController, animated: boolean): void {
trace.write(`UINavigationControllerImpl.navigationControllerDidShowViewControllerAnimated(${navigationController}, ${viewController}, ${animated})`, trace.categories.NativeLifecycle);
//HACK: https://github.com/NativeScript/NativeScript/issues/1021
if (viewController["willShowCalled"] === undefined) {
return;
}
else {
viewController["willShowCalled"] = undefined;
}
let frame = this._owner.get();
if (!frame) {
return;
}
let newEntry: definition.BackstackEntry = viewController[ENTRY];
let newPage = newEntry.resolvedPage;
let backStack = frame.backStack;
let currentEntry = backStack.length > 0 ? backStack[backStack.length - 1] : null;
// This code check if navigation happened through UI (e.g. back button or swipe gesture).
// When calling goBack on frame isBack will be false.
let isBack: boolean = currentEntry && newEntry === currentEntry;
let currentNavigationContext;
let navigationQueue = (<any>frame)._navigationQueue;
for (let i = 0; i < navigationQueue.length; i++) {
if (navigationQueue[i].entry === newEntry) {
currentNavigationContext = navigationQueue[i];
break;
}
}
let isBackNavigation = currentNavigationContext ? currentNavigationContext.isBackNavigation : false;
if (isBack) {
try {
frame._shouldSkipNativePop = true;
frame.goBack();
}
finally {
frame._shouldSkipNativePop = false;
}
}
let page = frame.currentPage;
if (page && !navigationController.viewControllers.containsObject(page.ios)) {
frame._removeView(page);
}
frame._navigateToEntry = null;
frame._currentEntry = newEntry;
frame.remeasureFrame();
frame._updateActionBar(newPage);
// notify the page
newPage.onNavigatedTo(isBack || isBackNavigation);
frame._processNavigationQueue(newPage);
}
public supportedInterfaceOrientation(): number {
return UIInterfaceOrientationMask.UIInterfaceOrientationMaskAll;
}
@ -672,25 +585,25 @@ function _getNativeTransition(navigationTransition: definition.NavigationTransit
return null;
}
export function _getNativeCurve(transition: definition.NavigationTransition) : UIViewAnimationCurve{
export function _getNativeCurve(transition: definition.NavigationTransition): UIViewAnimationCurve {
if (transition.curve) {
switch (transition.curve) {
case enums.AnimationCurve.easeIn:
trace.write("Transition curve resolved to UIViewAnimationCurve.UIViewAnimationCurveEaseIn.", trace.categories.Transition);
return UIViewAnimationCurve.UIViewAnimationCurveEaseIn;
case enums.AnimationCurve.easeOut:
trace.write("Transition curve resolved to UIViewAnimationCurve.UIViewAnimationCurveEaseOut.", trace.categories.Transition);
return UIViewAnimationCurve.UIViewAnimationCurveEaseOut;
case enums.AnimationCurve.easeInOut:
trace.write("Transition curve resolved to UIViewAnimationCurve.UIViewAnimationCurveEaseInOut.", trace.categories.Transition);
return UIViewAnimationCurve.UIViewAnimationCurveEaseInOut;
case enums.AnimationCurve.linear:
trace.write("Transition curve resolved to UIViewAnimationCurve.UIViewAnimationCurveLinear.", trace.categories.Transition);
return UIViewAnimationCurve.UIViewAnimationCurveLinear;
default:
trace.write("Transition curve resolved to original: " + transition.curve, trace.categories.Transition);
return transition.curve;
}
switch (transition.curve) {
case enums.AnimationCurve.easeIn:
trace.write("Transition curve resolved to UIViewAnimationCurve.UIViewAnimationCurveEaseIn.", trace.categories.Transition);
return UIViewAnimationCurve.UIViewAnimationCurveEaseIn;
case enums.AnimationCurve.easeOut:
trace.write("Transition curve resolved to UIViewAnimationCurve.UIViewAnimationCurveEaseOut.", trace.categories.Transition);
return UIViewAnimationCurve.UIViewAnimationCurveEaseOut;
case enums.AnimationCurve.easeInOut:
trace.write("Transition curve resolved to UIViewAnimationCurve.UIViewAnimationCurveEaseInOut.", trace.categories.Transition);
return UIViewAnimationCurve.UIViewAnimationCurveEaseInOut;
case enums.AnimationCurve.linear:
trace.write("Transition curve resolved to UIViewAnimationCurve.UIViewAnimationCurveLinear.", trace.categories.Transition);
return UIViewAnimationCurve.UIViewAnimationCurveLinear;
default:
trace.write("Transition curve resolved to original: " + transition.curve, trace.categories.Transition);
return transition.curve;
}
}
return UIViewAnimationCurve.UIViewAnimationCurveEaseInOut;

12
ui/page/page-common.ts
View File

@ -57,7 +57,7 @@ export class Page extends ContentView implements dts.Page {
private _styleScope: styleScope.StyleScope = new styleScope.StyleScope();
private _actionBar: ActionBar;
private _modal: Page;
public _modal: Page;
constructor(options?: dts.Options) {
super(options);
@ -206,18 +206,20 @@ export class Page extends ContentView implements dts.Page {
this._navigationContext = undefined;
}
public showModal() {
public showModal(): Page {
ensureFrame();
if (arguments.length === 0) {
this._showNativeModalView(<any>frame.topmost().currentPage, undefined, undefined, true);
return this;
} else {
var moduleName: string = arguments[0];
var context: any = arguments[1];
var closeCallback: Function = arguments[2];
var fullscreen: boolean = arguments[3];
var page = frame.resolvePageFromEntry({ moduleName: moduleName });
(<Page>page)._showNativeModalView(this, context, closeCallback, fullscreen);
var page = <Page>frame.resolvePageFromEntry({ moduleName: moduleName });
page._showNativeModalView(this, context, closeCallback, fullscreen);
return page;
}
}
@ -255,7 +257,7 @@ export class Page extends ContentView implements dts.Page {
}
protected _hideNativeModalView(parent: Page) {
parent._modal = undefined;
//
}
protected _raiseShownModallyEvent(parent: Page, context: any, closeCallback: Function) {

1
ui/page/page.android.ts
View File

@ -166,6 +166,7 @@ export class Page extends pageCommon.Page {
this.onUnloaded();
this._isAddedToNativeVisualTree = false;
this._onDetached(true);
parent._modal = undefined;
super._hideNativeModalView(parent);
}

18
ui/page/page.d.ts vendored
View File

@ -141,32 +141,32 @@ declare module "ui/page" {
* @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);
on(eventNames: string, callback: (data: observable.EventData) => void, thisArg?: any): void;
/**
* Raised when navigation to the page has started.
*/
on(event: "navigatingTo", callback: (args: NavigatedData) => void, thisArg?: any);
on(event: "navigatingTo", callback: (args: NavigatedData) => void, thisArg?: any): void;
/**
* Raised when navigation to the page has finished.
*/
on(event: "navigatedTo", callback: (args: NavigatedData) => void, thisArg?: any);
on(event: "navigatedTo", callback: (args: NavigatedData) => void, thisArg?: any): void;
/**
* Raised when navigation from the page has started.
*/
on(event: "navigatingFrom", callback: (args: NavigatedData) => void, thisArg?: any);
on(event: "navigatingFrom", callback: (args: NavigatedData) => void, thisArg?: any): void;
/**
* Raised when navigation from the page has finished.
*/
on(event: "navigatedFrom", callback: (args: NavigatedData) => void, thisArg?: any);
on(event: "navigatedFrom", callback: (args: NavigatedData) => void, thisArg?: any): void;
/**
* Raised before the page is shown as a modal dialog.
*/
on(event: "showingModally", callback: (args: observable.EventData) => void, thisArg?: any);
on(event: "showingModally", callback: (args: observable.EventData) => void, thisArg?: any): void;
/**
* Raised after the page is shown as a modal dialog.
@ -180,17 +180,17 @@ declare module "ui/page" {
* @param closeCallback - A function that will be called when the page is closed. Any arguments provided when calling ShownModallyData.closeCallback will be available here.
* @param fullscreen - An optional parameter specifying whether to show the modal page in full-screen mode.
*/
showModal(moduleName: string, context: any, closeCallback: Function, fullscreen?: boolean);
showModal(moduleName: string, context: any, closeCallback: Function, fullscreen?: boolean): Page;
/**
* Shows the page as a modal view.
*/
showModal();
showModal(): Page;
/**
* Closes the current modal view that this page is showing.
*/
closeModal();
closeModal(): void;
/**
* Returns the current modal view that this page is showing (is parent of), if any.

193
ui/page/page.ios.ts
View File

@ -8,6 +8,27 @@ import {device} from "platform";
import {DeviceType} from "ui/enums";
global.moduleMerge(pageCommon, exports);
var ENTRY = "_entry";
function isBackNavigation(frame: any, entry): boolean {
if (!frame) {
return false;
}
if (frame._navigationQueue.length === 0) {
return true;
}
else {
var navigationQueue = frame._navigationQueue;
for (var i = 0; i < navigationQueue.length; i++) {
if (navigationQueue[i].entry === entry) {
return navigationQueue[i].isBackNavigation;
}
}
}
return false;
}
class UIViewControllerImpl extends UIViewController {
@ -31,7 +52,7 @@ class UIViewControllerImpl extends UIViewController {
return;
}
if (owner._isModal) {
if (owner._modalParent) {
let isTablet = device.deviceType === DeviceType.Tablet;
let isFullScreen = !owner._UIModalPresentationFormSheet || !isTablet;
let frame = isFullScreen ? UIScreen.mainScreen().bounds : this.view.frame;
@ -85,54 +106,151 @@ class UIViewControllerImpl extends UIViewController {
}
}
public viewWillAppear() {
let owner = this._owner.get();
if (!owner) {
public viewWillAppear(animated: boolean): void {
let page = this._owner.get();
trace.write(page + " viewWillAppear", trace.categories.Navigation);
if (!page) {
return;
}
trace.write(owner + " viewWillAppear", trace.categories.Navigation);
owner._enableLoadedEvents = true;
let frame = this.navigationController ? (<any>this.navigationController).owner : null;
let newEntry = this[ENTRY];
// Don't raise event if currentPage was showing modal page.
if (!page.modal && newEntry && (!frame || frame.currentPage !== page)) {
let isBack = isBackNavigation(frame, newEntry)
page.onNavigatingTo(newEntry.entry.context, isBack);
}
if (frame) {
if (!page.parent) {
if (!frame._currentEntry) {
frame._currentEntry = newEntry;
} else {
frame._navigateToEntry = newEntry;
}
frame._addView(page);
frame.remeasureFrame();
} else if (page.parent !== frame) {
throw new Error("Page is already shown on another frame.");
}
page.actionBar.update();
}
//https://github.com/NativeScript/NativeScript/issues/1201
owner._viewWillDisappear = false;
owner.onLoaded();
owner._enableLoadedEvents = false;
page._viewWillDisappear = false;
page._enableLoadedEvents = true;
// If page was in backstack or showing modal page it will have parent but it will be in unloaded state so raise loaded here.
if (!page.isLoaded) {
page.onLoaded();
}
page._enableLoadedEvents = false;
}
public viewWillDisappear() {
let owner = this._owner.get();
if (!owner) {
public viewDidAppear(animated: boolean): void {
let page = this._owner.get();
trace.write(page + " viewDidAppear", trace.categories.Navigation);
if (!page) {
return;
}
trace.write(owner + " viewWillDisappear", trace.categories.Navigation);
//https://github.com/NativeScript/NativeScript/issues/1201
owner._viewWillDisappear = true;
page._viewWillDisappear = false;
let frame = this.navigationController ? (<any>this.navigationController).owner : null;
// Skip navigation events if modal page is shown.
if (!page.modal && frame) {
let newEntry = this[ENTRY];
let isBack = isBackNavigation(frame, newEntry);
// We are on the current page which happens when navigation is canceled so isBack should be false.
if (frame.currentPage === page && frame._navigationQueue.length === 0) {
isBack = false;
}
frame._navigateToEntry = null;
frame._currentEntry = newEntry;
frame.remeasureFrame();
frame._updateActionBar(page);
page.onNavigatedTo(isBack);
frame._processNavigationQueue(page);
}
};
public viewWillDisappear(animated: boolean): void {
let page = this._owner.get();
trace.write(page + " viewWillDisappear", trace.categories.Navigation);
if (!page) {
return;
}
var frame = page.frame;
// Skip navigation events if we are hiding because we are about to show modal page.
if (!page.modal && frame && frame.currentPage === page) {
var isBack = page.frame && (!this.navigationController || !this.navigationController.viewControllers.containsObject(this));
page.onNavigatingFrom(isBack);
}
//https://github.com/NativeScript/NativeScript/issues/1201
page._viewWillDisappear = true;
}
public viewDidDisappear() {
let owner = this._owner.get();
if (!owner) {
public viewDidDisappear(animated: boolean): void {
let page = this._owner.get();
trace.write(page + " viewDidDisappear", trace.categories.Navigation);
// Exit if no page or page is hiding because it shows another page modally.
if (!page || page.modal) {
return;
}
trace.write(owner + " viewDidDisappear", trace.categories.Navigation);
if (owner.modal) {
// Don't emit unloaded if this page is disappearing because of a modal view being shown.
return;
let modalParent = page._modalParent;
page._modalParent = undefined;
page._UIModalPresentationFormSheet = false;
// Clear modal flag on parent page.
if (modalParent) {
modalParent._modal = undefined;
}
// Manually pop backStack when Back button is pressed or navigating back with edge swipe.
// Don't pop if we are hiding modally shown page.
let frame = page.frame;
if (!modalParent && frame && frame.backStack.length > 0 && (<any>frame)._navigationQueue.length === 0 && frame.currentPage === page) {
(<any>frame)._backStack.pop();
}
page._enableLoadedEvents = true;
// Remove from parent if page was in frame and we navigated back.
// Showing page modally will not pass isBack check so currentPage won't be removed from Frame.
let isBack = frame && (!this.navigationController || !this.navigationController.viewControllers.containsObject(this));
if (isBack) {
// Remove parent when navigating back.
frame._removeView(page);
}
// Forward navigation does not remove page from frame so we raise unloaded manually.
if (page.isLoaded) {
page.onUnloaded();
}
page._enableLoadedEvents = false;
if (!modalParent) {
// Last raise onNavigatedFrom event if we are not modally shown.
page.onNavigatedFrom(isBack);
}
owner._enableLoadedEvents = true;
owner.onUnloaded();
owner._enableLoadedEvents = false;
}
}
export class Page extends pageCommon.Page {
private _ios: UIViewController;
public _enableLoadedEvents: boolean;
public _isModal: boolean;
public _modalParent: Page;
public _UIModalPresentationFormSheet: boolean;
public _viewWillDisappear: boolean;
@ -203,7 +321,7 @@ export class Page extends pageCommon.Page {
protected _showNativeModalView(parent: Page, context: any, closeCallback: Function, fullscreen?: boolean) {
super._showNativeModalView(parent, context, closeCallback, fullscreen);
this._isModal = true;
this._modalParent = parent;
if (!parent.ios.view.window) {
throw new Error("Parent page is not part of the window hierarchy. Close the current modal page before showing another one!");
@ -218,17 +336,17 @@ export class Page extends pageCommon.Page {
}
super._raiseShowingModallyEvent();
var that = this;
parent.ios.presentViewControllerAnimatedCompletion(this._ios, utils.ios.MajorVersion >= 9, function completion() {
parent.ios.presentViewControllerAnimatedCompletion(this._ios, utils.ios.MajorVersion >= 8, null);
UIViewControllerTransitionCoordinator.prototype.animateAlongsideTransitionCompletion.call(parent.ios.transitionCoordinator(), null, function () {
that._raiseShownModallyEvent(parent, context, closeCallback);
});
}
protected _hideNativeModalView(parent: Page) {
this._isModal = false;
this._UIModalPresentationFormSheet = false;
parent.requestLayout();
parent._ios.dismissModalViewControllerAnimated(utils.ios.MajorVersion >= 9);
parent._ios.dismissModalViewControllerAnimated(utils.ios.MajorVersion >= 8);
super._hideNativeModalView(parent);
}
@ -241,7 +359,6 @@ export class Page extends pageCommon.Page {
}
public onMeasure(widthMeasureSpec: number, heightMeasureSpec: number) {
let width = utils.layout.getMeasureSpecSize(widthMeasureSpec);
let widthMode = utils.layout.getMeasureSpecMode(widthMeasureSpec);
@ -258,12 +375,12 @@ export class Page extends pageCommon.Page {
if (this.frame && this.frame.parent) {
statusBarHeight = 0;
}
// Phones does not support fullScreen=false for modal pages so we reduce statusbar only when on tablet and not in fullscreen
if (this._isModal && this._UIModalPresentationFormSheet && device.deviceType === DeviceType.Tablet) {
if (this._modalParent && this._UIModalPresentationFormSheet && device.deviceType === DeviceType.Tablet) {
statusBarHeight = 0;
}
if (this.frame && this.frame._getNavBarVisible(this)) {
// Measure ActionBar with the full height.
let actionBarSize = View.measureChild(this, this.actionBar, widthMeasureSpec, heightMeasureSpec);
@ -294,14 +411,14 @@ export class Page extends pageCommon.Page {
}
let statusBarHeight = this.backgroundSpanUnderStatusBar ? uiUtils.ios.getStatusBarHeight() : 0;
// If this page is inside nested frame - don't substract statusBarHeight again.
if (this.frame && this.frame.parent) {
statusBarHeight = 0;
}
// Phones does not support fullScreen=false for modal pages so we reduce statusbar only when on tablet and not in fullscreen
if (this._isModal && this._UIModalPresentationFormSheet && device.deviceType === DeviceType.Tablet) {
if (this._modalParent && this._UIModalPresentationFormSheet && device.deviceType === DeviceType.Tablet) {
statusBarHeight = 0;
}
@ -316,4 +433,4 @@ export class Page extends pageCommon.Page {
return super._addViewToNativeVisualTree(view);
}
}
}

6
ui/transition/transition.android.ts
View File

@ -235,7 +235,7 @@ export function _onFragmentHidden(fragment: android.app.Fragment, isBack: boolea
if (fragment[COMPLETE_PAGE_REMOVAL_WHEN_TRANSITION_ENDS] === undefined) {
// This might be a second call if the fragment is hidden and then destroyed.
_completePageRemoval(fragment, true);
_completePageRemoval(fragment, true, isBack);
}
}
@ -253,7 +253,7 @@ function _completePageAddition(fragment: android.app.Fragment, isBack: boolean,
}
}
function _completePageRemoval(fragment: android.app.Fragment, force?: boolean) {
function _completePageRemoval(fragment: android.app.Fragment, force: boolean = false, isBack: boolean = false) {
if (fragment[COMPLETE_PAGE_REMOVAL_WHEN_TRANSITION_ENDS] || force) {
fragment[COMPLETE_PAGE_REMOVAL_WHEN_TRANSITION_ENDS] = undefined;
var frame = (<any>fragment).frame;
@ -261,7 +261,9 @@ function _completePageRemoval(fragment: android.app.Fragment, force?: boolean) {
var page: pageModule.Page = entry.resolvedPage;
if (page.frame) {
frame._removeView(page);
page.onNavigatedFrom(isBack);
}
trace.write(`REMOVAL of ${page} completed`, trace.categories.Transition);
}
}