The Essential Guide to Dreamweaver CS4 with CSS, Ajax, and PHP phần 10 pptx

Generating the HTML source You can use any HTML structure to populate a Spry data set, as long as it presents data in a predictable manner. An existing table or list created in a static web page will do, but it’s far more efficient to use a recordset. Not only is the data in an organized structure, but also the HTML structure is automatically updated whenever changes are made to the data- base table. To speed things up, I have created a SQL file to create the ch19_gallery table and populate it with data. So, let’s create the table and generate the HTML source for the Spry data sets that will be used for the gallery. The following instructions show you how to load the ch19_gallery table into the dwcs4 database: 1. Load phpMyAdmin into your browser, and select the dwcs4 database. 2. Select the Import tab, and click the Browse button to navigate to ch19_gallery.sql in the extras folder of the download files for this book. If you’re using MySQL 4.0, choose ch19_gallery40.sql instead. 3. Click Go to import the SQL, which will create the ch19_gallery table and populate it with data. 4. Select the ch19_gallery table in the navigation frame on the left side of phpMyAdmin. The first few records should look like Figure 19-2. Figure 19-2. The ch19_gallery table contains details of photos of England and Japan. Each record contains the file name, dimensions, caption, and description of a pho- tograph, plus the category to which it belongs: JPN for Japan and ENG for England. The HTML data source that will be used for the Spry data sets will display the gallery images and thumbnails in plain tables. This exercise shows you how to bind the file names and dimensions of the images to <img> tags through the Bindings panel. 1. In Dreamweaver, create a new PHP page, and save it as gallery_eng.php in workfiles/ch19. Give the page the title Photo gallery: England. Generating the HTML tables Creating the database table THE ESSENTIAL GUIDE TO DREAMWEAVER CS4 WITH CSS, AJAX, AND PHP 846 2. Open the Recordset dialog box in Simple mode. Name the first recordset getENGphotos, use connQuery as the connection, and select the ch19_gallery table. 3. In the Columns field, select the Selected radio button, hold down the Ctrl/Cmd key, and select all the columns except p hoto_id a nd c ategory . 4. You want the recordset to contain only those records that belong to the ENG cate- gory, so select category from the Filter drop-down menu. Leave the drop-down menu alongside on the default equal sign. Then select Entered Value from the left drop-down menu in the next row. This lets you specify the desired value in the field alongside. So, type ENG in that field. The values entered in the Recordset dialog box should look like this: 5. Insert a table with two rows and four columns. Make the table 100-percent wide, and insert table headers in the first row like this: USING SPRY DATA SETS TO REFRESH CONTENT 847 19 6. The recordset contains the file names of photos in the images/gallery folder. Smaller thumbnail images have the same names as their larger equivalents and are stored in images/gallery/thumbs. To display the images, you need to bind the data in the recordsets to <img> tags. This is done through a combination of the Select Image Source dialog box and the Bindings panel. Position your cursor inside the first cell of the second row, and click the Image button on the Insert bar. Alternatively, select Insert ➤ Image, or press Ctrl+Alt+I/Opt+Cmd+I. 7. In the Select Image Source dialog box, navigate to the images/gallery/thumbs folder, select the value in the URL field, and cut it to your clipboard. Then select the Data sources radio button at the top of the dialog box, as shown in the follow- ing illustration. (In the Mac version of Dreamweaver, Data sources is a regular but- ton located at the bottom of the dialog box.) 8. When you select Data sources, the Select Image Source dialog box displays the recordsets and any other dynamic data sources available to the page. Expand the getENGphotos recordset, and select filename. This inserts the necessary PHP code in the URL field. However, you need to add the path to the thumbs folder, so position your cursor in front of the PHP code, and paste the value from your clipboard, as shown in the following illustration. Then click OK (Choose on a Mac) to close the dialog box. THE ESSENTIAL GUIDE TO DREAMWEAVER CS4 WITH CSS, AJAX, AND PHP 848 9. In the Image Tag Accessibility Attributes dialog box, activate the Alternate text drop- down menu to select <empty>, and click OK. 10. You now have a dynamic image placeholder in the first cell of the table. With the placeholder still selected, enter 80 i n the field labeled W a nd 54 i n the field labeled H in the Property inspector. This sets the width and height of the image. All the thumbnails are the same size, so you can insert explicit values. 11. Next, you need to create dynamic placeholders for the main images. Since the main images and thumbnails use the same file names, repeat steps 6–9, only this time your cursor should be in the second cell, and in step 7, navigate to the images/gallery folder. 12. The main images are different sizes, so you need to bind the width and height from the recordset. You can also use the caption as the alternate text. To do this, open the Bindings panel, and expand Recordset (getENGphotos). With the dynamic image placeholder still selected in the second cell, select width from the getENGphotos recordset. Then activate the Bind to drop-down menu at the bot- tom of the Bindings panel, select img.width, and click the Bind button, as shown in Figure 19-3. This inserts PHP code in the image’s width attribute so that it uses the correct value from the recordset. 13. R epeat step 12, binding height from the recordset to img.height, and caption to img.alt. 14. Insert dynamic text placeholders for the caption and description columns in the third and fourth cells. Your page should now look like this: Figure 19-3. Use the Bindings panel to apply dynamic values to attributes of the selected tag. USING SPRY DATA SETS TO REFRESH CONTENT 849 19 15. Save gallery_eng.php, and click the Live View button to check that the data is being displayed correctly, as shown in Figure 19-4. THE ESSENTIAL GUIDE TO DREAMWEAVER CS4 WITH CSS, AJAX, AND PHP 850 Figure 19-4. The raw data is contained in an unstyled table. 16. If everything is OK, deactivate Live view, click inside the second row of the table, and select <tr> in the Tag selector at the bottom of the Document window. Apply a Repeat Region server behavior to display all records. 17. Select the whole table, and give it an ID by typing ENGdata into the field on the left side of the Property inspector. 18. Save gallery_eng.php, and test it in a browser. You should see a table with eight records displaying similar content to that shown in Figure 19-4. 19. Create another page called gallery_jpn.php. It should be identical to gallery_eng.php, except it should display the Japanese photos. In step 4, call the recordset getJPNphotos, and enter JPN in the field alongside Entered Value.In step 17, use JPNdata as the ID for the table. 20. Check your code, if necessary, against gallery_eng.php and gallery_jpn.php in examples/ch19. Now that your data is in a predictable structure, you can use the Spry Data Set wizard. Using the Spry Data Set wizard The way you create a Spry data set has been completely rethought in Dreamweaver CS4. The Spry XML Data Set and Spry Table buttons and menu commands have been replaced by a single option, Spry Data Set, which launches a wizard that takes you through the process of creating the data set in a visual and intuitive manner. It also creates the basic HTML and CSS to display the data set in a variety of formats. To use the Spry Data Set wizard, the data source must be in one of the following formats: HTML table: The table must have an ID. Data can be stored in either rows or columns. The wizard regards each table as a data container. HTML elements: The wizard can extract data stored in any HTML elements. The parent element (or data container) must have an ID, and the category or column that each child element belongs to needs to be clearly identifiable. This is usually done by assigning a class. For example, instead of building the tables in gallery_eng.php and gallery_jpn.php, you could put the same information in paragraphs and identify the thumbnails, images, captions, and descriptions with class names. This is probably the most cumbersome way of creating a data container. XML: You can use a static XML document or one generated dynamically from a database. The wizard takes you through three steps, as follows: 1. Selection of the data source 2. Data configuration 3. HTML layout You can omit the final step if you don’t want Dreamweaver to create HTML to display the data set. The first two steps are identical for every data set. The final step offers a number of different options. Let’s start by walking through the wizard to create a Spry data set and display it in a table. Displaying a data set in a Spry table The final step of the Spry Data Set wizard has options for setting classes on alternate rows of a Spry table. So, before diving into creating a Spry table, you need to do a little planning and decide how you want the table to look. The following options are available for setting CSS classes: Odd row class: This sets the styles for odd-numbered rows. Even row class: This sets the styles for even-numbered rows. Hover class: This determines how you want a row to look when the mouse hovers over it. Select class: This styles the currently selected row. All these classes are optional, and you can set them later in Code view, but it’s easier to create skeleton style rules first. I have created some simple styles in spry_table.css, which you can find in examples/ch19. The rules look like this: body { color:#000; background-color:#FFF; font-family:Verdana, Arial, Helvetica, sans-serif; } USING SPRY DATA SETS TO REFRESH CONTENT 851 19 th, td { padding:3px 10px; } th { cursor:pointer; } .odd { background-color:#EEE; } .even { background-color:#E8F2F8; } .hover { cursor:pointer; background-color:#B4C6DB; } .selected { color:#FFF; background-color:#999; } #details, #spryTable { float:left; font-size:85%; } #spryTable { width:350px; } #details { width:450px; margin:15px 0 0 30px; } dl { width:600px; font-size:85%; } The odd rows will have a light gray background, and the even rows will have a light blue one. Spry tables are interactive but don’t use <a> tags, so you need to change the cursor explicitly to look like a hand when the mouse pointer passes over a table row. Spry applies the setting for Hover class only over table rows, so you must create a separate rule to change the cursor for table headers. The color I have chosen for table rows when the mouse passes over them is dark blue, with white text on a dark gray background for the selected row. Figure 19-5 shows the simple Spry table and detail region that you’ll build in the next cou- ple of exercises. Clicking the Thumbnail or Caption column header reorders the rows according to which column you clicked. The main image and description are displayed in a Spry detail region floating alongside the table and are automatically updated depending on the currently selected row—all without the need to refresh the page. THE ESSENTIAL GUIDE TO DREAMWEAVER CS4 WITH CSS, AJAX, AND PHP 852 Figure 19-5. A Spry table can be sorted and display related information in a detail region without reloading the page. This exercise shows you how to create a Spry sortable table to display selected columns from a data set. The instructions form the basis for creating any Spry data set. They assume you created the ch19_gallery table and gallery_eng.php in the previous exercises. If you don’t have a copy of gallery_eng.php, use gallery_eng.php in examples/ch19. 1. Save gallery_eng.php as spry_table.php in workfiles/ch19, and attach spry_table.css in the examples/ch19 folder (attaching a style sheet was covered in Chapter 4). 2. Click the Spry Data Set button in the Spry tab of the Insert bar, as shown in the fol- lowing screenshot, or choose Insert ➤ Spry ➤ Spry Data Set. Creating a sortable table USING SPRY DATA SETS TO REFRESH CONTENT 853 19 As shown in the preceding screenshot, there are five options: Select Data Type: The drop-down menu offers a choice of HTML and XML. This always defaults to HTML. Data Set Name: Dreamweaver automatically populates this with ds1, ds2, and so on. As with recordsets, it’s better to choose a more descriptive name. The value inserted here is used as a JavaScript variable, so it must not begin with a num- ber, and it cannot contain any spaces, hyphens, or other punctuation apart from the underscore(_). Detect: This is displayed only when Select Data Type is set to HTML. It determines the HTML structures that the wizard uses to detect the data source. The default is Tables. The other options are Divs, Lists, and Custom. Specify Data File: Use the Browse button to navigate to the file that contains the data source. This can be either an external file or the current file. Design time feed: This option caters for the situation where the actual data file is generated dynamically and not available on the development computer. Clicking this link displays a dialog box where you can specify a static file that contains dummy data in the same format as the actual data file. Enter dsPhotos in the Data Set Name field, and use the Browse button to select the current file, spry_table.php. The Data Selection field of the wizard should display the image of Buckingham Palace and St James’s Park, together with its thumbnail, caption, and description. 4. To select the data to be used in the data set, you need to select a data container, in other words, the table you created earlier. There are two ways of doing this. Either you can click the yellow right-facing arrow at the top-left of the data container in the Data Selection field or you can select its name from the Data Containers drop- down menu at the top-right of the Data Selection field. Use either method to select the ENGdata table. The wizard should now look like Figure 9-6. The Data Selection field shows a visual representation of the data set, while the Data Preview field shows the raw data. THE ESSENTIAL GUIDE TO DREAMWEAVER CS4 WITH CSS, AJAX, AND PHP 854 3. This launches the Spry Data Set wizard (see Figure 19-6). When it first loads, the wizard looks like a vast empty space. For it to spring to life, you need to specify the data source in the fields at the top of the dialog box. Figure 19-6. The first step of the Data Set Wizard selects data from the original source. USING SPRY DATA SETS TO REFRESH CONTENT 855 19 5. Click Next to move to the next step in the wizard (see Figure 19-7). This is where you configure the data. The Advanced data selection checkbox at the bottom left of the wizard is used only when you use other HTML structures to define the data con- tainer. Selecting the checkbox enables the Row Selectors and Column Selectors fields, where you list the HTML elements and class names that identify the rows and columns of the data set. [...]... Next to move to the second step of the wizard As you can see in Figure 19-16, it’s almost identical to the second step for an HTML source You can’t change the column names, and the options not to use the first row as headers and switch rows to columns are not relevant to XML The other options are the same 7 Set Type to number for file/@height and file/@width; and for description, set Type to html Then... so there is no conflict As you’ll see later in this chapter, you can use Spry to change the data source dynamically 4 Click Next to move to the second step of the data set wizard 5 Select the Description column, and set the value of Type to html Leave the other options at their default settings, and click Next to move to the final step of the wizard 6 Select the Insert master/detail layout radio button,... box This takes you back to the Spry Data Set wizard If you’re unsure about any of the settings, click Previous to return to the earlier steps of the wizard, and make any changes Otherwise, click Done to close the wizard and create the Spry data set and its associated Spry table 10 Save spry_table .php, and click OK to copy the Spry dependent files to your Spry assets folder The page should now look... drop-down menu, and the value of source is stored in the value attribute of the corresponding tag To display the correct set of photos, you need to change the value of dsPhotos.gallery whenever an option is selected in the drop-down menu You do this by creating a function that resets and refilters the dsPhotos data set and by attaching the function to the onchange attribute of the menu,... spry_table .php 1 In spry_table .php, click anywhere in the second row of the table The and tags in the Tag selector at the bottom of the Document window are high- lighted in orange, indicating that they contain Spry data set code 2 Select the tag, right-click, and select Set ID from the context menu Set the ID to spryTable This is one of the style rules defined in spry_table.css It floats the. .. Spry detail region gives you access to the currently selected element within the data set In this case, you’re going to display the main image and description of whichever thumbnail or caption the user clicks in the table The remaining options in the dialog box let you choose the data set if there’s more than one on the page and whether to wrap the region around the current selection 860 U S I N G... be sortable, select the column name and deselect the checkbox at the bottom of the Columns area The remaining options set the CSS classes discussed earlier and let you update one or more detail regions when a row is clicked The table in Figure 19-5 displays just the Thumbnail and Caption columns, so highlight the other two and delete them Set the class drop-down menus to match the classes in spry_table.css... of the items is clicked in the list on the left of the page Since Caption is used in the Master Columns list, select Caption in the Detail Columns field, and click the minus button to remove it 10 This leaves Image and Description in the Detail Columns field You can select how the content will be displayed by selecting a value from the Container Type drop-down menu at the bottom of the dialog box The. .. the name of the data set to use The opening tag of the definition list on line 58 contains the spry:repeatchildren property, which is also set to dsPhotos This tells the browser to loop through the dsPhotos data set for each child element of the tag—in other words, the and tags Lines 59–60 insert {Caption} and {Description} data objects in the and tags, respectively Dreamweaver. .. (row['Category'] == dsPhotos.gallery) { return row; } return null; } dsPhotos.filter(chooseSet); 6 Save gallery_select .php, and test it in a browser Only the photos of Japan should be displayed The photos of England have been filtered out of the data set, but they’re not displayed in the data container either 7 Change the default value of dsPhotos.gallery in the third line of code to 'ENG' Save the page, and view . alongside the table and are automatically updated depending on the currently selected row—all without the need to refresh the page. THE ESSENTIAL GUIDE TO DREAMWEAVER CS4 WITH CSS, AJAX, AND PHP 852 Figure. more than one on the page and whether to wrap the region around the current selection Adding an updatable detail region THE ESSENTIAL GUIDE TO DREAMWEAVER CS4 WITH CSS, AJAX, AND PHP 860 or to replace. row in the table. The dialog box should now look like this: THE ESSENTIAL GUIDE TO DREAMWEAVER CS4 WITH CSS, AJAX, AND PHP 858 9. Click OK to close the dialog box. This takes you back to the Spry