Introduction to Rich Controls

I l @ ve RuBoard

Unlike ASP.NET list controls, which all inherit from ListControl and therefore share specific common functionality, the rich controls discussed in this chapter are inherited from WebControl , so they have very little in common with one another except for providing more advanced functionality than intrinsic or list controls. We'll begin by discussing AdRotator and the changes to ad rotation since ASP 3.0.

Working with AdRotator

You'll recall that previous versions of ASP provided ad rotation functionality. However, as with all the other Active Server Components provided by Microsoft, it was in the form of a scriptable COM object used from within <%...%> tags, as shown in Listing 7.1.

Listing 7.1 Declaring the AdRotator control.
 <% Dim oAdRotator Set oAdRotator = Server.CreateObject("MSWC.AdRotator") Dim strAdHTML StrAdHTML = oAdRotator.GetAdvertisment("ads.txt") Response.Write(strAdHTML) %> 

In ASP.NET, ad rotation now gets a declarative syntax for greater simplicity. The preceding code simply becomes

 <asp:AdRotator id="oAdRotator" AdvertisementFile="ads.xml" runat="Server" /> 

Table 7.1 shows a summary of the properties and events of the AdRotator control. Please take a moment to review them before we begin with an example.

Table 7.1. Properties and Events of the AdRotator Control
Name Item Description
AdCreated Event Raised when a new advertisement is created but before the control is rendered
AdvertisementFile Property Gets or sets path to the XML file containing configuration data for advertisements
KeywordFilter Property Gets or sets the keyword used to match advertisements to categories
Target Property Gets or sets the frame in which to load the URL of an ad when clicked

Let's begin by looking at an example of the AdRotator in action. We declare the AdRotator control as shown in Listing 7.2.

Listing 7.2 Declaring the AdRotator control (6ad01.aspx).
 <%@ Page language="vb" debug="true"%> <html> <head> <title>Chapter 7: ASP.NET Rich Controls</title> </head> <body>     <form runat="server">         <asp:AdRotator id="BooksRotator"              AdvertisementFile="books_ads.xml" runat="Server" />     </form> </body> </html> 

Figure 7.1 shows the output from Listing 6.2.

Figure 7.1. The AdRotator control in action.

If you're following along by running the examples in your browser, go ahead and refresh the page two or three times to see the ad rotation. When using the AdRotator control, the source, hyperlinks , and frequency of the ads are declared externally in the AdvertisementFile . Table 7.2 defines the properties for each Ad element found in this configuration file.

Table 7.2. Element Definitions for the AdvertisementFile
Name Type Description
AlternateText Element The text for the ALT tag for the image
ImageUrl Element The absolute or relative URL to the image to be displayed
Impressions Element The weight of the ad in the rotation frequency
Keyword Element The category for the advertisement when using the KeywordFilter property of the AdRotator
NavigateUrl Element The URL to load when the ad is clicked

In this example, we've named the AdvertisementFile "books_ads.xml". Listing 7.3 contains the XML source of the file.

Listing 7.3 The books_ads.xml AdvertismentFile .
 <?xml version="1.0" encoding="utf-8" ?>     <Advertisements>        <Ad> <ImageUrl>/ASPNETByExampleVB/ch07/ads//ch07/ch07/ads/asp3.jpg</ImageUrl>           <NavigateUrl>                 http://www.mcp.com/que/detail_que.cfm?item=0789722402           </NavigateUrl>           <AlternateText>Active Server Pages 3.0 By Example</AlternateText>           <Keyword>web</Keyword>           <Impressions>50</Impressions>        </Ad>        <Ad> <ImageUrl>/ASPNETByExampleVB/ch07/ads//ch07/ch07/ads/html.jpg</ImageUrl>           <NavigateUrl>                 http://www.mcp.com/que/detail_que.cfm?item=0789722283           </NavigateUrl>           <AlternateText>HTML By Example</AlternateText>           <Keyword>web</Keyword>           <Impressions>50</Impressions>        </Ad>        <Ad> <ImageUrl>/ASPNETByExampleVB/ch07/ads//ch07/ch07/ads/linuxprogramming.jpg </ImageUrl>           <NavigateUrl>                 http://www.mcp.com/que/detail_que.cfm?item=0789722151           </NavigateUrl>           <AlternateText>Linux Programming By Example</AlternateText>           <Keyword>Linux</Keyword>           <Impressions>50</Impressions>        </Ad>        <Ad> <ImageUrl>/ASPNETByExampleVB/ch07/ads//ch07/ch07/ads/linuxsocket.jpg</ImageUrl>           <NavigateUrl>                 http://www.mcp.com/que/detail_que.cfm?item=0789722410           </NavigateUrl>           <AlternateText>Linux Socket Programming By Example</AlternateText>           <Keyword>Linux</Keyword>           <Impressions>50</Impressions>        </Ad>        <Ad>           <ImageUrl>/ASPNETByExampleVB/ch07/ads/java2.jpg</ImageUrl>           <NavigateUrl>                 http://www.mcp.com/que/detail_que.cfm?item=0789722666           </NavigateUrl>           <AlternateText>Java 2 Programming By Example</AlternateText>           <Keyword>web</Keyword>           <Impressions>50</Impressions>        </Ad>        <Ad>           <ImageUrl>/ASPNETByExampleVB/ch07/ads/xml.jpg</ImageUrl>           <NavigateUrl>                 http://www.mcp.com/que/detail_que.cfm?item=0789722429           </NavigateUrl>           <AlternateText>XML By Example</AlternateText>           <Keyword>web</Keyword>           <Impressions>50</Impressions>        </Ad>     </Advertisements> 

As you can see, in this example we are rotating ads of thumbnails of other books in this Que series. The ImageUrl element in each ad definition uses a relative URL for the image source, but we could just as easily have used an absolute URL to point to the original file on the Que Web site. For each ad, the NavigateURL actually does use an absolute URL to link to the product page for each book on the Web site. By setting the AlternateText value, we set the text the browser should display if the image is unavailable. This value is simply written to the ALT attribute in the HTML img tag output by the AdRotator control. This value is also displayed as a tooltip in most modern browsers.

The last two elements in the definition file provide the real heart of the AdRotator functionality: the ability to change the frequency and conditions of the ad rotation. The Keyword element sets the category for the advertisement. This category assignment determines if the ad is placed into the rotation, depending on whether it matches the corresponding KeywordFilter property of the AdRotator control. This allows us to filter ads on a page-by-page basis based on this category setting. We can also give a higher priority to some ads by setting the Impressions value. This value weights the frequency of each ad in the rotation proportionally, based on these values. The higher the Impressions value for a particular ad, the more often in proportion to the other ads it will appear in the ad rotation.

Suppose we are building an ad-supported Web-based discussion group for developers that includes banners at the top of each page. We would most probably want to display relevant advertisements for each forum, so let's expand the previous example by setting the KeywordFilter property for the AdRotator control (see Figure 7.2):

 <asp:AdRotator id="BooksRotator" AdvertisementFile="books_ads.xml"     runat="Server" KeywordFilter="web" /> 
Figure 7.2. Filtering ads by keyword using the AdRotator control.

Now when we refresh the browser, the only advertisements rendered are those that match the "web" keyword setting in the AdvertisementFile . Now suppose that each of these ads for development books were linked to their corresponding product pages at Amazon.com, FatBrain.com, or some other online bookseller. We might want to give higher priority to the ads for those products for which we make the highest margin. As mentioned earlier, we would simply adjust the Impressions value for each ad in the XML file. Let's modify the AdvertisementFile as shown in Listing 7.4.

Listing 7.4 The modified books_ads.xml AdvertisementFile .
 <?xml version="1.0" encoding="utf-8" ?>     <Advertisements>        <Ad>           <ImageUrl>/ASPNETByExampleVB/ch07/ads/asp3.jpg</ImageUrl>           <NavigateUrl>                 http://www.mcp.com/que/detail_que.cfm?item=0789722402           </NavigateUrl>           <AlternateText>Active Server Pages 3.0 By Example</AlternateText>           <Keyword>web</Keyword>           <Impressions>10</Impressions>        </Ad>        <Ad>           <ImageUrl>/ASPNETByExampleVB/ch07/ads/html.jpg</ImageUrl>           <NavigateUrl>                 http://www.mcp.com/que/detail_que.cfm?item=0789722283           </NavigateUrl>           <AlternateText>HTML By Example</AlternateText>           <Keyword>web</Keyword>           <Impressions>1</Impressions>        </Ad>        <Ad>           <ImageUrl>/ASPNETByExampleVB/ch07/ads/linuxprogramming.jpg</ImageUrl>           <NavigateUrl>                 http://www.mcp.com/que/detail_que.cfm?item=0789722151           </NavigateUrl>           <AlternateText>Linux Programming By Example</AlternateText>           <Keyword>Linux</Keyword>           <Impressions>1</Impressions>        </Ad>        <Ad>           <ImageUrl>/ASPNETByExampleVB/ch07/ads/linuxsocket.jpg</ImageUrl>           <NavigateUrl>                 http://www.mcp.com/que/detail_que.cfm?item=0789722410           </NavigateUrl>           <AlternateText>Linux Socket Programming By Example</AlternateText>           <Keyword>Linux</Keyword>           <Impressions>1</Impressions>        </Ad>        <Ad>           <ImageUrl>/ASPNETByExampleVB/ch07/ads/java2.jpg</ImageUrl>           <NavigateUrl>                 http://www.mcp.com/que/detail_que.cfm?item=0789722666           </NavigateUrl>           <AlternateText>Java 2 Programming By Example</AlternateText>           <Keyword>web</Keyword>           <Impressions>1</Impressions>        </Ad>        <Ad>           <ImageUrl>/ASPNETByExampleVB/ch07/ads/xml.jpg</ImageUrl>           <NavigateUrl>                 http://www.mcp.com/que/detail_que.cfm?item=0789722429           </NavigateUrl>           <AlternateText>XML By Example</AlternateText>           <Keyword>web</Keyword>           <Impressions>1</Impressions>        </Ad>     </Advertisements> 

Now save the file and refresh your browser. You should notice that Active Server Pages 3.0 By Example appears ten times more often than the other titles in the rotation.

Using the AdCreated Event

In all the examples so far in this chapter, we've used the AdRotator control to render ads consisting of images only. Often, however, Internet advertising consists of a banner ad and a hyperlink or descriptive caption. One way to accomplish this would be to couple the AdRotator control with a Hyperlink control, but how do we set the NavigateUrl property of the hyperlink for each ad dynamically? We do this by handling the AdCreated event of the AdRotator control, as shown in Listing 7.5.

Listing 7.5 Declaring the AdRotator control (6ad03.aspx).
 <%@ Page language="vb" debug="true"%> <html> <head> <title>Chapter 7: ASP.NET Rich Controls</title> <script language="vb" runat="server">     Sub BooksRotator_AdCreated(sender as Object, e as AdCreatedEventArgs)         AdLink.NavigateURL = e.NavigateURL     End Sub </script> </head> <body> <form runat="server">     <p align="center">     <asp:AdRotator id="BooksRotator"          AdvertisementFile="books_ads.xml" runat="Server"          keywordfilter="web" onadcreated="BooksRotator_AdCreated" />     <br>     <asp:hyperlink id="AdLink" runat="Server"          Text="ClickHere" font-names="Arial" font-size="8pt"/>     </p> </form> </body> </html> 

Figure 7.3 shows the output from Listing 6.5.

Figure 7.3. Creating captions by handling the AdCreated event.

In this example, we've added a Hyperlink control and the BooksRotator_AdCreated event handler to the Web form. Note that the type of the second argument for this event handler is AdCreatedEventArgs instead of the usual EventArgs as with most Web control event handlers. Table 7.3 defines the properties for the AdCreatedEventArgs class.

Table 7.3. Properties of the AdCreatedEventArgs Class
Name Type Description
AdProperties Property Gets a dictionary object with all the properties from the AdvertisementFile for the created ad
AlternateText Property Gets or sets the text for the ALT tag for the image
ImageUrl Property Gets or sets the URL for the created ad
NavigateUrl Property Gets or sets the URL to load when the created ad is clicked

In this example, we simply copy the URL for the ad to the hyperlink control using the NavigateUrl property of the AdCreatedEventArgs class. Now we have a linked caption for each ad in the rotation. But suppose we wanted to change the text of the hyperlink to be more descriptive. Perhaps we would like to include the title of the book in the caption. Although we could use the AlternateText property of the AdCreatedEventArgs class to obtain this value, let's take another approach that will introduce the extensibility built into the AdRotator control.

The key to tailoring the AdRotator control for your own purpose is found in the AdProperties property of the AdCreatedEventArgs class. As defined in Table 7.3, this read-only property returns a dictionary object representing all the properties of the currently created ad as defined in the external AdvertisementFile . That means that we can define custom elements in this file and retrieve them at runtime via AdProperties . Listing 7.6 shows a snippet from the AdvertisementFile and how we would define a custom Caption element for each ad.

Listing 7.6 Using custom elements in the AdvertisementFile .
 <Ad>     <ImageUrl>/ASPNETByExampleVB/ch07/ads/asp3.jpg</ImageUrl>     <NavigateUrl>           http://www.mcp.com/que/detail_que.cfm?item=0789722402     </NavigateUrl>     <AlternateText>Active Server Pages 3.0 By Example</AlternateText>     <Keyword>web</Keyword>     <Impressions>10</Impressions>     <Caption>Active Server Pages 3.0 By Example</Caption>     <PercentOff>10</PercentOff> </Ad> 

Now let's change the event handler on the Web form to retrieve these two new values and dynamically change the caption for each ad in the rotation. Listing 7.7 shows the new code.

Listing 7.7 Dynamic captions with the AdRotator control (6ad04.aspx).
 <%@ Page language="vb" debug="true"%> <html> <head> <title>Chapter 7: ASP.NET Rich Controls</title> <script language="vb" runat="server">     Sub BooksRotator_AdCreated(sender as Object, e as AdCreatedEventArgs)         AdLink.NavigateURL = e.NavigateURL         AdLink.Text = "Save " & e.AdProperties("PercentOff") & _              "% on " & e.AdProperties("Caption")     End Sub </script> </head> <body> <form runat="server">     <p align="center">     <asp:AdRotator id="BooksRotator"         AdvertisementFile="books_ads.xml" runat="Server"         keywordfilter="web" onadcreated="BooksRotator_AdCreated" />     <br>     <asp:hyperlink id="AdLink" runat="Server"         Text="ClickHere" font-names="Arial" font-size="8pt"/>     </p> </form> </body> </html> 

Figure 7.4 shows the output from Listing 7.7.

Figure 7.4. Descriptive captions by using custom AdvertisementFile elements.

Notice that we now build the caption dynamically and not only include the book title, but we also include the savings the customer can expect. These are but two simple examples of custom properties you can define for your ads to customize your implementation of the AdRotator control. I'm sure that you will find this extensibility useful in your own projects as you define custom attributes for your advertisements.

Up to this point in this chapter, you have seen how the AdRotator control simplifies ad rotation in ASP.NET. Now let's take a look at another new control and how it adds a great deal of functionality not inherent in previous versions of ASP.

I l @ ve RuBoard


Asp. Net. By Example
ASP.NET by Example
ISBN: 0789725622
EAN: 2147483647
Year: 2001
Pages: 154

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net