The Microsoft AJAX Library Jeff Prosise Cofounder, Wintellect

Microsoft AJAX Library Architecture Browsers (IE, Firefox, Safari, others) Browser Compatibility Asynchronous Communications Script Core Library Base Class Library XHTML/CSSServer Scripts JSON Serializer JSON Serializer Web Service Proxies Web Service Proxies XML-HTTP Stack XML-HTTP Stack

JavaScript Framework Microsoft AJAX Library is a JavaScript framework –Global functions ($ functions) –JavaScript base type extensions –JavaScript type system –Core classes, interfaces, and other types (script core) –More classes, interfaces, and other types (BCL) JavaScript framework adds value to JavaScript –Adds OOP to JavaScript –Makes JavaScript an easier and more productive environment in which to work

Global Functions Helper functions for use anywhere, anytime Used in JavaScript emitted by server controls FunctionDescription $createCreates and initializes a component $findRetrieves the component with the specified ID $getRetrieves the DOM element with the specified ID $addHandler(s)Registers handlers for DOM event(s) $removeHandlerUnregisters a handler for a DOM event $clearHandlersUnregisters handlers for DOM events

$get and $create You write this: <asp:DragOverlayExtender ID="DragOverlayExtender1" TargetControlID="Target" Enabled="true" Runat="server" /> DragOverlayExtender emits this: $create(Sys.Preview.UI.FloatingBehavior, {"handle":$get('Target')}, null, null, $get('Target')); $create(Sys.Preview.UI.FloatingBehavior, {"handle":$get('Target')}, null, null, $get('Target'));

JavaScript Base Type Extensions Microsoft AJAX Library extends the following JavaScript types by adding new functions –Array - add, addRange, contains, insert, remove, etc. –Boolean - parse –Date - format, parselocale, parseInvariant, parse –Error - argumentOutOfRange, invalidOperation, etc. –Number - format, parseLocale, parseInvariant –Object - getType, getTypeName –String - format, endsWith, startWith, trim, etc. See Global/JavascriptTypeExtensions/default.aspx

String.Format var s = String.format ('{0}, {1}, and {2}', 1, 2, 3); window.alert (s);

Adding OOP to JavaScript JavaScript is object-based but not object-oriented Microsoft AJAX Library adds OOP to JavaScript –Namespaces –Classes –Inheritance –Interfaces –Enumerated types prototype property forms basis for "classes" Type class provides typing and type reflection

JavaScript "Classes" Person = function(name) { this._name = name; } Person.prototype = { get_name: function() { return this._name; } // Declare other class methods here }

Using the Person Class var p = new Person('Jeff'); // Displays "Jeff" window.alert(p.get_name());

Type Class Adds typing and type reflection to JavaScript Adds key instance methods to all types –registerClass, registerInterface –initializeBase, getBaseType –getBaseMethod, callBaseMethod, and others Implements key "static" type-related methods –registerNamespace –isNamespace, isClass, isInterface, and others Implemented in MicrosoftAjax.js

Registering Namespaces and Classes Type.registerNamespace('Wintellect'); Wintellect.Person = function(name) { this._name = name; } Wintellect.Person.prototype = { get_name: function() { return this._name; } Wintellect.Person.registerClass('Wintellect.Person');

Using Wintellect.Person var p = new Wintellect.Person('Jeff'); // Displays "Jeff" window.alert(p.get_name()); // Displays "Wintellect.Person" window.alert(Object.getTypeName(p));

Deriving from Wintellect.Person Wintellect.Programmer = function(name, language) { Wintellect.Programmer.initializeBase(this, [name]); this._language = language; } Wintellect.Programmer.prototype = { get_name: function() { var name = Wintellect.Programmer.callBaseMethod (this, 'get_name'); return name + ' (Programmer)'; }, get_language: function() { return this._language; } Wintellect.Programmer.registerClass ('Wintellect.Programmer', Wintellect.Person);

Using Wintellect.Programmer var p = new Wintellect.Programmer('Jeff', 'C#'); // Displays "Jeff (Programmer)" window.alert(p.get_name()); // Displays "C#" window.alert(p.get_language()); // Displays "Wintellect.Programmer" window.alert(Object.getTypeName(p));

MicrosoftAjax.js String- Builder String- Builder Sys WebRequest- Executor WebRequest- Executor Sys.Net _ProfileService Sys.Services JavaScript- Serializer JavaScript- Serializer Sys.Serialization DOMElement Sys.UI _Debug EventArgs Component _Application XMLHttp- EXecutor XMLHttp- EXecutor _WebRequest- Manager _WebRequest- Manager WebRequest WebService- Proxy WebService- Proxy WebService- Error WebService- Error Other ProfileGroup _Authentication- Service _Authentication- Service DOMEvent Behavior Control Point Bounds _Timer CultureInfo Other

StringBuilder var sb = new Sys.StringBuilder(); for (var i = 1; i <= 100; i++) { sb.append(i); // Count from 1 to 100 sb.append(' '); } var text = sb.toString(); // Get the results

_Debug Class Debugging class included in script core –"assert" method asserts that a condition is true –"fail" method breaks into the debugger –"trace" method writes trace output –"traceDump" dumps an object to trace output Global instance available through Sys.Debug // In MicrosoftAjax.js Sys.Debug = new Sys._Debug();

Using Sys.Debug // Assert var happy = false; Sys.Debug.assert(happy == true, 'happy is NOT true', false); // Break into the debugger Sys.Debug.fail('Somebody is NOT happy');

PreviewWebForms.js Partial-page rendering support –Sys.WebForms namespace PageRequestManager class –Client-side counterpart to UpdatePanel –Manages async callbacks used for partial-page rendering and performs content updates using results –Client-side OM enables advanced UpdatePanel customizations not possible from server side _UpdateProgress class

PageRequestManager Methods Provide programmatic control over client-side PageRequestManager MethodDescription get_isInAsyncPostBackIndicates whether async callback is in progress getInstanceReturns reference to current PageRequestManager instance abortPostBackCancel the async callback that is currently in progress add_*Registers handlers for PageRequestManager events remove_*Deregisters handlers for PageRequestManager events

PageRequestManager Events PageRequestManager fires client-side events Hook events on client for advanced customizations EventDescription initializeRequestFired before async callback commences beginRequestFired when async callback commences pageLoadingFired following an async callback (before content is updated) pageLoadedFired following a postback or callback (after content is updated) endRequestFired when async callback completes

Canceling Updates <asp:Button ID="CancelButton" Runat="server" Text="Cancel" OnClientClick="cancelUpdate(); return false" />. function cancelUpdate() { var obj = Sys.WebForms.PageRequestManager.getInstance(); if (obj.get_isInAsyncPostBack()) obj.abortPostBack(); }

PageRequestManager

PreviewScript.js BindingBase Sys.PreviewSys.Preview.UI DataControl Sys.Preview.Data DataColumn Sys.Preview.UI.Data ServiceMethod- Request ServiceMethod- Request Other Namespaces Binding Action InvokeMethod- Action InvokeMethod- Action SetProperty- Action SetProperty- Action Color Validator Label Button CheckBox DataNavigator ItemView Profile Timer Counter Other TextBox Selector Other ListView XSLTView Other DataRow DataTable DataView DataFilter DataSource Other

Sys.Preview.UI Classes that abstract HTML control elements –Button, Label, TextBox, Selector, etc. Base functionality defined in Sys.UI.Control –get_visible, set_visible –get_parent, set_parent –And so on Control classes simplify JavaScript and facilitate browser independence

Using Control Classes... var g_textBox; var g_label; function pageLoad() { g_textBox = new Sys.Preview.UI.TextBox($get('Input')); var button = new Sys.Preview.UI.Button($get('MyButton')); g_label = new Sys.Preview.UI.Label($get('Output')); button.initialize(); button.add_click(onClick); } function onClick() { g_label.set_text(g_textBox.get_text()); }

XML Script Alternative to imperative JavaScript –The "other way" to program the Microsoft AJAX Library Supporting infrastructure found in PreviewScript.js –XML parser translates declarations into actions

Using Control Classes (XML Script) <binding id="TextBinding" dataContext="Input" dataPath="text" property="text" automatic="false" />

Sys.Preview.[UI.].Data Contains classes that support rich client-side data binding ItemView and ListView do client-side rendering DataSource links data consumers to data service and supports 2-way data binding DataControl Sys.Preview.Data DataColumn Sys.Preview.UI.Data DataNavigator ItemView ListView XSLTView Other DataRow DataTable DataView DataFilter DataSource Other

ListView and DataSource...

Data Service [ScriptService] public class Books : DataService { [WebMethod] [DataObjectMethod(DataObjectMethodType.Select)] public Book[] GetTitles() { // TODO: Generate and return Book array } public class Book { private string _title; [DataObjectField(true)] public string Title { get { return _title; } set { _title = value; } }

Enabling Data Binding Register JSON converters in Web.config <add name="DataSetConverter" type="Microsoft.Web.Preview.Script.Serialization.Converters.DataSetConverter,..." /> <add name="DataRowConverter" type="Microsoft.Web.Preview.Script.Serialization.Converters.DataRowConverter,..." /> <add name="DataTableConverter" type="Microsoft.Web.Preview.Script.Serialization.Converters.DataTableConverter,..." />

Client-Side Data Binding

PreviewDragDrop.js Adds drag-drop support to BCL –Sys.Preview.UI namespace _DragDropManager provides core support –Global instance named DragDropManager IDropSource and IDropTarget interfaces define signatures for drop-source and drop-target classes DragDropList and DraggableListItem provide canned implementation of reorderable lists FloatingBehavior provides generic mechanism for floating images, DIVs, and other entities

Floating an Image... function pageLoad() { var float = new Sys.Preview.UI.FloatingBehavior ($get('FloatMe')); float.set_handle($get('FloatMe')); float.initialize(); }

Floating an Image (XML Script)...

Drag-and-Drop

PreviewGlitz.js Adds UI enhancements to BCL –Sys.Preview.UI.Effects namespace OpacityBehavior class wraps opacity of elements LayoutBehavior class wraps layout (size and pos) Animation and derivatives support animations Property- Animation Property- Animation Interpolated- Animation Interpolated- Animation Discrete- Animation Discrete- Animation Number- Animation Number- Animation Length- Animation Length- Animation Composite- Animation Composite- Animation Fade- Animation Fade- Animation

Fading In an Image... function pageLoad() { var image = new Sys.Preview.UI.Image ($get('SplashImage')); var fade = new Sys.Preview.UI.Effects.FadeAnimation(); fade.set_target(image); fade.set_effect (Sys.Preview.UI.Effects.FadeEffect.FadeIn); fade.set_duration(3); fade.set_fps(20); fade.play(); }

Fading In an Image (XML Script)... <fadeAnimation id="fade" target="SplashImage" effect="FadeIn" duration="3" fps="20" />

Discussion