Introduction

What happens when you take the pain out of Ajax? The j (JavaScript) in Ajax has always been difficult and painful. Here's an article about how to do Ajax with a framework that promises its users to not have to write JavaScript at all; Gaia Ajax Widgets. Here we'll create an Ajax Task Application without having to add one single line of custom JavaScript!

Here you'll see how to create complex Modal and non-Modal Ajax Windows, DataBind an Ajax-ified ASP.NET Repeater against a custom Object Data Source, and basically most of the GUI building blocks needed to do pretty advanced Ajax Applications. All written in C# and ASP.NET declarative syntax.

Figure 1: What you'll build!

View the Ajax Calendar Application live at Gaia's website!

Setup

Before we begin, there are a couple of prerequisites needed to get things up running. First you need to download Gaia Ajax Widgets. This requires you to register at the Gaia website. If you're really paranoid about letting go of your email address, you can also find the direct link to the Open Source version of the library from FreshMeat.net. I'd encourage you to register since this will give you the opportunity to receive emails about new versions and bug fixes in the Gaia Ajax Library.

If you downloaded the Trial version you should create a new Tab in your Visual Studio toolbox (Right Click in any empty space in your toolbox) and Drag and Drop the Gaia.WebWidgets.dll into this tab from your Windows (File) Explorer. If you downloaded the GPL version then either build it first or directly include that project into your Solution in the Solution Explorer. The GPL version does not come with a pre-built binary version of Gaia. Whichever way you choose will give you access to the Gaia Widgets from your Visual Studio Toolbox.

Time to start coding!

Create a new Web Site in Visual Studio and give it any name you wish. Now add up the reference to the Gaia.WebWidgets.dll. I now assume that you have access to the Gaia Controls in your toolbox. If you don't, then read the Setup part one more time.

Now you can drag and drop Gaia Controls from your toolbox onto the main surface of your webforms. There is one step you should do though before you start coding "for real" which is to make sure you've included the Mac OS X skin for your web page. First, make sure the Default.aspx is in Design View. Then, browse to the folder where you installed/unzipped Gaia and find the folder named TestWebWidgets/Skins. Drag and drop the folder named "mac_theme" and the file named "mac_os_x.css" onto the Web Site node in the Solution Explorer. This will actually copy those files and folders into your Web Site physically on the disc system.

Now drag and drop the "mac_os_x.css" file from your Solution Explorer and onto your Default.aspx page. This will actually create the <link ... /> stuff to include that CSS file on your webform. Now I could probably tell you every step needed to create the application by hand. Instead, I am not going to do that, but rather show you the code and comment on the most important parts.

Listing 1: The C# codebehind of the Ajax Sample

Code explanation

First you see the Page_Load method. In this method we set current date to show if this is not a postback. After that we render the calendar. Since all other event handlers that make changes to the "current view" render the calendar themselves, we don't need to render the calendar unless the current request is the first initial request. (IsPostBack == false)

Then you see the method called; items_ItemCommand. This is a special syntax that the ASP.NET Repeater needs in order to be able to trap events for databound WebControls that are included in the of the Repeater control. If you check the .aspx (further down on the page) you'll see that the Repeater has an event handler declaration called OnItemCommand that is mapped to this event handler.

OnItemCommand, together with the CommandName and the CommandArgument properties of the WebControls inside the Repeater, make it possible to trap events for any WebControls contained and databound inside our Repeater object. CommandName is normally some static string like "DeleteItem" or something similar. CommandArgument is some unique ID to know which item of the Repeater we're acting upon inside the OnItemCommand event handler. Both these values are passed on when the event is raised back on the server, so we can easily know what record in the list of items we're supposed to take action upon. This is a very nice feature of ASP.NET 2.0.

Then you see a private property which basically serves as our "database". I am not going to explain this one a lot. It only creates some default items to show for our Calendar Application on the initial hit of the page. For simplicity (if you're actually typing this out as we progress) you can just write Session["CalendarItems"] = new List(); instead of Session["CalendarItems"] = new CalendarController().GetMyCalendarItems(); like in the above code.

The RenderCalendar method is our "heartbeat" method. It is responsible for databinding our ASP.NET Repeater towards the items that matches the currently viewing date. This one uses a little bit of anonymous delegates magic in addition to one of the worst error detection routines you've ever see in your whole life so far.

But there is one very important step that occurs inside of it. That's the itemsContent.ForceAnUpdate(); statement. Without this line no changes to the current viewing items will render back to the browser. If you, in a Gaia Container Control, make changes to the Controls Collection, then you must signal this back to the core Gaia Runtime by calling this method. This just makes sure that the Gaia Control is re-rendered and everything shows up as expected. Gaia is not able to determine changes to any control's child Controls collection without this method call.

The next three methods are mostly self-explanatory. The newApp_click method is interesting. Not due to its complexity but due to the logic it runs. If you look further down on the .aspx sample code you'll see that the gaia:Window object called newAppWindow is invisible when it's initially rendered. The way to make any Gaia Ajax Control visible - including the Gaia Ajax Window - is just to set its Visible property to true.

The ok_Click method creates a new CalendarItem and adds it into our "database". Then it hides the Gaia Window needed to collect that data and re-renders the Calendar's current view.

Listing 2: The .ASPX code for the sample

ASPX explanation

This code only includes the important parts for this sample. The start and the end of the whole page have been clipped away for clarity. The really important thing to notice here is that the ASP.NET Repeater object is contained inside a Gaia PlaceHolder. This is mandatory in order to be able to update the Repeater content when the Repeater is databound. If you look further up, when we call the ForceAnUpdate method we're basically telling the Gaia PlaceHolder to re-render its content. This will ensure that the Repeater will be re-rendered and shown back to the client.

Summary

This Ajax Tutorial has covered how to use Gaia Ajax Widgets to create a minimalistic Task List Ajax Application. We talked about the ForceAnUpdate method, Gaia Window; how to setup the Visual Studio Environment and how to download and retrieve Gaia Ajax Widgets.

References and Downloads

• The code you see in this Ajax Tutorial can be downloaded as part of the samples that follows together with Gaia Ajax Widgets. The library is free to download and comes in an Open Source version that is free to use.
• Download Gaia Ajax Widgets

About Thomas Hansen

Sorry, no bio is available View complete profile here.

---

Discussion

Subject	Author	Date
help needed	Surej Sathyadevan	10/25/2008 1:16 AM
i hav downloaded gaia but couldn't find "mac_os_x.css"....... Reply | Permanent link

---

Please login to rate or to leave a comment.