Embed Size (px)
Citation preview
Grégory Renard Aurélien VerlaCTO Wygwam Expert .NET [email protected] [email protected]
Développer des interfaces riches avec Microsoft Ajax Library et ASP.NET 2.0 - Part 1
Objectifs
Vous montrer que ASP.NET AJAX Ext. est
La continuité de ce que vous avez toujours réalisé Simple à comprendrePuissant et facile à utiliser
Vous montrer comment développer avec ASP.NET AJAX Ext au terme de cette session !
De l’expertise .NET à votre service !
Expertise et expérience unique sur la plate-forme Microsoft .NET Développement de projets avant-gardistes et d’envergureCoaching/Formation « on the job » par nos expertsSolutions pour la productivité des développeursVotre veille technologique / pôle R&DContactez-nous pour vos projets :
Vista, Office 07, Live, Gadgets, Web 2.0, .NET 3.0, WPF, WCF, WF,MOSS – WSS V3
Nos Experts Votre satisfaction !
www.wygwam.com
De la passion communautaire .NET
7 Bloggeurs Technologiques6 Auteurs de livres6 Speakers Events MS et non MSImplication communautaire forte6 Rédacteurs dans la presse spécialiséeImplication au sein de l’INETAImplication UserGroup : FxUserGroupUne équipe de Wyggeurs :
4 Microsoft Most Valuable Professional1 Microsoft Regional Director2 Microsoft Student Partner (MSP)
Notre implicationVotre satisfaction !
www.wygwam.com
Agenda
Qu‘est-ce qu‘AJAX ?Microsoft‘s AJAX Framework
PrésentationArchitectureASP.NET 2.0 AJAX ExtensionsMicrosoft AJAX LibraryASP.NET AJAX Control ToolkitRoadmap
Découverte de l‘AJAX
1997
2002
Plain ASPASP.NET 1.x
Une continuité constante
Respecte ce que vous avez toujours faitJuste une prolongationPermet « The extra mile »
2005
ASP.NET 2.0
2007
ASP.NET 2.0+ AJAX Ext
Introduction à Ajax
Ajax = Asynchronous Javascript and XML
Ajax n'est pas nouvelle une technologie !
Il emploie Les classiques HTML/CSS Un simple DOM /Javascript Classique XML / XSLT / XMLHttp Request
Vous pourriez l'avoir fait vous-même ! ; -)
Support Multi-browser
Compatible sur plusieurs navigateursInternet Explorer 4.0 +Apple Safari 1.2 +Mozilla Firefox 1.0 +Netscape 7.1 +Opera 7.6 +…
Juste une technologie classique des navigateurs d'aujourd'hui rendue plus accessible !
Le processus d’Ajax
Page*.aspx
ServerBrowser
Page Load
Asynchrone call
Classe IHttpHandler
*.ashx
Server Response
PageLoaded
XMLHttp-Request
PartialUpdating
Découverte d‘ASP.NET AJAX Ext
Qu’est ce que l’ASP.NET AJAX?
Plus grande productivité du développement AJAXPeu de lignes de code Application et UI construits en module sur des scénarios communsExtension d‘ASP.NET 2.0
Facile à écrire, à corriger et modifierSeparation claire du contenu, des styles et de votre codeTrès bien intégré grace à des outils de designer et developpement
Complètement intégré dans vos modèles d’applications
Dans la lignée des pages ASP.NET et des contrôles serveurPermet l’accès aisé aux WebServices et composants
Basé sur les standards : Fonctionne en Cross-Browser
Un framework permettant de construire des applicationsplus riche, plus interactive en utilisant les standards du web
Sharing Application Business Logic
PrivéCouche donnée
CoucheInterface
utilisateur
CouchePrésentation
Vue
Procédurestoquée
IISHTMLWebClient ASP
.NET
BusinessLogic
Component
PublicCouche métier
IIS
XML WebService
BusinessLogic
Component
BusinessLogic
Component
BusinessFacade
Component
Session-State
Offline Cache
SmartClient
ASP.NET AJAX
Créez votre premier projet Web en ASP.NET AJAX
Architecture d‘ASP.NET AJAX
ASP.NET AJAX Architecture
ASP.NET AJAX Client Framework & Services
ASP.NET AJAX-enabled
ASP.NET Pages
Web Services(ASMX or WCF)
HTML, Script,ASP.NET AJAX
Markup
ASP.NET AJAXServiceProxies
ASP.NET AJAX Server Framework
ASP.NET 2.0ASP.NET 2.0
Application Services
Application Services
Page Framework,
Server Controls
Page Framework,
Server Controls
ASP.NET AJAX Server ExtensionsASP.NET AJAX Server Extensions
ASP.NET AJAX
Server Controls
ASP.NET AJAX
Server Controls
App Services Bridge
App Services Bridge
Web Services Bridge
Web Services Bridge
Microsoft AJAX Library(Client Script Library)Microsoft AJAX Library(Client Script Library)
Controls, Components
Controls, Components
Script CoreScript Core
Base Class LibraryBase Class Library
Component Model and UI FrameworkComponent Model and UI Framework
Browser Compatibility
Browser Compatibility
ASP.NET AJAX Client App Services
ASP.NET AJAX Client App Services
Local StoreLocal Store
BrowserIntegratio
n
BrowserIntegratio
n
Scenarios: ASP.NET AJAX
Developpement Ajax coté serveurEnrichissement de vos interfaces par des contrôles serveur AJAXVos applications Web 2.0 en écrivant un minimum de JavascriptPréserve votre logique de développement serveur (VB/C#)
Developpement Ajax coté clientUtilisez la puissance des script/DHTMLExpérience utilisateur encore plus riche et interactiveConstruisez des application Mash-Up, des Gadgets, et bien d’autres expériences Web 2.0
ASP.NET 2.0 AJAX Extensions
Modèle de programmation coté serveur
De nouveau contrôle serveur
Le contrôle <asp:UpdatePanel>Contrôle de type “container” permettant de déterminer une région “updatable”ASP.NET AJAX distribue l’infrastructure du PostBack XmlHttp
Some non-updatable content and controls...<asp:UpdatePanel id=“u1” runat=“server”> <ContentTemplate> This content can be dynamically updated! <asp:label id="Lablel1” runat=“server”/> <asp:button id=“button1” text=“Push Me!” runat=“server”/> <ContentTemplate></asp:UpdatePanel>More non-updatable content and controls...
Défini le comportement client des composants et éléments serveursGénère les scripts clients nécessaires
<asp:UpdateProgress>
Distribue un statut d’attente lors d’attente de réponse serveurPermet de mentionner l’attente à l’utilisateurPermet à l’utilisateur d’annuler une requêteUpdateProgress peut être placé où vous le souhaitez
<asp:UpdatePanel id=“u1” mode=“Conditional” runat=“server”> <ContentTemplate> <asp:gridview id=“GridView1” runat=“server”> ... </asp:gridview> </ContentTemplate></asp:UpdatePanel> <asp:UpdateProgress> <ProgressTemplate> <div class="updateprogress"> <img src="images/progress_animation.gif" /> Updating... <asp:linkbutton id=“abortButton” text=“Cancel” runat=“server”/> </div> </ProgressTemplate></asp:UpdateProgress>
"AJAXification" d’une application ASP.NET 2.0
Microsoft AJAX Library
Modèle de developpement coté client
ASP.NET AJAX Client Script Library”Script Core” et “Base Class Library”Framework de Script puissant
Types System riches et bibliothèque de pour JavascriptModèle composant et Framework UIAccès aux données et Databinding client
Intégré au modèle de développement serveurConsommez des WebServices depuis votre BrowserScripts d’accès à des applications de servicesScript access to ASP.NET Application Services ASP.NET Bridges pour services hors domaines
ASP.NET AJAXClient Script LibraryASP.NET AJAXClient Script Library
Controls and ComponentsControls and Components
Script CoreScript Core
Base Class LibraryBase Class Library
Component Model and UI Framework
Component Model and UI Framework
Browser CompatibilityBrowser Compatibility
ASP.NET AJAX Client Script Library Sys.Net : Gestion du Networking
XMLHTTP – Variations dans vos BrowsersCouche de communication cliente basée sur XMLHTTP
WebRequest, WebResponse, MethodRequest classes
ASP.NET AJAX Web Services BridgeAccé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) et REST<script src=“MyService.asmx/js”/>
<script> function onLoad() { MyService.GetItemsByName(Text1.value, onComplete); } function onComplete(results) { $(‘ResultsDataSource’).set_data(results); }</script>
Génération automatique d‘un
proxy client
Consommer un webservice depuis ASP.NET AJAX
ASP.NET AJAX Control Toolkit
Etendre AJAX
ASP.NET AJAX: Contrôles Extender
Etend vos contrôles ASP.NET avec des comportements AJAX
Blocs fonctionnels interactifs réutilisablesEn mode déclaratif ou en mode codeDrag-and-drop, Tooltips, Popups, Auto-complete
Exemple: <ajaxToolkit:AutoCompleteExtender>Active l’auto-completion sur un TextboxCommunique avec un .asmx et WCF (ASP.NET AJAX JSON bridge)
<asp:textbox id=“CustomerSearch” runat=“server”/>
<ajaxToolkit:AutoCompleteExtender ID="AutoComplete" runat="server"> <asp:AutoCompleteProperties Enabled="true" ServiceMethod="GetCustomerName" ServicePath="~/CustomerService.asmx" TargetControlID="CustomerSearch" />
ASP.NET AJAX Contrôles Toolkit
Ensemble de ScenariosPour 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 AJAXTrès haute réutilisabilité
Modèle de participation communautaireGallerie de composants ASP.NET AJAX
Tout le monde peut y participer !!!
ASP.NET AJAX Contrôles Toolkit
Connectez-vous à CodePlexOuvrez 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 ExtenderInstallez le Templates ProjectAjaxControlExtender.vsi
La Documentation : http://ajax.asp.net/ajaxtoolkit/
ASP.NET AJAX Control Toolkit
ASP.NET AJAX
Roadmap
ASP.NET AJAX Roadmap
ASP.NET AJAX V1.0 Maintenant disponibleTéléchargement sur http://ajax.asp.netSupport du produitEntièrement gratuit Integration dans Visual Studio “Orcas”Incorporation de nombreuses nouveautés AJAXIncorporation d’un mode de création Design-TimeAmélioration du mode “débugging” JavaScript
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 à maintenirModèle de programmation unifiéCompatible multi-browser
AJAX Control Toolkit Essayiez ASP.NET AJAX Ext dès aujourd’hui !!!
http://ajax.asp.net exemple, démo, docs, …Forums: http://ajax.asp.net/forums
Nous [email protected]://www.wygwam.com http://www.microsoft.fr
Ressources
© 2007 Microsoft France
Votre potentiel, notre passion TM
