Building Applications in Dreamweaver Workspace

This chapter is from the book 

Macromedia Dreamweaver has grown over the years to be quite a substantial program with many features, options, and methods of working. With the introduction of Dreamweaver MX, the two realms of Web design and Web development were brought together in a new interface with enhanced features for both coders and designers.

Whether you’re totally new to Dreamweaver or just new to creating dynamic Web applications with the program, this chapter will help you find your bearings. The first part of the chapter is an exploration of the Dreamweaver workspace with an emphasis on its application-building capabilities. In addition to an overview of the Web authoring environment, you’ll also find clear directions on getting started with dynamic pages. The rest of the chapter deals specifically with the basics of Web application tools that are standard in Dreamweaver. Everything from applying server behaviors to working in Live Data view is described.

Working in the Workspace

The Dreamweaver workspace consists primarily of a document representation and a number of panels, both by themselves and collected in panel groups [c2-1]. The document can be viewed in Design view, which approximates how a browser would render the Web page, or Code view, where the underlying source code is revealed. There is also a split window option to see both views at once—a useful tool both for learning about the code Dreamweaver generates and for quickly selecting and modifying an element or tag on the page. Switch from one view to another by selecting your choice under the View menu (Code, Split, or Design) or by choosing one of the view buttons on the Document toolbar.

One of the most useful features in Dreamweaver, the Tag Selector, is displayed at the bottom of the Document window. Select any text or object, and the associated tag will be shown at the far right of the Tag Selector; all previous tags in the code will then be shown to the left. The Tag Selector is often the quickest, surest way to select a specific page element [c2-2].

Exploring Panels and Panel Groups

The panels and panel groups are quite flexible and can be easily adapted to suit the way you work. As the name implies, panel groups contain individual panels. You can open any panel—regardless of whether it is currently onscreen—by choosing its entry under the Window menu. You can also display onscreen panels or panel groups by clicking once on the name; clicking the name again closes the panel or panel group.

You can rearrange the panel groups, as well as most panels within them, to suit your workflow. To move a panel group outside of the docked area, drag the group by the far left edge of the title bar; this area, which appears to be a series of dots [c2-3], is called the gripper, and you’ll know you’re in the correct position when your pointer becomes a four-headed arrow. You can drag panel groups or most individual panels so that they are either free-floating or docked. A heavy black border appears when a docking position is available.

You can access any panel in a panel group by clicking its tab. To move a panel from one panel group to another—or to isolate it—you need to use the Options menu, available on the right side of the panel group’s title bar. From the option menu, choose Group PanelName With—where PanelName is the current panel—and then, from the submenu, select the panel group you’d like the current panel to move to. For example, if you wanted to combine the Reference and History panels, select the Options menu from the Reference panel and choose Group Reference With History. You can rename most panel or panel groups—an option also available from the Options menu. To separate a panel from a panel group, select it and, from the Options menu, choose Group PanelName With New Panel Group.

Although you’ll find yourself using almost every aspect of Dreamweaver, the primary panel group used in building dynamic Web applications is labeled, appropriately enough, Application. In the Application panel group, you’ll find four relevant panels:

• Databases— The Databases panel lists the connections to data sources that are available throughout the entire site. ColdFusion users will see all the data sources set up through the ColdFusion Administrator, whereas ASP developers are shown those connections explicitly made in Dreamweaver for a given site. Expanding the Databases tree displays the tables, views, and stored procedures of each data source; expanding these elements shows the individual fields used; you can drag these elements onto the page when writing server-side code to avoid typographical errors.
• Bindings— The Bindings panel displays any data sources, primarily recordsets and server-side variables, available for use on the current page. You’ll frequently need to access recordset fields from the Bindings panel to insert dynamic text on the page. The Bindings panel also controls the server-side formatting of dynamic text.
• Server Behaviors— Server behaviors are encapsulated blocks of server-side code. The Server Behaviors panel displays all the server behaviors that have been inserted into the page. Selecting a server behavior in the panel highlights the corresponding code in the Document window.
• Components— The Components panel is active only when the document type is one of the ASP.NET options or ColdFusion. Under both ASP.NET and ColdFusion, the Components panel displays available Web Services; with ColdFusion, you’ll also see the accessible ColdFusion components.

In all of these Application panels, use Add (+) to insert an element and Remove (−) to delete a selection. You’ll notice the Add (+) and Remove (−) controls throughout the Dreamweaver interface.

Modifying Attributes with the Property Inspector

The Property inspector is perhaps the most important of all the panels; it certainly is among the most commonly used. The Property inspector is contextual; that is, it displays the attributes for whatever element is currently selected. A completely different Property inspector is shown depending on whether a table or a Flash movie is selected, for example. The default state in Design view shows the Text Property inspector with either standard font tag or CSS attributes; toggle between CSS and HTML modes by changing the Use CSS Instead of HTML Tags option found in the General category of Preferences (Edit > Preferences). In addition to numerous list and text fields, the Property inspector has several special function controls [c2-4]:

• Color Swatch— Select the color swatch to display a palette of available colors from which to choose from. When the color swatch is open, the eyedropper also permits you to sample a color from anywhere on the screen.
• Browse for File— Choose the Browse for File icon when you want to open the Select File dialog, as when assigning a link. The Select File dialog also displays any available data sources, such as data source fields from a recordset.
• Point to File— Drag the Point to File icon over any filename in the Site panel to use the path to that file as a value. You can also use the Point to File icon within a page to designate a named anchor.

One interface control is especially important to building database-driven Web applications: the lightning bolt icon. Clicking the lightning bolt gives the user access to the Dynamic Data dialog, which contains a list of recordsets, session variables, and any other data sources available to the current page. The lightning bolt icon appears in various Property inspectors, but it is consistently available for any attribute in the Tag panel—which can be used as an alternative to the Property inspector. Unlike the standard Property inspector, the Tag panel displays all the attributes for a selected tag, not just the most commonly used ones [c2-5].

Adjusting Preferences

The final stop in our brief tour of the Dreamweaver environment is the Dreamweaver Preferences. When you open Preferences by choosing Edit > Preferences (Dreamweaver > Preferences on OS X), a large dialog with many options is displayed [c2-6]. On the left of the dialog is a series of categories; select any category to change related options. There are 20 categories in Dreamweaver that allow you to control any aspect of the authoring environment and the program’s output.

Rather than explain every option in Preferences, I’d like to focus on a few that are especially important to Web application building. For more information on any preference not discussed here, context-sensitive help is available for every category.

Dynamic Web applications are decidedly code-intensive, and I’m sure some would argue that they should in fact be code-exclusive. Wherever you stand on the code to design spectrum, you’ll greatly appreciate the flexibility and power that Dreamweaver provides in Code view. There are numerous categories in Preferences that deal with code in some way:

• Code Coloring— Not only does Dreamweaver provide syntax-level code coloring, but the color options—both foreground and background—as well as text styles are also completely configurable. Moreover, the configuration can vary from one page type to another. For example, in a standard HTML file, the comment tag code could be a medium gray, while in an ASP page the HTML comments could be displayed with a yellow background and blue type. Choose Edit Color Scheme in the Code Coloring category to make modifications.
• Code Format— Application developers are very particular when it comes to how their code is formatted, and rightly so. Properly styled code is easier to read and debug. The Code Format category of Preferences controls the general code settings, such as whether tabs or spaces should be used for indenting. You can also shape the output of individual tags and their attributes in the Tag Library Editor, available in the Code Format category or by choosing Edit > Tag Libraries.
• Code Hints— No matter how skilled you are as a coder, it’s pretty difficult to remember all the syntax, tags, and attributes for whatever Web language you use. To help developers to code more efficiently, Dreamweaver includes a code hints feature. Just start typing a tag, and a list of available tags appears.
• Code Rewriting— Dreamweaver stakes its reputation on respecting valid code. Through the options in the Code Rewriting category, you can affect how Dreamweaver handles documents when opened. For example, by selecting the Fix Invalidly Nested and Unclosed Tags option, Dreamweaver would change this code:

  Help me <i>help <b>you</i></b>

  to this:

  Help me <i>help <b>you</b></i>

A number of the categories in the Dreamweaver Preferences will help you develop Web applications in Design view as well as Code view. The Invisible Elements category is a key one that allows you to see representations of unrendered Web page objects, like HTML comments [c2-7]. The Invisible Element symbols let you easily copy or cut and paste such tags and code in Design view. Two Invisible Elements are applicable to dynamic pages: Visual Server Markup Tags and Nonvisual Server Markup Tags. When these options are enabled, server-side code blocks inserted in the <body> of the document are displayed as a symbol. Select the symbol, and you can either quickly find the highlighted code in Code view, or select Edit from the Property inspector to modify the code while in Design view.

You might also notice another pertinent setting in the Invisible Elements category. Dynamic text—data embedded on the page—is, by default, represented in braces showing both the recordset and data source field, like this:

{employees.firstname}

Depending on the design, such representations might make it difficult not to distort the layout; if so, you can change the option so that dynamic text is represented only by a pair of braces, without interior text.

Another Preferences category worth mentioning is Highlighting. To differentiate certain objects or regions at design time, Dreamweaver highlights them, either with a surrounding border or a background color. For example, by default, an editable region in a template is enclosed in a light blue border, while third-party tags use the same color as their background. All the color choices used in highlighting are customizable in the Highlights category; you can also decide whether you want to show the highlights.

Two entries in the Highlights category are useful when creating Web applications, both of which are concerned with Live Data view: Untranslated and Translated. When you’re in Live Data view, Dreamweaver fetches data according to your recordset and integrates it, temporarily, with the page. Dreamweaver can provide a direct replacement for a single record in an untranslated portion of Live Data view. If your data is within a repeat region, the remainder of the records must be shown in a translated area. I recommend keeping both of these options selected, because it differentiates what’s really on the page and what’s there only during translation. You can turn both of them off by deselecting View > Visual Aids > Invisible Elements.

Setting Up a New Site

Most frequently, the first task when building a Web site in Dreamweaver, whether static or dynamic, is to define a new site. For static sites, the least you need to do for a site definition is to name the site and designate a folder that acts as the local site root. Many developers also define their remote site initially so that they can transfer the files via FTP or to a networked staging server. The remote site can be defined at any time.

Dynamic sites also require that a testing server be declared. In Dreamweaver, a testing server is a particular server model (ASP VBScript, ASP JavaScript, PHP MySQL, or ColdFusion, for example) accessible through a specific folder, which could be located on a local or remote system.

You can define a site in one of two ways, both of which start by choosing Site > Manage Sites. A list of current sites is displayed in the Manage Sites dialog, along with a New button. Selecting New gives you an option of creating a site or defining an FTP or Remote Development Service (RDS) server connection. Choose New Site to display the Site Definition dialog.

If you’re relatively new to Dreamweaver, click the Basic tab of the New Sites dialog to use a wizardlike approach to defining your site. If you’re more familiar with Dreamweaver, the Advanced tab uses a series of categories similar to those in the Dreamweaver Preferences.

Let’s walk through a basic setup of a site using the Advanced option of the Site Definition dialog. For the purposes of this example, I’m going to assume we’re setting up a dynamic site for the Recipes project, using ASP with VBScript on a local system running IIS; in this situation, we’ll assume the remote site will be set up later.

1. Select Site > Manage Sites.
2. In the Manage Sites dialog, choose New > Site to open the Site Definition dialog.
3. Select the Advanced tag and choose the first category, Local Info [c2-8].
   c2-8
4. In the Local Info category, enter the following information:

   • Site Name— Enter the name of the site as it will be known locally within Dreamweaver. For example, I would enter Recipes.

   • Local Root Folder— Choose the folder that will contain the local site. To avoid typographical errors, it’s best to click the folder icon and locate the desired directory through the Choose Local Site Root dialog.

   • Default Images Folder— Designate a folder that will serve to hold your images. When you insert images from outside the local site root, Dreamweaver stores a copy of the images in this folder. This information is optional.

   • HTTP Address— Enter the URL of the published site so that Dreamweaver can identify external links correctly.

5. Select both the Refresh Local File List Automatically and the Enable Cache options to enhance productivity.
6. Select the Testing Server category [c2-9].
   c2-9
7. From the Server Model list, choose the server technology and language for the site.

   For this example, I would choose ASP VBScript.

8. From the Access list, choose how the testing server will be accessed: Local/Network or FTP.

   I have ASP running locally on my development system, so I would choose Local/Network.

9. Set the properties necessary to access the testing server.

   With a Local/Network access, I would select the Testing Server folder, which can be the same as the Local Site Root folder, and enter a URL prefix for the site. In this case, my URL prefix would be http://localhost/recipes/ because I have set up a virtual directory named Recipes pointing to my testing server folder in IIS.

Verify your choices in the various categories and click OK to close the dialog. With the Dreamweaver site set up, you’re ready to start creating pages for your Web application.

Creating New Dynamic Pages

Dreamweaver is capable of authoring a wide range of Web-related documents. Anything from HTML, with either standard or XHTML syntax, to dynamic ColdFusion components is feasible. To handle this enhanced output capability, Macromedia introduced a method of creating pages—the New Document dialog. The New Document dialog allows you to create new files of a variety of types as well as documents based on templates. Let’s look at how you create blank pages for your Web application first.

1. Choose File > New to open the New Document dialog [c2-10].
   c2-10
2. Make sure the General tab is selected, and choose the Dynamic Page category from the first column.

   Note

   The recipes in this book were developed using standard HTML, conforming to the 4.01 Transitional doctype as established by the W3C.

3. Select the server technology for your application from the Dynamic Page column.

   To create example pages in this book, select ASP JavaScript, ASP VBScript, ColdFusion, or PHP.

   If you’re creating several pages for your application, you can set Preferences to use a keyboard shortcut to create a blank page of any file type.

4. Keep the default document type, XHTML 1.0 Transitional, and click OK to close the dialog and create the page.

   Note

   In the New Document category, select the desired dynamic page type from the Default Document Type list, and then clear the Show New Document Dialog on Ctrl-N (Command-N) option.

If you’re working with Dreamweaver templates, you can also use the New Document dialog to create new files based on specified templates. Template-derived documents are useful in Web applications because often it’s only the dynamic elements that change from one page to the next. Templates give you a solid design on which to build—and, more importantly, any updates to a template are reflected on all the documents derived from that template.

Let’s say you’ve copied the Recipes template files from the CD-ROM to the Templates folder in your local site root. To create a document based on one of those templates, follow these steps:

1. Choose File > New to open the New Document dialog.
2. Select the Templates tab.
3. Choose your site in the Templates For category [c2-11].
   c2-11
4. Select the desired template from the second column. Previews appear to help you choose the right file.
5. Make sure the Update Page when Template Changes option is selected. If this option is not chosen, the newly created page is automatically detached from the template. When you’re done, click OK to close the dialog.

Binding Data to the Page

Your site is defined, and you’ve created a dynamic page. It’s time to add some dynamic content! Most dynamic content comes from a declared recordset. As discussed in Chapter 1, “Basic Principles of Data Source Design,” recordsets are created by SQL statements and consist of a portion of the data within the connected data source.

Dreamweaver provides two alternative dialogs for creating recordsets in addition to hand-coding: one simple and one advanced. You open each by choosing Add (+) from the Bindings panel or Server Behaviors panel and selecting Recordset (Query) from the menu. As the name implies, the simple view of the Recordset dialog is fairly basic. On the plus side, it allows you to create recordsets without writing SQL; on the other hand, you’re restricted to working with a single table or view, one filter, and one level of sorting. Let’s walk through the process of creating a simple recordset; the end goal of the example is to get a list of all the first and last names of the employees in the Recipes data source.

1. From the Bindings panel, choose Add (+) and select Recordset (Query).
2. If the Advanced view of the Recordset dialog is displayed, select Simple to switch views.

   The Recordset dialog view is remembered from one use to the next.

3. Enter a name for your example recordset in the Name field.

   Let’s call this one Employees.

4. Select a connection (or data source, as it’s called in ColdFusion) from the Connection (Data Source) list.

   Choose Recipes from the Connection (Data Source) list.

   After you choose a data source connection, the Table list is populated.

5. Select a table or view from the Table drop-down list. Dreamweaver displays all the tables first, followed by the views, if any.

   Choose Employees (employees for PHP) from the Tables list.

6. By default, all of the columns are included in the recordset. To specify certain columns, choose the Selected option and then choose any desired field. Shift-click to select contiguous columns, and Ctrl-click (Command-click) to select columns that are not next to one another.

   Choose Selected and highlight EmployeeFirst and EmployeeLast.

7. Again, by default, all of the records in the selected columns are included. You can limit the recordset by using the four Filter lists to create a SQL WHERE clause with a point-and-click interface.

   We’re going to limit our employee list to show only those whose last names begin with the letters L–Z. To accomplish this, from the first Filter list, select the column EmployeeLast. Next, choose the operator from the second list, >=. From the third list, choose Entered Value; this allows us to specify a value. Finally, enter the letter L [c2-12].

   c2-12
8. Order the data by selecting a column from the Sort list and then specifying either Ascending or Descending.

   Select EmployeeLast Ascending from the Sort lists.

9. Choose Test to see the data returned from the recordset. When you’re done, select OK to close the dialog and insert the recordset code into your page.

After defining a recordset, you’ll see all the available data source fields in the Bindings panel by expanding the recordset tree. To add dynamic text to the page, drag a data source field directly onto the page from the Bindings panel. Alternatively, position your cursor where you would like the dynamic text to appear and select Bind from the Bindings panel. With either technique, the dynamic text appears on the page like this:

{Employees.EmployeeFirst}

After inserting the dynamic text, you can see the data it represents by choosing View > Live Data. In Live Data view, the first data from the first record of your recordset is displayed [c2-13].

The Bindings panel also controls the server-side formatting of the dynamic text elements. Unlike HTML or CSS formatting, server-side formatting is used to change text to uppercase or lowercase and show numbers as currency, integers, or percents. To change the format of a dynamic text element, first select the element on the page. Then, in the Bindings panel, select the down-pointing arrow to open the Format list and select an appropriate format from the list.

Stirring in Server Behaviors

Server behaviors are Dreamweaver’s powerful mechanism for supplying server-side functionality with point-and-click ease. As with Dreamweaver’s client-side JavaScript behaviors, server behaviors allow users to output sophisticated code by choosing their parameters from a series of dialog boxes. Unlike the standard behaviors, server behaviors create different code depending on the current server model.

Many Web applications need to accomplish basic tasks such as inserting, updating, and deleting records. Dreamweaver includes around 30 server behaviors, covering the most common functionality. (The number of server behaviors varies slightly from one server model to another.) All the server behaviors applied to a page appear in a single list in the Server Behaviors panel; to modify an inserted server behavior, double-click its entry in the panel.

To see how server behaviors work, let’s look at one of the most commonly used types: Repeat Region. When dynamic text is inserted on the page, it represents a single record from the recordset. To display multiple records, the dynamic text—and whatever elements you also want to repeat, such as a table row or a line break—are enclosed in a Repeat Region. With the Repeat Region server behavior, you can opt to show a specific number of records at a time or all of them. Here’s how you apply a Repeat Region:

1. Insert a recordset and place one or more dynamic text elements on the page, as described in the previous section.
2. Select the dynamic text elements and the enclosing HTML.

   The enclosing HTML could be a set of <p> tags, a trailing line break (<br>), or a table row (<tr>). Failing to include some sort of separator between dynamic elements will result in the data being displayed one after another horizontally, rather than vertically.

3. From the Server Behaviors panel, choose Add (+) and select Repeat Region.
4. In the Repeat Region dialog, make sure that the recordset chosen in the list is the one you want to work with [c2-14].
   c2-14

   Next, choose how many records should be displayed.

5. If you want to show a portion of the recordset, select the Records at a Time option and enter the desired number.
6. If you want to display all the records from the recordset, select the All Records option.
7. Click OK to close the dialog and insert the code.

Dreamweaver places a border around the selected area with a tab to indicate the Repeat Region. One way to see the results is to preview the page in a browser; another is to use Dreamweaver’s Live Data view.

Editing in Live Data View

Incorporating dynamic data into a Web page often requires significant adjustments to the page design. With Dreamweaver’s Live Data view, you can continue to modify your design while viewing the actual data from a recordset. Moreover, Dreamweaver includes a number of ways to pass parameters to the recordset for testing purposes.

There are two ways to enter Live Data view. You can either choose View > Live Data or select Live Data View from the Document toolbar. In either case, the Live Data toolbar appears as Dreamweaver sends a request to the testing server and receives, in return, the data from the recordset. You might notice the spinning letter d in the toolbar to indicate that the data retrieval is in process. The first record retrieved is inserted into the corresponding dynamic text fields; if a Repeat Region server behavior is being used, data from the next records are added up to the limit of the Repeat Region. If the Invisible Elements option is enabled, the records will appear to be highlighted [c2-15].

When you’re in Live Data view, you can continue to work on the page, adjusting spacing, table cell widths, or whatever. You can also format the dynamic data. Select the data representing the initial dynamic text elements to add formatting; you cannot select the repeated elements in a Repeat Region. To see applied client-side formatting, such as CSS or <strong> tags, in all the repeated data, select Refresh from the Live Data toolbar; server-side formatting, like making the text uppercase, is applied automatically, if the Auto Refresh option on the toolbar is selected.

Often a recordset and other elements in a Web application depend on arguments passed to the page. There are two basic ways of passing arguments: attached to the URL in what’s known as a query string or as entered through a form. Dreamweaver’s Live Data view can emulate both methods of argument passing.

A query string is a series of name/value pairs following a question mark at the end of a standard URL. In this example:

http://localhost/Recipes/employeelist.asp?ID=34

the query string passed to the employeelist.asp page is ID=34, where ID represents the name of a field and 34 is the value. Additional name/value pairs can be added by using an ampersand, like this:

http://localhost/Recipes/employeelist.asp?employeeFirst=Joseph&employeeLast=Lowery

If a recordset on your page is filtered on a URL parameter, you can use the Live Data toolbar to try different arguments. When you’re in Live Data view, enter the name/value pairs, separated by ampersands in the URL Argument field of the Live Data toolbar. After pressing Enter (Return), Dreamweaver retrieves the requested data and integrates it on the page.

The URL Argument field works great for query strings, but you’ll have to use the Live Data Settings dialog to enter parameters expected from a form. Open the dialog by choosing View > Live Data Settings or by choosing Settings from the Live Data toolbar. The Live Data Settings dialog also uses name/value pairs; choose Add (+) to add an entry under the Name and Value columns. To emulate form data, enter the name of the form field in the Name column and the value entered under Value. For forms, you’ll also need to make sure the Method is set to POST rather than GET. If you’d prefer not to write out the query string, you can use the Live Data Settings dialog in place of the URL Argument field by changing the Method to GET [c2-16].