Beep Vibrate and Alert

PhoneGap makes beep, vibrate, and alert functions so simple that I'm going to lump them together into one example. Specifically, we'll set up the app to beep, vibrate, and display a custom alert when the user creates an entry that puts him over his daily calorie budget. To do so, add the following function to the end of the kilo.js located in the ~/Desktop/KiloGap/assets/www/ directory:

function checkBudget() {

var currentDate = sessionStorage.currentDate; var dailyBudget = localStorage.budget; db.transaction(Q

function(transaction) { transaction.executeSql(

'SELECT SUM(calories) AS currentTotal FROM entries WHERE date = ?;',0 [currentDate], ©

function (transaction, result) {

var currentTotal = result.rows.item(0).currentTotal; if (currentTotal > dailyBudget) {

var overage = currentTotal - dailyBudget;©

var message = 'You are '+overage+' calories over your'

navigator.notification.beep(l); navigator.notification.vibrate(); } catch(e){

// No equivalent in web app

navigator.notification.alert(message, 'Over Budget', 'Dang!'); } catch(e) {


}, errorHandler©

Here's the blow-by-blow description:

O This is the beginning of the checkBudget() function. It initializes the currentDate variable to the value stored in sessionStorage (i.e., the value entered by the user in the Settings panel) and sets the dailyBudget variable to the value stored in localStorage (i.e., the date the user taps on the Dates panel).

© Start a database transaction in preparation for calculating the total calories for the current date.

© Run the executeSql() method of the transaction object. Let's examine the four parameters of the executeSql() method:

O The first parameter is a prepared SQL statement that uses the SUM function to add up all the values in the calories column for the entries that match the current date.

© The second parameter is a single-value array that will replace the question mark in the prepared statement on the previous line.

© The third parameter is an anonymous function that will be called if the SQL query completes successfully (we'll look at this in detail momentarily).

Here's what's going on in the anonymous function that was passed in as the third parameter:

Q This line grabs the current total from the first row of the result. Since we are just asking for the sum of a column, the database is only going to return one row (i.e., this query will always return one row). Remember that the records of the result set are accessed with the item() method of the rows property of the result object, and that the rows are zero-based (meaning that the first row is 0).

O Check to see if the current calorie total for the day is greater than the daily budget specified on the Settings panel. If so, the block that follows will be executed.

© Calculate how far the user is over his calorie budget.

© Compose a message to display to the user.

(D This is a try/catch block that attempts to call the beep(1) and vibrate() methods of the navigator notification object. These methods only exist in PhoneGap, so if the user is running the app in a browser, these methods will fail and execution will jump to the catch block. Since there is no browser-based equivalent to beep or vibrate, the catch block has been left empty.

© This is a try/catch block that attempts to call the alert() method of the navigator notification object. This method only exists in PhoneGap, so if the user is running the app in a browser, it will fail and execution will jump to the catch block. The browser-based equivalent to alert is a standard JavaScript alert, which is called as a fallback.

There are a couple of differences between the PhoneGap alert and the native JavaScript alert. For example, the PhoneGap alert allows you to control the title and the button name (Figure 7-16); the JavaScript alert does not (Figure 7-17).

There is also a more subtle difference between the two alerts: the native JavaScript alert is modal and the PhoneGap alert is not. In other words, script execution will pause at the point when you call a native alert, whereas execution will continue with the PhoneGap version. This may or may not be a big deal depending on the nature of your application, so keep this distinction in mind.

© The fourth parameter is the name of the generic SQL error handler that will be called in the event of a SQL error.

With our checkBudget() function complete, we can now call it by adding a single line to the success callback of our createEntry() function:

function createEntry() {

var date = sessionStorage.currentDate; var calories = $('#calories').val(); var food = $('#food').val(); db.transaction(

function(transaction) { transaction.executeSql(

'INSERT INTO entries (date, calories, food) VALUES (?, ?, ?);', [date, calories, food], function(){ refreshEntries(); checkBudget(); jQT.goBack();

}, errorHandler

return false;

After you've made these changes, save the kilo.js file, open up a command line (see "Using the Command Line" on page 110) and run the following commands to recompile and install it on your phone (change -d to -e if you'd like to use the emulator instead):

ant debug adb -d install -r ~/Desktop/KiloGap/bin/Kilo-debug.apk

Figure 7-16. The PhoneGap alert allows you to specify the title and button label

Figure 7-17. A native JavaScript alert does not allow you to specify the title and button label

0 0

Post a comment