Introducing Dreamweaver UltraDev

Macromedia has expanded its extremely popular Dreamweaver WYSIWYG design editor to include application development capabilities in a visual environment. Dreamweaver UltraDev has all of the features of Dreamweaver, and also allows Web designers to develop dynamic sites using a range of application technologies.

Dreamweaver UltraDev was officially unveiled at the JavaOne 2000 Conference on June 7th, 2000 in San Francisco. Already holding a significant portion of the visual design environment market, it was a savvy move on Macromedia's part to launch UltraDev at a developer conference, appealing to those specialists looking for visual solutions for today's more integrated work environments. The product came about because Macromedia wanted to create a visual design solution that was useful for both the visual designer and the application developer. So, Macromedia went ahead and acquired Drumbeat, a visual application development package that has a small but very enthusiastic following. Not only did Macromedia buy the source, it also brought most of Drumbeat's developers into the Macromedia fold, and they've been working side-by-side with the Dreamweaver team to produce UltraDev.

The end result is a product worthy of note for designers and developers alike. What's more, because application development with UltraDev is visual and fairly intuitive, using it provides an opportunity for designers to cross the bridge into development, and vice-versa. Even if the visual designer or developer has no interest in crossing that great divide, he or she can work more efficiently in a team environment because of UltraDev's excellent collaborative tools and real-time editing features.

A Visual Designer's Delight

Visual designers will appreciate the Dreamweaver architecture that dominates UltraDev. Nothing has essentially changed from the Dreamweaver interface itself (Figure 1), with the exception of additions to menus and palettes necessary to accommodate the application development features.

Figure 1: Working in UltraDev for Windows.

Dreamweaver UltraDev also maintains the entire Dreamweaver concept of complete What-You-See-Is-What-You-Get design, as well as hands-off code via the HTML Inspector, quick tag editor, and external editors. Commercial copies of UltraDev ship with Allaire Homesite 4.5 for Windows, and BBEdit for the Macintosh. You can also select your own preferred editor for external use, making the entire design-and-markup process extremely customizable.

Long known for technical intelligence and the best looking WYSIWYG code in a pageant of fat, ugly code from competitive packages, Dreamweaver's strength as a visual design tool is admirable. My one personal complaint—which I've heard repeated by many—has been that the Dreamweaver interface is confusing and cumbersome, with many menu options, windows, and palettes that use counter-intuitive iconography.

If you are one of the many who have tried out Dreamweaver and disliked the interface, you may find that UltraDev is even more problematic because it adds an entire backend development system into the visual design environment.

I have to admit that I was pleasantly surprised. While layers of menus and interfaces-within-interfaces, such as the Site window, are evident and in abundance, the rich offerings within UltraDev can convince you to take these things in stride in order to get the best of both design and application power in one package.

Web Design and Development for All

I am primarily a client-side author and visual designer. I am the dummy of the application world! Complex programming and databases make my eyes roll back in my head. When it comes to Web applications, I understand only the broad concepts involved. I know just enough to make a technology decision and then call a specialist in to handle the details. But Dreamweaver UltraDev is the first program I've found that's actually made it easy for me to make some sense out of application development.

Since I'm not an application programmer, I can't speak to the quality of the code UltraDev generates. I hope readers will take a look at the product and let me—and Web Review—know their thoughts, and expand on this introductory article with follow-ups from the application perspective. But from where I'm sitting on the client-side, I have to say I'm pretty impressed with what I see.

First off, Dreamweaver UltraDev provides numerous Web application options within a single interface, including three heavies:

• Microsoft Active Server Pages (ASP)
• Java Server Pages (JSP)
• ColdFusion (CFML)

Next, if you're a serious developer who likes the idea of an integrated environment, but would like to be able to get to your code—guess what? Just as the HTML coder can dig in with their favorite editor, so can you. You can set up programs such as Visual InterDev or ColdFusion Studio to work with UltraDev. Or, just use your favorite text editor. Simply set them up from within Dreamweaver UltraDev as an external application, and go to work. Either way, you've got hands-on code and an immediate update to the page display.

In terms of database options, Dreamweaver UltraDev has anticipated support for most of the popular databases on the market including Oracle, Sybase, Informix, Microsoft SQL Server, and Microsoft Access. Database connectivity is managed using ODBC, ADO, and JDBC connectivity options.

If you know what these things mean, and how to navigate connectivity to databases in terms of drivers, DSN, and connection strings, you'll have no problem setting up the connectivity you need. Everything is managed visually (see Figure 2) via connectivity dialog boxes. There are also built-in Server Behaviors that allow users to avoid having to write server-side code by hand and special database connection objects to work with SQL statements and called procedures.

Figure 2: Managing database connections with UltraDev, Mac View.

Designers be forewarned: If you don't have a lot of database savvy, you still will need to talk to someone who does. Whether it's your systems administrator, a team member, or a knowledgeable friend, you'll need some basic information to get set up properly. The UltraDev manual will walk you through the general process, but it is very superficial in its coverage of database information.

Interested in what additional resources for the UltraDev side of the program exist currently, I took a quick glance at Amazon.com, which showed exactly one title on UltraDev upcoming in October from Sams. Fatbrain.com, Barnes and Noble, and Borders showed nothing. I know for a fact that publishers are starving for well-written books on UltraDev (if you want to write one, drop me an e-mail), and this bridging the gap between designer and developer is one of the more difficult concerns any author covering the topic will face. Minimal documentation means potentially frustrating hours for designers not up to speed with the mechanisms required to connect to live databases.

Live Data Mode

Of course, if you can get around the connectivity issue, you get to one of UltraDev's most attractive features, Live Data Mode. This is a real-time connection to the database, where the designer can make changes to the way a page is laid out and presented. The page is then updated both directly to the server and to the desktop where the information is dynamically updated.

The power in Live Data Mode lies in the fact that it reduces the frustration of having to design first, upload later, and then test files. Everything can now be done in real-time, without extra steps. Errors can be instantly fixed and dynamically updated, streamlining the development process and ensuring that any modification—whether a quick error correction or a more complex renumbering of catalog items on a shopping site—can be made with relative speed and accuracy.

Live Data Mode also shows a bit of the bridge-building between designer and developer because it offers the opportunity for each to see how various code changes will affect a site. Let's say I'm a designer and I have a series of catalog pages which appear in descending order according to price which I want to appear in ascending order. I can do this by simply making some changes within a dialog box, and with Live Data Mode, see those changes take place immediately. I can examine the code to see how it was changed to accommodate this restructuring.

Similarly, a developer can code away using the visual interface or a plain text editor, and using Live Data Mode, instantly see the changes the code makes on the visual design of the page.

In a collaborative environment, this real-time feature can assist teams in making quick decisions regarding the design and function of a site without the added wait of redesigns from the visual designer, code changes from the developer, and uploads to the server. It all happens right there, right then.

Collaborative and Contributive Tools

A range of general but important tools exists to help teams and individuals manage projects within Dreamweaver UltraDev. These features include:

• File Check In/Check Out — Help avoid overwrites and redundant work by checking in and checking out files.
• Design Notes^TM — This clever feature allows designers and developers to attach a virtual sticky note to a file, where comments such as the status of a file or needed repairs can be described.
• Site Mapping — It's easy to map and view complete sites.
• Link Checking — Check all links quickly and accurately.

Most Dreamweaver users will recognize these tools (Figure 3) as having been available in Dreamweaver itself for some time. By adding the application development features of UltraDev to the original Dreamweaver software, the demand for organizational tools within the program increases. Dreamweaver UltraDev's built-in collaborative tools address this demand.

Extensible Software

If what Dreamweaver UltraDev offers at first glance isn't quite enough to satiate your hungry designer or developer nature, rest assured that there are free and easy additions you can add to Dreamweaver UltraDev via extensions.

Extensions are applications that are written in JavaScript and HTML, or programmed in Java or C. These applications are then added to Dreamweaver by the developer. This extensible software concept can enable users of Dreamweaver to completely customize UltraDev by adding libraries, server types, and even creating custom menus.

Macromedia's new Exchange program, exchange.macromedia.com offers a terrific developer community where numerous extensions are available for free download. There are extensions to manage WML and SMIL, application extensions, graphics, HTML code, text, security, and E-commerce components.

If you're interested in creating extensions to share with others, you can do so by writing and submitting them to the Exchange site. Extensions are written in JavaScript and HTML. You can submit your extensions for public use via the Exchange URL noted above.

Spinning that Install Disk

Well aware of the small-but-loyal Drumbeat following, Macromedia has made special accommodations that allow Drumbeat users to easily upgrade to UltraDev. Another concern is that XHTML is now the official World Wide Web Consortium markup standard for Web pages, and Dreamweaver UltraDev doesn't write XHTML code. It does, however, support XML, which in and of itself can encompass XHTML. Or, you can add HTML Tidy to Dreamweaver and use it to convert files to XHTML.

Macromedia did spend a lot of time making sure that their product shipped at a point in its history when it was stable. I've run beta versions and now the commercial version on both Windows 98 and an iMac with no trouble whatsoever.

So, I can confidently say that if you like to work visually, use one central tool for the majority of your development needs, and want a professional-level tool that works well in collaborative environments, Dreamweaver UltraDev is well worth taking for a spin.

Molly is the Managing Editor of Web Review. Application-phobic but in recovery, she speaks and writes about client-side languages and visual design.