Creating the View Catalog Page

Team-Fly

---

	Macromedia® DreamWeaver® MX Unleashed By Matthew Pizzi, Zak Ruvalcaba
	Table of Contents
	Chapter 28.  Working with Dynamic Data

---

The View Catalog page of the Web store is the heart of the application. This is where users will be able to come to view the items that currently reside in the catalog and place any item that they choose into their shopping cart. Before you begin creating the application, take a look at the Web store database, which should reside within the Database folder of the project. Figure 28.1, which is toward the beginning of the chapter, shows the two tables that this section concerns itself with the products and inventory tables.

Figure 28.2 shows the products table. It contains the product information on what the Web store will sell DVDs. It also contains the full path of the images, cost information, and a brief description of each item up for sale. Figure 28.3 shows the inventory table, which contains all the quantities for each item.

You may be asking yourself why there aren't any product names within the inventory table. Figure 28.4 shows the relationship between the products table and the inventory table. Remember, the relationship is created with the ProductID between the two tables; this is the reason for the ProductID within the inventory table rather than the simple ProductName.

NOTE

Technically the quantity field could reside within the products table. The reason for separating the products from the quantities is simplicity and scalability. If in the future you wanted to carry clothing, you could potentially have the same shirt in both blue and green. Because shirt quantities would vary, a separate table to handle the quantities solves the dilemma.

Now that you have an overview of the database, you are ready to begin extracting data from it. The next few sections will cover the following:

• DataSets

• Dynamic Elements

• Paging

• Conditionals

• Regions

• Commands

• DataGrids

• DataLists

Creating a New DataSet

If you are familiar with traditional data storage and retrieval models in ASP, you are familiar with the recordset. The recordset acts as a virtual table to store information that is retrieved from the database. DataSets are no different. To better understand DataSets is to better understand ADO.NET.

ADO.NET is a set of tools and namespaces that provide access to data stores regardless of the source. Three layers make up ADO.NET:

• The Data Store The Data Store represents the physical location of your data. This can be an OLE database, a SQL database, or an XML file.

• The Data Provider The Data Provider makes up the connection and the command that make up the virtual table that your data will be stored in.

• The DataSet The DataSet is the virtual table and relationships that make up your data.

Now that you know the makeup of ADO.NET, you can begin to plug in all the different aspects that make up your application. Your data store consists of an OLE database in Access. In the previous chapter, you learned how to create a connection within an ASP.NET model. Now let's jump into creating the commands and working with DataSets. To begin creating a DataSet, open the viewcatalog.aspx file and follow these steps:

Begin creating the new DataSet by selecting DataSet from the Server Behaviors panel, as shown in Figure 28.34.

Figure 28.34. A new DataSet can be created by selecting it from the Server Behaviors panel.

With the DataSet dialog box available, you are now able to select various options including the DataSet name, defining the connection, creating the command, and passing in any parameters if that is needed. Figure 28.35 shows the configuration for the View Catalog page. To create the command, you can either type it in manually, create it within Access and copy it over, or create it by interacting with the database items at the bottom of the dialog box and selecting the appropriate SQL buttons.

Figure 28.35. Configure your DataSet appropriately.

When you've finished configuring the command, you can test the DataSet by selecting the Test button. Figure 28.36 shows the results.

Figure 28.36. Testing the DataSet returns the complete list of items.

Click OK in the Test dialog box and click OK within the DataSet dialog box.

You can view all the fields within the DataSet by expanding it from the Bindings panel. Figure 28.37 shows the results of the Dataset.

Figure 28.37. Expanding the DataSet enables you to see all the fields that it contains.

Working with Dynamic Elements

Now that you have a DataSet clearly defined, your next step is to get the information from the DataSet to your application. Dreamweaver MX's Server Behavior and Binding panels provide the capabilities you need to get started producing dynamic elements that are centralized within the database but exposed via the application.

Dynamic Text

The first step to creating a truly dynamic application is to make all your text elements as dynamic as possible. That is, allowing all your company's valuable information to reside within the database. To start creating dynamic text, begin by creating a table that will serve as the means of organizing the data output.

If you downloaded the support files for this section, you'll notice that the table structure has been created for you. You can begin creating dynamic text by following the steps outlined next:

1. Drag each item from the Bindings panel to its position within the table, as shown in Figure 28.38.

   Figure 28.38. Drag each item into its respective position within the table.

   

2. Save the file and run it in the browser. Notice how the first record in the database is shown within the cells. The next section discusses paging, which will allow you to cycle through each record.

Dynamic Images

Now that you have created dynamic text within your application, you're ready to begin adding images. The images that will be added here will not be the typical static images that you have used throughout the book; rather, they will be dynamic. To begin adding dynamic images, follow these steps:

1. Place your cursor in the cell designated for the image.

2. Select Image from the Insert menu.

3. Near the top of the Select Image Source dialog box, you can select from the file system or from a data source. Select Data Source.

4. Figure 28.39 shows how you are able to select the ImagePath from the DataSet. Select OK.

   Figure 28.39. Select ImagePath from the DataSet to create a dynamic image.

   

5. An image icon will be inserted for you, signifying that a dynamic image exists.

6. Save the file and view it in the browser. The image for the DVD should now appear as shown in Figure 28.40.

   Figure 28.40. The image is dynamically placed based on the path specified within the database.

   

DataSet Paging

Now that you've seen just how easy it is to place dynamic content within your site, you'll probably want to begin adding paging features. Paging exposes all records within a pagination system, not unlike those of a book. For every press of a button, your user can advance to the next record or, conversely, return to a previous record. Dreamweaver MX's pagination behaviors include the following:

• Move to First Record Returns the user to the first record of the DataSet.

• Move to Previous Record Returns the user back one record.

• Move to Next Record Advances the user one record forward.

• Move to Last Record Advances the user to the last record in the DataSet.

To begin adding pagination features to your site, follow these steps:

1. Place your cursor just below the table or near the location where you want to add the paging navigation bar.

2. Select Move to Previous Record from the DataSet Paging submenu of the Server Behaviors tab.

3. The Move to Previous Page dialog box appears, allowing you to choose the specific link to insert as well as the DataSet to cycle through. Select OK. The Previous link will show just below the table.

4. Repeat the action for the Next button. The result will be similar to Figure 28.41.

   Figure 28.41. Page through your DataSet by adding paging behaviors to your site.

   

5. Save your page and run it in the browser. Notice how you are now able to advance and move backward through each record.

Using Repeat Region

Although DataSet paging is the ideal model to strive for, at times, you might want to display all the records in the database at once. The Repeat Region behavior enables you to create a pattern of repeatable instances within your application. For instance, in the View Catalog Web Store example, a table was created to display the content for the image, name, description, and cost. Using the Repeat Region server behavior, you are able to maintain that structure while repeating the contents for every record within the database. To create a repeatable region, follow the instructions outlined next:

1. Highlight the table that you want to create the repeatable region for.

2. Select Repeat Region from the Server Behaviors panel.

3. Select the recordset you want to repeat and select OK.

4. Save your work and run it in the browser. The result will look similar to Figure 28.42.

   Figure 28.42. The Repeat Region server behavior allows all your records to be shown repeatedly down the page.

   

Display Record Count

As you allow users to cycle through your records, you may find that eventually you'll want to display some sort of message letting the user know what record they are on. This can be accomplished by simply displaying a numerical value for the record they've cycled to somewhere on the page. Dreamweaver MX includes a set of behaviors that allow you to do just that; they are known as Display Record Count. The Display Record Count server behaviors include the following:

• Display Starting Record Number Displays the first record number of the DataSet.

• Display Ending Record Number Displays the last record number of the DataSet.

• Display Total Records Displays all the records of the DataSet. Typically this is a static number unless items are added to the database.

• Display Current Page Number Displays the current record number of the DataSet. This number will change as the user pages through the records.

Like all the other behaviors that you have been working with, the Display Record Count behaviors can be inserted into your application very easily. To insert the Display Current Page Number behavior into the viewcatalog.aspx page, simply follow these steps:

1. Place your cursor somewhere on the page where the user is most likely to look for a record count. A good place is somewhere near the paging navigation bar.

2. Select the Display Current Page Number behavior from the Display Record Count submenu as shown in Figure 28.43.

   Figure 28.43. Insert the Display Current Record Count behavior.

   

   • Save your work and run it in the browser. The results will be similar to Figure 28.44 in that the movie The Abyss is the first record and the number 1 is shown to the user next to the navigation bar.

     Figure 28.44. The current record number will appear, indicating the number of the record the user is on.

     

Showing Specific Regions

Now that you have added the capability to cycle to the end of the DataSet and back, consider the following problem: Users click Next until they get to the last record and then they are abruptly stopped. They keep clicking Next but nothing happens. The problem is that the user has reached the end of the DataSet and they cannot go any further, but the user doesn't know that. Dreamweaver MX provides functionality in the form of a group of Show Region behaviors that alert users that they have reached the end of the DataSet. The complete list of Show Region behaviors are as follows:

• Show if DataSet Is Empty This behavior can be useful to alert a user that an empty result was returned from the database.

• Show if DataSet Is Not Empty Use this behavior when you want to alert the user that results were indeed returned from the database.

• Show if First Page If the user is on the first record, you can show a message.

• Show if Not First Page As the user cycles through the records, you can provide a message. When the user is on the first record, a message can be displayed.

• Show if Last Page If the user is on the last record, you can provide a message.

• Show if Not Last Page As the user cycles through the records, you can provide a message. When the user is on the last record, a message can be displayed.

To add a Show Region behavior to your application, follow these steps:

1. Place the text This is the first item just below the table or where you want the text to appear.

2. With the text highlighted, select the server behavior Show If First Page from the Show Region submenu, as shown in Figure 28.45.

   Figure 28.45. Add the Show Region behavior to the text message you want displayed.

   

3. Select the DataSet to use and click OK.

4. Save the page and run it in a browser.

You will receive a message immediately when the page is loaded, because the record you are dealing with is indeed the first record. As you cycle through the records, the message will disappear.

Working with DataGrids

One of the most important and feature-rich controls included with Dreamweaver MX's ASP.NET integration is the DataGrid control. The DataGrid control, similar to the Repeat Region behavior and the DataSet Paging behaviors, enable you to display numerous records on the page while allowing pagination functionality. For instance, you could display every five records within the dataset while allowing paging to the next set of five records. As a footer, you could display a list of numbers that corresponded with every group of five records to display. As the user selects a new number, a new group of records is displayed. The DataGrid's flexibility does not end there; DataGrids also allow for column sorting, editing, and custom commands.

NOTE

Although this section provides a brief overview of the static features of the DataGrids, be aware that the DataGrid offers more than simple display functionality, most of which will be covered in more detail in the next chapter.

Some of the column types that are available with the DataGrid are listed next:

• Simple Data Field The Simple Data Field is also known as the Bound Column in ASP.NET. This column lets you specify which data source field will be displayed and the data format that the field will use.

• Free Form The Free Form column is also known as the Template Column in ASP.NET. The Free Form column lets you insert HTML text and server controls to create true custom designs.

• Hyperlink The Hyperlink column lets you insert text that will be hyperlinked. The typical use for this is allowing users to view basic information but allowing them to link within a column to view more detailed information within a separate page.

• Edit, Update, Cancel Buttons In ASP.NET, this column is called the Edit Command Column. The Edit, Update, and Cancel buttons allow you to perform inplace edits of your text without redirecting a user to another page. When this page is rendered, the Edit button is visible. When the user selects the Edit button, it is replaced by an editable control along with Update and Cancel buttons to update the text to the database.

• Delete Buttons The Delete button enables users to delete the row that they select.

Adding a Simple DataGrid

Now that you know what a DataGrid is, let's create a simple DataGrid for the Web Store application. For the DataGrid, follow the steps outlined below:

1. Start with a new viewcatalog.aspx page.

2. Place the cursor just below the text and select the DataGrid behavior from the Server Behaviors panel, as shown in Figure 28.46.

   Figure 28.46. Select the DataGrid behavior.

   

3. The DataGrid dialog box appears. Select all the options including ID, the DataSet you are creating the DataGrid for, how many rows you want to show at any one time, navigation options, and the specific columns you want to show within the DataGrid. The results should look similar to Figure 28.47.

   Figure 28.47. Enter all the information for the DataGrid.

   

4. Select OK.

5. The DataGrid will be inserted into your page, similar to Figure 28.48.

   Figure 28.48. The DataGrid does not reveal any information until it is viewed within a Web browser.

   

6. Save your file and run it in the browser. Figure 28.49 shows the results of what the DataGrid will look like after it is complete.

   Figure 28.49. The browser shows the result of the DataGrid.

   

Notice that the column headers, alternating rows, and backgrounds have colors prespecified. In the following section, you learn how to change these.

Customizing the DataGrid's Color Scheme

If you got the DataGrid to work correctly, you'll notice right away that it contains a smooth default color scheme for the column headers, backgrounds, and alternating rows. Although the color scheme that Macromedia chooses to use as a default is tasteful, it does not match the color scheme of the Web Store application. To change the color scheme of the DataGrid, follow these steps:

1. Switch to code view of the viewcatalog.aspx page.

2. Navigate down the page until you find the tags for HeaderStyle, ItemStyle, AlternatingItemStyle, FootStyle, and PagerStyle.

3. The colors that you will be interested in modifying are the BackColor and ForeColor attributes of the HeaderStyle tag and the BackColor attribute of the AlternatingItemStyle tag. Locate those attributes and change the colors to #FFFFFF for ForeColor, #003366 for the BackColor of the HeaderStyle, and #99CC00 for the BackColor of the AlternatingItemStyle. If you are having trouble locating the attributes, see Figure 28.50.

   Figure 28.50. Change the color scheme for the HeaderStyle and AlternatingItemStyle tags.

   

4. Save your work and run the page in a browser. The results should look similar to Figure 28.51. Notice the color scheme now matches that of the Web store.

   Figure 28.51. The color scheme will change to match the Web store's color scheme.

   

Hyperlinked Columns

As mentioned earlier, column types can be changed to different types, depending on what you are trying to accomplish. One of the several column types is that of a hyperlink. A hyperlinked column type allows the items that reside within that column to be hyperlinked to a different page. A good use for this is if you were creating a DataGrid for the simple reason of providing a brief description of a particular product. You could hyperlink the product name to allow the user to navigate to a page that provided a more detailed description of that product. To create a hyperlinked column, follow the steps outlined next:

1. Double-click the DataGrid behavior to open the DataGrid dialog again.

2. Select the ProductName column and choose Hyperlink from the Change Column Type button, as shown in Figure 28.52.

   Figure 28.52. Change the column type of ProductName to Hyperlink.

   

3. The Hyperlink column dialog box will appear, enabling you to specify the text that you want hyperlinked within the column you choose and the page you want that link to navigate to when you click it. The results of the dialog box should coincide with Figure 28.53.

   Figure 28.53. Change the options in the Hyperlink dialog box.

   

   TIP

   By selecting ProductID as the data field that will be linked, you are essentially passing a parameter along the querystring to the Details page. The Details page should be designed so that it takes that value and adjusts the page accordingly.

4. Select OK in the Hyperlink dialog box.

5. Select OK in the DataGrid dialog box.

6. Save your work and run it in the browser. The result should look similar to Figure 28.54.

   Figure 28.54. All the product names are now linked and ready to navigate to their appropriate page.

   

7. Notice that the names within the ProductName column are now clickable. Clicking that item will link you to the itemdetails.aspx page that should be created for you and available for download at www.dreamweavermxunleashed.com.

If you are curious to see what the itemdetails.aspx page looks like, open it to see that it is basically the old version of the viewcatalog.aspx page.

Working with DataLists

The DataList behavior functions much like the DataGrid behavior in that it allows for multiple items to be shown at once. Unlike the DataGrid behavior, however, the DataList behavior lacks the power and flexibility that you get with the DataGrid control. Like a DataGrid behavior, you can control the way your DataList is displayed by modifying its templates. The available templates are as follows:

• Header The text and controls that will be rendered at the beginning of the list.

• Item The text and controls that will be rendered once for each row.

• Alternating Item Similar to the AlternatingItemStyle template for the DataGrid behavior, the Alternating Item template changes the background color of every other row within the DataList.

• Edit Item The Edit Item template controls the look of the DataList row when it is in edit mode. Typically, edit mode consists of controls like the Text Box control.

• Select Item The Select Item template controls the look of the DataList row when the user selects an item in the DataList.

• Separator The elements to render between each item.

• Footer The text and controls that will be rendered at the end of the list.

To add a DataList to your page, follow the steps outlined next:

1. Place your cursor where you want to insert the DataList and select DataList from the Server Behavior menu.

2. Figure 28.55 shows some of the options that you can add to your DataList, including ID, DataSet name, how many records to show at once, templates, and item organization.

   Figure 28.55. Set DataList options according to your viewing preferences.

   

3. Select the Header template and click the Add Data Field to Contents button. Figure 28.56 shows the dialog box that you will see.

   Figure 28.56. Select the DataField to view as the header.

   

4. Select OK. Figure 28.57 shows the code that is inserted into the contents of the template for the header.

   Figure 28.57. Code is inserted automatically for the Header template.

   

5. Repeat the steps for the Item template, adding Product Name, Description, and Cost. Also note that you may add HTML markup to caption the dynamic text that will be brought in. The ends of each line have <br> tags inserted to create a line break between captions. Figure 28.58 shows the result.

   Figure 28.58. Add the product name, description, and cost to the Item template.

   

6. Figure 28.59 shows how you can add a horizontal rule tag as the alternating item. This will add a separation between records.

   Figure 28.59. Add a horizontal rule to create a separation between records.

   

7. After you have finished modifying the templates, choose OK. The design view shows you a preliminary view of the results, as shown in Figure 28.60.

   Figure 28.60. The design view shows you what the finished product will look like.

   

8. Save your work and run it in a browser. The results are shown in Figure 28.61.

   Figure 28.61. The DataList results in a customized list of records.

   

---

Team-Fly

Top