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 |
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:
- Client components?a set of client script libraries (.js files) that define a layered approach for creating client-based applications.
- 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.
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.
EnablePartialRendering="true" />
Add an
The
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:
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
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:
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
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
Perform the following actions:
- 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.
- 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.)
- Insert a table by going to Layout?>Insert Table and insert a 2 column by 1 row table.
- Add 11 Button controls on the first column of the table. Change their Text properties to the text values as shown in Figure 8.
- Drag and drop a Label control on the second column of the table.
- Add an XmlDataSource control to the second column of the table.
- 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.
Switch to the source view of Default2.aspx and enter the text shown in bold type below:
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.
- Uses an
Figure 10 shows what Default2.aspx should look like now.
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.