Click here to Skip to main content
15,350,008 members
Articles / Web Development / ASP.NET
Posted 6 Dec 2007


4 bookmarked

Lightning Fast Ajax Development with Gaia Ajax Widgets

7 Dec 2007CPOL5 min read
In this article, Tobin Harris introduces a new Ajax library for ASP.NET and explains its benefits over Microsoft ASP.NET Ajax. He demonstrates an easier approach to .NET Ajax applications, even for those without serious JavaScript skills.

This article is in the Product Showcase section for our sponsors at CodeProject. These articles are intended to provide you with information on products and services that we consider useful and of value to developers.

Image 1

This is a showcase review for our sponsors at The Code Project. These reviews are intended to provide you with information on products and services that we consider useful and of value to developers.

Lighting Fast Ajax Development for ASP.NET

Gaia Ajax Widgets gives you a powerful alternative to Microsoft ASP.NET Ajax. It provides a rich set of controls for building Ajax applications whilst allowing you to focus on writing .NET code rather than worrying about JavaScript.

In this article, I’ll introduce Gaia and explain how you can benefit from using it today. I'll also demonstrate some of its neat features and some of its advantages and disadvantages when compared to Microsoft ASP.NET Ajax.

Simple to Install

Have you ever struggled getting to grips with a new library or toolkit? The Gaia team set out to make Gaia Ajax Widgets fun and easy, so getting started should be child's play.

Installation is simply a matter of downloading and running the Gaia Ajax Widgets installer.

Once installed, you get more than 29 Ajax controls and widgets available to you, as shown in Figures 1 & 2.

Figure 1: Gaia gives you familiar controls that have been Ajax-enhanced

Screenshot -

Figure 2 shows some of the more advanced widgets to be found in Gaia, which I'll discuss a little later in this article.

Figure 2: Advanced Gaia widgets let you add rich features to your applications

Screenshot - File2.gif

The next step is simply to start using these controls in your applications. Just drag them onto your pages and begin coding!

Comparing Gaia to Microsoft Ajax

Gaia controls are Ajax-enabled out of the box. You can now create great Ajax functionality simply by dragging controls onto your form and using your existing knowledge to write standard ASP.NET code in your code-behind pages.

But what's so special about that? To answer that question, let's compare the Gaia approach with that of Microsoft ASP.NET Ajax.

Firstly, Gaia does not need the ScriptManager or UpdatePanels. Instead, each control has been meticulously re-engineered to include sophisticated Ajax functionality as soon as you put them on the page. Web Services are not needed when implementing Ajax features with Gaia.

This makes development fast and fun, and the learning curve is tiny.

A Sample Page

To demonstrate how Gaia is used, Figures 3 and 4 show a simple ASP.NET Web Form. In this form, the user can type some text into a text box. As they type each letter, the letters appear below in reverse.

The interesting thing about this sample is that the code that reverses the text is run on the server in the code-behind. The green label is updated dynamically in real-time using Gaia Ajax.

Figure 3: ASPX Page in browser, with cool Ajax label being updated as the user types.

Screenshot - File3.gif

Lets look more closely at the code. You'll see we have a single method: TextBoxWord_TextChanged. This is an event handler which is called each time the user types a letter in the Gaia TextBox control. The handler method takes the user's text from the TextBox, reverses it and then shows the reversed text on screen by setting the Text property of the Gaia Label (line 14).

Figure 4: ASP.NET code-behind using Gaia - no ScriptManager, UpdatePanel, Web Services or JavaScript required

Screenshot - File4.gif

That's all there is to it. No complex JavaScript, no UpdatePanels or ScriptManagers. Gaia is taking care of the complex JavaScript and .NET plumbing to let the Ajax happen.

Did You Know?

When you use Microsoft Ajax, an UpdatePanel has its contents completely replaced after an Ajax call-back. With Gaia, we use small bursts of JavaScript instructions to update the HTML document model. This makes Gaia extremely fast and lightweight.

No JavaScript Plumbing Required

By definition, Ajax requires complex JavaScript plumbing to make it work. Gaia lets you forget about all this and focus on being creative using the familiar ASP.NET approach. Behind the scenes, Gaia harnesses the power of the famous Scriptaculous and Prototype libraries. Even though you won't be writing JavaScript, you can be sure that the JavaScript running in your applications is world-class.

Screenshot - File5.gif

You don't even have to worry about including JavaScript files in your ASPX pages. Gaia intelligently does this at run-time. It also it ensures that only the minimal amount of compressed JavaScript is included for each page and calculates this based on the controls you are actually displaying. This keeps your pages lightweight and highly responsive.

Introducing the Advanced Widgets

Here's a complete list of the advanced widgets shown in Figure 2.

  • TreeView
  • Rich Edit
  • Auto Completer
  • Menu
  • Accordian
  • Date Time Picker
  • Tab Control
  • Gaia Window
  • Wizard Control
  • ViewPort
  • Fish Eye Menu
  • Dynamic Image

You can view samples of these online. Samples are all included in our free trial download.

Figure 5: A sample page showing some custom built resizable chart controls.

Screenshot - File6.gif

Build Your Own Widgets

Gaia is designed to be used as building blocks for your own customised widgets. No Gaia control is sealed, so you can extend them as you please.

We built this Ajax enabled Slider using only a handful of code. The Gaia DraggablePanel formed the base and we used an Image and some custom CSS. The slider is available in the latest release of Gaia, of course, because this is an Ajax control. After the slider is dragged, we respond to the event in the server-side code. This gives us many options; we could write something to a database or DataSet, call a web service or simply use Gaia to update other controls on the Page.

Figure 6 - Custom built Slider control was very easy to do

Screenshot - File7.gif

You can see a sample online or download a sample as part of our free trial.

Community Spirit

Gaia is cultivating a fantastic user community. With an enthusiastic .NET fan base, Open Source LGPL licenses and 100% Mono support, Gaia is benefiting from massive developer feedback.

This means great forum response times and a terrific product development rate.

We look forward to welcoming you to the Gaia community!

90 Day Money Back Guarantee

We’re confident that you’ll love our library as many others do. If you’re not hooked within 90 days of purchasing, we’ll give you your money back!

This document was produced using a few tools we love: Fastone Screen Capture for screen shots and Google Docs Beta for collaborative writing.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

United Kingdom United Kingdom
No Biography provided

Comments and Discussions

-- There are no messages in this forum --