Gaia Ajax 3.5 for ASP.NET

CloserLook

Gaia Ajax 3.5 for ASP.NET

Much More thanJust another ASP.NET Library 

By Dino Esposito

Look around and you ll find quite a few controllibraries to ease and expedite the development of ASP.NET pages andapplications. Each library offers its own set of customized controls designedto give you a better design-time experience, particular functionalities notprovided by ASP.NET stock controls, or a richer programming model. Recently,nearly all control libraries have been improved to support AJAX capabilities sothe way in which each library supports AJAX has become an important factor todifferentiate libraries.

So what s exciting in Gaia Ajax 3.5 to justify areview? What makes this library shine among the plethora of ASP.NET controllibraries available today?

Doing AJAX Today

I started with AJAX about four years ago when AJAXwas mostly a relatively simple piece of JavaScript code to place anXMLHttpRequest call. Since then I ve changed my mind many times about what wasthe best way to add AJAX capabilities to an ASP.NET application. For example, Ifirst welcomed ASP.NET partial rendering, because it allows us to add AJAX toexisting ASP.NET applications with a very short learning curve. Then I turnedmy attention to rich client-side programming environments based on JavaScriptextensions. AJAX means more power to the client; when the client is thebrowser, AJAX means more JavaScript code inside web pages.

However, the need for more JavaScript code in webpages doesn t mean that you, as a developer, have to write it. A good controllibrary can do that for you. Wouldn t it be nice if you could just keep onwriting ASP.NET code as usual and still get asynchronous requests going on?This is what makes Gaia AJAX effective, extremely easy to use, and prettyunique among commercial ASP.NET libraries.

Gaia AJAX at Work

Usually when you are going to present an ASP.NETcontrol library you tend to focus on the richest controls in the box, such asadvanced grids, hierarchical tree-based views, calendars, and so forth. To getthe gist of Gaia AJAX, instead, you should start by looking at the rewrite oftwo of the most popular base controls in ASP.NET the Button control and the Labelcontrol. Here s an interesting piece of code:

OnClick="Button1_Click"Text="Click to experience Gaiaware"/>

Would you say there is any AJAX in this code? Atfirst sight, one would say that a regular postback occurs that refreshes thepage as the user clicks on the button. The code-behind class confirms thisfirst impression. The code looks a lot like classic ASP.NET code, with no AJAXaround:

protected void Button1_Click(object sender, EventArgs e)

{

Label1.Text +="
You typed " +

TextBox1.Text +"";

}

The trick is in the work performed under the hood byGaia controls. In the first place, Gaia Ajax controls emit a JavaScript librarythat contains a client-side object model for each featured control (see Figure1).

Figure 1: Items downloaded by a simpleGaia-enabled web page

Note that all the CSS references in the figure areintended for development purposes, which allows you to customize the appearanceof each control. In production, it is recommended you group them all in to asingle CSS file (such a big CSS file, however, is provided with the samples).

The Gaia Button control inherits from the classicASP.NET Button control, and has a few extra properties that support richbehaviors, such as resizing and drag-and-drop. In terms of posting, as well,the Gaia Button control is nearly the same as a classic ASP.NET Button control.The button instructs the browser to submit the current form. At this point,though, the library intercepts the request and runs it asynchronously.

The request is handled on the server as a regularpostback and fires the standard page lifecycle. The response returned to theclient, however, contains a description of the changes made. Changes areexpressed in terms of JavaScript instructions that address the client-sideobject model of the Gaia controls. The response is limited to a few hundredbytes (see Figure 2).

Figure 2: Typical response after a Gaiapostback 

Gaia Ajax vs. Partial Rendering

Gaia Ajax 3.5 doesn t push the so-called pureAJAX approach, which would require a lot of JavaScript on the client to fireremote calls, process JSON streams, and update the HTML user interface. In away, Gaia Ajax is much more similar to ASP.NET partial rendering. However,quite a few differences exist with partial rendering, too. Once you pick upGaia Ajax, you no longer need ScriptManager or UpdatePanel controls. You simplyuse Gaia controls in lieu of ASP.NET controls even for basic tasks that involvebuttons, text boxes, list boxes, and labels. Gaia controls offer the sameprogramming interface as ASP.NET controls; for developers, it still looks likeregular ASP.NET. However, any postback now magically results in an AJAX asynchronouspostback.

What about the viewstate? At this point I mustmention a unique feature of Gaia Ajax. Yes, architecturally speaking, it isquite similar to classic partial rendering, but it relies on a radicallydifferent implementation that ensures much shorter payloads and even partialviewstate rendering. Yes, you got it right. Gaia controls not only return(their own autogenerated) JavaScript instructions instead of markup, they alsoreturn only the section of the viewstate that has really changed. I mustconfess that my interest in Gaia Ajax increased significantly when I figuredout this unique behavior.

Gaia Ajax vs. Other Libraries

As you can see from Figure 3, Gaia provides ad hoctemplates to use in Visual Studio 2008 and creates a custom tab in the VisualStudio 2008 toolbox.

Figure 3: The Gaia toolbox in Visual Studio2008 

The Gaia toolbox doesn t list a huge number of richcontrols like those you may perhaps find in other libraries. However, you havecontrols like TreeView, Toolbar, Accordion, and the useful Window control. TheWindow control injects the JavaScript code necessary to display a popup windowwhose child controls will post back as usual in ASP.NET programming except thatit all works asynchronously. It should be noted that the Window control doesn treally create a classic popup browser window that can be blocked by somebrowser policy. In Gaia, a popup is merely a DIV tag displayed on top ofeverything else, with or without modality. Many Gaia controls feature theAspects collection property, through which you can add such aspects asresizability, draggability, and moveability:

protected void Page_Load(object sender, EventArgs e)

{

// This makes thespecified resizable at run time

Panel1.Aspects.Add(newAspectResizable());

}

Gaia also offers a nice collection of visualeffects you can enable through the Effect class, as shown here:

protected void Button1_Click(object sender, EventArgs e)

{

new Effect(Panel1,Effect.TypeOfEffect.Highlight);

}

The net effect of the preceding code is that whenthe Button1 element is clicked, the specified panel is highlighted. Because ofthe internal mechanics of Gaia controls, the interoperability between Gaiacontrols and other ASP.NET controls is limited. In other words, you can tsimply click on a regular ASP.NET button to trigger a Gaia postback. Likewise,you can t simply trigger a Gaia postback and update a classic Label control. Toenable a sort of interoperability between Gaia controls and ASP.NET controls,you need to wrap the ASP.NET control in to a Gaia container control, such asthe Gaia Panel control. Next, in the Gaia event, call the ForceAnUpdate methodon the panel to refresh any control in the area:

protected void Button1_Click(object sender, EventArgs e)

{

// Modify any ASP.NETcontrols here

:

// Force an update ofthe area

Panel1.ForceAnUpdate();

}

You don t see a grid control in Figure 3. Does thismean that with Gaia you can t produce grid-based views? GridView and data-boundcontrols are fully interoperable with Gaia as long as you place them in a Gaiacontainer control. Once you put, say, a GridView in a Gaia container control,you can have the grid post back and generate in extremely short responses. Gaiacontainer controls include Panel, MultiView, Window, and ExtendedPanel. A fullexample can be tested live at samples.gaiaware.net/Ajax-GridView.aspx.

Characteristics

In summary, Gaia Ajax proposes an alternative wayof doing AJAX in ASP.NET applications. It doesn t offer a rich JavaScript libraryfor you to program explicitly. You will keep on writing your pages using C# orVB code in combination with classic ASP.NET markup. Any apparently old-stylepostback will become an AJAX postback. This is not obtained primarily bywrapping ASP.NET controls in special containers, such as UpdatePanel, butrather by using a new set of basic controls that behave in an AJAX-compliantmanner. Any data-binding skills you may have will be fully reusable. And youwon t write a single line of JavaScript (until, like in classic ASP.NET, yousee a special benefit in doing so).

To summarize in one sentence my feelings about GaiaAjax, I d simply say that, in my experience, Gaia Ajax makes AJAX programmingas easy as it is to program for the web with ASP.NET. Finally, note that GaiaAJAX is not currently designed to work with ASP.NET MVC.

Rating:

Website:gaiaware.net

Price:US$195 per developer; one-year subscription, US$595 per developer

Dino Esposito ([email protected]) is an architect at IDesign,specializing in ASP.NET, AJAX, and RIA solutions. Dino co-authored Microsoft .NET: Architecting Applicationsfor the Enterprise and MicrosoftASP.NET and AJAX: Architecting Web Applications.