Microsoft Ajax
-
Upload
sampetruda -
Category
Documents
-
view
636 -
download
3
description
Transcript of Microsoft Ajax
![Page 1: Microsoft Ajax](https://reader033.fdocuments.us/reader033/viewer/2022061123/5471d01db4af9fb40a8b4d77/html5/thumbnails/1.jpg)
Microsoft ‘Atlas’ Part 1:The Microsoft Ajax Library
Presenter: Tim Kremer
![Page 2: Microsoft Ajax](https://reader033.fdocuments.us/reader033/viewer/2022061123/5471d01db4af9fb40a8b4d77/html5/thumbnails/2.jpg)
About Tim
• Project Manager at SSW
• Software Engineering Background
• Developing websites since 1998
• Developing in .NET for 5+ years
![Page 3: Microsoft Ajax](https://reader033.fdocuments.us/reader033/viewer/2022061123/5471d01db4af9fb40a8b4d77/html5/thumbnails/3.jpg)
Ajax Timeline
• Microsoft invents it– IE in 1998– OWA, MSDN take advantage
• Google popularises it– Google Maps
• Web 2.0 explodes– Flickr– Digg– Live.com– YouTube– www.Spyk.com (the newest!)
![Page 4: Microsoft Ajax](https://reader033.fdocuments.us/reader033/viewer/2022061123/5471d01db4af9fb40a8b4d77/html5/thumbnails/4.jpg)
Why is Web 2.0 difficult?
• JavaScript apps are difficult to develop– Poor debug tools
![Page 5: Microsoft Ajax](https://reader033.fdocuments.us/reader033/viewer/2022061123/5471d01db4af9fb40a8b4d77/html5/thumbnails/5.jpg)
Many Popular Libraries
• PrototypeJavaScript extension library, and crux of many of the open-source offerings.
– Script.aculo.us built on top of prototype– Dojo toolkit – rich client-side UI library built on top of prototype
• Google Web Toolkit server side java libraries that emit javascript and html
• Component ArtServer controls and update panels for ASP.NET
• Microsoft ‘Atlas’ - **This presentation**
• Many more: http://wiki.osafoundation.org/bin/view/Projects/AjaxLibraries
![Page 6: Microsoft Ajax](https://reader033.fdocuments.us/reader033/viewer/2022061123/5471d01db4af9fb40a8b4d77/html5/thumbnails/6.jpg)
Problems with the landscape
• Most existing libraries are:
– Incomplete• Some improve on the javascript structure• Some do cool UI effects• Some on client side• Some tied to a particular server technology
– Can’t be used with each other
![Page 7: Microsoft Ajax](https://reader033.fdocuments.us/reader033/viewer/2022061123/5471d01db4af9fb40a8b4d77/html5/thumbnails/7.jpg)
3 Parts of Atlas
1. Client Side Stuff **this presentation**2. Server Side Stuff3. Atlas Control Toolkit
![Page 8: Microsoft Ajax](https://reader033.fdocuments.us/reader033/viewer/2022061123/5471d01db4af9fb40a8b4d77/html5/thumbnails/8.jpg)
Briefly - Microsoft ASP.NET 2.0 Server Extensions
• Server Controls– Script Manager– Update Panel – Server side equivalents of UI controls– Server Control extensions
• Server Extensions– Web Services Bridge
• JSON serialiser• Javascript proxy generation• Bridge files (*.asbx) to connect via the server to external web services.
**Awesome for mashups!!
– Application Services Bridge• User authentication (using membership service)• User data storage (using profile service)
![Page 9: Microsoft Ajax](https://reader033.fdocuments.us/reader033/viewer/2022061123/5471d01db4af9fb40a8b4d77/html5/thumbnails/9.jpg)
Briefly - Microsoft ASP.NET 2.0 Ajax Toolkit
OverviewAsp.net Official Link:
http://atlas.asp.net/default.aspx?tabid=47&subtabid=477
Project Source on Codeplex: http://www.codeplex.com/Release/ProjectReleases.aspx?ProjectName=AtlasControlToolkit
Join the open community effort!
![Page 10: Microsoft Ajax](https://reader033.fdocuments.us/reader033/viewer/2022061123/5471d01db4af9fb40a8b4d77/html5/thumbnails/10.jpg)
The Microsoft Ajax Family
• Formerly codenamed ‘Atlas’– Client-side framework– Server side extensions– Atlas Control Toolkit
• New Official Names, Sept 2006:– Microsoft Ajax Library **this presentation**– Microsoft ASP.NET 2.0 Ajax Extensions– Microsoft ASP.NET 2.0 Ajax Toolkit
![Page 11: Microsoft Ajax](https://reader033.fdocuments.us/reader033/viewer/2022061123/5471d01db4af9fb40a8b4d77/html5/thumbnails/11.jpg)
![Page 12: Microsoft Ajax](https://reader033.fdocuments.us/reader033/viewer/2022061123/5471d01db4af9fb40a8b4d77/html5/thumbnails/12.jpg)
Microsoft Ajax Client Library
More than just Ajax:
1. Cross-Browser Framework 2. Extends Javascript to a rich OO model3. Components, Events, Actions4. Imperative or Declarative programming paradigm5. Control Binding6. Control Extensions & Behaviours7. Data Binding8. Not just for ASP.NET9. More efficient AJAX calls using JSON
![Page 13: Microsoft Ajax](https://reader033.fdocuments.us/reader033/viewer/2022061123/5471d01db4af9fb40a8b4d77/html5/thumbnails/13.jpg)
Microsoft Ajax Client Library
Browser Compatibility
Browser Compatibility Layer Supports• IE• Mozilla• Safari• Opera (in the works)
![Page 14: Microsoft Ajax](https://reader033.fdocuments.us/reader033/viewer/2022061123/5471d01db4af9fb40a8b4d77/html5/thumbnails/14.jpg)
Microsoft Ajax Client Library Script Core - Rich OO model
Your client-side script supports:• Inheritance• Interfaces & Abstract classes• Namespaces• Enumerations• Delegates
![Page 15: Microsoft Ajax](https://reader033.fdocuments.us/reader033/viewer/2022061123/5471d01db4af9fb40a8b4d77/html5/thumbnails/15.jpg)
Microsoft Ajax Client Library Base Class Library
Useful types:
• StringBuilder• Debug• Event• IDisposable
Other Support:
• Serialisation for JSON
• Authentication integration with the server counterpart
• Profile integration with the server counterpart
Abstractions:
• Abstractions for XMLHTTP– WebRequest– WebResponse
• Further Abstractions for invoking WebMethods
– Aspx pages– Web services– any server class
![Page 16: Microsoft Ajax](https://reader033.fdocuments.us/reader033/viewer/2022061123/5471d01db4af9fb40a8b4d77/html5/thumbnails/16.jpg)
Microsoft Ajax Client Library Client-side Programming Models
• Traditional Imperative Code
And/or
• Declarative XML-script mark-up called ‘Atlas Script’
![Page 17: Microsoft Ajax](https://reader033.fdocuments.us/reader033/viewer/2022061123/5471d01db4af9fb40a8b4d77/html5/thumbnails/17.jpg)
Microsoft Ajax Client Library Components, Events & Actions
ComponentsComponents are reusable, self-describing types
Common components include:
– ControlsIncludes visible UI Controls (eg. ListView, VEMap)and non-visible controls (eg. Timer, Counter)
– BehavioursPre-written functionality to attach additional semantics to existing controls (eg. drag/drop and hover behaviours)
– ValidatorsLike Behaviours, but allow you to define validation rules for input controls
![Page 18: Microsoft Ajax](https://reader033.fdocuments.us/reader033/viewer/2022061123/5471d01db4af9fb40a8b4d77/html5/thumbnails/18.jpg)
Microsoft Ajax Client Library Components, Events & Actions
EventsComponents can raise events. Events can have Actions
attached to them. (eg. An event could be raised when a property changes on the component)
ActionsActions allow performing work, by calling Component methods
or setting properties in response to events
![Page 19: Microsoft Ajax](https://reader033.fdocuments.us/reader033/viewer/2022061123/5471d01db4af9fb40a8b4d77/html5/thumbnails/19.jpg)
Microsoft Ajax Client Library Control Bindings
Control BindingsBindings allow wiring up components to transfer property values from one component to
another. Transformations can be called in the process, and methods can also be invoked.
<span id="label2">Empty</span><input type="text" id="textBoxInput" />
<script type="text/xml-script"> ..
<textBox id="textBoxInput"/>
<label id="label2"> <bindings>
<binding dataContext="textBoxInput" dataPath="text" property="text" />
</bindings> </label>
..
![Page 20: Microsoft Ajax](https://reader033.fdocuments.us/reader033/viewer/2022061123/5471d01db4af9fb40a8b4d77/html5/thumbnails/20.jpg)
Control Extensions & Behaviours
Control Extensions exist to add interesting functionality to simple html or asp controls
• Client Side Extenders– Eg. AutoCompletion
• Server Side Extenders– Eg. AutoCompletion
![Page 21: Microsoft Ajax](https://reader033.fdocuments.us/reader033/viewer/2022061123/5471d01db4af9fb40a8b4d77/html5/thumbnails/21.jpg)
Microsoft Ajax Client Library Data Binding
Atlas provides a rich set of data controls using familiar html templates:
Variety of DataBound Controls– ListView– DataNavigator– ItemView– Paging Control
• Additional Client-side behaviours– Sorting behavior
• Variety of Data Sources– DataSource– DataTable– XML Data Source – uses XPATH on the client side for filtering!!
This is a whole topic of its own, and ripe for future usergroup presentations.
![Page 22: Microsoft Ajax](https://reader033.fdocuments.us/reader033/viewer/2022061123/5471d01db4af9fb40a8b4d77/html5/thumbnails/22.jpg)
Essential Tools
• http://www.fiddlertool.com– IE powertoy from Microsoft– HTTP debugging proxy. Inspect traffic, set
breakpoints, and ‘fiddle’ with requests
• Microsoft Internet Explorer Developer Toolbar– View & manipulate Browser DOM, Caches– Highlighting & labelling of html elements– Validate CSS, HTML, Links
![Page 23: Microsoft Ajax](https://reader033.fdocuments.us/reader033/viewer/2022061123/5471d01db4af9fb40a8b4d77/html5/thumbnails/23.jpg)
Real World Web 2.0
Spyk.com Property Search
Using:• Atlas (mostly client-side with service calls)• Virtual Earth
• SQL Server• ASP.NET• .NET multithreaded rich client for spidering
properties.
![Page 24: Microsoft Ajax](https://reader033.fdocuments.us/reader033/viewer/2022061123/5471d01db4af9fb40a8b4d77/html5/thumbnails/24.jpg)
Questions?
![Page 25: Microsoft Ajax](https://reader033.fdocuments.us/reader033/viewer/2022061123/5471d01db4af9fb40a8b4d77/html5/thumbnails/25.jpg)
Future Atlas Presentation Topics:
Client-side Data BindingClient-side Authentication + ProfileServer Control CreationWeb Services Bridge for MashupsGadget Creation
![Page 26: Microsoft Ajax](https://reader033.fdocuments.us/reader033/viewer/2022061123/5471d01db4af9fb40a8b4d77/html5/thumbnails/26.jpg)
Thank you!