One criticism of PhoneGap apps that I sometimes hear is that they often don’t have “standard” features from the native operating system. Little things, like iOS’s ability to scroll a container back to the top, just by tapping on the operating system’s status bar. These types of features are not hard to add to a PhoneGap application, at all. This is more of an “attention to detail” issue, not something that the platform can’t do.
Since this isn’t a feature that is applicable on all platforms, and it can vary per PhoneGap app implementation, it is not part of the core PhoneGap/Cordova download. However, this can be very easily added via a native plugin. Native plugins enable you to access native code, or augment the capabilities of PhoneGap for a particular platform.
Here’s proof… I just added the “scroll to top” capability to my Halloween PhoneGap app.
If you download the app from the app store today, you won’t see this yet because I literally *just* submitted it to Apple.
So how did I do this?
It wasn’t hard. The first thing to do is check and see if there was an existing native plugin that has already been created by someone in the PhoneGap/Cordova community. It turns out, Greg pointed out one that already existed. Since this plugin was built targeting an older version of PhoneGap, and my project was built using PhoneGap 3.0, I had a few minor updates. Though, I was able to get everything all set up in a very short period of time.
Here’s what I did:
- I forked the existing plugin.
- Added plugin.xml metadata so the plugin can be included via PhoneGap & Cordova CLI tools.
- Added logic in the JavaScript so that it auto-initializes – you no longer have to manually initialize the plugin.
- Moved the native Objective-C initialization logic into a background thread.
Now that I’ve done this, and pushed it to github, you can include it into your own PhoneGap projects with a single command using the PhoneGap CLI:
[code]phonegap local plugin add https://github.com/triceam/cordova-statusTap[/code]
Then, in your PhoneGap application, you just have to add an event listener for the “statusTap” event, which is triggered when the user taps on the operating system’s status bar. It is literally this simple:
[js]window.addEventListener("statusTap", function() {
alert("status tap");
});[/js]
This just shows an alert that the status bar was tapped. If you want to animate specific containers, you have to do this manually yourself via JavaScript. Again, that isn’t hard to do. Here’s an excerpt that I used from the Halloween app, using jQuery syntax:
[js]window.addEventListener("statusTap", function() {
var target = $("#scroller");
//disable touch scroll to kill existing inertial movement
target.css({
‘-webkit-overflow-scrolling’ : ‘auto’,
‘overflow-y’ : ‘hidden’
});
//animate
target.animate({ scrollTop: 0}, 300, "swing", function(){
//re-enable touch scrolling
target.css({
‘-webkit-overflow-scrolling’ : ‘touch’,
‘overflow-y’ : ‘scroll’
});
});
});[/js]
This disables touch scrolling to kill any inertial scrolling in progress, animates the scroll to top, then re-enables touch scrolling once the animation is complete.
That’s it… Go check out the code, fork it, or use it in your own project: https://github.com/triceam/cordova-statusTap
Enjoy!