Atlas Server Controls Preview

Learn the Ins and Outs of Development with the New Atlas Server Controls

ControlFreak

LANGUAGES: VB.NET

ASP.NET VERSIONS: 2.x

 

Atlas Server Controls Preview

Learn the Ins and Outs of Development with the New Atlas Server Controls

 

By Steve C. Orr

 

Most knowledgeable developers agree that ASP.NET 2.0 is a truly great product. Its server-centric approach allows developers to use ASPX pages to declare pages, controls, and data sources, and bind them all together in highly useful ways with little or no code.

 

Most knowledgeable developers also agree that ASP.NET 2.0 s server-centric approach is also its greatest weakness. The main reason is that it requires frequent postbacks to do even the most trivial things unless you re willing to get your hands dirty with custom client-side JavaScript code, XmlHttp, client-side callbacks, cross-browser incompatibilities, and other time consuming complications. In a world where the term Web 2.0 gains new meaning and strength with every day that passes, this server-centric flaw is becoming ever more glaring.

 

That s where Atlas comes in.

 

ASP.NET: The Next Generation

What is Atlas? Atlas is a lot of things. One of the most hyped capabilities of Atlas is the built-in AJAX support that makes postbacks virtually obsolete; but Atlas is much more than that. Atlas is a layer of server-side and client-side libraries that extend ASP.NET 2.0 to provide a richer client experience for end users. Atlas provides a declarative client-side model similar to ASPX notation so developers can use client-side functionality without having to use any JavaScript. Developers who are comfortable with JavaScript will find a rich client-side library at their disposal that encapsulates such sticky issues as cross-browser incompatibilities and functional mismatches between JavaScript capabilities and the .NET Framework. Atlas extensible framework allows developers to create custom code and controls that take advantage of its cutting-edge capabilities.

 

Atlas is so many things that a single article cannot do justice to all it has to offer, so this one will concentrate on the new server controls included with the June CTP of Atlas. Next month s article will introduce the client-side controls. It wouldn t surprise me if there were additions and subtractions to this list of controls before the final release of Atlas, perhaps even some minor syntax changes. Nevertheless, this article aims to be a good primer.

 

Atlas seamlessly supports Internet Explorer, Firefox, and Safari. For now, Opera is left out in the cold, but I happen to know the Atlas team secretly wants to add support for it.

 

After downloading and installing the latest version of Atlas from http://atlas.asp.net you can get started with development right away, and even deploy your solution thanks to the go-live license granted by Microsoft. When creating a new Web application in Visual Studio 2005, you ll see a new Atlas Web site template, as shown in Figure 1. When you choose this template it will create a new project with a reference to Microsoft.Web.Atlas.dll; it will put a few Atlas-related items into the web.config file. If you ve got an existing Web application to which you d like to add Atlas capabilities, you can easily do these steps manually in any existing Web application.

 


Figure 1: After installing Atlas, a new Atlas Web Site template is available when creating a new Web application.

 

The New Server-side Controls of Atlas

Atlas currently comes with a variety of new controls (see Figure 2). The ScriptManager control is the most important, because it manages all the Atlas scripts for a page. Exactly one instance of this non-visible control must be present on every page that uses Atlas features. In cases where you might be tempted to want to use two script managers on a page (for example, one for a Master Page and another for its content page), you can use a ScriptManagerProxy instead of a second ScriptManager. The ScriptManagerProxy behaves much the same as a ScriptManager, but behind the scenes it coordinates its effort with the ScriptManager to ensure there aren t too many cooks in the kitchen.

 

Atlas Control Name

Atlas Control Description

ScriptManager

Exactly one instance of the ScriptManager control must be on every page that uses Atlas. This non-visible control coordinates all script functions for the page.

ScriptManagerProxy

Can be used as a virtual ScriptManager for content pages in cases where the Master Page already declares the ScriptManager.

UpdatePanel

Controls contained within an UpdatePanel can be automatically updated via AJAX and other rich client-side script functionality.

UpdateProgress

Provides feedback to the user during long-running AJAX calls.

TimerControl

Permits content updates on a regularly scheduled basis.

ProfileScriptService

A non-visible control that provides the ability to update ASP.NET user profiles from the client side so user preferences can be easily retained between sessions.

InitialData

Optimizes bandwidth and performance by sending the first set of data along with the initial page request so that AJAX calls are only required for subsequent data requests.

AutoCompleteExtender

Extends controls such as the TextBox with familiar AutoComplete dropdown list functionality.

DragOverlayExtender

Extends existing ASP.NET controls with drag and drop capabilities.

Gadgets

Provides functionality to interact with Windows Live Messenger and Windows Vista sidebar.

Figure 2: These Atlas server-side controls provide enhanced capabilities to ASP.NET Web developers.

 

To enable the AJAX capabilities of Atlas, set the ScriptManager s EnablePartialRendering property to true. This will cause the ScriptManager to short circuit the normal postback behavior of the page and instead do a partial postback to retrieve only parts of the page for update. The new UpdatePanel control is used to specify which parts of the page will be updated as a result of the AJAX request.

 

UpdatePanel

At design time the UpdatePanel acts very much like the standard ASP.NET Panel control, allowing controls to be dropped inside it and arranged in normal ways. The real magic happens at run time. By default, any controls contained within the UpdatePanel will be updated via AJAX requests. For example, if you drop a standard ASP.NET 2.0 GridView control into it, paging and sorting operations will be done automatically via AJAX, without having to redraw the whole page between each click. This results in a much smoother user experience. It should be noted that Atlas also updates the page s ViewState on each AJAX call, so that normal postbacks can still occur subsequently without error.

 

The ASPX fragment listed in Figure 3 shows the syntax for a simple Atlas page that retrieves the current time from the server. Notice there are two buttons inside the form; one is inside the UpdatePanel and one is outside the UpdatePanel. The button contained within the UpdatePanel will automatically update the label via AJAX without redrawing the page. Because the second button is not inside the UpdatePanel it will do a standard ASP.NET postback.

 

   

   runat="server" EnablePartialRendering="true" />

   

             

   

           

               

                   runat="server"

                   Text="Label">

               

               

               

                   runat="server"

                   Text="Get Server Time (AJAX)">

               

           

       

       

           runat="server"

           Text="Get Server Time (Standard Postback)" />

    

Figure 3: Atlas UpdatePanel control can be configured declaratively to use AJAX callbacks, with no code required.

 

Note that there is only one line of code in the code-behind of this page, which simply sets the label s text property to the current time:

 

lblTime.Text = Date.Now().ToLongTimeString()

 

This line of code is in the Page_Load event, which is called normally, as if a standard postback occurred. In fact, all the normal server-side events are raised during this partial postback, although rendering is ignored for all parts of the page that are not involved in the AJAX request. Figure 4 shows the page at run time.

 


Figure 4: Parts of Atlas pages can be configured to use AJAX requests, while other parts can use standard postbacks.

 

While the approach of having everything in the UpdatePanel automatically refresh with each AJAX call is attractive in its simplicity, sometimes more complex solutions are desired for optimal performance. Atlas does not disappoint, as it is configurable in a variety of powerful ways.

 

For example, perhaps you want part of the page to be updated when one button is clicked, and another part of the page to be updated when a second button is clicked. This is when Atlas Triggers come in handy. By setting the UpdatePanel s Mode property to Conditional, the UpdatePanel will only update when it is told to do so by a Trigger. Figure 5 shows a slightly more complex example of the time retrieval page.

 


Figure 5: Triggers allow these buttons to perform separate AJAX calls and update separate portions of the page.

 

There are two UpdatePanels in this example, each containing a label. Between them are two buttons, neither of which are located within an UpdatePanel. The first button retrieves and displays the current server time in the first label; the second button retrieves and displays the current server date in the second label. The only server-side code is in the Page_Load event:

 

lblTime.Text = Date.Now().ToLongTimeString()

lblDate.Text = Date.Now().ToLongDateString()

 

Even though the server code updates both the Time and Date labels, in this case Atlas is following orders and only updates the one label that was triggered by its associated button. In large pages with many controls this technique could save a lot of bandwidth. Figure 6 shows how this was established declaratively and demonstrates that controls anywhere on the page can participate in Atlas functionality even when they are not located in an UpdatePanel (such as the buttons in this example).

 

   

     runat="server" EnablePartialRendering="true"

   />

   

             

   

     runat="server" Mode="Conditional" >

       

           

               runat="server"

               Text="Label">

           

       

       

           

               ControlID="btnUpdateTime"

               EventName="Click"

           />

       

   

   

       runat="server"

       Text="Get Server Time"

   />

   

   

       runat="server"

       Text="Get Server Date"

   />

   

     runat="server" Mode="Conditional">

       

           

               runat="server"

               Text="Label">

           

       

       

           

           ControlID="btnUpdateDate"

           EventName="Click" />

       

   

   

Figure 6: Triggers can be declared to update automatically bits and pieces of the page independently as needed.

 

While some developers may prefer to get their hands dirty in the kind of ASPX code shown in Figure 6, I m sure many will prefer to use the dialog boxes shown in Figure 7 to automatically generate this increasingly complex ASPX syntax.

 


Figure 7: The Triggers ellipsis button in the UpdatePanel s property window invokes these user-friendly dialog boxes to help create the desired triggers.

 

Controlling Atlas

This all works great under ideal conditions, but even AJAX can t save a user from slow servers, lagging networks, and complex database queries that simply take time to run. Users shouldn t be left twiddling their thumbs during long-running operations, and that s where the UpdateProgress control comes in handy. When placed on a form, it appears only while AJAX requests are in progress. It displays a configurable message and cancel button to put the user in the driver s seat. The UpdateProgress control s run-time appearance is fully customizable via ASP.NET templates, so you can make it match your vision of beauty.

 

The TimerControl is another useful Atlas server control. Much like the Windows Forms timer control, it allows an event to be raised on a regular timed interval. The Interval property is configurable by the millisecond, so setting it to 60,000 would cause the timer s server-side Tick event to be called (via AJAX) once every minute:

 

   

     

   

   

      ID="TimerControl1"

      runat="server"

      Interval="10000">

 

Combined with the following server-side code, the above ASPX code will cause the label on this page to be updated with the server s current time once every 10 seconds:

 

Protected Sub TimerControl1_Tick(ByVal _

   sender As Object, _

   ByVal e As System.EventArgs) _

   Handles TimerControl1.Tick

   Label1.Text = Date.Now.ToLongTimeString()

End Sub

 

Control Extenders

Atlas provides a couple of handy Extender controls, which are invisible at run time but extend existing ASP.NET controls with new capabilities. For example, the DragOverlay control can be assigned to most standard ASP.NET controls to permit the user to drag it around the Web page at run time (see Figure 8).

 


Figure 8: The DragOverlayExtender can be assigned to any standard ASP.NET control to allow users to drag that control around the page at run time.

 

The following syntax allows a control named Label1 to be dragged about:

 

      

            TargetControlID="Label1"

            Enabled="true" />

 

The AutoCompleteExtender control adds functionality to the standard ASP.NET 2.0 TextBox control. The syntax below will call a Web service to retrieve a matching list of items once the user has typed at least three characters into the assigned TextBox. That list of items will appear as a dropdown list; a familiar and useful feature indeed:

 

      ID="AutoCompleteSearch"

      MinimumPrefixLength="3"

      runat="server">

      

            TargetControlID="SearchText"

            Enabled="true"

            ServicePath="MyWebService.asmx"

            ServiceMethod="MyWebMethod" />

 

Figure 9 shows the AutoCompleteExtender feature in action at run time, assisting the user with a search by dynamically retrieving matching list items as they type.

 


Figure 9: The AutoCompleteExtender enhances the ASP.NET TextBox control with the ability to provide AJAX-enabled type-ahead capabilities to improve the user experience.

 

So Much More ...

A single article can do no more than scratch the surface of what Atlas has to offer. While you ve now had a good introduction to the new server controls included with Atlas, there are many aspects of Atlas that will have to wait for future articles. For example, there s a toolkit for making your own custom Atlas controls just in case you don t find one that meets your needs. The toolkit also comes with some nice controls that will surely be worth further investigation.

 

There is also an entire set of client-side controls that nicely complement the server controls detailed here. In fact, there is an impressive library of rich client-side functionality yet to be explored in Atlas, including an innovative XML syntax similar to ASPX declarations. Next month I ll introduce you to this client-centric way of doing Atlas development now that you re familiar with the server-centric techniques outlined here.

 

Atlas is the wave of the future. It s time to hop on and go for a ride.

 

The source code accompanying this article is available for download.

 

Steve C. Orr is an MCSD and a Microsoft MVP in ASP.NET. He s been developing software solutions for leading companies in the Seattle area for more than a decade. When he s not busy designing software systems or writing about them, he can often be found loitering at local user groups and habitually lurking in the ASP.NET newsgroup. Find out more about him at http://SteveOrr.net or e-mail him at mailto:[email protected].

 

 

 

Hide comments

Comments

  • Allowed HTML tags: <em> <strong> <blockquote> <br> <p>

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
Publish