280 likes | 431 Views
Microsoft Ajax Library ASP.NET 2.0 Ajax Extension (Anciennement Atlas). Pierre Lagarde Relation Technique Développeurs Microsoft France http://blogs.developpeur.org/fox Frimr rating : 1914. ASP.NET, c’est quoi ?. Une approche « composants » pour le développement d’applications Web ASP.NET
E N D
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
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
XHTML IE XHTML FireFox HTML Autre ASP.NET, c’est quoi ? Contrôles Serveur ASPX .NET API Service
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
Les Frameworks JavaScript • http://ajaxpatterns.org/Ajax_Frameworks 70+
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
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
STOP ! • DHTML ? • DOM ? • JavaScript ? • XMLHttpRequest ?
DHTML / DOM DEMO
“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
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
Fichiers .js 68ko 28ko 160ko 35ko 12ko
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
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());
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');
Utiliser la classe Person var p = new Frimr.Person('Christophe'); alert(p.get_name()); alert(Object.getTypeName(p));
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);
Utiliser la classe Programmer var p2 = new Frimr.Programmer('Christophe', 'JavaScript'); alert(p2.get_name()); alert(p2.get_language()); alert(Object.getTypeName(p2));
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
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>
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
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
PHP / ColdFusion • Importer les Scripts depuis « Program Files » • Utiliser le code déclaratif • Utiliser le code impératif • Client seulement !
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