Titanium.UI.AlertDialog

> Titanium.UI.AlertDialog

An alert dialog is a modal view that includes an optional title, a message and buttons, positioned in the middle of the display.

An alert dialog is created using Titanium.UI.createAlertDialog or <AlertDialog> Alloy element.

Although this dialog always appears in the middle of the display (not touching the edges), other aspects of its aesthetics and the way the user interacts with it are different for each platform, as described below.

Android

On Android, the default alert dialog displays text information, via a title and message, without any buttons. As the user can use the system hardware back button to dismiss it, a button is optional.

Buttons are shown if the buttonNames property is defined, and are rendered horizontally below the message.

To create a custom layout, a view may be added and, in turn, a hierarchy of views added to that child view.

iOS

On iOS, the default alert dialog displays text information, via a title and message, with a single button to allow it to be dismissed.

Buttons are defined using the buttonNames property and are rendered vertically below the message.

On iOS 4.0 and later, alert dialogs are automatically cancelled when the application is paused/suspended. This behavior can avoided by setting persistent property on alert dialog to be true.

On iOS 5.0 and later, style property can be used to allow the user to enter plain text, obscured text or login identifier and password. Entered values can be captured with listening cancel event.

Global Alias

A global method alert() is aliased to this object, and can be invoked with a single message. For example

alert('this is a message');

This will generate an alert with a title of "Alert" and an "OK" button.

Caveats

Multiple alerts should not be shown at once.

The title and ok properties cannot be changed while the alert dialog is being displayed. On Android only, you can change the message property while the alert dialog is being displayed.

Examples

Single-button Alert Dialog (using alias)

Create a single-button alert dialog using the global alert() alias.

Ti.UI.setBackgroundColor('white');
var win = Ti.UI.createWindow({  
  title: 'Click window to test',
  backgroundColor: 'white',
  exitOnClose: true,
  fullscreen: false
});

win.addEventListener('click', function(e){
  alert('The file has been deleted');
});
win.open();

Single-button Alert Dialog (standard)

Create a single-button alert dialog, without explicitly defining it using the buttonNames property, which is invoked when the app window is clicked.

Ti.UI.setBackgroundColor('white');
var win = Ti.UI.createWindow({  
  title: 'Click window to test',
  backgroundColor: 'white',
exitOnClose: true,
fullscreen: false
});

win.addEventListener('click', function(e){
  var dialog = Ti.UI.createAlertDialog({
    message: 'The file has been deleted',
    ok: 'Okay',
    title: 'File Deleted'
  }).show();
});
win.open();

Three-button Alert Dialog

Create a three-button alert dialog, which is invoked when the app window is clicked. Output a message to the log when the cancel button is clicked.

Ti.UI.setBackgroundColor('white');
var win = Ti.UI.createWindow({  
  title: 'Click window to test',
  backgroundColor: 'white',
  exitOnClose: true,
  fullscreen: false
});
win.addEventListener('click', function(e){
  var dialog = Ti.UI.createAlertDialog({
    cancel: 1,
    buttonNames: ['Confirm', 'Cancel', 'Help'],
    message: 'Would you like to delete the file?',
    title: 'Delete'
  });
  dialog.addEventListener('click', function(e){
    if (e.index === e.source.cancel){
      Ti.API.info('The cancel button was clicked');
    }
    Ti.API.info('e.cancel: ' + e.cancel);
    Ti.API.info('e.source.cancel: ' + e.source.cancel);
    Ti.API.info('e.index: ' + e.index);
  });
  dialog.show();
});
win.open();

Alert Dialog with Plain Text Input (iOS 5 and later)

Create an alert dialog and allow the user enter plain text, which is invoked when the app window is clicked. Output entered text value to the log when the OK button is clicked.

Ti.UI.setBackgroundColor('white');
var win = Ti.UI.createWindow({
  title: 'Click window to test'
});
win.addEventListener('click', function(e){
  var dialog = Ti.UI.createAlertDialog({
    title: 'Enter text',
    style: Ti.UI.iPhone.AlertDialogStyle.PLAIN_TEXT_INPUT,
    buttonNames: ['OK']
  });
  dialog.addEventListener('click', function(e){
    Ti.API.info('e.text: ' + e.text);
  });
  dialog.show();
});
win.open();

Alloy XML Markup

Previous three-button alert dialog example as an Alloy view.

alertdialog.xml:

<Alloy>
    <Window id="win" onClick="showDialog" title="Click window to test" backgroundColor="white"
        exitOnClose="true" fullscreen="false" >

        <AlertDialog id="dialog" onClick="doClick" title="Delete"
            message="Would you like to delete the file?" cancel="1">

            <!-- The ButtonNames tag sets the buttonNames property. -->
            <ButtonNames>
                <ButtonName>Confirm</ButtonName>
                <ButtonName>Cancel</ButtonName>
                <ButtonName>Help</ButtonName>
            </ButtonNames>
        </AlertDialog>
    </Window>
</Alloy>

alertdialog.js:

function showDialog(){
    $.dialog.show();
};

function doClick(e){
    Ti.API.info('e.text: ' + e.text);
};

  • 0.8
  • 3.1.2
  • 0.8
  • 0.8
  • 1.8
  • 3.1
Defined By

Properties

Titanium.UI.AlertDialog
androidView : Titanium.UI.View

View to load inside the message area, to create a custom layout.

View to load inside the message area, to create a custom layout.

  • 0.8
apiName : Stringreadonly

The name of the API that this proxy corresponds to.

The name of the API that this proxy corresponds to.

The value of this property is the fully qualified name of the API. For example, Button returns Ti.UI.Button.

  • 3.2
  • 3.2
  • 3.2
  • 3.2
  • 3.2
  • 3.2
Indicates if the proxy will bubble an event to its parent. ...

Indicates if the proxy will bubble an event to its parent.

Some proxies (most commonly views) have a relationship to other proxies, often established by the add() method. For example, for a button added to a window, a click event on the button would bubble up to the window. Other common parents are table sections to their rows, table views to their sections, and scrollable views to their views. Set this property to false to disable the bubbling to the proxy's parent.

Default: true

  • 3.0
  • 3.0
  • 3.0
Titanium.UI.AlertDialog
: String[]Creation-Only
Name of each button to create. ...

Name of each button to create.

On iOS, a button will automatically be created if none are explicitly defined, because without it users would be unable to dismiss the dialog. Conversely, a dialog with no buttons may be created on Android, as the hardware back button may be used instead.

A maximum of 3 buttons is supported on Android.

Alloy applications can specify this property with a <ButtonNames> element containing one or more <ButtonName> elements (see example).

<Alloy>
    <AlertDialog id="dialog" onClick="doClick" title="Decide!" message="Do you really want to do that?" cancel="1">
        <ButtonNames>
            <ButtonName>Confirm</ButtonName>
            <ButtonName>Cancel</ButtonName>
            <ButtonName>Help</ButtonName>
        </ButtonNames>
    </AlertDialog>
</Alloy>

Default: No buttons (Android), Single "OK" button (iOS, Mobile Web)

  • 0.8
  • 0.8
  • 0.8
  • 1.8
  • 3.1
Titanium.UI.AlertDialog
: Number
Index to define the cancel button. ...

Index to define the cancel button.

On iOS and Mobile Web, set to -1 to disable the cancel option.

Default: undefined (Android), -1 (iOS, Mobile Web)

  • 0.8
  • 0.8
  • 0.8
  • 1.8
  • 3.1
Titanium.UI.AlertDialog
message : String

Dialog message.

Dialog message.

Titanium.UI.AlertDialog
messageid : String

Key identifying a string in the locale file to use for the message text.

Key identifying a string in the locale file to use for the message text.

  • 0.8
  • 0.8
  • 0.8
  • 1.8
  • 3.1
Titanium.UI.AlertDialog
ok : String

Text for the OK button.

Text for the OK button.

This property is useful when only one button is required, as it negates the need to define the buttonNames property. If buttonNames is defined, this property is ignored.

Titanium.UI.AlertDialog
okid : String

Key identifying a string in the locale file to use for the ok text.

Key identifying a string in the locale file to use for the ok text.

If buttonNames is defined, this property is ignored.

  • 0.8
  • 0.8
  • 1.8
  • 3.1
Titanium.UI.AlertDialog
: Boolean
Boolean value indicating if the alert dialog should only be cancelled by user gesture or by hide method. ...

Boolean value indicating if the alert dialog should only be cancelled by user gesture or by hide method.

This property is useful to ensure that the alert dialog will not be ignored by the user when the application is paused/suspended.

Default: false on iOS, true on Android

  • 3.0
  • 3.0
  • 3.0
Titanium.UI.AlertDialog
: Number
The style for the alert dialog. ...

The style for the alert dialog.

Style of the alert dialog, specified using one of the constants from Titanium.UI.iPhone.AlertDialogStyle. Using styles other than default one can break your dialog layout if more than two buttons used. All styles can handle up to two buttons comfortably, except for default style can handle up to six buttons when title and message is empty or not given. Note that this property available on iOS SDK 5 or above.

Default: Titanium.UI.iPhone.AlertDialogStyle.DEFAULT

  • 3.0
  • 3.0
Titanium.UI.AlertDialog
title : String

Title of the dialog.

Title of the dialog.

If not set, a dialog with no title bar will be created.

Titanium.UI.AlertDialog
titleid : String

Key identifying a string in the locale file to use for the title text.

Key identifying a string in the locale file to use for the title text.

  • 0.8
  • 0.8
  • 0.8
  • 1.8
  • 3.1
Defined By

Methods

( name, callback ) : void
Adds the specified callback as an event listener for the named event. ...

Adds the specified callback as an event listener for the named event.

Parameters

  • name : String

    Name of the event.

  • callback : Callback<Object>

    Callback function to invoke when the event is fired.

Returns

  • void
Applies the properties to the proxy. ...

Applies the properties to the proxy.

Properties are supplied as a dictionary. Each key-value pair in the object is applied to the proxy such that myproxy[key] = value.

  • 3.0
  • 3.3
  • 3.0
  • 3.0
  • 3.0
  • 3.1

Parameters

  • props : Dictionary

    A dictionary of properties to apply.

Returns

  • void
( name, event ) : void
Fires a synthesized event to any registered listeners. ...

Fires a synthesized event to any registered listeners.

Parameters

  • name : String

    Name of the event.

  • event : Dictionary

    A dictionary of keys and values to add to the Titanium.Event object sent to the listeners.

Returns

  • void
Titanium.UI.AlertDialog
( ) : Titanium.UI.View
Gets the value of the androidView property. ...

Gets the value of the androidView property.

  • 0.8

Returns

Gets the value of the apiName property. ...

Gets the value of the apiName property.

  • 3.2
  • 3.2
  • 3.2
  • 3.2
  • 3.2
  • 3.2

Returns

  • String
Gets the value of the bubbleParent property. ...

Gets the value of the bubbleParent property.

  • 3.0
  • 3.0
  • 3.0

Returns

  • Boolean
Titanium.UI.AlertDialog
( ) : String[]
Gets the value of the buttonNames property. ...

Gets the value of the buttonNames property.

  • 0.8
  • 0.8
  • 0.8
  • 1.8
  • 3.1

Returns

  • String[]
Titanium.UI.AlertDialog
( ) : Number
Gets the value of the cancel property. ...

Gets the value of the cancel property.

  • 0.8
  • 0.8
  • 0.8
  • 1.8
  • 3.1

Returns

  • Number
Titanium.UI.AlertDialog
( ) : String
Gets the value of the message property. ...

Gets the value of the message property.

Returns

  • String
Titanium.UI.AlertDialog
( ) : String
Gets the value of the ok property. ...

Gets the value of the ok property.

Returns

  • String
Titanium.UI.AlertDialog
( ) : Boolean
Gets the value of the persistent property. ...

Gets the value of the persistent property.

  • 3.0
  • 3.0
  • 3.0

Returns

  • Boolean
Titanium.UI.AlertDialog
( ) : Number
Gets the value of the style property. ...

Gets the value of the style property.

  • 3.0
  • 3.0

Returns

  • Number
Titanium.UI.AlertDialog
( ) : String
Gets the value of the title property. ...

Gets the value of the title property.

Returns

  • String
Titanium.UI.AlertDialog
( ) : void
Hides this dialog. ...

Hides this dialog.

Returns

  • void
( name, callback ) : void
Removes the specified callback as an event listener for the named event. ...

Removes the specified callback as an event listener for the named event.

Multiple listeners can be registered for the same event, so the callback parameter is used to determine which listener to remove.

When adding a listener, you must save a reference to the callback function in order to remove the listener later:

var listener = function() { Ti.API.info("Event listener called."); }
window.addEventListener('click', listener);

To remove the listener, pass in a reference to the callback function:

window.removeEventListener('click', listener);

Parameters

  • name : String

    Name of the event.

  • callback : Callback<Object>

    Callback function to remove. Must be the same function passed to addEventListener.

Returns

  • void
Titanium.UI.AlertDialog
( androidView ) : void
Sets the value of the androidView property. ...

Sets the value of the androidView property.

  • 0.8

Parameters

Returns

  • void
( bubbleParent ) : void
Sets the value of the bubbleParent property. ...

Sets the value of the bubbleParent property.

  • 3.0
  • 3.0
  • 3.0

Parameters

  • bubbleParent : Boolean

    New value for the property.

Returns

  • void
Titanium.UI.AlertDialog
( cancel ) : void
Sets the value of the cancel property. ...

Sets the value of the cancel property.

  • 0.8
  • 0.8
  • 0.8
  • 1.8
  • 3.1

Parameters

  • cancel : Number

    New value for the property.

Returns

  • void
Titanium.UI.AlertDialog
( message ) : void
Sets the value of the message property. ...

Sets the value of the message property.

Parameters

  • message : String

    New value for the property.

Returns

  • void
Titanium.UI.AlertDialog
( ok ) : void
Sets the value of the ok property. ...

Sets the value of the ok property.

Parameters

  • ok : String

    New value for the property.

Returns

  • void
Titanium.UI.AlertDialog
( persistent ) : void
Sets the value of the persistent property. ...

Sets the value of the persistent property.

  • 3.0
  • 3.0
  • 3.0

Parameters

  • persistent : Boolean

    New value for the property.

Returns

  • void
Titanium.UI.AlertDialog
( style ) : void
Sets the value of the style property. ...

Sets the value of the style property.

  • 3.0
  • 3.0

Parameters

  • style : Number

    New value for the property.

Returns

  • void
Titanium.UI.AlertDialog
( title ) : void
Sets the value of the title property. ...

Sets the value of the title property.

Parameters

  • title : String

    New value for the property.

Returns

  • void
Titanium.UI.AlertDialog
( ) : void
Shows this dialog. ...

Shows this dialog.

Returns

  • void
Defined By

Events

Titanium.UI.AlertDialog
Fired when a button in the dialog is clicked. ...

Fired when a button in the dialog is clicked.

  • 0.8
  • 0.8
  • 0.8
  • 1.8
  • 3.1

Properties