ASP.NET Gaia Ajax Window Tutorial

An Ajax Gaia Window is basically our attempt in trying to mimick a "normal" desktop Window, the ones you are so used to that pops up when you fire your CD-rom burning software or when you're browsing the files on your harddrives. It's easy to skin (if you know your way around in Photo Shop or something similar) and it's quite flexible. Probably one of its best features in addition to that you can show as many as you like on a page at once is that it's got the option of showing itself in "modal" form. Modal means basically that nothing "underneath" it will be possible to interact with for the end user.

The code

First you need to link against one of the skin files, we assert for this tutorial that you have included the mac_os_x skin from Gaia Ajax Web Widgets. We have also stripped away the rest of the page aspx code. We also assume that you've included a reference to the Gaia Ajax Web Widgets dll. Scroll down to see the code.

Walkthrough of the code

Now there's a couple of things to notice here, the first one is the Register Assembly "tag" that basically includes the Gaia Ajax Web Widgets dll onto this page. This is normal asp.net code and something you must do for all web controls projects you reference and want to use. The TagPrefix tells the .Net compiler what xml namespace to put the Gaia controls in, if you use xxx here then you must use xxx:Window to instantiate the window further down. Now to the interesting parts...

The Width, Height, ID and runat="server" means the same as in all other WebControls but the rest of the properties are specially treated. First of all the CssClass which is a tag you'll find in all WebControls. For Gaia Window it in addition to telling the "normal" stuff to the control ALSO defines what skin to use. If you make your own skin here called "Vista2" then you need to put "Vista2" inside the CssClass property.
The OnClosing is the name of your codebehind "Closing" Event Handler. This method must have a signature in the form of protected void Window1_Closing(object sender, Gaia.WebWidgets.WindowClosingEventArgs e) in your codebehind file. The WindowClosingEventArgs is basically just a normal EventArgs object except that it also have the "ShouldClose" property. Now within this event handler you can actually say that you don't want your window to be closed. Good reasons might be the user has typed in some "invalid data", let's say that you have a "Customer Edit" Window and the user types in an invalid address for the customer, then you can say within your Event Handler that the Window should not close but rather display an error message by typing "e.ShouldClose = false;".
The rest of the properties are also quite nifty, the Draggable defines if your window should be possible to move around on the screen or if it should be "locked" in its original position. If you set this one to true you can move the window around on the screen just like it was a normal desktop window like for instance the browser window you're inside now. The Closable property defines if the window should have an "x" displayed from which you can actually close the window from. Note that if you have this property you will still execute the OnClosing event handler and from it you can still deny the user from closing the window by setting the ShouldClose to false.
The Resizable property defines if the window should be possible to resize by the user, if it's true the user will get a resizable cursor on his mouse when putting the mouse in the lower left corner of the window and by clicking, holding and dragging the mouse he can resize the window, yet again just like a "normal" desktop window.
The last and probably nicest property is the "Modal" property, if this is "true" then the user cannot access any of the controls "behind" the window. One nice things to notice about this property is that if you from within the above window in e.g. a Gaia Ajax Button shows another window which also is modal, the framework itself will take care of making the "newest" window be the only one that's actually possible to interact with and click controls on.

The codebehind

As you can see there's really not much code to explain, and it's mostly been explained in the upper parts... :)