Web Techniques: Design Tool for Programmers

CD Home < Web Techniques < 2000 < August

Design Tool for Programmers

By Ken Cox

When I started working with Macromedia Dreamweaver UltraDev, I felt as though the designers knew which features I wanted as a Web app developer. UltraDev is Macromedia's new cross-platform product that helps you develop server-side code and database-driven Web sites inside a single environment. An innovative feature called Live Data Preview lets you view database records and ASP values inside Dreamweaver's WYSIWYG environment.

I checked out the Windows 98/NT version of Dreamweaver UltraDev using Microsoft Internet Information Server and Active Server Pages (ASP). The software also supports Java Server Pages (JSP) and ColdFusion sites.

Start Editing

Although I use and appreciate a visual environment for Web design tasks, I can't stand tools that hinder my access to the source code, write incomprehensible script, or worse yet, alter code that I've written. Macromedia has done an excellent job keeping the code accessible. You can open its HTML inspector at any time and tweak your HTML markup by hand. The editor recognizes server-side code such as ASP's delimiters (<% % AND>) and applies color-coding to distinguish script from regular HTML tags. When you return to the visual editor, an icon marks the location of inline ASP code that the editor can't render at design time.

Dreamweaver UltraDev
Macromedia
www.macromedia.com
$599
Upgrade from Drumbeat 2000: $99
Upgrade from Dreamweaver 3: $299.

The built-in Source inspector, the code editor, is a tolerable tool for quick edits, but you'll certainly miss earlier features if you do a lot of coding by hand. Fortunately, you can add an external editor to Dreamweaver UltraDev. Macromedia includes Allaire's HomeSite for Windows users and an evaluation copy of BBEdit for the Macintosh. While Dreamweaver UltraDev's ability to launch an external editor is an acceptable workaround, in this world of components I would expect some form of code completion functionality in UltraDev's own editor.

If you create database-driven Web sites, you'll really appreciate the RAD features in UltraDev. There are tools to set up your database connections, design SQL queries, and drop records into the page. While not exactly wizards, the various tools that you select from UltraDev's menus handily generate a database-driven Web site without requiring any coding. These tools generate basic ActiveX Data Objects (ADO) in your choice of server and scripting language—for me, that means ASP and VBScript.

Connections and Recordsets

Let's look at how easy it is to display an HTML table containing all of the records from the employees table of the Northwind database. Along the way I'll point out some of the time-saving tools that UltraDev provides.

The first thing you need is a database connection. Using Modify > Connection, add a new connection and configure it in the Define Connections dialog box. Here's another example of how the designers are paying attention to the way developers work with an Access database: The dialog box provides separate settings for runtime and design-time data connections, as illustrated in Figure 1. In my case, I'm creating ADO connection strings, so I paste in the ADO parameters and then click on the convenient Test button to confirm that my connection settings work. If you need to build a data source name, click on the ODBC button to start the Windows ODBC Data Source Administrator.

Once you create a connection, you'll need a recordset. To create a recordset, open another well-designed tool called the Data Bindings inspector, which appears by default on the Launcher. Click on the plus (+) sign and select Recordset (Query). From there, choose the connection, table, columns, and sort order. UltraDev instantly creates the SQL command text for you. For more advanced SQL, there's an Advanced button.

Either way, you can click on Test to display the results of your query and visually confirm that you're getting the data you expect. Even though you're displaying all of the employee records, thanks to a looping tool, you'll only need to insert a two-column, single-row table on the design page. To make the row repeat for each record in the resultset, select the row by clicking the "tr" symbol found along the bottom border of the Document window. On the Server Behaviors inspector, click on the plus sign, add a Repeat Region behavior, and configure it to show all records. On your Web design page, you'll see a faint gray tab and a rectangle that marks the area the loop includes. UltraDev writes very readable ASP code to loop through records.

In the old days, this was the point at which you would check your work by saving the file to the server and launching the browser. Not quite satisfied with the result, you'd make another change in the editor and do it all again. If you want, you can still work that way, but wouldn't you rather see how things look without leaving the editor?

Dreamweaver UltraDev's most innovative feature is its ability to preview live data on the design page. Although this capability is tricky to configure the first time, it's certainly worth the effort. To view data in the editor, click on View > Live Data. UltraDev goes out to the server, retrieves your records, and displays them in an editable environment. Try changing the font of the live data in the first table cell just as if it were static text. Because you're changing the font inside a loop, all of the other cells in the loop also adopt the font.

An Editable Submit Form

Let's try another common HTML and database requirement—an editable submit form. The main task is to add the fields and editing commands to the form. That's a drag-and-drop task in Dreamweaver UltraDev—pull in the number of text boxes that you need. To bind the form's objects to the data, just open the Data Bindings inspector and drag and drop the database fieldnames onto the text boxes. UltraDev knows what you're trying to do and writes the code to display the record's values in the text boxes. I also like the fact that UltraDev inserts clean code.
Adding functions to navigate through database records is simple. You can insert links that move to the first, previous, next, last, or given record by selecting Move To behaviors from the Server Behaviors inspector. If you don't have the link text selected, UltraDev adds some default text for you.

Creating a page that updates data is slightly more complicated than navigation, but certainly faster than coding the server script by hand. Drop a Submit button into the form and, with the button still selected, add an Update Record behavior from the Server Behaviors inspector. This is where you choose the connection and recordset and match the existing form objects to the database fields that they're updating. At each turn, the product's quality is apparent.

UltraDev's behaviors save time when you're creating a set of dynamic master/detail pages. In my case, I want to link from the table of employee names (the master page) to each employee's record (the detail page). It's simply a matter of embedding the employee ID into a hyperlink and formatting it to pass the ID value in a query string. I hadn't included the employee-ID field in my original recordset, but it was easy to double-click on the recordset name and add the field. On the master page, highlight the dynamic field that you want to use as the link and create a hyperlink pointing to the detail page name. From the Server Behaviors inspector choose Go To Detail Page. The dialog box analyzes the Web page and shows the eligible hyperlinks.

In the same dialog box, select the parameter name and the column value that you want to pass. UltraDev writes the code.

Finally, move to the detail page where you prepare it to accept the incoming value. From the Server Behaviors inspector add a Move To Specific Record behavior. In the dialog box, match the parameters that you sent from the master page. Another benefit of the Live Data feature shows up here: While working on the detail page you can manually enter the query string parameters to display a specific record.

If you look at the source code in the HTML Source inspector you can see that UltraDev has written a lot of readable script that looks up the record and displays it on your page. However, there are some aspects of the code that you may want to refine manually during your cleanup phase. For example, UltraDev creates numerous data objects but doesn't destroy them.

Macromedia has created an extensible environment in which you can add behaviors that you've written or acquired, and even hook into their JavaScript API. The base files that generate runtime code are easily accessible. That way, if you run across a bug, a new attribute, or a browser incompatibility, you can update the code with any text editor. Actually, if you're still learning JavaScript, be sure to investigate the hundreds of lines of valuable JavaScript examples stored in UltraDev's subdirectories.

Installing Dreamweaver UltraDev is easy, and it takes about 27MB of drive space. The initial configuration of FTP sites and local paths can be a trial-and-error process but it's certainly not an insurmountable task. Unfortunately, the site configuration data is stored in the registry instead of an *.ini file. That makes it harder to pass settings, like paths and URLs, from one computer to another.

As a technical writer and programmer, I appreciate the documentation quality. The tutorials and step-by-step procedures are clear. The UltraDev and Dreamweaver instructions are separate with distinct indexes. This approach assumes that you know that configuring a site is a Dreamweaver function. The writers have created some attractive animations that demonstrate key actions. I could have used more help setting up the Live Data Preview, and some sample data from a working system also would have been useful.

Conclusion

While the features in UltraDev make it a clear winner, let's look at areas where it doesn't fill all of a programmer's needs. First, there's no debugger. You're on your own if you start modifying the code that UltraDev writes. Next, I've never been able to figure out why Macromedia doesn't let me drag files from Windows Explorer and drop them into my project. That's a real usability oversight.

The Dreamweaver environment is clumsy for anyone accustomed to an IDE. I'm still trying to get a handle on all the floating inspector windows. I keep wishing I could dock them neatly in one place and use tabs for quick access. In the same vein, I miss the toolbar buttons for saving changes. The Dreamweaver UltraDev environment offers macro recording, so I might make a Save/Put button.

You may debate whether Dreamweaver UltraDev is really for programmers. The server behaviors that it provides certainly save hours of work. In effect, you're importing debugged code snippets that you customize with dialog boxes. The ability to work with live data on a design page is certainly aimed at programmers, not to mention the ongoing access to the source code. My take on it is that any wizard-like tool that handles the grunt work and lets me work smarter rather than harder belongs in my programmer's toolbox.

In sum, Macromedia has leap-frogged past the competition with its innovative and impressive Dreamweaver UltraDev. It provides well-designed rapid development tools in a cross-platform, cross-browser, and multiserver world. If you develop database-driven Web sites, you want this software.

Ken is a senior technical designer in the information products group at Nortel Networks in Toronto. You can reach him at kjopc@hotmail.com.

Kurt specializes in XML and Internet programming. He is the author of a number o f books, and is just wrapping up XML Developer's Handbook for Sybex. Reach him v ia email at cagle@olywa.net, or from his sh ared Web site at www.vbxml.co m/cagle.