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.

9 thoughts on “Building a jQuery Mobile HTML5 App with PhoneGap for Drupal 7, Part 2

  1. Nadir H

    Dear Jeff,
    This is an amazing tutorial and very timely, definitely need these tutorials since they mention about integrating drupal as well. I was trying to connect the dots on Jquerymobile and Phonegap but you have taken it as far to drupal as well which is the final destination for my current app. A couple of questions:

    1. I am not sure if I saw part 3 , So I am eagerly looking forward to it.
    2. We currently have Drupal 6 , so would it be possible to follow the same steps for 6 as well.

    Thank you.

  2. Pingback: Mobile team update: Week of July 11th | jQuery Mobile

  3. manny

    Great tutorial. Quick question- Where would the script that you add to bind to tap event go in index.html? would it be in head after including phonegap and jquery mobile?

    1. admin Post author

      Yes – you want to load the Javascript source files, then add your onDeviceReady bindings.
      Thanks,
      Jeff

  4. Michael

    Quick question

    My site isn’t working, but when I take out this line: It works and when I put this line back, the button don’t work ( on my phone off course ;) )

    Any ideas? It looks like a conflict between jquerymobile and jquey script

  5. admin Post author

    Hi,

    Which line? Looks like the WordPress super comment spam protector took out your script tag from your comment :)

    Jeff

  6. Michael

    It’s not to do anything about your explanation. I have also a phonegap and querymobile app and I want to add a notification alert on a link. Now I added this line: onclick=”showAlert(); but then it doesn’t work.

    When I delete a line of code like this one jquery.js. Then it works :S haha.
    Any idea ?

    1. admin Post author

      Hmm, there might be a syntax error. Open up your www/index.html in your web browser and then open the web browser’s error console and see if there are some syntax errors.

      You can also use Weinre for debugging PhoneGap applications, but that’s pretty clunky.

Comments are closed.