Operation Manual
459
USING DREAMWEAVER
Designing for multiple screens and devices
Last updated 3/28/2012
Packaging web applications
IMPORTANT CHANGE TO PACKAGING WEB APPS WORKFLOW
Please note that as of March 2012, there has been an update to the Dreamweaver-PhoneGap integration workflow.
Adobe strongly recommends that all CS5.5 users download the
PhoneGap Build extension for Dreamweaver CS5.5,
which replaces the current application packaging functionality described below.
Packaging web applications as native mobile applications (CS5.5)
Dreamweaver’s integration with jQuery Mobile and PhoneGap helps you create and package web applications for
deployment on Android™ and iOS-based devices. Dreamweaver uses PhoneGap SDKs to create the package (
.apk file
for Android/
.xcodeproj for iPhone/iPad)
Once you’ve packaged a mobile application with Dreamweaver, you can view it in a device emulator, or deploy it to
your own device.
Important: 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].)
More Help topics
http://www.phonegap.com/about
http://jquerymobile.com/demos/1.0a2/
http://docs.phonegap.com/
Create a web application using the starter page
You can use any of the starter pages to create your Web application. However, if your web application, when deployed
as a mobile application, accesses features native to mobile devices, use the jQuery Mobile (PhoneGap) page.
The jQuery Mobile (PhoneGap) starter page contains the phonegap.js file in addition to the other jQuery Mobile files.
The phonegap.js file contains the APIs required to work with the native mobile features such as GPS, accelerometer,
camera, and so on.
1 Select File > New.
2 Select Page From Sample > Mobile Starters > jQuery Mobile (PhoneGap).
3 Click Create.
4 In the Insert panel (Window > Insert), select jQuery Mobile. The components that you can add to the web
application are displayed.
5 In Design view, place the cursor at the location where you want to insert the component, and click the component
in the Insert Panel. In the dialog box that appears, customize the components using the options.
Note: To edit the PhoneGap.js file, configure the application framework and application settings. For more
information, see the topics on creating application packages.
Preview the page in Live view. Some of the CSS classes are applied only in Live view.