AJAX ATLAS

1
AJAX / ATLAS

• Carlos Zanini,Harriague Asociados
• czanini_at_harriague.com.ar
• www.harriague.com.ar

2
Agenda

• Que es AJAX
• Aplicaciones Web tradicionales
• Algunas soluciones
• Beneficios de AJAX
• Casos de éxito
• AJAX.NET Cómo funciona
• Beneficios de AJAX.NET

3
Que es AJAX

• Asynchronous JavaScript And XML
• Combinacion de 3 tecnologías
• HTML (o XHTML) y CSS
• Document Object Model (DOM) y JavaScript
• XML y XSLT
• Soportado por diferentes navegadores
• Internet Explorer
• Mozilla, Firefox
• Opera
• Konqueror
• Safari

4
Aplicaciones Web tradicionales

• El protocolo HTTP es StateLess
• La interacción del usuario significa ir al
  servidor
• TODA la página viaja al servidor
• Uso de ancho de banda excesivo
• .NET simplifico al desarrollador
• La experiencia del usuario no es la mejor

5
Algunas soluciones

• IFRAME (solo IE)
• 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.status 200 )
• var mytext x.responseText

6
Ventajas de AJAX

• Procesamiento Server-Side sin postbacks
• Dispara y procesa pedidos/respuestas del servidor
  asincrónicamente
• Ahorro de ancho de banda
• Mejora la experiencia del usuario

7
Algunos ejemplos..

• Google Mail
• Google Suggest

8
Algunos ejemplos..

• Outlook Web Access, www.live.com

9
AJAX.NET Cómo funciona

• Se agrega una Referencia a ajax.dll al proyecto
• Se configura en el Web.Config un HttpHandler para
  los request de Ajax.NET
• ltconfigurationgt
• ltsystem.webgt
• lthttpHandlersgt
• ltadd verb"POST,GET" path"ajax/.ashx"
  type"Ajax.PageHandlerFactory, Ajax" /gt
• lt/httpHandlersgt
• ltsystem.webgt
• lt/configurationgt

10
AJAX.NET Cómo funciona

• La clase debe Registrarse para AJAX.NET
• private void Page_Load(object sender, EventArgs
  e)
• Ajax.Utility.RegisterTypeForAjax(typeof(Inde
  x))
• 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

11
AJAX.NET Cómo funciona

• La llamada se hace desde JavaScript
• ltscript language"javascript"gt
• Sample.ServerSideAdd(100,99, ServerSideAdd_CallBac
  k)
• function ServerSideAdd_CallBack(response)
• if (response.error ! null)
• alert(response.error)
• return
• alert(response.value)
• lt/scriptgt

12
Beneficios de 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.
• Los WebServices se utilizan sin necesidad ser
  modificados
• ltscript type text/javascript
  srcservice1.asmx?AJAXgtlt/scriptgt
• DataSet, DataTable, DataRow, ArrayList, Array,
  DateTime, TimeSpan,
• Permite acceder a HttpContext.Current.Session

13

• Demo AJAX.NET con VS2003

14
Preguntas.. ?
Carlos Zanini,Harriague Asociados czanini_at_harri
ague.com.ar www.harriague.com.ar
15
Proyecto ATLAS
16
Agenda

• Que es ATLAS
• Visión general de ATLAS
• Arquitectura
• Desarrollando en Atlas
• Componentes y Tipos
• Comunicación con el Servidor
• Script Controls
• Server Controls
• Demo
• Como prepararse para ATLAS

17
Vision General de Atlas

• Permite la creación de aplicaciones ricas e
  interactivas usando DHTML
• Orientado a Componentes
• Modelos de programación imperativo y declarativo
• Se integra con ASP.Net 2.0

• Extensible Application framework
• Componentes de script personalizados, controles,
  behaviors
• Controles de servidor personalizados
• Hace mas amistoso el desarrollo de aplicaciones
  basadas en scripts en el cliente

18
Arquitectura
Atlas-enabled ASP.NET Pages
HTML, Script, Atlas Markup
Atlas Service Proxies
Web Services (ASMX or WCF)
Controls, Components
Atlas Server Controls
Atlas Client Framework and Services
Atlas Server Framework
19
Desarrollando en Atlas

• Desarrollo de aplicaciones
• Inclusión simple de funcionalidad basada en
  script vía componentes de scripts o controles de
  servidor
• Separación de UI y comportamiento
• Desarrollo de componentes
• Desarrollo de scripts en forma disciplinada
• Framework para encapsular datos y lógica
• Abstrae la diferencia de los navegadores
• Provee building blocks como base de desarrollo.

20
Componentes y Tipos

• Escenario
• Los script pueden volverse desordenados,
  inmantenibles, etc.
• Solución
• Encapsular datos y lógica en clases
• Exponer un modelo de objetos intuitivo
• Atlas provee constructores OOP para script
• Namespaces, clases, interfaces, herencia, etc.
• Atlas permite a las clases trabajar en conjunto
• Web.Component
• Participan en mecanismo de dispose
• Soportan uso declarativo

21
Comunicación con el Servidor

• Escenario
• Las aplicaciones necesitan acceder a datos en el
  servidor
• Solución
• Exponer funcionalidad del servidor como web
  services y acceder a ellas mediante XMLHTTP
• Atlas provee building blocks para esto
• WebRequest abstrae a XMLHTTP
• ServiceMethodRequest, y PageMethodRequest
  permiten invocar WebMethods
• Proxies de script auto-generados

22
Script Controls

• Escenario
• Las aplicaciones necesitan interfaces de usuario
  interactivas y visualizar muchos datos dinámicos
• Solución
• Empaquetar la lógica de UI como componentes
  asociados a elementos HTML
• Controles de scripts Atlas
• Conjunto básico de controles incluidos
• Permiten definir comportamiento separado de la
  inteface de usuario
• Pueden manipular DOM, manejar eventos, participar
  en validaciones, etc.

23
Server Controls

• Escenario
• Las aplicaciones necesitan mejorar la
  funcionalidad del lado del cliente
• Solución
• Mejorar 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
• Construidos sobre ASP.NET v2.0
• IScriptComponent, ScriptManager
• RenderScript y metodos relacionados
• Representacion del lado del servidor de bindings,
  acciones, comportamiento, etc
• Propiedades y eventos del lado del servidor, etc.
• Soporte 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

25
Como prepararse para ATLAS

• Estructurar la aplicación para el re uso
• Separar funcionalidad UI en Web Services
• Crear componentes UI con user controls
• Utilizar CSS para manejar los estilos
• Usar ASP.NET 2.0
• ASP.NET Client Callbacks (ICallbackEventHandler)
• Personalización de UI
• Empezar a pensar en UI ricos (rich client)

26
Links / Recursos

• ATLAS
• http//atlas.asp.net/
• AJAX.NET
• http//www.schwarz-interactive.de/
• Visual Studio 2005
• http//msdn.microsoft.com/vstudio/
• MSDN
• http//msdn.microsoft.com
• Live.com
• http//www.live.com/
• Mi Blog
• http//www.exodus.com.ar/blogs/carloszanini/

27
Preguntas.. ?
Carlos Zanini,Harriague Asociados czanini_at_harri
ague.com.ar www.harriague.com.ar