After establishing a data source connection and defining a recordset, Dreamweaver displays all the available fields in the Bindings panel. Regardless of how many records are contained in the declared recordset, you see only one record when you drag one or more fields onto your page and preview the file. To see multiple records from the same recordset on a single page, you can apply the Repeat Region server behavior.

The Repeat Region server behavior is very straightforward and extremely flexible. After selecting the dynamic data and any surrounding code you'd like to repeat, you specify the number of repetitions—you also have an option to display all the records in the recordset. The key phrase in the previous sentence is "and any surrounding code." If you select only the dynamic data itself, the data is repeated one record after another. You have to include some HTML element to enable the repeated data to appear separately, as on a different line. Some of the most commonly used separation elements and their HTML tags are:

For the Repeat Region to work correctly, you must select both the opening and the closing tags that surround the dynamic data, as shown in Figure 21-1. The surest way to do this is to place your cursor on the dynamic data and choose the surrounding element from the tag selector.

Figure 21-1. To automatically number your data, apply a Repeat Region to the <li> tag within an ordered (or numbered) list.

To implement a Repeat Region, follow these steps:

Tip

To test your implementation, make sure that the View

Although all the repeated elements are displayed on the screen, only the initial element within a Repeat Region can be altered. If you change the initial element's formatting, you must click the Refresh button from the Live Data toolbar to apply those changes to the other elements; this holds true even if you have Auto Refresh enabled.

Multiple Repeat Region server behaviors may coexist on the same page, extracting data from either the same recordset or a different one. However, if you use the same recordset again, you need to reset it so that Dreamweaver is extracting from the beginning. To do this, locate the second Repeat Region server behavior in the code by selecting its entry from the Server Behaviors panel and switching to Code view. Above the first line of server code, add the code appropriate to your server model (substitute the name of your recordset for rsMine):

ASP          <% rsMine.MoveFirst() %>
JSP          <% rsMine.first() %>
PHP          <? mysql_data_seek($ rsMine, 0) ?>

If you do not insert the resetting code, the second Repeat Region picks up where the first one left off. For example, if 10 records are displayed in the initial Repeat Region, the second Repeat Region starts with the 11th record. If you chose all records for the first Repeat Region, nothing is shown in the second Repeat Region.

Now that you know how to do this by hand, it's time to show you the quick way (I know it's cruel, but everyone has to learn the hard way first). Dreamweaver offers a fast and simple way to add a table of records with a Repeat Region in just one step. Choose Insert

Figure 21-3. Use the Dynamic Table Application object to add dynamic lists of tabular data quickly. You can save lots of time by skipping the tedious task of adding all your dynamic text manually.

This dialog box has just a few options:

After you click OK, the table contains the field names in the first row, the data items in the second row, and a Repeat Region wrapped around the second row, as shown in Figure 21-4.

Figure 21-4. With the results from the Dynamic Table Application object, you simply change the basic table formatting and the table headings, and you're done.

In the rush to push a site live, designers often pay too little attention to the user experience. When you are designing static Web pages, it's especially easy to lose sight of the importance of the user interface. However, with dynamic pages—where user interaction often determines what's on the page—an intuitive, reactive design helps to focus the audience on the content, rather than the engine driving the content. Dreamweaver provides a set of server behaviors that enable you to show or hide any area of the page dynamically: the Show Region server behaviors.

The six Show Region server behaviors are as follows:

Dreamweaver's capability to conditionally hide or reveal areas of the page is extremely helpful for smoothing the user experience. For example, suppose you have a Web application that shows all 23 items in a particular recordset, 5 at a time, with Next and Previous links (see Figure 21-5). The record navigation controls enable users to page through the recordset, forward and backward. When they reach the final record, the Next and Last buttons should be hidden; when they're on the first record, the Previous and First buttons should be hidden. I've used Show Region If Not Last Record to hide the Next button and Show Region If Not First Record to hide the Previous button.

Figure 21-5. Use Dreamweaver's Show Region server behavior to display or hide navigation buttons, depending on the dynamic data shown.

To apply a Show Region server behavior, follow these steps:

Typically, the Show Region server behaviors are used in pairs. Apply a Show Region If Not First Record server behavior to a Previous Record link—it hides the link when the user is on the first record. Similarly, apply a Show Region If Not Last Record server behavior to the Next Record link to cause the link to disappear when the last record is called.

Only the first two Show Region server behaviors—Show Region If Recordset Is Empty and Show Region If Recordset Is Not Empty—can be applied to a page without any preconditions. The other four Show Region server behaviors require that one other type of server behavior be present on the page: the Recordset Paging server behavior. The Recordset Paging server behaviors act like VCR controls, adding a link that, when selected, displays the first, last, next, or previous set of records. The Recordset Paging server behaviors are covered in more detail in the next section.

As mentioned earlier, Dreamweaver includes a set of Recordset Paging server behaviors to control navigation within a recordset. Again, the application is straightforward: Select the text or image you'd like to serve as a trigger and attach the appropriate server behavior. When selected, the trigger fires the server-side code that retrieves the chosen record. If a Repeat Region is inserted on the page, the next or previous group of records is displayed.

You can find five server behaviors under the Recordset Paging submenu:

As noted, you can use either text or images as your controls. Navigation links, such as those shown in Figure 21-7, may include rollovers or other client-side behaviors. You can even use Flash buttons to trigger recordset navigation; see the section "Navigating Recordsets with Flash Buttons" later in this chapter for a detailed explanation of how it's done.

Figure 21-7. You can use images—with or without rollovers—to navigate through a recordset with Dreamweaver's Recordset Paging server behaviors.

To create recordset navigation links, follow these steps:

After you've added your navigation controls, you may want to take the next step toward a more complete user interface by adding Show Region server behaviors to ensure that the controls are displayed only when they serve a purpose. For example, if you have a navigation element that moves to the last record of a recordset, you probably want to attach a Show If Not Last Record server behavior to the trigger.

Although the process for setting up a single navigation control is fairly simple, you'd have to perform that process four times (as well as attach four additional server behaviors) to accomplish what the Recordset Navigation bar does in one operation. The recordset navigation bar is one of Dreamweaver's Application objects—one that can take the drudgery out of a repetitious implementation. All the Application objects are accessible through either the Insert

The Recordset Navigation Bar Application object serves the following purposes:

What's even more impressive about this list of functions is that they are implemented with a single command, which, in turn, references a very simple dialog box, as shown in Figure 21-9.

Figure 21-9. The Recordset Navigation Bar dialog box offers a choice between text links or graphics.

Here's how it works:

After the recordset navigation bar has been inserted, you can adjust the text or images in any way you see fit. The text may be styled or modified, and you can even swap out the images—by changing the src attribute—for other graphics.

Another Application object inserts the text and all the server behaviors necessary to identify the records currently being viewed. By default, the syntax used by the Recordset Navigation Status Application object is:

Records First_Record_Shown to Last_Record_Shown of Total_Records

This syntax works perfectly for Web applications that use a Repeat Region server behavior to show multiple records. When viewed through the browser, the recordset navigation status output looks like this:

Records 5 to 10 of 37

If you're displaying one record at a time, you can adjust the Application object code inserted so that it is similar to the following:

Record First_Record_Shown of Total_Records

Like the recordset navigation bar, the recordset navigation status Application object works with only one recordset at a time:

Before you can begin the specific steps for converting the Flash buttons for your use, some preliminary work needs to be done. First, make sure that you have added your recordset and any necessary fields. You can always add more fields from the Bindings panel later, but it's good to have one or two in the page to test the navigation buttons.

Next, add the server-side code. You can accomplish this in one of two ways: Either enter some text and attach a Recordset Paging server behavior to it, or use Dreamweaver's recordset navigation bar from the Insert

One final bit of prep work before you add the Flash buttons: Add a form to your page if one is not already present. If you like, give it a unique name; one convention you might try is to identify the forms on your separate pages with the name theForm. The form may enclose the other elements, as shown in Figure 21-11, or be separate.

<form name="theForm">

You can, of course, substitute your own name for the form for "theFom". Press Enter (Return) to confirm your code change; Dreamweaver automatically adds the closing </form> tag.

Figure 21-11. To prepare for the Flash Recordset Navigation buttons add a form and Dreamweaver's standard Recordset Navigation bar.

Now you're ready to insert your Flash buttons. Note one small difference between the regular Flash buttons and the ones used in this section. In your version, you call a JavaScript function rather than link to another page.

To insert your modified Flash button, follow these steps:

The JavaScript function names listed in the steps here may be changed to whatever you like. However, be sure to use the same names as the actual functions when you insert them in the code, as described in the next step.

As JavaScript functions go, the functions referenced in the Flash Button Link field are as simple as they get—with just one line of code each. When executed, each of the JavaScript functions does the same thing: It sets the current URL to a value specified in a hidden form variable. You set the form variables in the next step.

Although there are four variations—one for each type of recordset navigation—the basic function looks like the following:

function moveNext() {
    document.location.href=document.theForm.nextHidden.value
}

The function name—here, moveNext()—is arbitrary, but note that it matches the function name specified in the Flash button setup. The reference to the hidden form variable is also specific to this code—again, you can name the variables whatever you like; just ensure that the names match the code in the function.

This code uses the following four functions:

function moveNext() {
    document.location.href=document.theForm.nextHidden.value
}

function movePrev() {
    document.location.href=document.theForm.prevHidden.value
}

function moveFirst() {
    document.location.href=document.theForm.firstHidden.value
}

function moveLast() {
    document.location.href=document.theForm.lastHidden.value
}

If you're totally unfamiliar with writing JavaScript, you can use Dreamweaver's Script object to insert the code. However, make sure that the code goes in the <head> section of the document. Use the following steps to accomplish that:

If you're more familiar with JavaScript, you can enter the functions directly through Dreamweaver's Code view. The functions can be inserted into an existing <script>...</script> tag pair, or you can create your own. Next, you add the final piece of the basic puzzle: the hidden variables.

Whenever a Recordset Paging server behavior is applied, whether manually or automatically by inserting an Application object, Dreamweaver writes a bit of server-side code in the href attribute of the <a> tag surrounding the trigger element. It is this code that you must make accessible for the Flash button to work properly as a recordset navigation tool.

The server-side code varies from server model to server model but, in essence, it's quite similar. For example, here's the code inserted when a Move To Next Record server behavior is applied:

<%=MM_moveNext%>

<cfoutput>#CurrentPage#?PageNum_rsEmployees=#Min(IncrementValue(PageNum
_rsEmployees),TotalPages_rsEmployees)##QueryString_rsEmployees#</cfoutp
ut>

<%=MM_moveNext%>

.NET

<%# Request.ServerVariables("SCRIPT_NAME") %>?rs_currentPage=<%#
rs.CurrentPage + 1 %>

To keep this code accessible for server-side processing—and viable for the JavaScript function to use—it must be embedded in a hidden variable form element. After the code is transferred, the temporary recordset navigation elements previously inserted can be deleted. Here's how to accomplish this task, step by step:

1. Select the text link that matches the recordset navigation intended for your Flash button.

   You can start anywhere because you're eventually going to add Flash buttons for all your recordset navigation moves.

2. From the Property inspector, select and copy the value of the href attribute, using the keyboard shortcut Ctrl+C (Command+C) or the context menu.

3. Position your cursor anywhere in the form, and choose Insert

   

4. In the Hidden Field Property inspector, change the name from the default hiddenField to a unique name. This name must be the same as the one used in the JavaScript function. You might want to create a name for form elements by first describing what the element relates to, followed by the type of form element. For example, the four hidden fields used in recordset navigation are called firstHidden, lastHidden, nextHidden, and prevHidden.

5. In the Value field of the Property inspector, paste the copied code as shown in Figure 21-14.

   

   Figure 21-14. The Hidden Field form element acts a conduit to the JavaScript function, passing the processed server-side value, which, in turn, is called by the Flash button.

6. Repeat steps 1 through 5 for every Flash button recordset control intended for the page.

7. After you've added all the hidden fields needed, you're free to delete the temporary recordset navigation text links. One way to do this is to place your cursor inside of the text link, right-click (Control+click) the <a> tag in the Tag Selector and choose Remove Tag.

Your Flash button is now recordset-navigation ready. Test your page by using Dreamweaver's Preview in Browser feature.

Tip

Remember: If the folder for your testing server is on a different machine or in a different location from your local site root, you must transfer all the dependent files—including the SWF files used by the Flash buttons—before the Flash buttons work correctly.

To make the Flash button interface as intuitive as possible, add Show Region server behaviors to the various buttons, as detailed in the "Showing and Hiding Page Elements" section earlier in this chapter and shown in Figure 21-15.

Figure 21-15. The Flash buttons appear only when they are useful, courtesy of Dreamweaver's Show Region server behaviors.