Wile Adobe dreamweaver CS5 Bible phần 7 pot

773 Chapter 19: Making Data Dynamic 8. Click OK when you’re done. 9. Test your page by switching to Live View (View ➪ Live View). CSS formatting can be added while in Live View. When you’re done, turn off Live View. 10. From the Bindings panel, select the agentFirstName entry. 11. Select the Format list on the far right of the entry and, from the list, choose AlphaCase ➪ Upper. You may need to scroll the Bindings panel to the left to see the drop-down arrow in the Format col- umn. After you make the format change, the agent’s first name will automatically be uppercased. 12. Choose View ➪ Live View again to re-enter the mode and preview the revised data. Save your page. You’ll revisit this page in the next chapter when you learn how to show additional data from a recordset on the page using a Dreamweaver server behavior. Integrating Flash and Other Dynamic Media 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 incor- porated. 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. 774 Part IV: Incorporating Dynamic Data 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. Note When you insert a Flash or Shockwave movie, Dreamweaver now includes a JavaScript file and references a function from that file. All parameters (dynamic and otherwise) inserted through the Property inspector and associated dialog boxes are correctly written into the JavaScript code automatically. n 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 appro- priate 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: 1. Position your cursor where you’d like your dynamic content to appear, and click Insert Flash from the Common category of the Insert panel. Alternatively, you can drag the Insert Flash button to the proper place on the page. In either case, the Select File dialog box appears. 2. Windows users choose the Select file name from Data sources option at the top of the page. Macintosh users select the Data Sources button found just below the URL field. 775 Chapter 19: Making Data Dynamic 3. Expand the data source to locate and select the desired field with the Flash movie filenames. 4. If your Flash data (the paths to the movies) contains spaces, tildes, or other nonstandard characters, the data must be encoded to be read properly by the server. From the Format List, select Encode — Server.HTMLEncode (ASP); Encode — HTMLEncodedFormat (.NET); Encode — URLEncoded Format (ColdFusion); or Encode — Response. EncodeURL (JSP). 5. If your data is stored as filenames only, enter any required path in the URL field before the existing code. 6. You can also link any Flash attributes to a dynamic source by clicking the Parameters button to open the Parameters dialog box, entering a dynamic value by clicking the lightning bolt symbol under the Name or Value column, and choosing an appropriate data source from the Dynamic Data dialog box. 7. Click OK when you’re finished. Cross-Reference For more details on integrating Flash movies in your Web pages, see Chapter 25. n Summary 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: The Bindings panel displays fields available for insertion into a Web document, much L like the Assets panel, which shows available images and other elements. Like the Assets panel, data is inserted from the Bindings panel through a drag-and-drop procedure. For complex layouts, you can position your cursor precisely and click the Insert button instead of dragging and dropping the dynamic fields. Dynamic text accepts two types of formatting: client-side and server-side. Client-side L formatting is another term for standard HTML and CSS formatting; dynamic text may be styled with the same tags and attributes as regular text. The final look for these tags and attributes is interpreted by the browser. Server-side formatting, on the other hand, reshapes the data from the data source before it passes it on to the browser. If you encounter trouble inserting dynamic images into your Web applications, chances L are you’re not doing anything wrong in Dreamweaver. The error may lie in your data- base setup. It’s key to store the path and/or filename of the images in the data source as a text field rather than as a hyperlink. 776 Part IV: Incorporating Dynamic Data Dreamweaver does not support loading images as binary images from data sources, L otherwise known as Binary Large Objects (BLOBs). Flash movies — in fact, any multimedia file — can be dynamically inserted into a L Dreamweaver page. Again, storing just the filename or the filename and path in the database field is the best approach. Any attribute, whether of a multimedia object or regular image, can be dynamically L derived. The Parameters dialog offers options for inputting either dynamic or static attributes and values on multimedia objects, and the Bindings panel allows you to bind dynamic data to attributes. In the next chapter, you see how to begin managing your data in Dreamweaver. 777 Managing Data IN THIS CHAPTER Repeating data on a page Dreamweaver Technique: Applying a Repeat Region Selectively showing and hiding areas Moving from record group to record group Using Data objects for instant recordset navigation Dreamweaver Technique: Establishing Recordset Navigation W ith the power to access the data of the world — or at least your part of it — comes great responsibility. As a Web page designer, you determine how best to present that information. Not only does this include the surrounding look-and-feel but also how the data itself is structured. How many records should you show at once? One? Ten? All? How should the user navigate from one group of records to another? What should the user see when there are no more records to display? Obviously, there are no definitive answers to these questions; each response must take into account the intent of the page, the type of data involved, and the audience for that data. This chapter can’t give you precise solutions for every Web application, but it does give you the tools to devise your own resolutions. Displaying Data Conditionally What makes a Web page into a Web application? Connectivity to a data source by itself does not make a Web application — after all, you’re merely setting up the possibility for data integration, not actually utilizing it. Some would say that it is the power to programmatically control the display of the data that is at the heart of an application. Dreamweaver handles this condi- tional display of data primarily through its Server Behaviors panel. You can, for example, opt to display the data — or any other page element — only if certain conditions are met, such as an empty recordset. Before you look at the options for showing and hiding data conditionally, let’s first examine what is perhaps the most commonly used Dreamweaver server behavior: Repeat Region. 778 Part IV: Incorporating Dynamic Data Repeating data 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 select- ing 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 sepa- ration elements and their HTML tags are: Line break: L <br> Paragraph: L <p> . . . </p> Table row: L <tr> . . . </tr> Table data: L <td> . . . </td> Unordered or ordered list item: L <li> . . . </li> 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 Design view in Figure 20-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. To implement a Repeat Region, follow these steps: 1. Select the dynamic data and surrounding code that you would like to repeat. 2. From the Server Behaviors panel, click Add (+) and select Repeat Region from the list. The Repeat Region dialog box, shown in Figure 20-2, appears. 3. Choose the recordset you want to work with from the Recordset drop-down list. 4. If you want to present a subset of the recordset, enter the number of records you want to display in the Show: Records field. The default is to show 10 records at a time. You can change that value to anything you like if you select the Show: Records option. 5. If you want to display every record in the recordset, choose the Show: All Records option. 6. Click OK when you’re finished. Tip To test your implementation, make sure that the View ➪ Visual Aids ➪ Invisible Elements option is enabled. Then click the Live View button on the Document toolbar. Dreamweaver displays each repeated selection with a highlight. n 779 Chapter 20: Managing Data Figure20-1 To automatically number your data, apply a Repeat Region to the <li> tag within an ordered (or numbered) list. Here PHP adds a do loop to repeat the elements. Figure20-2 With the Repeat Region server behavior, you can show some or all the records in the chosen recordset. 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 View 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 sec- ond Repeat Region server behavior in the code by selecting its entry from the Server Behaviors 780 Part IV: Incorporating Dynamic Data 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) ?> Note ColdFusion handles this for you. If you start a new ColdFusion <cfoutput> block based on your recordsets, it starts from the beginning again. n 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 ➪ Data Objects ➪ Dynamic Table or click the Dynamic Table icon in the Data category of the Insert panel. The Dynamic Table dialog box, shown in Figure 20-3, is now active. Figure20-3 Use the Dynamic Table Data 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: Recordset: L Choose the recordset you want displayed in your table. Show: L Choose whether to show a limited number of records or all records. This adds a regular Repeat Region to your field, just as you did earlier in this section. Table attributes: L Specify your table border, cell padding, and cell spacing. 781 Chapter 20: Managing Data After you click OK, the table contains the field names in the first row, the data items in the sec- ond row, and a Repeat Region wrapped around the second row, as shown in Figure 20-4. Figure20-4 With the results from the Dynamic Table Data object, you simply change the basic table formatting and the table headings, and you’re done. Applying a Repeat Region Repeat Region is one of the most frequently used server behaviors. In this Technique, you apply a Repeat Region server behavior to a previously created table row so that multiple data records can be displayed. 1. From the Techniques - Dynamic site (established in Chapter 17), expand the 20_Managing_Data folder and open the managing_data_start file for your server model. If you followed the Technique in the previous chapter, you’ll recognize this page. There is, however, one small difference: an additional recordset has been added to illustrate an important concept. 2. Place your cursor in the row of dynamic data by selecting any of the inserted fields, such as rsAgents.agentPhone. 3. From the Tag Selector, choose the <tr> tag. Choosing the <tr> tag ensures that the entire row of data will be repeated. 4. From the Server Behaviors panel, click Add (+) and select Repeat Region from the list. continued 782 Part IV: Incorporating Dynamic Data 5. When the Repeat Region dialog box opens, choose rsAgents from the Recordset list. You must be sure to select the recordset you want to repeat; if you were to leave the default choice, rsProperties, no additional data would be displayed because there is no dynamic data from that recordset in the table row. 6. Leave the default Show 10 Records At A Time option, and click OK. In Dreamweaver’s Design view, a thin border appears around the row along with a tab indicating the Repeat Region. 7. Test your newly applied server behavior by choosing View ➪ Live View. 8. Choose View ➪ Live View again to exit the mode. 9. Save your page. In the next Technique, you see how to add elements to the page to indicate which records are currently displayed and to navigate through a larger recordset. continued [...]... you can use either text or images as your controls Navigation links, such as those shown in Figure 20 -7, may include rollovers or other client-side behaviors 78 5 Part IV: Incorporating Dynamic Data Figure 20 -7 You can use images ​  ​ ith or without rollovers ​  ​o navigate through a recordset with Dreamweaver s —w —t Recordset Paging server behaviors Tip You don’t need to add an initial or placeholder... interactive controls into the hands of your Web application users Dreamweaver includes a set of server behaviors that enable users 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 is a do-it-yourself route, and the other lets Dreamweaver do most of the work for you To better understand how record... task in one operation by using a Dreamweaver Data object Depending on the Web application, you might find it quicker to insert and modify the Recordset Navigation Bar Data object rather than build your own step-by-step In the next chapter, you learn how you can use Dreamweaver s Live View to enhance your workflow and test your application under a variety of circumstances 79 1 Working with Dynamic Live View... category is used to invoke the page 5 When the code is executed, Dreamweaver reads the resulting HTML code 6 Finally, Dreamweaver displays the page with its built-in rendering engine If all goes well, a page with dynamic data placeholders (shown in Figure 21-1) is replaced with the actual data integrated into Live View (shown in Figure 21-2) If Dreamweaver encounters an error, it displays a message that... directory 79 7 Part IV: Incorporating Dynamic Data Figure 21-4 Right-click the Default Web Site in IIS and choose New ➪ Virtual Directory to open the Virtual Directory Creation dialog box Complete the dialog to add a new virtual directory If you’re connecting to a remote testing server, choose FTP from the Access list on the Testing Server category of the Site Definition dialog box When FTP is selected, Dreamweaver. .. less convenient it becomes Dreamweaver offers another route to controlling Live View variables: Live View settings The HTTP Request Settings dialog box, shown in Figure 21 -7, offers several important advantages over the query string: L L 802 The name/value pairs are easier to enter and maintain in a straightforward two-column table URL encoding is handled automatically by Dreamweaver; with query strings... Information and Enable Request Debugging Output options and click Submit Changes Figure 21-9 Enable the server debugging options in ColdFusion before using the Server Debug panel in Dreamweaver 8 07 Part IV: Incorporating Dynamic Data 2 In Dreamweaver, choose View ➪ Server Debug, and an additional toolbar with the following buttons appears directly above your document window: L Backward: Emulates the browser... Recordset Navigation Status 6 When the Recordset Navigation Status object opens, choose rsAgents from the Recordset list and click OK Dreamweaver inserts the dynamic code for your server model that, at runtime, will specify which records are currently being viewed 7 Now add the capability to move through a recordset Place your cursor in the second cell of the top 8 In the Recordset Navigation Bar... 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: L Dreamweaver s Repeat Region... show data only if a certain condition is met Dreamweaver handles these operations through a variety of Show Region server behaviors With these tools, you can also selectively display any element ​  ​ ext, graphic, or dynamic data ​  ​ n the —t —o current page L After you have the capability to display a portion of your data, you must navigate the recordset Dreamweaver s Recordset Paging server behaviors . the next chapter, you see how to begin managing your data in Dreamweaver. 77 7 Managing Data IN THIS CHAPTER Repeating data on a page Dreamweaver Technique: Applying a Repeat Region Selectively. commonly used Dreamweaver server behavior: Repeat Region. 77 8 Part IV: Incorporating Dynamic Data Repeating data After establishing a data source connection and defining a recordset, Dreamweaver. object, choose the desired data source from Dreamweaver s dialog box. The linking code is automatically written into the proper parameter for the object. 77 4 Part IV: Incorporating Dynamic Data Most