Dialog

API Reference: UI.Dialog

Dialog is a fullscreen layout to display things like activity indicator and etc.

TypeScript code blocks includes example of how to implement, override & add components with theme. Create page with UI-Editor to make your page themeable and then able to implement themeable components programmatically. Once page created with UI-Editor, it generates class under scripts/generated/pages. Extend that class with below typescript classes.

TypeScript
JavaScript
TypeScript
import PageSampleDesign from 'generated/pages/pageSample';
import FlexLayout = require('sf-core/ui/flexlayout');
import Application = require('sf-core/application');
import System = require("sf-core/device/system");
import Dialog = require("sf-core/ui/dialog");
import ActivityIndicator = require('sf-core/ui/activityindicator');
//You should create new Page from UI-Editor and extend with it.
export default class Sample extends PageSampleDesign {
myDialog: Dialog;
myActivityIndicator: ActivityIndicator:
constructor() {
super();
// Overrides super.onShow method
this.onShow = onShow.bind(this, this.onShow.bind(this));
// Overrides super.onLoad method
this.onLoad = onLoad.bind(this, this.onLoad.bind(this));
this.layout.flexDirection = FlexLayout.FlexDirection.ROW;
this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
this.layout.alignItems = FlexLayout.AlignItems.CENTER;
}
}
/**
* @event onShow
* This event is called when a page appears on the screen (everytime).
* @param {function} superOnShow super onShow function
* @param {Object} parameters passed from Router.go function
*/
function onShow(superOnShow: () => void) {
const { headerBar } = System.OS === "Android" ? this : this.parentController;
superOnShow();
Application.statusBar.visible = false;
headerBar.visible = false;
}
/**
* @event onLoad
* This event is called once when page is created.
* @param {function} superOnLoad super onLoad function
*/
function onLoad(superOnLoad: () => void) {
superOnLoad();
this.myDialog = new Dialog({
android: {
themeStyle: Dialog.Android.Style.ThemeNoHeaderBar // Show StatusBar
}
});
this.myDialog.layout.alignItems = FlexLayout.AlignItems.CENTER;
this.myDialog.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
this.myActivityIndicator = new ActivityIndicator();
this.myDialog.layout.addChild(this.myActivityIndicator);
this.myDialog.layout.applyLayout();
this.myDialog.show();
}
JavaScript
const extend = require("js-base/core/extend");
const Dialog = require("sf-core/ui/dialog");
const FlexLayout = require("sf-core/ui/flexlayout");
const ActivityIndicator = require('sf-core/ui/activityindicator');
var Page = require("sf-core/ui/page");
const Page1 = extend(Page)(
function(_super) {
var self = this;
_super(self);
this.onShow = function() {
Application.statusBar.visible = false;
this.headerBar.visible = false;
var myDialog = new Dialog({
android: {
themeStyle: Dialog.Android.Style.ThemeNoHeaderBar // Show StatusBar
}
});
myDialog.layout.alignItems = FlexLayout.AlignItems.CENTER;
myDialog.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
var myActivityIndicator = new ActivityIndicator();
myDialog.layout.addChild(myActivityIndicator);
myDialog.layout.applyLayout();
myDialog.show();
}.bind(this);
});
module.exports = Page1;