The Microsoft AJAX Library

1. The Microsoft AJAX Library Jeff Prosise Cofounder, Wintellect jeffpro@wintellect.com

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

3. 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

4. Global Functions • Helper functions for use anywhere, anytime • Used in JavaScript emitted by server controls Function Description $create Creates and initializes a component $find Retrieves the component with the specified ID $get Retrieves the DOM element with the specified ID $addHandler(s) Registers handlers for DOM event(s) $clearHandlers Unregisters handlers for DOM events $removeHandler Unregisters a handler for a DOM event

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

6. 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 http://ajax.asp.net/docs/ClientReference/-Global/JavascriptTypeExtensions/default.aspx

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

8. 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

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

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

11. 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

12. 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');

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

14. 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);

15. 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));

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

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

18. _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();

19. 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');

20. 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

21. PageRequestManager Methods • Provide programmatic control over client-side PageRequestManager Method Description get_isInAsyncPostBack Indicates whether async callback is in progress getInstance Returns reference to current PageRequestManager instance abortPostBack Cancel the async callback that is currently in progress add_* Registers handlers for PageRequestManager events remove_* Deregisters handlers for PageRequestManager events

22. PageRequestManager Events • PageRequestManager fires client-side events • Hook events on client for advanced customizations Event Description initializeRequest Fired before async callback commences beginRequest Fired when async callback commences pageLoading Fired following an async callback (before content is updated) pageLoaded Fired following a postback or callback (after content is updated) endRequest Fired when async callback completes

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

24. PageRequestManager

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

26. 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

27. Using Control Classes <input type="text" id="Input" />&nbsp; <input type="button" id="MyButton" value="Click Me" />&nbsp; <span id="Output" /> ... <script type="text/javascript"> 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()); } </script>

28. 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 <script type="text/xml-script"> <page xmlns:script="http://schemas.microsoft.com/xml-script/2005"> <!-- XML script goes here --> </page> </script>

29. Using Control Classes (XML Script) <input type="text" id="Input" />&nbsp; <input type="button" id="MyButton" value="Click Me" />&nbsp; <span id="Output" /> <script type="text/xml-script"> <page xmlns:script="http://schemas.microsoft.com/xml-script/2005"> <components> <textBox id="Input" /> <button id="MyButton"> <click> <invokeMethodAction target="TextBinding" method="evaluateIn" /> </click> </button> <label id="Output"> <bindings> <binding id="TextBinding" dataContext="Input" dataPath="text" property="text" automatic="false" /> </bindings> </label> </components> </page> </script>

30. 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 Sys.Preview.Data Sys.Preview.UI.Data DataColumn DataControl DataRow DataNavigator DataTable ItemView DataView ListView DataFilter XSLTView DataSource Other Other

31. ListView and DataSource <div id="Books"></div> <div style="display: none;"> <div id="LayoutTemplate"> <ul id="ItemTemplateParent"> <li id="ItemTemplate"><span id="BookTitle"></span></li> </ul> </div> </div> <script type="text/xml-script"> <page xmlns:script="http://schemas.microsoft.com/xml-script/2005"> <components> <dataSource id="BooksDataSource" serviceURL="Books.asmx" autoLoad="true" /> <listView id="Books" itemTemplateParentElementId="ItemTemplateParent"> <bindings> <binding dataContext="BooksDataSource" dataPath="data" property="data" /> </bindings> <layoutTemplate> <template layoutElement="LayoutTemplate" /> </layoutTemplate> <itemTemplate> ... </itemTemplate> </listView> </components> </page> </script>

32. 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; } } }

33. Enabling Data Binding • Register JSON converters in Web.config <system.web.extensions> <scripting> <webServices> <jsonSerialization> <converters> <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, ..." /> </converters> </jsonSerialization> </webServices> </scripting> </system.web.extensions>

34. Client-Side Data Binding

35. 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

36. Floating an Image <img id="FloatMe" src="..."> ... <script type="text/javascript"> function pageLoad() { var float = new Sys.Preview.UI.FloatingBehavior ($get('FloatMe')); float.set_handle($get('FloatMe')); float.initialize(); } </script>

37. Floating an Image (XML Script) <img id="FloatMe" src="..."> ... <script type="text/xml-script"> <page xmlns:script="http://.../xml-script/2005"> <components> <image id="FloatMe"> <behaviors> <floatingBehavior handle="FloatMe" /> </behaviors> </image> </components> </page> </script>

38. Drag-and-Drop

39. 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 Interpolated- Animation Discrete- Animation Number- Animation Length- Animation Composite- Animation Fade- Animation

40. Fading In an Image <img id="SplashImage" src="..."> ... <script type="text/javascript"> 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(); } </script>

41. Fading In an Image (XML Script) <img id="SplashImage" src="..."> ... <script type="text/xml-script"> <page xmlns:script="http://.../xml-script/2005"> <components> <image id="SplashImage" /> <fadeAnimation id="fade" target="SplashImage" effect="FadeIn" duration="3" fps="20" /> <application> <load> <invokeMethodAction target="fade" method="play" /> </load> </application> </components> </page> </script>

42. Discussion