1 / 37

Développer des interfaces riches avec Microsoft Ajax Library et ASP.NET 2.0 - Part 1

Développer des interfaces riches avec Microsoft Ajax Library et ASP.NET 2.0 - Part 1 . Grégory Renard Aurélien Verla CTO Wygwam Expert .NET Wygwam gregory@wygwam.com aurelien@wygwam.com. Objectifs. Vous montrer que ASP.NET AJAX Ext . est

ban
Download Presentation

Développer des interfaces riches avec Microsoft Ajax Library et ASP.NET 2.0 - Part 1

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Développer des interfaces riches avec Microsoft Ajax Library et ASP.NET 2.0 - Part 1 Grégory Renard Aurélien Verla CTO Wygwam Expert .NET Wygwam gregory@wygwam.comaurelien@wygwam.com

  2. Objectifs • Vous montrer que ASP.NET AJAX Ext. est • La continuité de ce que vous avez toujours réalisé • Simple à comprendre • Puissant et facile à utiliser • Vous montrer comment développer avec ASP.NET AJAX Ext au terme de cette session !

  3. De l’expertise .NET à votre service ! Nos Experts Votre satisfaction ! • Expertise et expérience unique sur la plate-forme Microsoft .NET • Développement de projets avant-gardistes et d’envergure • Coaching/Formation « on the job » par nos experts • Solutions pour la productivité des développeurs • Votre veille technologique / pôle R&D • Contactez-nous pour vos projets : • Vista, Office 07, Live, Gadgets, Web 2.0, .NET 3.0, WPF, WCF, WF,MOSS – WSS V3 • www.wygwam.com

  4. De la passion communautaire .NET Notre implication Votre satisfaction ! • 7 Bloggeurs Technologiques • 6 Auteurs de livres • 6 Speakers Events MS et non MS • Implication communautaire forte • 6 Rédacteurs dans la presse spécialisée • Implication au sein de l’INETA • Implication UserGroup : FxUserGroup • Une équipe de Wyggeurs : • 4 Microsoft Most Valuable Professional • 1 MicrosoftRegionalDirector • 2 Microsoft Student Partner (MSP) • www.wygwam.com

  5. Agenda • Qu‘est-ce qu‘AJAX ? • Microsoft‘s AJAX Framework • Présentation • Architecture • ASP.NET 2.0 AJAX Extensions • Microsoft AJAX Library • ASP.NET AJAX ControlToolkit • Roadmap

  6. Découverte de l‘AJAX

  7. Une continuité constante • Respecte ce que vous avez toujours fait • Juste une prolongation • Permet « The extra mile » ASP.NET 2.0 + AJAX Ext ASP.NET 2.0 ASP.NET 1.x Plain ASP 1997 2002 2005 2007

  8. Introduction à Ajax • Ajax = AsynchronousJavascript and XML • Ajax n'est pas nouvelle une technologie ! • Il emploie • Les classiques HTML/CSS • Un simple DOM /Javascript • Classique XML / XSLT / XMLHttpRequest • Vous pourriez l'avoir fait vous-même ! ; -)

  9. Support Multi-browser • Compatible sur plusieurs navigateurs • Internet Explorer 4.0 + • Apple Safari 1.2 + • MozillaFirefox 1.0 + • Netscape 7.1 + • Opera 7.6 + • … • Juste une technologie classique des navigateurs d'aujourd'hui rendue plus accessible !

  10. Page *.aspx Classe IHttpHandler *.ashx Page Loaded XMLHttp- Request PartialUpdating Le processus d’Ajax Server Browser Page Load Asynchrone call Server Response

  11. Exemple d’une App ASP.NET AJAX www.techheadbrothers.com

  12. Exemple d’une App ASP.NET AJAX http://www.guidetele.com

  13. Découverte d‘ASP.NET AJAX Ext

  14. Qu’estcequel’ASP.NET AJAX? Un framework permettant de construire des applications plus riche, plus interactive en utilisant les standards du web • Plus grandeproductivité du développement AJAX • Peude lignes de code • Application et UI construits en module sur des scénarioscommuns • Extension d‘ASP.NET 2.0 • Facile à écrire, à corrigeret modifier • Separation claire du contenu, des styles et de votre code • Trèsbienintégré grace à des outils de designer et developpement • Complètementintégrédansvosmodèlesd’applications • Dans la lignée des pages ASP.NET et des contrôlesserveur • Permetl’accèsaisé aux WebServices et composants • Basésur les standards : Fonctionne en Cross-Browser

  15. ASP.NET AJAX SharingApplication Business Logic Couche Interface utilisateur Couche Présentation Couchemétier Couchedonnée Privé Public HTML Web Client BusinessFacade Component IIS ASP .NET IIS Business LogicComponent Session- State Vue Business LogicComponent SmartClient XML WebService Procédure stoquée Business LogicComponent Offline Cache

  16. Créezvotre premier projet Web en ASP.NET AJAX

  17. Architecture d‘ASP.NET AJAX

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

  19. Scenarios: ASP.NET AJAX • Developpement Ajax cotéserveur • Enrichissement de vos interfaces par des contrôlesserveur AJAX • Vos applications Web 2.0 en écrivant un minimum de Javascript • Préservevotrelogique de développementserveur (VB/C#) • Developpement Ajax coté client • Utilisez la puissance des script/DHTML • Expérienceutilisateur encore plus riche et interactive • Construisez des application Mash-Up, des Gadgets, et biend’autresexpériences Web 2.0

  20. ASP.NET 2.0 AJAX Extensions Modèle de programmationcotéserveur

  21. De nouveau contrôleserveur • Le contrôle <asp:UpdatePanel> • Contrôle de type “container” permettant de déterminerunerégion “updatable” • ASP.NET AJAX distribuel’infrastructure du PostBackXmlHttp Some non-updatable content and controls... <asp:UpdatePanelid=“u1”runat=“server”> <ContentTemplate> This content can be dynamically updated! <asp:labelid="Lablel1” runat=“server”/> <asp:buttonid=“button1”text=“PushMe!”runat=“server”/> <ContentTemplate> </asp:UpdatePanel> More non-updatable content and controls... Défini le comportement client des composants et élémentsserveurs Génère les scripts clients nécessaires

  22. <asp:UpdateProgress> Distribue un statutd’attentelorsd’attente de réponseserveur • Permet de mentionnerl’attente à l’utilisateur • Permet à l’utilisateurd’annulerunerequête • UpdateProgresspeutêtreplacéoùvous le souhaitez <asp:UpdatePanelid=“u1”mode=“Conditional”runat=“server”> <ContentTemplate> <asp:gridviewid=“GridView1”runat=“server”> ... </asp:gridview> </ContentTemplate> </asp:UpdatePanel> <asp:UpdateProgress> <ProgressTemplate> <divclass="updateprogress"> <imgsrc="images/progress_animation.gif"/> Updating... <asp:linkbuttonid=“abortButton”text=“Cancel”runat=“server”/> </div> </ProgressTemplate> </asp:UpdateProgress>

  23. "AJAXification"d’une application ASP.NET 2.0

  24. Microsoft AJAX Library Modèle de developpementcotéclient

  25. ASP.NET AJAX Client Script Library”Script Core” et “Base Class Library” ASP.NET AJAXClient Script Library Framework de Script puissant • Types System riches et bibliothèque de pour Javascript • Modèlecomposant et Framework UI • Accès aux données et Databinding client • Intégré au modèle de développementserveur • Consommez des WebServicesdepuisvotre Browser • Scripts d’accès à des applications de services • Script access to ASP.NET Application Services • ASP.NET Bridges pour services hors domaines Controls and Components Component Model and UI Framework Base Class Library Script Core Browser Compatibility

  26. ASP.NET AJAX Client Script Library Sys.Net : Gestion du Networking • XMLHTTP – Variations dans vos Browsers • Couche de communication clientebaséesur XMLHTTP • WebRequest, WebResponse, MethodRequest classes • ASP.NET AJAX Web Services Bridge • Accédez à des services hébergés ASP.NET • ASMX et WCF services, .NET objects, ASP.NET page-level services • Formats légers : Javascript Object Notation (JSON) etREST <scriptsrc=“MyService.asmx/js”/> <script> functiononLoad() { MyService.GetItemsByName(Text1.value, onComplete); } functiononComplete(results) { $(‘ResultsDataSource’).set_data(results); } </script> Génération automatique d‘un proxy client

  27. Consommerunwebservicedepuis ASP.NET AJAX

  28. ASP.NET AJAX Control Toolkit Etendre AJAX

  29. ASP.NET AJAX: Contrôles Extender • Etendvoscontrôles ASP.NET avec des comportements AJAX • Blocs fonctionnelsinteractifsréutilisables • En mode déclaratifou en mode code • Drag-and-drop, Tooltips, Popups, Auto-complete • Exemple: <ajaxToolkit:AutoCompleteExtender> • Active l’auto-completion sur un Textbox • Communique avec un .asmx et WCF (ASP.NET AJAX JSON bridge) <asp:textboxid=“CustomerSearch”runat=“server”/> <ajaxToolkit:AutoCompleteExtenderID="AutoComplete"runat="server"> <asp:AutoCompletePropertiesEnabled="true" ServiceMethod="GetCustomerName" ServicePath="~/CustomerService.asmx" TargetControlID="CustomerSearch"/>

  30. ASP.NET AJAX Contrôles Toolkit Ensemble de Scenarios • Pour les développeurs Serveur ASP.NET • Enrichie l‘expérience utilisateur sans apprendre de JavaScript ou AJAX • Pour les développeurs Clients (AJAX JavaScript) • Simplifie le développement des contrôles et composants AJAX • Très haute réutilisabilité Modèle de participation communautaire • Gallerie de composants ASP.NET AJAX • Tout le monde peut y participer !!!

  31. ASP.NET AJAX Contrôles Toolkit • Connectez-vous à CodePlex • Ouvrez et construisez un projet „AjaxControlToolkit“ • Pour utiliser les Contrôles Extender • Ajoutez les contrôles à Visual Studio Toolbox • ~\bin\[target]\AjaxControlToolkit.dll • Pour créer un contrôle Extender • Installez le Templates Project • AjaxControlExtender.vsi • La Documentation : • http://ajax.asp.net/ajaxtoolkit/

  32. ASP.NET AJAX Control Toolkit

  33. ASP.NET AJAX Roadmap

  34. ASP.NET AJAX Roadmap • ASP.NET AJAX V1.0 Maintenantdisponible • Téléchargementsurhttp://ajax.asp.net • Support du produit • Entièrementgratuit • Integration dans Visual Studio “Orcas” • Incorporation de nombreusesnouveautés AJAX • Incorporation d’un mode de création Design-Time • Amélioration du mode “débugging” JavaScript

  35. En résumé… ‘ASP.NET AJAX Ext’ • ASP.NET AJAX facilite nettement le développement d’applications Web 2.0 • Plus grande productivité pour les développeurs (Surtout serveur) • Facile à écrire et à maintenir • Modèle de programmation unifié • Compatible multi-browser • AJAX Control Toolkit • Essayiez ASP.NET AJAX Ext dès aujourd’hui !!!

  36. Ressources • http://ajax.asp.net • exemple, démo, docs, … • Forums: http://ajax.asp.net/forums • Nous contacter • info@wygwam.com • http://www.wygwam.com • http://www.microsoft.fr

  37. Votre potentiel, notre passion TM © 2007 Microsoft France

More Related