asp:Feature

LANGUAGES: VB.NET

ASP.NET VERSIONS: 2.0

 

Playing in the ASP.NET Sandbox

The RSS Toolkit and CSS-friendly Control Adapters

 

By Julia Lerman

 

Since the release of .NET 2.0, the ASP.NET team has been churning out add-ins to be used with ASP.NET 2.0 and Visual Studio 2005. While some are fully supported, like the Web Application Project (created to appease frustrated developers moving from ASP.NET 1.x), and others, such as Atlas, are a peek into the not-so-distant future of ASP.NET, another set represents things that team members have been exploring. All of these can be found in the Sandbox area of the official ASP.NET Web site at http://www.asp.net/downloads/teamprojects.

 

In this article I ll provide a quick overview of two of these tools: the RSS Toolkit and the CSS-friendly Control Adapters.

 

RSS Toolkit

In February, ASP.NET team member Dmitry Robsman published on his blog the RSS Toolkit for ASP.NET 2.0. This was followed by a tutorial by Scott Guthrie on how to use it. In late March, the toolkit was tweaked based on feedback from users.

 

The RSS Toolkit simplifies embedding RSS feeds into your Web pages. Many people had been coming up with their own solutions, so it made sense to have something that could eventually be a standard part of ASP.NET. The toolkit provides an RssDataSource component that can be bound to the ASP.NET data controls. Figure 1 shows the RssDataSource control added to the toolbar, along with the RssHyperLink control (explained later in this article).

 

Figure 1: Add the RssDataSource and RssHyperLink components to the toolbar if you wish to use them on the design surface of your Web page.

 

The Toolkit can be placed into the GAC for use with many projects/sites, or added individually to a project via Add References. With just a few steps you can quickly place an RSS feed on your Web page:

1)     Add a data bound control (such as DataList) to your page.

2)     Choose the RssDataSource icon in the Select DataSource Wizard.

3)     Enter the URL of an RSS.

4)     Edit the DataList template to show the post title with hyperlink (details to follow).

5)     Set the MaxItems property of the RssDataSource so that the selected feed doesn t overwhelm your Web page or your resources if it happens to expose a large number of items.

 

Step 4 is important. By default, the DataList will show all the elements of the RSS feed; if you try to run the site at this point, you ll get an exception that says RssToolkit.RssElementCustomTypeDescriptor does not allow indexed access. As per Dmitry s ReadMe file instructions, you need to remove all those default fields and add the Title and URL fields. This can either be done manually in HTML or by dragging a HyperLink control into the Edit Template window, then configuring the HyperLink s DataBindings, as shown in Figure 2.

 

Figure 2: After hooking up a Data control to an RssDataSource with the feed configured, you can easily configure your control by adding a HyperLink control and then setting the Text and NavigateURL properties with this handy ASP.NET DataBindings wizard (by right clicking on the HyperLink control).

 

The resulting HTML will look like this:

 

<ItemTemplate>

  <asp:HyperLink ID="HyperLink1" runat="server"

   NavigateUrl='<%# Eval("link") %>'

   Text='<%# Eval("title") %>'>

  </asp:HyperLink>

</ItemTemplate>

 

There is another control, RssHyperLink, which lets you easily expose your own RSS feed. It requires creating an HttpHandler that derives from RssDataSource.GenericRssHttpHandlerBase and programmatically creating and populating the feed items. For example, you could create a feed by iterating through a DataReader or XML file populated with company news items. Or you could create a feed that contains links to pages in your Web site. Figure 3 shows a VB code listing for a handler that exposes key pages of the Vermont.NET User Group Web site. The NewItem function takes the link and title information and creates a new Channel Item for the feed. The example creates three such Channel Items.

 

<%@ WebHandler Language="VB" Class="VTdotNETRSS" %>

Imports System

Imports System.Web

Imports RssToolkit

Public Class VTdotNETRSS

  Inherits GenericRssHttpHandlerBase

  Protected Overrides Sub PopulateChannel _

    (ByVal channelName As String, ByVal userName As String)

       Channel("title") = "VTdotNETLinks"

      Channel("link") = "http:/www.vtdotnet.org"

      Channel("description") = _

       "Important Pages in the Vermont.NET web site"

      Channel.Items.Add(NewItem("Upcoming Meetings", _

       "http://www.vtdotnet.org/nextmeeting.aspx", _

       "All future scheduled meetings and directions"))

      Channel.Items.Add(NewItem("Past Meetings", _

       "http://www.vtdotnet.org/past_meetings.aspx", _

       "All previous meetings and related resources"))

       Channel.Items.Add(NewItem("Book Reviews", _

       "http://www.vtdotnet.org/bookreviews.aspx", _

       "Member book reviews"))

  End Sub

  Private Function NewItem(ByVal title As String, _

   ByVal link As String, ByVal description As String) _

    As GenericRssElement

      Dim item As New GenericRssElement

      item("title") = title

      item("description") = description

      item("link") = link

      Return item

  End Function

End Class

Figure 3: Exposing key pages of a user group s Web site.

 

Given that this is all in a file called VTdotNETRSS.ashx, anytime someone browses to that file, they will get the response shown in Figure 4.

 

Figure 4: The RSS feed exposed by the VTdotNETRSS feed.

 

The RssHyperLink control simplifies exposing this feed on your Web pages. In addition to the properties of a HyperLink control, it has a few other properties that are relevant to an RSS feed, such as ChannelName. Drop an RssHyperLink onto a page in your site, set the NavigateURL property to your RssHttp handler, and, after setting some other key properties, such as ChannelName and Text, visitors to your site can easily subscribe to your feed.

 

There is much more to the toolkit than the server controls. The API exposes a lot of functionality that you can tap into in your code. The ReadMe file that comes with the toolkit lists examples for many scenarios to get you started with the toolkit. In addition to using the RssDataSource control, there are samples for consuming feeds using ObjectDataSource, strongly typed classes, or late-bound classes.

 

An important feature of the toolkit that is not to be overlooked is the ability to persist feed results through memory and disk caching. The RssDataSource first looks for the feed in memory. If it is not available, or has expired (based on the defaultRssTtl setting in web.config or a default of 1 minute), it will then check to see if you are using the optional disk caching (designated by another web.config setting called rssTempDir). If that file does not exist or is expired, then it will go out to the actual URL and pull in the feed.

 

After refreshing the feed, the RssDataSource will persist it into the memory cache and (if appropriate) the disk cache. If using disk caching, be sure that you are using a folder which your application has permissions to read. Check Dmitry s note in the RssToolkit.doc about trust levels with respect to the RSS Toolkit.

 

I hope to see this toolkit continue to evolve and someday become a first-class citizen in ASP.NET.

 

CSS-friendly Control Adapters

CSS (Cascading Style Sheets) is the chosen formatting method for professional Web designers. Most of the rest of us are used to designing our Web pages by using tables as our building blocks. Many of the Web server controls (such as DataLists and GridViews) are rendered by ASP.NET as tables, an HTML element that does not work well with CSS.

 

As a way of showcasing the very powerful ASP.NET 2.0 System.Web.UI.Adapters.ControlAdapters, the team has created a toolkit of Control Adapters that will adapt five Web server controls (TreeView, Menu, DetailsView, FormView, and DataList) and render them in HTML that is more compatible with CSS. In most cases, this is div tags and List Items (<li>). Note that in the case of the DataList adapter, the HTML does render tables, but uses <tfoot>, <thead>, and <tbody> sections to simplify the use of CSS.

 

Although I recommend that you have some working knowledge of CSS and the new Themes and Skins in ASP.NET 2.0 before digging too deeply into the Control Adapters, I had minimal CSS experience (with a great desire to gain more) and had never even touched Themes and Skins. This made the time it took me to get up to speed with these Control Adapters a little longer than they may otherwise have required, but the learning curve was well worth the effort. In hindsight, I realize it would have been simpler had I had some prior knowledge of these tools, but it was certainly possible.

 

If you have ever looked at the source for a page with Web server controls on it, you would have seen that the HTML does not match the HTML in your UI designer. In design mode, you might have code such as <asp:datalist> or <asp:TreeView>, but these are nowhere to be found in the HTML that is rendered to the Web browser. ASP.NET processes your page and, based on the content, renders HTML code. Therefore, where you have an <asp:TreeView>, ASP.NET (by default) will output an HTML table. What the Control Adapters do is allow you to replace ASP.NET s default rendering with something of your own design. In the case of the examples in this toolkit, the adapters will take over when it comes to rendering the five controls noted above. In fact, the configuration is browser specific, which means you can specify different renderings for different Web browsers.

 

The key elements of this kit are:

1)     CSSAdapters.dll. This assembly has the rendering instructions for each of the five adapters. The source is available, which means you can use it to learn more about creating your own Control Adapters. The basic concept is that the Adapter classes render their own HTML with an HtmlTextWriter.

2)     App Browsers folder. This contains the CssFriendly.browser file. It is an XML file used to configure, on a browser by browser basis, which Web server controls get adapted and which adapter is used. Figure 5 shows an example of the configuration for IE. In my case, I am only using Adapters for TreeView and DataList, so I have commented out the other three replacements. CSSFriendly is the namespace of classes in the CSSAdapters assembly.

3)     BrowserSpecificCSS folder. This contains individual CSS files that supplement CSS rules for a specific browser and control. For example, the IEMenu.CSS file would be used to define additional formatting specifically for Menu controls in Internet Explorer. This would be used to supplement the general CSS rules for a Menu.

4)     Adapter JavaScript files. These files (AdapterUtils.js, TreeViewAdapter.js, MenuAdapter.js, etc.) contain script that is used by the adapters. They will handle things like expanding and collapsing TreeView nodes in response to click events.

 

 <browser refID="IE6to9">

   <controlAdapters>

     <!--<adapter controlType="System.Web.UI.WebControls.Menu"

              adapterType="CSSFriendly.MenuAdapter" />-->

     <adapter controlType="System.Web.UI.WebControls.TreeView"

              adapterType="CSSFriendly.TreeViewAdapter" />

     <!--<adapter controlType="System.Web.UI.WebControls.DetailsView"

              adapterType="CSSFriendly.DetailsViewAdapter" />-->

     <!--<adapter controlType="System.Web.UI.WebControls.FormView"

              adapterType="CSSFriendly.FormViewAdapter" />-->

     <adapter controlType="System.Web.UI.WebControls.DataList"

              adapterType="CSSFriendly.DataListAdapter" />

   </controlAdapters>

</browser>

Figure 5: The CssFriendly.browser file configured for IE.

 

Defining the Adapters

When you design your Web page, you ll use the standard Web controls, such as TreeView. With no more work than that, you ll already notice the difference in rendering.

 

Note that every TreeView in the project will get adapted. An alternative measure would be to create a custom TreeView control that inherits from TreeView and, instead of setting controlType to System.Web.UI.WebConrols.TreeView, set it to your own TreeView class.

 

Figure 6 shows a page in design mode with a TreeView control on it that has not had any CSS applied. Figure 7 shows a portion of the source of the rendered page. It s pretty messy stuff, but I have highlighted a few of the <table>, <td>, and <tr> tags for quick identification. Figure 8 shows the same tree rendered with the Control Adapter. For starters, it s much easier on the eyes. The combination of <li> (List Item) and <span> tags will be much simpler to format with CSS.

 

Figure 6: A TreeView in design mode with no formatting.

 

Figure 7: The default rendering for a TreeView is done with divs and tables.

 

Figure 8: The same TreeView rendered by the Control Adapter is built with List Item and span elements, which can be easily formatted with CSS. (CSS has not been applied to this TreeView yet.)

 

Now it s time to apply some styles with CSS. The key to this is the CssSelectorClass attribute that is added to TreeViewControl. The sample code that comes with the toolkit uses a CssSelectorClass named PrettyTree. Here is how the puzzle fits together.

 

In the HTML for the TreeView, set the CssSelectorClass attribute. Note that IntelliSense will complain about this attribute because this is a custom attribute:

 

<asp:TreeView ID="TreeView1" runat="server"

        CssSelectorClass="PrettyTree">

 

This is where ASP.NET 2.0 Themes comes into play. Themes are organized in folders by theme name. In the folder that will be used for the Web site pages, a CSS file is required for each of the controls to be adapted; for example, TreeView.css or DataList.css. There are sample files provided with the toolkit. Within the CSS file, notice the pattern for each style rule: CSSClassName, Class to be styled, element(s) to be styled. Following are a few examples.

 

This first example defines the PrettyTree CssSelectorClass that is to be used for AspNet TreeView controls. Any hyperlink (a) inside of a list item (li) should be black and not decorated:

 

.PrettyTree div.AspNet-TreeView li a

{

   text-decoration: none;

   color:Black;

}

 

In the second example, shown in Figure 9, the instructions are to apply the style to any root, parent, or leaf nodes inside of a list item of an AspNet TreeView that has the CssSelectorClass named PrettyTree. To be sure my CSS is working, I selected Purple for Root nodes, Green for Parent nodes, and left the innermost nodes (Leaf nodes) Black.

 

Figure 9: Apply the style to any root, parent, or leaf nodes inside of a list item of an AspNet TreeView that has the CssSelectorClass named PrettyTree.

 

I also used CSS to define the gifs used to visualize expand and collapse in the TreeView. Figure 10 shows the TreeView rendered by the adapter after applying the PrettyTree CSS class.

 

Figure 10: The TreeView after being rendered by the Control Adapter and styled with CSS.

 

I chose to use my CSS styles in the Basic theme. Therefore, the TreeView.css file is inside the Basic folder in App_Themes. For this all to work, be sure to set either the Theme or the StyleSheetTheme property of the page s Document object to the theme you are using; in this case, Basic .

 

When you have defined your styles with CSS, it makes it very easy to apply formatting to Web pages. Having HTML that works well with CSS makes the formatting much simpler, more predictable, and very flexible. The CSS-friendly Control Adapter toolkit not only helps achieve this, but at the same time is a great way to get your feet wet with the power of Control Adapters in ASP.NET 2.0.

 

There are many more projects in the Sandbox to explore. And the Sandbox will likely grow over time. Stay tuned.

 

Julia Lerman is an independent consultant and .NET Mentor who has been designing and writing software applications for over 20 years. She lives in Vermont where she runs the Vermont.NET User Group. Julia is well known in the .NET community as an INETA Speaker, .NET MVP, ASPInsider, conference speaker, and prolific blogger. You can read Julia s blog at http://thedatafarm.com/blog.