Book Image

Appcelerator Titanium Smartphone App Development Cookbook

By : Boydlee Pollentine, Jason Kneen, Jason Kneen
Book Image

Appcelerator Titanium Smartphone App Development Cookbook

By: Boydlee Pollentine, Jason Kneen, Jason Kneen

Overview of this book

This book will take you through the process of building cross-platform, native UI applications for the mobile from scratch. You will learn how to develop apps, how to use GPS, cameras and photos and how to build socially connected apps. You will also learn how to package them for submission to the App Store and Google Play. This cookbook takes a pragmatic approach to creating applications in JavaScript from putting together basic UIs, to handling events and implementation of third party services such as Twitter, Facebook and Push notifications. The book shows you how to integrate datasources and server APIs, and how to use local databases. The topics covered will guide you to use Appcelerator Studio tools for all the mobile features such as Geolocation, Accelerometer, animation and more. You’ll also learn about Alloy, the Appcelerator MVC framework for rapid app development, and how to transfer data between applications using URLSchemes, enabling other developers to access and launch specific parts of your app. Finally, you will learn how to register developer accounts and publish your very own applications on the App Store and Google Play.
Table of Contents (21 chapters)
Appcelerator Titanium Smartphone App Development Cookbook Second Edition
About the Author
About the Reviewers

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.'

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();

} //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.