Home > Cordova, jQuery, Windows Phone 7 > Developing mobile applications with PhoneGap and JQuery Mobile

Developing mobile applications with PhoneGap and JQuery Mobile

Introduction

For a very long time I have avoided learning HTML and ASP.Net and stayed away of applications using it. I didn’t wanted to end up with messy code and hacks to support multiple browsers (read: Internet Explorer 6.0). But as HTML5 and CSS3 are gaining more momentum, I have changed my mind and I have started learning HTML, CSS and JavaScript. Even if these technologies have their annoyances, they are THE way to develop cross platform software applications.

Recently there was a lot of buzz around PhoneGap. This a software framework that allows wrapping HTML5 applications into native applications for various mobile platforms (including iPhone, Android and Windows Phone). The idea of developing a mobile application for multiple platforms with a single code base is very tempting.

During the article I have still used the old name PhoneGap, but the framework has recently been open-sourced and renamed into Cordova (http://incubator.apache.org/projects/callback.html). Adobe will continue to offer a commercial version using the PhoneGap branding (http://phonegap.com/).

During the past days, I have developed a simple Todo Application using the following technologies:

  • PhoneGap to wrap in into a native application.
  • JQuery Mobile for the UI.
  • HTML5 local storage to store the user data.
    The applications consists of 6 screens and runs completely local; it does not require internet access to function. Theoretical it should be able to run on iPhone, Android and Windows Phone, but I was only able to test on a real Windows Phone device and on the desktop versions of Firefox, Safari and Chrome. So although it was not tested on multiple devices, I don’t expect a lot of issues when running it on IOS or Android.

todo1 todo2

PhoneGap & JQuery Mobile

I selected JQuery Mobile for the user interface because I like using JQuery for JavaScript development and thus it seemed the most natural choice for my screens. JQuery Mobile was pleasant and easy to use; in no time I was able to develop my screens using a simple HTML syntax combined with HTML5 data-* attributes.

I tested the application both on local browsers (Firefox, Chrome, etc.) and on the Windows Phone mobile browser. But the issues started when I started wrapping my HTML code into PhoneGap. Suddenly nothing still worked. After some trial and error, I discovered that it was required to add the PhoneGap JavaScript library to the web pages, even if you don’t need to use any special features of PhoneGap.

A second issue that I discovered was that JQuery Mobile and PhoneGap currently don’t work good together on Windows Phone 7. I was using a single HTML file per page, but the only thing that worked was either disabling the AJAX based loading of pages in JQuery Mobile or reverting to multi page HTML files. I choose for the multi page HTML files.

I hope that the page loading issue on Windows Phone will be fixed by either the PhoneGap or the JQuery Mobile developers as it is annoying.

Debugging

Debugging a HTML application wrapped in PhoneGap is not possible. The only option is to test and debug it with the developer tools of desktop browsers. If something goes wrong on the mobile device in PhoneGap, the only thing you can do is using old school console log statements to figure out what is happening.

I solved this issue this by creating two projects: a web application and the phone gap WP7 project. I develop and test with the web application project on a local browser and when I want to run it on a device, I execute a script to put the HTML  and JavaScript code into the WP7 project. Below you can find the synchronization script that I used:

@ECHO OFF

SET sourceDirectory=Html5TodoApp
SET destinationDirectory=Html5TodoApp.WindowsPhone\www

MKDIR %destinationDirectory%\images\

COPY "%sourceDirectory%\*.js" %destinationDirectory%\
COPY "%sourceDirectory%\*.html" %destinationDirectory%\
COPY "%sourceDirectory%\*.css" %destinationDirectory%\
COPY "%sourceDirectory%\images\*.gif" %destinationDirectory%\images\
COPY "%sourceDirectory%\images\*.png" %destinationDirectory%\images\

patch.exe "%destinationDirectory%\index.html" index.patch

The patch of my index.html file is required because for PhoneGap I have to add a reference to the cordova.js file. Something that is not possible in a regular browser. The “index.patch” is a regular patch file that saves me from having to update my index.html manually when I copy the source code to the PhoneGap project.

*** C:\Users\Pieter\Documents\Visual Studio 2010\Projects\Html5TodoApp\Html5TodoApp\index.html    Thu Mar 22 17:15:13 2012
--- C:\Users\Pieter\Documents\Visual Studio 2010\Projects\Html5TodoApp\Html5TodoApp.WindowsPhone\www\index.html    Thu Mar 22 17:20:51 2012
***************
*** 4,9 ****
--- 4,10 ----
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<title>Todo Demo Pieter</title>
<link rel="stylesheet" href="jquery.mobile-1.1.0-rc.1.css" />
+         <script src="cordova-1.5.0.js"></script>
<script src="jquery-1.7.1.js"></script>
<script src="jquery.mobile-1.1.0-rc.1.js"></script>
<script src="todo.logic.js"></script>

Conclusion

Would I recommend developing mobile applications using PhoneGap? It would depend on the application. It was a little bit more difficult to develop and test everything compared to using c# and Silverlight and the performance of the interface was also less “fluent” than a native application on my Nokia Lumia 800. But the big advantage is that my application can run on multiple platforms with almost the same code and this can be important for companies that want to deploy their business application on multiple platforms.

  1. March 28, 2012 at 00:54 | #1

    Thanks for the write up. I’d also recommend to try Tiggzi (http://tiggzi.com), a cloud-based jQuery Mobile and PhoneGap app builder. You can build apps incredibly fast connected to any REST API. As for testing PhoneGap features – we got a special app which will launch the app your are developing as native – allowing you to test all PhoneGap features.

    I run developer relations at Tiggzi. If you got 20 minutes, I’ll be happy to do a demo for you.

  2. April 22, 2012 at 04:31 | #2

    I am trying to make a jquery/phonegap app right now. I oscillate between optimism and pessimism. Right now I am optimistic. :)

    • pieterderycke
      April 23, 2012 at 07:43 | #3

      It is indeed not always a walk in the park to use jquery mobile and phonegap together, but the fact that you easily target multiple platforms with a single code base is definitely worth the effort.

  3. May 1, 2012 at 15:43 | #4

    Another cloud-based PhoneGap build service is Nomad (http://www.vsnomad.com/). This is a Visual Studio extension which allows you to do single click builds for iOS and Android from within the IDE.

  4. May 12, 2012 at 11:29 | #5

    Hi Peter,

    I am Usha Iyer, a Senior Acquisition Editor with Packt Publishing. As an Acquisition Editor, it is my role to evaluate, develop and ultimately bring book ideas to publication. I am also responsible for finding the right author for any book; bringing them onboard, then working with them as the book is written.

    I have begun to develop a title on ‘jQuery mobile hotshot’ and am now looking for an author to write this book. This book will consist of a couple of projects with jQuery mobile in increasing order of complexity.
    You can find some more information about writing for us at Packt’s website http://www.packtpub.com/authors.

    Please contact me if you are interested in writing this book and I would love to discuss the opportunity with you further.

    Even if you do not want to involve yourself in the project, can you please suggest someone who may suit this project?

    Thanks,
    Usha
    Email: ushai@packtpub.com

  5. Per
    May 29, 2012 at 11:23 | #6

    The Ripple emulator simplifies Phonegap/Cordova development:

    The Ripple Emulator includes:
    Support for multiple devices, platforms and form factors
    Emulation of WebWorks and PhoneGap™ APIs
    Emulation of device sensors such as GPS and Accelerometer
    Quick web browser like environment without the need to compile your app
    Web Inspector for debugging, profiling and memory usage tools.
    Integrates with the BlackBerry WebWorks SDK

    https://developer.blackberry.com/html5/download/ripple

  6. June 9, 2012 at 17:29 | #7

    nice intro , I like and like the content :) keep moving up !

  7. June 9, 2012 at 21:31 | #8

    Reblogged this on Mustafa Adel Elnagar and commented:
    JQuery Mobile and Dream waver cs6

  8. June 15, 2012 at 20:46 | #9

    When you said “I choose for the multi page HTML files” do you mean you opted for multiple html files or the single page application model with ajax loading? I ask because I believe I am having the same issue and cannot navigate between pages defined in the same html file (#page1 #page2 ) Did you find a fix for this issue?

  9. pieterderycke
    June 16, 2012 at 07:07 | #10

    What worked for me on Windows Phone with PhoneGap/Cordova, was multiple pages in the same HTML file. In the browser of Windows Phone, I did not have this issue and I could use both models (separate HTML file per page and multiple pages in the same HTML file). In which context (device, browser, …) are you using jQuery Mobile?

  10. June 17, 2012 at 06:42 | #11

    I found that the latest cordova download solved my problem. The issue was with the older phonegap template. Thanks

  11. Fred G. Vader
    July 20, 2012 at 19:26 | #12

    For a very long time I have avoided learning HTML and ASP.Net and stayed away of applications using it.

    LOL and I thought I was the only one who felt that way! Thanks to MVC/Razor web development is starting to look a bit more appealing. Mobile development is really taking off though so like you I’m starting to look into H5/Jquery a bit more these days.

    Its still a mess though. I did a search for “best ide to use for phonegap” and got back 10 different suggestions! Which is how I ended up here. Can’t seem to find a straight answer anywhere? Any suggestions?

    My background is C#/.Net so of course would prefer VS but actually found a stackoverflow page recommending against it. Others recommend Dreamweaver. Thoughts???

    • pieterderycke
      July 20, 2012 at 20:14 | #13

      I use Visual Studio 2010 combined with ReSharper. It is maybe not the absolute best IDE for JavaScript, but combined with ReSharper it does a very good job and it is the IDE I am used to the most.

      But you should have a look at Visual Studio 2012, the JavaScript support has been rewritten completely and is state of the art. I have seen a number of demos of it on TechEd and I was very impressed. It will go RTM soon.

      • Fred G. Vader
        July 20, 2012 at 20:52 | #14

        I just recently installed VS 2012 on top of the Win 8 Consumer Preview. I’ll give that a shot this weekend, Thanks!

      • Fred G. Vader
        July 21, 2012 at 20:39 | #15

        no dice using VS 2012. Apparently there is no Windows Phone sdk support for VS 2012 (way to go MS!). They will supposedly be releasing a new sdk in a few months with the release of WP8. And to make things even more fun, WP7 sdk in VS 2010 no longer works because I installed the Win 8 consumer preview. So whenever I try to run the emulator I get a “compatibility” error! MS really thought this one thru…

      • pieterderycke
        July 27, 2012 at 08:05 | #16

        Just to let you know. The WP8 SDK has just been leaked. So an official release will be just around the corner. Letting you test and develop for mobile on VS2012 and Windows 8

      • Fred G. Vader
        July 27, 2012 at 16:16 | #17

        Thanks, I saw that last night on engadget also, exciting indeed. BTW, I was finally able to get the emulator to run on VS 2010 under Windows 8. MS put out an 7.1.1 update earlier in the year to allow the emulator to run on Win 8. Here’s a link to the CNet article I found which pointed me to the update in case anyone else is interested. Thanks again!

        http://www.techrepublic.com/blog/australia/update-brings-windows-phone-7-development-to-windows-8/836

  12. August 24, 2012 at 02:48 | #18

    The most annoying with Jquery Mobile with Phonegap is the flicker when you want to use transitions effects. For a flip second, you see raw html without css during the transitions.
    Have you had any experience with this?

  13. October 20, 2012 at 09:02 | #19

    It should be able to run on iPhone, Android and Windows Phone, but I was only able to test on a real Windows Phone device and on the desktop versions of Firefox, Safari and Chrome. Thanks for provide good knowledge.

  14. Brian Case
    April 24, 2013 at 12:43 | #20

    Thank you for this article. Is the full TODO app code available anywhere for download and study?

  1. March 27, 2012 at 13:03 | #1
  2. March 27, 2012 at 13:03 | #2
  3. March 29, 2012 at 02:34 | #3

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: