Select File > New.
Last updated on
16 May 2021
Package 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.
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].)
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.
-
-
Select Page From Sample > Mobile Starters > jQuery Mobile (PhoneGap).
-
Click Create.
-
In the Insert panel (Window > Insert), select jQuery Mobile. The components that you can add to the web application are displayed.
-
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.
System requirements for packaging applications
You must ensure that you meet the following system requirements before you can proceed with packaging an application.
MAC OS - iOS
Mac OS X Snow Leopard version 10.6.x or later
Xcode 3.2.x with the iOS SDK (Install instructions below.)
MAC OS - Android
Mac OS X 10.5.8 or later (x86 only)
Android SDK (Install instructions below.)
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 (Install instructions below.)
Create an application package (Windows)
For information on creating a web application, including sample files, see this tutorial on the Dreamweaver Developer Center.
-
Open the web application that you want to convert to a mobile application. Ensure that your web application is set up as a site in Dreamweaver, and the size of your site is smaller than 25 MB.
Note:Ensure that the application contains only HTML5, CSS, and JavaScript files.
-
Select Site > Mobile Applications > Configure Application Framework.
-
Click Easy Install to install the Android SDK.
Note:If the Easy Install fails, please see tech note 90408.
-
Select a location to install the SDK files, and click Select. After the installation is complete, click Save.
-
Select Site > Mobile Applications > Application Settings.
-
For Bundle ID, enter a name for the package using the information in the dialog box.
-
Enter a name for the application, and the name of the person who designed the application.
-
Optionally, specify the following:
-
In Application Icon PNG, specify a PNG file to be used as the icon for the application. Dreamweaver resizes the icon to the standard size if you haven’t resized it already.
-
Specify a target path for the package.
-
To download and install the latest SDK components from Google, click Manage AVDs. Use the Android SDK and AVD Manager to update the Android SDK. For information on using the manager, see http://developer.android.com/sdk/adding-components.html.
Note:When you click Save, the phonegap.js file is copied to the site root.
-
-
Do one of the following:
If you are directly deploying your application to a device, select Site > Mobile Applications > Build. Select a platform/device for the build.
If you want to see how the build looks on an emulator before you build it, select Site > Mobile Applications > Emulate and Build.
Create an application package (Mac OS)
For a tutorial on creating a web application, including sample files, see this article on the Dreamweaver Developer Center.
-
Open the web application that you want to convert to a mobile application. Ensure that your web application is set up as a site in Dreamweaver, and the size of your site is lesser than 25 MB.
Note:Ensure that the application contains only HTML5, CSS, and JavaScript files.
-
Select Site > Mobile Applications > Configure Application Framework.
-
Install the SDK for iOS or Android based on your requirements:
Click the Apple iOS Dev Center link to download and install the xcode and iOS SDK. The application is, by default, installed to the OS <version number>/developer directory.
Log in to the Dev Center using your Apple ID. Registration is free. Create an account if you are not a registered user.
Note:You can use the SDK package that you download from the Apple dev center for testing. However, to upload your application to the Apple store, register yourself as an Apple developer after paying the required fee.
- Click Easy Install to install the Android SDK.
Note:If the Easy Install fails, please see tech note 90408.
-
Click Save.
-
Select Site > Mobile Applications > Application Settings.
-
In Bundle ID, enter a name for the package using the information in the dialog box.
-
Enter a name for the application, and the name of the person who designed the application.
-
Optionally, do the following:
(Android) In Application Icon PNG, specify a PNG file to be used as the icon for the Android application. Dreamweaver resizes the icon to the standard size if you haven’t resized it already.
(Mac® OS 10.6.x) In Startup Screen PNG, specify a PNG file to be used as the icon for the iOS application. Dreamweaver resizes the icon to the standard size if you haven’t resized it already.
(Mac OS 10.6.x) Select a version of the iPhone/iPod Touch/iPad for which you are creating the package.
Define a different target path for the package.
Note:When you click Save, the phonegap.js file is copied to the site root.
-
Do one of the following:
If you are directly deploying your application to a device, select Site > Mobile Applications > Build. Select a platform/device for the build.
If you want to see how the build looks like on an emulator before you build it, select Site > Mobile Applications > Emulate and Build.