javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-16 20:11:24 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #310 from NativeScript/modal-pages

Browse Source 
Modal pages
This commit is contained in:
Rossen Hristov
2015-06-11 12:09:07 +03:00
parent 67f5124ead 6cc5675d31
commit 3a3886a44c
11 changed files with 99 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
application/application.ios.ts
View File

@ -31,7 +31,7 @@ class Window extends UIWindow {
}
public layoutSubviews(): void {
utils.ios._layoutRootView(this._content);
utils.ios._layoutRootView(this._content, UIScreen.mainScreen().bounds);
}
}

6
apps/modal-views-demo/app.ts
View File

@ -1,3 +1,9 @@
import application = require("application");
application.mainModule = "main-page";
import trace = require("trace");
trace.enable();
trace.setCategories(trace.categories.concat(
trace.categories.Layout,
"LayoutRootView.iOS"
));
application.start();

8
apps/modal-views-demo/login-page.xml
View File

@ -1,7 +1,7 @@
<Page xmlns="http://www.nativescript.org/tns.xsd" shownModally="onShownModally" loaded="onLoaded" unloaded="onUnloaded">
<StackLayout>
<TextField hint="username" id="username"/>
<TextField hint="password" id="password" secure="true"/>
<Page xmlns="http://www.nativescript.org/tns.xsd" shownModally="onShownModally" loaded="onLoaded" unloaded="onUnloaded" backgroundColor="Red">
<StackLayout backgroundColor="PaleGreen">
<TextField hint="username" id="username" text="username"/>
<TextField hint="password" id="password" text="password" secure="true"/>
<Button text="Login" tap="onLoginButtonTap"/>
</StackLayout>
</Page>

5
apps/modal-views-demo/main-page.ts
View File

@ -11,8 +11,9 @@ export function pageLoaded(args: observable.EventData) {
}
export function onTap(args: observable.EventData) {
page.showModal("./modal-views-demo/login-page", "some custom context", function(username: string, password: string) {
var fullscreen = (<any>args.object).text.indexOf("(full-screen)") !== -1;
page.showModal("./modal-views-demo/login-page", "some custom context", function (username: string, password: string) {
console.log(username + "/" + password);
label.text = username + "/" + password;
});
}, fullscreen);
}

7
apps/modal-views-demo/main-page.xml
View File

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

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

@ -133,12 +133,12 @@ export class Page extends contentView.ContentView implements dts.Page, view.AddA
this._navigationContext = undefined;
}
public showModal(moduleName: string, context: any, closeCallback: Function) {
public showModal(moduleName: string, context: any, closeCallback: Function, fullscreen?: boolean) {
var page = frameCommon.resolvePageFromEntry({ moduleName: moduleName });
(<Page>page)._showNativeModalView(this, context, closeCallback);
(<Page>page)._showNativeModalView(this, context, closeCallback, fullscreen);
}
protected _showNativeModalView(parent: Page, context: any, closeCallback: Function) {
protected _showNativeModalView(parent: Page, context: any, closeCallback: Function, fullscreen?: boolean) {
//
}

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

@ -8,11 +8,13 @@ require("utils/module-merge").merge(pageCommon, exports);
class DialogFragmentClass extends android.app.DialogFragment {
private _owner: Page;
private _fullscreen: boolean;
constructor(owner: Page) {
constructor(owner: Page, fullscreen?: boolean) {
super();
this._owner = owner;
this._fullscreen = fullscreen;
return global.__native(this);
}
@ -22,7 +24,10 @@ class DialogFragmentClass extends android.app.DialogFragment {
dialog.setContentView(this._owner._nativeView);
var window = dialog.getWindow();
window.setBackgroundDrawable(new android.graphics.drawable.ColorDrawable(android.graphics.Color.TRANSPARENT));
window.setLayout(android.view.ViewGroup.LayoutParams.FILL_PARENT, android.view.ViewGroup.LayoutParams.FILL_PARENT);
if (this._fullscreen) {
window.setLayout(android.view.ViewGroup.LayoutParams.FILL_PARENT, android.view.ViewGroup.LayoutParams.FILL_PARENT);
}
return dialog;
}
@ -61,7 +66,7 @@ export class Page extends pageCommon.Page {
/* tslint:disable */
private _dialogFragment: DialogFragmentClass;
/* tslint:enable */
protected _showNativeModalView(parent: Page, context: any, closeCallback: Function) {
protected _showNativeModalView(parent: Page, context: any, closeCallback: Function, fullscreen?: boolean) {
if (!this.backgroundColor) {
this.backgroundColor = new color.Color("White");
}
@ -70,7 +75,7 @@ export class Page extends pageCommon.Page {
this._isAddedToNativeVisualTree = true;
this.onLoaded();
this._dialogFragment = new DialogFragmentClass(this);
this._dialogFragment = new DialogFragmentClass(this, fullscreen);
this._dialogFragment.show(parent.frame.android.activity.getFragmentManager(), "dialog");
super._raiseShownModallyEvent(parent, context, closeCallback);

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

@ -143,8 +143,9 @@ declare module "ui/page" {
* @param moduleName - The name of the page module to load starting from the application root.
* @param context - Any context you want to pass to the modally shown page. This same context will be available in the arguments of the Page.shownModally event handler.
* @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);
showModal(moduleName: string, context: any, closeCallback: Function, fullscreen?: boolean);
_addArrayFromBuilder(name: string, value: Array<any>): void;

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

@ -23,8 +23,9 @@ class UIViewControllerImpl extends UIViewController {
public didRotateFromInterfaceOrientation(fromInterfaceOrientation: number) {
trace.write(this._owner + " didRotateFromInterfaceOrientation(" + fromInterfaceOrientation+ ")", trace.categories.ViewHierarchy);
if (this._owner._isModal) {
utils.ios._layoutRootView(this._owner);
if ((<any>this._owner)._isModal) {
var parentBounds = (<any>this._owner)._UIModalPresentationFormSheet ? (<UIView>this._owner._nativeView).superview.bounds : UIScreen.mainScreen().bounds;
utils.ios._layoutRootView(this._owner, parentBounds);
}
}
@ -57,7 +58,6 @@ class UIViewControllerImpl extends UIViewController {
export class Page extends pageCommon.Page {
private _ios: UIViewController;
public _enableLoadedEvents: boolean;
public _isModal = false;
constructor(options?: definition.Options) {
super(options);
@ -147,19 +147,33 @@ export class Page extends pageCommon.Page {
navigationItem.setRightBarButtonItemsAnimated(array, true);
}
protected _showNativeModalView(parent: Page, context: any, closeCallback: Function) {
this._isModal = true;
utils.ios._layoutRootView(this);
protected _showNativeModalView(parent: Page, context: any, closeCallback: Function, fullscreen?: boolean) {
(<any>this)._isModal = true;
if (fullscreen) {
this._ios.modalPresentationStyle = UIModalPresentationStyle.UIModalPresentationFullScreen;
utils.ios._layoutRootView(this, UIScreen.mainScreen().bounds);
}
else {
this._ios.modalPresentationStyle = UIModalPresentationStyle.UIModalPresentationFormSheet;
(<any>this)._UIModalPresentationFormSheet = true;
}
var that = this;
parent.ios.presentViewControllerAnimatedCompletion(this._ios, false, function completion() {
if (!fullscreen) {
// We can measure and layout the modal page after we know its parent's dimensions.
utils.ios._layoutRootView(that, that._nativeView.superview.bounds);
}
that._raiseShownModallyEvent(parent, context, closeCallback);
});
}
protected _hideNativeModalView(parent: Page) {
parent._ios.dismissModalViewControllerAnimated(false);
this._isModal = false;
(<any>this)._isModal = false;
(<any>this)._UIModalPresentationFormSheet = false;
}
}

2
utils/utils.d.ts vendored
View File

@ -122,7 +122,7 @@
*/
export var MajorVersion: number;
export function _layoutRootView(rootView: view.View): void;
export function _layoutRootView(rootView: view.View, parentBounds: CGRect): void;
}
/**
* An utility function that copies properties from source object to target object.

67
utils/utils.ios.ts
View File

@ -1,6 +1,7 @@
import common = require("utils/utils-common");
import colorModule = require("color");
import view = require("ui/core/view");
//import trace = require("trace");
// merge the exports of the common file with the exports of this file
declare var exports;
@ -79,46 +80,68 @@ export module ios {
export var MajorVersion = NSString.stringWithString(UIDevice.currentDevice().systemVersion).intValue;
export function _layoutRootView(rootView: view.View) {
if (!rootView) {
export function _layoutRootView(rootView: view.View, parentBounds: CGRect) {
if (!rootView || !parentBounds) {
return;
}
var statusFrame = UIApplication.sharedApplication().statusBarFrame;
var statusBarHeight = 0;
try {
statusBarHeight = Math.min(statusFrame.size.width, statusFrame.size.height);
} catch (ex) {
console.log("exception: " + ex);
}
var landscape = isLandscape();
var iOSMajorVersion = MajorVersion;
// in iOS 8 when in landscape statusbar is hidden.
if (landscape && iOSMajorVersion > 7) {
statusBarHeight = 0;
}
var deviceFrame = UIScreen.mainScreen().bounds;
var size = deviceFrame.size;
var size = parentBounds.size;
var width = size.width;
var height = size.height;
// in iOS 7 when in landscape we switch width with height because on device they don't change even when rotated.
if (iOSMajorVersion < 8 && landscape) {
//trace.write("--------------------------------------------", "LayoutRootView.iOS");
//trace.write("| Layout Root View", "LayoutRootView.iOS");
//trace.write("| rootView: " + rootView, "LayoutRootView.iOS");
//trace.write("| parentBounds: " + NSStringFromCGRect(parentBounds), "LayoutRootView.iOS");
//trace.write("| UIScreen.mainScreen().bounds: " + NSStringFromCGRect(UIScreen.mainScreen().bounds), "LayoutRootView.iOS");
//trace.write("| _isModal: " + (<any>rootView)._isModal, "LayoutRootView.iOS");
//trace.write("| _UIModalPresentationFormSheet: " + (<any>rootView)._UIModalPresentationFormSheet, "LayoutRootView.iOS");
//trace.write("| landscape: " + landscape, "LayoutRootView.iOS");
//trace.write("| iOSMajorVersion: " + iOSMajorVersion, "LayoutRootView.iOS");
var superview = (<UIView>rootView._nativeView).superview;
//trace.write("| superview: " + superview, "LayoutRootView.iOS");
var superViewRotationRadians;
if (superview) {
superViewRotationRadians = atan2f(superview.transform.b, superview.transform.a);
//trace.write("| superViewRotationRadians: " + superViewRotationRadians + " rad.", "LayoutRootView.iOS");
//trace.write("| superview.bounds: " + NSStringFromCGRect(superview.bounds), "LayoutRootView.iOS");
}
if (iOSMajorVersion < 8 && landscape && !superViewRotationRadians) {
// in iOS 7 when in landscape we switch width with height because on device they don't change even when rotated.
//trace.write("| >>> Detected iOS 7 device in landscape mode and superview is not rotated. Manually swapping width and height...", "LayoutRootView.iOS");
width = size.height;
height = size.width;
}
var origin = deviceFrame.origin;
var statusBarHeight;
if (UIApplication.sharedApplication().statusBarHidden || ((<any>rootView)._UIModalPresentationFormSheet && !CGSizeEqualToSize(parentBounds.size, UIScreen.mainScreen().bounds.size))) {
statusBarHeight = 0;
}
else {
// Status bar section
var statusFrame = UIApplication.sharedApplication().statusBarFrame;
try {
statusBarHeight = Math.min(statusFrame.size.width, statusFrame.size.height);
} catch (ex) {
console.log("exception: " + ex);
}
}
//trace.write("| UIApplication.sharedApplication().statusBarHidden: " + UIApplication.sharedApplication().statusBarHidden, "LayoutRootView.iOS");
//trace.write("| statusBarHeight: " + statusBarHeight, "LayoutRootView.iOS");
var origin = parentBounds.origin;
var left = origin.x;
var top = origin.y + statusBarHeight;
var widthSpec = layout.makeMeasureSpec(width, common.layout.EXACTLY);
var heightSpec = layout.makeMeasureSpec(height - statusBarHeight, common.layout.EXACTLY);
//trace.write("| >>> Will measure and layout with {{" + left + ", " + top + "}{" + width + ", " + height + "}}", "LayoutRootView.iOS");
//trace.write("--------------------------------------------", "LayoutRootView.iOS");
rootView.measure(widthSpec, heightSpec);
rootView.layout(left, top, width, height);
}