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.
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 methodthis.onShow = onShow.bind(this, this.onShow.bind(this));// Overrides super.onLoad methodthis.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();}
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;​
​​
​