Upload
aaron-soto-acuna
View
216
Download
0
Embed Size (px)
Citation preview
AJAX / ATLASAJAX / ATLASCarlos ZaniniCarlos Zanini,,
Harriague & AsociadosHarriague & Asociados
[email protected]@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
[email protected]@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
[email protected]@harriague.com.ar
www.harriague.com.arwww.harriague.com.ar