Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

Intro to Atlas: The Road to Effortless AJAX Begins Here : Page 2

There's no reason to get lost with Atlas, Microsoft's framework for building fast, responsive AJAX-enabled Web apps. Get your bearings by following along as we build two introductory applications: a calendar and a content portal.


advertisement
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:

<atlas:ScriptManager ID="ScriptManager1" runat="server" />

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 <atlas:ScriptManager> control and set it to True. This will allow Atlas to support partial rending of the page:

<atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" />

Add an <atlas:UpdatePanel> control, followed by the <ContentTemplate> element. Move the Calendar control within the <ContentTemplate> element:

<atlas:UpdatePanel ID="id1" runat="server"> <ContentTemplate> <asp:Calendar ID="Calendar1" runat="server" BackColor="#FFFFCC" ... /> </asp:Calendar> </ContentTemplate> </atlas:UpdatePanel>

The <atlas:UpdatePanel> 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:

<form id="form1" runat="server"> <atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" /> <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True"> <asp:ListItem Value="1">Jan</asp:ListItem> <asp:ListItem Value="2">Feb</asp:ListItem> <asp:ListItem Value="3">Mar</asp:ListItem> <asp:ListItem Value="4">Apr</asp:ListItem> <asp:ListItem Value="5">May</asp:ListItem> <asp:ListItem Value="6">Jun</asp:ListItem> <asp:ListItem Value="7">Jul</asp:ListItem> <asp:ListItem Value="8">Aug</asp:ListItem> <asp:ListItem Value="9">Sep</asp:ListItem> <asp:ListItem Value="10">Oct</asp:ListItem> <asp:ListItem Value="11">Nov</asp:ListItem> <asp:ListItem Value="12">Dec</asp:ListItem> </asp:DropDownList> Year <asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="True"> <asp:ListItem>2005</asp:ListItem> <asp:ListItem>2006</asp:ListItem> <asp:ListItem>2007</asp:ListItem> </asp:DropDownList><br /> <br /> <atlas:UpdatePanel ID="id1" runat="server"> <ContentTemplate> ...

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 <atlas:UpdatePanel> 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:

<atlas:UpdatePanel ID="id1" runat="server"> <ContentTemplate> <asp:Calendar ID="Calendar1" runat="server" BackColor="#FFFFCC" ... /> </asp:Calendar> </ContentTemplate> <Triggers> <atlas:ControlValueTrigger ControlID="DropDownList1" PropertyName="SelectedValue" /> <atlas:ControlEventTrigger ControlID="DropDownList2" EventName="SelectedIndexChanged" /> </Triggers> </atlas:UpdatePanel>


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 <atlas:UpdatePanel> 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 <atlas:UpdateProgress> control and insert a label control that displays "Updating Calendar … ":

<atlas:UpdatePanel ID="id1" runat="server"> <ContentTemplate> <asp:Calendar ID="Calendar1" runat="server" BackColor="#FFFFCC" ... /> </asp:Calendar> <atlas:UpdateProgress ID="pro" runat="server"> <ProgressTemplate> <asp:Label ID="Label1" runat="server" Text="Label"> Updating Calendar... </asp:Label> </ProgressTemplate> </atlas:UpdateProgress> </ContentTemplate> <Triggers> <atlas:ControlValueTrigger ControlID="DropDownList1" PropertyName="SelectedValue" /> <atlas:ControlEventTrigger ControlID="DropDownList2" EventName="SelectedIndexChanged" /> </Triggers> </atlas:UpdatePanel>

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).



Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap
Thanks for your registration, follow us on our social networks to keep up-to-date