Facebook Twitter Gplus LinkedIn RSS
Home » Blog » NativeControls Plugin for Cordova/PhoneGap

NativeControls Plugin for Cordova/PhoneGap

Published on April 12th, 2012

Update: This post is a bit outdated. NativeControls has been updated. Click here to read more.

One of the most popular posts on my developer blog is this one on setting up a Tabbar using xCode and manipulating it with Javascript through Cordova (the renamed PhoneGap project). I get a number of questions regarding the thread, and that is mostly because it is confusing, especially if you aren’t already adapt at Cordova Plugins.

Personally I love the jQuery Mobile with Cordova approach to development. It allows me to take what I know (HTML, CSS, and javascript), and slowly learn Objective-C and xCode while producing things, instead of following tutorials out of books for the next year. I have to admit, when I tried to learn native Apps, it was slow going and ultimately unfulfilling.

Anyhow, I’m getting off track. Back to NativeControls. This plugin is absolutely great. It let’s you abuse the native UI controls like the NavBar or TabBar (header and footer navigation elements). This fixes a lot of issues that jQuery programmers face with fixed headers and footers, and scrolling. Also, the dreaded 300ms delay for using these native elements is eliminated. It really gives back that zippy feel to your web Apps that can often feel lost in some of the more complex Apps.

Some jerkwad was selling the jQuery Mobile Reference Documents (the stuff found at the official site) for $2 on the store. He didn’t even improve the navigation or anything. Just stole the code and put it up for sale. So I did the only logical thing. I put it up for free. I figure this can be my “community non-profit” zApp. I’ve decided to take it the next step and put the source code up for download. You will still have to create your own project because I didn’t want to give out personal user settings (or possibly my dev information), but then you can just import the web and plugin files into the project.

Hope it’s useful. Comment below if you need help or just want to tell me how it is working for you!

Download: [download id=3 format=1]

About the Author: Sprawl

Stephen Russell is a Mobile App developer and all around IT geek that spends his days running data centers and his nights coding. This site is the go to place for all of zSprawl's work and the infamous development blog. In his free time, he enjoys tinkering with web code, playing video games, and otherwise plotting to take over the Internets.


11 Responses

  1. Paul

    Hey, just discovered your blog. I downloaded your source and tried out the TabBar, and it worked right out of the bag. I’m sure, I’ll be able to use it for a future app.

    I’m pretty new to this plugin, but have you had any luck getting the ActionSheet part of NativeControls working? I’m trying to create an action sheet that has a tweet button, Share on Facebook button, email button and cancel.

    I’ve been looking for document on this, but it is very sparse.

    Anyway, great tutorial!

    • I haven’t tried yet, but I like mixing nativecontrols with my webapps for a more “native-like” experience, at least until they get rid of that 300ms delay on clicks without all of the awkward side-effects.

  2. Paul

    Nevermind, I got it going. Yeah, NativeControls makes it super fast. This is my first native app with JQM so hopefully minifying scripts at the end will help to speed it up.

    • Well done! If you write something up on setting it up, I’d be honored to publish it. 🙂

    • Thank you for your help!I have upedatd the build.xml file for Sencha Touch, fixed the empty type issue in BuildHX, and have upedatd both haxelibs.If you are able, please test against the current senchatouch haxelib and see if it is working for you.Did it feel difficult to compile against the build.xml file on your own, and make changes? One of my hopes in creating this build system is that it would help improve the reliability of extern libraries, while making it easy to compile against new versions as they are released.If externs are done by hand, it is daunting to consider updating when a new original version comes out. I had hoped that the XML approach would feel comfortable enough for anyone hacking an extern library, while making it simple to integrate those fixes into the official project.Oh, I also added a haxelib run buildhx install command which helps install JSDuck on a Mac or Linux. I had hoped they would have a standalone binary we could include in the project, but this will do for now. Should hopefully make it easier for the future.

  3. Ted

    how do you do phonegap photo manipulation in xcode?

  4. Neilo


    NativeControls looks awesome in all the screenshots I have seen.
    I added it to my Cordova 2.0 project, and after a few tweaks I got the project to build successfully. I can successfully display a native tab bar using:
    var options = “bottom”;
    cordova.exec(“NativeControls.showTabBar”, options);

    However, if it fails unless I use cordova.exec … this shouldn’t be necessary though.

    Also, any approach I use to add tabitems causes the tabbar to fail to display at all.

    From what i’ve read, this seems to be a Cordova 2.0 issue… any pointers on how I can fix it? It seems to be a JS issue rather than XCode, but I may be wrong.

  5. Imaginativeone

    How do I use your reference project? The *.xcodeproj has been omitted. 🙁

  6. scripie

    Good write-up, I am normal visitor your blog and will be a regular visitor for a long time.

Leave a Reply

Your email address will not be published. Required fields are marked *

© 2012 zSprawl's zApps

Fork me on GitHub