Intro to Atlas: The Road to Effortless AJAX Begins Here

he phrase AJAX is getting all the attention lately. By now, you should already be familiar with the term, but for those of you still in the dark, AJAX represents techniques to build responsive and feature-rich Web applications. Instead of constantly waiting for web pages to refresh, AJAX-enabled Web sites dynamically update portions of the pages, thus providing a much more responsive user experience to the user. What’s more, with AJAX you can now develop feature-rich applications through the Web browser. Just take a look at http://local.live.com/ and http://spreadsheets.google.com/ to experience the wonders of AJAX.

While the technologies AJAX uses are all in the public domain (XML, HTTP and Javascript), developers would be more efficient with the help of a ready framework with which to get started. Not surprisingly, Microsoft has been working on just such a framework?called Atlas (http://atlas.asp.net/ ). To be more specific, Atlas is a free framework that allows ASP.NET 2.0 developers to build AJAX-style Web applications.

In this article, I will show you how you can use Atlas to build responsive Web applications and vastly improved user interfaces. As usual, I will walk you through a case study, and hopefully get you jumpstarted on Atlas programming.

What You Need
To use Atlas, you need the following:

*Microsoft Visual Studio 2005, or Visual Web Developer
*Atlas Setup?At the moment, the latest version of Atlas is the April CTP. Download the latest CTP from http://atlas.asp.net/default.aspx?tabid=47&subtabid=471.

AJAX (and in this case, Atlas) programming generally involves using client-side scripts (such as JavaScript) to dynamically modify the content of a page or to send data asynchronously to and from the Web server. To ease the development effort, the Atlas architecture contains two main components:

  1. Client components?a set of client script libraries (.js files) that define a layered approach for creating client-based applications.
  2. Server components?server-based components, services, and controls that can be integrated with ‘Atlas’ client scripts.

This article will focus on the Atlas server components.

A Simple Atlas Example
To get started in Atlas, I’ll build a simple Web site that illustrates using Atlas to solve a very common problem faced by ASP.NET developers: Calendar controls that are unusable due to multiple server trips.

Before you can do anything, you need to install the Atlas CTP (or whichever is the most current version of the Atlas code base at the time that you read this article). Once you’ve done that you can launch Visual Studio 2005On the screen that prompts you to select a template, you will find the new “Atlas” Web Site template type (see Figure 1). Select the new Atlas template and click OK.


Figure 1. The “Atlas” Web Site template is a new type that will appear in your solution templates in Visual Studio automatically once you’ve installed Atlas.
 
Figure 2. This is the main “engine” of Atlas: the Microsoft.Web.Atlas.dll assembly.

In Solution Explorer, you will notice that Visual Studio has pre-created a number of files for you (see Figure 2). In particular, the Bin folder contains the Microsoft.Web.Atlas.dll assembly, which contains all the supporting functions needed by Atlas.

In Default.aspx, the ScriptManager control is populated by default. The ScriptManager control manages all Atlas components, partial page rendering, client requests, and server responses on ASP.NET pages. Here is what the ScriptManager control looks like in Source View:

Add a Calendar control to the page. Click the Auto Format… hyperlink in the Smart Tag of the Calendar control and select the Colorful 1 scheme. Figure 3 shows what the Calendar control looks like.

One of the common complaints about the Calendar control is the incessant post-backs to the server every time the Calendar control is clicked (when users change the month, or click on a particular date). If the Web server is busy or the network is slow, this will cause a lot of frustration for users, who have to wait for the page to refresh each time they make a selection. Atlas is a perfect fit for the Calendar control. It can be used to refresh only the Calendar control (and not the entire page) when the date in the control changes. Figure 4 is an interactive screen shot that demonstrates the Atlas-enabled Calendar control.


Figure 3. Add a Calendar control to the page.
 
Figure 4. This 15-second video-only movie shows you how quickly the calendar control responds to user input. Click the Play button twice to begin video.

Switching to the Source View of Default.aspx, add the EnablePartialRendering attribute to the control and set it to True. This will allow Atlas to support partial rending of the page:

    EnablePartialRendering="true" />

Add an control, followed by the element. Move the Calendar control within the element:

                  

The control divides a Web page into regions?these regions can be updated without refreshing the entire page.

That’s it! If you press F5 to debug the application, you will realize that clicking on the Calendar itself does not cause the page to refresh; only the Calendar control itself changes (see Figure 4).

While updating the Calendar control now does not cause the entire page to refresh, I suggest you supplement it with some other controls to allow users to jump directly to a month or year. So let’s add two DropDownList controls to the form, one for month and one for year:

Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec Year 2005 2006 2007

...

Figure 5 shows what Default.aspx looks like after adding the two new DropDownList controls.

In the code-behind of Default.aspx, code the SelectedIndexChanged event for both DropDownList controls. They will set the Calendar control to the selected date:

    Protected Sub DropDownList1_SelectedIndexChanged( _       ByVal sender As Object, _       ByVal e As System.EventArgs) _       Handles DropDownList1.SelectedIndexChanged        With Calendar1            .VisibleDate = New Date( _               DropDownList2.SelectedValue, _               DropDownList1.SelectedValue, 1)        End With    End Sub    Protected Sub DropDownList2_SelectedIndexChanged( _       ByVal sender As Object, _       ByVal e As System.EventArgs) _       Handles DropDownList2.SelectedIndexChanged        With Calendar1            .VisibleDate = New Date( _               DropDownList2.SelectedValue, _               DropDownList1.SelectedValue, 1)        End With    End Sub

When you press F5 to debug the application, you will notice that the entire page is refreshed whenever you select either the month or year DropDownList controls. To prevent this from happening, you need to define triggers. Triggers specify events that cause an control to automatically refresh.

There are two types of triggers: ControlEventTrigger and ControlValueTrigger. The first type of trigger causes an update when the specified control raises a specified event. The second type of trigger causes an update when the specified value of a control changes. For my example, I have added the two different types of triggers for illustration:

                                    


Figure 5. Add two DropDownList controls to the page so that users can change month or year quickly in the calendar.
 
Figure 6. Testing the application: A label control is used to display a note that informs the user of the update.

Here, the control will refresh whenever the value of DropDownList1 changes, or the SelectedIndexChanged event of DropDownList2 is fired. In either case, changing the value of either DropDownList controls will cause the Calendar control to update (and not the entire page).

One last point to cover before you test your application. Users may have a tendency not to notice that the Calendar control is updating in the background. Therefore, it is a good idea to display a note on the page informing the user that the Calendar control is being updated. To do so, add the control and insert a label control that displays “Updating Calendar … “:

                                                         Updating Calendar...                                                

You can now press F5 to debug the application. Every time the Calendar control changes its value, you will see the “Updating Calendar…” message (see Figure 6).

Building a DevX Portal using Atlas
Using what you learned in the previous section, let’s now proceed to build a useful application. In this section, I will build a DevX.com portal that allows readers to quickly search through articles of interest using DevX’s existing RSS feeds. Figure 7 is an interactive screen shot that shows the completed DevX.com portal.

Figure 7. This 20-second video-only movie shows the Atlas-enabled DevX.com portal when completed. Click the Play button twice to begin.

As you can observe, the categories of interest are shown on the left of the page as a series of buttons. Clicking on a button displays a summary of the articles in that category. As DevX.com exposes a series of RSS feeds for articles in different categories, you will make use of them and bind them to the DataList control (using the XmlDataSource control) in ASP.NET 2.0. The interesting feature of this application is that article summaries are loaded in the background and will not cause the entire page to refresh (and hence flicker).

Building the UI
Using the project created in the previous section, add a new Web Form (Default2.aspx) to the project. Switch to Source View and add the control to the page:

    

Perform the following actions:

  1. Drag and drop an image (devx_header.bmp; an image of the DevX.com web page header) onto the project name in Solution Explorer. Then, drag the image from Solution Explorer and drop it onto the page.
  2. Drag and drop an animated GIF image (loading.gif) containing the word “Loading …” onto the project name in Solution Explorer. (Both images are included in the source code download that accompanies this article.)
  3. Insert a table by going to Layout?>Insert Table and insert a 2 column by 1 row table.
  4. Add 11 Button controls on the first column of the table. Change their Text properties to the text values as shown in Figure 8.
  5. Drag and drop a Label control on the second column of the table.
  6. Add an XmlDataSource control to the second column of the table.
  7. Add a DataList control to the second column of the table. In the Smart Tag of the DataList control, select XmlDataSource1 as the data source. Also, click the Auto Format… hyperlink and select the Sand & Sky scheme.

Figure 8 shows how Default2.aspx should look after following those seven steps. You can download the sample application that accompanies this article to try it all out.


Figure 8. Populate the Default2 form with the various controls shown in the screen shot.
 
Figure 9. Here is where you specify the XPath expression for the XmlDataSource control.

In the Smart Tag of the XmlDataSource1 control, click the Configure Data Source… hyperlink. Enter the XPath expression as shown in Figure 9. The XPath expression specifies the subset of the RSS file that you are interested in. In this case, you are only interested in the elements (of an RSS document; refer to http://services.devx.com/outgoing/devxfeed.xml for an example of an RSS document), and thus, you specify the XPath expression as “rss/channel/item.”

Switch to the source view of Default2.aspx and enter the text shown in bold type below:

                                                                                                                                 <%#XPath("title")%>                        
<%#XPath("description") %>  <%#XPath("pubDate")%>
Link

...

The above addition does the following:

  • Uses an control to partially update the page. In this case, it updates the DataList control asynchronously.
  • Uses an control to display an animated gif image when the DataList control is being updated.
  • Specifies a formatting template for the DataList control that displays the appropriate sections of the RSS file and then bind it to the DataList control.
  • Specified the triggers. In this case, if any of the 11 buttons is clicked, the DataList control will update asynchronously.

Figure 10 shows what Default2.aspx should look like now.


Figure 10. Here is the Default2.aspx page after all the modifications are made.
 
Figure 11. Align the Button controls to the top of the cell.

Finally, a little bit of touch-up. By default, the controls within a table cell will be centralized. To align the buttons to the top of the cell, select the cell and in the Properties window, set its valign property to top (see Figure 11).

Coding the Application
You have just completed building the UI of the application. Now it’s time to write the code to wire up all the controls. Switch to the Code View of Default2.aspx and import the following namespaces:

Imports System.NetImports System.IOImports System.Xml

When users select an article category, the RSS document for that category is first downloaded so that you can extract the title of the RSS document. This will be achieved by two helper functions that you will define: SendRequest() and GetResponse(). These two functions send a request to a server and then get the response from the server, using HTTP.

    Public Function SendRequest( _       ByVal URI As String, _       ByVal requestType As String) As HttpWebRequest        Dim req As HttpWebRequest = Nothing        Try            '---Creates a HTTP request---            req = HttpWebRequest.Create(URI)            req.Method = requestType '---GET or POST---        Catch ex As Exception            Throw New Exception("Error")        End Try        Return req    End Function    Public Function GetResponse( _       ByVal req As HttpWebRequest) As String        Dim body As String = String.Empty        Try            '---Get a response from server---            Dim resp As HttpWebResponse = req.GetResponse()            Dim stream As Stream = resp.GetResponseStream()            '---Use a StreamReader to read the response---            Dim reader As StreamReader = _               New StreamReader(stream, Encoding.UTF8)            body = reader.ReadToEnd()            stream.Close()        Catch ex As Exception            Throw New Exception("Error")        End Try        Return body    End Function

The LoadRSS() function first loads the XmlDataSource with the RSS document (as specified in the URI parameter). To obtain the feed title, it sends a request to the server using the HttpWebRequest object. It uses the SendRequest() and GetResponse() functions to obtain the RSS document. Once the RSS document is obtained, it uses the XPath expression “channel/title” to fetch the title of the feed. The LoadRSS() function returns the title of the feed.

    Public Function LoadRSS( _       ByVal URI As String) As String        Dim req As HttpWebRequest        Dim xmlDoc As XmlDocument = Nothing        Try            '---load the RSS into the XmlDataSource control---            XmlDataSource1.DataFile = URI            '---download the RSS document---            req = SendRequest(URI, "GET")            Dim xmlData As String = GetResponse(req)            xmlDoc = New XmlDocument()            xmlDoc.LoadXml(xmlData)            '---Select the title of the document---            Dim titleNode As XmlNode = _               xmlDoc.DocumentElement.SelectSingleNode("channel/title")            Return titleNode.InnerText        Catch ex As Exception            Return String.Empty        End Try    End Function

The Button_Click event is the event handler for all the 11 buttons. Depending on the button clicked, the RSS document for each article category is downloaded and the Label1 control is set to the title of the feed.

    Public Sub Button_Click( _       ByVal sender As Object, ByVal e As System.EventArgs) _       Handles Button1.Click, Button2.Click, Button3.Click, _       Button4.Click, Button5.Click, Button6.Click, _       Button7.Click, Button8.Click, Button9.Click, _       Button10.Click, Button11.Click        Dim URL As String = String.Empty        Select Case CType(sender, Button).Text            Case "Database" : URL = _               "http://services.devx.com/outgoing/databasefeed.xml"            Case ".NET" : URL = _               "http://services.devx.com/outgoing/dotnet.xml"            Case "C++" : URL = _               "http://services.devx.com/outgoing/cplusfeed.xml"            Case "Recent Tips" : URL = _               "http://services.devx.com/outgoing/recentTipsFeed.xml"            Case "Web Dev" : URL = _               "http://services.devx.com/outgoing/webdevfeed.xml"            Case "Latest" : URL = _               "http://services.devx.com/outgoing/devxfeed.xml"            Case "Enterprise" : URL = _               "http://services.devx.com/outgoing/enterprisefeed.xml"            Case "Wireless / Mobile" : URL = _               "http://services.devx.com/outgoing/wirelessfeed.xml"            Case "XML" : URL = _               "http://services.devx.com/outgoing/xmlfeed.xml"            Case "Java" : URL = _               "http://services.devx.com/outgoing/javafeed.xml"            Case "Open Source" : URL = _               "http://services.devx.com/outgoing/openSourceFeed.xml"        End Select        Label1.Text = LoadRSS(URL)    End Sub

Finally, when the page is loaded for the first time, you will set the default feed to the “Latest Published Articles” category:

    Protected Sub Page_Load( _       ByVal sender As Object, _       ByVal e As System.EventArgs) Handles Me.Load        Label1.Text = _           LoadRSS("http://services.devx.com/outgoing/devxfeed.xml")    End Sub

That’s it! Press F5 to test the application. You can now click on any category button and the application will display the article summaries that match your choice in the background without a page refresh (see Figure 7). What’s more, the animated gif image (Loading…) will be shown when the DataList control is being refreshed. It will go away when the refresh is complete.

In this article, you have seen how to use Atlas to improve the responsiveness of your Web applications. While this article has just touched the surface of what Atlas can do for your Web site, I hope it has inspired you to get started?as well as given you a jumpstart on the learning curve.

Share the Post:
Share on facebook
Share on twitter
Share on linkedin

Overview

Recent Articles: