macromedia Dreamweaver MX Bible phần 6 docx

570 Part III ✦ Incorporating Dynamic Data 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 done. 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. Step 4: Insert the hidden variables So far, everything you’ve done could also be done in a static Web page, but it’s time to add the server-side component. Whenever a Recordset Paging server behavior is applied, whether manually or automatically by inserting a 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 in order 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. Here, for example, is the code inserted when a Move To Next Record server behavior is applied: ASP <%=MM_moveNext%> ColdFusion <cfoutput>#MM_moveNext#</cfoutput> JSP - <%=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 ➪ Form Objects ➪ Hidden Field or select the Hidden Field icon from the Forms category of the Insert bar. It doesn’t matter where the Hidden Field object is placed, as long as it’s within the <form> tag. 214931-6 ch17.F 7/18/02 7:00 AM Page 570 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com 571 Chapter 17 ✦ Managing Data 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 in the copied code as shown in Figure 17-14. Figure 17-14: The Hidden Field form element acts as 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. Dreamweaver alerts you that not all of the server behaviors have been deleted; you can safely ignore this warning. The part left behind is exactly what you’ll use. Your Flash Button is now recordset navigation ready. Test your page by using Dreamweaver’s Preview in Browser feature. Remember: If the folder for your testing server is on a different machine or in a different loca- tion from your local site root, you’ll need to transfer all the dependent files — including the SWF files used by the Flash Buttons — before the Flash Buttons will work correctly. To make your Flash Button interface as intuitive as possible, add Show Region server behav- iors to the various buttons, as detailed in the “Showing and hiding page elements” section earlier in this chapter (and shown in Figure 17-15). Tip 214931-6 ch17.F 7/18/02 7:00 AM Page 571 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com 572 Part III ✦ Incorporating Dynamic Data Figure 17-15: The Flash Buttons appear only when they are useful, courtesy of Dreamweaver’s Show Region server behaviors. 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 elements as well as show them programmatically. Data design is an important aspect of integrating the server side with the client side. As you look for ways to manage the data in your Web applications more effectively, remember the following points: ✦ With the aid of the Repeat Region server behavior, Dreamweaver can help you to show as much of the data on a single page as you desire. Repeat Region server behaviors are usually applied to table rows, but they may also be used with line-breaks or paragraphs, <br> and <p> tags, respectively. ✦ It’s often necessary to show data only if a certain condition is met. Dreamweaver han- dles these operations through a variety of Show Region server behaviors. With these tools, you can also selectively display any element — text, graphic, or dynamic data — on the current page. ✦ Once you have the capability to display a portion of your data, you need to be able to navigate the recordset. Dreamweaver’s Recordset Paging server behaviors can show the next or previous record (or group of records, if the Repeat Region server behavior is used), as well as quickly navigate to the first or last record of your data. 214931-6 ch17.F 7/18/02 7:00 AM Page 572 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com 573 Chapter 17 ✦ Managing Data ✦ Recordset navigation can be integrated in several ways: You can add each building block (the graphics or the text, the server behaviors, and so on) by itself, or you can accom- plish the same task in one operation by using a Dreamweaver Application Object. Depending on the Web application, you might find it quicker to insert and modify the Recordset Navigation Bar Application Object, rather than build your own step-by-step. ✦ You can convert Flash Buttons to act as recordset navigation aids. The step-by-step Dreamweaver Technique details the necessary modifications. In the next chapter, you’ll learn how you can use Dreamweaver’s Live Data view to enhance your workflow and test your application under a variety of circumstances. ✦✦✦ 214931-6 ch17.F 7/18/02 7:00 AM Page 573 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com 214931-6 ch17.F 7/18/02 7:00 AM Page 574 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com Working with Live Data W hen I first started with print and design layout, I would drive all over the city to finish a job. After receiving the client’s go-ahead, I had to pick my type from a phototypesetter, and my images from a stat house. Then, back at my studio, I’d cut and paste — and I mean literally with scissors and glue — the text and images into place, hoping against hope that I had specified the type and image sizes correctly. If not, it was back in the car for another trip or two around town. Ah, the good old days. Now, designers (especially those who design for the Web) have the luxury of developing their creations right in their own studio. Until Dreamweaver, however, the development of a Web application often undertook a faster, albeit parallel, course to my inner-city travels. After a basic page was designed, complete with server-side code, the document had to be uploaded to a testing server and then viewed in a browser over the Internet. If — make that when — changes were needed, the pages were revamped back in the studio. Because the designer was not able to lay out the page with the actual data in place, modifications were a trial-and-error process that often required many, many trips to the server and back. Dreamweaver’s Live Data view eliminates the tedium and the lengthy time required for the upload-preview-modify-upload cycle. With Live Data view, developers work with the layout while the actual data is live on the page. If a table width needs to be adjusted because one of the records appearing in it is too long, you can make the change immediately with no guesswork. Live Data view processes the page on the chosen server model and, because the page may require variables, such as search criteria, in order to run properly, the Live Data feature enables you to set such values as needed. Although a preliminary discussion of Live Data is covered in Chapter 16, this chapter covers all the necessary details for using both basic and advanced Live Data capabilities. While Live Data is a terrific timesaving feature, you can’t rely on it totally for testing your Web application. You still need to preview the page in various browsers to ensure cross-browser compatibility. The final section of this chapter is dedicated to Dreamweaver’s Preview in Browser feature and its relationship to your testing server. 18 18 CHAPTER ✦✦✦✦ In This Chapter Understanding the Live Data process Designing in Live Data view Testing different variable values Previewing with a testing server ✦✦✦✦ 224931-6 ch18.F 7/18/02 7:00 AM Page 575 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com 576 Part III ✦ Incorporating Dynamic Data Viewing Live Data Once your site is properly set up, entering Live Data view is just a click away. Select the Show Live Data View button on the toolbar to refresh Dreamweaver’s Document window and to replace all of the dynamic data placeholders with information from the declared data source If the Invisible Elements option is enabled, the newly visible Live Data is highlighted in whatever color is specified in Preferences. In order to get the most out of Live Data view — and to avoid any problems that might be encountered — it’s best to have a firm grasp of how Dreamweaver is able to present your data, live. How Live Data works In the right-hand corner of the Live Data toolbar, you may notice an animation of a spinning Dreamweaver logo before the page is refreshed. When the animation stops, Dreamweaver has all the information needed to present the completed page. Here is what’s really happening behind that spinning lower-case d: 1. The developer inserts dynamic data elements into a standard HTML page. The dynamic data is represented by placeholders that combine the recordset and field names in a set of curly braces, like {rsEvents.eventTime}. 2. When the Live Data view is enabled, Dreamweaver creates a hidden, temporary copy of the current page. 3. The temporary page is then stored in the folder designated in the Testing Server category of the Site Definition dialog box. 4. Dreamweaver instructs the defined testing server to execute the server-side code within the page, and passes along any variables that may have been specified. The URL prefix designated in the Site Definition Testing Server category is used to invoke the page. 5. When the code is 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, as shown in Figure 18-1 is replaced with the Live Data view, as shown in Figure 18-2. If Dreamweaver encounters an error, a message is displayed that explains where the process failed and suggests some possible remedies. Setting up for Live Data As noted in the summary of how Live Data works, several values found in the Testing Server category of the Site Definition are key to this feature’s operation. Live Data must know the location of the site root for the temporary page and how that location may be reached with an HTTP request. If either of these values is not found, the attempt to switch to Live Data view is aborted, and an error message appears. 224931-6 ch18.F 7/18/02 7:00 AM Page 576 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com 577 Chapter 18 ✦ Working with Live Data Figure 18-1: This table contains two dynamic data fields, surrounded by a Repeat Region server behavior. Figure 18-2: After Live Data view is enabled, the full number of records allowed by the Repeat Region is displayed and includes an accurate representation of the data. 224931-6 ch18.F 7/18/02 7:00 AM Page 577 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com 578 Part III ✦ Incorporating Dynamic Data There are two different methods for accessing the testing server: locally, through a network or remotely via FTP. If the testing server is to be accessed locally, the location of the folder storing the pages is entered in the Testing Server Folder field, shown in Figure 18-3. If you’re using a local Web server such as Personal Web Server (PWS), this entry is likely to be the same as your Local Root Folder, as defined in the Local Info category of the Site Definition dia- log box. The other field essential to proper Live Data operation is the URL Prefix field. When Live Data sends the HTTP request to the testing server, the address contained in this field prefaces the name of the temporary page. For example, if my temporary page is named TMPGX123455.asp and the URL prefix is http://localhost/dba, the URL used is http://localhost/dba/TMPGX123455.asp. Figure 18-3: Enter the location of your local files and a locally established site in the URL Prefix field to enable Live Data view to find your application. Localhost is common shorthand for addressing a local Web server; generally, you can also use the Internet Protocol (IP) address 127.0.0.1. Initially, Dreamweaver only inserts the http://localhost/ address into the URL Prefix field, which works if your local site root corresponds to the local Web server root. However, if your site root is in a different directory, you have to fill in the path of that directory. Most Web servers permit the creation of virtual directories, which are aliases recognized by the Web server. In Personal Web Server (known as Personal Web Manager in Windows 2000), for example, you can create a virtual directory by choosing the Advanced category and selecting Add, as shown in Figure 18-4. Once you’ve located the desired directory and given it an alias, that alias can be used in Dreamweaver’s URL Prefix field. I maintain a virtual directory on my system, for example, called dba for one of my clients. For this site, the complete URL prefix is http://localhost/dba. Tip 224931-6 ch18.F 7/18/02 7:00 AM Page 578 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com 579 Chapter 18 ✦ Working with Live Data ColdFusion MX developers with a local testing server need to specify their port number. By default, ColdFusion MX uses 8500 which would result in a URL Prefix of http:// localhost:8500/. Figure 18-4: Personal Web Server uses virtual directories to enable Web folders to be stored in various locations on a local system. If you’re connecting to a remote testing server, choose the FTP from the Access list on the Testing Server category of the Site Definition dialog box. When FTP is selected, Dreamweaver displays the same information entered under the FTP heading in the Remote Info category. Additionally, Dreamweaver combines the entries under FTP Host and Host Directory in the URL prefix with an initial http://. For example, if your entry under FTP Host is www. drinkgoodstuff.com and Host Directory is blank, the URL prefix will read http://www. drinkgoodstuff.com/. You may have to edit your URL prefix if your FTP host uses an ftp prefix. If my host directory were ftp.drinkgoodstuff.com, Dreamweaver would create the URL prefix entry http://ftp.drinkgoodstuff.com, an unworkable URL. Here, the ftp would need to be changed to www. Entering and exiting Live Data view Dreamweaver provides three different methods for invoking Live Data view; use the technique that best suits your work style: ✦ Choose View ➪ Live Data from the main menu. ✦ Use the keyboard shortcut, Ctrl+Shift+R (Command+Shift+R). ✦ Click the Show Live Data View button on the toolbar. Once in Live Data view, executing any of these three actions again returns you to Standard view, where dynamic data placeholders are shown. Caution Note 224931-6 ch18.F 7/18/02 7:00 AM Page 579 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com [...]... Unregistered Version - http://www.simpopdf.com 5 86 Part III ✦ Incorporating Dynamic Data Figure 18-8: The Dreamweaver Site window enables you to connect to the testing server as well as the remote server Using the Server Debug Panel with ColdFusion MX Macromedia tightens their Dreamweaver and ColdFusion integration with every product release Dreamweaver MX is no exception The new Server Debug panel offers... existing dynamic page 5 If you want to carry over values received from a query string, select the URL Parameters option 60 3 234931 -6 ch19.F 7/18/02 7:00 AM Page 60 4 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com 60 4 Part III ✦ Incorporating Dynamic Data 6 If you want to pass values received from a form, select the Form Parameters option 7 Click OK when you’re done Figure 19-9:... you the capability to browse your site inside the Dreamweaver interface, testing values as you go The Server Debug options are displayed for any ColdFusion page but only work for ColdFusion MX on Windows New Feature Use the new Server Debug view to see all the errors and server variables for your ColdFusion MX pages To enable debugging directly inside Dreamweaver, follow these simple steps: 1 Enable... left-hand pane of the ColdFusion MX Administrator (see Figure 18-9) The Debugging Options page will open in the right-hand pane 224931 -6 ch18.F 7/18/02 7:00 AM Page 587 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com Chapter 18 ✦ Working with Live Data Figure 18-9: Enable the server debugging options in ColdFusion MX before using the Server Debug panel in Dreamweaver 2 Click the Server... ?> 595 234931 -6 ch19.F 7/18/02 7:00 AM Page 5 96 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com 5 96 Part III ✦ Incorporating Dynamic Data In this example, the WHERE clause would read: WHERE Brand = ‘theBrand’ If you have already created a URL parameter filtered recordset in the simple Recordset dialog box and then switch to the Advanced mode, you notice that Dreamweaver uses... locationsList After a while, your naming convention becomes second nature to you, and you can easily remember what each form element has been named 60 1 234931 -6 ch19.F 7/18/02 7:00 AM Page 60 2 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com 60 2 Part III ✦ Incorporating Dynamic Data 4 Select the tag on the Tag Selector and, in the Action field of the Property inspector, enter... the toolbar 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, 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 route... variables, session variables, and other variables easily ✦ Be sure to use Dreamweaver s Preview in Browser feature to give your Web application a real-world tryout before going live To test your page, transfer dependent and related files using the Site window from the local site to the testing server pane ✦ User Dreamweaver s tight ColdFusion MX integration and the Server Debug panel to quickly debug your ColdFusion... ColdFusion applications In the next chapter, you’ll learn how to implement the use of cookies and other variables in your Dreamweaver Web application ✦ ✦ ✦ 589 224931 -6 ch18.F 7/18/02 7:00 AM Page 590 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com 234931 -6 ch19.F 7/18/02 7:00 AM Page 591 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com 19 C H A P T E... example: detailpage.cfm?id=23&id= 36 9 Click OK when you’re done 593 234931 -6 ch19.F 7/18/02 7:00 AM Page 594 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com 594 Part III ✦ Incorporating Dynamic Data Now that the link is passing parameters successfully, it’s time to make sure that the detail page is set up for receiving them properly Receiving parameters Dreamweaver provides two routes . server. Using the Server Debug Panel with ColdFusion MX Macromedia tightens their Dreamweaver and ColdFusion integration with every product release. Dreamweaver MX is no exception. The new Server Debug panel. option. Previewing in the browser was a major Dreamweaver 4 enhancement that, in Dreamweaver MX, carries one additional responsibility. In order to view Web applications properly, Dreamweaver must process the. this feature. Tip 224931 -6 ch18.F 7/18/02 7:00 AM Page 585 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com 5 86 Part III ✦ Incorporating Dynamic Data Figure 18-8: The Dreamweaver Site