Alerts

We think that asking something simple to the user should be simple and should shown in a way the user is used to.

So basic alerts should be shown the native way. No "pop-in" shit ;)

We added in Cobalt a way to show alerts to the users : set a title and a text, add some buttons and let see what the user wants !

Show a native alert from the Web side

cobalt.alert(title, text, buttons, options)

Use this to show a native alert to your user and to be warned when the user replies.

title : The alert title. text : the detailed alert text

Both title and text are optional, but at least one should be set. If title is undefined, the text is used as the title.

buttons : The string array of the buttons texts. Cobalt will add a button per string. 3 buttons is the max.

If you do not set any button, a solo button with text "Ok" will be added to close the alert.

options : some options to the alert.

• "callback" : the javascript function to call when alert is closed. This can be a function or a string. This function will receive a data object, containing an "index" key. This is the index of the touched button, starting at 0.

• "cancelable" : (Android only) an optional boolean that defaults to false. On iOS, alerts can only be closed by tapping on one of these buttons. On android, the user can usually close the alert by tapping into the background or pressing the "back" button. In Cobalt Android, we set the default cancelable to false so that the user can't cancel the alert like this and the behavior matches with the iOS style. But if you want to allow them to cancel with a tap in the background or with the back button, you can! just set cancelable to true.

Examples

//the ultimately simple alert with a Ok button
cobalt.alert("Text");

//title, text, changed button text and a callback
cobalt.alert("Title", "Text", ["Yes"], { callback:function(data){ cobalt.log('user clicked button #' +data.index) }});

//same with a string callback and cancelable set to true
cobalt.alert("Title", "Text", ["Ok","Cancel"], { callback:"app.popupDismissed", cancelable : true });

Under the hood

This is the message sent to native side to show an alert.

{
    type: "ui",
    control: "alert",
    data: {
        title: "myTitle",
        message: "myMessage",
        buttons: [
            "myFirstButtonText",
            "mySecondOptionalButtonText",
            ...
        ],
        cancelable: true | false
    },
    callback: "myOptionalCallback"
}