asp.net ajax component development

36
ASP.NET AJAX Component Development San Diego .NET User Group Meeting February 6, 2007 Joel Rumerman

Upload: chui-wen-chiu

Post on 14-May-2015

1.107 views

Category:

Documents


6 download

TRANSCRIPT

Page 1: Asp.Net Ajax Component Development

ASP.NET AJAX Component Development

San Diego .NET User Group MeetingFebruary 6, 2007Joel Rumerman

Page 2: Asp.Net Ajax Component Development

Topics

• AJAX Overview

• ASP.NET AJAX Overview

• Extending ASP.NET AJAX

• Developing ASP.NET AJAX Components

Page 3: Asp.Net Ajax Component Development

AJAX Overview

• Asynchronous JavaScript And XML• The ability to execute a request to an HTTP endpoint

(or SOAP) in an out-of-band fashion from a web page and receive a response and do something with that response

• Asynchronous: talk to end points using a request - callback pattern

• JavaScript: language used to execute the AJAX request and handle the response

• XML (XSL, XSLT): data transfer structure for data being passed to and from the server

Page 4: Asp.Net Ajax Component Development

Other AJAX Pieces

• XMLHttp: browser object that provides the ability to perform asynchronous requests. • browsers implement XMLHttp object in

different ways

• JSON: JavaScript Object Notation• Defined by a BNF• Used to pass data to and from the server• Lighter-weight compared to XML

Page 5: Asp.Net Ajax Component Development

What is ASP.NET AJAX?

• A new web development technology that integrates cross-browser client script libraries with the ASP.NET 2.0 development framework• Cross-browser client script libraries

• Object-Oriented JavaScript Framework• .NET like Programming Constructs

• Types• Inheritance• Interfaces• Events

• Standardizes Client Programming Across Browsers• Server side ASP.NET features facilitate adding client behaviors

to web pages • Classes contained within the System.Web.UI namespace

• ScriptManager, ScriptReference, ScriptManagerProxy, UpdatePanel, Timer

• Server code isn’t required

Page 6: Asp.Net Ajax Component Development

The State of ASP.NET AJAX

• On January 23, 2007 1.0 Shipped• Fully supported Microsoft product

(24x7x365) for 10 years• Documentation, forums, downloads, and

showcase at http://ajax.asp.net• Client source code available under

Microsoft Permissive License • Server source code available under

Microsoft Resource License

Page 7: Asp.Net Ajax Component Development

Where is ASP.NET AJAX Going

• Version 2 integrates directly with Orcas• Better IDE experience

• JavaScript Intellisense• Debugging support• Better design time integration

• More Features• Client Side Data Binding• Gadget Support• Better Web Part support

Page 8: Asp.Net Ajax Component Development

Extending ASP.NET AJAX

Page 9: Asp.Net Ajax Component Development

Goal

• Create reusable custom ASP.NET AJAX Client Components and ASP.NET Server Controls that manage those components

Page 10: Asp.Net Ajax Component Development

Types of Custom ASP.NET AJAX Client Components

• Components• Typically non-visual• Not directly associated to DOM Elements• Derive from Sys.Component

• Behaviors• Extend the behavior of an existing DOM Element• Derive from Sys.UI.Behavior

• Controls• Represents a DOM Element as a client object• Derives from Sys.UI.Control

Page 11: Asp.Net Ajax Component Development

Extending ASP.NET AJAX Process

• Client Development• Defines something that should happen in the browser • Uses the ASP.NET AJAX prototype programming

model• Relies upon the ASP.NET AJAX Client Runtime

• Server Development• Developed using .NET code • Relies upon new ASP.NET AJAX libraries to register

the JavaScript that manages the client component

Page 12: Asp.Net Ajax Component Development

Steps to Create Client Components

• Declare namespace• Declare new class• Declare internal members*• Define and implement properties*• Define and implement methods• Define events• Override base class methods^• Register class with framework• Declare inheritance from base class^

Page 13: Asp.Net Ajax Component Development

Steps to Create Server Control

• Declare control

• Inherit from base class (i.e. control, label, panel, etc.)

• Override base methods to emit JavaScript to control client component as necessary

Page 14: Asp.Net Ajax Component Development

Developing ASP.NET AJAX Components

Page 15: Asp.Net Ajax Component Development

Steps to Develop a Component

• Setup the Environment

• Develop the client code

• Develop the server control

• Wire up the server control to the client code

Page 16: Asp.Net Ajax Component Development

Setting Up the Environment

• Creating an ASP.NET AJAX Enabled Project• Included libraries

• System.Web.Extensions.dll• System.Web.Extensions.Design.dll

• Web.Config Settings• Section Groups• Assembly Inclusion• HttpHandlers • HttpModules

Page 17: Asp.Net Ajax Component Development

Develop the Client Code

• Register a Namespace

• Declare the Component

• Initialize inheritance from the base class

• Register the Component with the runtime

• Inherit from Sys.Component

Page 18: Asp.Net Ajax Component Development

DEMOCreating a New ASP.NET AJAX Component

Page 19: Asp.Net Ajax Component Development

Component’s Lifecycle

• An ASP.NET AJAX Component is managed by the ASP.NET AJAX runtime just like an ASP.NET Control is managed by the ASP.NET page handler

• Just like the ASP.NET Control, the ASP.NET AJAX Component goes through a lifecycle• ASP.NET Server Control

• OnInit• CreateChildControls• PreRender• Render• Etc.

• ASP.NET AJAX Component• Initialize• Dispose

Page 20: Asp.Net Ajax Component Development

DEMOAdding the Initialize and Dispose Method Overrides

Page 21: Asp.Net Ajax Component Development

Registering with the Runtime

• Our component relies upon the ASP.NET AJAX Framework Runtime• Runtime must be loaded before our

component’s code is parsed• Use ScriptManager to add component

definition to page• Guarantees that our component will be parsed

after the Runtime is loaded

Page 22: Asp.Net Ajax Component Development

DEMORegistering our Component with the Runtime

Page 23: Asp.Net Ajax Component Development

Instantiating the Component

• Creating the component• Two Ways

• var myComponent = Sys.Component.create(ComponentType, {id: “name”});

• var myComponent = $create(ComponentType, {id: “name”});

• Both create the component, add it to the runtime’s component collection, and initialize the component.

• Adding it to the component’s collection ensures that the same component with the same id isn’t created more than once.

Page 24: Asp.Net Ajax Component Development

DEMOInstantiating our Component

Page 25: Asp.Net Ajax Component Development

Develop the Server Control

• Wire our new client component to a new server control• E.g. <ASP:Label … />

• <span></span>

• E.g. <NewTag:OurNewComponent …/> = • <script type=“javascript>

$create(Interknowlogy.AJAX.OurNewComponent); </script>

• Use ScriptManager.Registerxxx rather than Page.ClientScript.Registerxxxx• Ensures that the JavaScript is registered properly

when the control is contained within an UpdatePanel

Page 26: Asp.Net Ajax Component Development

DEMOCreate a Server Control Wired to Our New Component

Page 27: Asp.Net Ajax Component Development

Develop the Server Control

• Associate the Server Control to the Component’s client definition• Embed the JavaScript in the DLL as a

resource• Load the JavaScript into the ScriptManager

using a ScriptReference

Page 28: Asp.Net Ajax Component Development

DEMOAdd the Client Code to the Server Control

Page 29: Asp.Net Ajax Component Development

More Client Code – Private Members and Properties

• Private members• Use this._**** style

• this._enabled• Private by convention, not be practice

• Public properties• Use this.get_****, this.set_**** style

• this.get_enabled: function() { return this._enabled;}• this.set_enabled: function(value) { this._enabled = value; }

• Following these conventions sets up the ability for intellisense to work properly in Oracas

Page 30: Asp.Net Ajax Component Development

DEMOAdding Private Members and Public Properties

Page 31: Asp.Net Ajax Component Development

More Client Code – Validating Parameters

• Very similar to .NET parameter checking capabilities• Built-in parameter validation functionality• var exception = Function._validateParams(arguments,

[{name: "value", type: Boolean}]);• arguments represents the arguments of the method• Array of argument description objects

• Name of argument (i.e. “value”)• Type of argument

• Boolean, Function, Number, String, Sys.WebForms.PageRequestArgs, user-defined

• Optional arguments• may be null

• Exception is assigned to an error if the parameters did not validate properly

Page 32: Asp.Net Ajax Component Development

DEMOValidating Parameters

Page 33: Asp.Net Ajax Component Development

More Client Code - Events

• All components have eventing model built-in• Add and removing events to the base class

event collection• this.get_events().addHandler(eventName, function);• this.get_events().removeHandler(eventName,

function);• Wrap adding/removing of events in

“add_eventName”, “remove_eventName” methods• add_enabledChange: function(handler) {…}• remove_enabledChange: function(handler) {…}

• Again, provides ability for intellisense in Oracas

Page 34: Asp.Net Ajax Component Development

DEMOCreating Event Handlers and Wiring Them Up

Page 35: Asp.Net Ajax Component Development

DEMOA Useful Component - PostBackDisabler

Page 36: Asp.Net Ajax Component Development

Contact Info

• Joel Rumerman

• Email: [email protected]

• Blog: http://blogs.interknowlogy.com/joelrumerman