Developing ASP.NET AJAX Components

1. Developing ASP.NET AJAX Components Hristo Deshev telerik

2. What we are after • Introduce the ASP.NET AJAX client-side platform; • Create script-rich ASP.NET controls; • Extend existing controls with behaviors. • Warning: lots of code ahead!

3. Why develop ASP.NET AJAX components? • Boost developer productivity: • help inexperienced script authors; • reuse, reuse, reuse. • Standardize client-side code: • achieve consistency across your code base; • get new team members up to speed quickly.

4. JavaScript OOP language services • Strictly defined types: • Inheritance and “virtual” methods • Interfaces • Properties • Events and delegates

5. JavaScript “classes” • Inheritance and constructor chaining:MyClass = function(param) { MyClass.initializeBase(this, [param]);} • Virtual methods and method overrides:dispose : function(){ MyClass.callBaseMethod(this,‘dispose'); //…}

6. DOM abstraction layer • DOM events: • $addHandler():$addHandler(this.nextButton, "click", this._nextButton_onclick$delegate); • $addHandlers(), $removeHandler(), $clearHandlers() • Event object helpers: • target element; • screen coordinates; • cancel default action; • stop event propagation, etc.

7. JavaScript components • Types that implement IComponent: Sys.UI.Control and Sys.UI.Behavior; • Can expose custom events; • Hosted inside a container: Sys.Application. • Discoverable: $find(“MyComponent1”); • Conform to rules for initialization, disposal, etc.

8. Component events • DelegatesFunction.createDelegate(listener, listener.ImageChanged) • Expose and raise events:add_imageChanged : function(handler) { this.get_events().addHandler("imageChanged", handler);}raiseImageChanged : function() {var eh = this.get_events().getHandler("imageChanged");if (eh) {eh(this, Sys.EventArgs.Empty);}} • Subscribe to an event:slideShow.add_imageChanged(imageChangedDelegate);

9. Demo Client-side components: the ImageSlideShow client control

10. Script Controls • Server-side controls associated with script code on the client. • Implement IScriptControl and register with the ScriptManager. • Provide a number of ScriptDescriptor objects to describe what should happen on the client.

11. Script Descriptors

12. Demo Building server-side script controls: the ImageSlideShow server control

13. Behaviors • Have nothing to do with IE behaviors; • Inherit from Sys.UI.Behavior; • Enhance existing controls by providing additional… behavior.

14. Extender controls • Server-side controls that extend another server-side control. • Implement IExtenderControl and register with the ScriptManager. • Register a client-side behavior component by providing one or more ScriptBehaviorDescriptor objects.

15. Demo Building behaviors and extender controls: HoverZoomBehavior and HoverZoomExtender

16. Additional Resources • The official ASP.NET AJAX site: http://ajax.asp.net/ • The ASP.NET AJAX Control Toolkit: http://ajax.asp.net/ajaxtoolkit/ • The ASP.NET AJAX forums hosted on http://forums.asp.net/ • My blog:http://blogs.telerik.com/blogs/twisted_asp_net/