Transferring Existing Code into a PhoneGap App

In the last chapter, we put a fair bit of effort into our boilerplate mapping application, so we will use those files in the new MapTest project as well.

We will work through the process of embedding the application step by step here:

1. Copy the mapapp.html, mapapp.css, and mapapp.js files from the snippets directory into the assets/www folder of our new MapTest project.

2. Copy the entire img directory that accompanies the mapapp.html file to the assets/www folder also. This will result in the four images being stored in the assets/www/img directory.

CHAPTER 9: Native Bridging with PhoneGap

3. Copy jquery-1.4.2.min.js from the shared js library of our sample code into the assets/www folder also.

4. Delete the existing index.html and master.css files from the assets/www folder, but leave phonegap.js, as it will be required to enable the bridging calls.

5. Rename the mapapp.html file to index.html so it becomes the file that is opened with the native application is launched. At this point, the folder structure of the assets/www folder should look like Figure 9–13. If your folder structure matches, then continue on and make the modifications to the index.html file to reference the updated file locations. These are outlined in the final two steps.

NOTE: While we have been very good at referencing and reusing libraries such as jQuery from a central location for the examples in the book so far, once we start working with a PhoneGap project, we aren’t able to do that anymore.

We will instead have to copy these shared resources into the assets/www folder; otherwise, they will not be transferred as part of the native bundle. When working with larger projects, we would additionally recommend implementing some kind of build script to handle transferring the required resources into your bridge application. This will make it simpler to work on a central code base that is able to be deployed directly to the Web and also through native wrappers like PhoneGap.

For more information on build tools, we recommend looking at Apache Ant ( http://ant.apache.org) given the Android platform is Java based; however, if you are looking for build alternatives, then Rake ( www.rubyrake.org) is also worth a look.

CHAPTER 9: Native Bridging with PhoneGap

Figure 9–13. The structure of the assets/www folder in the MapTest PhoneGap project

6. Make some tweaks to the new index.html and mapapp.js files so that they reference the files stored within the assets/www folder and nothing above that. The only modification that is required is changing the path of the jQuery library to reference the one stored in the assets/www folder instead of the shared location we have been using.

7. Include phonegap.js in the main HTML file so we can use the bridging functions provided by PhoneGap.

The modifications to the updated index.html file (previously mapapp.html) are shown here:

<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <link rel="stylesheet" media="screen" href="mapapp.css" /> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript" src="mapapp.js"></script> <script type="text/javascript" src="phonegap.js"></script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script> <script type="text/javascript"> function initialize() {

CHAPTER 9: Native Bridging with PhoneGap

var latlng = new google.maps.LatLng(-33.866, 151.209);

MAPAPP.init(latlng, 13); MAPAPP.addMarker(latlng, 'Sydney', 'Sydney Australia'); MAPAPP.addMarker(new google.maps.LatLng(-33.859, 151.209), 'The Rocks'); MAPAPP.addMarker(new google.maps.LatLng(-33.857, 151.215), 'Sydney Opera House'); MAPAPP.addMarker(new google.maps.LatLng(-33.861, 151.211), 'Circular Quay');

// update the map display MAPAPP.updateDisplay();

} // initialize </script> </head> <body onload="initialize()"> <h1 class="simple floating">Mapping App Boilerplate</h1> <div id="map_canvas" style="width:100%; height:100%"></div> <div id="marker-nav">

</div> <div id="marker-detail" class="child-screen">

<div class='content'>Some Test Content</div> <button class='close'>Close</button>

</div> </body> </html>

As you can see, although we went through a number of steps to copy the files across, only very simple changes are required to the HTML. Our web application is now all wrapped up in PhoneGap and can be deployed as a native application. This is done by once again building the application (using Ant) to redeploy the application to the emulator.

A screen capture from the emulator running our native MapTest application is shown in Figure 9–14.

CHAPTER 9: Native Bridging with PhoneGap

Figure 9–14. Our boilerplate mapping application wrapped up as a PhoneGap native application If you get a different result and the map does not display as expected, then try running

the following command and look for possible JavaScript errors: adb logcat For instance, Figure 9–15 shows some example output when the jQuery JavaScript

included in the index.html file isn’t updated correctly.

CHAPTER 9: Native Bridging with PhoneGap

Figure 9–15. For locating JavaScript errors, adb logcat is invaluable. As mentioned earlier, Appendix A contains more information on debugging Android web

apps (and JavaScript) in general, so, if things aren’t going to plan, it’s well worth a look.

Transferring Existing Code into a PhoneGap App