Telerik blogs

Over the holiday weekend I had the opportunity to take a project that I have been working on for the web and see if I could port it directly to a native app on iOS. 

Now your first thought is probably, “Don’t you have better things to do in your free time than code?”

Possibly, but I don’t know what those things are.  I used to think I had a problem that needed professional help, but now I just accept it.  Perhaps we need support groups.

“Hello, my name is Burke and I am a developer”

So as I fed my arguably unhealthy lifestyle choice, I got to know my way around PhoneGap.  It’s a remarkable little framework that makes application development for mobile really trivial.  The trade-off is that you don’t get all the neat iOS interface components that come with a standard XCode project.  Kendo UI has you covered of course.  2012 shall be a big year for mobile HTML5 development.

In the meantime, let’s look at how I setup my own development environment and got to know PhoneGap so that you can get rolling and be ready for the Kendo UI Mobile release coming at you very soon.

My Application

Just for fun, here is a screenshot of my application running on the emulator.  I was building an iPad application.  There is some controversy around whether or not you should build separate applications for phone / tablet.  My personal feeling is that you should always try and be universal.  Even Apple offers tools for building native universal applications.  Having multiple codebases can really bog down your ability to turn around fixes and enhancements as you will find yourself making the same changes in multiple places.  I was building an Instagram viewer for iPad and not worrying about the phone experience because the actual Instagram application is on the iPhone.

My love of Instagram is well known and I don’t hide my inner fanboi, so my application deals with showing Instagram photos on the iPad in a way that you can easily scroll through them and share them in high resolution.  It looks something like this…

iPad

PhoneGap-age

What can I say about PhoneGap?  It’s such a great little framework.  It’s a simple download and getting rolling with XCode is as easy as creating a new project and dragging in the www folder that is created the first time you run the project.  You can find the instructions for getting started with PhoneGap and XCode here.

After you get up and running, you have an application that looks somewhat like mine does here.  I used the project title “kendomobile” not because I was using the mobile framework, but because I was using standard Kendo UI Web widgets.  You can see above that I used the Kendo UI Menu Widget.  The Kendo UI DataSource is also used to grab the images from Instagram and there is some templating mixed in there as well.

km1

You can see the “www” folder at the top in blue and then the native project below that.  From here on out, we are only concerned about the www folder.  Let’s have a look inside.

k2

You can see the index.html file there.  There is a css folder where I put all of my CSS files as well as the Kendo UI Metro theme.  I went with Metro on iOS because the irony was just too much fun.  In the js folder is all my JavaScript files and then finally the phonegap file at the bottom which essentially contains all the magic to make this thing work.  Now when you open the index.html file things get a bit verbose.  There is a lot in here, but it’s well commented.

There are really only a couple of things that I want to point out.

k3

The first block is the css files.  You can see that you reference them exactly like you would in a web application.  Below that is my JavaScript includes.  I use RequireJS pretty heavily when I build applications.  That middle script tag may look completely foreign if you haven’t used RequireJS before.

RequireJS is a dependency management tool for JavaScript that allows you to build modular applications.  You could write a book on this subject alone. There are a lot of tutorials, blog posts and the like on how to use RequireJS, but none of them are quite as easy to follow as this one.

There is also a OnDeviceReady which I’m not using because I’m not dealing with any native features at this point.  A good idea would be to use pub/sub and dispatch an event when this function fires so that you know you are good to go.

Debugging

One of the things that you will need immediately is a way to debug your application. There is an article here on how to do that with PhoneGap, but I abandoned that pretty quickly and went to a different route.

Project Location

I decided to build and debug in the browser and then occasionally test in the emulator.  I’m on a Mac, and since I don’t really understand Apache and I’m lazy, I use the built-in Web Sharing in Lion.  This creates a root site at http://localhost/~username.  The physical location on the disc is ~/Sites.

k4

My XCode project is pointed at the same place.  It’s the same project.  From here, I’m switching to TextMate at the “www” level and editing the project.  Now I can run the project and hit it from http://localhost/~burkeholland/kendomobile/www.

I’m using Chrome and Chrome Tools to debug.  I also use a Chrome Add-in called Window Resizer that allows you to resize the browser to preset dimensions.  The first setting is for iPhone and the second says “Older Computers”, but 1024 x 768 is also iPad’s resolution.  You can also create on for 768 x 1024 which is the iPad in portrait mode.

k5

Now you can fully debug your JavaScript / HTML5 / CSS3 and when you are ready, give it a test on the emulator.  It’s a pretty rapid development setup.  I found it to be really easy to work with once I started editing outside of XCode and using Chrome to debug.

Final Gotcha

I was working with remote data and each time I would run the application and make a JSONP call with the Kendo UI DataSource, XCode output would report an error and no images were displayed.  I have highlighted the key error below.

k6

It turns out that you can’t call a remote URL without specifying in the PhoneGap.plist file which URL’s are OK to call.  It blocks everything by default.  The PhoneGap.plist file is found in the Supporting Files folder in the XCode project.  Once you highlight it, you can change the allowed URL’s under External Hosts.  I just put a * which allows everything, but you should probably be more specific.  A good rule of thumb in security is “lowest required permissions”.

k7

Are You Ready?

Kendo UI Mobile is coming in the early part of 2012.  If you are a Mac user, this should be a good guide to get you ready to start building native HTML5 applications with PhoneGap and Kendo UI.

Building HTML5 native applications is remarkable easy and quite a bit of fun.  It’s really neat to fire up the emulator and see your application running. 

Now that I know how to build a native HTML5 application, step 2 is to get this thing in the app store and get a million downloads. How hard could that be? Winking smile


Burke Holland is the Director of Developer Relations at Telerik
About the Author

Burke Holland

Burke Holland is a web developer living in Nashville, TN and was the Director of Developer Relations at Progress. He enjoys working with and meeting developers who are building mobile apps with jQuery / HTML5 and loves to hack on social API's. Burke worked for Progress as a Developer Advocate focusing on Kendo UI.

Comments

Comments are disabled in preview mode.