Mobile development with JQuery Mobile and PhoneGap

In the previous post we explained how to create a mobile version of our HTML5 pages with CSS3 Media Queries. Now it is time to look at another choice we have when mobile development is mentioned: JQuery Mobile. As probably most of you may know there is a great Javascript library so named JQuery that can really help us in order to make web development.

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

Along with JQuery, you can find JQuery UI that is used as the UI library (widgets, themes, …). On top of both it is JQuery Mobile. The JQuery Mobile framewok combines HTML5 and JQuery features to make mobile development really easy.

The JQuery Mobile Framework. Main features.

You can find a full list of JQuery Mobile following this link. But I want to highlight some of them.

• Built on JQuery core. You don’t need to learn another language if you already know how to program with JQuery. Obviously there are some specific attributes that are solely used for JQuery Mobile.
• The JQuery Mobile Framework is fully compatible with most of the current devices browsers, Android and iOS among them.
• A HTML5 file can contain several pages.
• It is not only that you can develop HTML5 UI for almost any smartphone or table but also it allows you to develop native smartphone applications along with the PhoneGap framework.

An easy JQuery Mobile example.

The easiest way to start to develop with JQuery Mobile is using either a template from your prefered IDE or just copy-paste some code from Getting started JQuery Mobile. I’m currently using Adobe Dreamweaver CS5.5 and it comes with a really useful template for creating JQuery Mobile projects (besides that it contains a PhoneGap plugin to build Android or iOS native application from JQuery Mobile).

So, let’s get started. Open Adobe Dreamweaver CS5.5 and create a new HTML5 document from its templates.

Then you can inspect not only the generated JQuery code but also how it will look.

A quick look at the code.

I recommend taking a look at the Getting started JQuery Mobile link. But in our code we can easily realize several JQuery Mobile features.

• There is only one HTML5 file. Inside this file there are several div elements with a data-role attribute with a page value. What does it mean?. Well, as you have probably guessed it means that our project will have as many pages as div elements with a data-role of page. You can navigate one to other just by linking to their ids.
• There are some other data roles like header, footer, list-view and so on.

The JQuery Mobile and PhoneGap template from Adobe Dreamweaver CS5.5 creates four pages, the first one is the home page and the others can be seen by clicking in the list widget. You can also test it with Adobe Dreamweaver CS5.5 before upload the code to your host. You can test it in your browser.

I’ve modified just a little the template code adding a couple of thing.

• I’ve added a back button to one of my pages. You only need to set the attribute data-add-back-btn to true in the desired div element.
• Add some link with icons to home page, contacts and so.
• Modify the links values.

If you like you can check the code following this link. Feel free to download it and inspect it. This is how it looks through my device (HTC Desire S) browser.

Building a native app with PhoneGap.

PhoneGap is an HTML5 app platform that allows you to author native applications with web technologies and get access to APIs and app stores

PhoneGap is fully compatible with JQuery Mobile so in order to create a native application for any smartphone and tablet. How can this be possible?. Well, PhoneGap makes the trick to transform your JQuery Mobile projects to native application and all that you need to do is add a phonegap.js file to your HTML5.

Besides adding phoneGap.js to your development you need to do some more configuration stuff. I recommend you to take a look at PhoneGap Get started guide. However, in this post we are gonna use a different approach, we are gonna use Adobe Dreamweaver CS5.5 that provides an easy way to build native application with PhoneGap.

First of all you need to download the Android and iOS SDK. Once done you need to configure Adobe Dreamweaver CS5.5. Just click in the Site menu >> Mobile applications >> Configure Application Framework. Here you need to indicate where Adobe Dreamweaver CS5.5 will find Android and iOS SDK.

After that you need to configure the project as a native application. To do that go to Site menu >> Mobile applications >> Configure application.

And that’s all, now you can compile and test the application. Be aware that in order to create a native application is required that you have an index.html file. To compile the application Site menu >> Mobile applications >> Create (Android, iOS or both).

In the case of an Android application, an APK file will be create inside the bin project folder. You can install it in your mobile phone and see how it looks.

Now you have a native Android application developed with JQuery Mobile and PhoneGap. You do not need any device browser 🙂

Interesting links about JQuery Mobile and PhoneGap.

• JQuery Mobile Framework
• jQuery Mobile: What Can It Do for You?
• PhoneGap homepage
• Packaging web apps as mobile apps using PhoneGap and Dreamweaver
• Rapid prototyping with JQuery Mobile
• Dreamweaver CS5.5 New Features – JQuery and Phone Gap Support (Youtube)
• Videotutorial: Cómo crear una app móvil con Phonegap y Dreamwaver CS5.5 (Youtube – Spanish)

Books.

• jQuery Mobile: Up and Running by Maximiliano Firtman
• PhoneGap Beginner’s Guide by Andrew Lunny