Login | Register   
RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


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

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.

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 <atlas:ScriptManager> control to the page:

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

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 <item> elements (of an RSS document; refer to <a href='http://services.devx.com/outgoing/devxfeed.xml' target='_blank'>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:

<atlas:UpdatePanel ID="id1" runat="server"> <ContentTemplate> <asp:Label ID="Label1" runat="server" Text="Label" Font-Bold="True"></asp:Label> <atlas:UpdateProgress ID="pro" runat="server"> <ProgressTemplate> <asp:Image ID="Image1" runat="server" ImageUrl="~/loading.gif" /> </ProgressTemplate> </atlas:UpdateProgress> <asp:DataList ID="DataList1" runat="server" BackColor="LightGoldenrodYellow" BorderColor="Tan" BorderWidth="1px" CellPadding="2" ForeColor="Black" Width="755px"> <FooterStyle BackColor="Tan" /> <SelectedItemStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" /> <AlternatingItemStyle BackColor="PaleGoldenrod" /> <HeaderStyle BackColor="Tan" Font-Bold="True" /> <ItemTemplate> <b> <%#XPath("title")%> </b> <br /> <i> <%#XPath("description") %> </i> <%#XPath("pubDate")%> <br /> <a href='<%#XPath("link") %>'>Link</a> <br /> <br /> </ItemTemplate> </asp:DataList> <asp:XmlDataSource ID="XmlDataSource1" runat="server" XPath="rss/channel/item"></asp:XmlDataSource> </ContentTemplate> <Triggers> <atlas:ControlEventTrigger ControlID="Button1" EventName="Click" /> <atlas:ControlEventTrigger ControlID="Button2" EventName="Click" /> <atlas:ControlEventTrigger ControlID="Button3" EventName="Click" /> <atlas:ControlEventTrigger ControlID="Button4" EventName="Click" /> <atlas:ControlEventTrigger ControlID="Button5" EventName="Click" /> <atlas:ControlEventTrigger ControlID="Button6" EventName="Click" /> <atlas:ControlEventTrigger ControlID="Button7" EventName="Click" /> <atlas:ControlEventTrigger ControlID="Button8" EventName="Click" /> <atlas:ControlEventTrigger ControlID="Button9" EventName="Click" /> <atlas:ControlEventTrigger ControlID="Button10" EventName="Click" /> <atlas:ControlEventTrigger ControlID="Button11" EventName="Click" /> </Triggers> </atlas:UpdatePanel> ...

The above addition does the following:
  • Uses an <atlas:UpdatePanel> control to partially update the page. In this case, it updates the DataList control asynchronously.
  • Uses an <atlas:UpdateProgress> 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).

Comment and Contribute






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



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