Today I revived my hope on Microsoft as I received the news that they released their brand new “product” for their fellow developers. The release I am talking about is the official Metro theme for jQuery Mobile. The awesome mobile framework finally got some Microsoft love.
In December of last year I got a new device to develop for, a HTC Titan, running the latest Windows Phone 7.5 Mango build. I loved the OS UI and how the applications were information-centric and not just eye-candy, but there was one problem, the same way C# is a incredible language for a lot of things, it’s parsing functions, for JSON specifically, are very difficult to learn and the articles about it were made for senior C# developers, which makes it difficult for beginners like me to understand them, at least I now can develop using the technology I love most for mobile development: Cordova (aka PhoneGap).
I always wanted to use Cordova for my WP7 projects but the Metro interface was way too complex to build from scratch and since the WP7 build of Cordova was on it’s early stages there were some features still to be implemented, for example there was no way to prevent the app from scrolling and some other things. Now there are plenty of plugins to make the app as native as possible and with the latest help from Microsoft, the Cordova development community has another great platform with almost full support of the native web app framework.
As many might know the most used plugins in PhoneGap for iOS are NativeControls and ChildBrowser, but installing plugins is a bit tricky and you can’t easily find this kind of help around the internet, for example in my case I’ve learned by reading about plugins installation in PhoneGap and doing tests, so on this post I’ll cover the entire setup and usage of NativeControls (but you can use this for any other plugin in the iOS repo) in a very simple and informative way that even a PhoneGap beginner can understand. I’ll assume that you’ve already had installed and configured the Xcode environment on your Mac and is familiarized with the latest version of it. The first thing you must do is download the phonegap-plugins repo archive and extract it anywhere you like. Now go to the extracted folder and go to iPhone/NativeControls and copy the NativeControls.h and NativeControls.m to the /Plugins folder on Xcode, then move the NativeControls.js to your desired place in the www folder. After all this copying and pasting you must open your PhoneGap.plist under /Supporting Files and add a new item to the Plugins array with the Key and ValueNativeControls and the Type String, at the end your project should look something like this:
As you might have noticed I’m using the Glyphish Pro icon pack there, which you can get for $25, but it’s worth every cent, since it’s such a complete icon pack for your TabBars and more. First of all you should initialize a NativeControls variable and create a assign a TabBar to it using this code:
The first item is the name variable, the second is the icon label, the third is the icon path and the last one is a function that should be called every time icon is clicked. Be aware that you should insert the icon path relative to the project folder! About retina icons I really encourage you to check out this explanation on how to organize them. After you added all the icons you want to the TabBar you should show it in the screen. Then start to place the icons (the order you declare on this function they will get placed) and finally assign a TabBar to be active as the app is fired, just like this:
If you want you can choose from the pre-defined TabBar icons that Apple include by default on their SDK by using these keywords as the icon item:
Remember that the label will be unusable since these will overwrite it, but you should put something on the label item or it won’t work. I’ve uploaded the full source code to my Gist and you can check it out at Example of NativeControls in PhoneGap. After all this hard work you’re ready to compile your application and test it. If you followed the instructions correctly everything should work. If anything goes wrong please drop us a comment and will be my pleasure to help you. Also leave a comment with your thoughts on this article or suggestions.