Archive

Archive for March, 2012

Developing mobile applications with PhoneGap and JQuery Mobile

March 26, 2012 24 comments

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.

Microsoft patterns & practices: Project Silk

This was already released a few months ago, but I still want to share it with you: Microsoft patterns & practices has released guidance around building modern browser applications. The guidance includes both a written e-book and a sample web application. If you or your company want to rethink your current web application architecture this is a must read.

The guidance describes both the client side code (how to create jQuery UI widgets, how to achieve modularity with JavaScript, how to do client side caching, …) and the server side implementation based on ASP.Net MVC.

You can find the guidance at Codeplex:
http://silk.codeplex.com/

Categories: C#, jQuery

Using ASP.NET filters with the Ninject Depencency Resolver

Recently, I had an issue activating authorization in an ASP.NET MVC application. No matter what I tried to do, applying the AuthorizeAttribute to my controller methods had no effect. But in a dummy MvcApplication the AuthorizationAttribute worked without issues. After some debugging, I discovered that this was caused by the NinjectDependencyResolver I used to hook Ninject into the ASP.NET MVC stack.

An IDependencyResolver instance is responsible for resolving of all the required components of the ASP.NET MVC stack; it does a lot more than only resolving controllers. At a given moment during then processing of a request, ASP.NET MVC asks the dependency resolver to get all the IFilterProvider instances. Because I had not bound any filter provider to my Ninject kernel, Ninject returned an empty collection. This caused ASP.NET MVC not to use the default filter provider but to use no filter provider at all. Once I detected this behavior, the solution was very simple; I just had to register the default attribute based filter provider in my Ninject kernel.

kernel.Bind<IFilterProvider>().To<FilterAttributeFilterProvider>();

If you only want to use Ninject (or any other IoC container) for resolving controllers, another solution could be not to use an IDependencyResolver but to use an IControllerFactory to hook the IoC container into the ASP.NET MVC stack. This way, the IoC container will only create controller instances and will not interfere with the rest of the ASP.NET MVC stack. Allowing you to use all the ASP.NET MVC defaults.

Categories: ASP.NET MVC, C#, Ninject