Fixed #779: frame.topmost().currentPage is not the same instance as the page being loaded in page.loaded event handler.

This commit is contained in:
Rossen Hristov
2015-10-20 14:19:19 +03:00
parent 03a741e4b1
commit 2545f2f19a
8 changed files with 134 additions and 4 deletions

View File

@ -80,6 +80,9 @@
<DependentUpon>data-binding.xml</DependentUpon> <DependentUpon>data-binding.xml</DependentUpon>
</TypeScriptCompile> </TypeScriptCompile>
<TypeScriptCompile Include="apps\tests\ui\action-bar\ActionBar_NumberAsText.ts" /> <TypeScriptCompile Include="apps\tests\ui\action-bar\ActionBar_NumberAsText.ts" />
<TypeScriptCompile Include="apps\tests\ui\page\modal-page.ts">
<DependentUpon>modal-page.xml</DependentUpon>
</TypeScriptCompile>
<TypeScriptCompile Include="apps\tests\ui\placeholder\placeholder-tests.ts" /> <TypeScriptCompile Include="apps\tests\ui\placeholder\placeholder-tests.ts" />
<TypeScriptCompile Include="apps\tests\xml-declaration\custom-code-file.ts" /> <TypeScriptCompile Include="apps\tests\xml-declaration\custom-code-file.ts" />
<TypeScriptCompile Include="apps\transforms\app.ts" /> <TypeScriptCompile Include="apps\transforms\app.ts" />
@ -114,6 +117,9 @@
<Content Include="apps\action-bar-demo\pages\center-view.xml" /> <Content Include="apps\action-bar-demo\pages\center-view.xml" />
<Content Include="apps\action-bar-demo\pages\data-binding.xml" /> <Content Include="apps\action-bar-demo\pages\data-binding.xml" />
<Content Include="apps\tests\ui\action-bar\ActionBar_NumberAsText.xml" /> <Content Include="apps\tests\ui\action-bar\ActionBar_NumberAsText.xml" />
<Content Include="apps\tests\ui\page\modal-page.xml">
<SubType>Designer</SubType>
</Content>
<Content Include="apps\tests\xml-declaration\custom-css-file.css" /> <Content Include="apps\tests\xml-declaration\custom-css-file.css" />
<Content Include="apps\transforms\main-page.xml"> <Content Include="apps\transforms\main-page.xml">
<SubType>Designer</SubType> <SubType>Designer</SubType>
@ -1992,7 +1998,7 @@
<SaveServerSettingsInUserFile>False</SaveServerSettingsInUserFile> <SaveServerSettingsInUserFile>False</SaveServerSettingsInUserFile>
</WebProjectProperties> </WebProjectProperties>
</FlavorProperties> </FlavorProperties>
<UserProperties ui_2layouts_2wrap-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2grid-layout_2package_1json__JSONSchema="" ui_2layouts_2dock-layout_2package_1json__JSONSchema="" ui_2layouts_2absolute-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2web-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2content-view_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2gallery-app_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2absolute-layout-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2editable-text-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2scroll-view_2package_1json__JSONSchema="http://json.schemastore.org/package" /> <UserProperties ui_2scroll-view_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2editable-text-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2absolute-layout-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2gallery-app_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2content-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2web-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2absolute-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2dock-layout_2package_1json__JSONSchema="" ui_2layouts_2grid-layout_2package_1json__JSONSchema="" ui_2layouts_2wrap-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" />
</VisualStudio> </VisualStudio>
</ProjectExtensions> </ProjectExtensions>
</Project> </Project>

View File

@ -1,13 +1,25 @@
import observable = require("data/observable"); import observable = require("data/observable");
import pages = require("ui/page"); import pages = require("ui/page");
import labelModule = require("ui/label"); import labelModule = require("ui/label");
import frame = require("ui/frame");
var page: pages.Page; var page: pages.Page;
var label: labelModule.Label; var label: labelModule.Label;
export function pageLoaded(args: observable.EventData) { export function onLoaded(args: observable.EventData) {
console.log("main-page.onLoaded");
if (args.object !== frame.topmost().currentPage) {
throw new Error("args.object must equal frame.topmost().currentPage on page.loaded");
}
page = <pages.Page>args.object; page = <pages.Page>args.object;
label = page.getViewById<labelModule.Label>("label"); label = frame.topmost().getViewById<labelModule.Label>("label");
if (!label) {
throw new Error("Could not find `label`");
}
}
export function onNavigatedTo(args: observable.EventData) {
console.log("main-page.onNavigatedTo");
} }
export function onTap(args: observable.EventData) { export function onTap(args: observable.EventData) {

View File

@ -1,4 +1,4 @@
<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="pageLoaded" id="_mainPage" backgroundColor="Red"> <Page xmlns="http://www.nativescript.org/tns.xsd" loaded="onLoaded" navigatedTo="onNavigatedTo" id="_mainPage" backgroundColor="Red">
<StackLayout backgroundColor="PaleGreen"> <StackLayout backgroundColor="PaleGreen">
<Button text="Login (small)" tap="onTap" /> <Button text="Login (small)" tap="onTap" />
<Button text="Login (full-screen)" tap="onTap" /> <Button text="Login (full-screen)" tap="onTap" />

View File

@ -0,0 +1,6 @@
import {ShownModallyData} from "ui/page";
export function onShownModally(args: ShownModallyData) {
args.context.shownModally = true;
args.closeCallback("return value");
}

View File

@ -0,0 +1,5 @@
<Page shownModally="onShownModally">
<StackLayout>
<Label text="Modal Page" />
</StackLayout>
</Page>

View File

@ -27,6 +27,7 @@ import LabelModule = require("ui/label");
import stackLayoutModule = require("ui/layouts/stack-layout"); import stackLayoutModule = require("ui/layouts/stack-layout");
import helper = require("../helper"); import helper = require("../helper");
import view = require("ui/core/view"); import view = require("ui/core/view");
import platform = require("platform");
export function addLabelToPage(page: PageModule.Page, text?: string) { export function addLabelToPage(page: PageModule.Page, text?: string) {
var label = new LabelModule.Label(); var label = new LabelModule.Label();
@ -368,6 +369,75 @@ export function test_page_backgroundColor_is_white() {
}); });
} }
export function test_WhenPageIsLoadedFrameCurrentPageIsTheSameInstance() {
var page;
var loadedEventHandler = function (args) {
console.log("loadedEventHandler");
TKUnit.assert(FrameModule.topmost().currentPage === args.object, `frame.topmost().currentPage should be equal to args.object page instance in the page.loaded event handler. Expected: ${args.object.id}; Actual: ${FrameModule.topmost().currentPage.id};`);
}
var pageFactory = function (): PageModule.Page {
page = new PageModule.Page();
page.id = "newPage";
page.on(view.View.loadedEvent, loadedEventHandler);
var label = new LabelModule.Label();
label.text = "Text";
page.content = label;
return page;
};
try {
helper.navigate(pageFactory);
page.off(view.View.loadedEvent, loadedEventHandler);
}
finally {
helper.goBack();
}
}
export function test_WhenPageIsLoadedItCanShowAnotherPageAsModal_iOS() {
if (platform.device.os === platform.platformNames.android) {
// We can't show a modal from another modal on Android.
return;
}
var masterPage;
var ctx = {
shownModally: false
};
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!");
modalClosed = true;
}
var loadedEventHandler = function (args) {
var basePath = "ui/page/";
args.object.showModal(basePath + "modal-page", ctx, modalCloseCallback, false);
};
var masterPageFactory = function(): PageModule.Page {
masterPage = new PageModule.Page();
masterPage.id = "newPage";
masterPage.on(view.View.loadedEvent, loadedEventHandler);
var label = new LabelModule.Label();
label.text = "Text";
masterPage.content = label;
return masterPage;
};
try {
helper.navigate(masterPageFactory);
TKUnit.waitUntilReady(() => { return modalClosed; });
masterPage.off(view.View.loadedEvent, loadedEventHandler);
}
finally {
helper.goBack();
}
}
//export function test_ModalPage_Layout_is_Correct() { //export function test_ModalPage_Layout_is_Correct() {
// var testPage: PageModule.Page; // var testPage: PageModule.Page;
// var label: LabelModule.Label; // var label: LabelModule.Label;

View File

@ -309,6 +309,14 @@ class UINavigationControllerImpl extends UINavigationController implements UINav
frame._currentEntry = newEntry; frame._currentEntry = newEntry;
var newPage = newEntry.resolvedPage; var newPage = newEntry.resolvedPage;
// In iOS we intentionally delay the raising of the 'loaded' event so both platforms behave identically.
// The loaded event must be raised AFTER the page is part of the windows hierarchy and
// frame.topmost().currentPage is set to the page instance.
// https://github.com/NativeScript/NativeScript/issues/779
(<any>newPage)._delayLoadedEvent = false;
newPage._emit(view.View.loadedEvent);
frame._updateActionBar(newPage); frame._updateActionBar(newPage);
// notify the page // notify the page

View File

@ -6,6 +6,7 @@ import uiUtils = require("ui/utils");
import utils = require("utils/utils"); import utils = require("utils/utils");
import {device} from "platform"; import {device} from "platform";
import {DeviceType} from "ui/enums"; import {DeviceType} from "ui/enums";
import observable = require("data/observable");
global.moduleMerge(pageCommon, exports); global.moduleMerge(pageCommon, exports);
@ -94,6 +95,15 @@ class UIViewControllerImpl extends UIViewController {
public viewWillAppear() { public viewWillAppear() {
trace.write(this._owner + " viewWillAppear", trace.categories.Navigation); trace.write(this._owner + " viewWillAppear", trace.categories.Navigation);
this._owner._enableLoadedEvents = true; this._owner._enableLoadedEvents = true;
// In iOS we intentionally delay the raising of the 'loaded' event so both platforms behave identically.
// The loaded event must be raised AFTER the page is part of the windows hierarchy and
// frame.topmost().currentPage is set to the page instance.
// https://github.com/NativeScript/NativeScript/issues/779
if (!this._owner._isModal) {
this._owner._delayLoadedEvent = true;
}
this._owner.onLoaded(); this._owner.onLoaded();
this._owner._enableLoadedEvents = false; this._owner._enableLoadedEvents = false;
} }
@ -111,6 +121,7 @@ export class Page extends pageCommon.Page {
public _enableLoadedEvents: boolean; public _enableLoadedEvents: boolean;
public _isModal: boolean = false; public _isModal: boolean = false;
public _UIModalPresentationFormSheet: boolean = false; public _UIModalPresentationFormSheet: boolean = false;
public _delayLoadedEvent;
constructor(options?: definition.Options) { constructor(options?: definition.Options) {
super(options); super(options);
@ -137,6 +148,18 @@ export class Page extends pageCommon.Page {
} }
} }
public notify<T extends observable.EventData>(data: T) {
// In iOS we intentionally delay the raising of the 'loaded' event so both platforms behave identically.
// The loaded event must be raised AFTER the page is part of the windows hierarchy and
// frame.topmost().currentPage is set to the page instance.
// https://github.com/NativeScript/NativeScript/issues/779
if (data.eventName === View.loadedEvent && this._delayLoadedEvent) {
return;
}
super.notify(data);
}
public onUnloaded() { public onUnloaded() {
// loaded/unloaded events are handled in page viewWillAppear/viewDidDisappear // loaded/unloaded events are handled in page viewWillAppear/viewDidDisappear
if (this._enableLoadedEvents) { if (this._enableLoadedEvents) {