WebDD: slides and demo code

As promised earlier, here are the slides and the sample code from my WebDD talk.

The code builds an image slide show control and an extender that will zoom its target in on mouse hover and zoom out on mouse unhover doing that with a fancy animation stolen from the AJAX Control Toolkit. Some info that you may find useful when reading the code in no particular order:

• The ScriptControls project is the real control library. It contains the JavaScript and server-side controls and is being used by some of the pages in the demo site (ImageSlideShowServer, ImageSlideShowUpdatePanel, HoverZoomExtender).
• The DemoSite project is well... a demo site. It contains several pages that have the JavaScript code in different stages of its development. All *.aspx files have their corresponding code-behinds in *.aspx.cs and their accompanying script files in *.aspx.js:
• ImageSlideShowEmptyClass: this one shows a simple class that inherits from Sys.UI.Control.
• ImageSlideShowDispose: here we demonstrate resource disposal triggered both by a window close and an update panel refresh. I've kept the JavaScript error you saw on the demo, so that it reminds me to be more careful in the future. It is caused after an update panel refresh when our code tries to recreate both controls and ASP.NET AJAX complains that you can't have a control for a DOM element that already has a control attached (We should not recreate the control outside the update panel).
• ImageSlideShowEvents: here we have code that handles DOM events using the $addHandler() API and in turn raises a custom component event that is handled by a plain JavaScript object living on the page.
• ImageSlideShowServer: the working server control. Look, Ma, no JavaScript!
• ImageSlideShowUpdatePanel: the server control, happily living in an UpdatePanel.
• HoverZoomExtender: an image of a pair of lazy pandas chewing at bamboo sticks being extended to provide a zoom in animation on hover.

You can extend the ImageSlideShow control by adding an extender for every image. Just add this code to the end of the AddSlide() method:

////////////////////////////////////////////////
HoverZoomExtender imageZoomer = new HoverZoomExtender();
imageZoomer.ID = imageID + "ZoomExtender";
this.Controls.Add(imageZoomer);
imageZoomer.TargetControlID = slideImage.ID;
imageZoomer.ZoomFactor = 1.5;
////////////////////////////////////////////////

That's it! Happy coding!