Page

API Reference: UI.Page

Basic Page

Page class stands for showing different interfaces. Pages can be considered as screens. Every page has its own lifecycle: load, show and hide. Application should have at least one page otherwise user will just see a black screen.

Page has an embedded flex layout, into which you can add views.

Please refer to the related guides for best practices of page usage and page navigation.

See also UI.Pages to see how to display a page on the screen.

JavaScript
JavaScript
const Page = require("sf-core/ui/page");
const extend = require("js-base/core/extend");
var Page1 = extend(Page)(
function(_super) {
_super(this, {
onShow: function(params) {
}
});
}
);
module.exports = Page1;

Consider this information when you create your application flow.

On iOS, onShow() function is called when page is about to show. On Android, it is called when page is shown on screen.

Origin Of Page

On Android device screen coordinates start after statusBar, the most top left; on iOS it starts the most top left.

Reveal Pages

Transitions are the animated changes between two pages, states or views to provide visual continuity to the user interface. It works like PopupPage. Use transitionId to mark related Views. Each View must be linked with uniq id.

TransitionId Linking

TransitionId of View must be set and link before onShow methods and creating instance of second page.

JavaScript
JavaScript
const Page = require("sf-core/ui/page");
const extend = require("js-base/core/extend");
const FlexLayout = require('sf-core/ui/flexlayout');
const ImageView = require('sf-core/ui/imageview');
const System = require("sf-core/device/system");
var Page3 = extend(Page)(
function(_super) {
var self = this;
_super(this, {
onShow: function(params) {},
onLoad: function() {
self.statusBar.visible = false;
self.headerBar.visible = false;
var myImageView2 = new ImageView({
flexGrow: 1,
image: "images://rickship.png",
onTouch: function() {
self.dismiss();
}
});
self.layout.addChild(myImageView2);
self.transitionViews = [myImageView2];
myImageView2.transitionId = "rick";
}
});
}
);
var Page2 = extend(Page)(
function(_super) {
var self = this;
_super(this, {
onShow: function(params) {},
onLoad: function() {
self.statusBar.visible = false;
self.headerBar.visible = false;
var myImageView = new ImageView({
flexGrow: 1,
image: "images://saturn.png",
onTouch: function() {
self.dismiss();
}
});
self.layout.addChild(myImageView);
self.transitionViews = [myImageView];
myImageView.transitionId = "saturn";
}
});
}
);
var Page1 = extend(Page)(
function(_super) {
var self = this;
_super(this, {
onShow: function(params) {},
onLoad: function() {
self.statusBar.visible = false;
self.headerBar.visible = false;
var myImageView = new ImageView({
flexGrow: 1,
width: 200,
height: 100,
image: "images://saturn.png",
onTouch: function() {
var reveal = new Page2();
self.present(reveal);
}
});
self.layout.addChild(myImageView);
var myImageView2 = new ImageView({
flexGrow: 1,
width: 200,
height: 200,
image: "images://rickship.png",
onTouch: function() {
var reveal2 = new Page3();
self.present(reveal2);
}
});
self.layout.addChild(myImageView2);
myImageView.transitionId = "saturn";
myImageView2.transitionId = "rick";
self.transitionViews = [myImageView, myImageView2];
}
});
self.layout.flexDirection = FlexLayout.FlexDirection.COLUMN;
self.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
self.layout.alignItems = FlexLayout.AlignItems.CENTER;
}
);
module.exports = Page1;

Pop-up Page

Pop-up page act like full-screen dialog. After using the pop-up page, you can dismiss the pop-up page and will return the page that used before pop-up. To use pop-up page, set modal property of route in your router. You can find an example below.

index.js
page1.js
page2.js
index.js
const OS = require('sf-core/device/system').OS;
const buildExtender = require("sf-extension-utils/lib/router/buildExtender");
const {
NativeRouter: Router,
NativeStackRouter: StackRouter,
Route
} = require("@smartface/router");
require("sf-extension-utils/lib/router/goBack");
module.exports = Router.of({
path: "/example/modal",
to: "/example/modal/page1",
routes: [
StackRouter.of({
path: "/example/modal/modalpages",
routes: [
Route.of({
path: "/example/modal/modalpages/page1",
build: buildExtender({
pageName: "page1",
pageProps: { shouldExit: true }
})
}),
StackRouter.of({
path: "/example/modal",
to: "/example/modal/modalpages",
routes: [
Route.of({
path: "/example/modal/modalpages/page2",
build: buildExtender({
pageName: "page2",
pageProps: { shouldExit: true }
})
})
],
modal: true
})
]
})
]
});
page1.js
const Application = require("sf-core/application");
const Page = require("sf-core/ui/page");
const extend = require("js-base/core/extend");
const FlexLayout = require('sf-core/ui/flexlayout');
const Color = require('sf-core/ui/color');
const Button = require('sf-core/ui/button');
var self;
var Page1 = extend(Page)(
function(_super) {
_super(this, {
onShow: function(params) {
self = this;
Application.statusBar.visible = false;
this.headerBar.visible = false;
}
});
this.layout.flexDirection = FlexLayout.FlexDirection.ROW;
this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
this.layout.alignItems = FlexLayout.AlignItems.CENTER;
var popupBtn = new Button({
width: 100,
height: 50,
text: "Pop-Up Page",
textColor:Color.BLACK,
backgroundColor: Color.create("#00A1F1"),
onPress: function() {
self.router.push("/example/modal/modalpages/page2");
}
});
this.layout.addChild(popupBtn);
}
);
module.exports = Page1;
page2.js
const FlexLayout = require("sf-core/ui/flexlayout");
const Button = require("sf-core/ui/button");
const Color = require("sf-core/ui/color");
const Application = require("sf-core/application");
const extend = require('js-base/core/extend');
const Page = require('sf-core/ui/page');
const TextArea = require('sf-core/ui/textarea');
var self;
const Page2 = extend(Page)(
function(_super){
_super(this);
self = this;
this.onShow = function() {
self.layout.flexDirection = FlexLayout.FlexDirection.COLUMN;
self.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
self.layout.alignItems = FlexLayout.AlignItems.CENTER;
self.headerBar.visible = false;
Application.statusBar.visible = false;
var myTextArea= new TextArea({
borderWidth: 1
});
myTextArea.text = "Odio aliquet magnis auctor mattis lacus eros penatibus nascetur leo," +
"purus sagittis potenti facilisis vestibulum est nullam at, litora risus ridiculus nostra placerat massa ligula ultrices. " +
"Posuere suscipit velit habitant netus quisque duis vivamus consequat, blandit torquent sociosqu mi senectus aptent quam, " +
"eleifend tempor ullamcorper cubilia a tempus habitasse. Dignissim interdum mauris convallis nisl sollicitudin in phasellus ac, " +
"montes iaculis tristique fames imperdiet bibendum urna, scelerisque vitae gravida pretium taciti malesuada enim. " +
"Himenaeos justo ut ad inceptos conubia dictumst, laoreet facilisi semper ornare et eu lobortis, varius luctus nunc non lacinia. " +
"Integer curae faucibus fermentum dictum vulputate, neque nulla parturient."
var dismiss = new Button({
width: 100,
height: 50,
text: "Dismiss",
textColor:Color.BLACK,
backgroundColor: Color.create("#00A1F1"),
onPress: function() {
self.router.dismiss();
}
});
self.layout.addChild(myTextArea);
self.layout.addChild(dismiss);
}.bind(self);
}
);
module && (module.exports = Page2);