A. Installing the PhoneGap Files
Installing PhoneGap is a pretty straightforward process. Point your browser of choice to www.phonegap.com, and then click the Download icon in the upper-right corner of the landing page, as highlighted in Figure A-1. You should be redirected to a page, and the most recent version of PhoneGap will automatically begin downloading in a few seconds. If the download does not start automatically, simply click the download link provided on the page to download the files directly.
Figure A-1 The PhoneGap project landing page
The PhoneGap project files are distributed in a standard zip archive. To install PhoneGap, simply extract the downloaded files to the folder of your choice on your local hard drive or on a network server (in cases where the files will be shared with other developers or between multiple systems).
Because many Java applications on Windows used to have issues with spaces in folder names, I typically install the PhoneGap files off of the root of the system’s hard drive, as shown in Figure A-2. In this case, I extracted the files and then renamed the root PhoneGap folder to the version of PhoneGap, as shown in the figure. This approach has saved me some grief with other tools in the past. The files you will used to build PhoneGap applications are located in the lib folder.
Figure A-2 PhoneGap installation directory
As you can see, the PhoneGap project files include a separate folder for each supported mobile device platform. Those folders contain the specific project files and associated PhoneGap JavaScript libraries for each target operating system.
It’s important to note that PhoneGap source files differ greatly between each target OS. You can’t use the PhoneGap JavaScript libraries for one mobile platform in a project for another mobile platform. This is one of the issues that makes PhoneGap development complicated and creates the need for PhoneGap Build (described in Chapter 9).
Preparing for Samsung bada Development
For some reason, the PhoneGap JavaScript source code files for bada are distributed as separate JavaScript files for each API category instead of consolidated into a single file as they are for other platforms. Before you can use the PhoneGap JavaScript APIs in your PhoneGap applications for bada, you must first generate the consolidated source code file phonegap.js. To do this, open a Windows command prompt, navigate to the PhoneGap installation’s bada/Res/PhoneGap folder, and execute the phonegap.bat file located in the folder. The batch file will copy each of the source JavaScript files into a single phonegap.js file and display the output shown in Figure A-3.
Figure A-3 Generating the bada phonegap.js file
If you look in the folder, you will see a new file there called phonegap.js, all ready to be used in your PhoneGap applications. Any time you modify any of the source JavaScript files, you will need to repeat this process to generate an updated phonegap.js file for your projects.
Preparing for iOS Development
For iOS development with PhoneGap, you must perform an additional installation step to configure Xcode, Apple’s development environment for iOS, for PhoneGap development. In Finder, navigate to the iOS folder within the PhoneGap installation files folder, as shown in Figure A-4. Double-click the Cordova-1.5.0.dmg file to start the installation process.
Figure A-4 PhoneGap iOS file folder
Finder will extract the files and then open a window similar to the one shown in Figure A-5. Double-click the Cordova-1.5.0.pkg file to install the PhoneGap files into the Xcode IDE.
Figure A-5 PhoneGap installation package
Once this step has been completed, Xcode will have an additional project template (PhoneGap) to select from when creating new projects.
Preparing for Windows Phone Development
To simplify PhoneGap development on Windows Phone, the PhoneGap project includes a plug-in to Microsoft Visual Studio that allows Visual Studio to create complete PhoneGap projects with a few clicks of the mouse.
Open Windows Explorer, and navigate to the folder where you extracted the PhoneGap files. In the WP7 folder, copy the GapAppStarter.zip file to Visual Studio’s project templates folder. The destination folder should be located under the Windows Documents folder for the currently logged in user. The folder should be located here:
c:usersuser_nameDocumentsVisual Studio 2011Templates
ProjectTemplates
In this example, user_name refers to the user-specific profile folder for the logged-in user. For example, for my developer workstation running Windows 7, the folder is located here:
c:usersJohn M. WargoDocumentsVisual Studio 2011Templates
ProjectTemplates
After the zip file is copied, the folder contents should look similar to what is shown in Figure A-6. Alternatively, you can place the GapAppStarter.zip file in the Visual C# folder instead; it seems to work in that location as well.
