1 AJAX / ATLAS Carlos Zanini, Harriague & Asociados [email protected] Traducido y Adaptado Cesar Wolfgang Pozo Para Celula - UPC
2 Agenda Que es AJAX Que es AJAX Aplicaciones Web tradicionales Aplicaciones Web tradicionales Algunas soluciones Algunas soluciones Beneficios de AJAX Beneficios de AJAX Casos de éxito Casos de éxito AJAX.NET – Cómo funciona AJAX.NET – Cómo funciona Beneficios de AJAX.NET Beneficios de AJAX.NET
3 Que es AJAX Asynchronous JavaScript And XML Asynchronous JavaScript And XML Combinacion de 3 tecnologías: Combinacion de 3 tecnologías: HTML (o XHTML) y CSSHTML (o XHTML) y CSS Document Object Model (DOM) y JavaScriptDocument Object Model (DOM) y JavaScript XML y XSLTXML y XSLT Soportado por diferentes navegadores: Soportado por diferentes navegadores: Internet ExplorerInternet Explorer Mozilla, FirefoxMozilla, Firefox OperaOpera KonquerorKonqueror SafariSafari Asynchronous JavaScript And XML Asynchronous JavaScript And XML Combinacion de 3 tecnologías: Combinacion de 3 tecnologías: HTML (o XHTML) y CSSHTML (o XHTML) y CSS Document Object Model (DOM) y JavaScriptDocument Object Model (DOM) y JavaScript XML y XSLTXML y XSLT Soportado por diferentes navegadores: Soportado por diferentes navegadores: Internet ExplorerInternet Explorer Mozilla, FirefoxMozilla, Firefox OperaOpera KonquerorKonqueror SafariSafari
4 Aplicaciones Web tradicionales El protocolo HTTP es “StateLess” El protocolo HTTP es “StateLess” La interacción del usuario significa ir al servidor La interacción del usuario significa ir al servidor TODA la página viaja al servidor TODA la página viaja al servidor Uso de ancho de banda excesivo Uso de ancho de banda excesivo.NET simplifico al desarrollador.NET simplifico al desarrollador La experiencia del usuario no es la mejor La experiencia del usuario no es la mejor El protocolo HTTP es “StateLess” El protocolo HTTP es “StateLess” La interacción del usuario significa ir al servidor La interacción del usuario significa ir al servidor TODA la página viaja al servidor TODA la página viaja al servidor Uso de ancho de banda excesivo Uso de ancho de banda excesivo.NET simplifico al desarrollador.NET simplifico al desarrollador La experiencia del usuario no es la mejor La experiencia del usuario no es la mejor
5 Algunas soluciones IFRAME (solo IE) IFRAME (solo IE) XmlHttp (complicado, tampoco es cross- browser) XmlHttp (complicado, tampoco es cross- browser) var x = new ActiveXObject("Microsoft.XMLHTTP"); x.Open( "GET", "http://server/dir1/resource.asp", true) x.onreadystatechange = HandleStateChange; x.Send() function HandleStateChange() { if (x.readyState == 4) { // Complete if (x.readyState == 4) { // Complete if ( x.status == 200 ) if ( x.status == 200 ) var mytext = x.responseText; var mytext = x.responseText; }} IFRAME (solo IE) IFRAME (solo IE) XmlHttp (complicado, tampoco es cross- browser) XmlHttp (complicado, tampoco es cross- browser) var x = new ActiveXObject("Microsoft.XMLHTTP"); x.Open( "GET", "http://server/dir1/resource.asp", true) x.onreadystatechange = HandleStateChange; x.Send() function HandleStateChange() { if (x.readyState == 4) { // Complete if (x.readyState == 4) { // Complete if ( x.status == 200 ) if ( x.status == 200 ) var mytext = x.responseText; var mytext = x.responseText; }}
6 Ventajas de AJAX Procesamiento Server-Side sin postbacks Procesamiento Server-Side sin postbacks Dispara y procesa pedidos/respuestas del servidor asincrónicamente Dispara y procesa pedidos/respuestas del servidor asincrónicamente Ahorro de ancho de banda Ahorro de ancho de banda Mejora la experiencia del usuario Mejora la experiencia del usuario Procesamiento Server-Side sin postbacks Procesamiento Server-Side sin postbacks Dispara y procesa pedidos/respuestas del servidor asincrónicamente Dispara y procesa pedidos/respuestas del servidor asincrónicamente Ahorro de ancho de banda Ahorro de ancho de banda Mejora la experiencia del usuario Mejora la experiencia del usuario
7 Algunos ejemplos.. Google Mail Google Mail Google Suggest Google Suggest Google Mail Google Mail Google Suggest Google Suggest
8 Algunos ejemplos.. Outlook Web Access, www.live.com Outlook Web Access, www.live.com
9 AJAX.NET – Cómo funciona Se agrega una Referencia a “ajax.dll” al proyecto Se agrega una Referencia a “ajax.dll” al proyecto Se configura en el Web.Config un HttpHandler para los request de Ajax.NET Se configura en el Web.Config un HttpHandler para los request de Ajax.NET Se agrega una Referencia a “ajax.dll” al proyecto Se agrega una Referencia a “ajax.dll” al proyecto Se configura en el Web.Config un HttpHandler para los request de Ajax.NET Se configura en el Web.Config un HttpHandler para los request de Ajax.NET
10 AJAX.NET – Cómo funciona La clase debe Registrarse para AJAX.NET La clase debe Registrarse para AJAX.NET private void Page_Load(object sender, EventArgs e) { Ajax.Utility.RegisterTypeForAjax(typeof(Index)); Ajax.Utility.RegisterTypeForAjax(typeof(Index));} Los métodos se escriben en C#/VB.NET y se les agrega un atributo [AjaxMethod] Los métodos se escriben en C#/VB.NET y se les agrega un atributo [AjaxMethod][Ajax.AjaxMethod()] public int ServerSideAdd(int firstNumber, int secondNumber) { return firstNumber + secondNumber; return firstNumber + secondNumber;} La clase debe Registrarse para AJAX.NET La clase debe Registrarse para AJAX.NET private void Page_Load(object sender, EventArgs e) { Ajax.Utility.RegisterTypeForAjax(typeof(Index)); Ajax.Utility.RegisterTypeForAjax(typeof(Index));} Los métodos se escriben en C#/VB.NET y se les agrega un atributo [AjaxMethod] Los métodos se escriben en C#/VB.NET y se les agrega un atributo [AjaxMethod][Ajax.AjaxMethod()] public int ServerSideAdd(int firstNumber, int secondNumber) { return firstNumber + secondNumber; return firstNumber + secondNumber;}
11 AJAX.NET – Cómo funciona La llamada se hace desde JavaScript La llamada se hace desde JavaScript Sample.ServerSideAdd(100,99, ServerSideAdd_CallBack); function ServerSideAdd_CallBack(response){ if (response.error != null){ if (response.error != null){ alert(response.error); alert(response.error); return; return; } alert(response.value); alert(response.value);} La llamada se hace desde JavaScript La llamada se hace desde JavaScript Sample.ServerSideAdd(100,99, ServerSideAdd_CallBack); function ServerSideAdd_CallBack(response){ if (response.error != null){ if (response.error != null){ alert(response.error); alert(response.error); return; return; } alert(response.value); alert(response.value);}
12 Beneficios de AJAX.NET Los métodos y clases de nuestra aplicación pueden ser utilizados para AJAX.NET.Los métodos y clases de nuestra aplicación pueden ser utilizados para AJAX.NET. Podemos retornar una clase.NET serializada como un objeto para JavaScript.Podemos retornar una clase.NET serializada como un objeto para JavaScript. Los WebServices se utilizan sin necesidad ser modificadosLos WebServices se utilizan sin necesidad ser modificados DataSet, DataTable, DataRow, ArrayList, Array, DateTime, TimeSpan, …DataSet, DataTable, DataRow, ArrayList, Array, DateTime, TimeSpan, … Permite acceder a HttpContext.Current.Session[…]Permite acceder a HttpContext.Current.Session[…] Los métodos y clases de nuestra aplicación pueden ser utilizados para AJAX.NET.Los métodos y clases de nuestra aplicación pueden ser utilizados para AJAX.NET. Podemos retornar una clase.NET serializada como un objeto para JavaScript.Podemos retornar una clase.NET serializada como un objeto para JavaScript. Los WebServices se utilizan sin necesidad ser modificadosLos WebServices se utilizan sin necesidad ser modificados DataSet, DataTable, DataRow, ArrayList, Array, DateTime, TimeSpan, …DataSet, DataTable, DataRow, ArrayList, Array, DateTime, TimeSpan, … Permite acceder a HttpContext.Current.Session[…]Permite acceder a HttpContext.Current.Session[…]
13 Demo AJAX.NET con VS2003Demo AJAX.NET con VS2003
14 Preguntas.. ? Carlos Zanini, Harriague & Asociados [email protected]
15 Proyecto “ATLAS”
16 Agenda Que es ATLAS Que es ATLAS Visión general de ATLAS Visión general de ATLAS Arquitectura Arquitectura Desarrollando en “Atlas” Desarrollando en “Atlas” Componentes y Tipos Componentes y Tipos Comunicación con el Servidor Comunicación con el Servidor Script Controls Script Controls Server Controls Server Controls Demo Demo Como prepararse para ATLAS Como prepararse para ATLAS
17 Vision General de “Atlas” Permite la creación de aplicaciones ricas e interactivas usando DHTML Permite la creación de aplicaciones ricas e interactivas usando DHTML Orientado a Componentes Orientado a Componentes Modelos de programación: imperativo y declarativo Modelos de programación: imperativo y declarativo Se integra con ASP.Net 2.0 Se integra con ASP.Net 2.0 Extensible Application framework Extensible Application framework Componentes de script personalizados, controles, behaviorsComponentes de script personalizados, controles, behaviors Controles de servidor personalizadosControles de servidor personalizados Hace mas amistoso el desarrollo de aplicaciones basadas en scripts en el cliente Hace mas amistoso el desarrollo de aplicaciones basadas en scripts en el cliente
18 ASP.NET “Atlas” Server Extensions “Atlas” Server Controls “Atlas” Server Controls App Services Bridge Web Services Bridge “Atlas” Server Controls “Atlas” Server ControlsArquitectura “Atlas” Server Framework “Atlas” Client Framework and Services “Atlas” Client Script Library Controls, Components Script Core Base Class Library Component Model and UI Framework Browser Compatibility “Atlas” Client Application Services Local Store, … Browser Integration Browser Integration ASP.NET 2.0 Application Services Page Framework, Server Controls Page Framework, Server Controls “Atlas”-enabled ASP.NET Pages “Atlas”-enabled Web Services (ASMX or WCF) Web Services (ASMX or WCF) HTML, Script, “Atlas”Markup “Atlas”Markup “Atlas”ServiceProxies“Atlas”ServiceProxies Controls, Components
19 Desarrollando en “Atlas” Desarrollo de aplicaciones Desarrollo de aplicaciones Inclusión simple de funcionalidad basada en script vía componentes de scripts o controles de servidorInclusión simple de funcionalidad basada en script vía componentes de scripts o controles de servidor Separación de UI y comportamientoSeparación de UI y comportamiento Desarrollo de componentes Desarrollo de componentes Desarrollo de scripts en forma disciplinadaDesarrollo de scripts en forma disciplinada Framework para encapsular datos y lógicaFramework para encapsular datos y lógica Abstrae la diferencia de los navegadoresAbstrae la diferencia de los navegadores Provee building blocks como base de desarrollo.Provee building blocks como base de desarrollo.
20 Componentes y Tipos Escenario: Escenario: Los script pueden volverse desordenados, inmantenibles, etc.Los script pueden volverse desordenados, inmantenibles, etc. Solución: Solución: Encapsular datos y lógica en clasesEncapsular datos y lógica en clases Exponer un modelo de objetos intuitivoExponer un modelo de objetos intuitivo “Atlas” provee constructores OOP para script “Atlas” provee constructores OOP para script Namespaces, clases, interfaces, herencia, etc.Namespaces, clases, interfaces, herencia, etc. “Atlas” permite a las clases trabajar en conjunto “Atlas” permite a las clases trabajar en conjunto Web.ComponentWeb.Component Participan en mecanismo de “dispose”Participan en mecanismo de “dispose” Soportan uso declarativoSoportan uso declarativo
21 Comunicación con el Servidor Escenario: Escenario: Las aplicaciones necesitan acceder a datos en el servidorLas aplicaciones necesitan acceder a datos en el servidor Solución: Solución: Exponer funcionalidad del servidor como web services y acceder a ellas mediante XMLHTTPExponer funcionalidad del servidor como web services y acceder a ellas mediante XMLHTTP “Atlas” provee building blocks para esto “Atlas” provee building blocks para esto WebRequest abstrae a XMLHTTPWebRequest abstrae a XMLHTTP ServiceMethodRequest, y PageMethodRequest permiten invocar WebMethodsServiceMethodRequest, y PageMethodRequest permiten invocar WebMethods Proxies de script auto-generados Proxies de script auto-generados
22 Script Controls Escenario: Escenario: Las aplicaciones necesitan interfaces de usuario interactivas y visualizar muchos datos dinámicosLas aplicaciones necesitan interfaces de usuario interactivas y visualizar muchos datos dinámicos Solución: Solución: Empaquetar la lógica de UI como componentes asociados a elementos HTMLEmpaquetar la lógica de UI como componentes asociados a elementos HTML Controles de scripts “Atlas” Controles de scripts “Atlas” Conjunto básico de controles incluidosConjunto básico de controles incluidos Permiten definir comportamiento separado de la inteface de usuarioPermiten definir comportamiento separado de la inteface de usuario Pueden manipular DOM, manejar eventos, participar en validaciones, etc.Pueden manipular DOM, manejar eventos, participar en validaciones, etc.
23 Server Controls Escenario: Escenario: Las aplicaciones necesitan mejorar la funcionalidad del lado del clienteLas aplicaciones necesitan mejorar la funcionalidad del lado del cliente Solución: Solución: Mejorar los controles de servidor para generar paginas “Compatibles con Atlas” mientras se preserva el modelo de programación en el servidorMejorar los controles de servidor para generar paginas “Compatibles con Atlas” mientras se preserva el modelo de programación en el servidor Controles de Servidor “Atlas” Controles de Servidor “Atlas” Construidos sobre ASP.NET v2.0Construidos sobre ASP.NET v2.0 IScriptComponent, ScriptManager IScriptComponent, ScriptManager RenderScript y metodos relacionados RenderScript y metodos relacionados Representacion del lado del servidor de bindings, acciones, comportamiento, etc… Representacion del lado del servidor de bindings, acciones, comportamiento, etc… Propiedades y eventos del lado del servidor, etc.Propiedades y eventos del lado del servidor, etc. Soporte para escenarios de postbackSoporte para escenarios de postback
24 Atlas Hands on Labs 1 Atlas Hands on Labs 2 Atlas Hands on Labs 3 Atlas Hands on Labs 4 Atlas Hands on Labs 1 Atlas Hands on Labs 2 Atlas Hands on Labs 3 Atlas Hands on Labs 4
25 Como prepararse para ATLAS Estructurar la aplicación para el re uso Estructurar la aplicación para el re uso Separar funcionalidad UI en Web Services Separar funcionalidad UI en Web Services Crear componentes UI con user controls Crear componentes UI con user controls Utilizar CSS para manejar los estilos Utilizar CSS para manejar los estilos Usar ASP.NET 2.0 Usar ASP.NET 2.0 ASP.NET Client Callbacks (ICallbackEventHandler) ASP.NET Client Callbacks (ICallbackEventHandler) Personalización de UI Personalización de UI Empezar a pensar en UI ricos (rich client) Empezar a pensar en UI ricos (rich client)
26 Links / Recursos ATLAS ATLAS http://atlas.asp.net/http://atlas.asp.net/http://atlas.asp.net/ AJAX.NET AJAX.NET http://www.schwarz-interactive.de/http://www.schwarz-interactive.de/http://www.schwarz-interactive.de/ Visual Studio 2005 Visual Studio 2005 http://msdn.microsoft.com/vstudio/http://msdn.microsoft.com/vstudio/http://msdn.microsoft.com/vstudio/ MSDN MSDN http://msdn.microsoft.comhttp://msdn.microsoft.comhttp://msdn.microsoft.com Live.com Live.com http://www.live.com/http://www.live.com/http://www.live.com/ Mi Blog Mi Blog http://www.exodus.com.ar/blogs/carloszanini/http://www.exodus.com.ar/blogs/carloszanini/http://www.exodus.com.ar/blogs/carloszanini/
27 Preguntas.. ? Carlos Zanini, Harriague & Asociados [email protected]