Vous montrer que ASP.NET AJAX Ext. est La continuité de ce que vous avez toujours réalisé Simple...

Grégory Renard Aurélien VerlaCTO Wygwam Expert .NET Wygwamgregory@wygwam.com aurelien@wygwam.com

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

Exemple d’une App ASP.NET AJAX

www.techheadbrothers.com

Exemple d’une App ASP.NET AJAX

http://www.guidetele.com

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 contacterinfo@wygwam.comhttp://www.wygwam.com http://www.microsoft.fr

Ressources

© 2007 Microsoft France

Votre potentiel, notre passion TM