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;
​
​​​
DatePicker
EmailComposer
Last updated 4 months ago