By: Alex Walker

October 17th, 2008

Reader Rating: 8

5 ... 4 ... 3 ... 2 ... 1 ... Dreamweaver CS4 is GO!
Yes, Dreamweaver CS4 officially hit the shelves on Wednesday October 15th—not that many of us would actually purchase it from a shelf!

Although I'm sure there are people out there who upgrade as a matter of course, most of us need a handful of good reasons to reach into our pocket. The key question: What do I get for shelling out my hard-earned on the latest big green beast from Adobe?

1) UI/Workflow Improvements

The first thing you'll notice on opening the new Dreamweaver is Adobe have made some substantial changes to the user interface. Although the changes mean long-time users will need to reorientate themselves, most (but not quite all) changes are for the better.

Apart from inheriting all the grayscale cosmetic changes of Adobe's new look, the top quarter of the UI has been significantly streamlined. The title bar and main menu have been combined into a single bar, and the horizontal INSERT toolbar is now a vertical INSERT panel on the right-hand side of the screen.

Okay. So, what's the big win here?

Greater vertical workspace, allowing you to see more of your code or design without having to constantly rejig your screen. Frankly, it also feels more natural to me to be adding links, images, and DIVs from a panel rather than a vertical bar. The right-hand side is a place for keeping and organizing assets (for example, Files, Assets, Styles, Snippets), so placing your HTML elements amongst them makes perfect sense to me.

Adobe have also made the workspace selector more easily accessible by putting it in the top right-hand corner. This enables you to quickly switch between eight different modes optimized for designing, app development, and coding; there's even a workspace optimized for dual screen setups. Nice.

However, the new UI isn't entirely without issue. Soon after installing, I highlighted some text inside a paragraph and went to emphasize it. I pushed my trusty "I" button and a dialog box appeared asking me how I'd like my CSS applied.

Um ... no, I just want a plain old <em> tag, please—I'm marking this content up, not trying to style it.

Eventually, I figured out there are actually two property panels, each with its own "I" and "B" buttons: a CSS panel and a HTML panel. You can flip between these panels using the buttons in the lower left corner—if you find them.

Personally, I believe it's a blind spot and I suspect this will stump quite a few people. Maybe it's just me. Maybe tabs would work better. See what you think.

Even allowing for this (in my honest opinion) UI glitch, the new UI is a definite improvement on CS3.

2) The Related Files Toolbar

Adobe's new Related Files toolbar is a definite productivity winner. It's a simple concept. Dreamweaver scans through the document you open and automatically opens any linked files—for example, CSS, server-side includes, JavaScript, iFrames—in a new toolbar at the page top.

This is a serious productivity improver and you'll probably become dependent upon it without hours. I have only one slight query. As you can see from the image, the initial file you open is always listed on the tab, yet simply referred to as Source Code on the Related Files bar.

From a UI perspective, it seems a little strange to me to have Source Code sitting alongside real file names. But to be fair, I can't think of a significantly better solution off the top of my head.

3) Code Navigator

Users are funny old things. You nearly always learn more about what they want from watching—rather than asking—them. Adobe's development team watched their CS3 users and came to an interesting conclusion.

Very few regular users utilized the WYSIWYG pane to actually add or edit content. Instead, Design View was more often used as a navigation device, providing a visual method of jumping around your code—not unlike the Navigator panel in Photoshop. And I thought I was the only one who did that!

Adobe have catered to this usage pattern with the new Code Navigator feature.

Click on any item visible in Design View, wait a second, and a small icon of a ship's wheel will appear. Click on this wheel icon and you'll get an editable, fly-out window showing only the related code of your selected page element.
Now, if you think waiting for that little wheel to appear sounds irritating, you're right; happily, you can shortcut straight to the code fly-out by ALT-clicking (Command-Option-clicking on a Mac) anywhere on the screen.

This is a great feature. While modern, well-organized coding practices demand that we modularize our code into multiple-linked files, the day-to-day business of accessing those many files has become increasingly drawn out and difficult. Code Navigator brings all these disparate code blocks back to your fingertips; it lets you feel like you're working with a single, stand-alone page, without losing any of the benefits of modularity.

4) Live View

One of the major trends in web development since the last CS release has been the rise of browser-based development tools. Thanks to Firebug [1], Web Developer [2] toolbar, and a host of others, browsers are no longer passive viewers; they can dissect, hack, slash, and reassemble code as it squirms—live, in front of you. Dreamweaver CS4 acknowledges this trend and then flips it on its head by integrating a browser—WebKit [3]—into its core.

How does this work in practice?

Switching to Live View in Dreamweaver CS4 replaces your old-school Design View pane with a live, pixel-perfect WebKit rendering of your page; this is complete with live Javascript, DOM manipulations, database queries, server-side code, and rendered CSS, rather than the placeholder icons you see in Design View.

However, the really cool trick is that the Code Navigator (described above) still works. ALT-clicking (Command-Option-clicking on a Mac) anywhere in the Live View window instantly presents the code that rendered that item—not unlike you might currently do using the Firefox/Firebug tag team.

But it doesn't end there, my friends.

Thanks to the modern delights of Ajax-style interactions, we often need to deal with page objects that aren't in the initial page source: items that are injected into the page some time after page load. For instance, you might need to change the look and feel of a tool tip that is created and injected entirely in JavaScript. In the past, this would have required you to painstakingly pick your way through scripts to determine what was being created and where.

Live View lets you render your page, where you can then hit F6 to Freeze JavaScript at any point, allowing you to target and explore the code relating to any transient item in the page.

5) Advanced JavaScript Interpretation

Arguably the other big improvement in the last version of Dreamweaver was its more sophisticated handling of CSS. Rather than statically linking to style data, Dreamweaver CS3 could internally trace and understand the cascade, enabling it to offer real classes and IDs in its code hinting.  Dreamweaver CS4 brings its JavaScript interpreter into line with its advanced CSS engine.

Firstly, Dreamweaver CS4 gives you easy access to a range of JavaScript-powered Web Widgets. These are powered by all the mainstream JavaScript libraries (jQuery [4], MooTools [5], Prototype [6], Ext [7], and more) and make it easy to deploy generic JavaScript page objects like calendars, tabs, tool tips, and form validators.

But for me, the real killer feature is the new, intelligent code completion. Attach your favorite library in the HEAD (for our example, we'll use Prototype), start scripting, and Dreamweaver's code completion will automatically present Prototype's built-in functions, along with the standard DOM functions. Very slick.

6) Make JavaScript Unobtrusive

One of the queries I had with Dreamweaver CS3 was its focus on the Spry Ajax framework. While Spry did a good job of allowing non-technical users to add Ajaxy effects, it had some issues. Spry widgets tended to place a lot of inline JavaScript in the page, leaving unsightly holes if scripting was unavailable.

In Dreamweaver CS4, not only has the Spry framework become more accessible and polite, it actually attempts to help you rehabilitate the bad code around it.

How does it do this?

The Commands menu now has an Externalize JavaScript option that will process your document, move your scripting to a separate file, link that new file from the HEAD, and even rewrite your HTML to clean out any inline event handlers (such as the onclick attribute).

For example, some nasty, inline JavaScript like this:

<a href='index.html' onClick='window.confirm("Why are you so obtrusive?")'>Select this link.</a>  


becomes the much friendlier:

<a href='index.html' id='a1'>Select this link.</a>

It also adds the new unobtrusive JavaScript code to your document HEAD, along with the Spry library it needs to make it all work.

Now let's be honest. You really shouldn't write that sort of code in the first place, and if you do, there are more efficient ways to improve it.

But to me, the single most impressive aspect is that Adobe made this an issue—by deciding that this is important Dreamweaver functionality. This places the concept of Unobtrusive JavaScript on a lot more agendas, and that's really valuable.

The Verdict

Dreamweaver is a mature, polished application, and the truth is it's always going to be a challenge for the Adobe Dev team to deliver the wow! factor of earlier releases.

The good news is Adobe has resisted going for flashy, rock-star gimmicks and focused on the genuine working issues facing front-end coders in 2008—in particular, accessing and manipulating complex and increasingly fragmented source code.

For me, features like Live View, Code Navigator, and the upgraded JavaScript-handling abilities are thoughtful responses to the way we develop web sites in 2008. 

After two weeks with the new version, I'm not keen to go back.

[1] http://getfirebug.com/
[2] http://chrispederick.com/work/web-developer/
[3] http://webkit.org/
[4] http://www.jquery.com/
[5] http://mootools.net/
[6] http://www.prototypejs.org/
[7] http://extjs.com/