Skip to main content
Version: 7.2.1

Dialog

API Reference: UI.Dialog

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

note

The components in the example are added from the code for better showcase purposes. To learn more about the subject you can refer to:

Adding Component From Code

As a best practice, Smartface recommends using the WYSIWYG editor in order to add components and styles to your page or library. To learn how to use UI Editor better, please refer to this documentation

UI Editor Basics
import PageSampleDesign from 'generated/pages/pageSample';
import FlexLayout from '@smartface/native/ui/flexlayout';
import Application from '@smartface/native/application';
import Dialog from '@smartface/native/ui/dialog';
import ActivityIndicator from '@smartface/native/ui/activityindicator';
import { Route, Router } from '@smartface/router';
import { styleableComponentMixin } from "@smartface/styling-context";
import { withDismissAndBackButton } from '@smartface/mixins';

class StyleableActivityIndicator extends styleableComponentMixin(ActivityIndicator) {}

//You should create new Page from UI-Editor and extend with it.
export default class Sample extends withDismissAndBackButton(PageSampleDesign) {
  myDialog: Dialog;
  myActivityIndicator: StyleableActivityIndicator;
  constructor(private router?: Router, private route?: Route) {
    super({});
  }
  
  onShow() {
    super.onShow();
    Application.statusBar.visible = false;
    this.headerBar.visible = false;
  }

  onLoad() {
    super.onLoad();
    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 StyleableActivityIndicator();
    this.myDialog.layout.addChild(this.myActivityIndicator);

    this.myDialog.show();
  }
}

When to Use Dialog​

When not to use dialog:

  • For simple actions like "yes" and "no", alert is better
  • For selecting something as pop-up, menu is better
  • For selecting date, datepicker is better
  • For selecting other stuff, picker is better

When to use dialog:

  • If you need a screen wide indicator
  • If you don't like the native components and want to use custom alert or picker etc., you should use dialog and design your component on top of it.
  • If you need to blur out the screen without changing anything, dialog is a strong alternative
caution

Dialog is mainly used for rendering custom components on top of the page and should only be used if alert or menu cannot be used.

Custom Dialog Component​

note

The components in the example are added from the code for better showcase purposes. To learn more about the subject you can refer to:

Adding Component From Code

As a best practice, Smartface recommends using the WYSIWYG editor in order to add components and styles to your page or library. To learn how to use UI Editor better, please refer to this documentation

UI Editor Basics
/scripts/lib/dialog.ts

import Dialog from '@smartface/native/ui/dialog';
import FlDialog from 'components/FlDialog';
import { themeService } from 'theme';
import FlexLayout from '@smartface/native/ui/flexlayout';

var waitDialog = null;
var activeDialogCounter = 0;

function initWaitDialog() {
  let dialog = new Dialog({
    android: {
      themeStyle: Dialog.Android.Style.ThemeNoHeaderBar,
      cancelable: false
    }
  }) as StyleContextComponentType<Dialog>;
  const component = new FlDialog();
  themeService.addGlobalComponent(component, 'flDialog');
  themeService.addGlobalComponent(dialog.layout, 'dialog');
  (dialog.layout as StyleContextComponentType<FlexLayout>).dispatch({
    type: 'pushClassNames',
    classNames: '.dialog'
  });
  dialog.android.isTransparent = false;
  component.onTouch = () => {
    return true;
  };
  //@ts-ignore
  dialog.layout.addChild(component, 'waitDialogComp');
  return dialog;
}

export const showWaitDialog = () => {
  if (!waitDialog) {
    waitDialog = initWaitDialog();
  }
  activeDialogCounter++ === 0 && waitDialog.show();
};

export const hideWaitDialog = (timeout = 0) => {
  if (waitDialog && activeDialogCounter > 0 && --activeDialogCounter === 0) {
    if (timeout) {
      setTimeout(() => waitDialog.hide(), timeout);
    } else {
      waitDialog.hide();
    }
  }
};
tip

For another usage. You can change your Dialog UI based on upper code example. Just remove buttons and text, and place your UI elements what ever you want.

Screenshots