On the Seventh Day of PhoneGapping: Debugging

One of the truly horrible things about doing web application development on mobile phones is the lack of web development tools that you'd see in modern desktop web browsers. Luckily for us a couple of folks have made it a lot easier to do web dev with tools like weinre by Patrick Mueller and iWebInspector by Maximiliano Firtman. I'm going to spend my time talking about weinre not because iWebInspector isn't as good but because I spend most of my time in Android land so I'm much more familiar with weinre.

The description from the home page:

"weinre is a debugger for web pages, like FireBug (for FireFox) and Web Inspector (for WebKit-based browsers), except it's designed to work remotely, and in particular, to allow you debug web pages on a mobile device such as a phone."

Isn't that great? You can have the developer tools you are used to back in your greedy little hands again.

The weinre home page has detailed instructions on how to setup your own server, which is not that difficult, but if you are like me (i.e. lazy) there is already a server setup for you at debug.phonegap.com where getting started is only three steps away. 

On the Sixth Day of PhoneGapping: Downloading a File

Did you know that the FileTransfer object got a new download method in PhoneGap 1.3.0? You didn't, well thanks to Alexander Heinrich for spurring it's  development and getting it checked in for Android and iOS (download is also available to you BlackBerry users). Finally PhoneGap developers have a convenient way to download binary files.

The method signature is:

download(source, destination, successCallback, errorCallback);

Where the parameters are:

source: The URL you want to download
destination: The full file path you want the file stored at
successCallback: called with a FileEntry object that represents the new file
errorCallback: called when something goes wrong

So say we want to download a PNG image and store it on the SD card. Well you'd write some code that looks like this:

On the Fifth Day of PhoneGapping: Five Two Minute Tutorials

Another re-blog but there are some gems here as the folks at Mobile Development Solutions have put together 5 two minute tutorials using PhoneGap Android.

They've put together tutorials on:

1) Media Player
2) Getting your app market ready
3) Barcode Scanning
4) Google Maps
5) Twitter and OAuth

Thanks to Libby and Paul for everything they do to support the PhoneGap community.

On the Fourth Day of PhoneGapping: Creating a Database from a SQL Dump

On a slightly different track than Day 2 we are going to create a SQLiteDB from scratch using only JavaScript on startup of our application. In order to do this we are going to use the handy JavaScript library HTML5SQL.js by Ken Corbett Jr.

First we'll do a check to see if we've already created our database. If we haven't we'll do a XHR to get the SQL dump file containing all the statements we need to create and populate our tables. Finally, upon success we'll set a flag so this doesn't run every time we start our application.

and here is our sql file:


The html5sql.js lib makes working with the Web SQL specification much easier than hard coding it yourself. You owe it to yourself to look into this library as it will save you some time and hair.

On the Third Day of PhoneGapping: Getting Data from a Server

Well your application would be pretty useless if you couldn't get data from a remote server now wouldn't it? Luckily since your PhoneGap application is running off of the file:// protocol it isn't limited by the same origin policy. This means we can request data using XmlHttpRequest from any domain.

I'm going to give you an example of searching for all tweets that mention PhoneGap that demonstrates this ability without the use of any extra JavaScript library like jQuery or Dojo.



So that is the example in a nutshell. It isn't very different from your normal XHR call except for one line that I need to bring to your attention:

if (request.status == 200 || request.status == 0) {

Most of the time you are just looking for the 200 status code you also need to accept the status code of 0 as also OK. Sometimes when you are requesting data via XHR from the file:// protocol you will get a 0 status code. As I said that is perfectly normal and you should treat it as a 200 and move on with your application.

Much of the rest of this code is just building up a HTML string I can do an insert into a div I've set aside for displaying the tweets. Just wanted to show everyone how easy it is to communicate with a remote server.

On the Second Day of PhoneGapping: Copying a native database

The topic of creating a large SQLiteDB to persist data on the device comes up a lot on the Google Group. Sadly, most of the modern web browsers limit you to a maximum database size of 5 megabytes. If you really need a database bigger than that you'll need to jump through a few hoops.

Luckily a developer by the name of Gaurav S Tomar has already gone through the process of explaining how to do this in his excellent blog post:

Prepopulate SQLite DataBase in PhoneGap Application

So go check it out!

What you say? Here we are on the second day and he's already pointing us to other people's blog posts. Well I never said I was going to write the all just want to make you aware of some tricks you can use in your PhoneGap applications.

On the First Day of PhoneGapping: Get to deviceready faster on Android

This tip is courtesy of a question that Pamela Fox posted up over on the PhoneGap Google Group as she was wondering why it sometimes takes longer for the PhoneGap deviceready event to fire.

As all good PhoneGappers know you need to wait until you receive the deviceready event before you can call any of the PhoneGap API's. But, what has to happen before the deviceready event fires? Well here is breakdown of events that fire before deviceready:

1. onDOMContentLoaded Internal event that is received when the web page is loaded and parsed.
2. window.onload Body onload event.
3. onNativeReady Internal event that indicates the PhoneGap native side is ready.
4. onPhoneGapInit Internal event that kicks off creation of all PhoneGap JavaScript objects (runs constructors).
5. onPhoneGapReady Internal event fired when all PhoneGap JavaScript objects have been created
6. onPhoneGapInfoReady Internal event fired when device properties are available
7. onPhoneGapConnectionReady Internal event fired when the connection property has been set.
8. onDeviceReady User event fired to indicate that PhoneGap is ready

That may seem like a lot but you don't have to worry about it as you can't speed up the process any. That is, except in one area. The onNativeReady event does not fire until the the onPageFinished method gets called on the Android WebViewClient.

So anything you do that increases the amount of time before the web view understands the page is completely loaded will keep you from getting to deviceready. For instance if you are doing a lot of things  in the window.onload method it will delay deviceready. In Pamela's particular instance she was doing an XmlHttpRequest in the onload method which delayed things.

The fix and the tip in this case is to move as many things from your onload event handler to your deviceready event handler.