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.
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.
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, ui} = require('tabris');
// AlertDialog example
new Button({
left: 16, top: 'prev() 16', right: 16,
text: 'Show simple dialog'
}).on('select', () => {
new AlertDialog({
message: 'Your comment has been 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);
