(Project File) Structure

• Within www
  • HTML: index.html
  • Javascript: js/index.js
  • Cascading Style Sheets: css/index.css
  • images: img
• you may decide to use a plug-in later in the course and may have to customize config.xml.

Good list of commands – all of which are actually command line arguments to the phonegap command:
$ phonegap platform add android

platform	add, remove, list, update
plugin	search, add, remove, list
build	prepare, then compile
emulate
serve

A note on notation:

• <angles> required value
• [squares] optional value(s) - often one of a recognized set
• v1 | v2 exactly one of the listed values (this is an OR)

• In cs 130, onclick for a button code: <button id="myBtn" type="button" onclick="doStuff();">Click me</button>
  Click me
• This way is more roundabout:

  <button id="myBtn" type="button">Click me</button>
  <script>
   function dostuff() { … }
   document.getElementById("myBtn").addEventListener("click", doStuff);
  </script>
  Click me
  
  

• You can add multiple listeners to the same element
  see https://www.w3schools.com/js/js_htmldom_eventlistener.asp
  and https://www.w3schools.com/jsref/met_document_addeventlistener.as
• remove them whenever you want with removeEventListener.
• Key mobile app events: deviceready (this should always be your starting point), online, offline, pause, resume, & backbutton.

Phonegap's Javascript code

<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

 <script type="text/javascript" src="cordova.js"></script>

<script type="text/javascript" >
        document.addEventListener('deviceready', letsGO, false);
	function letsGO() {
		// startup Code here
	}
</script>

Another way the inclusion of deviceready can be done is via the index.js code that is created for new projects using Phonegap desktop.

Open up the js folder and find index.js
Note the code that declares the object app. it contains functions initialize, bindEvents, onDeviceReady, and received Event:

var app = {
    initialize: function() {
        this.bindEvents();
    },
    // Bind any events that are required on startup. Common events are:
    // 'load', 'deviceready', 'offline', and 'online'.
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    // deviceready Event Handler
    //
    // The scope of 'this' is the event. In order to call the 'receivedEvent'
    // function, we must explicitly call 'app.receivedEvent(...);'
    onDeviceReady: function() {
        app.receivedEvent('deviceready');
    },
    // Update DOM on a Received Event
    receivedEvent: function(id) {
		console.log('Received Event: ' + id);
    } 
};

• Carefully read the comment prior to onDeviceReady
• Note that the object is called app
• Note that Phonegap's code has a div for class app:

  <div class="app">
  

• Note that Phonegap's code has a div named devicready

  <div id="deviceready">
  

• and then in javascript calls app.initialize

  <script type="text/javascript">
      app.initialize();
  </script>
  

Let's try some coding

• declares a var numhours and sets it to 11
• declares a var x and sets it to 20
• alert the message "hello from testit"
• Check if numhours is 12 or larger. If it is document.write "Good Afternoon" otherwise document.write "Good Morning"

• Pick you browser and try debugging!
• You will find video demos on YouTube.
• It is worth becoming familiar with debugging in a browser
• I suggest Chrome
• Note the Workflow section.
• Workflow suggestion
  1. Create the html and javascript in HTML-Kit
  2. Test the code in Chrome
  3. When testing, select closest device type
  4. Debug in Chrome
  5. Make and save changes in HTML-Kit
  6. Test in PhoneGap app on actual device
  7. DEBUG again

The Desktop version takes care of the commands. PhoneGap Build does even more… You just upload the individual (custom) assets and it does the rest.