Working with Dreamweaver MX

Macromedia has recently introduced Dreamweaver MX, their new development platform for web applications. Dreamweaver MX has visual design and editing capabilities, but also sports one of the best code-editing environments on the market Macromedia's HomeSite. Dreamweaver MX is a slick combination of Dreamweaver, HomeSite, ColdFusion Studio, and JRun Studio. Dreamweaver MX helps you to build robust, database-driven web applications using ColdFusion Markup Language (CFML), Active Server Pages (ASP), JavaServer Pages (JSP), and PHP.

For those of you who have always used ColdFusion Studio, Dreamweaver MX includes numerous tools to help you write code efficiently. Dreamweaver MX boasts features such as tag completion and code coloring. It also includes complete reference material on Hypertext Markup Language (HTML), CFML, JavaScript, and more. One of the nicest things about Dreamweaver MX is that it maintains your hand-written code without reformatting it as many what-you-see-is-what-you-get (WYSISYG) editors tend to do.

Dreamweaver MX features that ColdFusion developers enjoy include the following:

• CFML tag insight

• Code validator with a ColdFusion version-compatibility check

• Snippets panel for saving all your favorite bits of code

• Integrated debugging

• A remote ColdFusion Server connection for browsing datasources and files

• New wizards for creating useful ColdFusion code

Dreamweaver MX Workspace

When using Dreamweaver MX in Windows, you are given a choice of two workspace layouts. The floating layout is similar to that of Dreamweaver 4. The one that I want to concentrate on is the integrated layout, which is better-suited to ColdFusion application development.

After you've installed Dreamweaver MX on your Windows-based system, you are asked to choose a workspace layout in the Workspace Setup dialog box. The Dreamweaver MX workspace has a HomeSite/Coder-Style option that offers an integrated workspace with panel groups docked within one window. This workspace is similar to HomeSite and ColdFusion Studio, but offers access to all the latest tools to help developers create applications more quickly. Table 2.4 provides an overview of the various interface elements.

Table 2.4. Dreamweaver MX Interface Elements

Interface Element	What It Does
Insert bar	The Insert bar contains buttons that enable you to insert pieces of code into your template. The Insert bar contains a number of different toolbars separated by their function, such as Forms or Frames.
Document toolbar	The Document toolbar contains buttons and menus that enable you to toggle between Code and Design views for your template.
Standard toolbar	The Standard toolbar contains all the standard buttons for interacting with files: New, Open, Save, Save All, Cut, Copy, Paste, Undo, and Redo. The Standard toolbar is not visible by default. To show it, choose View, Toolbars, and then Standard.
Document window	The Document window shows the current document as you edit it. It shows your document in Design view or Code view; you can also use a split view that shows both Design view and Code view.
Property inspector	The Property inspector shows you all the properties of the current tag or text on which your cursor is located.
Tag selector	The tag selector appears near the bottom of the Document window on the status bar. It shows you the tags that surround the currently selected elements. By clicking a tag in the tag selector, you can highlight all the code that appears within the selected tag in the Design or Code views.
Panel groups	Panel groups contain several related panels. You can expand or contract and dock or undock panels from your workspace.
Site panel	You use the Site panel to manage your files and folders in your site, including those that are local and remote. You can also use the Site panel to create documents or folders and to view, open, and move files and folders.
Launcher bar	The Launcher bar provides shortcut buttons to your favorite or frequently used panels or tag inspectors. You can customize which shortcut icons appear on your Launcher bar by setting your preferences for the status bar.

Creating Sites in Dreamweaver MX

If you've used ColdFusion Studio in the past, you might know that you can manage the files that make up your ColdFusion application or web site in a project. Dreamweaver MX manages all the files used in your application. The files are referred to as assets in a site.

You can create a site in Dreamweaver MX and populate it with existing files, or you can create an empty site. Either way, before you start developing your application, you must create and specify a Dreamweaver MX site (see Figure 2.1). The site is merely a way to keep your files organized and to maintain their relationships to each other. Unlike ColdFusion Studio, Dreamweaver MX automatically tracks and maintains links and manages your files.

Figure 2.1. Creating a Dreamweaver MX site with the Site Definition Wizard.

To create a new site in Dreamweaver MX, select Site from the Main menu, and then select New Site. The Site Definition dialog box appears and enables you to fill out the remainder of the site configuration options by using a convenient wizard, as shown in Figure 2.1, or by selecting the Advanced tab and filling out your setting manually, as shown in Figure 2.2.

Figure 2.2. Creating a Dreamweaver MX site manually using the Advanced tab.

Connecting to Datasources in Dreamweaver MX

To connect to a ColdFusion datasource within Dreamweaver MX, you must have that datasource defined within the ColdFusion Administrator. You create a datasource within ColdFusion Administrator in the same way that you have in previous versions of ColdFusion. Dreamweaver MX provides you with tools to help you access ColdFusion Administrator.

In Dreamweaver MX, you have a Databases panel within the Application panel group. In the Databases panel, click the Modify Data Sources icon in the top-right corner. This launches the ColdFusion Adminstrator in a new browser window and enables you to create your datasource. For more information on creating ColdFusion datasources, check out Chapter 4, "Fundamentals of ColdFusion Development." Figure 2.3 shows the Database panel in Dreamweaver MX.

Figure 2.3. Creating a datasource connection in Dreamweaver MX.

After you've created the datasource in ColdFusion Administrator, you need to connect to it from Dreamweaver. To connect to your datasource, create a new ColdFusion template or open one that already exists inside your site.

Note

One of the nice things about Dreamweaver MX is that the tabs on the Insert bar change according to the type of document on which you're working. If you create a new HTML document, you have access to only the tabs that apply to plain HTML. If you create a new ColdFusion document, you see the tabs for CFML Basic, CFML Flow, and CFML Advanced.

After you've created your new datasource, you should see it appear in the Databases panel, although you might have to refresh the view of that panel. You then can expand your view of that particular datasource and its tables. You can even view its data as shown in Figure 2.4. If you cannot see any datasources, you can click each required step that appears within the Databases panel. These steps help you walk through the processes required to make sure that you can interact with your backend data.

Figure 2.4. Viewing a datasource in Dreamweaver MX .

Creating Queries in Dreamweaver MX

The typical way that we looked at creating queries in ColdFusion Studio has changed a lot with Dreamweaver MX. In ColdFusion Studio, we just right-clicked a database table within our datasource and selected New Query. Up would pop the SQL/Query Builder. We'd drag and drop columns into the structured query language (SQL) statement, define our criteria, and then save our query. Then by pasting that query code into our ColdFusion template, we would create a result set. Dreamweaver MX takes a bit of a different approach.

In Dreamweaver MX, we look at all the possible sources of dynamic content. Simply put, a dynamic content source is a block of stored information that you access for evaluation or comparison processing and display within your web page or application. This includes information that is stored in the database as you might expect, but it also includes form structures with values (perhaps submitted by an HTML form), server objects, and values from JavaBeans. Any of these types of content sources can be added to Dreamweaver MX's Bindings panel.

It is probably most common that we use a database as our content source. In Dreamweaver MX, a query is referred to as a recordset. A recordset is the collection of data that is returned from the database. It might contain all the rows and columns that make up the complete database, but it can be (and should be) refined to include only the data that you need.

You can create a recordset by clicking the plus (+) button within the Bindings panel of the Application panel group. You can create your recordset without writing any SQL code in the default Simple view (see Figure 2.5), or you can write your own advanced SQL code in the Advanced view (see Figure 2.6). After you save the recordset, it is inserted into your ColdFusion template and saved to your Bindings panel for access later.

Figure 2.5. Creating a Dreamweaver MX recordset in Simple view.

Figure 2.6. Creating a Dreamweaver MX recordset in Advanced view.

Displaying Dynamic Content

Of course, Dreamweaver MX also makes it easy for you to include dynamic content in your ColdFusion templates. You can add the dynamic content from your recordset to replace static text strings or to fill in the values for HTML or CFML attributes and more. After you've created your recordset, you can add elements of it to your application pages by simply selecting the column name from the recordset and dragging it into your code. You then drop it at the insertion point where you want the value to appear.

Once you insert a dynamic content call into your page template, the reference to that content is added to the Server Behaviors panel, which is still in the Application panel group. They are now considered server behaviors. You can edit a server behavior by double-clicking the listing within the Server Behaviors panel. When you double-click them, the same dialog box that you used to build them appears. You then can make your changes within that dialog box. When you make your change to that server behavior, it automatically is reflected within the page that you're editing. If you choose to remove one of the server behaviors in your template, you can select the code within the template and press the Delete key, or you can select the server behavior in the Server Behaviors panel and click the minus (-) button.

Dreamweaver MX lists server behaviors in the order in which they appear within the template. In the event that the same server behavior appears in a template more than once, you can distinguish between them by clicking the server behavior and checking which sections of code are highlighted.

Dreamweaver MX has several predefined server behaviors that you can use. One of them is called the Repeat Region. This creates your typical CFOUTPUT query loop. In addition to creating this code, there are other options to enable you to create a next/previous record navigation just by filling out a few optional items. For those of you who have used custom tags to take care of this in the past, you know that it is a time saver? In Figure 2.7, you can see that Dreamweaver MX includes more built-in server behaviors.

Figure 2.7. Server behaviors in Dreamweaver MX .

You can also create and edit your own custom-built server behaviors and add them to the Server Behaviors panel.

Debugging in Dreamweaver MX

You can debug your ColdFusion application code in Dreamweaver MX. If you're using Dreamweaver MX as your testing server, you can code, test, and debug the ColdFusion template without ever leaving Dreamweaver. Check out the code in Listing 2.1. You should notice that we have two CFOUTPUT closing tags.

Listing 2.1 Debugging ColdFusion Code in Dreamweaver MX

 <cfset variables.myname="Neil Ross">  <html>    <head>      <title>Inside ColdFusion MX - Dreamweaver MX Debugging</title>    </head>    <body>      <cfoutput>My name is #variables.fullname#</cfoutput></cfoutput>    </body>  </html> 

Of course, this won't work. In Figure 2.8, we can see how Dreamweaver MX handles the error.

Figure 2.8. Debugging in Dreamweaver MX.

To debug a page in Dreamweaver MX, follow these simple steps:

1. Open the ColdFusion page in Dreamweaver MX.

2. Click the Server Debug icon on the Document toolbar.

3. If an Exceptions category appears in the Server Debug panel, click the plus (+) and check out the error.

4. In the Server Debug panel's Location column, click the link to open the page in Code Edit view.

5. Fix the error and save the template.

ColdFusion Components in Dreamweaver MX

One of the hottest new features of ColdFusion MX is that of ColdFusion components (CFCs). Though we do not go into a lot of detail here about CFCs (we do later in Chapter 6, "ColdFusion Components"), let us at least introduce you to them and how they can be created and accessed within Dreamweaver MX.

CFCs enable you to wrap application or business process logic into self-contained units. CFCs take encapsulation further than do ColdFusion custom tags. They yield nicely encapsulated, resuable segments of code. In addition to providing another means for code reuse, CFCs also provide a great way to create web services. CFCs are written in CFML and can encapsulate entire segments of business logic within a web application. CFCs are the preferred unit for business logic now, and ColdFusion custom tags should be used for encapsulation of presentation elements.

Dreamweaver MX enables you to create CFCs visually or by editing the CFC code directly. To create a CFC visually within Dreamweaver MX, follow these simple steps:

1. Open a new ColdFusion page.

2. Select CF Components from the drop-down menu in the Component panel.

3. Click the plus (+) button to add a new component.

4. When the Create Component dialog box opens, complete the options and click OK.

As noted, we cover the real details of CFCs in Chapter 6.

Dreamweaver enables you to view CFCs and to check out any CFC defined within your site. Dreamweaver reads, interprets, and displays information about the CFC in an easy-to-navigate tree structure within the Components panel. You can also check out each CFC's functions and arguments. In addition, you can check out the properties of any CFC function that serves as a web service. Figure 2.9 shows the Components panel and available CFCs.

Figure 2.9. Viewing CFCs in Dreamweaver MX.

To view CFCs in Dreamweaver MX, follow these steps:

1. Open any ColdFusion page in Dreamweaver MX.

2. Select CF Components from the drop-down menu in the Components panel.

3. Click the Refresh button to view the CFCs available to the current server.

4. Click the plus (+) icons to drill down into the CFC package and individual components and functions.

You can edit a CFC in Dreamweaver MX by opening the CFC package and selecting the CFC that you want to edit. Right-click that CFC and choose Edit Code from the menu that appears. If you chose the CFC itself, the CFC template opens. If you chose to edit a particular function, the CFC template opens with the code that comprises the selected function highlighted.

Remember these tips about working with CFCs in Dreamweaver MX:

• ColdFusion MX must be running locally.

• Your testing server must be set up as Local/Network.

• The path to your local root folder must be the same as that to your testing server folder.

• The CFC must be stored on your hard drive.