Building PhoneGap Applications With Dreamweaver

Posted: November 1st, 2011 | Author: | Filed under: Android, Development, HTML5, iOS, JavaScript, Mobile, PhoneGap | Tags: , , , | 43 Comments »

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.

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.)

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):

<import file="${sdk.dir}/tools/ant/build.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.

<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"  />

43 Comments on “Building PhoneGap Applications With Dreamweaver”

  1. 1 Tony Weeg said at 1:32 PM on November 1st, 2011:

    cannot wait to try this… thanks for the tip andrew!

  2. 2 Bill Horvath said at 4:44 PM on November 2nd, 2011:

    I’ve been Googling like crazy to find the answer to this ‘ant install now requires…” problem. This fixed it. I can’t thank you enough, Andrew!

  3. 3 Derrill said at 4:55 PM on November 2nd, 2011:

    I keep getting the same error when attempting to install Android SDK:

    “The Android SDK failed to install. Please select another folder and try again.”

    I am using a Mac 10.6.8 and Dreamweaver 11.5 Build 5344.

  4. 4 Andrew said at 9:49 AM on November 3rd, 2011:

    Glad to help!

  5. 5 Andrew said at 9:52 AM on November 3rd, 2011:

    Is this from the “easy install” button? Try downloading the SDK manually from https://developer.android.com/index.html I know that, in the past, the “easy button” installation has been broken by changes from Google’s download site.

  6. 6 Derrill said at 10:00 AM on November 3rd, 2011:

    Yes, I am attempting to use the “Easy Install” button in Dreamweaver via Site->Mobile Applications->Configure Application Framework.

    OK, will attempt the manual method now as per your suggestion.

    Thanks for your feedback!

  7. 7 Derrill said at 4:56 PM on November 4th, 2011:

    In the “Native Application Settings” dialog, under “Select Target OS Version”, the only option available is DW_AVD, even though I included all versions during the manual download of the SDK. What did I do wrong?

    Also, after applying the build.xml coding fix and clicking “Build and Emulate” I get the error: “more than one device and emulator”.

  8. 8 Dipo said at 5:02 PM on November 4th, 2011:

    I cant see “Mobile Starters” under “page from Sampples” in my Dreamweaver installation. what is wrong? Win7 CS5 (version 11 build 4909)
    Is there something i have to do before that?

  9. 9 Andrew said at 10:15 AM on November 7th, 2011:

    The PhoneGap integration is built into Dreamweaver CS5.5, sorry, it is not available in CS5.

  10. 10 Michael Noeldner said at 9:29 PM on November 9th, 2011:

    Why not just download an older version of Android SDK. What I need to know is what is the last Android SDK that worked with Dreamweaver CS5.5.

  11. 11 Luigi Claudio said at 12:33 PM on November 16th, 2011:

    Thanks Andrew.
    I was getting the same error in the build log due to the latest Android SDK and PhoneGap.

    I was installing the .apk file with command line, updating the build.xml file for the application instance fixed it! #ace!
    Now DW launches the build in the AVD emulator straight away!

    Many thanks

  12. 12 Stutts said at 6:22 PM on November 16th, 2011:

    I’m having the ant Install issue and have tried, repeatedly, changing the text in the build.xml (using Dreamweaver, Aptana, etc). ANY time I made a change, the app refused to build OR install, where prior to (and after removing) at least the app would “build” the .apk file.

    I may be missing something simple here.

    Help?

  13. 13 Stutts said at 1:01 PM on November 17th, 2011:

    Ignore my comments from Nov 16th. It is necessary to delete all the files from the “failed” run in the bin folder before running the build a second time.

    Your work worked beautifully. Thanks!

  14. 14 Sam Farmer said at 10:48 PM on November 21st, 2011:

    Andrew:

    Great tutorial. I build an apk but it appears to be a debug version. Do you know how to make it a “real” version? Be handy once I’ve made it bug free!

  15. 15 Andrew said at 12:02 PM on November 23rd, 2011:

    You might be able to simply change the ant build file to include the release dependencies, instead of the debug dependencies. Otherwise, an easy solution would be to use http://build.phonegap.com to upload your app, and it will provide you with platform-specific binaries.

  16. 16 420 Colorado said at 11:22 AM on December 6th, 2011:

    Build and Emulate and also Build never worked again in Dreamweaver CS5.5 after upgrading to iOS5. Surprised PhoneGap and Dreamweaver have let this go so long. I get BuildAnt errors and other errors.

  17. 17 Andrew said at 11:26 AM on December 6th, 2011:

    Adobe is working to remedy these issues. The problem is that Apple/Google changed their programming tools. This causes scripts within Dreamweaver to break, since the API and commands have changed.

  18. 18 420 Colorado said at 11:33 AM on December 6th, 2011:

    I’ve been getting this error for at least 2 months. I’m not even doing anything with camera:

    /DW_NAF/PhoneGapLib/Classes/Camera.m:178:13: error: type of property ‘returnType’ (‘unsigned int’) does not match type of ivar ‘returnType’ (‘enum DestinationType’) [3]
    @synthesize returnType;
    ^
    /Users/TuTone/Documents/DW_NAF/PhoneGapLib/Classes/Camera.h:25:23: note: ivar is declared here [3]
    enum DestinationType returnType;

  19. 19 Andrew said at 11:38 AM on December 6th, 2011:

    Have you downloaded the latest build of PhoneGap, since updating to iOS SDK 5? For specific technical questions, please post to the PhoneGap Google Group: http://groups.google.com/group/phonegap PhoneGAP IRC http://phonegap.com/community#irc or check the PhoneGap wiki http://wiki.phonegap.com/w/page/16494772/FrontPage

  20. 20 420 Colorado said at 11:43 AM on December 6th, 2011:

    Yes I have the latest PhoneGap download, 1.2 and have the PhoneGapLib pasted into the ios folder in Applications/Dreamweaver…. I’ve been looking for an answer for this for a long time, will head to your suggest Google Group now.

  21. 21 Anh said at 10:13 AM on December 14th, 2011:

    Other ways to debug the boot
    Step1: You can run emulator android apps. it well error
    Step2: You keep you keep running the emulator, then again you debug
    I also encountered this error and now understand that to debug.
    wish you success

  22. 22 Bruce said at 1:49 AM on December 20th, 2011:

    Did the change to Build. It worked, but after the first time it won’t rebuild updated app.?
    Any answers.

    Thanks

  23. 23 Andrew said at 9:26 PM on December 20th, 2011:

    What do you mean “it won’t rebuild”? Do you get an error message? What if you kill/restart the emulator?

  24. 24 Bruce said at 12:19 AM on December 21st, 2011:

    Wow thanks for the reply

    I kind of new at this, but DW makes it pretty easy to make a simple app. Anyway, I started making the app and did the first build Android.
    Then applied your fix, then built and emulated.
    Worked fine. then I built some more,built and emulated. It did not make the changes in the next emulation. In order for DW to build and keep the changes I have to delete the “com.thecranestore.cranerigging_Android” folder and start again.

    Thanks for the help

  25. 25 Andrew said at 9:51 AM on December 21st, 2011:

    I haven’t run into this, but you can likely add the folder deletion step to the ANT build script to automate this.
    <delete includeEmptyDirs=”true”>
    <fileset dir=”build”/>
    </delete>
    http://ant.apache.org/manual/Tasks/delete.html

  26. 26 Viraj Zaveri said at 4:49 PM on December 21st, 2011:

    Thanks a lot, I was looking for this for a long time. You saved quite of my efforts.

    Thanks Again.

    Just a question?
    Is anyone there facing problem for starting emulator for API 14.

  27. 27 Bruce said at 7:29 PM on December 21st, 2011:


    <!–

    /* This is typically used for code obfuscation.
    Compiled code location: ${out.classes.absolute.dir}
    If this is not done in place, override ${out.dex.input.absolute.dir} */

    –>

    <!– Import the actual build file.

    To customize existing targets, there are two options:
    – Customize only one target:
    – copy/paste the target into this file, *before* the
    task.
    – customize it to your needs.
    – Customize the whole content of build.xml
    – copy/paste the content of the rules files (minus the top node)
    into this file, replacing the task.
    – customize to your needs.

    ***********************
    ****** IMPORTANT ******
    ***********************
    In all cases you must update the value of version-tag below to read ‘custom’ instead of an integer,
    in order to avoid having your file be overridden by tools such as “android update project”
    –>

  28. 28 Bruce said at 7:32 PM on December 21st, 2011:

    I quess i can’t send the code.
    Oh well

  29. 29 Bruce said at 10:07 PM on December 21st, 2011:

    I tried to show you the code in the build.xml
    I guess it’s to big.

    Where do I put this? I know you said the ANT build, but where in it.

  30. 30 diego ramirez said at 9:47 PM on January 4th, 2012:

    Thanks Andrew, this helped me a lot.

  31. 31 Mike said at 1:46 PM on January 12th, 2012:

    Andrew you are a wizard!

  32. 32 MAxi said at 5:39 AM on January 13th, 2012:

    Hi, thanks!!! I’ve trying to deploy into the emulator from DW for hours, until i found your remedy into the build.xml. You have helped a lot! Great work

  33. 33 Chandrika said at 11:31 AM on January 29th, 2012:

    Much appreciated that you posted detailed solution here, it helped so much. I thought I was going to have to have to use Eclipse only, to run builds in the emulator, until I found your post, thanks very much for fixing the prolem i was having today!

  34. 34 Steve B said at 12:40 PM on February 1st, 2012:

    Andrew, Complete newbie here, and have the same problem as Bruce on 21 Dec.

    After making changes in DW, those changes do not appear in the emulator. Have tried re-booting emulator to fix but found deleting the build folder completely, and re-building my only remedy.

    You suggest adding the following to the ANT build script:

    Where exactly do I put this? In Build.xml file? Or other location…please specify.

    Thank You

  35. 35 Michael said at 4:18 PM on February 2nd, 2012:

    I wanted to add to this forum because this process is challenging. Honestly I found that using Buzztouch and Eclipse worked well for basic Android App building. If you are very new at this I would suggest giving their solution a try. They have many tutorials and the forum is very helpful.

    So why am I using DW? I’m questioning that now. I thought it would provide additional flexibility. Maybe.

    For Dreamweaver, I was able to get the Android emulator to load my application. The trick for me was to click build and emulate a second time after the failed build and emulate, without closing the emulator.

    I’ve also encountered the issue that Bruce mentioned. After making changes to a project and building, the emulator does not reflect the changes.

    I’m a bit amazed that Adobe is as buggy as this.

  36. 36 Andrew said at 4:37 PM on February 2nd, 2012:

    The bugs are actually due to changes in the Android API. Dreamweaver was built against a particular Android SDK, which has changed since Dreamweaver’s release.

  37. 37 Michael said at 5:08 PM on February 2nd, 2012:

    Andrew, I failed to say thank you for your tutorial. It helped me even get the emulator going.

    The emulator now seems to be updating when changes are made.

    I still feel BuzzTouch may be a better solution for the non-developer crowd. Just an opinion.

  38. 38 Andrew said at 5:10 PM on February 2nd, 2012:

    You’re welcome. Glad to help!

  39. 39 Bruce said at 6:12 PM on February 2nd, 2012:

    Hi Guys
    Thanks for the help also. I’m using a IMAC
    to make ios and android versions of the same app. The ios side seems to work fine except the app will not rotate on iphone sim,
    but will on ipad sim.? There are still some quirks to work out. But thanks anyway.

    Bruce

  40. 40 Bruce said at 8:33 PM on February 2nd, 2012:

    How do I put my app on my droid 3. It did it one time all by itself, then i deleted it because
    of changes and now i can’t get it on again.

    Thanks

  41. 41 Ceaser Mwau said at 3:15 PM on February 11th, 2012:

    Akhsante!!! Thank you…….

  42. 42 Brett Burky said at 2:19 PM on February 17th, 2012:

    ANDREW!!!!!!!!! You are the man. Oh my gosh I have been searching for hours trying to figure this out. Even create a whole new site just to see if something in my code was wrong. This simple fix did it!!!!

    KUDOSSSSSSSSSSS

  43. 43 Marty said at 1:47 AM on February 19th, 2012:

    I am getting the same errors I’ve seen others getting in this thread, but nothing has helped. Dreamweaver is unable to open “the program name” in the emulator please consult the build log …

    It actually does the build and then launches the emulator.

    I’m using a trial Dreamweaver to see if this is the way I want to go for a platform. I noticed I don’t have an iphone in the Mobile Application site configuration … so maybe the trial software is old. I did update the software to try and fix the Easy install button. The easy button didn’t work not that the problems are related. So I manually installed the sdk to get the build with phonegap working.

    DW>
    ____________________
    set ANT_HOME=C:\PROGRA~2\Adobe\ADOBED~2.5\CONFIG~1\NATIVE~1\APACHE~1
    set ANDROID_HOME=C:\PROGRA~2\Android\ANDROI~1
    set JAVA_HOME=C:\PROGRA~2\Adobe\ADOBED~2.5\JDK
    set PATH=%JAVA_HOME%\bin;%PATH%
    cd C:\PROGRA~2\Android\ANDROI~1\PLATFO~2
    C:\PROGRA~2\Android\ANDROI~1\PLATFO~2\adb.exe kill-server
    ____________________

    Waiting for Android emulator to bootERROR: failed to launch Android emulator

    ____________________
    set ANT_HOME=C:\PROGRA~2\Adobe\ADOBED~2.5\CONFIG~1\NATIVE~1\APACHE~1
    set ANDROID_HOME=C:\PROGRA~2\Android\ANDROI~1
    set JAVA_HOME=C:\PROGRA~2\Adobe\ADOBED~2.5\JDK
    set PATH=%JAVA_HOME%\bin;%PATH%
    cd C:\PROGRA~2\Android\ANDROI~1\PLATFO~2
    C:\PROGRA~2\Android\ANDROI~1\PLATFO~2\adb.exe devices
    ____________________

    * daemon not running. starting it now on port 5037 *

    * daemon started successfully *

    List of devices attached

    Launching the Android emulator

    ____________________
    set ANT_HOME=C:\PROGRA~2\Adobe\ADOBED~2.5\CONFIG~1\NATIVE~1\APACHE~1
    set ANDROID_HOME=C:\PROGRA~2\Android\ANDROI~1
    set JAVA_HOME=C:\PROGRA~2\Adobe\ADOBED~2.5\JDK
    set PATH=%JAVA_HOME%\bin;%PATH%
    cd C:\PROGRA~2\Android\ANDROI~1\tools
    C:\windows\SysWOW64\cmd.exe /u /c “C:\PROGRA~2\Android\ANDROI~1\tools\emulator.exe -partition-size 1024 -cpu-delay 0 -no-boot-anim -avd DW_AVD”
    ____________________

    WARNING: no icon was specified in app settings. using default.
    WARNING: no splash screen was specified in app settings. using default.

    ____________________
    set ANT_HOME=C:\PROGRA~2\Adobe\ADOBED~2.5\CONFIG~1\NATIVE~1\APACHE~1
    set ANDROID_HOME=C:\PROGRA~2\Android\ANDROI~1
    set JAVA_HOME=C:\PROGRA~2\Adobe\ADOBED~2.5\JDK
    set PATH=%JAVA_HOME%\bin;%PATH%
    cd C:\Users\Matha\Desktop\COMWHA~1.MOB
    C:\windows\SysWOW64\cmd.exe /u /c C:\PROGRA~2\Adobe\ADOBED~2.5\CONFIG~1\NATIVE~1\APACHE~1\bin\ant.bat debug
    ____________________

    Ideas?

Leave a Reply

    •