Kendo UI, mydigitalstructure, PhoneGap native on Android

Set out to create a simple HTML5 web app with Kendo UI, then use PhoneGap to port it across to Android to see how difficult the process would be. The answer, not difficult at all which makes sense as it is noted on Kendo's website that PhoneGap and Kendo play nice together, I didn't think it would be this easy though.

First thing I set out to do was to use Kendo UI tabstrip to create a simple HTML5 page where I would use mydigitalstructure to allow a user to login and have the tabs of Actions, Contacts at the bottom of the page and when they switched between each they would be shown the actions or contacts based on a remote source represented in the Kendo UI datasource.

After creating the HTML5 app using Kendo UI mobile I had two html pages, the home page (which contained the login Modal View and a page called apphome which contained the tabstrip items. Both pages contained references to the relevant kendo files and to the master01.js file (this is my javascript that contains the details what GET and POST commands to send to mydigitalstructure).

Beginning to port, I once again followed the information at PhoneGap for Android and fired up Eclipse and built my page and ended up with an index.html swapped in the cordova js file and then started to copy and paste in my header scripts from the HTML5 app, namely kendo.mobile.all.min.css (mobile css for Kendo), 1466site.css (an additional css for my app),  jquery.min.js (a helper js library), kendo.all.min.js (all js for Kendo) and my master01.js.

All went well I created copied across my HTML from the home page and created a new file called apphome.html, since I changed the name of my apphome page I had to change references in the master to read app.navigate("apphome.html"); instead of app.navigate("apphome"); but easy fixes all round.

Then i tested and sent the result to my Android HTC Desire, and the login screen was displayed with the details and basically looked exactly like the HTML5 experience minus the chrome, great stuff, now all going well but after logging in I was encountered with an issue

08-05 11:01:10.932: E/Web Console(19937): Uncaught TypeError: Cannot call method 'replace' of null at file:///android_asset/www/kendo.all.min.js:8

What the hell is this? This appeared in the LogCat logger of items, and since this was the first time I had hit an issue with Eclipse I was truly scratching my head wondering what is going on. My only option was to start commenting out HTML elements to see what is causing the issue. After basically taking the app back to grass roots and slowly building up I suspected the issue was caused whenever I was trying to load content in from the datasource??

Found it finally I had made the simple mistake of not copying across the templates script snippets from the HTML5 app, so Kendo UI was trying to create the listview but had no template as a reference, I added and tried again and everything was fine my contacts and actions would load when each tabstrip option was pressed, very nice, now I have a native app on Android which uses Kendo UI, mydigitalstructure and PhoneGap. 

Now since I am not using any native phone features (location, filesystem, camera etc) that will be my next step to incorporate these features into the app too, also I want to see how I can maintain a session so the user has no need to constantly log in.

Another look at phoneGap

Finally got around to completing the Getting started guide with Android  from phoneGap, so have a bit of feedback on the process.

As a concept this is basically how it shapes up,

• Eclipse is the favoured development environment for phoneGap to integrate with, and maybe android too, although I am sure there are others around.
• Android SDK basically the bits and pieces that make it possible to develop for android, I am assuming this includes the emulator and drivers etc.
• ADT Plugin this I think is the plugin which links Eclipse software to the Android SDK and needs a little config to get it working.
• Finally we get to Cordova which is the java and javascript which in my mind is 'phoneGap'

Android SDK Manager, you will see this screen a lot asking to update items, I suggest you do!

Ok so the concept there, how easy is it to get going, Eclipse is easy, a compressed file which you can extract to anywhere in your computer, same with Cordova. Android SDK is a simple install, most difficult part is the ADT Plugin, but the instructions are easy to follow.

Eclipse after install and attempt at multiple HelloWorlds

I had no problem at all running through the HelloWorld program and deploying to the simulator/emulator for android. The index.html rendered and all was good in the world definitely felt like a native app.
The virtual android device I set up was a Samsung Galaxy S2 4.0.3 but my computer was running it fairly slowly, so I would suggest you either have a decent computer with a good video card or it may struggle. I didn't want to test with a simulator anyway as I have a HTC Desire phone to play with.

Virtual Device Manager for Android, create all the phones/devices you want.

Problem was that all the documentation was saying that it should be displayed as an option after you switch on USB Debugging on the phone. I checked in device manager (im running windows 7) and found an odd device called 'ADB' which had an ominous exclamation mark next to it, indicating there was a problem with the driver. After a bit of searching I found a great article with a link to the HTC driver after I updated and installed Eclipse could see my device, yay!

I ran the helloworld app on the device it worked. A simple native app deployed and tested without knowing one bit of android code. Next is to see how far I can push the loading of the app using kendo UI really interested to see how it performs.

First blog post should be an interesting development, diving into PhoneGap to see how easy it is to take an existing HTML5, CSS, JS web application and making it native.

Just trying it out at this stage, also want to have a look into how this will work with Kendo UI 

Hopefully will be a smooth transition across as PhoneGap is touting that it is somewhat simple to make this transition. Fingers crossed.


First step is to head over to the getting started guide for Android as I am planning to test first on Android, then will move to iOS. Will post soon with any issues that occur during installation and first app.