Class Page<TEvent, TNative, TProps>Abstract

Type Parameters

Hierarchy

Implements

Properties

_nativeObject: any
popupBackNavigator: any
isInsideBottomTabBar: boolean
orientation: PageOrientation

Gets/sets the orientation of the Page. This property must be set as constructor parameter. UI.Page.Orientation Orientation constants can use with bitwise or operator. The default value of the orientation defined in project.json.

Example

import Page from '@smartface/native/ui/page';
var myPage1 = new Page({
orientation: Page.Orientation.LANDSCAPELEFT
});

Property

= UI.Page.Orientation.PORTRAIT]

Android

Ios

Since

0.1

transitionViews: IView<"touch" | "touchCancelled" | "touchEnded" | "touchMoved", { [key: string]: any }, MobileOSProps<ViewIOSProps, ViewAndroidProps>>[]

Gets/sets custom transition views. Used with custom transitions to map a UI.View View from a removed or hidden UI.Page Page to a UI.View View from a shown or added UI.Page Page.

Example

import Page from '@smartface/native/ui/page';
var myPage = new Page({
var page = this;
onShow: function() {
page.headerBar.visible = true;

page.imageView1.transitionID = "view1";
page.imageView2.transitionID = "view2";

page.transitionViews = [page.imageView1, page.imageView2];
}
});

var myDetailPage = new Page({
var page = this;
onShow: function() {
page.headerBar.visible = true;
}

page.imageView1.transitionID = "view2";
page.imageView2.transitionID = "view1";
});

Property

Android

Ios

Since

3.2.0

layout: IFlexLayout<"touch" | "touchCancelled" | "touchEnded" | "touchMoved" | "viewAdded" | "viewRemoved" | "interceptTouchEvent", MobileOSProps<FlexLayoutIOSProps, FlexLayoutAndroidProps>>

Gets the main layout of Page which is an instance of UI.FlexLayout. You should add views to the layout of the page.

Property

Android

Ios

Since

0.1

statusBar: StatusBarImpl

Gets status bar object. This property is readonly, you can not set status bar to a page but you can change properties of page's status bar.

Property

Android

Ios

Removed

4.0.0 Use Application.statusBar instead

Since

0.1

headerBar?: HeaderBar

Gets header bar object of a page. This property is readonly, you can not set header bar to a page but you can change properties of page's header bar. In Android, header bar properties should be implemented in onLoad or onShow of page. Otherwise given settings might be losed.

Property

Android

Ios

Since

0.1

iOS: { LargeTitleDisplayMode: typeof LargeTitleDisplayMode; PresentationStyle: typeof PresentationStyle }

Type declaration

Orientation: typeof PageOrientation

Accessors

  • get nativeObject(): any
  • Returns any

  • set nativeObject(value: any): void
  • Parameters

    • value: any

    Returns void

  • get ios(): TProps["ios"]
  • Returns TProps["ios"]

  • get android(): TProps["android"]
  • Returns TProps["android"]

  • get skipDefaults(): boolean
  • Returns boolean

  • set skipDefaults(value: boolean): void
  • Parameters

    • value: boolean

    Returns void

Methods

  • Adds the listener function to the beginning of the listeners array for the event named eventName. No checks are made to see if the listener has already been added. Multiple calls passing the same combination of eventName and listener will result in the listener being added, and called, multiple times.

    Parameters

    • eventName: "load" | "dismissComplete" | "dismissStart" | "dismissCancel" | "hide" | "show" | "orientationChange" | "safeAreaPaddingChange" | TEvent
    • callback: EventListenerCallback

    Returns void

  • Adds a one-time listener function for the event named eventName to the beginning of the listeners array. The next time eventName is triggered, this listener is removed, and then invoked.

    Parameters

    • eventName: "load" | "dismissComplete" | "dismissStart" | "dismissCancel" | "hide" | "show" | "orientationChange" | "safeAreaPaddingChange" | TEvent
    • callback: EventListenerCallback

    Returns void

  • Creates an event emitter instance to listen for the actions

    Returns

    Call the function to remove the event

    Parameters

    • eventName: "load" | "dismissComplete" | "dismissStart" | "dismissCancel" | "hide" | "show" | "orientationChange" | "safeAreaPaddingChange" | TEvent
    • callback: EventListenerCallback

      Gets as any arguments as it needs

    Returns (() => void)

      • (): void
      • Returns void

  • Creates an event emitter instance to listen for the actions

    Returns

    Call the function to remove the event

    Parameters

    • eventName: "load" | "dismissComplete" | "dismissStart" | "dismissCancel" | "hide" | "show" | "orientationChange" | "safeAreaPaddingChange" | TEvent
    • callback: EventListenerCallback

      Gets as any arguments as it needs

    Returns (() => void)

      • (): void
      • Returns void

  • Removes the specified event and invokes the callback after it is removed

    Parameters

    • eventName: "load" | "dismissComplete" | "dismissStart" | "dismissCancel" | "hide" | "show" | "orientationChange" | "safeAreaPaddingChange" | TEvent
    • callback: EventListenerCallback

    Returns void

  • Triggers the event manually.

    Parameters

    • event: "load" | "dismissComplete" | "dismissStart" | "dismissCancel" | "hide" | "show" | "orientationChange" | "safeAreaPaddingChange" | TEvent
    • Rest ...args: any[]

      Arguments that needs to be passed down

    Returns void

  • Parameters

    • Optional params: Partial<Record<string, any>>

    Returns void

  • Parameters

    • props: WithMobileOSProps<TProps, { [key: string]: any }, { [key: string]: any }>["android"]

    Returns void

  • Parameters

    • props: WithMobileOSProps<TProps, { [key: string]: any }, { [key: string]: any }>["ios"]

    Returns void

  • Returns void

  • This event will be called when orientation of the Page changes. iOS fires this event before orientation changed but Android fires after changed.

    onOrientationChange

    Deprecated

    Android

    Ios

    Since

    0.1

    Example

    import Page from '@smartface/native/ui/page';

    const page = new Page();
    page.on(Page.Events.OrientationChange, (params) => {
    console.info('onOrientationChange', params);
    });

    Parameters

    Returns void

  • This event is called once when page is created. You can create views and add them to page in this callback.

    Android

    Ios

    Example

    import Page from '@smartface/native/ui/page';

    const page = new Page();
    page.on(Page.Events.Load, () => {
    console.info('onLoad');
    });

    Returns void

  • This event is called when a page appears on the screen (everytime). It will be better to set headerBar and statusBar properties in this callback.

    Android

    Ios

    Example

    import Page from '@smartface/native/ui/page';

    const page = new Page();
    page.on('show', () => {
    console.info('onShow');
    });

    Returns void

  • This event is called when a page disappears from the screen.

    onHide

    Android

    Ios

    Example

    import Page from '@smartface/native/ui/page';

    const page = new Page();
    page.on(Page.Events.Hide, () => {
    console.info('onHide');
    });

    Returns void

  • This function shows up the pop-up page. Pop-up pages behave exactly as UI.Page .

    Example

    const self = this; //Current page
    import Color from '@smartface/native/ui/color';

    var popuPage = new Page();
    popuPage.layout.backgroundColor = Color.BLUE;

    import Button from '@smartface/native/ui/button';
    var myButton = new Button({
    width: 150,
    height: 80,
    text: "Smartface Button",
    onPress: function() {
    self.dismiss(function() {
    console.log("dismiss")
    });
    }
    });
    popuPage.layout.addChild(myButton);

    self.popupBtn.onPress = function() {
    self.present({
    controller: popuPage,
    animated: true,
    onComplete: function() {
    console.log("Page3 presented...");
    };
    });
    }

    Method

    present

    Android

    Ios

    Deprecated

    Since

    3.1.1

    Parameters

    • Optional params: ControllerParams

    Returns void

  • This function dismiss presently shown pop-up page.

    Method

    dismiss

    Android

    Ios

    Since

    3.1.1

    Deprecated

    Parameters

    • Optional params: { onComplete: (() => void) }
      • onComplete: (() => void)
          • (): void
          • Returns void

    Returns void

Constructors

  • Type Parameters

    • TEvent extends string = "load" | "dismissComplete" | "dismissStart" | "dismissCancel" | "hide" | "show" | "orientationChange" | "safeAreaPaddingChange"

    • TNative = any

    • TProps extends IPage<"load" | "dismissComplete" | "dismissStart" | "dismissCancel" | "hide" | "show" | "orientationChange" | "safeAreaPaddingChange", MobileOSProps<PageIOSParams, PageAndroidParams>, any, TProps> = IPage<"load" | "dismissComplete" | "dismissStart" | "dismissCancel" | "hide" | "show" | "orientationChange" | "safeAreaPaddingChange", MobileOSProps<PageIOSParams, PageAndroidParams>, any>

    Parameters

    • Optional params: Partial<TProps>

    Returns Page<TEvent, TNative, TProps>

Generated using TypeDoc