6 Things To Like About Dreamweaver CS4

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, Web Developer 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—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, MooTools, Prototype, Ext, 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.