An HTML Boilerplate for Phonegap

Date: 2015-06-10
Last Update: 2015-12-31

NOTICE: This tutorial will be replace before May 1, 2016. New requirements to Google Android require changes with this boilerplate. Namely, you need to use at least cli-5.1.1

Phonegap is a framework for creating mobile Apps with HTML5, CSS3, and Javascript. It has the benefit of anything that can work on the web, can done in Phonegap with a minimum of effort. In short, you can test on your webbrowser, then port the important parts to a mobile app. In addition, phonegap gives you access to the hardware on the mobile device, be it phone or tablet.

This interface is sparse and not intended to handle every situation. The intent is make you familiar with the important parts so that you can get a jump start to building mobile apps.

The code is at: https://github.com/jessemonroy650/Phonegap--Generic-Boilerplate

The Files

The two (2) most important files

  1. index.html
  2. config.xml

index.html

HTML5

If you've already developed HTML and are not familiar with HTML5, a good resource, that is mostly correct, is W3Schools. You'll find things added and things removed. Pay special attention to the elements <div> and <span>, which are considered elements of last resort, but infact are of common use. If the seems confusing, then read about the CSS block model.

The main function

The main function is in the block that starts with if (device.platform === "iOS") It changes the UI (User Interface) to

Apple's iOS iPhone, iPads, and iPodTouch. The internal links point to articles that explain the issue.

The four (4) alerts

The alerts are debugging aids. I recommend you comment them out, and never delete them. More than once, I've had to backtrack just to find a typo. The alerts were very assistive. The alerts are, from top to bottom:

  1. "button clicked." - fires when you click the button.
  2. "device ready." - fires when the Cordova/Phonegap library is ready.
  3. "got iOS" - fires only when Phonegap detects an iOS device.
  4. "body loaded." - fires when the entire webpage is loaded.

config.xml

This example for config.xml has a minimum of components. I encourage you to learn more from the docs as 1/4 of all questions asked on forums can be answered by reading the docs. I especially encourge you to read the example master template

However there are two (2) very important parts. The first is the App ID. The format of this ID is done by convention. The ID is constructed by taking a domain you own and reversing the order of the subdomains. The last subdomain, by convention, should be the name of the App. NO SPACES ARE ALLOWED

id = "com.bsdmasterindex.phonegapgeneric-test"

The second important part is the phonegap version that will be used. The "value" is not required, but if you don't assign it - phonegap will always give you the latest version of the binaries, which may break your App.

Update: 2015-12-31

<preference name="phonegap-version" value="3.5.0" /> <preference name="phonegap-version" value="cli-5.20" />

That's it. Ask questions in the forums, if you have any.