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
Dreamweaver MX features that ColdFusion developers enjoy include the following:
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
Table 2.4. Dreamweaver MX Interface Elements
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
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
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
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.
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
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
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
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
query loop. In addition to creating this code, there are other options to enable you to create a
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: