Update (3/28/2012):
Hi Everyone, I know there have been lots of questions about PhoneGap + Android SDK, and lots of headaches because Google’s Android SDK keeps changing and breaking the Dreamweaver integration. Fret not! There is an easier way — Adobe has released a plugin to integrate Dreamweaver with PhoneGap Build. With this plugin, you build your experience in Dreamweaver, then push to the PhoneGap Build service for cloud-based compilation of device-specific binaries. Read more about this plugin here: http://blogs.adobe.com/dreamweaver/2012/04/phonegap-build-extension-for-dreamweaver-cs5-5.html
Original Post:
PhoneGap apps are built with HTML and JavaScript, and can be created with any IDE or text editor. You can build them in xCode or Eclipse. Did you also know that you can build PhoneGap apps within Dreamweaver, and you can even launch and debug on the iOS Simulator and Android Emulator all from within Dreamweaver?
Here’s a video of this in action from Adobe TV. After the video, we’ll walk through this process step by step.
In order to use the iOS simulator and Android emulator, you’ll need to download and install xCode and the Android SDK. Once you’ve downloaded those, let’s focus on setting up your project within Dreamweaver.
The first thing that you need to do is create a new “site” within Dreamweaver for your PhoneGap application. Go to the “Site” menu, and select “New Site…”.
The site setup/details dialog will be displayed. Go ahead and give it a name and directory to contain project files and resources.
Next, we need to create the main application file. Within Dreamweaver, go to “File”, and select “New…”. Then select the “Page from Sample” option, sample folder “Mobile Starters”, then select the page template for “jQuery Mobile (PhoneGap)” and click “Create”.
This will create a new HTML file for the mobile project. Go ahead and save the file you just created. The first time this file is saved, you will be prompted to copy dependent files. Click “Copy” to copy the dependent files into your application “site”.
Once in Dreamweaver, you can edit the HTML and JavaScript to your heart’s content. You can take full advantage of Dreamweaver’s code view or design view, live previews, and any other features.
Once you are ready to build and deploy to the android and iOS simulators, you’ll need to setup the mobile development configuration. First, we’ll need to configure the application frameworks. Within Dreamweaver, go to the “Site” menu, select “Mobile Applications”, then select “Configure Application Framework”.
The “Configure Application Framework” dialog will be displayed. Here, you’ll need to enter the full path to your Android SDK, and the path to the iOS Developer tools (xCode).
Once you have the application frameworks configured, you’ll need to configure your application’s settings. Go to the “Site” menu, select “Mobile Applications”, then select “Application Settings…”.
Within the “Native Application Settings” dialog, you’ll need to specify your application bundle id (the unique id for the application), an application name, the author, version, and application icons. You can also select iOS SDK versions, and which Android emulator to use.
Once you’ve configured the application settings and application frameworks, you are ready to build your app and run in the emulators. Just go to the “Site” menu, select “Mobile Applications”, select “Build and Emulate”, then choose a device or platform.
Once you chose a platform or device, Dreamweaver will go ahead and launch the appropriate emulator or simulator, and launch the application.
If you run into issues with the Android SDK, first make sure that you are using the latest Dreamweaver SDK following the instructions at http://blog.assortedgarbage.com/2011/05/resolving-android-sdk-failed-to-install-with-dreamweaver-cs5-5/
If you still have issues with deploying to Android and see the error message below in the build log, then you are probably using the latest Android SDK that was recently released in October.
[code]Install file not specified.
‘ant install’ now requires the build target to be specified as well.
ant debug install
ant release install
ant instrument install
This will build the given package and install it.
Alternatively, you can use
ant installd
ant installr
ant installi
ant installt
to only install an existing package (this will not rebuild the package.)[/code]
The latest Android SDK introduced an additional parameter that is not yet supported by the PhoneGap integration kit within Dreamweaver. You can fix this by updating the build.xml file for the application instance to override the “install” target and add the required dependencies which make this error go away.
Go to you application build director and open the “build.xml” file. This will be inside a folder named after the bundle_ID within your target directory. You can find the target directory within the “Application Settings” dialog, as shown below:
In my case, the build directory is /Users.triceam/Destkop/com.company.phonegapsample_Android
Find the “import” node below (at the end of the file):
[xml]<import file="${sdk.dir}/tools/ant/build.xml" />[/xml]
Add to this line the attribute ‘as=”imported”‘ and a new “install” target that will override the existing “install” target as shown below. This build target will utilize the existing “install” target, and add necessary debug file dependencies to fix the build error shown above.
[xml]
<import file="${sdk.dir}/tools/ant/build.xml" as="imported" />
<!– Override the target to add the dependency –>
<target name="install"
depends="-set-debug-files,imported.install" />
[/xml]
Not only is Dreamweaver CS5.5 a best-of-breed solution for building web content, with PhoneGap support, Dreamweaver is now a best-of-breed solution for building cross-platform mobile applications as well. Using the PhoneGap integration within Dreamweaver allows you to use familiar tools, familiar development processes, and your current web development skills to build exciting new mobile applications. This enables you, as the developer or designer to focus on what matters – the application or content within your mobile scenarios.