Categories
jQuery Mobile Phonegap Uncategorized

First chapter of the PhoneGap, Drupal, jQuery Mobile e-book is up!

I’m excited to announce progress on my new e-book on PhoneGap, Drupal, and jQuery Mobile! I gave an interview on using Drupal with PhoneGap to Brian Lewis at Modules Unraveled last month. In addition to the podcast, which I really enjoyed making, I recorded a screencast on setting up PhoneGap, which I hope you enjoy.

The first chapter of my e-book covers the same ground, so I decided to release it as a free PDF, which you can download and enjoy. I’m happy to hear any feedback you have! I also wanted to let people read the first chapter for free, because you need to have a Mac with XCode 4 to follow along with the book, and I don’t want anyone to buy the book if they can’t use it.

Download Chapter 1 (1.1 Megs)

Categories
jQuery Mobile Phonegap

Announcing my eBook – jQuery Mobile + PhoneGap + Drupal 7

Last year, I worked on a blog post series about building a jQuery Mobile HTML 5 App with PhoneGap and Drupal 7. After getting really deep in the weeds on that project, I ended up with some very complicated JavaScript to manage the creation of Drupal nodes with an authenticated user.

That experience led directly to my creation of the Drupal Plugin for PhoneGap for iOS, which I used to really clean up the JavaScript needed to make a connection to Drupal. I’m really excited about getting Drupal developers into building mobile applications, and I’ll be co-presenting on Drupal and PhoneGap at DrupalCon Denver 2012!

I’m excited to announce that I’ve been rewriting that blog post series into a more thorough, step-by-step guide to building an HTML5/CSS/JavaScript app, and I’m going to make it available as an e-book! I’ve published several traditional programming books with Apress, and while I enjoy working with them, it can take a year or two after a project gets started before a book comes out on the shelves. This time around, I’m going to publish directly as a PDF that you can download.

I’m currently in the writing/revising stage of the project, but would love to hear feedback and line up some reviewers – contact me through this web site if you’re interested! Join the mailing list below, and I’ll keep you up to date with the latest announcements and updates.

 


Categories
iPhone Development jQuery Mobile Phonegap

Update on Drupal iOS Plugin for PhoneGap

I’ve made progress with the Drupal iOS plugin for PhoneGap, and I’m really happy with the results. I’m holding off on writing more posts in the Building a jQuery Mobile App with PhoneGap for Drupal series until I get all the functionality I need into the plugin – I’ve just got to add the file methods to upload a picture.

I’m also working on another Drupal demo app with jQuery Mobile and PhoneGap and the plugin – here’s a screenshot:

 

 

Link to the repo for the plugin : https://github.com/jefflinwood/Drupal-Plugin-for-PhoneGap-for-iOS

 

Categories
Drupal Planet jQuery Mobile Phonegap

Building a jQuery Mobile HTML5 App with PhoneGap for Drupal 7, Part 2

In this post, we’re going to add functionality to take a picture to our jQuery Mobile app using the PhoneGap Media Capture API. We’ll add a button with jQuery Mobile that brings up the mobile phone’s camera.

With jQuery Mobile, to make buttons, we can use the <a href> tag with a data-role=”button” attribute. If you’re submitting a form, use the <button> tag instead – jQuery Mobile will format both of those the same way.  We’ll go ahead and add a button that doesn’t do anything yet – replace the contents of the <div data-role=”content”> tag with this:

<div data-role="content">             
  Welcome to the jQuery Mobile Demo App for Drupal!             
  <p/>             
  <a id="takePhotoButton" data-role="button">Take Photo</a>         
</div>

Run it in the iPhone Simulator, and it looks pretty good for us not having to do too much!

We’ll take advantage of jQuery’s bind method and PhoneGap’s deviceready event for our button functionality.

One gotcha you will probably run into is that you’re used to binding to the click event with jQuery on desktop browsers. With jQuery Mobile, we need to bind to the tap event for our button instead.

We’re using the PhoneGap Media Capture API with the camera – only one line of Javascript needed to bring up the camera on the phone.

navigator.device.capture.captureImage(captureSuccess, captureError, {limit: 1});

You’ll need to provide functions to handle success and errors, along with PhoneGap’s CaptureImageOptions. In our case, we’re limiting the number of photos the user can take to one at a time.

Here’s the JavaScript we need to add to our index.html

<script> 
        function captureSuccess(mediaFiles) {
            navigator.notification.alert('Success taking picture:');
        }        
        function captureError(mediaFiles) {
            navigator.notification.alert('Error taking picture: ' + error.code);
        }
        $(document).bind("deviceready",function () {
            $("#takePhotoButton").bind("tap", function() {
                navigator.device.capture.captureImage(captureSuccess, captureError, {limit: 1});
            });
        });
</script>

You won’t be able to see this run in the iPhone Simulator, because the iPhone Simulator doesn’t have a camera – instead, you’ll need to run it on an actual iPhone (or iPod Touch or iPad with a camera).

In my next post, we’ll cover how to upload images to Drupal 7 using Services 3.

Categories
Drupal Planet jQuery Mobile Phonegap

Building a jQuery Mobile HTML5 App with PhoneGap for Drupal 7, Part 1

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 <body> 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.