Packaging web apps as mobile apps using PhoneGap and Dreamweaver

Dreamweaver CS5.5 now includes integration with PhoneGap—an open-source development framework for building mobile apps. The integration between the two is seamless, and you do not need to know anything about PhoneGap to take advantage of its functionality.

The Dreamweaver/PhoneGap integration lets you quickly deploy your web applications as native apps for Android- and iOS-based mobile devices. (A native application is one written to run on a specific operating system/device.) The PhoneGap framework acts as an API bridge between web applications and mobile devices. It helps you wrap web applications within mobile apps, even if you aren't familiar with coding languages such as Objective-C or Cocoa.

This tutorial shows you how to package an existing mobile app built in Dreamweaver. It does not show you how to build that application from scratch, nor does it show you how to deploy the packaged application on a mobile device. Those topics will be covered in other tutorials, scheduled for later publication.

Note: The mobile application you package with Dreamweaver is an application for debugging purposes only. The application will run in the Android and iOS emulators, or on your personal mobile device if you make the transfer, but you cannot upload the debug mobile apps to the Apple and Android stores. In order to upload iOS or Android apps, you must take the additional step of signing them outside of Dreamweaver. For more information about uploading applications to the Apple and Android stores, see the Android documentation, or the Program User Guide on the Apple iOS Provisioning Portal. (Before you can access the Apple iOS Provisioning Portal you must register with the Apple Developer Program [free] and enroll in the iOS Developer Program [annual fee].)

You must ensure that you meet the following system requirements before you can proceed with this tutorial.

MAC OS - iOS

• Mac OS X Snow Leopard version 10.6.x or later
• Xcode 3.2.x with the iOS SDK (You'll download this during the tutorial.)

MAC OS - Android

• Mac OS X 10.5.8 or later (x86 only)
• Android SDK (You'll download this during the tutorial.)

Windows - iOS

• iOS is only available for users with an Apple computer

Windows - Android

• Windows XP (32-bit), Vista (32- or 64-bit), or Windows 7 (32- or 64-bit)
• Android SDK (You'll download this during the tutorial.)

This tutorial uses a sample application to demonstrate native application packaging. The application is for Meridien 24/7—a fictional native application that lets you locate local restaurants on your mobile device.

Before you begin learning how to package the application, you need to install the sample files and set up a Dreamweaver site.

1. Download the sample zip, meridien_mobile.zip, unzip the file, and save it somewhere on your computer. I like to save all of my Dreamweaver sites in a central folder called Sites, located on my Windows C-drive.
2. Start Dreamweaver, and choose Site > New Site.
3. In the Site Name text box of the Site Setup dialog box, enter the name for the new site: Meridien.
4. In the Local Site Folder text box, enter the path to the meridien_mobile folder that you saved on your computer in step 1. You can click the folder icon to the right of the text box to navigate to the meridien_mobile folder.
5. When you're finished, click Save to close the Site Setup dialog box.

   The Dreamweaver Files panel populates with the files of your new site (see Figure 1).

The meridien_mobile folder contains all of the files for the web application, including the required JavaScript, CSS, and image files.

6. Double-click the index.html file in the Files panel to open it in the Document window. You do not actually need to have the index file open to package your application; we're just opening the file so that you can see what the application looks like, and how it works.
7. You won't see much in the Document window because Dreamweaver doesn't render the live application by default. Click the Live View button in the Document toolbar to see what the application looks like on a device or in a browser.
8. (Optional) You can play around with different window sizes for the application by selecting different options from the Window Size menu in the Status bar (lower-right corner of the Document window).

   The Window Size menu lets you see what the current page will look like in different devices (such as smart phones and tablets).

Again, you don't need to do any of this to package your application. This step just lets you see how the application might look in different devices.

Packaging a web application in Dreamweaver requires the iOS SDK (for iOS devices) and the Android SDK (for Android devices). Among other things, the iOS and Android SDKs let you run device simulators. The device simulators let you see what your application will look like on a mobile device, without having to test the application on an actual device.

Just to be clear, you do not need both SDKs to package web applications. You need the iOS SDK if you want to create apps for iOS devices, and you need the Android SDK if you want to create apps for Android devices.

Android

1. Choose Site > Mobile Applications > Configure Application Framework.
2. Click Easy Install, and then select a location for the Android SDK installation. The location can be anywhere on your computer (though Adobe recommends that you do not install the SDK to your site directory).

Note: If the Easy Install fails, please see tech note 90408.

Note: The installation does take a little time, so be patient.

3. After the installation is complete, click Save to close the Configure Application Framework dialog box.

iOS

The iOS SDK installation is a little more involved than the Android SDK installation. First you need to manually download and install the SDK from the Apple iOS Dev Center. Then you need to point to the SDK from within Dreamweaver. Again this feature is only supported on Mac OS X 10.6.x and later.

1. Choose Site > Mobile Applications > Configure Application Framework.
2. Click the Apple iOS Dev Center link in the Configure Application Framework dialog box.
3. On the Apple website, click the Log In button and use your Apple ID to Log in to the Apple iOS Dev Center. You can create an account for free if you are not already a registered user.

Note: At the time of this publication, all steps best describe link paths on the Apple website. However, Adobe has no control over the Apple website, so if Apple makes changes, these instructions might be slightly incorrect.

4. Once you've logged in, click Downloads. The Downloads link takes you to the bottom of the page.
5. Click the Download Xcode 4 button to get to the Xcode 4/iOS SDK 4.3 download.
6. Lastly, download the latest version of Xcode and the iOS SDK. Again, Adobe has no control over the Apple website or its software updates. You just need to be sure to download the latest versions of both Xcode and the iOS SDK.
7. Once the download is complete, double-click the installer on your computer. Adobe recommends that you install the SDK to the default location: OS X 10.6.x > Developer.
8. When the installation is complete, return to Dreamweaver. The Configure Application Framework dialog box should still be open.
9. Click the folder icon next to the iOS Developer Tools Path text box, and navigate to the OS X 10.6.x > Developer folder. (If you installed the iOS SDK to a location other than the default, you'll need to navigate to your custom installation location.)

10. Once the path to the iOS SDK is entered, click Save to close the Configure Application Framework dialog box.

Next you'll specify the settings for your mobile app. This is the last step before packaging and testing.

Note: This feature does not support high ASCII or double-byte characters.

1. Make sure the Meridien site is still open in the Files panel. The site must be open in order for you to package it.

Note: Packaged sites can only include HTML5, CSS, JavaScript, and image files. You cannot package sites with dynamic server-based pages, such as PHP pages.

2. Choose Site > Mobile Applications > Application Settings.
3. In the Bundle ID text box of the Native Application Settings dialog box, specify the application's Bundle ID. The Bundle ID is used internally by app stores to identify your application, and takes the form com.company.appname.

   
   

   Replace company with your company name, and appname with the name of your app, being careful not to accidentally delete any periods. Dreamweaver auto-populates the appname with your site name, but you can change this if you wish.

   The Bundle ID is not seen by public users of the application.

4. Next, enter a name for the application (again, Dreamweaver auto-populates this for you with the site name), the name of the application's author, and the application version number.
5. Click the folder icon next to the Application Icon PNG text box and navigate to the img folder of your meridien_mobile site folder.
6. Select the icon.png file and click OK. This image is what the application will use as its application icon on the mobile device.

Note: It is not strictly necessary to have the source icon image file contained within the site hierarchy; you can actually select any PNG image on your system. Dreamweaver will take care of the appropriate image scaling, naming, and copying of the file.

7. If you're on a Macintosh running 10.6.x or later, you also have the option of specifying a startup screen image. Click the folder icon next to the Startup Screen PNG text box, navigate to the img folder of your meridien_mobile site folder, select the splash.png file, and click OK.

Note: It is not strictly necessary to have the source startup screen image file contained within the site hierarchy; you can actually select any PNG image on your system. Dreamweaver will take care of the appropriate image scaling, naming, and copying of the file.

8. In the Target Path text box, specify the location where you'd like to save the packaged application. For this tutorial, I'm saving mine to my desktop.
9. Under Select Target OS Version, select the Android or iOS (iPhone/iPod/iPad) versions for which you want to build the application. For this tutorial, you can just accept the default settings.

Note: These menus are prepopulated for you based on the contents of the SDKs you installed earlier.

10. Click Save to save your settings.

Note: When you click Save, Dreamweaver adds a phonegap.js file to your site. This file is an essential part of the mobile app, and enables code-hinting of PhoneGap APIs. (You might need to click the Refresh button in the Files panel to see this new file.)

Now you're ready to build and emulate the application. The Android and iOS SDKs provide device emulators, so that you can test the mobile app right on your own computer.

1. Select Site > Mobile Applications > Build and Emulate > Android/iOS.

Note: You can also just select Site Mobile Applications > Build > Android/iOS if you want to build the application without emulating.

• The appropriate emulator launches and shows you what your application will look like on the actual device. You can interact with the application in the emulator.

Note: The Android emulator may take an extremely long time to load, so be patient. You'll receive a success message that tells you when the application has finished building or installing in the emulator. If the build or emulation process fails, Dreamweaver adds a build log to the application's target folder. (The target folder is the folder you specified in the Target Path text box of the Native Application Settings dialog box). The build log may provide information as to why the build might have failed.

Soon we'll be publishing links to tutorials that show you how to build the application you just packaged, as well as links to tutorials that will show you how to deploy the application to different mobile devices.

In the meantime, you can consult the following resources for more information:

• About PhoneGap
  
• PhoneGap API Reference
  
• jQuery Mobile framework
  

If you find any other useful links, please post them in the comments section of this tutorial.