slide1 n.
Download
Skip this Video
Download Presentation
The Microsoft AJAX Library

Loading in 2 Seconds...

play fullscreen
1 / 42

The Microsoft AJAX Library - PowerPoint PPT Presentation


  • 59 Views
  • Uploaded on

The Microsoft AJAX Library. Jeff Prosise Cofounder, Wintellect jeffpro@wintellect.com. Architecture. XHTML/CSS. Server Scripts. Microsoft AJAX Library. Base Class Library. Script Core Library. Asynchronous Communications. XML-HTTP Stack. JSON Serializer. Web Service Proxies.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'The Microsoft AJAX Library' - lester-hahn


Download Now An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
slide1

The Microsoft AJAX Library

Jeff Prosise

Cofounder, Wintellect

jeffpro@wintellect.com

architecture
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)

javascript framework
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
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

get and create

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" />

javascript base type extensions
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
string format
String.Format

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

window.alert (s);

adding oop to javascript
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
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
Using the Person Class

var p = new Person('Jeff');

// Displays "Jeff"

window.alert(p.get_name());

type class
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
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
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
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
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
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

stringbuilder
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

debug class
_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
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
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
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

pagerequestmanager events
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

canceling updates
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>

previewscript js
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

sys preview ui
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
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>

xml script
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>

using control classes xml script
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>

sys preview ui data
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

listview and datasource
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>

data service
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
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>

previewdragdrop js
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
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>

floating an image xml script
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>

previewglitz js
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

fading in an image
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>

fading in an image xml script
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>