Mobile developer? Check out Dreamweaver CS 5.5

This post is more than 2 years old.

Yesterday, as part of the CS 5.5 launch, Dreamweaver CS 5.5 was released to the masses. I don't really know how many of my readers are Dreamweaver users. I've gone from thinking of Dreamweaver as a giant bloated piece of poo (sorry) to a very cool tool but not for me (much like how I can appreciate Photoshop but don't see me using it) to now having it in my start menu and beginning to migrate my HTML/jQuery development to it. I thought I'd share some thoughts and impressions. I am certainly not a Dreamweaver user (not yet), so if I point out something cool that's been in the product for a while, be sure to let me know.

What got me to install and run DW CS 5.5 was it's jQuery Mobile support. I had seen earlier demos and knew it was pretty cool, but I didn't really appreciate the depth of support until I tried it myself. Here's a simple example of what the workflow is like.

I began by making a site and then making a new file. If you look at the Page from Sample section you can that all of the mobile support is based on jQuery Mobile:

I selected the PhoneGap version. By default Dreamweaver creates a simple 4 page application (4 pages within one html file). That's nice as it gives you a quick way to see page navigation under the jQuery Mobile framework. But what's really nice is the editor support. Start typing a div tag for example, select data, and you get help for jQuery Mobile:

One of the biggest issues I have with jQuery Mobile now is the lack of a simple reference to the HTML attributes it uses for markup. Don't get me wrong - it's incredibly easy to use. But there's a lot to remember. Having the IDE provide support like this is killer. Even better, you can use an insert menu for common jQuery Mobile items:

So as an editor, DW is killer for jQuery Mobile. It's also got HTML5 support which is nice. CFBuilder does not. (Although I'm investigating how to get that working.) Another killer feature is the multiscreen preview. Check it out:

I had to shrink down the screen cap a bit but hopefully you can clearly see the mobile versus tablet versus desktop rendering. That's awesome. The more I use tablets the more a tool like this will be crucial for me. It also supports - kinda - synchronized browsing. This was a bit clunky for me, but as I clicked in one, the others followed along. I'm not sure that particular feature works perfectly, but as it stands now it's going to be very useful I think.

Now for the part that I think is epic. You can now use DW to build Android applications. Under the Site menu is a Mobile Applications section. Before using this you have to configure it. I already had the Android SDK installed, but check it - DW can actually download it for you.

Once configured, you can then make builds right from DW, and you can make builds and run the emulator. I had defined a few Android virtual devices already and DW let me choose which to push to. This can be a bit slow - but as anyone who has used the emulator will tell you - that's an Android issue - not DW.

I was able to take the build and install it to a real device pretty quickly as well. I don't believe DW supports that just yet, but it's pretty easy from the command line. (Basically "adb install soandsofile.apk")

I am incredibly impressed. Here are a few random comments, warnings, etc.

  • I had issues building when I didn't use a file called index.html. In my first test I had simply made a new file in a folder. I couldn't make a build until I had a new site and a core index.html file. That's how I'd normally do it anyway so it's not a big deal.
  • DW's autocomplete support for the latest jQuery. Again, CFBuilder does not, and that's really unfortunate. Aptana, which CFBuilder makes use, supports adding new JS libraries in for autocomplete support, but the version of Aptana bundled with CFBuilder doesn't work well with this.
  • Don't forget that DW has "views" - I don't know if that's the right name but it's like perspectives in Eclipse. By default mine was Designer. When I switched it to "Coder" (and "Coder Plus") the UI got a lot slimmer.
Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by CF Gurney posted on 5/4/2011 at 11:28 PM

For those of you new to jQuery Mobile (jQM), be aware that the default files included by Adobe are version 1.0a3. A significant amount of change has happened since that release, so our advice is to get the latest release files if you are doing local work (this link gets you to tips about accessing the daily builds - http://jquerymobile.com/blo... or get release a4.1 (referenced here http://jquerymobile.com/dow....

The jQM team is tackling some key issues leading up to the 1.0 release, so it is important to keep up with their blog.

In general, the jQM integration is helpful. However, once a code block is inserted, you will need to be familiar with the various jQM attributes to handle more detailed presentations. Some of the code complete will help, but you have to know something about which 'data-' attributes to use.

Comment 2 by Raymond Camden posted on 5/4/2011 at 11:47 PM

I wonder if there is a simple way to change the defaults for the libraries?

Comment 3 by CF Gurney posted on 5/5/2011 at 12:40 AM

@ray There seem to be two dirs on MacOS that have related files (don't have this installed on my WIN7 instance).

/Applications/Adobe Dreamweaver CS5.5/Configuration/Objects/jquery/

/Applications/Adobe Dreamweaver CS5.5/Configuration/Third Party Source Code/jquery-mobile/

This latter dir has the actual jquery (1.5) and the jQM js and css a3 files and associated images. There must be a place to change the "create from..." template so that the includes are what is in this directory. I just don't know DW well enough from this aspect to make a recommendation. Maybe your Adobe colleagues might provide some advice, Ray?

The larger question is what should you put into production? Anything? Wait? Depends? All of the above and your mileage may vary?

Comment 4 by Joseph Potthast posted on 5/5/2011 at 4:12 AM

Well I will admit I've been a Dreamweaver user from the very begging. The biggest reason is it is what I was taught with when I started learning Coldfusion. In previous classes I was taught on notepad, MS Frontpage (it was a long time ago sad to say) and Dreamweaver. Between those three DW was of course the best. I used it as a tool to oversee the whole site making use of the basic features like file renaming across the whole site, code autocomplete, etc. I know they weren't exclusive to DW but it's what I used. I will say I am intrigued about with the jqm support as a tool to learn some of the set up but as with CF I plan to do most of my serious coding by hand.

Comment 5 by Danilo Celic posted on 5/5/2011 at 6:31 AM

You can update the starter pages (File -> New -> Page From Sample -> Mobile Starters) by editing files in the following locations:
Windows:
C:\Program Files\Adobe\Adobe Dreamweaver CS5.5\Configuration\BuiltIn\Mobile Starters\
Mac:
/Applications/Adobe Dreamweaver CS5.5/Configuration/BuiltIn/Mobile Starters/
Edit the HTML files to point to the newer versions of the files, which can be found found at:
Windows:
C:\Program Files\Adobe\Adobe Dreamweaver CS5.5\Configuration\Third Party Source Code\jquery-mobile\
Mac:
/Applications/Adobe Dreamweaver CS5.5/Configuration/Third Party Source Code/jquery-mobile/

However, please keep in mind that there have been changes in the code that jQuery Mobile uses, and it's possible that the starter files won't work, or won't work well once you're updated to the latest JQM files, so back up everything. The JQM widgets may also insert "old" code formats for certain widgets or pages, etc.

Also, please note that your changes will likely be overwritten if/when CS5.5 is updated to have the latest files.

Comment 6 by Raymond Camden posted on 5/5/2011 at 6:33 AM

Thanks both CF Gurney and Danilo!

Comment 7 by Mike posted on 5/5/2011 at 6:39 AM

Will these features be available in CF Builder?

I just bought an upgrade to CFBuilder 2 (less than a year after buying version 1) so I don't feel like buying DW :(

Mike

Comment 8 by Raymond Camden posted on 5/5/2011 at 6:41 AM

@Mike - That's the thing - they aren't. You can do jQuery hinting, but it's for 1.3, and frankly, not as descriptive as DW. You _could_ add an extension to CFB that did some of what DW does in terms of building. All the Android stuff is possible via command line and a CFB extension can run command line via cfexecute. So it's _possible_.

Comment 9 by Tom Jenkins posted on 5/17/2011 at 12:30 PM

I would love to use this. Followed your steps above to the letter but get the error below when I try to build and emulate:

CUsing latest target:

ERROR: Cannot copy phonegap files. Terminating.java.io.FileNotFoundException: com.interdirect.firstapp\src\com\interdirect\firstapp\DefaultActivity.java (The system cannot find the path specified)

ERROR: Clone failed
OPERATION CANCELED

Any help would be massively appreciated as I have used DW for 10 years now and don't want to have to start learning the eclipse IDE unnecessarily (Recommended on the phonegap website) :(

Thank you

:D

Comment 10 by Raymond Camden posted on 5/17/2011 at 3:57 PM

Shoot- not sure what tell you here. I'd recommend posting to the Adobe Dreamweaver forums: http://forums.adobe.com/com...

And if you can't ever get Dreamweaver to work, you can switch to Eclipse as described here - http://www.coldfusionjedi.c...

I'd post to the DW forums first. Let us know please!

Comment 11 by Patrick Whittingham posted on 6/22/2011 at 6:33 PM

Ray,

Are you running on a MAC or PC? I'm getting the 'common' error even with DW CS5.5 build 5344. First, I'm getting an error with Easy Install for Android. Second, when I manually install, JAVA SE and Android SDK, the "Application Setting..." is grayed out. Do you have any solutions?

Comment 12 by Raymond Camden posted on 6/22/2011 at 6:34 PM

I'm on PC. You? Not sure what to recommend for this - I do know there was an update released. You may want to see if that helps.

Comment 13 by Utsav posted on 3/22/2012 at 9:41 AM

Dreamweaver-CS-5.5 is too Good.You can Build an app within a day If you are ready with Your concept.

Comment 14 by Bijoy Mistry posted on 8/25/2013 at 9:01 PM

I want to do php,html,joomla, etc coding in my ceel. Is this possible if yes in which device. I want to buy that and use. As I travel a lot and I want to use this while...

Pls help

Comment 15 by Raymond Camden posted on 8/25/2013 at 9:21 PM

I would try out the most recent DW (Dreamweaver CC), and see if you like it. As far as devices you can play with, the easiest is any recent Android device.