AJAX / ATLASAJAX / ATLASCarlos ZaniniCarlos Zanini,,

Harriague & AsociadosHarriague & Asociados

czanini@harriague.com.arczanini@harriague.com.ar

www.harriague.com.arwww.harriague.com.ar

Traducido y Adaptado Traducido y Adaptado

Cesar Wolfgang PozoCesar Wolfgang Pozo

Para Celula - UPCPara Celula - UPC

AgendaAgenda Que es AJAXQue es AJAX Aplicaciones Web tradicionalesAplicaciones Web tradicionales Algunas solucionesAlgunas soluciones Beneficios de AJAXBeneficios de AJAX Casos de éxitoCasos de éxito AJAX.NET – Cómo funcionaAJAX.NET – Cómo funciona Beneficios de AJAX.NETBeneficios de AJAX.NET

Que es AJAXQue 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

Aplicaciones Web tradicionalesAplicaciones Web tradicionales

El protocolo HTTP es “StateLess”El protocolo HTTP es “StateLess” La interacción del usuario significa ir La interacción del usuario significa ir

al servidoral servidor TODA la página viaja al servidorTODA la página viaja al servidor Uso de ancho de banda excesivoUso de ancho de banda excesivo .NET simplifico al desarrollador.NET simplifico al desarrollador La experiencia del usuario no es la La experiencia del usuario no es la

mejormejor

El protocolo HTTP es “StateLess”El protocolo HTTP es “StateLess” La interacción del usuario significa ir La interacción del usuario significa ir

al servidoral servidor TODA la página viaja al servidorTODA la página viaja al servidor Uso de ancho de banda excesivoUso de ancho de banda excesivo .NET simplifico al desarrollador.NET simplifico al desarrollador La experiencia del usuario no es la La experiencia del usuario no es la

mejormejor

Algunas solucionesAlgunas soluciones

IFRAME (solo IE)IFRAME (solo IE) XmlHttp (complicado, tampoco es cross-XmlHttp (complicado, tampoco es cross-

browser)browser)

var x = new ActiveXObject("Microsoft.XMLHTTP");var x = new ActiveXObject("Microsoft.XMLHTTP");

x.Open( "GET", "http://server/dir1/resource.asp", true)x.Open( "GET", "http://server/dir1/resource.asp", true)

x.onreadystatechange = HandleStateChange;x.onreadystatechange = HandleStateChange;

x.Send()x.Send()

function HandleStateChange()function HandleStateChange()

{{

if (x.readyState == 4) { // Completeif (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-XmlHttp (complicado, tampoco es cross-

browser)browser)

var x = new ActiveXObject("Microsoft.XMLHTTP");var x = new ActiveXObject("Microsoft.XMLHTTP");

x.Open( "GET", "http://server/dir1/resource.asp", true)x.Open( "GET", "http://server/dir1/resource.asp", true)

x.onreadystatechange = HandleStateChange;x.onreadystatechange = HandleStateChange;

x.Send()x.Send()

function HandleStateChange()function HandleStateChange()

{{

if (x.readyState == 4) { // Completeif (x.readyState == 4) { // Complete

if ( x.status == 200 )if ( x.status == 200 )

var mytext = x.responseText;var mytext = x.responseText;

}}

}}

Ventajas de AJAXVentajas de AJAX

Procesamiento Server-Side sin Procesamiento Server-Side sin postbackspostbacks

Dispara y procesa pedidos/respuestas Dispara y procesa pedidos/respuestas del servidor asincrónicamentedel servidor asincrónicamente

Ahorro de ancho de bandaAhorro de ancho de banda Mejora la experiencia del usuarioMejora la experiencia del usuario

Procesamiento Server-Side sin Procesamiento Server-Side sin postbackspostbacks

Dispara y procesa pedidos/respuestas Dispara y procesa pedidos/respuestas del servidor asincrónicamentedel servidor asincrónicamente

Ahorro de ancho de bandaAhorro de ancho de banda Mejora la experiencia del usuarioMejora la experiencia del usuario

Algunos ejemplos..Algunos ejemplos.. Google MailGoogle Mail Google SuggestGoogle Suggest

Google MailGoogle Mail Google SuggestGoogle Suggest

Algunos ejemplos..Algunos ejemplos.. Outlook Web Access, Outlook Web Access, www.live.comwww.live.com Outlook Web Access, Outlook Web Access, www.live.comwww.live.com

AJAX.NET – Cómo funcionaAJAX.NET – Cómo funciona

Se agrega una Referencia a “ajax.dll” al Se agrega una Referencia a “ajax.dll” al proyectoproyecto

Se configura en el Web.Config un Se configura en el Web.Config un HttpHandler para los request de Ajax.NETHttpHandler para los request de Ajax.NET

<configuration><configuration>

<system.web><system.web>

<httpHandlers><httpHandlers>

<add verb="POST,GET" path="ajax/*.ashx"<add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax" /> type="Ajax.PageHandlerFactory, Ajax" />

</httpHandlers></httpHandlers>

<system.web><system.web>

</configuration></configuration>

Se agrega una Referencia a “ajax.dll” al Se agrega una Referencia a “ajax.dll” al proyectoproyecto

Se configura en el Web.Config un Se configura en el Web.Config un HttpHandler para los request de Ajax.NETHttpHandler para los request de Ajax.NET

<configuration><configuration>

<system.web><system.web>

<httpHandlers><httpHandlers>

<add verb="POST,GET" path="ajax/*.ashx"<add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax" /> type="Ajax.PageHandlerFactory, Ajax" />

</httpHandlers></httpHandlers>

<system.web><system.web>

</configuration></configuration>

AJAX.NET – Cómo funcionaAJAX.NET – Cómo funciona

La clase debe Registrarse para AJAX.NETLa clase debe Registrarse para AJAX.NETprivate void Page_Load(object sender, EventArgs e) {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 Los métodos se escriben en C#/VB.NET y se les agrega un atributo [AjaxMethod]se les agrega un atributo [AjaxMethod]

[Ajax.AjaxMethod()][Ajax.AjaxMethod()]

public int ServerSideAdd(int firstNumber, int public int ServerSideAdd(int firstNumber, int secondNumber)secondNumber)

{{

return firstNumber + secondNumber;return firstNumber + secondNumber;

}}

La clase debe Registrarse para AJAX.NETLa clase debe Registrarse para AJAX.NETprivate void Page_Load(object sender, EventArgs e) {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 Los métodos se escriben en C#/VB.NET y se les agrega un atributo [AjaxMethod]se les agrega un atributo [AjaxMethod]

[Ajax.AjaxMethod()][Ajax.AjaxMethod()]

public int ServerSideAdd(int firstNumber, int public int ServerSideAdd(int firstNumber, int secondNumber)secondNumber)

{{

return firstNumber + secondNumber;return firstNumber + secondNumber;

}}

AJAX.NET – Cómo funcionaAJAX.NET – Cómo funciona

La llamada se hace desde JavaScriptLa llamada se hace desde JavaScript

<script language="javascript"><script language="javascript">

Sample.ServerSideAdd(100,99, ServerSideAdd_CallBack);Sample.ServerSideAdd(100,99, ServerSideAdd_CallBack);

function ServerSideAdd_CallBack(response){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);

}}

</script></script>

La llamada se hace desde JavaScriptLa llamada se hace desde JavaScript

<script language="javascript"><script language="javascript">

Sample.ServerSideAdd(100,99, ServerSideAdd_CallBack);Sample.ServerSideAdd(100,99, ServerSideAdd_CallBack);

function ServerSideAdd_CallBack(response){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);

}}

</script></script>

Beneficios de AJAX.NETBeneficios de AJAX.NET

• Los métodos y clases de nuestra aplicación Los métodos y clases de nuestra aplicación pueden ser utilizados para AJAX.NET.pueden ser utilizados para AJAX.NET.

• Podemos retornar una clase .NET serializada Podemos retornar una clase .NET serializada como un objeto para JavaScript.como un objeto para JavaScript.

• Los WebServices se utilizan sin necesidad Los WebServices se utilizan sin necesidad ser modificadosser modificados

<script type= “text/javascript“ src=“service1.asmx?<script type= “text/javascript“ src=“service1.asmx?AJAX“></script>AJAX“></script>

• DataSet, DataTable, DataRow, ArrayList, DataSet, DataTable, DataRow, ArrayList, Array, DateTime, TimeSpan, …Array, DateTime, TimeSpan, …

• Permite acceder a Permite acceder a HttpContext.Current.Session[…]HttpContext.Current.Session[…]

• Los métodos y clases de nuestra aplicación Los métodos y clases de nuestra aplicación pueden ser utilizados para AJAX.NET.pueden ser utilizados para AJAX.NET.

• Podemos retornar una clase .NET serializada Podemos retornar una clase .NET serializada como un objeto para JavaScript.como un objeto para JavaScript.

• Los WebServices se utilizan sin necesidad Los WebServices se utilizan sin necesidad ser modificadosser modificados

<script type= “text/javascript“ src=“service1.asmx?<script type= “text/javascript“ src=“service1.asmx?AJAX“></script>AJAX“></script>

• DataSet, DataTable, DataRow, ArrayList, DataSet, DataTable, DataRow, ArrayList, Array, DateTime, TimeSpan, …Array, DateTime, TimeSpan, …

• Permite acceder a Permite acceder a HttpContext.Current.Session[…]HttpContext.Current.Session[…]

Preguntas.. ?Preguntas.. ?

Carlos ZaniniCarlos Zanini,,Harriague & AsociadosHarriague & Asociados

czanini@harriague.com.arczanini@harriague.com.ar

www.harriague.com.arwww.harriague.com.ar

Proyecto “ATLAS”Proyecto “ATLAS”

AgendaAgenda Que es ATLASQue es ATLAS Visión general de ATLASVisión general de ATLAS ArquitecturaArquitectura Desarrollando en “Atlas”Desarrollando en “Atlas” Componentes y TiposComponentes y Tipos Comunicación con el ServidorComunicación con el Servidor Script ControlsScript Controls Server ControlsServer Controls DemoDemo Como prepararse para ATLASComo prepararse para ATLAS

Vision General de “Atlas”Vision General de “Atlas”

Permite la creación de aplicaciones ricas e Permite la creación de aplicaciones ricas e interactivas usando DHTMLinteractivas usando DHTML

Orientado a ComponentesOrientado a Componentes Modelos de programación: imperativo y Modelos de programación: imperativo y

declarativodeclarativo Se integra con ASP.Net 2.0Se integra con ASP.Net 2.0

Extensible Application frameworkExtensible Application framework• Componentes de script personalizados, Componentes de script personalizados,

controles, behaviorscontroles, behaviors• Controles de servidor personalizadosControles de servidor personalizados

Hace mas amistoso el desarrollo de aplicaciones Hace mas amistoso el desarrollo de aplicaciones basadas en scripts en el clientebasadas en scripts en el cliente

ASP.NET “Atlas” Server ExtensionsASP.NET “Atlas” Server Extensions

“Atlas” Server

Controls

“Atlas” Server

Controls

App Services Bridge

App Services Bridge

Web Services Bridge

Web Services Bridge

“Atlas” Server

Controls

“Atlas” Server

Controls

ArquitecturaArquitectura

““Atlas” Server Atlas” Server FrameworkFramework

““Atlas” Client Framework and Atlas” Client Framework and ServicesServices

“Atlas” Client Script Library“Atlas” 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

“Atlas” Client Application Services

“Atlas” Client Application Services

Local Store, …

Local Store, …

BrowserIntegration

BrowserIntegration

ASP.NET 2.0ASP.NET 2.0

Application Services

Application Services

Page Framework,

Server Controls

Page Framework,

Server Controls

““Atlas”-enabled Atlas”-enabled ASP.NET PagesASP.NET Pages

““Atlas”-enabled Atlas”-enabled ASP.NET PagesASP.NET Pages

Web ServicesWeb Services(ASMX or WCF)(ASMX or WCF)

Web ServicesWeb Services(ASMX or WCF)(ASMX or WCF)

HTML, Script,HTML, Script,““Atlas”Atlas”MarkupMarkup

HTML, Script,HTML, Script,““Atlas”Atlas”MarkupMarkup

““Atlas”Atlas”ServiceServiceProxiesProxies

““Atlas”Atlas”ServiceServiceProxiesProxies

Controls, Components

Controls, Components

Desarrollando en “Atlas”Desarrollando en “Atlas”

Desarrollo de aplicacionesDesarrollo de aplicaciones• Inclusión simple de funcionalidad basada en Inclusión simple de funcionalidad basada en

script vía componentes de scripts o controles de script vía componentes de scripts o controles de servidorservidor

• Separación de UI y comportamientoSeparación de UI y comportamiento Desarrollo de componentesDesarrollo 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.

Componentes y TiposComponentes y Tipos

Escenario:Escenario:• Los script pueden volverse desordenados, Los script pueden volverse desordenados,

inmantenibles, etc.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 scriptAtlas” provee constructores OOP para script• Namespaces, clases, interfaces, herencia, etc.Namespaces, clases, interfaces, herencia, etc.

““Atlas” permite a las clases trabajar en Atlas” permite a las clases trabajar en conjuntoconjunto• Web.ComponentWeb.Component• Participan en mecanismo de “dispose”Participan en mecanismo de “dispose”• Soportan uso declarativoSoportan uso declarativo

Comunicación con el ServidorComunicación con el Servidor Escenario:Escenario:

• Las aplicaciones necesitan acceder a datos en el Las aplicaciones necesitan acceder a datos en el servidorservidor

Solución:Solución:• Exponer funcionalidad del servidor como web Exponer funcionalidad del servidor como web

services y acceder a ellas mediante XMLHTTPservices y acceder a ellas mediante XMLHTTP ““Atlas” provee building blocks para estoAtlas” provee building blocks para esto

• WebRequest abstrae a XMLHTTPWebRequest abstrae a XMLHTTP• ServiceMethodRequest, y PageMethodRequest ServiceMethodRequest, y PageMethodRequest

permiten invocar WebMethodspermiten invocar WebMethods Proxies de script auto-generadosProxies de script auto-generados

Script ControlsScript Controls Escenario:Escenario:

• Las aplicaciones necesitan interfaces de usuario Las aplicaciones necesitan interfaces de usuario interactivas y visualizar muchos datos interactivas y visualizar muchos datos dinámicosdinámicos

Solución:Solución:• Empaquetar la lógica de UI como componentes Empaquetar la lógica de UI como componentes

asociados a elementos HTMLasociados 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 Permiten definir comportamiento separado de la

inteface de usuariointeface de usuario• Pueden manipular DOM, manejar eventos, Pueden manipular DOM, manejar eventos,

participar en validaciones, etc.participar en validaciones, etc.

Server ControlsServer Controls Escenario:Escenario:

• Las aplicaciones necesitan mejorar la funcionalidad del Las aplicaciones necesitan mejorar la funcionalidad del lado del clientelado del cliente

Solución:Solución:• Mejorar los controles de servidor para generar paginas Mejorar los controles de servidor para generar paginas

“Compatibles con Atlas” mientras se preserva el modelo “Compatibles con Atlas” mientras se preserva el modelo de programación en el servidorde 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, ScriptManagerIScriptComponent, ScriptManager RenderScript y metodos relacionadosRenderScript y metodos relacionados Representacion del lado del servidor de bindings, acciones, Representacion del lado del servidor de bindings, acciones,

comportamiento, etc…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

• 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

Como prepararse para ATLASComo prepararse para ATLAS

Estructurar la aplicación para el re usoEstructurar la aplicación para el re uso Separar funcionalidad UI en Web ServicesSeparar funcionalidad UI en Web Services Crear componentes UI con user controlsCrear componentes UI con user controls Utilizar CSS para manejar los estilosUtilizar CSS para manejar los estilos

Usar ASP.NET 2.0Usar ASP.NET 2.0 ASP.NET Client Callbacks (ICallbackEventHandler)ASP.NET Client Callbacks (ICallbackEventHandler) Personalización de UIPersonalización de UI

Empezar a pensar en UI ricos (rich client)Empezar a pensar en UI ricos (rich client)

LinksLinks / Recursos/ Recursos ATLASATLAS

• http://http://atlas.asp.netatlas.asp.net// AJAX.NETAJAX.NET

• http://www.schwarz-interactive.de/http://www.schwarz-interactive.de/ Visual Studio 2005Visual Studio 2005

• http://http://msdn.microsoft.commsdn.microsoft.com//vstudiovstudio// MSDNMSDN

• http://http://msdn.microsoft.commsdn.microsoft.com Live.comLive.com

• http://http://www.live.comwww.live.com// Mi BlogMi Blog

• http://http://www.exodus.com.arwww.exodus.com.ar/blogs//blogs/carloszaninicarloszanini//

Preguntas.. ?Preguntas.. ?

Carlos ZaniniCarlos Zanini,,Harriague & AsociadosHarriague & Asociados

czanini@harriague.com.arczanini@harriague.com.ar

www.harriague.com.arwww.harriague.com.ar