AlertDialog

Extends Popup

An AlertDialog represents a native dialog pop-up showing a message and up to three buttons. Is automatically disposed when closed.

Import this type with “const {AlertDialog} = require('tabris');

Properties

buttons

Type: {ok?: string, cancel?: string, neutral?: string}

An object with the texts of the buttons to display. There are up to three buttons: ok, cancel and neutral. If no text is given for a button it will not be displayed. Example: {ok: 'Yes', cancel: 'No'} shows ‘Yes’ and ‘No’, but no ‘neutral’ button.

message

Type: string

The message to display inside the dialog.

textInputs

Type: TextInput[]

A list of TextInput widgets to be displayed alongside the title and message. The text values inserted by the user can be read in the dialogs close event from the respective TextInputs. Eg.: dialog.on('close', (e) => e.target.textInputs[0].text)

title

Type: string

The title of the dialog.

Events

buttonsChanged

Fired when the buttons property has changed.

Event Parameters

  • target: this The widget the event was fired on.

  • value: {ok?: string, cancel?: string, neutral?: string} The new value of buttons.

close

Fired when the dialog was closed for any reason.

Event Parameters

  • target: this The widget the event was fired on.

  • button: ‘ok’|‘cancel’|‘neutral’|’’ The type of button that was used to close the dialog. Can also be an empty string, e.g. when the global back button was pressed.

closeCancel

Fired when the dialog was closed by pressing the ‘cancel’ button.

closeNeutral

Fired when the dialog was closed by pressing the ‘neutral’ button.

closeOk

Fired when the dialog was closed by pressing the ‘ok’ button.

messageChanged

Fired when the message property has changed.

Event Parameters

  • target: this The widget the event was fired on.

  • value: string The new value of message.

textInputsChanged

Fired when the textInputs property has changed.

Event Parameters

  • target: this The widget the event was fired on.

  • value: TextInput[] The new value of textInputs.

titleChanged

Fired when the title property has changed.

Event Parameters

  • target: this The widget the event was fired on.

  • value: string The new value of title.

Example

const {AlertDialog, Button, TextInput, ui} = require('tabris');

// AlertDialog example

new Button({
  left: 16, top: 'prev() 16', right: 16,
  text: 'Show simple dialog'
}).on('select', () => {
  new AlertDialog({
    title: 'Comment saved',
    buttons: {ok: 'Acknowledge'}
  }).open();
}).appendTo(ui.contentView);

new Button({
  left: 16, top: 'prev() 16', right: 16,
  text: 'Show full featured dialog'
}).on('select', () => {
  new AlertDialog({
    title: 'Conflict while saving',
    message: 'How do you want to resolve the conflict?',
    buttons: {
      ok: 'Replace',
      cancel: 'Discard',
      neutral: 'Keep editing'
    }
  }).on({
    closeOk: () => console.log('Replace'),
    closeNeutral: () => console.log('Keep editing'),
    closeCancel: () => console.log('Discard'),
    close: ({button}) => console.log('Dialog closed: ' + button)
  }).open();
}).appendTo(ui.contentView);

new Button({
  left: 16, top: 'prev() 16', right: 16,
  text: 'Show self closing dialog'
}).on('select', () => {
  let alertDialog = new AlertDialog({
    message: 'This dialogs closes in 3 seconds.',
    buttons: {ok: 'OK'}
  }).open();
  setTimeout(() => alertDialog.close(), 3000);
}).appendTo(ui.contentView);

new Button({
  left: 16, top: 'prev() 16', right: 16,
  text: 'Show text input dialog'
}).on('select', () => new AlertDialog({
  title: 'Sign-in required',
  message: 'Provide sign-in credentials to access your personalized content.',
  buttons: {ok: 'Sign-in', cancel: 'Cancel'},
  textInputs: [new TextInput({message: 'Username'}), new TextInput({message: 'Password', type: 'password'})]
}).on('close', ({target: dialog}) => console.log(`Input: ${dialog.textInputs[0].text} / ${dialog.textInputs[1].text}`))
  .open())
  .appendTo(ui.contentView);

See also