Uncovering the hidden gems in
Adobe Dreamweaver CS4

by Scott Fegette

It's been about five months since we launched the public beta of Dreamweaver CS4. As the technical product manager for Dreamweaver, I want to say thank you for downloading the public beta and providing feedback. We may not have responded to every post, but we certainly read and considered each one carefully. As a result of your input, we've made some critical refinements.

When we launched the Dreamweaver CS4 beta, I wrote an article about the highlights of the new release. But so many more gems are tucked away in Dreamweaver CS4, so let me share some of my favorites. And remember, if you haven't downloaded the public beta, it is still available on Adobe Labs.

Live View options

Live View and Live Code are amazingly efficient ways to both see your page in a real-world context and introspect the document object model (DOM) as it's being manipulated by JavaScript. But they are also great ways to work with server-side applications as well. If you've set up a local testing server environment, Live View will show you the HTML output from that application and let you work with it (and its states) in Dreamweaver. However, Live View differs from the browser in one key area — you can't navigate links. After all, Live View is a tool for working on a specific page or application, not for replacing your web browser. Also, dynamic applications often need to have certain variables initialized to get into the state you need for accurately previewing and designing the experience.


Live View options

Figure 1. Live View options.


Live View settings

Figure 2. Live View settings.

To solve these problems, Live View has some great options you can leverage. Just click the disclosure triangle on the right side of the Live View button, and you'll see several options (as shown in Figure 1):

No matter what server environment you're using locally, these options help make integrated applications easier to preview, design, and debug. Be sure to check them out.


Web widgets

JavaScript frameworks and widgets have seen a huge surge in popularity over the last few years, and Dreamweaver CS4 includes several user interface controls in the form of Spry widgets, such as accordion panels, drop-down menus, and self-validating form elements. However, it's quite common to mix and match widgets from a variety of developers in a project, so we implemented a way to take just about any JavaScript widget and add it to Dreamweaver.

Inserting web widgets into Dreamweaver

Figure 3. Inserting web widgets into Dreamweaver.

By using a simple XML dialect (defined by the OpenAjax Alliance), developers can simply write a small XML sidecar file that specifies its assets, injected markup, JavaScript constructors, and metadata, allowing it to be easily packaged into an MXP file that can be installed into Dreamweaver (and hopefully, in time, into many other authoring tools). Then it can be inserted via the Insert panel to Design view and the Property Inspector, where it is represented as a visual blue tab.

We hope this provides a quick, comprehensive, and eventually industry-standard way to wrap JavaScript widgets for use in products such as Dreamweaver CS4. We will be featuring many third-party widgets in a new Web Widgets category on Adobe Exchange for Dreamweaver. And, of course, Live View provides a great way to visually preview JavaScript widgets in context with full interactivity, so you won't have to worry about the end-to-end authoring experience either (see Figure 3).

Yahoo calendar widget running in Dreamweaver

Figure 4. Yahoo YUI Calendar widget running in Dreamweaver CS4.

For example, Figure 4 shows a Yahoo Calendar widget running in within Dreamweaver CS4 Live View.

Externalize JavaScript

Although we've largely been accustomed to JavaScript being written inline — with event handlers littered throughout anchor elements and code blocks sprinkled throughout your markup — unobtrusive JavaScript has become a new best practice in web design. Unobtrusive JavaScript is simply the practice of using standardized DOM methods to attach functionality to page elements through the same selectors (IDs and classes) we use to attach CSS styles. This produces pristine, uncomplicated HTML/XHTML markup — JavaScript that can be shared with multiple pages as easily as external CSS. However, getting started with unobtrusive JavaScript can be daunting.

Externalize JavaScript options

Figure 5. Externalize JavaScript options.

That's where the new Externalize JavaScript command, lurking beneath the Commands menu, comes in handy. No matter how you added your JavaScript functionality, the Externalize JavaScript command can either simply externalize your JavaScript functions and handlers, or make your JavaScript completely unobtrusive by removing all inline event handlers and attaching your functionality by way of the Spry DOM utilities. Just write your page the way you'd like, choose Commands > Externalize JavaScript, and you'll be presented the options shown in Figure 5.

Under the hood, the Externalize JavaScript engine has parsed your page; found all inline attributes, event handlers, and script blocks as well as scripts defined in the <head> section of your document; and offered you the option to remove them entirely from your markup, adding new IDs only where needed to attach them dynamically as the page is loaded. That's it. A new JavaScript file is created to house all your migrated script functionality with the same filename as your document but with the appropriate .JS file extension. You can then work unobtrusively with the JavaScript, add it to other pages that share similar functionality, and get all the benefits of cleanly separated markup and behavior layers we've already become accustomed to with externalized CSS.

One caveat for the Externalize JavaScript command, however, is that once you've applied it, JavaScript behaviors you attached through Dreamweaver or third-party extensions can no longer be managed from the Behaviors panel. Use this function when you're happy with your functionality and ready to cleanly separate your behavior and markup layers. Just be mindful of the one-way conversion you'll be applying.

Those are only three of my unsung heroes in Dreamweaver CS4 — features I've become very dependent on in the last few months of development and that are now indispensable in my day-to-day workflow. I hope you enjoy them and all the other improvements we've added to this new release.

— Visit the Dreamweaver Developer Center
— Take the Dreamweaver CS4 Feature Tour
— Download the Dreamweaver CS4 beta

‹ Back

Scott Fegette is the Technical Product Manager for Dreamweaver at Adobe - focusing on web standards, community outreach and developer relations. After hours, Scott is a professional musician and photographer.