Chapter 2. Building Applications in Dreamweaver Workspace
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 oncea 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 panelregardless of whether it is currently onscreenby 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.
I often find it helpful to concentrate on just one panel group. To maximize a panel groupand simultaneously close all othersdouble-click the panel group name.
You can access any panel in a panel group by clicking its tab. To move a panel from one panel group to anotheror to isolate ityou 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 Withwhere PanelName is the current paneland 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 groupsan 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.
In Dreamweaver, some panels are an integral part of a panel group and cannot be moved to another group or isolated. The Tag panel group contains two related panels: Attributes and Behaviors. You cannot move or rename these individual panels or the panel group. You can, of course, close and reopen the panel group at any time.
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:
Although ColdFusion components are an exciting technology, they are not backward-compatible with ColdFusion 5. The recipes in this book do not use ColdFusion components so that the applications are ColdFusion 5 compatible.
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] :
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 panelwhich 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] .
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:
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.
I recommend initially selecting all the options in the Invisible Elements category. If necessary, you can remove all of them from view on a page by unchecking View > Visual Aids > Invisible Elements. The same option is also available from the toolbar under the View Options button.
You might also notice another pertinent setting in the Invisible Elements category. Dynamic textdata embedded on the pageis, by default, represented in braces showing both the recordset and data source field, like this:
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.
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.
Dreamweaver MX 2004 and above make it possible to work without creating a site by defining a direct server connection. This feature is useful for existing Web sites, but defining a site is critical to developing applications, especially if templates are used as they are throughout this book. Defining a site is highly recommended.
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.
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.
It's a good idea at this point to choose Export from the Manage Sites dialog to store your site definition in a secure location. If you ever need to restore the site, select Import and locate the definition file.
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 pagesthe 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.
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 buildand, 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:
A complete discussion of templates is beyond the scope of this book. For more information on creating templates, consult Help > Using Dreamweaver or a good reference such as the Dreamweaver 8 Bible by Joseph Lowery. Advanced template use is also covered in Beyond Dreamweaver by Joseph Lowery and Dreamweaver MX Templatesby Brad Halstead and Murray Summers.
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.
Make sure you understand how to create a data source connection before continuing. If you're unclear, see the "Connecting to Data Sources" section of Chapter 1.
Before you undertake these next steps, you'll need to have defined at least one connection using the procedure outlined in the previous chapter.
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.
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:
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
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 textand whatever elements you also want to repeat, such as a table row or a line breakare 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:
Although most of the server behaviors are identical in terms of their user interface and usage, several differ from one server model to the next. For example, the Insert Record server behavior is different for ASP and ColdFusion. Where the procedure for applying a server behavior is different, you'll find the recipe steps presented separately, identified by server model. For similar server behaviors, the steps are given together with individual code clearly marked for each server model.
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:
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:
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] .