Random Rotating Images with Gaia

The aim of this article is to show easy it is to create random, rotating images using the Gaia Ajax Widgets Framework. Gaia provides a suite of Ajax-enabled server controls that makes creating Ajax applications extremely easy. No javascript coding is required when using Gaia; you simply leverage your existing ASP.NET programming skills.

Gaia has a whole range of server controls that are Ajax-enabled. These controls include Timer, Autocompleter, InPlaceEdit, Button, DateTimePicker, DynamicImage, Effects and more. However there is no gridview or datalist that is Ajaxified. All of the Gaia controls are fully compatible with the standard ASP.NET server controls as well as the MS AJAX framework and AjaxControl Toollkit. But as the developers behind Gaia say on their websites: "it is really more of an alternative and a competitor to ASP.NET Ajax than a "plugin" or "extension" to it." Gaia uses the well known Prototype.js library so if you are using other Javascript libraries you could potentially have some compatibility issues. Read this article for a solution to fix the jQuery, Gaia and Prototype compatibility issue.

To use Gaia you first need to download it from http://www.ajaxwidgets.com. There are two version: 1) the GPL licensed version and the 2) the commercial version. The information on their website can help you decide which version to use. For this article you can download the GPL version for development on your local machine. Once you have downloaded Gaia and unzipped the file, you will need to add Gaia.WebWidgets.dll to the toolbox.

Once that is done you will need to make some images which will be rotated. I recommend putting these rotating images in their own subfolder since we will be reading these images directly from the filesystem.

Next, create a new WebForm. In this webform add a Gaia Timer control and a Gaia Image control. Set the milliseconds property on the Timer control to whatever value you desire. Also set the ImageUrl of the Gaia image control equal to the path of one of the images you wish to rotate. The reason for this is that this image will be the first one displayed on page load. Your code will look something like this:

The next task is to write the code behind logic that will read the images we wish to rotate directly from the filesystem.

        Public Sub GetNextImage(ByVal sender As Object, ByVal e As System.EventArgs) Handles timerImgRotate.Tick

        Dim PathToFolder As String = Server.MapPath("../images/imagerotation/")
        Dim RotatingImgFiles As String() = Directory.GetFiles(PathToFolder)
        Dim rnd As New Random()
        Dim file As New FileInfo(RotatingImgFiles(rnd.Next(0, RotatingImgFiles.Length)))
        gimgRotate.ImageUrl = "../images/imagerotation/" & file.Name

     End Sub

You can see a live demo here: http://riderdesign.com/photos/default.aspx. The header image rotates every 10 seconds.

Now you may be asking why didnt I just use MS AJAX to do this. In the beginning for the photo gallery i actually did use MS AJAX - specifically the Timer control (MS version) and UpdatePanel. However i would intermittently get an error as shown by the following image:

MS Ajax Error Message

After much time i was not able to find the source of the error. This would only occur intermittently but at the same time the images would rotate. This was enough of a reason to try and use Gaia.

Using Gaia, it took 2 server controls and one code behind sub to show random rotating images from the filesystem. With MS AJAX, it took an updatepanel, a timer control, an asp:image control, and the code behind logic to do the same with the additional issue of an intermittent error.

Gaia Ajax Widgets Framework is very viable alternative to MS AJAX and provides a tremendous amount of functionality out of the box. Gaia allows you to leverage your existing server side language of choice be it C#, VB.NET or even IronPython to rapidly Ajax-enable any ASP.NET application.

Are there any Ajax tasks you want to see implemented using Gaia? Send an Email.