The Bindings panel is the key tool for accessing dynamic text. With a recordset expanded, any or all of the available fields within it are ready to be placed on the page. Moreover, after a field is inserted into the page and selected, the Bindings panel reflects its current data format.

Inserting dynamic text

After you have a recordset or other data source declared, adding dynamic text is as simple as dragging a field name onto the page. After the field is inserted, Dreamweaver displays it with the syntax {recordset_name.field_name}. For example, the column named CITY located in a recordset named rsLocations is displayed as {rsLocations.CITY}. If you choose View

Dynamic pages are a combination of standard HTML and dynamic elements. It's possible to build the page in any order. You can insert your dynamic elements first, followed by HTML objects, or you can build the HTML page before adding your data. Many designers, whether they're working by themselves or on a team, find the latter method more productive. One common technique is to use static placeholders to mark where the dynamic data should go, as shown in Figure 19-2.

Perhaps the quickest way to bring dynamic data onto the page is to use the drag-and-drop capability, as detailed in the following steps:

1. In the Document window, select the static placeholder text to be replaced by the dynamic data.

2. From the Bindings panel, expand your recordset or other data source until the desired field or dynamic element is displayed.

3. Drag the dynamic data from the Bindings panel and drop it on the selected text.

   If you are not using placeholder text, you can drop the dynamic data wherever you'd like it to appear.

In some situations — when a table has many dynamic data fields, for example — the Insert method is easier than the drag-and-drop technique. For those cases, first select the placeholder text or position your cursor if no placeholders are used. Then highlight the desired dynamic data and click the Insert button on the bottom of the Bindings panel.

Tip

Occasionally, the dot notation syntax leads to extremely long names, which can make the layout process more difficult. You can switch from using the curly braces and full data name to just using the curly braces — and then switch back again — by choosing the desired option from the Show Dynamic Text As drop-down list. (This list is found under the Invisible Elements category of Preferences.)

Figure 19-1. Placeholders for dynamic data are considered invisible elements in Dreamweaver and are highlighted accordingly.

Figure 19-2. You can use plain HTML placeholders to indicate where the dynamic data should be dropped from the Bindings panel.

Viewing dynamic data

You have three basic ways to see your page with the data extracted from the data source and fully integrated into the HTML:

• Upload the page to your remote testing server and view it through a Web browser.

• Use Dreamweaver's Preview in Browser feature to test your page on the testing server. Dreamweaver takes care of uploading the files for you.

• Switch to Live View within Dreamweaver.

Which should you use? Uploading or previewing your page is great for giving an accurate browser rendering of your dynamic (or static) page, but you can't edit the elements or styles. The final method — Live View — is handiest when you want to display your dynamic data and still retain CSS editability. The other methods are important to keep in mind and should be included in a regular routine of Web application development.

To see your data within the page quickly in Live Data view, choose View

Figure 19-3. Live View uses your designated testing server to display actual data from your data source in design time.

Without any additional server behaviors — most notably Repeat Region — all data displayed is from the first record of the chosen recordset.

Note

Live View has more features regarding data than are noted here — all of which are covered in Chapter 21.

Adding Dynamic Data

In this Technique, you begin to familiarize yourself with binding dynamic data to the page.

1. From the Techniques - Dynamic site (established in Chapter 18), expand the 18_Dynamic_Data folder and open the dyn_data_start file for your server model.

2. From the Bindings panel, click Add (+) and select Recordset (Query) from the list.

3. When the Recordset dialog box opens, make sure that you're in Simple, not Advanced, mode; if necessary, click Simple.

4. In the Name field, enter rsAgents.

5. From the Connection list, choose RelativeRealty.

6. From the Table list, choose Agents (agents in PHP).

7. Leave the Columns option set to All.

8. From the Sort list, choose agentLastName and Ascending.

9. Click OK to close the dialog box.

10. Now that the recordset has been created, you can begin to bind the data to the page. You'll find it easier to work with the table if you enable Visual Aids

    

11. Place your cursor in the second cell from the left, in the second row under the middle of the phrase, Leading Agents.

12. In the Bindings panel, expand the rsAgents recordset.

    

13. Select the agentFirstName entry from the Bindings panel and click Insert.

    Note

    Although you're using the Insert method here, you could have dragged the dynamic entries from the Bindings panel onto the page.

14. Move your cursor to the right of the dynamic data just inserted and add a space.

15. From the Bindings panel, choose agentLastName and click Insert.

16. Place your cursor in the cell under the Office Phone label, choose agentPhone from the Bindings panel, and click Insert.

17. Place your cursor in the cell under the Cell Phone label, choose agentCell from the Bindings panel, and click Insert.

18. Choose View

    

19. Choose View

    

In the next Technique, you add a dynamic image to the page along with some server-side formatting.

After a field has been incorporated into a page, it acts just like any other text within a tag. Dynamic text can be formatted with either HTML tags — such as <h2>, <strong>, or <span> — or styled with Cascading Style Sheets (CSS). The easiest method is simply to replace the static placeholder text, styled as your layout demands, with the dynamic text. The tags and CSS surrounding any dynamic text can be altered at any time.

Data formatting

Dreamweaver not only supports client-side formatting of your dynamic data; it also offers a wide range of server-side formats, and it gives you the capability to create your own. Information is stored in databases according to a particular type. Some fields are designated as text, others are numbers, and still others fall under the date/time category. The same data type within a specific category may be formatted in numerous ways.

Dates are a good example of why data formatting is important. In the United States, dates are typically presented in a month-day-year format — such as March 31, 2008. In much of the rest of the world, however, dates are presented in a day-month-year format, as in 31 March 2008. By default, servers are generally set to display dates appropriate to their regions. The same holds true for currency: U.S. currency figures are presented with a dollar sign, for example, and UK currency is shown as euros or English pounds.

When initially inserted onto the page from the Bindings panel, dynamic data does not have a specific format applied. Data from currency and time/date use the default formats for their data types. Different formats are chosen from the Bindings panel, as outlined in the following steps:

1. Select the dynamic data that you want to format from the Document window. The corresponding field in the Bindings panel is highlighted.

2. From the Bindings panel, click the down arrow under the Format column to reveal the format list, as shown in Figure 19-4.

   Tip

   The Bindings panel is usually pretty narrow. The Format column may be hidden off the right side of the screen. Use the scrollbar to move to the right and resize the Source column to make it narrower, or simply make the Bindings panel wider to get access to the right-hand columns.

   

   Figure 19-4. The format list, which is different for each server model, lets you specify your data's format according to its type.

3. From the Format List, select the appropriate category for your data.

4. If more than one format is available, choose a specific format from the category's submenu.

To see the newly applied format, choose View

Each of Dreamweaver's five server models offers slightly different data formats through the Bindings panel. A complete list of all the standard data formats, with relevant examples, is shown in Tables 19-1 (ASP), 19-2 (ColdFusion), and Table 19-3 (PHP).

Table 19-1. ASP Data Formats

Format	Option	Example
Date/Time	General Format Long Format Short Format Weekday, Month Date, Year Date Month Year Month Date, Year YY-M-DD YY-MM-DD DD-MM-YYYY M/D/YY DD/MM/YY YY/MM/DD Long Time Format Short Time Format h:MM:SS AM/PM HH:MM:SS hh:MM:SS a.m./p.m. HH:MM	3/31/2008 Monday, March 31, 2008 3/31/2008 Monday, March 31, 2008 31 March 2008 March 31, 2008 08-3-31 08-03-31 31-03-2008 3/31/08 31/03/08 08/03/31 9:15:00 PM 21:15 9:15:00 PM 21:15:00 09:15:00 p.m. 21:15
Currency	Default 2 Decimal Places Rounded to Integer Leading 0 If Fractional No Leading 0 If Fractional () If Negative Minus If Negative Group Digits Do Not Group Digits	$2,300.99 $23.99 $23.51 = $24 $0.99 $.99 ($23.99) −$23.99 $2,300.99 $2300.99
Number	Default 2 Decimal Places Rounded to Integer Leading 0 If Fractional No Leading 0 If Fractional () If Negative Minus If Negative Group Digits Do Not Group Digits	2,300 23.00 23.51 = 24 0.99 .99 (23) −23 2,300 2300
Percent	Default 2 Decimal Places Rounded to Integer Leading 0 If Fractional No Leading 0 If Fractional () If Negative Minus If Negative Group Digits Do Not Group Digits	2,300% 23.00% 23.51% = 24% 0.99% .99% (23%) −23% 2,300% 2300%
AlphaCase	Upper Lower	Mixed Case = MIXED CASE Mixed Case = mixed case
Trim	Left Right Both	"   Widgets   " = "Widgets " "   Widgets   " = " Widgets" "   Widgets " = "Widgets"
Absolute Value	N/A	+23 or −23 = 23
Round Integer	N/A	23.51 = 24
Encode — Server.HTMLEncode	N/A	I'm <b>bold</b> =I'm &lt;b&gt;bold&lt;/b&gt;
Encode — Server.URLEncode	N/A	www.idest.com/Party Time = ww.idest.com/Party%20Time
Path — Server.MapPath	N/A	Server.MapPath(/myDocs) = D:/HTDOCS/lowery/myDocs

Table 19-2. ColdFusion Data Formats

Format	Option	Example
Date/Time	General Date Format Weekday, Month Date, Year Date Month Year Month Date, Year DD-MM-YY YY-M-DD YY-MM-DD DD-MM-YYYY M/D/YY DD/MM/YY YY/MM/DD General Time Format h:MM:SS AM/PM HH:MM:SS hh:MM:SS A/P HH:MM	31-Mar-08 Monday, March 31, 2008 31 March 2008 March 31, 2008 31-03-08 08-3-31 08-03-31 31-03-2008 3/31/08 31/03/08 08/03/31 9:15 PM 9:15:00 PM 21:15:00 09:15:00 P 21:15
Currency	General Format Dollar Format Local Format International Format	2,300.99 $2,300.99 $2,300.99 USD2,300.00
Number	Default 2 Decimal Places Rounded to Integer () If Negative Minus If Negative Do Not Group Digits	2,300.99 23.99 23.51 = $24 (23.99) −23.99 2300.99
AlphaCase	Upper Lower	Mixed Case = MIXED CASE Mixed Case = mixed case
Trim	Left Right Both StripCR	"   Widgets   " = "Widgets   " "   Widgets   " = " Widgets" "   Widgets " = "Widgets" "The End" = "The End"
Math	Abs Atn Ceiling Cos DecrementValue Exp Fix IncrementValue Int Log Log10 Randomize Round Sgn Sin Sqr Tan	Returns the absolute valueReturns the arctangentReturns the next highest integerReturns the cosineLowers the number by 1Returns the exponentRounds the number toward zeroIncreases the number by 1Returns an integerReturns the natural logarithmReturns the logarithm to base 10Seeds the random number generatorRounds to the closest integerReturns 1 for positive numbers, −1 for negative numbersReturns the sineReturns the square rootReturns the tangent
Encode — URLEncoded Format	N/A	www.idest.com/Party Time = www.idest.com/Party%20Time
Encode — PreserveSingleQuotes	N/A	'The Answer' = 'The Answer'
String — Reverse	N/A	'The Answer' = 'rewsnA ehT'

Table 19-3. PHP Data Formats

Format	Option	Example
AlphaCase	Lower Upper First Letter Upper Capitalize	My Widgets = my widgets My Widgets = MY WIDGETS My Widgets = My widgets My Widgets = My Widgets
Trim	Left Right Both	"   Widgets   " = "Widgets   " "   Widgets   " = " Widgets" "   Widgets " = "Widgets"
Encode	HTML Encode URL Encode Raw URL Encode URL Decode Raw URL Decode	I'm <b>bold</b> = I'm &lt;b&gt;bold&lt;/b&gt; www.idest.com/Party Time = www.idest.com/Party+Time www.idest.com/Party Time = www.idest.com/Party%20Time www.idest.com/Party+Time = www.idest.com/Party Time www.idest.com/Party%20Time = www.idest.com/Party Time

<%=Hour(rsEvents.Fields.Item("showTime").Value) %>

<%
Dim myTime, myShift
myShift = "AM"
myTime = Hour(rsEvents.Fields.Item("showTime").Value)
If (myTime > 12) Then
    myTime = myTime-12
    myShift = "PM"
End If
Response.write myTime & myShift
%>

<%= WeekdayName(Weekday((rsEvents.Fields.Item("showDate").Value)))
& ", "
MonthName(Month((rsEvents.Fields.Item("showDate").Value)))
& " "
Day((rsEvents.Fields.Item("showDate").Value))
%>

#DateFormat("#rsEvents.showDate#", "dddd, mmmm d")#

The Web is both a textual and a visual medium. You've seen how Dreamweaver replaces static text with dynamic text from a database. But how does it handle images? Dreamweaver dynamically inserts images by using the path to the image rather than the image itself. Proper database setup is critical for Dreamweaver to correctly deliver dynamic images. For example, a product database might have the following records:

In this example, Dreamweaver extracts the data from the Image field and plugs that data into an attribute of the <img> tag's src attribute. Because site-root–relative links are used in the data source, the images can be inserted dynamically from any page in the site. If your dynamic images are located on a remote server, you must enter a full URL — with the http:// prefix — in a text field in the data source.

It is also possible to use document-relative pathnames in image fields of the database. However, you have to be careful which pages the dynamic images are inserted into; the pages must be stored in the proper location relative to the path of the images.

Perhaps the best course of action is to store just the filenames of the images themselves in the data source. When the dynamic image is inserted into Dreamweaver, additional path information can be added as needed. For example, suppose the image field contained only filenames with no path information, such as w_wonder.gif in a field named images of a recordset rsProducts. Here's an example of how that code would be generated by Dreamweaver for ASP:

<%=(rsProducts.Fields.Item("images").Value)%>

In Dreamweaver, you can preface that code — either when it is inserted or through the Property inspector — with any necessary path information. If my document is at the site root and the images are stored in the /images/products folder, I adjust the code like this:

images/products/<%=(rsProducts.Fields.Item("images").Value)%>

After your data source is correctly set up for images, inserting them in Dreamweaver is very straightforward, as shown in the following steps:

You can get a quick view of your work by choosing View

Figure 19-6. When inserting a dynamic image, you specify only the data source and field. Dreamweaver automatically inserts the image with the correct dimensions.

If you use static graphic placeholders in your design, you can use an alternative technique. From the Bindings panel, drag the field containing the image names onto the static graphic. If your data is just filenames without path information, you have to add the required path to the beginning of the src attribute in the Property inspector or the Tag inspector.

Just as you can assign a dynamic value to the <img> tag's src attribute, you can assign any data-source–derived value to any other attribute by binding (attaching) the field to the attribute. Attributes are generally assigned dynamic values through the Bindings panel or the Property inspector, after which the Bindings panel displays the attribute attached to each field in the Binding column. A data field used for dynamic images, for instance, shows img.src in its Binding column.

I recently used Dreamweaver to create a content-management system for a client. The page uses a standard template with areas for the heading, bylines, content, and images, served dynamically according to the topic. The images each have a specific alignment — some are set to the browser default, whereas others are aligned left or right. To handle this correctly, you create a separate field for image alignment in the data source.

With the database properly prepared, the attributes are set dynamically by following these steps:

To get an idea of what's possible, select a dynamic image and then look at the list in the Binding column. The <img> tag offers 23 different attributes that may be dynamically generated — everything from the heavily recommended alt parameter to the special case vrml attribute.

Note

To find the details on any or all of these attributes, choose Help

Just as text and images can be inserted into documents on-the-fly, all manner of multimedia — including Flash and files requiring ActiveX controls or applets — can also be dynamically incorporated. The core technique of attaching a data source is the same for multimedia files as it is for images; when you insert a multimedia object, choose the desired data source from Dreamweaver's dialog box. The linking code is automatically written into the proper parameter for the object.

Most multimedia objects are inserted into HTML by using an <object> tag, an <embed> tag, or a combination of the two; Java applets use the <applet> tag. Dreamweaver handles the basic file assignments for specific programs with its own icon in the Insert panel: examples are Flash and Shockwave. If you examine the code, you can see that even these objects use the <param> tag (short for parameter) to declare the source of the media file. ActiveX and applet files rely on <param> tags to specify needed attributes. Dreamweaver enables you to choose either static or dynamic values for any <param> tag.

You enter the <param> values through the Parameters dialog box, which is displayed when you click the Parameters button on the Property inspector. As shown in Figure 19-8, the Dreamweaver Parameters dialog box consists of two columns, one for the name of the parameter and one for the corresponding value. Entries in either column can be assigned dynamic content by clicking the lightning bolt icon. When this icon is selected, the Dynamic Data dialog box opens and an appropriate data source — from those already declared in the Bindings panel — can be assigned.

Figure 19-8. Dynamically alter parameters for any multimedia object by clicking the lightning bolt icon and picking a proper data source.

How you store the path to the movie is critical if you're dynamically switching Flash movies. As with images, perhaps the best tactic is to use only the filename in the database field and supply additional path information as needed. Here are the steps to display different Flash movies dynamically:

Incorporating dynamic data into your standard Web pages is a core skill for building data-driven Web applications, along with establishing a data source connection and defining a recordset. After you have these three components in place, you can begin combining HTML pages with text, images, and even multimedia data. Dreamweaver combines sophisticated connectivity with drag-and-drop simplicity for quick insertion of dynamic content. Keep the following items in mind as you begin to integrate data-driven and static content:

In the next chapter, you see how to begin managing your data in Dreamweaver.