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.
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).
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 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). 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. 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]. Control Extenders
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. 
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 ...
