Telling your user that a PhoneGap application is busy

Plenty of times in applications, especially on mobile devices, you just need to tell your users to hold their horses and wait while your application processes something in the background.  Maybe you need to query some data from a remote server, save a file to disk, or maybe you just need to do some number crunching.  Whatever the reason, you don’t want your user to think the program has crashed if you don’t give them some sort of visual feedback that you’re busy and they just have to wait a few seconds.

PhoneGap provides a few methods to handle just this task. There’s four methods within the Notification class that are of interest.

  1. navigator.notification.loadingStart()
  2. navigator.notification.loadingStop()
  3. navigator.notification.activityStart()
  4. navigator.notification.activityStop()

Modal loading messages

Modal loading indicator
Modal loading indicator

The easiest approach to take when making your users wait is to show a modal loading dialog, one that doesn’t let the user interact with the application until you’re done.  There’s a lot less for you, as a developer, to manage when the user isn’t allowed to poke around on buttons when you’re updating the display.  Asynchronous operations are a lot simpler when you’re in control.

The loadingStart() and loadingStop() methods do just this.  They put up a modal semi-transparent layer over top of your application, with a “Loading..” spinner message. You simply call the first method when your application is about to do something, and when it finishes you call the second.

Here’s an example of how to use it.  This will load a remote HTML document and place its contents into a node in your PhoneGap application.

https://nachbaur.com/wp-content/uploads/2009/10/212444.js

Not only does this make it easier to integrate external content into your PhoneGap application, but it guarantees your user is informed that it’s actively working. As a final bonus, if your external web site doesn’t respond, or if the user doesn’t have an Internet connection, the modal loading screen will close after a timeout.

Asynchronous loading messages

Asyncronous activity loading indicator
Asyncronous activity loading indicator

Sometimes you want to tell your user that the application is busy, but you still want to continue using the app anyway.  If your app doesn’t turn off the top statusbar (where the time, reception, and battery status is displayed), you can control the busy indicator from within PhoneGap.  Just like the above example, you just have to call the appropriate PhoneGap JavaScript methods.  In this case, just update the above example with these messages:

navigator.notification.activityStart();
// Do something that might take a while...
navigator.notification.activityStop();

How to use the native Alert dialog in PhoneGap

PhoneGap's custom alert notification is nicely customizable
PhoneGap's custom alert notification is nicely customizable

An important part to any application is issuing a simple alert to your user. Whether it’s to tell them about an error that just occurred, or if you need to ask them a simple question, giving a message to your user is about the most basic part of any app.

Sadly, when you try to rely on the ever faithful “alert()” function in JavaScript inside a PhoneGap application, you’ll notice the alert box it shows is titled with a very unprofessional “index.html” across the top. Not only does it make it obvious that the app they’re interacting with is actually HTML-based, but you can’t convey the importance of one message or another with a title. Most people only ever read the title anyway, so in order to provide this capability to your application, PhoneGap has an answer for this problem.

Inside PhoneGap there’s a class called “Notification” which is used for, well, sending notifications to your user. And, by calling:

navigator.notification.alert(
  message,
  title,
  buttons...,
  options);

Everything, except for the message, is optional. The more arguments you provide, the more you can customize the alert box. For instance, if you don’t supply a button label, one single “OK” button will be created. Want to ask a Yes/No question? Simply pass two labels for their respective button names.

Like other functions in PhoneGap, the alert notification can be passed an “options” object that allows you to give it more information, such as an onClick callback.

https://nachbaur.com/wp-content/uploads/2009/10/212064.js

That example shows how to ask your user what to do in the event of an Internet connection problem.  You’ll notice that I’ve decided to pass two button labels.  In the onClick callback function I supplied in my options argument, I’m checking the “buttonIndex” variable it passes.  This tells your function which button was pressed.  If you want more than 2 buttons, just list multiple labels and it will show as many as can fit on the screen.

A very simple function, but invaluable as a developer resource.  And, more importantly, a very easy and professional way to get feedback from your user.

Device.saveScreenshot added to PhoneGap

One of the integral features of the next application I’m releasing (I’ll write a post about it soon, honest) is the capability of saving a copy of the user’s work in my app to their Photo Library. For a while now I’ve been wanting to be able to save screenshots from within PhoneGap for two main reasons:

  1. Be able to export the user’s work and allow them to email it, import it into other applications, etc.
  2. Save a screenshot to their splash-screen image, that way when the application restarts it shows their previous state while they wait (for example, the Notes application on the iPhone).

I’ve implemented #1 right now, meaning with a simple non-blocking call you can save the current view to the photo library. In the future I’ll add another three options: Save to the default splash-screen image, save to a file, and save and upload to a remote location.

Check out the check-in I’ve made and if you have any comments, please let me know!

How to use the ActionSheet in PhoneGap

The ActionSheet is a handy control on the iPhone, and is a very intuitive way of getting a multiple-choice answer from a user in a modal but unobtrusive way.

Using it in PhoneGap makes interacting with your user easy, while keeping the display responsive. And as an added bonus, you don’t need to update any HTML or CSS to get the buttons to look right. The native iPhone codebase handles it for you.

So the question is, how do you use it effectively? As most Web2.0-style developers are aware, the only sensible way to develop flexible applications that don’t bog down the browser is to make your applications behave asynchronously, and make use of callback functions to get feedback from external systems (HTTP requests, users, etc). The ActionSheet on PhoneGap is no different.

The ActionSheet is grouped into the PhoneGap “Dialog” class, and is called like so:

dialog.openButtonDialog(title, buttons..., options);

The title property lets you specify the label to show at the top of the ActionSheet. If you don’t want a title, then simply pass in a null value.

The list of buttons is specified as a series of objects, which I’ll describe below.

Finally, the options let you customize how the ActionSheet is displayed (via the “style” property) and lets you set an onClick handler for the entire ActionSheet.

https://nachbaur.com/wp-content/uploads/2009/10/211046.js

The example above illustrates several options of the ActionSheet PhoneGap control.

  1. On a per-button basis you can specify your own onClick callback which will be run when that button is pressed.
  2. A global onClick handler can be specified in the openButtonDialog options argument, which will get called no matter what button is pressed.
  3. You can choose what the appearance of the dialog should be (currently only “opaque” and “translucent” are supported)
  4. A button requires a label property, but you can optionally specify a “type” property (can be “normal”, “cancel” or “destroy”).

The callback functions are simply called with two arguments, the index of the button being clicked, and the label of the button the user clicked on.  So if it’s easier for you to work with array indexes, or with text labels, you can easily find out which button was pressed and when.

So go ahead and try out the ActionSheet control.  Either you can use my latest release in my branch of PhoneGap, or you can use these more advanced features once my changes have been merged in with the official branch.

In-App purchases allowed for free apps on the App Store

Finally, what we’ve all been waiting for.   Apple just announced that they’re allowing In-App purchases for free apps, and not just paid apps. This means, as an app developer, I can develop a single app for the app store for free, but can allow my users to upgrade to the full paid version without having to split it up into a “Lite” and “Full” version.

I can’t wait to apply this to my apps!

How to automate your iPhone app builds with Hudson

As any iPhone application developer who’s released at least a single app to the App Store will tell you, releasing your app is a terrible pain in the…well, it’s not a fun experience.  After your second or third app you start to get the hang of things, but there’s still pain and suffering involved.  Managing certificates, getting settings configured properly, and iterating between development, AdHoc beta builds, and the final App Store release builds, all make the process seem tediously manual and prone to human error.

In professional software development shops, you would use a Continuous Integration server to monitor your source control repository, check out changes as they’re submitted, compile, test and package up builds, and notify developers of the build’s health via emails and a web-based “Dashboard”.  I missed having this while developing my PhoneGap-based iPhone applications, so I decided to once and for all bring good development practices to my iPhone work.

Why do I need to configure automated builds anyway?

I get this a lot from people when I’m trying to convince them of the need for automated builds.  I personally find it hard to imagine people getting by without them in a single-developer project, let alone when multiple developers contribute to a project.

Monitoring the health of an application

Lets face it, we’re human, and we make mistakes.  It’s alright to break code from time to time, but what really sucks is when you find out far too late.  Did your recent changes accidentally eliminate your Entitlements.plist file, thus breaking distribution or release builds?  Do you have a file or library you forgot to check in, meaning when you delete the project from your working directory all those changes will just vanish?

Instead of having to remember to check each of those things manually (which, lets face it, you’ll forget at least half of the things you’re supposed to do inevitably), why not have an automated system tell you every time you make a change?  And if you’re in a multi-developer project, you’ll be able to see who broke the build and what change specifically broke it.

Always be ready for distributing your application

Many times in the natural course of development you’ll break code.  You’ve gotta break something in order to improve it.  But sometimes someone (your wife, a client, a beta tester) will want to try out your application before you have an opportunity to finish off your recent changes.  Instead of spending ages back-tracking your work to get your application to compile, why not rely on your automated build system to keep archives of previously successful builds?

Release what you test

Since you want to test an application before you release it to the App Store, you’ll probably create an Ad-Hoc distribution build to give to friends, family, or official beta testers before you bundle your application up to send to the App Store.  Maybe your testers will find bugs, maybe they won’t.  But at the end of the day that compiled app bundle you just created isn’t actually what you submit to Apple.  You need to compile a completely different app bundle with very different files stored in a Zip file, and if you’re not careful you could potentially be releasing something different than what you tested.

Why not have your automated build system create both your Ad-Hoc distribution build as well as an App Store release build every time?  That way you’re not only always ready to release something to the App Store, but you can be guaranteed that you’re submitting to Apple the exact code that your testers evaluated.

More benefits than I can list

If you’re really serious about best practices, you’ll probably want to write unit tests for your code and have those run after your code has been compiled, but before your build is packaged and archived.  Just because your code compiles doesn’t mean that it will behave correctly.  And lets face it, if you have a lot of tests, you’ll never wait for all of them to run throughout the course of your work.  So by running your tests as a prerequisite to a build succeeding, you’re guaranteed that you’ve got a safety net.

There’s plenty of other best practices that having an automated build system can help with, so what I’m discussing here will just cover the tip of the iceberg.  If I’ve convinced you that automating your builds, read on.

Continue reading “How to automate your iPhone app builds with Hudson”

PhoneGap officially permitted on the App Store

Its been a while since I’ve made an update to my blog, and I figured it’s far overdue for a new post. My life over the past little while has been divided up into 4 chunks: my family, my work, my weekend consulting, and my own personal application development. Somewhere around the second half of that list is sprinkled a bit of PhoneGap development.

PhoneGap vs Apple, resolved

First, I’d like to announce that I’ve made headway with my interactions with Apple. They were convinced by my argument that PhoneGap-based apps, just like any other apps developed by users who have access to a rich API, should be judged by their own merits and not prejudged based on what tools were used to built them. This is fantastic news, and means that apps submitted to the App Store will not be rejected solely because they’re built on PhoneGap. Now, if the application is buggy or if a developer tries to do something underhanded with it (for instance, changing the behavior of the app after Apple approves it) that is still cause for a rejection or worse consequences, but the same goes for any application released to the App Store.

Apple did have some requests though. To ensure that apps are released with a “Known Good” version of PhoneGap that they can trust as not having a fundamentally bad design, they wanted to have a version number that would be considered stable and acceptable. Additionally, they would like to have some way of easily identifying the version of PhoneGap used, so they can easily check that little box that says “Don’t reject it just because of its framework.”

I had a meeting with the good folks at Nitobi over a few beer, and ended up updating the version number to 0.8.0, and added a version tag that is added at build-time to the compiled iPhone application bundle. This will make it quicker for Apple to approve your apps, as well as remove any guesswork on their end about whether or not to trust your application.

The catch…

As with all good things in life, there is a catch. Since Apple doesn’t have any idea what version of PhoneGap any apps already submitted to the App Store for approval may be running on – and as a result has no idea whether it’s a safe version of PhoneGap or not – they’ll have to reject all the PhoneGap applications in their queue, and kindly request that you resubmit your apps once you’ve updated to the newer version of PhoneGap.

I want to stress that they’re rejecting these apps only to ensure they’re running the first Apple-approved PhoneGap version, and not for any other reason. Once you update and re-submit your apps, they’ll reenter the queue and will be reviewed just like any other iPhone application. This doesn’t mean they won’t reject your app for some other reason, but at least PhoneGap won’t be a blocker anymore.

I have some additional announcements and general thoughts on PhoneGap and my use of it to post, but since this news is so big, and since I’ve been too busy lately to update my blog in a while, I thought I’d open with this post first.  I’ll hopefully resume my regular blog posting soon, so please check back later.

Update: For more information about the origins of my conversations with Apple, see my posts titled Updates on Apple / PhoneGap and Open letter to Apple iPhone Developer Support.