Combining your web skills with PhoneGap to build mobile apps

by Raymond Camden

Developers have a wealth of options for creating engaging and powerful mobile applications. But what tools are available for designers or those who don't consider themselves coding experts? Designers can now use web standards they already understand, such as HTML, JavaScript, and CSS, in a whole new market: the mobile device. In this article, I discuss the tools and techniques for using web standards and explore how Adobe is helping designers and developers deploy their web projects to mobile devices.

Web standards are technologies for creating web content that are accepted across the industry, such as specifications, languages, and conventions. You have probably been using HTML, CSS, and JavaScript for years to create websites, and now you can use those same technologies to create apps that run on mobile devices. If you primarily work as a designer, then now is an excellent time to learn these web standards.

PhoneGap: Your bridge to mobile development

PhoneGap is an open-source project created by Nitobi. When Adobe acquired Nitobi, there was some question in the developer community as to what that meant for PhoneGap. To be completely clear: PhoneGap is an open-source project that has been moved to the Apache Software Foundation and will be completely driven and supported by the community—and remain free for everyone.

PhoneGap enables you to wrap your HTML and JavaScript code to function like a mobile app. How you wrap that code depends on your platform. As of version 1.3, PhoneGap runs on Android, BlackBerry Tablet OS, iOS, Windows Phone, WebOS, and Symbian. Each platform has its own particular setup and installation routine, but the end result is an HTML page that runs on your mobile device. Your HTML, CSS, and JavaScript are packaged by PhoneGap to run as a mobile application.

Now if that's all PhoneGap could do, then it probably wouldn't be worth using. You can already use your mobile browser to view websites, and there are techniques to make that content readable on small devices. Where PhoneGap shines is in how it extends your HTML and JavaScript features to work with the device. PhoneGap provides a basic JavaScript API (interface) to your device and allows you to do much more than a standard mobile website. These features include the following:

• Accelerometer enables you to track the relative motion of the physical device
• Camera provides full support for both taking pictures and working with existing pictures
• Capture helps you capture both audio and video
• Compass allows you to tap into the compass of the device
• Connection tells you if the device is connected and how it is connected
• Contacts offers full support for searching the user's contact database as well as adding new contacts
• Device provides basic information about the device, including the device's operating system
• Events detects various device-specific events, including resume, and is useful when a phone call interrupts your application
• File delivers basic file read and write operations for the device
• Geolocation tracks where the device is
• Media provides basic audio playback features
• Notification offers a richer notification system than the basic alerts and confirmation screens most mobile browsers provide
• Storage provides access to a SQLite database for your application and provides much richer support for data storage

Getting started with PhoneGap

The actual process of creating a PhoneGap application is a bit too detailed for this article, and it varies depending on the platform you are working on. (But I have provided some useful links at the end of this article.) The Get Started Guide details the process for each platform. The process essentially involves downloading the PhoneGap source, setting up a project in the IDE used for the target platform (such as Eclipse for Android or Xcode for iOS), and setting up a few configuration settings.

Conversely, users of Adobe Dreamweaver CS5.5 software will be happy to discover that PhoneGap support is baked right in. Sites can be configured to build to Android or iOS devices via PhoneGap. See the Dreamweaver Help and Support page for more information.

No matter what tool you use, the end result will be an HTML file and a JavaScript file called phonegap.js. This JavaScript file is platform-specific and provides the API hook for all the features described earlier. The following HTML file shows a simple application:

<!DOCTYPE HTML> 
    <html>
    <head>
    
    <meta name="viewport" content="width=320; user-scalable=no" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>PhoneGap</title>
    <script type="text/javascript" charset="utf-8" src="js/phonegap-1.3.0.js"></script>
    
    </head>
    
    <body>
    
    <h1>Welcome to Mobile!</h1>
    
    <p>
    Mmmmm, I love me some mobile goodness!
    </p>
    
    </body>
</html>
	    

It's probably not fair to call this an application with no logic and no links, but this example shows that developing for mobile devices isn't that different from developing for the web. We can build this HTML file out to a mobile device (see Figure 1).

Figure 1. You can use PhoneGap support in Dreamweaver CS5.5 to package HTML and JavaScript code for mobile devices.

Building an application

Now we should build an application that actually does something—something that isn't possible on a simple web page that's viewed on the mobile browser. Let's expand this code to provide a service: contact searching.

To begin, we need to create a special event that your PhoneGap applications can listen for. It's called deviceready, and it is an event that signifies your app can use the special PhoneGap features described earlier to start talking to the device hardware. The following is an update to our earlier code. Note the use of the init() call in our body tag as well as the event listener:

<!DOCTYPE HTML> 
    <html>
    <head>
        
    <meta name="viewport" content="width=320; user-scalable=no" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>PhoneGap</title>
    <script type="text/javascript" charset="utf-8" src="js/phonegap-1.3.0.js"></script>
    
    <script>
    function init(){
      document.addEventListener("deviceready", startup);
    }

    function startup(){
      alert('Ready');
    }
    </script>

    </head>
    <body onload="init()">

    <h1>Contact Search</h1>

    <form>
      <input type="text" id="name"><br/>
      <input type="button" id="searchButton" value="Search">
      <div id="results"></div>
    </form>

    </body>
</html>
	

I've added a simple form to prepare for the contact search. After that is an empty div we will use later for the actual result. Now that we've got a deviceready listener, we can start adding some logic. Here's the final version of the application:

<!DOCTYPE HTML> 
    <html>
    <head>
    
    <meta name="viewport" content="width=320; user-scalable=no" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>PhoneGap</title>
    <script type="text/javascript" charset="utf-8" src="js/phonegap-1.3.0.js"></script>
    
    <script>
    function init(){
      document.addEventListener("deviceready", startup);
    }

    function startup(){
      document.getElementById("searchButton").addEventListener("click", handleSearch);
    }

    function handleSearch(e){
        var search = document.getElementById("name").value;
        //What parts of the contact we will search
        var fields = ["displayName", "name"];
        //Options for the search
        var options = new ContactFindOptions();
        options.filter = search;
        options.multiple = true;
        document.getElementById("results").innerHTML="Searching...";
        navigator.contacts.find(fields, contactSuccess, contactError, options);
    }    

    function contactError(e){
    document.getElementById("results").innerHTML="";
    navigator.notification.alert("Sorry, an error was thrown!");
    }

    function contactSuccess(results){
    //No max, so we will default to only 10
    var s = "";
    for (var i = 0; i < Math.min(10, results.length); i++) {
    s += "<p>"+results[i].displayName+"</p>";
    }

    document.getElementById("results").innerHTML=s;
    }

    </script>
    </head>

    <body onload="init()">

    <h1>Contact Search</h1>

  <form>
      <input type="text" id="name"><br/>
      <input type="button" id="searchButton" value="Search">
      <div id="results"></div>
  </form>

  </body>
</html>
	

We've got a lot going on here, so let's tackle it bit by bit. First, note that in the startup function, we've added an event listener for the Search button on the form. An event listener is basically a segment of code that waits for something specific to happen and then takes a specific action. When the Search button is clicked, this event listener grabs the value from the search text field and performs the search.

The API that PhoneGap provides is what makes this cause-and-effect action possible on mobile devices. To use that API, we have to tell it what fields in the contact we want returned, what it should do when it actually has the data ready, and what it should do if some type of error occurs. We also pass a set of options to the API. By default, the find operation will return one match, so you need to specify that you want multiple results returned.

In the contactSuccess function, we are passing an array of contact records. There isn't a way to restrict the number of results, so we simply max it out at ten or the true number of results if that is fewer than ten. The display isn't fancy in this simple little application, but you can clearly see that it works (see Figure 2).

Figure 2. This app enables users to search for contacts on their mobile device.

Obviously there's a lot more we could do with this app—including enabling users to call, text, or email the contacts they have searched for.

Going further with PhoneGap

I hope this article convinced you that you can use the knowledge and skills you already have to create mobile applications today.

I've only scratched the surface of what's possible with PhoneGap apps. There's a lot more to learn. You can start with the PhoneGap docs. You can also look at jQuery Mobile, another project Adobe sponsors, for a way to dramatically enhance the UI of your applications.

For a comprehensive tutorial on creating a mobile app using your web skills, read the series Building a mobile app with PhoneGap and Dreamweaver by Steve Gill on the Adobe Developer Connection.

To see this technology in action, watch Kevin Hoyt's video series on PhoneGap, which gives a more technical overview of this framework for developing cross-platform mobile apps with existing web technologies.

‹ Back

---