Getting jQuery Mobile 1.4 and PhoneGap 3.1 to Work Together

Getting jQuery Mobile 1.4 and PhoneGap 3.1 to Work Together

Introduction

PhoneGap is a great platform for building mobile applications. If you know HTML, JavaScript and CSS, you can build native applications for just about every mobile platform there is. The trick is that you build the application in HTML5 and use the plethora of tools provided by the PhoneGap application to hook into the device, giving you access to things like the device camera, gps, contacts list, and much more.

In this article, we are going to implement the latest version of jQuery Mobile into our PhoneGap application. jQuery Mobile is an UI framework that gives you a mobile friendly user interface that is both cross-platform as well as cross browser compatible, and the combination of the two gives you a realistic mobile experience with very little work involved.

Create Your PhoneGap 3.x Application

The first thing you need to do is setup your PhoneGap application. If you are not sure how to do this, first follow the previous article in this series here. Once your PhoneGap application is set up, you should have the following directory structure setup in the application:

Default PhoneGap project structure

To run the PhoneGap application in the IOS simulator on my mac, I use the command-line as explained in the setup tutorial, as follows:

If I run the PhoneGap application in the IOS simulator now (using the command-line utility from in the setup tutorial), the result is:

In this tutorial we are only concerned with the ‘/www’ directory, which contains the HTML, CSS and JavaScript files for the application (among other things). We are going to install the jQuery Mobile files in the ‘/www/js’ directory, and then we are going to tell PhoneGap to use jQuery mobile.

Install jQuery Mobile 1.4

jQuery mobile 1.4 is currently a release candidate, but we’re going to use this for the following reasons:

  1. jQuery Mobile 1.4 uses a new UI that is much more mobile friendly
  2. jQuery Mobile 1.4 will be released as a stable version soon, and the previous installation processes (1.3.x) will then become superfluous.
  3. I have built a professional application using JQM 1.4 RC1, and it is already quite stable.
  4. I like pushing the limits, and JQM 1.4 stable is due anytime now.

Head to http://jquerymobile.com/ and look at the header of the page. You’ll see this:

fig 4

Click on the yellow bar that “JQUERY MOBILE 1.4.0 RC1 RELEASED!”

This will bring you to the blog entry announcing the release of JQM 1.4. Scroll down to the download section of the page, and download the ZIP files, as seen below:

Download the ZIP files

Unzip the directory and you will see these files inside

Rename the folder to “jquery.mobile-1.4.0” and drop it in the “www/js” directory of your application.

jQuery Mobile does not ship with a version of jQuery, so it is up to us to get that. Head over to http://jquery.com/download/and download the latest version of jQuery. Drop it into the “www/js” directory, next to your jQuery Mobile directory, as seen below:

Note the jquery.js file in the www/js directory

Link JQM to PhoneGap

Looking at the default www/index.html page that is created by the PhoneGap application, we see the following:

Note line 39, calling the ‘initialize’ method of the app object, seen in index.js below

The file “www/js/index.js”, which you can use as the starting point for your application

We include these JavaScript files in “www/index.html” in the following manner:

Note highlighted section, and the corresponding lines as noted below.

  • Line 41: phonegap.js – this is inserted by PhoneGap and is required when PhoneGap builds, but is not pointing at anything in the “www” directory.
  • Line 42: index.js – this is your file where you manipulate the application
  • Line 43: jquery.js – the latest version of jQuery, required by jQuery Mobile
  • Line 44: jquery.mobile-1.4.0-rc.1.js – the latest version of jQuery Mobile 1.4

Update Application

So now we have jQuery Mobile linked up to our application, and when we fire up the application, it will wait until the device is ready for PhoneGap to start receiving input from the app, and then launch. As you know, when the index.html file is loaded, it will load the jQuery Mobile files and call the “app.initialize()” method, which then waits for the device to be ready. If we look at the image below, I setup an alert to fire when the device is ready:

www/js/index.js

When I run the application in the simulator, the “deviceready” event does fire:

Device-Ready event fires

And when I dismiss the alert, our jQuery Mobile app is ready to start listening for more events:

PhoneGap + jQuery Mobile 1.4 App running

Conclusion

As we can see, it is quite simple to get jQuery Mobile running inside the PhoneGap application. This gives us quite a powerful application with a lot of functionality and—if we do it right—a native looking application. All you need now is to use your imagination and creativity to create any app you want to.

devx-admin

devx-admin

Share the Post:
Advanced Drones Race

Pentagon’s Bold Race for Advanced Drones

The Pentagon has recently unveiled its ambitious strategy to acquire thousands of sophisticated drones within the next two years. This decision comes in response to

Important Updates

You Need to See the New Microsoft Updates

Microsoft has recently announced a series of new features and updates across their applications, including Outlook, Microsoft Teams, and SharePoint. These new developments are centered

Price Wars

Inside Hyundai and Kia’s Price Wars

South Korean automakers Hyundai and Kia are cutting the prices on a number of their electric vehicles (EVs) in response to growing price competition within

Solar Frenzy Surprises

Solar Subsidy in Germany Causes Frenzy

In a shocking turn of events, the German national KfW bank was forced to discontinue its home solar power subsidy program for charging electric vehicles

Advanced Drones Race

Pentagon’s Bold Race for Advanced Drones

The Pentagon has recently unveiled its ambitious strategy to acquire thousands of sophisticated drones within the next two years. This decision comes in response to Russia’s rapid utilization of airborne

Important Updates

You Need to See the New Microsoft Updates

Microsoft has recently announced a series of new features and updates across their applications, including Outlook, Microsoft Teams, and SharePoint. These new developments are centered around improving user experience, streamlining

Price Wars

Inside Hyundai and Kia’s Price Wars

South Korean automakers Hyundai and Kia are cutting the prices on a number of their electric vehicles (EVs) in response to growing price competition within the South Korean market. Many

Solar Frenzy Surprises

Solar Subsidy in Germany Causes Frenzy

In a shocking turn of events, the German national KfW bank was forced to discontinue its home solar power subsidy program for charging electric vehicles (EVs) after just one day,

Electric Spare

Electric Cars Ditch Spare Tires for Efficiency

Ira Newlander from West Los Angeles is thinking about trading in his old Ford Explorer for a contemporary hybrid or electric vehicle. However, he has observed that the majority of

Solar Geoengineering Impacts

Unraveling Solar Geoengineering’s Hidden Impacts

As we continue to face the repercussions of climate change, scientists and experts seek innovative ways to mitigate its impacts. Solar geoengineering (SG), a technique involving the distribution of aerosols

Razer Discount

Unbelievable Razer Blade 17 Discount

On September 24, 2023, it was reported that Razer, a popular brand in the premium gaming laptop industry, is offering an exceptional deal on their Razer Blade 17 model. Typically

Innovation Ignition

New Fintech Innovation Ignites Change

The fintech sector continues to attract substantial interest, as demonstrated by a dedicated fintech stage at a recent event featuring panel discussions and informal conversations with industry professionals. The gathering,

Import Easing

Easing Import Rules for Big Tech

India has chosen to ease its proposed restrictions on imports of laptops, tablets, and other IT hardware, allowing manufacturers like Apple Inc., HP Inc., and Dell Technologies Inc. more time

Semiconductor Stock Plummet

Dramatic Downturn in Semiconductor Stocks Looms

Recent events show that the S&P Semiconductors Select Industry Index seems to be experiencing a downturn, which could result in a decline in semiconductor stocks. Known as a key indicator

Anthropic Investment

Amazon’s Bold Anthropic Investment

On Monday, Amazon announced its plan to invest up to $4 billion in the AI firm Anthropic, acquiring a minority stake in the process. This decision demonstrates Amazon’s commitment to

AI Experts Get Hired

Tech Industry Rehiring Wave: AI Experts Wanted

A few months ago, Big Tech companies were downsizing their workforce, but currently, many are considering rehiring some of these employees, especially in popular fields such as artificial intelligence. The

Lagos Migration

Middle-Class Migration: Undermining Democracy?

As the middle class in Lagos, Nigeria, increasingly migrates to private communities, a PhD scholar from a leading technology institute has been investigating the impact of this development on democratic

AI Software Development

ChatGPT is Now Making Video Games

Pietro Schirano’s foray into using ChatGPT, an AI tool for programming, has opened up new vistas in game and software development. As design lead at business finance firm Brex, Schirano

Llama Codebot

Developers! Here’s Your Chatbot

Meta Platforms has recently unveiled Code Llama, a free chatbot designed to aid developers in crafting coding scripts. This large language model (LLM), developed using Meta’s Llama 2 model, serves

Tech Layoffs

Unraveling the Tech Sector’s Historic Job Losses

Throughout 2023, the tech sector has experienced a record-breaking number of job losses, impacting tens of thousands of workers across various companies, including well-established corporations and emerging startups in areas

Chinese 5G Limitation

Germany Considers Limiting Chinese 5G Tech

A recent report has put forth the possibility that Germany’s Federal Ministry of the Interior and Community may consider limiting the use of Chinese 5G technology by local network providers

Modern Warfare

The Barak Tank is Transforming Modern Warfare

The Barak tank is a groundbreaking addition to the Israeli Defense Forces’ arsenal, significantly enhancing their combat capabilities. This AI-powered military vehicle is expected to transform the way modern warfare

AI Cheating Growth

AI Plagiarism Challenges Shake Academic Integrity

As generative AI technologies like ChatGPT become increasingly prevalent among students and raise concerns about widespread cheating, prominent universities have halted their use of AI detection software, such as Turnitin’s

US Commitment

US Approves Sustainable Battery Research

The US Department of Energy has revealed a $325 million commitment in the research of innovative battery types, designed to enable solar and wind power as continuous, 24-hour energy sources.

Netanyahu Musk AI

Netanyahu and Musk Discuss AI Future

On September 22, 2023, Israeli Prime Minister Benjamin Netanyahu met with entrepreneur Elon Musk in San Francisco prior to attending the United Nations. In a live-streamed discussion, Netanyahu lauded Musk

Urban Gardening

Creating Thriving Cities Through Urban Gardening

The rising popularity of urban gardening is receiving increased recognition for its numerous advantages, as demonstrated in a recent study featured in the Environmental Research Letters journal. Carried out by