The Microsoft AJAX Library

1
(No Transcript)
2
The Microsoft AJAX Library

• Jeff Prosise
• Cofounder, Wintellect
• www.wintellect.com

3
Architecture
XHTML/CSS
Server Scripts
Microsoft AJAX Library
Base Class Library
Script Core Library
Asynchronous Communications
JSON Serializer
Web Service Proxies
XML-HTTP Stack
Browser Compatibility
Browsers (IE, Firefox, Safari, others)
4
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)
• Framework adds OOP to JavaScript

5
Global Functions

• Helper functions for use anywhere
• Used in JavaScript emitted by 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
6
get and create
You write this
ltaspDragOverlayExtender ID"DragOverlayExtender1"
TargetControlID"Target" Enabled"true"
Runat"server" /gt
7
Base Type Extensions

• Microsoft AJAX Library extends the following
  JavaScript types
• Array - add, addRange, contains, insert, etc.
• Boolean - parse
• Date - format, parselocale, parseInvariant, etc.
• Error - argumentOutOfRange, etc.
• Number - format, parseLocale, parseInvariant
• Object - getType, getTypeName
• String - format, endsWith, startWith, trim, etc.

8
String.Format
var s String.format ('0, 1, and 2', 1, 2,
3) window.alert (s)
9
Adding OOP to JavaScript

• Object-based but not object-oriented
• Microsoft AJAX Library adds OOP to JavaScript
• Namespaces
• Classes and inheritance
• Interfaces and enumerated types
• prototype property forms basis for "classes"
• Type class provides typing and type reflection

10
JavaScript "Classes"
Person function(name) this._name
name Person.prototype get_name
function() return this._name
// Declare other class methods here
11
Using the Person Class
var p new Person('Jeff') // Displays
"Jeff" window.alert(p.get_name())
12
Type Class

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

13
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.registerCla
ss('Wintellect.Person')
14
Using Wintellect.Person
var p new Wintellect.Person('Jeff') //
Displays "Jeff" window.alert(p.get_name()) //
Displays "Wintellect.Person" window.alert(Object.g
etTypeName(p))
15
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)
16
Using Wintellect.Programmer
var p new Wintellect.Programmer('Jeff',
'C') // Displays "Jeff (Programmer)" window.ale
rt(p.get_name()) // Displays "C" window.alert(p
.get_language()) // Displays "Wintellect.Program
mer" window.alert(Object.getTypeName(p))
17
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
WebService- Error
CultureInfo
_Timer
Other
Other
18
StringBuilder
var sb new Sys.StringBuilder() for (var i
1 i lt 100 i) sb.append(i) // Count
from 1 to 100 sb.append('ltbr/gt') var text
sb.toString() // Get the results
19
_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()
20
Using Sys.Debug
// Assert var happy false Sys.Debug.assert(happ
y true, 'happy is NOT true', false) // Break
into the debugger Sys.Debug.fail('Somebody is NOT
happy')
21
PreviewWebForms.js

• Partial-page rendering support
• 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

22
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
23
PageRequestManager Events

• PageRequestManager fires 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
24
Canceling Updates
ltaspButton ID"CancelButton" Runat"server"
Text"Cancel" OnClientClick"cancelUpdate()
return false" /gt . . . ltscript
type"text/javascript"gt function
cancelUpdate() var obj Sys.WebForms.PageRe
questManager.getInstance() if
(obj.get_isInAsyncPostBack())
obj.abortPostBack() lt/scriptgt
25
Demo
26
PreviewScript.js
Other Namespaces
Sys.Preview
Sys.Preview.UI
Sys.Preview.Data
Sys.Preview.UI.Data
BindingBase
DataControl
DataColumn
ServiceMethod- Request
Color
Binding
Validator
DataNavigator
Profile
DataRow
Other
Action
Label
ItemView
DataTable
InvokeMethod- Action
Button
ListView
DataView
SetProperty- Action
CheckBox
XSLTView
DataFilter
Timer
TextBox
Other
DataSource
Counter
Selector
Other
Other
Other
27
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

28
Using Control Classes
ltinput type"text" id"Input" /gtnbsp ltinput
type"button" id"MyButton" value"Click Me"
/gtnbsp ltspan id"Output" /gt ... ltscript
type"text/javascript"gt 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('MyBut
ton')) g_label new Sys.Preview.UI.Label(ge
t('Output')) button.initialize()
button.add_click(onClick) function
onClick() g_label.set_text(g_textBox.get_tex
t()) lt/scriptgt
29
XML Script

• Alternative to imperative JavaScript
• The "other way" to program
• Supporting infrastructure found in
  PreviewScript.js
• XML parser translates declarations into actions

ltscript type"text/xml-script"gt ltpage
xmlnsscript"http//schemas.microsoft.com/xml-scr
ipt/2005"gt lt!-- XML script goes here --gt
lt/pagegt lt/scriptgt
30
Using Control Classes (XML Script)
ltinput type"text" id"Input" /gtnbsp ltinput
type"button" id"MyButton" value"Click Me"
/gtnbsp ltspan id"Output" /gt ltscript
type"text/xml-script"gt ltpage
xmlnsscript"http//schemas.microsoft.com/xml-scr
ipt/2005"gt ltcomponentsgt lttextBox
id"Input" /gt ltbutton id"MyButton"gt
ltclickgt ltinvokeMethodAction
target"TextBinding" method"evaluateIn" /gt
lt/clickgt lt/buttongt ltlabel
id"Output"gt ltbindingsgt
ltbinding id"TextBinding" dataContext"Input"
dataPath"text" property"text"
automatic"false" /gt lt/bindingsgt
lt/labelgt lt/componentsgt lt/pagegt lt/scriptgt
31
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
DataControl
DataColumn
DataNavigator
DataRow
ItemView
DataTable
ListView
DataView
XSLTView
DataFilter
Other
DataSource
Other
32
ListView and DataSource
ltdiv id"Books"gtlt/divgt ltdiv style"display
none"gt ltdiv id"LayoutTemplate"gt ltul
id"ItemTemplateParent"gt ltli
id"ItemTemplate"gtltspan id"BookTitle"gtlt/spangtlt/li
gt lt/ulgt lt/divgt lt/divgt ltscript
type"text/xml-script"gt ltpage
xmlnsscript"http//schemas.microsoft.com/xml-scr
ipt/2005"gt ltcomponentsgt ltdataSource
id"BooksDataSource" serviceURL"Books.asmx"
autoLoad"true" /gt ltlistView id"Books"
itemTemplateParentElementId"ItemTemplateParent"gt
ltbindingsgt ltbinding
dataContext"BooksDataSource" dataPath"data"
property"data" /gt lt/bindingsgt
ltlayoutTemplategt lttemplate
layoutElement"LayoutTemplate" /gt
lt/layoutTemplategt ltitemTemplategt ...
lt/itemTemplategt lt/listViewgt
lt/componentsgt lt/pagegt lt/scriptgt
33
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
34
Enabling Data Binding

• Register JSON converters in Web.config

ltsystem.web.extensionsgt ltscriptinggt
ltwebServicesgt ltjsonSerializationgt
ltconvertersgt ltadd name"DataSetConverter
" type"Microsoft.Web.Preview.Script.Serialization
.Converters.DataSetConverter, ..." /gt
ltadd name"DataRowConverter" type"Microsoft.Web.P
review.Script.Serialization.Converters.DataRowConv
erter, ..." /gt ltadd name"DataTableConve
rter" type"Microsoft.Web.Preview.Script.Serializa
tion.Converters.DataTableConverter, ..." /gt
lt/convertersgt lt/jsonSerializationgt
lt/webServicesgt lt/scriptinggt lt/system.web.extensi
onsgt
35
Demo
36
PreviewDragDrop.js

• Adds drag-drop support to BCL
• _DragDropManager provides core support
• Global instance named DragDropManager
• IDropSource and IDropTarget interfaces define
  signatures for drop-source and drop-target
  classes
• FloatingBehavior provides generic mechanism for
  floating images, DIVs, and other entities

37
Floating an Image
ltimg id"FloatMe" src"..."gt ... ltscript
type"text/javascript"gt function pageLoad()
var float new Sys.Preview.UI.FloatingBehavior
(get('FloatMe')) float.set_handle(get
('FloatMe')) float.initialize() lt/scriptgt
38
Floating an Image (XML Script)
ltimg id"FloatMe" src"..."gt ... ltscript
type"text/xml-script"gt ltpage
xmlnsscript"http//.../xml-script/2005"gt
ltcomponentsgt ltimage id"FloatMe"gt
ltbehaviorsgt ltfloatingBehavior
handle"FloatMe" /gt lt/behaviorsgt
lt/imagegt lt/componentsgt lt/pagegt lt/scriptgt
39
Demo
40
PreviewGlitz.js

• Adds UI enhancements to BCL
• OpacityBehavior class wraps opacity
• LayoutBehavior class wraps layout
• Animation and derivatives support animations

Property- Animation
Interpolated- Animation
Discrete- Animation
Number- Animation
Length- Animation
Composite- Animation
Fade- Animation
41
Fading In an Image
ltimg id"SplashImage" src"..."gt ... ltscript
type"text/javascript"gt 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() lt/scriptgt
42
Fading In an Image (XML Script)
ltimg id"SplashImage" src"..."gt ... ltscript
type"text/xml-script"gt ltpage
xmlnsscript"http//.../xml-script/2005"gt
ltcomponentsgt ltimage id"SplashImage" /gt
ltfadeAnimation id"fade" target"SplashImage"
effect"FadeIn" duration"3" fps"20" /gt
ltapplicationgt ltloadgt
ltinvokeMethodAction target"fade" method"play"
/gt lt/loadgt lt/applicationgt
lt/componentsgt lt/pagegt lt/scriptgt
43
(No Transcript)