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.
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.
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).
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:
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:
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.
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).
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.
Raymond Camden is a developer evangelist for Adobe. His work focuses on web standards, mobile, and ColdFusion. Raymond has worked on numerous books, including the ColdFusion Web Application Construction Kit, and has contributed to the Fusion Authority Quarterly Update. He also presents at conferences and contributes to online webzines. Raymond founded many community websites, including CFLib.org, ColdFusionPortal.org, and is the author of open-source applications, including the popular BlogCFC (blogcfc.com) blogging application. He is the happily married, proud father of three kids and is somewhat of a Star Wars nut. You can reach him at his blog (raymondcamden.com) or via e-mail at email@example.com.