Building Control Extenders using the AJAX Control

Toolkit

Adam Calderon

Application Development Practice Lead

Contact Information

• More info on InterKnowlogy:www.InterKnowlogy.com

• Contact InformationE-mail: adamc@InterKnowlogy.comPhone: 760-930-0075 x274Blog: http://blogs.InterKnowlogy.com/AdamCalderon

• About Adam Calderon• Microsoft MVP – C#• Microsoft UI Server Frameworks Advisory Council• Developer / Author / Speaker / Teacher

Agenda

• Overview of Toolkit• Development Features of the Toolkit• What are going to build?• Working with the

ExtenderControlBase class• Working with the BehaviorBase class• Adding Design Time support• Summary

Control Toolkit Overview

• Shared source project between Microsoft and the community (www.codeplex.com)

• Contains 30+ controls that are ready to use

• Builds on ASP.NET AJAX• Provides a development framework

for building extenders• Increases developer productivity

Toolkit Development Features

• Reliance on attributes to simplify development

• Rich set of .NET classes• Rich set of JavaScript classes• Support for animation• Visual Studio templates• Design Time support

What are we going to build?

• Unlimited Images• Configurable

Rotation Interval• Design Time support

for adding images, setting rotation interval

Features

Building Base Solution Demo

• Create a blank Solution• Add an ASP.NET AJAX Control Project• Add an ASP.NET Web Application

Project• Add AJAX Control Toolkit references

ExtenderControlBase Class

• Merges the server-side experience with the client-side experience

• Builds on functionality provided by ExtenderControl in ASP.NET AJAX

• Relies on attributes to perform ScriptBehaviorDescriptor and ScriptReference assignments

ExtenderControlBase Class Diagram

• Inherits from ExtenderControl• Provides support for ensuring

properties are assigned correctly

• Provides functionality for searching contained controls

• Provides functionality to set and get properties from control viewstate

• Provides support for client state

Script Behavior Attributes

Attribute ScriptBehaviorDescriptor Method

ExtenderControlProperty AddProperty

ExtenderControlEvent AddEvent

ElementReference AddElementProperty

ComponentReference AddComponentProperty

ScriptBehaviorDescriptor descriptor = new ScriptBehaviorDescriptor( "ImageRotatorExtender.ImageRotator", targetControl.ClientID); descriptor.AddProperty("rotationInterval", RotationInterval);

[ExtenderControlProperty]public int RotationInterval{ get { return GetPropertyValue<int>("RotationInterval", 3); } set { SetPropertyValue<int>("RotationInterval", value); }}

Using Attributes (No Override Required)

Using ScriptBehaviorDescriptor in GetScriptDescriptors Override

Script Reference Attributes

Attribute Description

ClientScriptResource Creates a ScriptReference for the specified script

RequiredScript Ensures referenced script is included

ClientCSSResource Includes a CSS file in the control

ClientScriptResource Creates a ScriptReference for the specified script

Using ScriptReference in GetScriptReferences Override

Using Attributes (No Override Required)

ScriptReference( "ImageRotatorExtender.ImageRotator.js", this.GetType().Assembly.FullName);

[ ClientScriptResource("ImageRotator.ImageRotatorBehavior", "ImageRotator.ImageRotatorBehavior.js“)] public class ImageRotatorExtender : ExtenderControlBase { ….. }

ExtenderControlBase Demo

• Adding properties• Exposing properties for behavior

assignment• Dealing with property values

BehaviorBase Class

• Builds upon functionality provided by the ASP.NET AJAX JavaScript classes

• Provides base services for client-side functionality including: • working with client state• asynchronous request events of the

Sys.WebForms.PageRequestManager

JavaScript Classes Diagram

BehaviorBase Demo

• Creating prototype class• Adding properties• Registering class

Design Time Support

• New Extender Wizard in Visual Studio 2008

• Use of System.Web.UI.Design namespace designers

• Use of PersistenceMode attribute• Use of ParseChildren attribute

Design Time Support Demo

• Adding Custom classes to work with Image information

• Adding designer support for adding images

• Adding attributes to enable list of images to be stored inline with the extender

Summary

• Toolkit enhances development experience making hard things easier

• Rich design time support provides a better experience for consumers of your controls

• Added functionality fills the gaps of the standard ASP.NET AJAX APIs

Book on ASP.NET Ajax Development

Contact Information

• More info on InterKnowlogy:www.InterKnowlogy.com

• Contact InformationE-mail: adamc@InterKnowlogy.comPhone: 760-930-0075 x274Blog: http://blogs.InterKnowlogy.com/AdamCalderon

• About Adam Calderon• Microsoft MVP – C#• Microsoft UI Server Frameworks Advisory Council• Developer / Author / Speaker / Teacher