Dreamweaver MX 2004 Bible phần 7 doc

694 Part IV ✦ Incorporating Dynamic Data Figure 20-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: 1. Select the page area you would like to conditionally show. 2. From the Server Behaviors panel, choose Add and select one of the server behaviors from the Show Record submenu. The dialog box for the specific Show Record server behavior you chose is displayed, like the one shown in Figure 20-6. The dialog boxes for all the Show Record server behaviors are identical. 3. From the Recordset list, select the recordset on which to base the Show Record condition. 4. Click OK when you’re done. 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—may be applied to a page without any precondi- tions. 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 cov- ered in more detail in the following section. 543504 ch20.qxd 12/10/03 10:33 PM Page 694 695 Chapter 20 ✦ Managing Data Figure 20-6: To use a Show Record server behavior, all you do is choose a recordset. Handling Record Navigation So far in this chapter, you’ve seen how to repeat dynamic data and how to hide and display data and other page elements programmatically. Now it’s time to put some real interactive controls into the hands of your Web application users. Dreamweaver includes a set of server behaviors that enable the user to page through your recordset, much as if they were flipping the pages of a catalog. You can approach Dreamweaver’s record navigation through two avenues: One option is a do- it-yourself route, or you can let Dreamweaver do most of the work for you. To better under- stand how record navigation works, examine the piece-by-piece approach first. Building record navigation links As mentioned in the previous section on Show Region server behaviors, Dreamweaver also includes a set of server behaviors to control navigation within a recordset. Again, the applica- tion 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. 543504 ch20.qxd 12/10/03 10:33 PM Page 695 696 Part IV ✦ Incorporating Dynamic Data You can find five server behaviors under the Recordset Paging submenu: ✦ Move To First Record ✦ Move To Previous Record ✦ Move To Next Record ✦ Move To Last Record ✦ Move To Specific Record The final Recordset Paging server behavior, Move To Specific Record, is most often used in conjunction with a search routine or a master-detail application. As noted, you can use either text or images as your controls. Navigation links, such as those shown in Figure 20-7, may even include rollovers or other client-side behaviors. You can even use Flash buttons to trigger recordset navigation; see “Dreamweaver Technique: Using Flash Buttons for Recordset Navigation” later in this chapter, for a detailed explanation of how it’s done. You don’t need to add an initial or placeholder link to your image or text. When the Recordset Paging server behavior is applied, the link is written for you. Figure 20-7: You can use images —with or without rollovers— to navigate through a recordset with Dreamweaver’s Recordset Paging server behaviors. Tip Note 543504 ch20.qxd 12/10/03 10:33 PM Page 696 697 Chapter 20 ✦ Managing Data To create recordset navigation links, follow these steps: 1. Select the text or image to which you’d like to attach the server behavior. 2. From the Server Behaviors panel, select Add. Choose the desired behavior from the Recordset Paging submenu. The appropriate Recordset Paging dialog box appears. If you’ve made a selection, it’s highlighted in the Link list; otherwise, a new text link is created, as shown in Figure 20-8. 3. Make sure that the selection in the Link list is the link you want. 4. Choose the recordset you want to work with from the Recordset drop-down list. Figure 20-8: The Recordset Paging server behaviors identify your selected target, whether it is an image or text. 5. Click OK when you’re finished. 6. Repeat Steps 1 through 5 to add more recordset navigation elements. Record navigation is done within a particular recordset; you can’t link from one recordset to another using the Dreamweaver server behaviors or Application objects. 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. Using Application objects for record navigation 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 ➪ Application Objects menu or the Application tab in the Insert bar. The Recordset Navigation Bar Application object serves the following multiple purposes: ✦ Adds four links to the page in a borderless, single-row table: First, Previous, Next, and Last. The links may be either text or graphics. ✦ Attaches the appropriate Recordset Paging server behavior to the four links. Note 543504 ch20.qxd 12/10/03 10:33 PM Page 697 698 Part IV ✦ Incorporating Dynamic Data ✦ Inserts a Show Region server behavior to each of the links: • Show If Not First Record is added to the First and Previous record links. • Show If Not Last Record is added to the Next and Last record links. ✦ Centers the table on the page and sets the width to 50%. 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 20-9. Here’s how it works: 1. Choose Insert ➪ Application Objects➪ Recordset Navigation Bar or choose Insert Recordset Navigation Bar from the Application category of the Insert bar. The Recordset Navigation Bar dialog box is displayed. 2. Select the data you want to control from the Recordset list. 3. To create a series of text links, choose the Display Using Text option. 4. To use graphics to trigger the navigation, choose the Display Using Images option. You must save the page if you select the Display Using Images option. Dreamweaver copies images from the Shared/Dreamweaver/Images folder when you choose this option, and the page into which they are being inserted must be saved in order to store the images properly in the site. They are stored in the same folder as the page containing them. Figure 20-9: The Recordset Navigation Bar dialog box offers a choice between text links or graphics. 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 another graphic. Tracking record status Another Application object inserts the text and all the server behaviors necessary to display the records currently being viewed. By default, the syntax used by the Recordset Navigation Status Application object is as follows: 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 the following: Records 5 to 10 of 37 Caution 543504 ch20.qxd 12/10/03 10:33 PM Page 698 699 Chapter 20 ✦ Managing Data 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, this Application object works with only one recordset at a time. The Recordset Navigation Status Application object works similarly, as shown in the fol- lowing steps: 1. Choose Insert ➪ Application Objects➪ Recordset Navigation or click the Recordset Navigation Status icon on the Application category of the Insert bar. The Recordset Navigation Status dialog box is displayed, as shown in Figure 20-10. Figure 20-10: The Recordset Navigation Status Application object inserts three different server behaviors in one operation. 2. Select the data you want to control from the Recordset list. 3. Click OK when you’re finished. Dreamweaver Technique: Using Flash Buttons for Recordset Navigation Flash buttons are an excellent Dreamweaver tool for adding lively navigation aids to your Web page, but they’re intended for page-to-page linking, not recordset navigation. However, with a little additional work, you can adapt standard or custom Flash buttons to control Dreamweaver’s Recordset Paging server behaviors. Flash buttons are actually Macromedia Generator Templates that when processed by Dreamweaver become Flash movies. As a Generator Template, the link information is com- piled into the Flash movie and is not accessible for server-side processing —a necessity for moving from one record to another. Enabling Flash buttons to control recordset navigation requires four main components: ✦ Server-side code for moving from record to record ✦ A JavaScript call from the Flash button ✦ A JavaScript function in the <head> of the document ✦ A hidden field variable in a form The first requirement is actually the easiest, as the necessary server-side code is provided by Dreamweaver. 543504 ch20.qxd 12/10/03 10:33 PM Page 699 700 Part IV ✦ Incorporating Dynamic Data Step 1: Prepare the page 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 ➪ Application Object menu. To save time — and because you’ll likely be adding multiple controls—choose the Application object route by choosing Insert ➪ Application Object➪ Recordset Navigation Bar. If you follow this path, choose the Display Using Text option rather than images. Later, when you delete the links (but not the code), you’ll have extraneous files in your local site if you opt for graphics now. 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 pages with the name theForm. The form may enclose the other ele- ments, as shown in Figure 20-11, or be separate. Figure 20-11: To prepare for the Flash Recordset Navigation buttons add a form and Dreamweaver’s standard Recordset Navigation bar. 543504 ch20.qxd 12/10/03 10:33 PM Page 700 701 Chapter 20 ✦ Managing Data Step 2: Add the Flash buttons Now you’re ready to insert your Flash buttons. Note one small difference between the regular Flash buttons and the ones used in the Dreamweaver technique. In your version, you call a JavaScript function rather than link to another page. If you’re not familiar with Flash buttons, be sure to look over Chapter 24 to understand their basic usage and learn how you can create your own custom Flash buttons with Flash MX. To insert your modified Flash button, follow these steps: If you’re already familiar with Flash buttons, skip to Step 7. 1. Make sure that the current document has been saved. If you’re working on a new docu- ment, Dreamweaver requires that you save it before adding a Flash button. 2. Choose Insert ➪ Media➪ Flash button. The Insert Flash Button dialog box, shown in Figure 20-12, is displayed. Figure 20-12: Instead of a relative URL, put a call to a JavaScript function in the Link field of your Flash button. 3. Select a button type from the Style list. The previews shown in the Sample area are live demonstrations and play as designed when moused-over or clicked. Note, however, one exception: No sounds are played in preview; you have to preview the Flash button in the browser to get the full effect. 4. If appropriate, enter custom text in the Button Text field. The Button Text field is physi- cally limited to 50 characters, although probably your text will be shorter. Certain sym- bols, such as those in the Control group, ignore the text and font settings. Note Cross- Reference 543504 ch20.qxd 12/10/03 10:33 PM Page 701 702 Part IV ✦ Incorporating Dynamic Data 5. Select a typeface from the Font drop-down list if appropriate. The fonts listed are TrueType fonts found on your system. Most of the button templates have a preselected font and text size. If you do not have the preselected font on your system, a small alert appears at the bottom of the dialog box. 6. Enter the desired font size if appropriate, in points, in the Size field. 7. Enter a JavaScript call to a function that sets the recordset navigation in the Link field. For our example, you can use the functions moveNext(), movePrev(), moveFirst(), and moveLast(). For a button that moves to the next record, the entry into the Link field reads as follows: javascript:moveNext(); 8. Leave the Target field blank. 9. If the Flash button is to be placed on a page or in a table with a background color other than white, select the Bg Color swatch to choose an appropriate background. Alternatively, enter the hexadecimal color number or standard color name directly in the Bg Color text field. 10. Enter a path and filename for the Flash button file. If you like, you can use the sug- gested default name in the site root, or select the Browse button to choose a different location. 11. Choose Apply to insert the button at the cursor location on the page. 12. Click OK when you’re finished. 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. Step 3: Include the JavaScript functions Now it’s time to include the functions referenced in the Flash Button Link field. As JavaScript functions go, these are as simple as they get—with just one line of code each. When exe- cuted, 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 } 543504 ch20.qxd 12/10/03 10:33 PM Page 702 703 Chapter 20 ✦ Managing Data 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 docu- ment. Use the following steps to accomplish that: 1. Choose View➪Head Content to expose the <head> region in Dreamweaver’s Document window. 2. Choose Insert ➪ HTML➪ Script Objects ➪ Script. Alternatively, you could select the Script icon from the HTML category of the Insert bar. The Script dialog box, shown in Figure 20-13, is displayed. Figure 20-13: If you are new to JavaScript, use Dreamweaver’s Script object for inserting code. 3. Select JavaScript from the Language list. 4. Enter the desired functions into the Content text area. You can enter as many of the functions as you’d like, or all of them. 5. Click OK when you’re finished. If you’re more familiar with JavaScript, you can enter the functions directly through Dreamweaver’s Code view. The functions may be inserted into an existing <script> . . . </script> tag pair, or you can create your own. Now you’re ready to add the final piece of the basic puzzle: the hidden variables. 543504 ch20.qxd 12/10/03 10:33 PM Page 703 [...]... is available, you may also choose a browser under the Preview/ Debug in Browser option Previewing in the browser was a major Dreamweaver 4 enhancement that, in Dreamweaver MX and now in MX 2004, carries one additional responsibility In order to view Web applications properly, Dreamweaver must process the pages with a testing server To use this facility, you must satisfy two requirements: ✦ Specify the... the Server Debug Panel with ColdFusion MX Macromedia tightens the Dreamweaver and ColdFusion integration with every product release Dreamweaver MX 2004 is no exception The Server Debug panel offers you an integrated view of all errors and server variables on your ColdFusion pages The Server Debug view also gives you the capability to browse your site inside the Dreamweaver interface, testing values... ColdFusion MX on Windows 71 9 72 0 Part IV ✦ Incorporating Dynamic Data To enable debugging directly inside Dreamweaver, follow these simple steps: 1 Enable server debugging by choosing Debugging Settings in the left-hand pane of the ColdFusion MX Administrator (see Figure 21-9) The Debugging Options page opens in the right-hand pane Figure 21-9: Enable the server debugging options in ColdFusion MX before... executed, Dreamweaver reads the resulting HTML code 6 Finally, Dreamweaver uses its translator capability to substitute the dynamic data placeholders shown in the original document with the data generated The temporary document is deleted from the server If all goes well, a page with dynamic data placeholders (shown in Figure 21-1) is replaced with the Live Data view (shown in Figure 21-2) If Dreamweaver. .. You can then paste it inside a new document — in Dreamweaver or another text editor — for future reference or to send to another ColdFusion developer for further debugging 72 1 72 2 Part IV ✦ Incorporating Dynamic Data Summary Sometimes, when a brand-new idea appears in a software program, it’s hard to separate the merely glitzy from the truly grand As implemented in Dreamweaver, Live Data view proves... shown in Figure 20-15 Figure 20-15: The Flash buttons appear only when they are useful, courtesy of Dreamweaver s Show Region server behaviors 70 5 70 6 Part IV ✦ Incorporating Dynamic Data Summary In order to be part of an effective Web application, dynamic data can’t just be displayed; it has to be designed Dreamweaver, through a variety of server behaviors, gives you the power to selectively repeat page... pairs in a query string To simulate a form passing variables in an encapsulated, hidden manner, choose Post from the Method list 71 7 71 8 Part IV ✦ Incorporating Dynamic Data Tip If you choose the Get method, enter the variables and their values without encoding them for the URL Dreamweaver translates any necessary characters into their hexadecimal equivalents when the Live Data page is processed 9 To establish... preview Live Data, you can see all the CF MX Server Debug output, and you can browse through your pages just as you would in a regular Web browser (see Figure 21-10) Figure 21-10: The Server Debug view gives you additional options on the toolbar for browsing your ColdFusion MX documents 3 Open the Server Debug panel by choosing Window ➪ Results or pressing F7 and selecting the Server Debug tab The Server... is dedicated to Dreamweaver s Preview in Browser feature and its relationship to your testing server Designing in Live Data view Testing different variable values ✦ ✦ ✦ ✦ 70 8 Part IV ✦ Incorporating Dynamic Data Viewing Live Data After your site is properly set up, entering Live Data view is just a click away Click the Show Live Data View button on the toolbar to refresh Dreamweaver s Document window... 22-2: Specify the linking parameter sent from the master page in the Go To Detail Page server behavior 72 5 72 6 Part IV ✦ Incorporating Dynamic Data Receiving parameters Dreamweaver provides two routes for your detail page to use the parameter passed to it by the master page: a filtered recordset or a Dreamweaver server behavior In general, the first method is less processor-intensive and thus the better . moveNext() { document.location.href=document.theForm.nextHidden.value } 543504 ch20.qxd 12/10/03 10:33 PM Page 70 2 70 3 Chapter 20 ✦ Managing Data function movePrev() { document.location.href=document.theForm.prevHidden.value } function. { 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. different variable values Previewing with a testing server ✦✦✦✦ 543504 ch21.qxd 12/10/03 10: 37 PM Page 70 7 70 8 Part IV ✦ Incorporating Dynamic Data Viewing Live Data After your site is properly set