Microsoft Ajax Library ASP.NET 2.0 Ajax Extension (Anciennement Atlas)

1. Microsoft Ajax LibraryASP.NET 2.0 Ajax Extension(Anciennement Atlas) Pierre Lagarde Relation Technique Développeurs Microsoft France http://blogs.developpeur.org/fox Frimr rating : 1914

2. ASP.NET, c’est quoi ? • Une approche « composants » pour le développement d’applications Web • ASP.NET • S’appuie sur le Framework .NET (côté serveur) • Basé sur un modèle composants (côté serveur) • Prend en compte les capacités respectives des différents navigateurs (support JavaScript, DHTML, …) • Ne nécessite rien de particulier sur le client • Offre un modèle événementiel au développement Web

3. XHTML IE XHTML FireFox HTML Autre ASP.NET, c’est quoi ? Contrôles Serveur ASPX .NET API Service

4. Agenda • Le concept Ajax • Les Frameworks JavaScript • Le Framework Microsoft (Atlas) • Microsoft Ajax Library • ASP.NET 2.0 Ajax Extension • 1ère application Web 2.0 • Ajax « iser » une application Web

5. Les Frameworks JavaScript • http://ajaxpatterns.org/Ajax_Frameworks 70+

6. Le Framework Ajax de Microsoft • Nom de code « Atlas » • Microsoft Ajax Library • Framework JavaScript Client • ASP.NET 2.0 Ajax Extension • Composants Serveurs .NET • ASP.NET Ajax Control Toolkit* • Extension des contrôles ASP.NET 2.0 • Contrôles avec comportement Ajax

7. Page *.aspx Classe IHttpHandler *.ashx Page chargée XMLHttp- Request Mise à jour partielle Le concept Ajax ? Client Serveur Chargement de la page Appel asynchrone Réponse du serveur

8. STOP ! • DHTML ? • DOM ? • JavaScript ? • XMLHttpRequest ?

9. DHTML / DOM DEMO

10. XMLHttpRequest

11. “Atlas” Client Script Library Controls, Components ASP.NET “Atlas” Server Extensions App Services Bridge Component Model and UI Framework “Atlas” Client Application Services “Atlas” Server Controls Web Services Bridge Base Class Library Local Store, … Script Core ASP.NET 2.0 Browser Integration Page Framework, Server Controls Application Services Browser Compatibility Microsoft Ajax Framework Architecture HTML, Script, “Atlas” Markup “Atlas”-enabled ASP.NET Pages “Atlas” Service Proxies Web Services (ASMX or WCF) “Atlas” Framework Serveur “Atlas” Framework Client et Service

12. Microsoft Ajax Library • Framework JavaScript proche de la programmation .NET • 100% JavaScript compatible IE / Safari / FireFox / Mozila / Opera • Inclus des libraires de programmation riche : • Traitement de chaînes, Enumérés, Mode Debug • Une couche de contrôles, de drag & drop, d’animations et autres • Tout sous forme de code .js

13. Fichiers .js 68ko 28ko 160ko 35ko 12ko

14. Base Class Library (BCL)

15. JavaScript OOP • Le Javascript est un langage « object-based » et non « object-oriented » • Ajout de types étendus • Array – add, contains, remove… • Boolean • Number - Parse • Object – getType, getTypeName • String – format, endsWith, startWith, trim … • Microsoft Ajax Framework ajoute • Namespaces • Classes • Héritage • Interface • Type Enumérés

16. String.Format et StringBuilder var s = String.format(‘{0}, {1} and {2}’, 1, 2, 3); var sb = new Sys.StringBuilder(); for(var i = 0; i<100; i++){ sb.append(i); sb.append(‘<br/>’ } alert(sb.toString());

17. Namespace et Classes Type.registerNamespace('Frimr'); Frimr.Person = function(name) { Frimr.Person.initializeBase(this); this._name = name; } Frimr.Person.prototype = { get_name : function(){ return this._name; } } Frimr.Person.registerClass('Frimr.Person');

18. Utiliser la classe Person var p = new Frimr.Person('Christophe'); alert(p.get_name()); alert(Object.getTypeName(p));

19. Dérivé de la classe Person Frimr.Programmer = function(name, language) { Frimr.Programmer.initializeBase(this, [name]); this._language = language; } Frimr.Programmer.prototype = { get_name: function() { var name = Frimr.Programmer.callBaseMethod(this, 'get_name'); return name + '(Programmateur)'; }, get_language: function() { return this._language; } } Frimr.Programmer.registerClass('Frimr.Programmer', Frimr.Person);

20. Utiliser la classe Programmer var p2 = new Frimr.Programmer('Christophe', 'JavaScript'); alert(p2.get_name()); alert(p2.get_language()); alert(Object.getTypeName(p2));

21. Fonctions Globales et de Debug • $create – Crée et initialise un composant • $find – Retrouve un composant par son ID • $get – Retrouve un élément dans le DOM [getElementByID] • $addHandler – Ajoute un événement à un objet du DOM • $removeHandler – Supprime un événement d’un objet du DOM • debug.trace

22. Le JavaScript vs XML-Script • Impératif var bt = new Sys.Preview.UI.Button($get('bt')); bt.initialize(); bt.add_click(OnClick) • Déclaratif <script type="text/xml-script"> <page xmlns:script="http://schemas.microsoft.com/xml-script/2005"> <components> <label id="lb"  /> <button id="bt"> <click> <setPropertyAction target="tb" property="text" value="coucou" /> </click> </button> </components> </page> </script>

23. Microsoft Ajax LibraryImpératifDéclaratif DEMO

24. ASP.NET 2.0 Ajax Extension • Manipuler le Framework JavaScript sans écrire de JavaScript • Utiliser les contrôles « Atlas » <atlas:…* • Utiliser des extendeurs sur les contrôles ASP.NET 2.0

25. Ajax « iser » une application Web DEMO

26. Activer Atlas sur ASP.NET • Rien de magique • Web.config • Ajout de HttpHandler (Extension ex: asmx) • Ajout de HttpModules (Request URL) • Ajout du ScriptManager (Framework Ajax) • Ajout de la DLL dans le projet Web

27. PHP / ColdFusion • Importer les Scripts depuis « Program Files » • Utiliser le code déclaratif • Utiliser le code impératif • Client seulement !

28. La sécurité • Web Services exposés pour Ajax • Microsoft Anti-Cross Site Scripting Library V1.0 • AntiXSSLibrary.HtmlEncode • AntiXSSLibrary.UrlEncode http://www.microsoft.com/downloads/details.aspx?familyid=9a2b9c92-7ad9-496c-9a89-af08de2e5982&displaylang=en