Informing your users with dialogs and alerts

There are a number of dialogs available for you to use in the Titanium API, but for the purposes of this recipe, we'll be concentrating on the two main ones: alert dialog and option dialog. These two simple components perform two similar roles, but with a key difference. The alert dialog is normally used only to show the user a message, while the option dialog asks the user a question and can accept a response in the form of a number of options. Generally, an alert dialog only allows a maximum of two responses from the user, whereas the option dialog can contain many more.

There are also key differences in the layout of these two dialog components, which will become obvious in the following recipe.

How to do it…

First, we'll create an alert dialog that simply notifies the user of an action that can not be completed due to missing information. In our case, that they have not provided a value for the loan amount in tfAmount TextField. Add the following code to the calculateAndDisplayValue() function, just under the initial console.log command:

if (tfAmount.value === '' || tfAmount.value === null) 
{
    var errorDialog = Ti.UI.createAlertDialog({
      title: 'Error!',
      message: 'You must provide a loan amount.'
    });
    errorDialog.show();
return;
}

Now let's add the option dialog. This is going to display the result from our calculation and then give the user the choice of viewing the results as a pie chart (in a new window), or of canceling and staying on the same screen.

We need to add a couple of lines of code to define the optionsMessage variable that will be used in the option dialog, so add this code below the line calculating totalRepayments:

console.log('Total repayments = ' + totalRepayments) :
var optionsMessage = "Total repayments on this loan equates to $" + totalRepayments;

Then add the following code just below the line of code defining totalInterest:

console.log('Total interest = ' + totalInterest) :
var optionsMessage = "Total interest on this loan equates to $" + totalInterest;

Finally, at the end of the function, add this code:

//check our win2 autoShowChart boolean value first (coming //from the switch on window2.js)
if (win2.autoShowChart == true) {
   // openChartWindow();
 }
 else {
  var resultOptionDialog = Ti.UI.createOptionDialog({
        title: optionsMessage + '\n\nDo you want to 
                  view this in a chart?',
        options: ['Okay', 'No'],
        cancel: 1
  });
  
  //add the click event listener to the option dialog
  resultOptionDialog.addEventListener('click', function(e){
    console.log('Button index tapped was: ' + e.index);
    if (e.index == 0) 
      {
       // openChartWindow();
    }
  });
      
  resultOptionDialog.show();

} //end if

How it works...

The alert dialog, in particular, is a very simple component that simply presents the user with a message as a modal, and it has only one possible response, which closes the alert. Note that you should be careful not to call an alert dialog more than once while a pending alert is still visible, for example, if you're calling that alert from within a loop.

The option dialog is a much larger modal component that presents a series of buttons with a message at the bottom of the screen. It is generally used to allow the user to pick more than one item from a selection. In our code, resultOptionDialog presents the user with a choice of two options—Okay and No. One interesting property of this dialog is Cancel, which dismisses the dialog without firing the click event, and also styles the button at the requested index in a manner that differentiates it from the rest of the group of buttons.

Note that we've commented out the openChartWindow() function because we haven't created it yet. We'll be doing that in the next recipe.

Just like the Window object, both of these dialogs are not added to another View, but are presented by calling the show() method instead. You should call the show() method only after the dialog has been properly instantiated and any event listeners have been created.

The following images show the difference between the alert dialog and the option dialog:

There's more...

You can also create a predefined alert dialog using basic JavaScript, by using the alert('Hello world!'); syntax. Be aware, however, that you only have control over the contents of the messages that use this method, and the title of your alertdialog will always be set to Alert.