Inertial Scrolling on webOS using PhoneGap and iScroll 4

So, let's get down to working with PhoneGap. One of the first things you'll notice when you make a PhoneGap app on webOS is that the page doesn't scroll. Palm has a nice inertial scrolling widget, so what's going on? Well, there's no scrolling widget in stock PhoneGap. If you drag your finger on a page, it'll just highlight the contents. Don't worry. There's an easy way to fix this.

My solution of choice is the iScroll 4 framework by Matteo Spinelli. The beauty of iScroll is that it allows you to scroll within a fixed space, letting you set a header and footer -- perfect for mobile apps. A great starting point is to try out the examples provided with the framework. I've tested both the Simple Scroll and Carousel samples on webOS 2.1 with excellent success. Download the latest iscroll.js file and put it in your webOS/framework PhoneGap folder. If you're using the stock examples in iScroll 4, make sure to include the <script type="text/javascript" src="phonegap.js"> </script> reference in the head of your code, and <script type="text/javascript"> navigator.device.deviceReady(); </script> in the body.

Now, iScroll 4 likes to scroll lists. If you want a single page scrolled and are using one of the provided examples as a template, you can simply put the entire contents of your page into one <li>. Just go to the #scroller li style section and remove height:40px.

The framework has quite a bit to offer beyond just scrolling, but I haven't been able to get some of the other functions running just yet. The Pinch/Zoom and Pull to Refresh examples aren't working out of the box on webOS. Really, those would just be icing on a very delicious cake. With the scrolling functionality alone, iScroll 4 is a powerful and much needed option in your programming toolbox.

webOScapades -- Occasional Adventures in webOS Development

I make no bones about it, I like HP's (nee Palm's) webOS platform. The operating system is beautiful, the community is incredible, and the development process is a charm.

The power of webOS lies in the use of web technologies. You can build a quality app with nothing more than HTML, CSS and JavaScript. Web programmers will be right at home. For webOS 1.x and 2.x, you generally needed to learn an MVC style framework called Mojo. Mojo is old news -- starting with webOS 3.0, the new hotness is Enyo. The Enyo SDK is currently under NDA in the HP Early Access Program, but will be presumably be publicly released in the near future when the HP TouchPad ships on July 1st, 2011.

I'm not walking the Enyo road just yet. Right now, I'm having much more fun playing with PhoneGap, a cross-platform framework that allows you to write HTML/JavaScript apps and author them on multiple platforms. As of version 0.9.5, PhoneGap is Mojo-free. You write just as you would for a standard web page and include a little PhoneGap JS code. The best way to get started would be to download the latest version of PhoneGap (0.9.5.1 at this writing) and delve into Herm Wong's excellent webOS PhoneGap tutorials. His "Getting Started with PhoneGap WebOS 0.9.5" post is a good place for beginners, and includes links to other needed steps.

Becoming a webOS developer couldn't be easier -- or cheaper, for that matter. It's free. As in zero, zip, nada. Just sign up at the HP webOS Developer Portal. Community accounts will give you access to play around with the SDK and post in the forums, but you'll need a Developer account to publish apps in the App Catalog. For that, you need a PayPal account (to get paid) and a business tax id number (to pay the government).

By itself, PhoneGap isn't enough to make a quality webOS app. You need to add the functionality in bits and parts. As I discover more pieces of the puzzle, I'll put together posts and tutorials on the process. This blog will hopefully be an aid to others on the same path.

Ken Schreihofer