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.
No comments:
Post a Comment