Code Editing
Dreamweaver is built so that developers can usually accomplish tasks in several ways. Having so many options can be intimidating or confusing at first, but you will soon find the method that is most comfortable for you. That is the beauty of Dreamweaver: You can work however you like. Some people prefer pure Code view, others prefer to avoid manually editing code by using dialog boxes and panels, and the rest fall somewhere in between the two extremes. Whatever your preference is in terms of code editing, Dreamweaver can help you get the job done.
Code Hints and Tag Completion
To most developers, the thought of typing in every bit of code manually isn't very appealing. The more you have to type yourself, the greater the chances you'll make a typo or forget to close a tag. Code hints and tag completion make the job of hand coding so much easier.Preferences" section later in this chapter.Here's how Code Hints and Tag Completion work in Code view:
1. | To add a new tag, type an opening angle bracket (<). |
2. | A list of tags will appear. Type the first letter of the tag you wish to insert. For example, if you would like to add a <select> tag to the document, type the letter s.The list will jump to the first tag that begins with the letter you typed. In this case, it jumps to the <samp> tag. You will need to type the next letter in the tag, e.Depending which tag you are trying to choose, you might need to type additional letters (Figure 2.22). Alternatively, you could use the pointer to scroll to the correct tag and select it, or you can use the down-arrow key to scroll to the tag.Figure 2.22. Type the first letter of the tag, then additional letters as needed, until the tag you require is highlighted.![]() |
3. | Now that the tag is highlighted in the list, press Enter (Return). The highlighted text in the list is inserted into the document. |
4. | If you wish to add attributes to the tag, press the spacebar. If there are attributes known for the current tag, a list is displayed for you (Figure 2.23). As described in step 2, you can choose the attribute from the list by typing the first letter then additional letters as needed or by scrolling to the attribute.Figure 2.23. If attributes are known for the current tag, they too are available as code hints.![]() TIPIf you make a mistake and use the backspace to correct your error, the code hint menu will disappear. To bring it back into view, press Control-Space (Command-Space). Even better yet, don't correct your mistake by re-typing it. Instead, scroll to the correct tag in the list and press Enter (Return). Dreamweaver corrects your typo for you! |
5. | Once you've highlighted the attribute in the list, press Enter (Return). The attribute, followed by an equal sign (=), is added to the code. Your cursor is placed conveniently between a pair of quotes so that you can add the attribute's value if a hint menu appears or by typing the shortcut manually.If the attribute has possible default text values available, they are listed in another code hint menu and can be chosen in the same way as tags and attributes. If the attribute's value is a color, the color picker appears. If the attribute's value can be a file path or file name, the browse option appears so that you can locate the file; Dreamweaver will add the path accordingly. |
6. | After adding the attribute's value, you need to move past the closing quotation mark by either pressing the right-arrow key or clicking after the quote mark. You can add more attributes by repeating steps 4 through 6 as needed. |
7. | When you're ready, finish off the opening tag by typing the closing angle bracket (>). The closing tag will be added following your cursor so that you can enter additional tags, text, or other contents within the newly entered tag. |
Chapter 23, "Building Reusable Components," and are ideal for adding to your tag library.chapter 26, "Extending ColdFusion with Java," in our companion book, Advanced Macromedia ColdFusion MX 7 Application Development (Macromedia Press, 0-321-29269-3).
The Code Panel Group
Bundled within the Code panel group is one of the most useful panels that deal strictly with using code, the Snippets panel. The Reference panel offers context-sensitive information that is much easier to search through than a huge stack of books.
The Snippets Panel
Often you will find that you can easily reuse some pieces of code if you don't have to go out of your way to find them. Many developers store their reusable code in plain text files, but spend too much time hunting through the files for the piece they need. The Snippets panel makes storing and reusing code pieces a breeze (Figure 2.24). The kinds of code you can store as a snippet are limitless: HTML, CFML, JavaScript, CSS, or any other type you fancy. You can even drag and drop the snippets and folders within the Snippets panel to reorganize them. To display the Snippets panel, select Window > Snippets or press Shift-F9.
Figure 2.24. The Snippets panel stores pieces of reusable code that you can insert into the document whenever you need them.

1. | Position your cursor in the structure where you wish the new folder to be added, just as you would if you were adding a new folder in the Files panel. |
2. | Choose one of the following options:
|
3. | Once the folder appears with the default name highlighted beside it, give the folder a meaningful name so you can easily locate your snippet later. |
4. | Press Enter (Return) or click elsewhere to make the folder name change complete. |
To add a new snippet:
1. | If the code is already located in the current document, select it. |
2. | Position your cursor in the structure where you wish to add the new snippet, just as you would if you were adding a new file in the Files panel. |
3. | Choose one of the following options:
|
4. | When the Snippets dialog box appears, if you had selected some code, it will appear in the dialog (Figure 2.25). Complete the fields and select the proper options.Figure 2.25. The Snippets dialog is used for both creating and editing snippets.[View full size image] ![]() |
Name.
Use this field to assign a descriptive title to the snippet that will appear in the panel.Description.
This field provides a place for you to enter a description or other notations pertinent to the snippet code.Snippet Type.
If Wrap Selection is chosen, Dreamweaver will place the code listed in the Insert Before field prior to the selection in the document, and the code listed in the Insert After field following the current selection. Choose Insert Block if the piece of code should be inserted where your cursor is positioned.Insert Before.
This field is shown when the Wrap Selection option is chosen. The code in this field will be inserted prior to the cursor position or selected code.Insert After.
This field is shown when the Wrap Selection option is chosen. The code in this field will be inserted following the cursor position or selected code.Insert Code.
This field is shown when the Insert Block option is chosen. The contents of this field are inserted prior to the cursor position or selected code.Preview Type.
The choice of displaying the snippet either as code or as a preview of the design in the top portion of the Snippets panel is given as Code and Design, respectively. If Dreamweaver is unable to render a design for the snippet, the code is displayed instead.
TIP
Hundreds of snippets of virtually all types are available for download at the Snippets Exchange located at www.dwfaq.com/Snippets/ .To edit a snippet:1. | Locate, then select the snippet you wish to modify. |
2. | Choose one of the following options:
|
3. | The same dialog appears that is used to create snippets. Make the necessary changes, then click OK. |
To insert a snippet:
1. | Position your cursor in the code or make a selection of code. |
2. | Locate, then select the snippet you would like to insert. |
3. | Choose one of the following options:
|
TIP
When inserting a snippet, it's best to do so in Code viewor at least with Code and Design view both openso that you're certain the code will be placed in the proper location. Using snippets in Code view is especially important if you're attempting to insert a snippet that wraps the selection.To delete a snippet or folder:NOTE
The snippets created in Dreamweaver aren't compatible with other Macromedia programs that also use snippets. If you have snippets in HomeSite or ColdFusion Studio that you would like to make available in Dreamweaver, use the Snippets Converter extension by Massimo Foti, available for download at www.dwfaq.com/Snippets/converter.asp .The Reference Panel
To help you with your coding, Macromedia provides several helpful reference books within the Reference panel (Figure 2.26). To display the Reference panel, select Window > Reference or press Shift-F1.
Figure 2.26. Shown here is the Macromedia ColdFusion Reference.

TIP
The Reference panel is context sensitive. If your cursor is positioned in a recognized element, press F1 and it will open to the pertinent information.The basic premise for each reference book is the same. To use the Macromedia CFML Reference, select it from the list of Books. Choose the CFML tag from the list on the left to view a description of the tag. Choose the attribute in the Description list menu, if available, to display information regarding the attribute for the specific tag. You can change the font size used in this panel by choosing a large, medium, or small font from the Options menu.The Application Panel Group
Within the Application panel group, you will find four of the most useful panels for ColdFusion application development. The panels help you connect to your database to retrieve records, allow you to format the data on the page, and more. You can add code to the page manually through Code view, or use Design view to get the job done using the dialogs provided. However you choose to work, these panels are truly indispensable and can save you loads of time.
The Databases panel
Dreamweaver's Databases panel functions as the window to your database (Figure 2.27). To display the Databases panel, choose Window > Databases or press Control-Shift-F10 (Command-Shift-F10).
Figure 2.27. Dreamweaver displays known data sources in the Databases panel.

<CFQUERY NAME=" DATASOURCE="ows"></CFQUERY>
TIP
When a query is added to your page from the Databases panel, the code is inserted in capital letters as shown. You can choose Commands > Apply Source Formatting to change the casing according to your preferences in the Code Format category of Edit > Preferences.Drag and drop a listed table or field into place in Code view to insert its name. This is especially handy if you prefer to hand code, but have difficulty remembering the names of tables and fields, or you wish to avoid introducing errors.Dragging and dropping any listed database, table, or field into Design view will initiate the Recordset dialog box. See the Bindings panel section for more information.The Bindings panel
Using the Bindings panel, you can define and call recordsets and stored procedures without writing a single line of SQL (Figure 2.28).The Bindings panel helps you to automate the process of inserting and calling variables in your code, such as CGI, URL, form, and session variables and so on. When you create a record set, Dreamweaver inserts the <cfquery> tag that connects to your database to pull specified records. This panel makes it easy to insert a Stored Procedure or a <cfparam> tag. To display the Databases panel, select Window > Databases or press Control-F10 (Command-F10).
Figure 2.28. Use the Bindings panel to call, insert, and format data sources.
Chapter 4, "Previewing ColdFusion," describes recordset creation.You can drag and drop a data source into Code or Design view or first select it and then choose the Insert button. The Bindings panel displays three columns, though you can't see the second two without scrolling unless you widen the panel or adjust the column widths:
- Source.
The first column indicates the source of the data (that is, the record set, stored procedure, session variable, and so on). Choose the Add (+) button to supply the Bindings panel with more data sources. Use the Remove () button to delete the selected data source from the panel and the document code. - Binding.
Data can be bound to attributes of certain visual tag types, such as form elements, links, and images. With the element selected in Code or Design view, choose the attribute listed in the Bind To field, then select the Bind button. If a data source is bound to the selected element already, the Bind To field will be dimmed and you can choose the Unbind button to remove the bond. - Format.
You can add server-side formatting (date formats, currency formats, change selection to uppercase or lowercase text, and so forth) when a listed data source is selected in the document. Apply formats to fields only where appropriate to avoid errors. For instance, don't apply Date formatting if the data source isn't specifically set up to handle dates.
The Server Behaviors panel
Dreamweaver's server behaviors add dynamic functionality to your Web pages. The server behaviors that ship with Dreamweaver can fulfill many of the most common needs of a dynamic page. The Server Behaviors panel even allows you to create your own server behaviors easily with the Server Behavior Builder. To display the Server Behaviors panel, select Window > Server Behaviors or press Control-F9 (Command-F9).The Repeat Region server behavior will insert the necessary <cfoutput> tag pair into the document (Figure 2.29) needed to repeat its contents according to the specifications made in the dialog. After you've used the Repeat Region server behavior, you may find yourself needing to move through many returned records. The Recordset Paging server behavior allows you to create a link to the first, next, previous, or last record.
Figure 2.29. To help you recognize where server side code appears in the document while in Design view, Dreamweaver uses a tab with the appropriate label. In this case, a Repeat Region is shown.
[View full size image]

The Components panel
The Components panel lists all ColdFusion Components (CFCs) and Web Services detected on the testing server (Chapter 23, "Building Reusable Components."
Figure 2.30. Installed ColdFusion Components are readily available in the Components panel.
