ost Windows users are familiar with tool tips?the little “balloon” that pops up when you position your mouse over an icon. Tool tips are very useful user interface (UI) enhancements that display additional information about the current object of interest. On the Web, the equivalent of tool tips are pop-ups. Pop-ups have a bad reputation due to the large number of mass marketers who purchased advertising inventory on the Web in bulk using a style of pop-up that launched an additional instance of the browser on top of the main window. But these aren’t the kind of pop-ups I’m talking about today.
Other types of pop-ups occur within your current window when you perform an activity such as a mouseover, and they are often very helpful. Amazon.com provides a nice example of a useful pop-up on its front door; if you move your mouse over the Product Categories tab, a large pop-up appears (see Figure 1) which displays the various top-level product categories. This kind of popup display context-sensitive information that provides a nice short-cut to certain actions.
In this article, I will show you how you can create pop-ups in your ASP.NET application using the ASP.NET AJAX framework and the ASP.NET AJAX Control toolkit (nee Atlas). In particular, you will learn how to use the HoverMenuExtender control to make good use of pop-ups in your ASP.NET Web applications. You will use pop-ups to display additional information about a Calendar control, as well as display RSS feeds when the user’s mouse hovers over a RSS feed icon.
The first application I will create uses a Calendar control. Using the Calendar control, you can navigate between different months to select a particular date. However, it is always a pain to return to the current date. Hence, in this project, I will use the HoverMenuExtender control to enhance the usability of the Calendar control. When the user moves the mouse over the Calendar control, you will display a panel to allow the user to jump back to today?s date. At the same time, dates selected by the user are automatically added to a drop-down list so that users can directly jump to the previously selected date (see Figure 2).
To get started, launch Visual Studio 2005, select File | New | Web Site?, and then select the ASP.NET AJAX-Enabled Web Site template (see Figure 3). Name the project HoverMenuExtender and click OK.
|Author’s Note: For this project, I am using the ASP.NET AJAX 1.0 Beta and the ASP.NET AJAX Control Toolkit. You can find the instructions to download them from: http://ajax.asp.net/Default.aspx.|
The Panel control is what will eventually become the popup. Therefore, I need to prepare the Panel for my content. In the Panel control, add the following text and controls (see also Figure 5).
- Dropdown List
Switch to the Source View of Default.aspx and add the attributes for the HoverMenuExtender control as follows:
TargetControlID="Calendar1" PopupControlID="Panel1" PopDelay="500" PopupPosition="Right" >
The HoverMenuExtender control supports the following attributes:
- TargetControlID?the control the HoverMenuExtender is targeting.
- PopupControlID?the control to display when the mouse is over the target control.
- HoverCssClass?the CSS class to apply to the popup when it is visible.
- PopupPosition?the position to display the popup with respect to the target control; can be left, right, top, bottom, or center.
- OffsetX/OffsetY?the pixel offset between the target control and popup.
- PopDelay?the time for the popup to remain visible after the mouse moves away from the target control.
At the top of the page, define a CSS style:
In the Panel control, set the CssClass attribute to the CSS style that you have just defined. This CSS style defines what the panel will look like:
CssClass="popupMenu" Height="50px" Width="256px">
I want the Label control within the Panel control to display today’s date. To do that, switch to the code-behind of Default.aspx and in the Page_Load event, code the following:
|Figure 7. Testing the Application: The completed Calendar control provides a popup panel on mouseover that gives end users quick access to useful features.|
Protected Sub Page_Load( _ ByVal sender As Object, _ ByVal e As System.EventArgs) _ Handles Me.Load lblDate.Text = Today.ToShortDateString End Sub
When the user clicks on the “today’s” LinkButton control, you will display the Calendar control to today’s date. This is accomplished by the Click event of the LinkButton control:
Protected Sub btnToday_Click( _ ByVal sender As Object, _ ByVal e As System.EventArgs) _ Handles btnToday.Click Calendar1.VisibleDate = Today End Sub
When the user clicks on a date in the Calendar control, add the date to the DropDownList control:
Protected Sub Calendar1_SelectionChanged( _ ByVal sender As Object, _ ByVal e As System.EventArgs) _ Handles Calendar1.SelectionChanged ddlSelectedDates.Items.Add(Calendar1.SelectedDate) End Sub
Finally, when the user selects a saved date from the DropDownList control, set the Calendar control to display the selected date:
Protected Sub ddlSelectedDates_SelectedIndexChanged( _ ByVal sender As Object, _ ByVal e As System.EventArgs) _ Handles ddlSelectedDates.SelectedIndexChanged Calendar1.VisibleDate = ddlSelectedDates.SelectedItem.Text End Sub
That’s it! Press F5 to test the application. Figure 7 shows what the application looks like when you move the mouse over the Calendar control.
Displaying RSS Feeds Using the HoverMenuExtender Control
In the previous section I showed the basic steps for configuring the HoverMenuExtender control, but there are plenty of really useful things you can do with it in the real world. In the next section I’ll put the HoverMenuExtender control to better use.
Most web sites today display the RSS icon, which allows you to subscribe to its feed. For example, on DevX.com’s site (see Figure 8), you can click on the “XML” icon to obtain the XML feed (which is readable by news aggregator). For a human-readable version of the feed, you need to click on the corresponding links (for example, Latest Articles, C++, etc).
A good way to use the HoverMenuExtender control in this instance is to display the formatted RSS feed when the mouse hovers over the XML icon. Figure 9 shows an illustration of this idea and this is what you will build in this article.
Working from the same project used in the previous section, add to it now a new Web Form and populate it with the following controls (see also Figure 10):
Essentially, here you are binding a DataList control to an XmlDataSource control. The XmlDataSource control loads the RSS feed (as specified in the DataFile attribute) and the content is displayed by the DataList control (using the various XPath expressions to extract the information needed).
Figure 11 shows what the Default2.aspx page should look like once you’ve made these changes.
As usual, add a CSS style definition to the top of the page:
Configure the Panel control to use the CSS style:
Finally, wire up all the controls using the HoverMenuExtender control:
Press F5 to test the application. When the mouse hovers over the first XML icon, the RSS feed will be displayed (see Figure 12).
|Figure 12. When in action, this application launches the popup panel as soon as the mouse hovers over the XML icon.|
For the second XML icon, you need to add a new set of Panel and HoverMenuExtender controls. Add the following to the page:
Press F5 and you should now be able to view the RSS feed when your mouse hovers over the first two XML icons. Continue as needed to activate all of the XML icons with a HoverMenu. In this article, you have learned how to use the HoverMenuExtender control available in the ASP.NET AJAX Control toolkit to display pop-ups in your ASP.NET Web applications. Adding pop-ups will improve the usability of your application so be sure to take the time to familiarize yourself with the HoverMenuExtender control.