© r

aon

a 2

00

6

Microsoft AJAX Library. ASP.NET 2.0 AJAX Extensions

www.raona.com www.raona.com

Tel. 351.414.78.13Tel. 351.414.78.13

Carlos ZaniniCarlos Zaninicarlos.zanini@raona.comcarlos.zanini@raona.comRaonaRaonahttp://www.carloszanini.com.arhttp://www.carloszanini.com.ar

2by

Microsoft AJAX Library. ASP.NET 2.0 AJAX Microsoft AJAX Library. ASP.NET 2.0 AJAX ExtensionsExtensions

AgendaAgenda

• AJAXAJAX• Qué es?Qué es?• Cómo funciona? EjemplosCómo funciona? Ejemplos• EvoluciónEvolución

• AJAX con MicrosoftAJAX con Microsoft• ATLAS. MS AJAX Library. AJAX ATLAS. MS AJAX Library. AJAX

ExtensionsExtensions• Roadmap / GoalsRoadmap / Goals• ArquitecturaArquitectura• ControlesControles

• ASP.NET AJAX Control ToolkitASP.NET AJAX Control Toolkit• Más controles..Más controles..

• Recursos, referenciasRecursos, referencias

3by

Microsoft AJAX Library. ASP.NET 2.0 AJAX Microsoft AJAX Library. ASP.NET 2.0 AJAX ExtensionsExtensions

AJAX – ¿Qué es?AJAX – ¿Qué es?

• Asynchronous JavaScript and Asynchronous JavaScript and XMLXML

• Combina Combina DHTMLDHTML, , JavaScriptJavaScript y y XmlHttpXmlHttp

• Soportado en IE, Firefox, Mozilla, Soportado en IE, Firefox, Mozilla, Opera, Safari, Konqueror, etc.Opera, Safari, Konqueror, etc.

• Mejora la Mejora la performanceperformance de las de las aplicaciones Webs. Refresca partes aplicaciones Webs. Refresca partes de una página y no toda.de una página y no toda.

• Ejemplos? mail.google.com, Ejemplos? mail.google.com, www.live.comwww.live.com

4by

Microsoft AJAX Library. ASP.NET 2.0 AJAX Microsoft AJAX Library. ASP.NET 2.0 AJAX ExtensionsExtensions

AJAX – DEMOAJAX – DEMO

AJAX SimpleAJAX Simple

5by

Microsoft AJAX Library. ASP.NET 2.0 AJAX Microsoft AJAX Library. ASP.NET 2.0 AJAX ExtensionsExtensions

AJAX - EvoluciónAJAX - Evolución

•IFRAME (1996) / LAYER (1997)IFRAME (1996) / LAYER (1997)•Remote Scripting (1998)Remote Scripting (1998)

• IE4, NS4IE4, NS4•Flash 4Flash 4•XmlHttpRequest (2000)XmlHttpRequest (2000)

• IE5, Outlook Web AccessIE5, Outlook Web Access• Safari, Opera (2002)Safari, Opera (2002)

•W3c (World Wide Web W3c (World Wide Web Consortium)Consortium)

• Publicó un Draft “The Publicó un Draft “The XMLHttpRequest Object” (27 Sept XMLHttpRequest Object” (27 Sept 2006)2006)

•Ajax Push (Comet, fJax …)Ajax Push (Comet, fJax …)

6by

Microsoft AJAX Library. ASP.NET 2.0 AJAX Microsoft AJAX Library. ASP.NET 2.0 AJAX ExtensionsExtensions

AJAX con MicrosoftAJAX con Microsoft

• Ajax.Net / ProfessionalAjax.Net / Professional• ComfortASP.NETComfortASP.NET• MagicAJAX.NETMagicAJAX.NET• ZumiPageZumiPage• FastPageFastPage• ASP.NET 2.0 CallbacksASP.NET 2.0 Callbacks• ATLAS (Sept 2005)ATLAS (Sept 2005)• … …• ATLAS (CTP July 2006)ATLAS (CTP July 2006)

• Go-Live licenseGo-Live license

7by

Microsoft AJAX Library. ASP.NET 2.0 AJAX Microsoft AJAX Library. ASP.NET 2.0 AJAX ExtensionsExtensions

AJAX con Microsoft - RoadmapAJAX con Microsoft - Roadmap

• Versión 1.0 a fin de añoVersión 1.0 a fin de año

• Beta, Release Candidate, RTMBeta, Release Candidate, RTM

• Componentes que permiten a Componentes que permiten a desarrolladores construir desarrolladores construir controles/componentes client-side.controles/componentes client-side.

• Funcionalidad server-side que Funcionalidad server-side que proveerá integración con ASP.NETproveerá integración con ASP.NET

• Fully-supported 1.0 releaseFully-supported 1.0 release

• Soporte de distintos BrowsersSoporte de distintos Browsers

8by

Microsoft AJAX Library. ASP.NET 2.0 AJAX Microsoft AJAX Library. ASP.NET 2.0 AJAX ExtensionsExtensions

Microsoft AJAX Library - ArquitecturaMicrosoft AJAX Library - ArquitecturaWeb ServerWeb Server

IE

Firefox

Safari

BrowseBrowserr

ClientsClientsMicrosoft AJAX Microsoft AJAX

LibraryLibrary

AtlasUIGlitz.js

AtlasGadgets.js

AtlasFX.js

AtlasCompat.js

AtlasRuntime.js

JSON Bridge Support

Membership and Personalization

Support

ASP.NET Server Control Integration

IIS and ASP.NETIIS and ASP.NET

Apache and PHPApache and PHP

ColdFusionColdFusion

ASP.NET 2.0 AJAX ASP.NET 2.0 AJAX ExtensionsExtensions

ASP.NET AJAX ASP.NET AJAX Control ToolkitControl Toolkit

9by

Microsoft AJAX Library. ASP.NET 2.0 AJAX Microsoft AJAX Library. ASP.NET 2.0 AJAX ExtensionsExtensions

ASP.NET 2.0 AJAX Extensions - ArquitecturaASP.NET 2.0 AJAX Extensions - Arquitectura

ASP.NETASP.NET

Application Services

Application Services

Page Framework,

Server Controls

Page Framework,

Server Controls

Microsoft AJAX LibraryMicrosoft AJAX Library

Client Application

Services

Client Application

Services

Component/UI

Framework,Controls

Component/UI

Framework,Controls

BrowserBrowser

PresentationPresentation(HTML/CSS)(HTML/CSS)

PresentationPresentation(HTML/CSS)(HTML/CSS)

ASP.NET ApplicationASP.NET

Application

PagesPagesPagesPages

UI BehaviorUI Behavior(Managed(Managed

Code)Code)

UI BehaviorUI Behavior(Managed(Managed

Code)Code)

Input Data

Updated UI + Behavior

Initial Rendering

(UI + Behavior)

10by

Microsoft AJAX Library. ASP.NET 2.0 AJAX Microsoft AJAX Library. ASP.NET 2.0 AJAX ExtensionsExtensions

ASP.NET 2.0 AJAX Extensions – Server ControlsASP.NET 2.0 AJAX Extensions – Server Controls

• Mejora aplicaciones ASP.NETMejora aplicaciones ASP.NET• La lógica sigue estando del lado del La lógica sigue estando del lado del

servidorservidor• No es necesario ser un genio de JavaScriptNo es necesario ser un genio de JavaScript

• Técnicas AJAX reducen tráficoTécnicas AJAX reducen tráfico• Permite refresco parcial de una páginaPermite refresco parcial de una página• Edición de datos, validación de Edición de datos, validación de

formularios, refresco automático..formularios, refresco automático..

• Interacción enriquecida con controles Interacción enriquecida con controles

ASP.NET existentesASP.NET existentes• Se extienden los controles para el soporte Se extienden los controles para el soporte

de AJAXde AJAX• Mismos controles, modelo de objetos y Mismos controles, modelo de objetos y

eventos que ya conocemoseventos que ya conocemos• Auto-completion, web parts, drag-and-Auto-completion, web parts, drag-and-

drop, etcdrop, etc

11by

Microsoft AJAX Library. ASP.NET 2.0 AJAX Microsoft AJAX Library. ASP.NET 2.0 AJAX ExtensionsExtensions

AJAX con Microsoft - ControlesAJAX con Microsoft - Controles

• ScriptManagerScriptManager

• Coordina el render de la página Coordina el render de la página para controles del servidorpara controles del servidor

• Envía al cliente los scripts (JS) Envía al cliente los scripts (JS) apropiados, dependiendo del apropiados, dependiendo del browserbrowser

<atlas:ScriptManager ID="scriptManager" <atlas:ScriptManager ID="scriptManager" EnablePartialRendering="true" runat="server" />EnablePartialRendering="true" runat="server" />

12by

Microsoft AJAX Library. ASP.NET 2.0 AJAX Microsoft AJAX Library. ASP.NET 2.0 AJAX ExtensionsExtensions

AJAX con Microsoft - ControlesAJAX con Microsoft - Controles

• UpdatePanelUpdatePanel• Control estrella Control estrella • Permite actualizar regiones dentro Permite actualizar regiones dentro

de una páginade una página

Algunos controles que no se actualizarán ..

<atlas:UpdatePanel id=“u1” runat=“server”> <ContentTemplate>

Estos controles se actualizan dinámicamente <asp:calendar id=“cal1” runat=“server”/>

<ContentTemplate></atlas:UpdatePanel>

Más contenido o controles que no se actualizarán ..

13by

Microsoft AJAX Library. ASP.NET 2.0 AJAX Microsoft AJAX Library. ASP.NET 2.0 AJAX ExtensionsExtensions

ScriptManager & UpdatePanel – DEMOScriptManager & UpdatePanel – DEMO

ScriptManager & ScriptManager & UpdatePanelUpdatePanel

14by

Microsoft AJAX Library. ASP.NET 2.0 AJAX Microsoft AJAX Library. ASP.NET 2.0 AJAX ExtensionsExtensions

AJAX con Microsoft - ControlesAJAX con Microsoft - Controles

• AutoCompleteExtenderAutoCompleteExtender• Google-suggest styleGoogle-suggest style• Soporta Web Services de .NETSoporta Web Services de .NET

• DragOverlayExtenderDragOverlayExtender• Drag & Drop de controlesDrag & Drop de controles

• ProfileScriptServiceProfileScriptService• Soporte AJAX de ProfileSoporte AJAX de Profile

• InitialDataInitialData• Carga inicial de datosCarga inicial de datos

• TimerControl, WebPartManager, TimerControl, WebPartManager, WebPartZone, Gadget, WebPartZone, Gadget, UpdateProgress..UpdateProgress..

15by

Microsoft AJAX Library. ASP.NET 2.0 AJAX Microsoft AJAX Library. ASP.NET 2.0 AJAX ExtensionsExtensions

DEMODEMO

Mas controles..Mas controles..

16by

Microsoft AJAX Library. ASP.NET 2.0 AJAX Microsoft AJAX Library. ASP.NET 2.0 AJAX ExtensionsExtensions

ASP.NET AJAX Control Toolkit – Qué es?ASP.NET AJAX Control Toolkit – Qué es?

• Librería de controles ASP.NET Librería de controles ASP.NET con soporte AJAXcon soporte AJAX

• Contribuyen desarrolladores que Contribuyen desarrolladores que no trabajan en Microsoftno trabajan en Microsoft

• Código fuente liberadoCódigo fuente liberado

• Antes de fin de año se espera Antes de fin de año se espera tener 50 controlestener 50 controles

17by

Microsoft AJAX Library. ASP.NET 2.0 AJAX Microsoft AJAX Library. ASP.NET 2.0 AJAX ExtensionsExtensions

ASP.NET AJAX Control Toolkit – ControlesASP.NET AJAX Control Toolkit – Controles

• AccordionAccordion• AlwaysVisibleControlAlwaysVisibleControl• AnimationAnimation• CascadingDropDownCascadingDropDown• CollapsiblePanelCollapsiblePanel• ConfirmButtonConfirmButton• DragPanelDragPanel• DropShadowDropShadow• DynamicPopulateDynamicPopulate• FileredTextBoxFileredTextBox• … …

18by

Microsoft AJAX Library. ASP.NET 2.0 AJAX Microsoft AJAX Library. ASP.NET 2.0 AJAX ExtensionsExtensions

Back button !!Back button !!

• Soporte de Back Button en Soporte de Back Button en UpdatePanelUpdatePanel

• Desarrollado por el Arquitecto del Desarrollado por el Arquitecto del equipo “Web Platform and Tools” equipo “Web Platform and Tools” de Microsoftde Microsoft

• Simula mediante bookmarks las Simula mediante bookmarks las páginas anteriorespáginas anteriores

• Mejora aún más la experiencia del Mejora aún más la experiencia del usuariousuario

•

19by

Microsoft AJAX Library. ASP.NET 2.0 AJAX Microsoft AJAX Library. ASP.NET 2.0 AJAX ExtensionsExtensions

Recursos, referenciasRecursos, referencias

ASP.NET AJAX Web SiteASP.NET AJAX Web Site• http://ajax.asp.net/http://ajax.asp.net/

BlogsBlogs• http://ajax.asp.net/Roller/default.aspx?http://ajax.asp.net/Roller/default.aspx?

tabindex=0&mid=474tabindex=0&mid=474

Atlas Control ToolkitAtlas Control Toolkit• http://ajax.asp.net/default.aspx?http://ajax.asp.net/default.aspx?

tabid=47&subtabid=477tabid=47&subtabid=477

Documentación de AtlasDocumentación de Atlas• http://ajax.asp.net/docs/Default.aspxhttp://ajax.asp.net/docs/Default.aspx

© r

aon

a 2

00

6

Microsoft AJAX Library. ASP.NET 2.0 AJAX Extensions

GraciasGracias

www.raona.com www.raona.com

Tel. 902.362.918Tel. 902.362.918

Carlos ZaniniCarlos ZaniniRaonaRaonahttp://www.carloszanini.com.arhttp://www.carloszanini.com.ar