• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 4. Previewing ColdFusion > Using Dreamweaver MX Code Generation

Using Dreamweaver MX Code Generation

The first thing you'll need to do is start Dreamweaver MX. If you are using Windows, you'll see an option for this in the Macromedia programs group. The first time you start Dreamweaver MX, you'll be prompted for the Workspace to use (as seen in Figure 4.1), and you'll have two options:

  • Dreamweaver MX Workspace. This option is intended for developers (an additional selection allows HomeSite style coding; HomeSite and ColdFusion Studio users will want to check this box).

  • Dreamweaver 4 Workspace. This makes Dreamweaver MX look and feel like the prior version of the program; this option is intended for designers (or anyone with prior Dreamweaver experience).

Figure 4.1. Dreamweaver MX supports two different workspaces, and you can switch between them as needed.

As a ColdFusion developer you'll want to use the Dreamweaver MX Workspace, and all examples in this book assume that you are using this option.


Not using the Dreamweaver MX Workspace? You can switch to it easily. Select Preferences from the Edit menu (or press Ctrl-U) to display the Preferences dialog, select the General category, and then click the Change Workspace button to display the Workspace Setup screen shown in Figure 4.1. Select the left option (and the checkbox) to switch to the Dreamweaver MX Workspace, and then click OK.

Your Dreamweaver screen should look something like the one shown in Figure 4.2, although you may have different panels open. You may expand and collapse panels as needed by clicking the little arrow to the left of the panel name; when the arrow points downward, the panel is expanded; when the arrow points right, the panel is collapsed.

Figure 4.2. In the Dreamweaver MX workspace, Dreamweaver features a large editor window and many surrounding panels.

The most important panel for developers is the Files panel, which provides access to all your code, so make sure you have Files expanded and ready for use.

Preparing to Create an Application

You're now ready to create a ColdFusion application using Dreamweaver MX. Here are the steps you'll need to complete:

  • Create the application root directory.

  • Define a site in Dreamweaver MX.

  • Verify that the application directory is set up properly and ready to use.

Creating the Application Root

Every application should go in its own directory structure, and as explained earlier the Orange Whip Studio applications reside in a directory named ows beneath the Web root.

If you are using the integrated HTTP server and you installed ColdFusion MX in the default location, then the Web root will be c:\cfusionmx\wwwroot, and the application root for the Orange Whip Studio application will be c:\cfusionmx\wwwroot\ows. If you are using an external HTTP server, the paths will vary accordingly. For example, if you are using Microsoft IIS, the Web root will be c:\inetpub\wwwroot, and the application root should be c:\inetpub\wwwroot\ows.

So, the first order of business is to create that application root. You can use your operating system's file utilities (for example, Windows Explorer), or you can do this directly within ColdFusion MX using the Files panel.


To create a new folder, within the Dreamweaver File panel, right-click any folder and select New Folder.

You don't have to put anything in the new ows folder to make it accessible. The fact that ows is beneath the Web root makes that happen automatically.

Creating the Site

Next you need a site. Every application you create in Dreamweaver MX requires a site containing all the files that make up the application, along with settings and configuration options pertaining to servers and deployment. I am not going to cover sites in any detail just now, but you will go through the basics of setting up a site. For now it will suffice to know that you must create a site for each application as follows:

To start the Site Definition process, click Define A Site in the Site tab of the Files panel (you may also select New Site from the Site menu). This will display the Site Definition window as seen in Figure 4.3. If your screen does not look like this, make sure you've selected the Basic tab at the top (not the Advanced one).

Figure 4.3. The Site Definition window is used to create and edit sites.

Every site must have a name, so name this one ows (as seen in Figure 4.3), then click the Next button.

You can use Dreamweaver MX to create static sites (ones that do not use server-side processing), as well as dynamic sites powered by several different server-side technologies. You're creating a ColdFusion site, so check the “Yes, I want to use server technology” option, and make sure you've selected ColdFusion as the server technology to use.

If ColdFusion is installed locally (it should be), Dreamweaver will detect and state its presence as seen in Figure 4.4. When you have made your selections, click the Next button.

Figure 4.4. Dreamweaver MX sites can be used for both dynamic and static content.

Next, Dreamweaver will prompt you for the location of the hosting server (local or remote), as well as the path to the application root. If you are using a locally installed ColdFusion, select the first option, and then specify the path to the newly created ows directory in the field below (as seen in Figure 4.5). You may either type the path, or click the little folder icon to select it interactively. When you're done, click the Next button.

Figure 4.5. When creating a site, you must specify the application root.


If you are not using a locally installed ColdFusion, you should generally choose the second option. As a rule, you should not use the last two options (the ones that use direct editing against remote files).

Dreamweaver needs to be able to communicate with the application server you're using (ColdFusion), so it needs to know the application root's URL. Generally Dreamweaver MX autodetects the correct URL (as seen in Figure 4.6), so check the URL (and correct it if needed), then click the Next button.

Figure 4.6. To process your code correctly, Dreamweaver requires a complete, valid URL to the application root.


To check that the URL is valid, click the Test URL button. If all is well, you'll see a verification message like the one shown in Figure 4.7.

Figure 4.7. It is advisable to test the specified URL before proceeding.

Sites defined in Dreamweaver MX can point to up three servers: a local server (for development), a testing server, and a production server. You won't be using any remote servers for the ows application, so select No as shown in Figure 4.8, and then click the Next button.

Figure 4.8. If you're using remote servers for testing or deployment, you may specify them as part of the Site Definition.

Dreamweaver MX will display a summary screen as seen in Figure 4.9. Check that all the information is correct, and then click Next to create the site.

Figure 4.9. Before creating the new site, Dreamweaver MX displays a summary of all the specifies settings and options.

You've now created a site, and Dreamweaver MX automatically opens it, ready for use (as seen in Figure 4.10).

Figure 4.10. Once a site has been created, Dreamweaver MX opens it for immediate use.


In the future you can open the site by selecting it from the drop-down list at the top of the Site tab in the Files panel.

If you are using ColdFusion as the server-side technology to power your site, then you must perform one additional step. In order for Dreamweaver MX to access server information (for example, databases and their contents), it needs the RDS password (specified during ColdFusion installation). The Application panel (shown in Figure 4.10) indicates that the RDS password is needed, so click the RDS log-in link in that panel to display the password prompt dialog shown in Figure 4.11. Enter the password and click OK. If all is well, you'll see a list of available datasources in the Application panel's Databases tab, as seen in Figure 4.12 (of course, your own list of datasources will likely differ, but the ows datasource created in Chapter 3 should be present).

Figure 4.11. You must provide the RDS password, which protects ColdFusion resources, in order for Dreamweaver MX to access them.

Figure 4.12. If Dreamweaver MX can connect to the ColdFusion server properly, the Databases tab will list available server datasources.


Not seeing any databases? Try clicking the little refresh button on the right side of the panel header to force a refresh.


You may edit site settings as needed, and the Advanced tab in the Site Definition window provides access to additional configuration options.

You now have a working Dreamweaver MX site. Let's create a file in it.

→ Sites are explained in greater detail in Chapter 7, “Introducing Macromedia Dreamweaver MX”

Creating a Work Directory and File

As I explained earlier, to simplify organizing the code created in this book, each chapter's code goes in its own directory.

To create a directory for this chapter, do the following:

Right-click the site name in the Site tab in the Files panel.

Select New Folder.

Name the folder 4 (for Chapter 4), and then press Enter.


Remember these steps, as you'll need to repeat them for most of the chapters in this book.

Now you'll create a file to display a list of movies. The file will go in the new 4 directory, and will be named movies.cfm.

Right-click the 4 directory in the Site tab in the Files panel.

Select New File.

Name the file movies.cfm, and then press Enter.

Double-click the new file to open it in the editor.


You can also create files by selecting New from the File menu, or by pressing Ctrl-N.

Let's name the file right away (with an HTML name, the one that appears in the Browser title bar). Above the editor window is a toolbar, and one of the options is a field for the HTML title. By default it will be Untitled Document, so change it to Movie List by typing that text in the field. Press Enter to update the title; the HTML below will reflect the change as seen in Figure 4.13.

Figure 4.13. The editor window contains your code and reflects any changes made using toolbars or menu options.

Saving, Closing, and Opening Files

Before you go any further, you need to know how to save, close, and open files.

To save a file, do one of the following:

  • Press Ctrl-S.

  • Select Save from the File menu.

  • Right-click the file name tab (beneath the editor) and select Save.


If a file has changed since the last save and therefore needs saving again, an asterisk will appear after its name in the file tab.

To close a file, do one of the following:

  • Press Ctrl-W.

  • Select Close from the File menu.

  • Right-click the file tab and select Close.


Windows users can press Ctrl-F4 to close an open file.

To open a file, do one of the following:

  • Press Ctrl-O.

  • Select Open from the File menu.

  • Double-click the file in the site list.

As you changed movies.cfm (you added the HTML title), save the file.

Testing the Page

Now that you have created a page, you should make sure it is accessible via a Web browser. Open your browser and enter the URL to the page. If you are using the integrated HTTP server, the URL will be:


If you are using a local external Web server, the URL will probably be:


The file displayed will be empty (you've put nothing in it), but as long as you do not receive a browser error, and the browser title bar reflects the specified title, you'll know it's working properly. You can now create ColdFusion pages in Dreamweaver MX and access them via ColdFusion using your browser.


Windows users can launch a browser directly from within Dreamweaver MX by pressing F12.

Creating an Application in Dreamweaver MX

Most of this book teaches ColdFusion coding, so you won't be using Dreamweaver's code-generation (codegen for short) features very much. However, to create the movie-listing application quickly (without writing any code at all), you'll let Dreamweaver MX do the work.

The application is rather simple; it displays a list of movies and their tag lines. As this list could include lots of movies, the application displays just ten at a time, so you'll need navigation options to move from page to page (as well as to the start and end of the list).

As you won't be coding manually right now, you'll switch Dreamweaver from Code View to Code and Design View (you could use Design view, but it's kind of fun to see Dreamweaver writing the code for you). To do so, click the Show Code and Design Views button on the toolbar above the editor window (it's the second button from the left).


If you are having a hard time finding the buttons to switch views, just select the desired view from the View menu.

Dreamweaver MX will display a split screen, as seen in Figure 4.14, with the code at the top and a design window beneath it. As you add design elements and features at the bottom, Dreamweaver MX will update the code above.

Figure 4.14. Dreamweaver MX features a Code View, a Design View, or a Code and Design View in split-screen mode.

Creating a Recordset

The Orange Whip Studios movies are stored in a database, and so the first thing you need to do is to tell Dreamweaver MX how to get that data. In Dreamweaver this is done by creating a Recordset.

Chapter 5, “Introducing SQL,” and Chapter 6, “SQL Data Manipulation,” cover databases, recordsets, SQL, and more in detail.

You'll now create a recordset that retrieves all movies sorted alphabetically by title:

In the Application panel, select the Bindings tab. This tab displays any defined bindings (there are none yet), and allows you to define bindings of your own. Click the plus (+) button and select Recordset (query) to display the Recordset window seen in Figure 4.15.

Figure 4.15. To define recordsets, you must provide database and selection information.

Name the records films (as that it the name of the database table that the data will be retrieve data from), and then select ows from the list of available datasources. This will populate a list of available tables as seen in Figure 4.16.

Figure 4.16. Recordsets are built interactively, and the options and selections available will vary based on prior selections.

Select the Films table. Additional options allow you to specify the columns to retrieve and filter information; leave those as is for now.

In the Sort field, select MovieTitle to sort the returned data by movie title.

The selections you just made built a SQL query (I'll explain that in Chapters 5 and 6). To test that the query is working properly, click the Test button to execute it. You should see a display like the one shown in Figure 4.17. If it looks correct, click OK to return to the Recordset window.

Figure 4.17. The Test button executes SQL queries and displays returned results.


For access to the generated SQL and additional options, click the Advanced button in the Recordset window.

Click OK to save the recordset. You'll notice that Dreamweaver has inserted the database query into the code at the top of the editor.

This ColdFusion page will not display any data yet, but it now knows how to obtain a movie list from the database.

Displaying Dynamic Data

Next, you want to display the data. You'll use an HTML table with a header above each column, and you'll let Dreamweaver create that table for you:

Click in the Design window.

Select the Tables tab in the Insert toolbar above the editor window, and click the Insert Table button (the one on the left) to display the Insert Table dialog. You want 2 rows, 2 columns, and no border, so enter those settings (as seen in Figure 4.18) and then click OK to insert the table.

Figure 4.18. The Insert Table dialog prompts for table information, and then generates the complete HTML table.

The Design window will display the inserted table, and the generated HTML code will appear above, as seen in Figure 4.19.

Figure 4.19. Dreamweaver automatically syncs highlighted code in the code window with design elements in the design window.


If you select any code in the code window, that highlights the corresponding design element in the design window. Similarly, selecting any design element in the design window highlights its code in the code window.

Next you'll add the titles and database columns to the HTML table:

Type Movie in the top left table cell and type Tag Line in the top right table cell. These will be the headers.

You need to make the headers centered and bold. Open the Properties panel (it's beneath the editor window) and highlight the text Movie, then click the bold button (the one with a big B) and the center button (top row in the Properties panel, third from the right). Repeat this for the text Tag Line. You now have table headers like those in Figure 4.20. When you're done, collapse the Properties panel.

Figure 4.20. The Properties panel provides access to formatting and other options.

Next you'll add the database columns (the ones you retrieved in the recordset earlier). The Bindings tab in the Application panel contains the films recordset. Click the + sign to the left of the recordset to expand it and display its columns .

Click the MovieTitle column in the recordset, then drag it to the design window, dropping it in the bottom left cell in your HTML table. The column name will appear in curly braces (so that you know it's dynamic content, not text).

Repeat the last step, this time dragging column PitchText to the bottom right cell. Your page should now look like the one in Figure 4.21.

Figure 4.21. In design view, dynamic data is highlighted and surrounded by curly braces.

Save your changes, and reload the page in your browser (refer to the “Testing the Page” section earlier in this chapter if you need help). You should see output similar to that in Figure 4.22—a single movie listed beneath the specified headers.

Figure 4.22. When building dynamic content, keep checking the results in a browser as you work.

Displaying Multiple Rows

So far, so good—but the page displayed just the first movie, and as Figure 4.17 shows, the database actually contains 23 movies. So why did only the first movie display? Because you didn't tell Dreamweaver to show more.

So your next task is to define a Repeat Region, a block of code or design that will repeat once per row retrieved. Here are the steps:

Select the Server Behaviors tab in the Application panel. You'll see the recordset listed along with the two dynamic elements, the database columns you dragged into the page as seen in Figure 4.23.

Figure 4.23. The Server Behaviors tab lists the server-side dynamic elements in your page.

Before you can create a Repeat Region, you need to specify exactly what it is you want to repeat. Select the entire second row of the HTML table, as that is what you'd like to repeat for each movie.


If you place the pointer just to the left of the table row, it will turn into a left-facing arrow, allowing you to click-select the entire row.

Now that you've selected the second row, click the + button in the Server Behaviors tab to display the Repeat Region dialog seen in Figure 4.24. The correct recordset will be listed (as that is the only one defined right now), and the default value of “show 10 records at a time” will work, so click OK to create the Repeat Region.

Figure 4.24. A Repeat Region is a block of code or design that is repeated once per database record.

Save your changes and refresh the browser to test your new code. You'll now see the first ten rows as seen in Figure 4.25.

Figure 4.25. Refresh your browser anytime you want to test changes you've made to the code.

Implementing Page Navigation

This new version is much better, but now you need a way to get to the next page or any other page. Dreamweaver MX can generate the code for this too, using Recordset Paging behaviors. Here are the steps:

First of all, you need the text that the user will click, so insert a line above the table (just press Enter) and type the following:

[<< First] [< Previous] [Next >] [Last >>] 

When the user clicks << First, the list should jump to the first page of movies. So highlight that text without the square brackets as seen in Figure 4.26.

Figure 4.26. Recordset Paging, like many other Dreamweaver Server Behaviors, requires that you first select the text to which you're applying the behavior.

Click the + button in the Server Behaviors tab (in the Application panel), and select Recordset Paging, then Move to First Page. Verify your selections in the dialog box (seen in Figure 4.27), then click OK to create the behavior.

Figure 4.27. When creating Recordset Paging, you verify each behavior before applying it.

Highlight < Previous to create the previous page link (this one will take the user to the previous page), click the + button in the Server Behaviors tab, and select Recordset Paging, then Move to Previous Page. When the dialog box appears, click OK to apply the behavior.

Now create the next page link (this one will go to the next page). Highlight Next > and apply the Move to Next Page behavior to it.

Finally, create the last page link (it will go to the last page). Highlight Last >> and apply the Move to Last Page behavior to it.

Now save the page and test it once again in your browser. As seen in Figure 4.28, the page displays the first ten movies, and navigation links allow you to move between pages and jump to the first or last page.

Figure 4.28. Always test all options and links in your application.

And there you have it—your very first ColdFusion application. If you look at the code window, you'll see that the entire application is about 40 lines of code, not bad at all for this much functionality (and even better considering that you didn't have to write any of the code yourself).

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint