Building a jQuery Mobile Application with the PlayBook WebWorks SDK

I remain really impressed with the PlayBook as a device. It’s a great size, has fantastic specs, and the user experience that the QNX team has built is fun to use. Primarily I’ve been using the Flash-based AIR SDK for my tests and applications. I think that’s the best way to build PlayBook apps and when I’ve talked to people I’ve gushed that it’s the best mobile Flash development experience we have. But there are also a lot of JS/HTML developers who will want to deploy PlayBook content and RIM has included a WebWorks SDK to make that possible. So I took it for a spin, porting my landmark finder to the device.

Getting Started

The first thing you have to do is grab all of the required files. You first need to make sure you have the AIR 2.5 SDK (which, since we’ve moved to 2.6, can be found here). Then you can grab the WebWorks SDK and the simulator files from the BlackBerry developer site. By default the WebWorks SDK installs to your user directory, so if you can’t find it, look for a folder called bbwp.

Building the Application

There really isn’t any special trick to getting jQuery Mobile working on the PlayBook. It works perfectly and it performs really well. My application just took the core jQuery Mobile framework and included two different screens; one for getting the location and another for a list of landmarks that are close to you. It uses the GPS coordinates from the device and then goes out to Geonames to find a list of landmarks in the area. Selecting one of the landmarks takes you to Wikipedia so you can find out more about it.

The code (above) doesn’t have anything particularly tricky, which is a testament to how easy it use to use the WebWorks SDK if you’re an HTML/JS developer. I was even able to use the standard HTML5 Geolocation AP. RIM hasn’t announced any plans for geolocation on the device so I’m not sure what the final status or experience will be. Today on the simulator you can get a geolocation object but you can’t get position, so I just default to using the lat/lng from my neighborhood here in Seattle.

Creating the Config.xml File

The PlayBook uses a manifest file, config.xml, to control the title, icon, and features on the device. The config.xml file is pretty straightforward and if you’re familiar with app manifest files you should have no issues. There is also some decent documentation here. Mine is below.

There were a couple of gotchas I ran into when I dove into the config.xml file. The first was the access attribute. Instead of asking for blanket access to the web, you have to specify which domains your application will access. In my case it was just the Geonames API. But if you’re pulling down remote source files (say from jQuery) you’ll also need to include that domain.

Compiling the Application

Compiling and deploying the application was a bit tougher. Right now the only tools I could find are command line tools for the compiling, packaging, and deployment of WebWorks applications. The first thing you have to do is zip up all of the files you want to include in the application. The packager tool converts a .zip file into a .bar file, the native file format of the PlayBook. So I selected my config.xml file, my index.html file, and then all of the css and js files from jQuery to create geonames.zip. The tool you use to do that is in the bbwp directory in the root of the WebWorks SDK directory. Here’s the command. You can also specify an output directory with a -o switch. By default it creates a bin directory in the directory you’re in and puts the .bar file there (my WebWorks SDK is in an SDKs folder in my Library).

/Library/SDKs/com.blackberry.dev/bbwp/bbwp geonames.zip

That will build a geonames.bar file in the bin directory of your project.

Deploying to the Simulator

I won’t get into how to set up and configure the simulator because that’s been covered in other places. But once you have the simulator set up, you can test and deploy your application. Within the bbwp directory you’ll find a blackberry-tablet-sdk/tools directory, which has a bunch of libs for deploying and signing your application. To test it on the simulator you’ll use blackberry-deploy. To deploy it you have to have the simulator in development mode and know the IP address of the simulator and the password on the device. With that info you can deploy your .bar file to the simulator with this command.

blackberry-deploy -installApp -device  -package "bin/geonames.bar" -password 

And now you should be all set!.

Word of Caution

This particular example isn’t fantastic for the simulator because it uses the geolocation APIs, which aren’t supported currently on the simulator. But if you’re building a straight jQuery Mobile app (or any HTML/JS app) then these steps will get you compiled and on the device. The next step is to make sure your application is signed and then you can submit it to RIM’s App World and it’ll be ready to use when the PlayBook launches.

Show Comments

Hide Comments

Comments are closed.