Documente Academic
Documente Profesional
Documente Cultură
Javier Ceballos
Estudiar la importancia de AJAX en el desarrollo de aplicaciones Web interactivas. Proponer un desarrollo usando bibliotecas propietarias: ASP.NET AJAX. Proponer otro desarrollo estndar paralelo usando bibliotecas open source: Gaia AJAX.
Form Web
Infraestructura de servidores
ADO.NET: Datos y XML Biblioteca de clases CLR: mquina virtual Windows Servicios COM+
Studio
S. O. Linux: http://software.opensuse.org/
MonoDevelop y opcionalmente Visual Studio. PostgreSql.
Mono: http://www.go-mono.com/mono-downloads/
Servidor de aplicaciones:
mod_mono de Apache.
ASP.NET AJAX Gaia AJAX. XSP.
AJAX:
S. O. Windows
Servidor de aplicaciones:
Servidor de desarrollo de ASP.NET (Cassini). IIS.
AJAX:
ASP.NET AJAX Gaia AJAX.
10
AJAX, acrnimo de Asynchronous JavaScript And XML (JavaScript y XML asncronos), es una tcnica de desarrollo para crear aplicaciones Web interactivas.
11
AJAX no constituye una tecnologa en s, sino que es un trmino que engloba a un grupo de tecnologas que trabajan conjuntamente, como son:
XML. HTML, o su sucesor XHTML, y hojas de estilos en cascada (CSS). JavaScript. DOM. XMLHttpRequest.
12
XHTML DOM
CSS
XML
JSON
XMLHttpRequest JavaScript
13
Modelo sncrono:
Modelo asncrono:
Crear sitios Web interactivos utilizando DHTML (XHTML, JavaScript, CSS y DOM). Crear sitios Web interactivos utilizando AJAX.
14
15
16
17
18
Con esta modalidad todo el trabajo en el lado del cliente queda para el programador.
19
Propiedades:
open( mtodo, URL[, asncrono[, nombreUsuario[, clave]]] ) send( null/contenido ) abort() onreadystatechange, readyState, status, statusText, responseXML y responseText.
20
Presentacin
Lgica de negocio
Datos
Pgina Web
obtenerDatos.aspx.cs
Base de datos
21
http://servidor/carpeta/inicio.html
22
23
En el cliente:
El usuario solicita la pgina http://servidor/carpeta/inicio.html y selecciona una opcin de la lista. Se crea un objeto XMLHttpRequest. Se fija la funcin que ser invocada automticamente cuando el servidor complete la peticin. Utilizando el objeto XMLHttpRequest, se enva (send) una peticin asncrona al servidor:
http://servidor/carpeta/obtenerDatos.aspx?opcion=X
donde X = APTO/NO APTO
En el servidor: En el cliente:
El servidor procesa la peticin y genera un documento XML con el resultado que enva al cliente. Los datos retornados se procesan para actualizar slo la tabla.
24
Demo
25
Con ASP.NET 2.0 se suceden dos tcnicas de llamadas asncronas al servidor: La comunidad y otros fabricantes desarrollan bibliotecas para ASP.NET 2.0:
GAIA AJAX. Script callbacks. ASP.NET AJAX.
26
la tcnica de script callbacks persigue los mismos objetivos que el principio de AJAX visto anteriormente, pero abstrayndonos del manejo de la clase XMLHttpRequest, ya que ASP.NET se encarga de ello de una manera transparente.
27
javascript clienteCallback
javascript WebForm_DoCallback
ASP.NET (WebResource.axd) Response string GetCallbackResult() {...} void RaiseCallbackEvent(string s) {...} Request ICallbackEventHandler
28
ASP.NET AJAX es un entorno de desarrollo de libre distribucin para crear aplicaciones basadas en AJAX que puedan ejecutarse desde todos los navegadores ms populares. Libera al desarrollador del conocimiento de diversas tecnologas: XHTML, DOM, JavaScript, etc. Esto quiere decir que puede eximirlo de escribir el cdigo JavaScript en el lado del cliente, necesario para incorporar AJAX en una aplicacin Web.
29
30
Descargar (http://www.asp.net/ajax/) e instalar: ASP.NET 2.0 AJAX Extensions 1.0. ASP.NET AJAX ya est incluido.
31
Aplicacin Web ASP.NET. Web.config con una serie de entradas que hacen referencia a los componentes ASP.NET AJAX. Y las extensiones AJAX proporcionadas por los controles de servidor:
MS ASP.NET construye automticamente este fichero. Mono: mconfig af -t:web AJAX => Web.config
32
Se trata del gestor que administra las peticiones realizadas desde los scripts de la biblioteca AJAX al servidor y las respuestas de ste. Es necesario en cada pgina que vaya a utilizar las extensiones de AJAX:
<body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <div> </div> </form> </body>
33
Determina la zona actualizable en la pgina. Pueden utilizarse varios controles UpdatePanel, uno para cada zona:
<asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> ... </ContentTemplate> </asp:UpdatePanel>
Intercepta cualquier postback que se produzca en los controles que almacena para realizar una llamada en segundo plano al servidor y recoger la respuesta para actualizar su contenido.
34
Permite actualizar una zona (UpdatePanel) cuando se genere un evento en un control fuera de dicho UpdatePanel:
<asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> ... </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="DropDownList1" EventName="SelectedIndexChanged" /> </Triggers> </asp:UpdatePanel>
35
Permite notificar al usuario el estado de la llamada asncrona en curso. Con un slo control UpdateProgress se puede controlar la actividad de todos los contenedores UpdatePanel de una pgina:
<asp:UpdateProgress ID="UpdateProgress1" runat="server"> <ProgressTemplate> <img src="imagenes/indicador.gif" /> Actualizando... </ProgressTemplate> </asp:UpdateProgress>
36
Timer es un temporizador. Genera un evento Tick cada vez que transcurre el perodo de tiempo Interval, que podemos utilizar para realizar las actualizaciones programadas a travs de los contenedores UpdatePanel:
<asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:Label ID="Label1" runat="server" Text="Hora actual:" /> <asp:Label ID="etHora" runat="server" Text="Label" /> <asp:Timer ID="Timer1" runat="server Interval="1000" OnTick="Timer1_Tick" /> </ContentTemplate> </asp:UpdatePanel>
37
Presentacin
Lgica de negocio
Datos
Pgina Web
Default.aspx.cs
Base de datos
38
39
Crear la base de datos. Crear un sitio Web. Disear la interfaz grfica. Aadir un control ScriptManager. Conectar el DropDownList con una fuente de datos SqlDataSource. Conectar el DetailsView con otra fuente de datos SqlDataSource. Identificar las zonas que sern actualizadas asncronamente y colocarlas en un UpdatePanel.
Utilizaremos un Panel para contener al control DetailsView.
40
Demo
41
Es una biblioteca AJAX para ASP.NET. Con ella podemos escribir aplicaciones AJAX abstrayndonos del cdigo JavaScript. En lugar de actualizar el cliente con HTML, los cambios en la pgina son devueltos al cliente con llamadas a funciones. Facilita la mayora de los controles ASP.NET sobrescritos para que usen implcitamente AJAX y, adems, otros controles avanzados, como el control Window.
42
Permite escribir cdigo de la misma forma que lo hacemos en ASP.NET pero sin los objetos ScriptManager o UpdatePanel. Es compatible con la versin 2.0 de .NET Framework y superiores y tambin con Mono. Y tambin ofrece el soporte de Visual Studio durante el diseo. Es compatible con la mayora de los navegadores. Es tan segura o ms que ASP.NET.
43
Descarga:
44
Eliminar los controles ScriptManager y UpdatePanel. Cambiar los controles ASP Button y Panel por sus respectivos controles GAIA. Opcionalmente se pueden cambiar el resto de los controles ASP a sus respectivos GAIA, si existen => menos trfico entre el cliente y el servidor.
Supone cambiar la etiqueta asp por gaia.
45
Cuando incluyamos controles ASP en un contenedor GAIA, tenemos que forzar la actualizacin del contenedor GAIA invocando a su mtodo ForceAnUpdate.
46
Demo
47
Conclusiones
48
GAIA, al igual que ASP.NET AJAX, no requiere ninguna codificacin JavaScript. GAIA, a diferencia de ASP.NET AJAX, es open source, aunque ambas bibliotecas se pueden descargar de forma gratuita. Toda la codificacin se realiza utilizando mtodos en el lado del servidor, por ejemplo en C#. Tanto GAIA AJAX como ASP.NET AJAX se pueden utilizar con Microsoft .NET y con Mono. GAIA consume menos ancho de banda que otras bibliotecas, como ASP.NET AJAX.
49
Aspectos positivos:
GAIA AJAX es una alternativa viable y prometedora para el desarrollador de ASP.NET AJAX. No utiliza controles extra (como ScripManager o UpdatePanel) en el lado del servidor. Proporciona controles avanzados:
Window, que permite crear ventanas Web dentro del navegador. TabControl, Accordion, DateTimePicker, etc.
Aspectos negativos:
50
Libros:
Fco. Javier Ceballos Sierra, Microsoft C#. Curso de programacin, Editorial Rama y Alfaomega GE ISBN:9788478977376, Oct. 2011. Fco. Javier Ceballos Sierra, Enciclopedia de Microsoft Visual C#, Editorial Rama y Alfaomega GE ISBN:9788478978106, Jul. 2010. Fco. Javier Ceballos Sierra, Aplicaciones .Net multiplataforma, Editorial Rama y Alfaomega GE ISBN:9788478978809, Jun. 2008. Disponibles en: http://www.ra-ma.com y http://alfaomega.internetworks.com.mx/portal/int ernacional.php?location=1
51
52
53