Interface IPage<TEvent, TMobile, TNative>

Type Parameters

Hierarchy

Implemented by

Properties

nativeObject: TNative
ios: TMobile["ios"]
android: TMobile["android"]
pageID: number
popupBackNavigator: any
popUpBackPage?: any
isActive: boolean
childControllers: IController<any>[]
tabBar?: TabBarController | IBottomTabBar | IController<any>
contextMenu: { items: any[]; headerTitle: string }

Type declaration

  • items: any[]
  • headerTitle: string
isInsideBottomTabBar: boolean
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

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

parentController: IController<any>

Gets/sets the parentcontroller(viewcontroller etc.) of the current page on iOS. You should access headerbar values through parentcontroller on iOS.

Methods

  • Parameters

    • Optional params: { controller: IController<any>; animated: any; isComingFromPresent?: boolean; onCompleteCallback?: (() => void) }
      • controller: IController<any>
      • animated: any
      • Optional isComingFromPresent?: boolean
      • Optional onCompleteCallback?: (() => void)
          • (): void
          • Returns void

    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 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); animated?: boolean }
      • onComplete: (() => void)
          • (): void
          • Returns void

      • Optional animated?: boolean

    Returns void

  • Creates an event emitter instance to listen for the actions

    Returns

    Call the function to remove the event

    Parameters

    • eventName: "safeAreaPaddingChange"
    • callback: ((padding: { left: number; top: number; right: number; bottom: number }) => void)

      Gets as any arguments as it needs

        • (padding: { left: number; top: number; right: number; bottom: number }): void
        • Parameters

          • padding: { left: number; top: number; right: number; bottom: number }
            • left: number
            • top: number
            • right: number
            • bottom: number

          Returns void

    Returns (() => void)

      • (): void
      • Returns void

  • Parameters

    • eventName: "dismissComplete"
    • callback: (() => void)
        • (): void
        • Returns void

    Returns (() => void)

      • (): void
      • Returns void

  • Parameters

    • eventName: "dismissStart"
    • callback: (() => void)
        • (): void
        • Returns void

    Returns (() => void)

      • (): void
      • Returns void

  • Parameters

    • eventName: "dismissCancel"
    • callback: (() => void)
        • (): void
        • Returns void

    Returns (() => void)

      • (): void
      • Returns void

  • Parameters

    • eventName: "hide"
    • callback: (() => void)
        • (): void
        • Returns void

    Returns (() => void)

      • (): void
      • Returns void

  • Parameters

    • eventName: "show"
    • callback: (() => void)
        • (): void
        • Returns void

    Returns (() => void)

      • (): void
      • Returns void

  • Parameters

    Returns (() => void)

      • (): void
      • Returns void

  • Parameters

    • eventName: "load" | "show" | "hide" | "dismissComplete" | "dismissStart" | "dismissCancel" | "orientationChange" | "safeAreaPaddingChange"
    • callback: ((...args: any[]) => void)
        • (...args: any[]): void
        • Parameters

          • Rest ...args: any[]

          Returns void

    Returns (() => void)

      • (): void
      • Returns void

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

    Parameters

    • eventName: "safeAreaPaddingChange"
    • callback: ((padding: { left: number; top: number; right: number; bottom: number }) => void)
        • (padding: { left: number; top: number; right: number; bottom: number }): void
        • Parameters

          • padding: { left: number; top: number; right: number; bottom: number }
            • left: number
            • top: number
            • right: number
            • bottom: number

          Returns void

    Returns void

  • Parameters

    • eventName: "dismissComplete"
    • callback: (() => void)
        • (): void
        • Returns void

    Returns void

  • Parameters

    • eventName: "dismissStart"
    • callback: (() => void)
        • (): void
        • Returns void

    Returns void

  • Parameters

    • eventName: "dismissCancel"
    • callback: (() => void)
        • (): void
        • Returns void

    Returns void

  • Parameters

    • eventName: "hide"
    • callback: (() => void)
        • (): void
        • Returns void

    Returns void

  • Parameters

    • eventName: "load"
    • callback: (() => void)
        • (): void
        • Returns void

    Returns void

  • Parameters

    • eventName: "show"
    • callback: (() => void)
        • (): void
        • Returns void

    Returns void

  • Parameters

    Returns void

  • Parameters

    • eventName: "load" | "show" | "hide" | "dismissComplete" | "dismissStart" | "dismissCancel" | "orientationChange" | "safeAreaPaddingChange"
    • callback: ((...args: any[]) => void)
        • (...args: any[]): void
        • Parameters

          • Rest ...args: any[]

          Returns void

    Returns void

  • Triggers the event manually.

    Parameters

    • eventName: "safeAreaPaddingChange"
    • padding: { left: number; top: number; right: number; bottom: number }

      Arguments that needs to be passed down

      • left: number
      • top: number
      • right: number
      • bottom: number

    Returns void

  • Parameters

    • eventName: "dismissComplete"

    Returns void

  • Parameters

    • eventName: "dismissStart"

    Returns void

  • Parameters

    • eventName: "dismissCancel"

    Returns void

  • Parameters

    • eventName: "hide"

    Returns void

  • Parameters

    • eventName: "load"

    Returns void

  • Parameters

    • eventName: "show"

    Returns void

  • Parameters

    Returns void

  • Parameters

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

    Returns void

  • Creates an event emitter instance to listen for the actions

    Returns

    Call the function to remove the event

    Parameters

    • eventName: "safeAreaPaddingChange"
    • callback: ((padding: { left: number; top: number; right: number; bottom: number }) => void)

      Gets as any arguments as it needs

        • (padding: { left: number; top: number; right: number; bottom: number }): void
        • Parameters

          • padding: { left: number; top: number; right: number; bottom: number }
            • left: number
            • top: number
            • right: number
            • bottom: number

          Returns void

    Returns (() => void)

      • (): void
      • Returns void

  • Parameters

    • eventName: "dismissComplete"
    • callback: (() => void)
        • (): void
        • Returns void

    Returns (() => void)

      • (): void
      • Returns void

  • Parameters

    • eventName: "dismissStart"
    • callback: (() => void)
        • (): void
        • Returns void

    Returns (() => void)

      • (): void
      • Returns void

  • Parameters

    • eventName: "dismissCancel"
    • callback: (() => void)
        • (): void
        • Returns void

    Returns (() => void)

      • (): void
      • Returns void

  • Parameters

    • eventName: "hide"
    • callback: (() => void)
        • (): void
        • Returns void

    Returns (() => void)

      • (): void
      • Returns void

  • Parameters

    • eventName: "load"
    • callback: (() => void)
        • (): void
        • Returns void

    Returns (() => void)

      • (): void
      • Returns void

  • Parameters

    • eventName: "show"
    • callback: (() => void)
        • (): void
        • Returns void

    Returns (() => void)

      • (): void
      • Returns void

  • Parameters

    Returns (() => void)

      • (): void
      • Returns void

  • Parameters

    • eventName: "load" | "show" | "hide" | "dismissComplete" | "dismissStart" | "dismissCancel" | "orientationChange" | "safeAreaPaddingChange"
    • callback: ((...args: any[]) => void)
        • (...args: any[]): void
        • Parameters

          • Rest ...args: any[]

          Returns void

    Returns (() => void)

      • (): void
      • Returns void

  • 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: "safeAreaPaddingChange"
    • callback: ((padding: { left: number; top: number; right: number; bottom: number }) => void)
        • (padding: { left: number; top: number; right: number; bottom: number }): void
        • Parameters

          • padding: { left: number; top: number; right: number; bottom: number }
            • left: number
            • top: number
            • right: number
            • bottom: number

          Returns void

    Returns void

  • Parameters

    • eventName: "dismissComplete"
    • callback: (() => void)
        • (): void
        • Returns void

    Returns void

  • Parameters

    • eventName: "dismissStart"
    • callback: (() => void)
        • (): void
        • Returns void

    Returns void

  • Parameters

    • eventName: "dismissCancel"
    • callback: (() => void)
        • (): void
        • Returns void

    Returns void

  • Parameters

    • eventName: "hide"
    • callback: (() => void)
        • (): void
        • Returns void

    Returns void

  • Parameters

    • eventName: "load"
    • callback: (() => void)
        • (): void
        • Returns void

    Returns void

  • Parameters

    • eventName: "show"
    • callback: (() => void)
        • (): void
        • Returns void

    Returns void

  • Parameters

    Returns void

  • Parameters

    • eventName: "load" | "show" | "hide" | "dismissComplete" | "dismissStart" | "dismissCancel" | "orientationChange" | "safeAreaPaddingChange"
    • callback: ((...args: any[]) => void)
        • (...args: any[]): void
        • Parameters

          • Rest ...args: any[]

          Returns void

    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: "safeAreaPaddingChange"
    • callback: ((padding: { left: number; top: number; right: number; bottom: number }) => void)
        • (padding: { left: number; top: number; right: number; bottom: number }): void
        • Parameters

          • padding: { left: number; top: number; right: number; bottom: number }
            • left: number
            • top: number
            • right: number
            • bottom: number

          Returns void

    Returns void

  • Parameters

    • eventName: "dismissComplete"
    • callback: (() => void)
        • (): void
        • Returns void

    Returns void

  • Parameters

    • eventName: "dismissStart"
    • callback: (() => void)
        • (): void
        • Returns void

    Returns void

  • Parameters

    • eventName: "dismissCancel"
    • callback: (() => void)
        • (): void
        • Returns void

    Returns void

  • Parameters

    • eventName: "hide"
    • callback: (() => void)
        • (): void
        • Returns void

    Returns void

  • Parameters

    • eventName: "load"
    • callback: (() => void)
        • (): void
        • Returns void

    Returns void

  • Parameters

    • eventName: "show"
    • callback: (() => void)
        • (): void
        • Returns void

    Returns void

  • Parameters

    Returns void

  • Parameters

    • eventName: "load" | "show" | "hide" | "dismissComplete" | "dismissStart" | "dismissCancel" | "orientationChange" | "safeAreaPaddingChange"
    • callback: ((...args: any[]) => void)
        • (...args: any[]): void
        • Parameters

          • Rest ...args: any[]

          Returns void

    Returns void

Events

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

Generated using TypeDoc