Ajax Windows widgets have become fairly popular lately, much of the reason is probably that popup blockers came sneaking around some years back ago. Also lately several Ajax Frameworks including our own
Gaia Ajax Widgets now have support for fairly advanced Ajax Windows. Here I explain how to use our Gaia Ajax Window in some very easy steps.
Download GaiaFirst you must
Download Gaia Ajax Widgets, this requires you to register your email address. If you're afraid of doing this, don't be! We will never share your email address with anyone and we only use it to send update notifications and news to you. Normally this means about one email per month MAX! Note that for this tutorial I'm assuming that you've downloade the TRIAL version of Gaia and not the Open Source - GPL version.
Creating a new ASP.NET WebSiteI'm assuming here that you're using Visual Studio, but you could just as easily use MonoDevelop and MONO instead of Visual Studio. If you need a short (VERY short) tutorial on how to install Mono on Ubuntu Linux I've written an article about that earlier,
How to run an ASP.NET WebSite on Mono which might be of some rudimentary help. If you want to use the Visual Studio Web Express Edition it can be found for free at
the Visual Web Developer website.
Note that Gaia ONLY works with Visual Studio 2005 and the latest edition of Mono though! You can't use Visual Studio 2003 or an "old" version of Mono or MonoDevelop.
Now assuming that you've got Visual Studio installed and are ready to start coding...
1. Create a new Web Project and call it "whatever". Make sure you create a C# Web Site.
2. Add a new tab in your Toolbox and call it e.g.; "Gaia Ajax Widgets".
3. Open an instance of the File Explorer and find the directory that you've installed Gaia into. In this directory you'll find another directory called "Library". And inside this directory you'll find a DLL called Gaia.WebWidgets.dll.
Drag and drop that DLL into the TabSheet you've created in your toolbox in Visual Studio! This will make lots of controls appear in that tab and our Gaia Ajax Window will be one of those.
4. Now drag and drop a Gaia Ajax Window (Window in your toolbox) onto the main design area of your webform which normally is called Default.aspx!
5. Press F5 just to see that everything works...
Now on to the interesting parts...The Ajax Window in Gaia is pretty flexible, especially when it comes to
skinning! In your Gaia Install folder on disc you'll find a folder called "TestWebWidgets", inside that folder there's a folder called "Skins". Usiong the File Explorer Drag and Drop that folder onto the root node of your WebProject. This will actually copy that folder into your WebProject root folder on disc and include it in your "project". Now to add a skin to your Gaia Window we must make sure you've included the CSS files containing the skin you choose, we're going to use the Mac OS X skin for this tutorial. Drag and drop the "mac_os_x.css" file onto the design view of your WebForm called Default.aspx. This ensures that the Gaia Ajax Window skin mac_os_x will be included in your output HTML code. Now switch to HTML view for your Default.aspx webform and add up the line;
<link rel="Stylesheet" href="Skins/mac_os_x.css" />"...at the TOP of this file inside the
<head> element!
Now just set the CssClass property of your Ajax Window object from design view to
"mac_os_x" and you should be ready to run the application again. Click F5 and enjoy! Now your Ajax Window should appear in the browser no matter which browser you're using like something similar to the above screenshot, though without the controls inside of it.
Embedding Controls inside your Ajax WindowFrom design view of your webform now drag and drop a Gaia Button onto the main surface of your Gaia Ajax Window. Set the text to "Click me..." and double click the button. When you double click the Ajax Button an event handler for the Click event will be generated for you and from this event handler we can write code to manipulate the WebPage controls. But before we do thatwe're gonna add an Ajax Label onto the design surface of the Gaia Ajax Window. Switch back to design view and drag a Gaia Ajax Label onto the Ajax Window main surface. Just drop it anywhere next to the Ajax Button. Then remember the ID or Name of that button (probably by default it'll be named; "button1") and switch back to code view. Inside the Click Event Handler that was created for you in the previous step now add the code;
button1.Text = "Hello Ajax World!";And now you can click F5 again and enjoy the fruits of your work! :)
Wrapping up...What we have just done now is in fact more or less impossible in ASP.NET AJAX simply because inside an ASP.NET AJAX Window (ASP.NET AJAX doesn't technically HAVE an Ajax Window but they have something which is called a Popup Control in the Toolkit Extension that "resembles" the Gaia Ajax Window) it's impossible to add complex controls that does Ajax Callbacks like we've just done. In fact the Popup Control can only have ONE response and it is expected to be "closed" when that response is created. Inside a Gaia Ajax Window you could have ANY Ajax Controls you'd like to have, you could in fact have a Button which when clicked made another Ajax Window Visible, and inside this Ajax Window you could have an Ajax DropDownList Control and when something was choosen inside the DropDownList control you could show yet another window and so on. And in all of these steps you could have lots and lots of really complex controls and not only would it work 100% without you having to worry about any "internals" or anything, but the different JavaScript files for the different Ajax Control would not be included on the browser side before they were needed and so on. After a while getting used to the "new code model" in Gaia you'd probably feel that developing using Gaia is more like developing using WinForms than ASP.NET, at least many of our users tells us just that. I hope you've had fun and that this tutorial was useful to read. For questions feel free to comment (prefered) or send me an email to
thomas@frostinnovation.noOh yeah, btw for a more "thourough" comparison of the difference between Gaia Ajax Window and ASP.NET AJAX "Window" see this blog post which tries to enlighten some of them;
Ajax Window for ASP.NET and if you're just too lazy to build this stuff yourself you can see the example (and the code) from the screenshot at our
Ajax Accordion Sample pageCheers,
Thomas :)