Putting Dynamic Elements in Your Pages

[ LiB ]

Dreamweaver dynamic elements allow you to display database data in your web pages and to preview them with placeholders in Design view. Building dynamic pages in Dreamweaver is largely about working with dynamic text, images, tables, and so on.

Dynamic Text Elements

Dynamic text elements are the contents of database fields, placed in your page as text. Prices, names of things, and descriptions are all good candidates to be inserted as text elements. Depending on how much text the database field contains, the dynamic element can be as short as a few letters or words, or as long as several paragraphs. Dynamic text elements all appear as placeholders in Design view:

 (Recordset1.category)

or as server-side scripting in Code view:

 <?php echo $row_Recordset1[category]; ?>

Remember, the placeholder does not indicate how much room the actual text will take up.

Inserting Dynamic Text

You can insert text by opening the Server Behaviors panel, pressing the + button, and choosing the Dynamic Text server behavior. Or you can choose the Dynamic Text object from the Application category of the Insert bar. Both these methods bring up a dialog box that lets you specify which database field to display as text, and whether to apply any automatic formatting to it, such as dollar signs or other currency indicators, as shown in Figure 22.7.

Figure 22.7. Using the Dynamic Text object to insert dynamic text into a document.

You can also insert dynamic text from the Bindings panel, either by dragging a field into the Document window or by selecting a field and clicking the Insert button (see Figure 22.8). After the text is in place, the Server Behaviors panel shows that a new Dynamic Element behavior has been added to the document. Double-click the server behavior to open the Dynamic Text dialog box and add any automatic formatting.

Figure 22.8. Inserting dynamic text from the Bindings panel.

The options available for auto-formatting dynamic text vary depending on the server technology you're using.

Dynamic Text in the Document

You can use dynamic text placeholders in exactly the same way, and for the same purposes, as regular text. The dynamic text can appear in its own p , h1 , or other tag, or it can appear in the middle of a block of static text. Any formatting you would normally apply to text, such as CSS custom classes, you can apply to the placeholder for dynamic text. Just select the text placeholder and use the Property inspector or CSS panel as you normally would. Figure 22.9 shows dynamic text elements in Code and Design views.

Figure 22.9. Dynamic text elements in a PHP document, treated as normal text.

Setting Dynamic Properties

Just as dynamic information can be substituted for text in a web page, it can also be substituted for any piece of HTML, including tag attributes.

If the database stores a user 's favorite color in a field called favcolor , for instance, the following code in a PHP document dynamically sets the background of a table cell to this color:

 <td bgcolor="<?php echo $row_Recordset1[favcolor]; ?>">

Dynamic Properties and the Selection Inspector

The Tag inspector provides a handy interface for entering dynamic properties. Just select the page element that should have a dynamic property, open the Tag inspector, and bring the Attributes tab to the front. Then select the attribute in question from the list of attributes and look for the little lightning-bolt icon at the right edge of the panel. Click that icon. A dialog box appears, asking which database field should have its value substituted for the attribute's value. Choose a field, click OK twice (to close all dialog boxes), and there you are (see Figure 22.10)!

Figure 22.10. Using the Tag inspector to assign a dynamic bgcolor property to a table cell.

Dynamic Images

Generally, images and other media files are not stored in databases. Rather, a database field stores a filename or URL that points to the image. The dynamically generated web page can then contain an img tag that references this field in its src attribute:

 <img src="<?php echo $row_Recordset1[filename]; ?>">

Assuming that the database contains a record with the filename field set to " necklace.gif ", these references would generate code like this:

 <img src="necklace.gif">

Inserting Dynamic Images

Inserting a dynamic image is similar to inserting a regular image. Use the Image object or Insert > Image command as normal. But when the Insert Image dialog box appears, find the Select File Name From option and click the Data Sources button. A list of available fields in the current document's recordset(s) appears. Choose one of these fields, and click OK. The image is inserted in the document with a placeholder (lightning bolt) icon, as shown in Figure 22.11.

Figure 22.11. Inserting a dynamic image.

After doing this, look in the Server Behaviors panel. You'll see that a new Dynamic Attribute behavior has been added to the page. The dynamic attribute is your image's src . Select your dynamic image, and check the Property inspector or Selection inspector. You'll see that the src attribute is defined with server-side code.

When you insert a dynamic image, Dreamweaver doesn't give it a width or height. Because the image src information has not yet been determined, Dreamweaver doesn't know its dimensions. If you know for certain that all images referred to in your database will have the same dimensions, and you know what those dimensions are, you can add the width and height yourself by entering them in the image Property inspector. If you're not sure of the dimensions, or if your images' dimensions might vary, leave these attributes unassigned .

Working Smart: Partial URLs

The database field used to generate the src does not have to contain the entire absolute or relative path to the image. For instance, if your images will be in an images subfolder, and the database field called on includes only the filename, you can create the rest of the path as you're placing the dynamic image. In the Insert Image dialog box, after you've chosen the database field to use as the src , type the rest of the path information into the URL field, like this (added code is in bold):

  images/  <?php echo $row_Recordset1[filename]; ?>

If you name your images carefully , you can do away with the filename database field. Suppose your database has a field called itemname . You can tweak the code that appears in the URL field when you insert the dynamic image (added code in bold):

  images/  <%=(Recordset1.Fields.Item("itemname").Value)%>.  gif

Assuming that the itemname field for one of your collected records contains necklace , the generated HTML looks like this:

 <img src="images/necklace.gif">

Working Smart: Dynamic Alt Labels

Dynamic images need dynamically determined alt labels. If your recordset contains any field that describes the item portrayed in the image, you can use that field to create your alt text. Use the Selection inspector for this, as outlined in the previous section.

Dynamic Data and Forms

Forms are used heavily in dynamic sites to collect information. Search pages, login pages, and information update pages all use forms to collect user input and either query or edit the data source.

If you need the form only to collect information, you don't need your form elements to be dynamic. But if you also want the form to present information from the data sourcea pop-up menu of choices based on database contents, for instance, or a personal data page that users can check and updateyou need to use dynamic data to determine the contents and status of the form elements.

Dynamic List/Menu

A dynamic drop-down list or form menu is created from a select form element with dynamically generated entries. To create one, open a dynamic document and create a recordset for the dynamic entries. Then do the following:

Create the form as normal, and use the List/Menu object (in the Form category of the Insert bar) to insert a standard list/menu.
In the Property inspector, click the Dynamic button. This opens a dialog box. Choose which field of the current recordset should be displayed in the list/menu, and click OK to close the dialog box. You can use this same dialog box to add static elements (those that appear the same every time the list is generated, regardless of what's in the database). When you're done, click OK to close the dialog box.

Working Smart: Grouping Records for List Display

The preceding instructions create a dandy list/menu element, as long as your recordset contains only one value for each field to be displayed. If you have 10 necklaces to choose from, and the name of the necklace appears in the drop-down menu, all is well. But what if you have 10 necklaces, 10 bracelets, and 10 brooches, and you want the list to display the category names (necklaces, bracelets, brooches)?

The trick to creating a concise pop-up menu or list with dynamic entries is to eliminate all duplicates from the data source. To accomplish this, you need to define the recordset so that it collects only one of each entry. When creating the recordset for the document, after you have chosen which fields to collect, go to the Advanced tab of the dialog box. Edit the SQL query to add a GROUP BY clause, grouping by the field you plan to use in the dynamic list/menu. Note that if there is an ORDER BY clause, it must remain at the end of the query. To create a pop-up list of jewelry categories, for instance, your code might look like this:

 SELECT category FROM jewelry  GROUP BY category  ORDER BY category ASC

After you've entered this into the SQL field, you can't return to Simple view for this recordset.

Dynamic Check Box

A dynamic check box appears checked or unchecked, depending on a field value in the recordset. To create a dynamic check box, follow these steps:

Insert a regular check box into your form (select Insert > Form Objects > Checkbox). Using the Property inspector, give the check box a name you'll remember.
Still in the Property inspector, click the Dynamic button. In the dialog box that appears, choose your check box's name. Specify which recordset field should be examined, and enter a value that the field must be equal to for the check box to appear checked. The dialog box allows only for comparisons based on equality (no less than, more than, and so on).

Dynamic Radio Button

A dynamic group of radio buttons has one of its members selected, depending on a field value in the recordset. To create a dynamic radio group, do the following:

Insert a group of radio buttons as you normally would (select Insert > Form Objects > Radio Button or Insert > Form Objects > Radio Group). Use the Property inspector to give the group a name and to give each button a unique value.
In the Server Behaviors panel, click the + button and choose Dynamic Form Elements > Dynamic Radio Group.
In the dialog box that appears, choose your radio group's name. Then specify a recordset field that each button in the group should be compared to, to determine if it will be selected in the form.

Dynamic Text Field

Dynamic text fields appear in the form filled with text from a specified recordset field. To create a dynamic text field, follow these steps:

Insert a text field as you normally would (select Insert > Form Objects > Text Field). Use the Property inspector to give the text field a name you'll remember.
In the Server Behaviors panel, click the + button and choose Dynamic Form Elements > Dynamic Text Field.
In the dialog box that appears, choose your text field's name. Then specify the recordset field whose value should appear in the text field.

Repeating Content

By default, most dynamic elements display information from the first record found in a recordset. Repeating regions and dynamic tables let you display multiple records on one page.

Repeating Regions

A repeating region can be any page element you likesubheading and paragraph, list item, tablebut the most common element to repeat is a table row. You create repeating regions with the Repeated Region application object or Repeat Region server behavior, as shown in Figure 22.12.

Figure 22.12. The Repeated Region object and Repeat Region server behavior.

To create a repeating region, open a dynamic document, create a recordset, and do the following:

Determine what page area you want to repeat, and select it. The area should contain some dynamic content (such as text or images).
From the Application objects in the Insert bar, choose Repeated Region, or, from the Server Behaviors panel, choose Repeat Region. When the dialog box appears, choose the recordset to display and the number of records to show, and click OK.

Your repeating region appears in Design view surrounded by a labeled box, as shown in Figure 22.13. To edit it, double-click the label.

Figure 22.13. A repeating region as it appears in Design view.

Dynamic Tables

A dynamic table is a table that displays information from the current recordset using repeating regions for rows. It's really just a shortcut method for creating the most common kind of repeating region setup.

To create a dynamic table, open a dynamic document, create a recordset, and do the following:

Place the insertion point where you want the table to appear.
From the Application Insert bar, in the Dynamic Data objects group, choose Dynamic Table. When the dialog box appears, choose the recordset, the number of records to show, and the table formatting options you want. Click OK to close the dialog box.

The ASP.NET server model offers no Dynamic Table object. The Data Grid serves the same purpose. See Chapter 26, "Working Smart with ASP.NET," for instructions specific to ASP.NET.

Dreamweaver inserts a table with a repeating row, exactly as if you had created the table and assigned the row to repeat. Note that the table includes all fields in the current recordset, in order. If you don't want all fields to show, you can delete columns of the table. The dynamic text in the table cells can be treated just like any other dynamic text.

Testing and Troubleshooting

Repeating regions are coded as loops containing content that should be repeated, along with instructions to the server to move through the recordset items one at a time. This code looks different depending on the language you're using. Here's how it looks in PHP:

 <?php do { ?>   [  repeated content goes here  ] <?php } while ($row_Recordset1 =  mysql_fetch_assoc($Recordset1)); ?>

Here's how it looks in ColdFusion:

 <cfoutput query="Recordset1" startRow="#StartRow_Recordset1#"  maxRows=  "#MaxRows_Recordset#">   [  repeated content goes here  ] </cfoutput>

Is it important to know this? Maybe not, if everything goes according to plan and you never want to push the envelope. But as with all HTML work, the more you know about the code behind what you're doing, the easier it is to troubleshoot and tweak things.

You can make almost any page area selectable. It's important to make sure you have exactly the right things selected before you insert the repeating region. If you're making a list with repeated list items, make sure you have the li tag but not the surrounding ol or ul tag selected. If you're making a table row repeat, make sure the tr tag is chosen. The best way to keep on top of this is to use the Tag Selector, or to work in Code and Design view while keeping one eye on the code. Make sure you've selected exactly what you want to repeat.

Extra care is also important if you want to insert page content immediately beneath the repeating region, to make sure Dreamweaver doesn't put the new content inside the region. One especially tricky situation is when you have a repeating table row and you want to insert a new, nonrepeating row beneath it. Normally, to add a row to a table, you place the insertion point in the last cell of the table and press Tab, or select Modify > Table > Insert Rows or Columns, or add to the number of rows in the Table Property inspector. But all these methods add the new row inside the repeating region. That's not good if it isn't what you want! What should you do?

If Dreamweaver adds the new content (the new table row, paragraph, and so on) inside the repeating region, take a quick trip into Code view. Find the code for the table row or other element that shouldn't be in the repeating region, and move it beneath the line of code that closes the region.

Paging Through Repeated Regions

Recordset paging, or navigation, comes into play when you use a repeated region but you want only a certain number of records to display at a time. These include links to Next , Previous, First, and Last, and messages indicating which records are currently being viewed (such as 2 to 14 of 500). Dreamweaver offers several methods for adding paging controls, involving various application objects and server behaviors, as shown in Figure 22.14.

Figure 22.14. The Recordset Paging and Recordset Count objects and server behaviors.

Recordset Paging Objects

To insert a Next, Previous, First, or Last link into a page containing a repeated region, you can do one of the following:

Type the text or select the image that should function as the link. From the Insert bar, choose one of the Recordset Paging objects: Move to First, Move to Last, and so on.
Position the cursor where you want the link inserted. From the Insert bar, choose one of the Recordset Paging objects. Dreamweaver adds default text for the link.

To automatically insert a complete set of paging controls, place the insertion point where you want the controls to appear. From the Insert bar, choose Recordset Navigation Bar. You can choose to create the bar with text or images (Dreamweaver supplies the images). The bar is built as a centered table with a cell for each link, as shown in Figure 22.15.

Figure 22.15. A recordset navigation bar in action.

Recordset navigation links are page elements in an a tag that has a dynamic href attribute. You can safely change anything about the page element except its dynamic href attribute without disturbing the navigation. So feel free to format or change the text, add rollovers to the images, and so forth.

Recordset Count Objects

When your visitors are paging through records, they like to know where they are in the recordsethow many records there are in total, where they are in the set, and so forth. Dreamweaver includes objects for these indicators. As soon as you have a repeated region and recordset paging controls, to add the count indicators, position the insertion point where you want the indicators to appear. From the Application category of the Insert bar, choose any of the Display Record Count objects. If you choose to insert the entire Recordset Navigation bar, Dreamweaver creates a text display for you. You can also choose to insert dynamic text placeholders only, without any connecting text, by choosing the Starting Record, Ending Record, or Total Records object.

These objects insert a mixture of dynamic and static text elements into your page. As with all dynamic text, you can safely format it as you like or change any of the static text.

Conditional Content

Conditional content appears on a page only if certain requirements are met. This involves some sort of if-then statement in your server-side scripting language. With conditional content, you can fine-tune exactly what appears on a page based on various conditions. It's all done with the Show If application objects or server behaviors, as shown in Figure 22.16.

Figure 22.16. The Show If objects and server behaviors.

Displaying or Hiding Content If a Recordset Is Empty

If your recordset doesn't find any records in the database, you probably want to display a "Sorry, no items found" message. If records are found, you want to display the relevant dynamic elements. To create this effect, you need to put both sets of content in your page and define each as conditional based on record contents. This means using the Show If Recordset Empty and Show If Recordset Not Empty objects or server behaviors (refer to Figure 22.16).

Do it this way:

In your document, create the content that should display if records are found. Immediately before or after this content, create whatever content should display if there are no records. So your page first displays placeholders to display recordset data and then displays a "Sorry" message or other default content.
Select the set of content that should show only if records are found. Make sure you select everything, including repeating regions, HTML tags, and so on.
From the Insert bar (Application category, Show Region objects), choose the Show If Recordset Not Empty object. Or, in the Server Behaviors panel, click the + button and choose Show Region > Show If Recordset Not Empty. In the dialog box that appears, make sure the relevant recordset is chosen, and click OK to insert the region.

In Design view, the selected content now appears in a box with a label, as shown in Figure 22.17. Exactly what the label says varies, depending on which server technology you're using.

Figure 22.17. A document with conditional content, set to display only if the current recordset contains records.
Select the content that should appear only if no records are found. Again, be sure to include all HTML tags and other invisible elements. (Use the Tag selector, or take a peek at Code view, to check.)
From the Insert bar or the Server Behaviors panel, choose the Show If Recordset Empty object. When the dialog box appears, select the recordset you're testing for (the one that must be empty before this content appears), and click OK to close the dialog box.

In Design view, this content also appears surrounded by a labeled box. Figure 22.18 shows how the page should look at this point.

Figure 22.18. A document with regions defined to hide or show if the recordset is empty.

Preview your page in a browser to see how it works. You can experiment by changing the definition of your recordset so that it collects no data, to see if the "Sorry" message displays as it should.

Displaying or Hiding Content Based on Recordset Paging

If you've ever inserted a Recordset Navigation Status object, you've already used this kind of conditional content. If your page includes a repeating region, with recordset paging to display only a set number of records at a time, you might want things such as the Move to Next Page object to display only if there is a next page to display. This involves using the Show If First Page, Show If Not First Page, Show If Last Page, and Show If Not Last Page objects (refer to Figure 22.16). Do the following:

Open a document that contains dynamic data in a repeating region that is set to display only a certain number of records at a time.
Select any content that should appear only if this is the first page of records. This includes any decorative elements you want, as well as dynamic elements such as the Move to First Page and Move to Previous Page objects. (See the earlier section "Paging Through Repeated Regions" for more on this.)
From the Insert bar (Application category, Show If objects), choose the Show If First Page object. Or choose the Show If > Show If First Page behavior from the Server Behaviors panel.

In Design view, your new conditional content appears with a labeled box surrounding it.
Repeat this procedure to identify and isolate any elements that should appear only when it is or isn't the first and last page of the recordset. Figure 22.19 shows a page with this kind of conditional content in place.

Figure 22.19. A dynamic document including elements that should appear at only certain points in the recordset paging cycle.

Testing and Troubleshooting Conditional Content

Like repeating regions, conditional regions are coded with beginning and ending server code surrounding the conditional content, like this (for PHP):

 <?php if ($totalRows_Recordset_1 > 0) { ?>   [  conditional content goes here  ] <?php } ?>

or this (for ColdFusion):

 <cfif Recordset4.RecordCount GT 0>   [  conditional content goes here  ] </cfif>

It's important to know this so that you can fix things that go wrong. If your conditional content isn't hiding and showing the correct content, for instance, take a trip to Code view. Any conditional content must be inside the opening and closing lines of server code. So if you didn't quite get the right selection when you inserted the conditional region, just select the stray code and move it in or out from between the opening and closing lines.