Using Dreamweaver Code Generation

The data used by the Orange Whip Studios applications hasn't been set up yet, so for this first application we'll use one of the example databases that is installed with ColdFusion, and we'll display a list of available art items from an art database.

If you haven't already done so, open Dreamweaver. Your screen should look something like the one shown in Figure 4.1, although you may have different panels open. You can 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.1. 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

Before you can start using Dreamweaver to write ColdFusion code, the following steps must have been performed:

• Create the application root directory.

• Define a site in Dreamweaver.

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

If you did not complete these steps back in Chapter 2, "Introducing Macromedia Dreamweaver MX 2004" please refer to that chapter before continuing.

Make sure that the ows site (created back in Chapter 2) is open.

Creating a Work Directory and File

As explained previously, 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:

1.	Right-click the site name in the Site tab in the Files panel.
2.	Select New Folder.
3.	Name the folder 4 (for Chapter 4), then press Enter.

TIP

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 the art list. The file will go in the new 4 directory, and will be named art.cfm.

1.	Right-click the 4 directory in the Site tab in the Files panel.
2.	Select New File.
3.	Name the file art.cfm, and then press Enter.
4.	Double-click the new file to open it in the editor.

TIP

You can also create files by selecting New from the File menu, or by pressing Control-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 Art 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.2.

Figure 4.2. 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, let's review how to save, close, and open files.

To save a file, do one of the following:

• Press Control-S.

• Select Save from the File menu.

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

TIP

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 Control-W.

• Select Close from the File menu.

• Right-click the file tab and select Close.

TIP

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

To open a file, do one of the following:

• Press Control-O.

• Select Open from the File menu.

• Double-click the file in the site list.

As you changed art.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:

 http://localhost:8500/ows/4/art.cfm 

or

 http://localhost:8300/ows/4/art.cfm 

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

 http://localhost/ows/4/art.cfm 

The file displayed will be empty (you've put nothing in it), but as long as you don't 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 and access them via ColdFusion using your browser.

TIP

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

Creating an Application in Dreamweaver

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 art list application quickly (without writing any code at all), you'll let Dreamweaver do the work.

The application is rather simple; it displays a list of available art items along with the description and price for each. As this list could include lots of items, 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, the one with the word Split on it).

TIP

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

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

Figure 4.3. Dreamweaver features a Code view, a Design view, or a Code and Design view in split-screen mode.

Creating a Recordset

We'll be displaying the art list retrieved from a database, and so the first thing you need to do is to tell Dreamweaver how to get that data. In Dreamweaver this is done by creating a Recordset.

Chapter 6, "Introducing SQL," and Chapter 7, "SQL Data Manipulation," cover databases, recordsets, SQL, and more in detail.

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

1.	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.4. Figure 4.4. To define recordsets, you must provide database and selection information.
2.	Name the records art,then select cfartgallery from the list of available datasources. This will populate a list of available tables as seen in Figure 4.5. Figure 4.5. Recordsets are built interactively, and the options and selections available will vary based on prior selections.
3.	Select the ART table. Additional options allow you to specify the columns to retrieve and filter information; leave those as is for now.
4.	In the Sort field, select ARTNAME to sort the returned data by title.
5.	The selections you just made built a SQL query (I'll explain that in Chapters 6 and 7). 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.6. If it looks correct, click OK to return to the Recordset window. Figure 4.6. The Test button executes SQL queries and displays returned results. TIP For access to the generated SQL and additional options, click the Advanced button in the Recordset window.
6.	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 won't display the art list yet, but it now knows how to obtain that information 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:

1.	Click in the Design window.
2.	Select the Common tab in the Insert toolbar above the editor window, and click the Insert Table button (fourth from the left) to display the Table dialog. You want 2 rows, 3 columns, no specified width, no border, and a top header, so enter those settings (as seen in Figure 4.7) and then click OK to insert the table. Figure 4.7. The Insert Table dialog prompts for table information, and then generates the complete HTML table.
3.	The Design window will display the inserted table, and the generated HTML code will appear above, as seen in Figure 4.8. Figure 4.8. Dreamweaver automatically syncs highlighted code in the Code window with design elements in the Design window.

NOTE

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:

1.	Type Title in the top left table cell, Description in the top center table cell, and Price in the top right table cell. These will be the headers, as seen in Figure 4.9. Figure 4.9. Edits may be made in either the Code window or the Design window.
2.	Next you'll add the database columns (the ones you retrieved in the recordset earlier). The Bindings tab in the Application panel contains the art recordset. Click the + sign to the left of the recordset to expand it and display its columns.
3.	Click the ARTNAME 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).
4.	Click the DESCRIPTION column in the recordset, and drag it to bottom center cell in your HTML table.
5.	Repeat the last step, this time dragging column PRICE to the bottom right cell. Your page should now look like the one in Figure 4.10. Figure 4.10. 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.11a single item listed beneath the specified headers.

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

Displaying Multiple Rows

So far, so goodbut the page displayed just the first item, and as Figure 4.6 above shows, the database actually contains lots more. So why did only the first item display? Because you didn't tell Dreamweaver to show any more.

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:

1.	Select the Server Behaviors tab in the Application panel. You'll see the recordset listed along with the three dynamic elements, the database columns you dragged into the page as seen in Figure 4.12. Figure 4.12. The Server Behaviors tab lists the server-side dynamic elements in your page.
2.	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 art item. TIP 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.
3.	Now that you've selected the second row, click the + button in the Server Behaviors tab and select Repeat Region to display the Repeat Region dialog seen in Figure 4.13. 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.13. 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.14.

Figure 4.14. 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 can generate the code for this too, using Recordset Paging behaviors. Here are the steps:

1.	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 >>]
2.	When the user clicks << First, the list should jump to the first page of art items. So highlight that text without the square brackets as seen in Figure 4.15. Figure 4.15. Recordset Paging, like many other Dreamweaver server behaviors, requires that you first select the text to which you're applying the behavior.
3.	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.16), then click OK to create the behavior. Figure 4.16. When creating Recordset Paging, you verify each behavior before applying it.
4.	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.
5.	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.
6.	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.17, the page displays the first ten items, and navigation links allow you to move between pages and jump to the first or last page.

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

And there you have ityour 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).