An HTML Boilerplate for Phonegap

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.

CODE: https://github.com/jessemonroy650/Phonegap–Generic-Boilerplate

The 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 Files

  • pg_generic_boilerplateAndroidManifest.xml – not required, but somtimes helpful when building for Android
  • buttons.css – not required, CSS buttons from Alex Wolf and Rob Levin
  • config.xml – required for phonegap, documentation master template
  • favicon-48×48.png – The image in the top left of the App.
  • index.html – required, The view and code in one file.
  • LICENSE & README.md – License for the code & the README for the repository.

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 seem confusing, the 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. More than once, I’ve had to backtrack just to find a typo. The alerts were very assistive.

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

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.

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

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

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s