In this series of posts, I’m going to discuss how to build a jQuery Mobile HTML5 App that talks to Drupal 7 using AJAX, REST and JSON. I’m going to use the PhoneGap project to create an iPhone application out of the jQuery Mobile app that you can install onto your iPhone. Using PhoneGap, you can also create apps for Android, WebOS, Android, Blackberry, and Symbian.

This first post in the series will get you up and running with jQuery Mobile and PhoneGap on iOS with XCode 4. We’ll get to Drupal a little bit further down the road, so if you just want to do some apps that don’t connect to a server, this post should be useful.

I’m going to use Drupal 7 as the server for the app. Drupal 7 has a lot of functionality built in, but not web services, so you will need to install the Services 3 module.

To build the client application, first download and install the latest version of PhoneGap, following the directions for getting started here:

http://www.phonegap.com/start#ios-x4

For this post, I’m using XCode 4 as the IDE for iOS, so I linked to the specific directions for that platform. I’m also going to target iOS 4.x and above, using the PhoneGap Media Capture API to access the camera.

After running the PhoneGap installer, open XCode 4 and start a new project. You should see the PhoneGap template as one of your options:

Click Next on the Choose your template dialog

I’m going to use DrupalApp as my Product Name, and com.jefflinwood as my company identifier.

Click Next.

Now put your new project into a folder of your choice (for instance, under your home directory’s Documents), and let XCode 4 create a local git repository if it offers to.

Click Create

XCode 4 will do some processing, and then you should see your new DrupalApp project in Xcode.

Hit the Play button in the upper left hand corner of XCode to run your project in the iPhone Simulator. PhoneGap will load, but it won’t have any content to display. The first time you run your project, PhoneGap will actually create a www folder you can drag into XCode to get started. Here’s what the iPhone Simulator will look like:

Now that we have our XCode project set up, and we’ve run our project, we need to add the www folder to our project. With the current version of PhoneGap, this needs to be done manually - the template isn’t set up to import the www folder into the XCode project. Luckily, this is pretty easy.

Open up the DrupalApp project folder in Finder. It should look like this:

Drag the www folder onto your XCode DrupalApp Project, right between DrupalApp and PhoneGap.framework. This is so XCode will bundle the contents of the www folder with your app when it packages the app to run on the iPhone Simulator or on an iPhone, iPod Touch, or iPad.

Xcode will prompt you to create folder references for any added folders - choose this option if the Create groups option is selected.

Click Finish.

Now run the project again, (stopping the currently running DrupalApp if it is still running) and PhoneGap should let you know it’s working:

The next step is to download and add jQuery Mobile (from http://jquerymobile.com/download/) to your XCode project. We will bundle the CSS, Javascript, and images into our app to minimize download times.

In the finder, create a new folder under the www folder named css, and copy the jquery.mobile-1.0b1.min.css file into the css folder. Create another folder under the www folder named javascripts, and copy the jquery.mobile-1.0b1.min.js file into the javascripts folder. You’ll also need to download jQuery 1.6.2 from http://code.jquery.com/jquery-1.6.2.min.js into your javascripts folder.

Now open the index.html in your www folder so we can add the CSS file and the two Javascript files.

In the index.html element, add

<link rel="stylesheet" href="css/jquery.mobile-1.0b1.min.css"/>

and

<script type="text/javascript" charset="utf-8" src="javascripts/jquery-1.6.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="javascripts/jquery.mobile-1.0b1.min.js"></script>

Now that we have jQuery Mobile added to our project, go ahead and run the project - you shouldn’t see any difference in the output from the iPhone Simulator. This is because jQuery Mobile expects your content to be in <div> tags that correspond to individual pages in your mobile application. This is a little different from what you might be used to, where each page in a web application is a separate HTML file. To minimize download time, and to enable transition effects between pages, it’s best to set up as many of your pages in one HTML file as possible. You can link to other HTML files, of course, but you may lose your transitions between the two - and mobile users strart to expect to see those transitions.

I mentioned that jQuery Mobile wants its content structured into <div> tags instead of individual HTML pages. With those <div> tags, you’ll need to tell jQuery Mobile how your content is structured with the new HTML5 data-* attributes. For instance, <div data-role="page">...</div> wraps a mobile page, while <div data-role="header">...</div> is the header and <div data-role="content">...</div> is the content of the page.

We’re going to replace the contents of the tag of our index.html with some content structured for jQuery Mobile:

<body>  	  
  <div data-role="page" id="home">         
    <div data-role="header">             
      <h1>Home</h1>                       
    </div>         
    <div data-role="content">
      Welcome to the jQuery Mobile Demo App for Drupal!         
    </div>     
  </div> 
</body>

Run the app in the iPhone Simulator:

In the next post, I’m going to show you how to use PhoneGap’s cross-platform features to take photos with your smartphone’s camera.