3 May 2011
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.
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.
The Dreamweaver Files panel populates with the files of your new site (see Figure 1).
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.
Note: If the Easy Install fails, please see tech note 90408.
Note: The installation does take a little time, so be patient.
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.
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.
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.
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.
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.
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.
Note: These menus are prepopulated for you based on the contents of the SDKs you installed earlier.
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.
Note: You can also just select Site Mobile Applications > Build > Android/iOS if you want to build the application without emulating.
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:
If you find any other useful links, please post them in the comments section of this tutorial.
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.