Introduction CIS 136 Building Mobile Apps 1

What did we do Software review 2

Installations 3  Node.js – package installer - downloaded, unzipped, installed Verified installation via CMD line Interface (CLI) > npm -v  Brackets – editor - downloaded, unzipped, installed  Phonegap Desktop – app creator - downloaded, unzipped, found.exe and ran (no installation)  Phonegap  Installed using Node.js via CMD line Interface (CLI) > npm install – g phonegap  Verified installation via CMD line Interface (CLI) > phonegap –v  Phonegap Developer App – emulator for Android phones –downloaded from play store and installed on phone

Scaffolding Understanding the folders and files 4

Scaffolding 5 .cordova (optional)  cli hooks (like before_build, after_plugin_add, etc)  hooks (replaces.cordova)  pieces of code that Cordova CLI executes at certain points in your PhoneGap application build  platforms  Where the platform’s build file will be located, if building manually  plug-ins  Phonegap libraries providing device interface  config.xml  Needed to build the app file – lists plugins and other aspects of app

Scaffolding 6  All work is done in the www folder  css  Style sheets for app and jQuery mobile  img  Image files  js  Jquery libraries and scripts  res  Splash screen and icons  spec  Jasmine unit testing framework www folder

CMD line Create, deploy, build 7

CMD line – Create app 8  Phonegap Desktop is an easy way to create an app and start the testing emulator (Phonegap Developer)  Can create app using CMD window > phonegap create >phonegap create myproject com.elcamino.myproject MyProject myproject – will become name of app’s folder com.elcamino.myproject – added into config.xml file in widget tags, as ID attribute MyProject – added into config.xml file, inside tag Note: do not use spaces in app names

Phonegap Developer App 9  Starts a phonegap server  3 finger tap –home page  4 finger tap – refresh  Can also start a phonegap server using CMD window > phonegap serve  this will return an IP address that you can use in the Phonegap Developer app

Dialoging Beep, Alert, prompt, confirm 10

Dialoging 11  Phonegap API provides ways to communicate with the user, using same approach as in traditional web design  Alert window  Prompt window  Confirm window  The dialog plugin provides access to these native dialog UI elements  Plugin name: org.apache.cordova.dialog

Dialoging 12  Before accessing native features using the Phonegap API, must ensure that the phonegap container has finished initializing  Use event listeners, and listen for when the device is ready document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { }

Plugin methods 13  Four methods:  navigator.notification.alert  navigator.notification.confirm  navigator.notification.prompt  navigator.notification.beep

Beep method 14  SYNTAX navigator.notification.beep(times); times: The number of times to repeat the beep. (Number)

Alert method – shows and alert dialog box 15 SYNTAX: navigator.notification.alert(message, alertCallback, [title], [buttonName]) message: Dialog message. (String) alertCallback: Callback to invoke when alert dialog is dismissed. (Function) title: Dialog title. (String) (Optional, defaults to Alert) buttonName: Button name. (String) (Optional, defaults to OK) document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { navigator.notification.alert("hello monica", alertDismissed); function alertDismissed() { }

Confirm method 16  SYNTAX navigator.notification.confirm(message, confirmCallback, [title], [buttonLabels]) message: Dialog message. (String) confirmCallback: Callback to invoke with index of button pressed (1, 2, or 3) or when the dialog is dismissed without a button press (0). (Function) title: Dialog title. (String) (Optional, defaults to Confirm) buttonLabels: Array of strings specifying button labels. (Array) (Optional, defaults to [OK,Cancel])  confirmCallback executes when the user pressesone of the buttons in the confirmation dialog box

17

Prompt method 18  SYNTAX  navigator.notification.prompt(message, promptCallback, [title], [buttonLabels], [defaultText]) message: Dialog message. (String) promptCallback: Callback to invoke with index of button pressed (1, 2, or 3) or when the dialog is dismissed without a button press (0). (Function) title: Dialog title (String) (Optional, defaults to Prompt) buttonLabels: Array of strings specifying button labels (Array) (Optional, defaults to ["OK","Cancel"]) defaultText: Default textbox input value (String) (Optional, Default: empty string)  promptCallback executes when the user presses one of the buttons in the dialog box

19 The promptCallback executes when the user presses one of the buttons in the prompt dialog box. The results object passed to the callback contains the following properties: buttonIndex: The index of the pressed button. (Number) Note that the index uses one-based indexing, so the value is 1, 2, 3, etc. input1: The text entered in the prompt dialog box. (String)