As an interactive firm very much interested in doing more in the mobile space, we couldn’t help but salivate over Dreamweaver CS 5.5′s new native mobile application tools. It’s not that Adobe put together something that wasn’t possible before; it’s that it streamlined the workflow and took a lot of the headaches associated with HTML5-based app development out of the equation. That was the dream, anyway. Suffice it to say, the dream died the second the technologies it utilized changed their APIs. Rather than rant about how we wasted hours trying to fix this brittle feature and how Adobe should have fixed this ages ago, I’ll cut right to the chase:

There are several steps you need to take to get this to work. This information is scattered all over the interwebs, and I am now your best buddy for condensing it into a simple how-to. If you need to know the basics of how to create the jQuery Mobile / PhoneGap project in Dreamweaver, check out this video. If you’ve gotten that far and it actually worked, congratulations. Judging from the forum posts I’ve seen, you are the only one it worked for on the first try if you tried more than a couple months after the release of Adobe CS 5.5. For the rest of us, here’s how to get the native mobile application tools up and running:

1. Dreamweaver’s “Easy Install” feature for the Android SDK doesn’t work. Just download the latest Android SDK manually and pointed to it. (You can install it anywhere.) Hey Adobe, you taught me a good lesson in marketing: never use the word “easy” to describe a product or feature that breaks within months of release and remains to be fixed almost a year later. That’s just silly.
2. If you’re on Windows, sorry, you aren’t invited to the iOS app development party. If you’re on a Mac, you have to download and install Xcode to get the iOS SDK (I don’t think you can get just the SDK, but I didn’t look too hard). It’s like 1.8GB or something, but it’s free. The path Dreamweaver wants is just “/Developer”.
3. At this point the app will build for Android, but it won’t load the app in the emulator. It won’t even build at all for iOS. I updated PhoneGap thinking the issue with Android might be that the new SDK only works with a newer version of PhoneGap or something. I turns out that this wasn’t the issue, but I updated PhoneGap anyway. The steps to do this I found in a blog post by this German dude. May as well be using the latest, right?
4. To get the app loading in the Android emulator, follow the directions at the end of this post by Andrew Trice. Android’s latest SDK requires a couple path-related parameters that previous versions didn’t, apparently.
5. To get the app building for iOS, use the fix reported by london1a1 on this Adobe support thread.
6. Finally, I’d also update the jQuery Mobile files pointe to them in the HTML rather than using Dreamweaver’s outdated versions. I do not know what, if any issues will happen as a result, but I doubt there is too much of a difference in the Javascript APIs for code hinting purposes, etc. If you run into problems you can always revert back to an older version of jQuery Mobile.

That’s it! Once I did that, I was well on my way to native mobile app building bliss. As of today, I am fully up to date: Android SDK for API version 15, iOS SDK for version 5.0, PhoneGap 1.3, and jQuery Mobile 1.0. Your mileage may vary, especially since any other changes to these components could very well break Dreamweaver support. Hopefully this will get you up and running for now, at least.

Here are some screenshots of the emulators rendering the default demo jQuery Mobile app.