Fco.

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.

Plataforma Microsoft .NET Plataforma Mono AJAX Sistemas operativos:

Microsoft Windows, Linux, Mac OS X, BSD, Sun Solaris, PowerPC, SPARC (32), ARM, Alpha, s390, s390x, etc.

Incluye los siguientes componentes bsicos:

Clientes Aplicaciones

Protocolos: HTTP, HTML, XML, SOAP, etc.

Form Web

Servicio Web Utilidades: Visual Studio, Office, etc.

.NET Framework Windows

Servicios Web propios

Servicios Web .NET

Servicios Web de terceros

Infraestructura de servidores

.NET Framework es un componente de desarrollo multilenguaje y un entorno de ejecucin:

VB C# C++ JScript ... CLS: especificacin del lenguaje ASP.NET: Servicios Web y formularios Web Formularios Windows Visual

ADO.NET: Datos y XML Biblioteca de clases CLR: mquina virtual Windows Servicios COM+

Studio

Implementacin de Microsoft .NET Framework utilizando cdigo abierto (software libre).

El concepto de libertad en el software se refiere a: ejecutarlo, estudiarlo, redistribuirlo o mejorarlo. El proyecto Mono es un ejemplo de esta corriente.
Utilizando este entorno, actualmente podemos desarrollar aplicaciones .NET multiplataforma.

Se trata de un proyecto concebido y liderado por Miguel de Icaza.

S. O. Linux: http://software.opensuse.org/
MonoDevelop y opcionalmente Visual Studio. PostgreSql.

Mono: http://www.go-mono.com/mono-downloads/

Administrador para la BBDD PostgreSql: PgAdmin III. Proveedor de datos: Npgsql2.

Servidor de aplicaciones:
mod_mono de Apache.
ASP.NET AJAX Gaia AJAX. XSP.

AJAX:

S. O. Windows

.NET Framework SDK o Mono. Visual Studio o SharpDevelop. PostgreSql.

Administrador para la BBDD PostgreSql: PgAdmin III. Proveedor de datos: Npgsql2.

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

Sigue el patrn siguiente :

16

Sigue el patrn siguiente :

17

Con XMLHttpRequest. Con ASP.NET: Otras bibliotecas.

ASP.NET AJAX. GAIA AJAX.

18

Con esta modalidad todo el trabajo en el lado del cliente queda para el programador.

19

Es una clase disponible en todos los navegadores. Mtodos:

Un objeto de esta clase permite la transferencia de datos en formato XML entre el navegador y el servidor.

Propiedades:

open( mtodo, URL[, asncrono[, nombreUsuario[, clave]]] ) send( null/contenido ) abort() onreadystatechange, readyState, status, statusText, responseXML y responseText.

20

Presentacin

Lgica de negocio

Datos

Navegador (motor AJAX) inicio.html (HTML + JavaScript + XMLHttpRequest)

Pgina Web

obtenerDatos.aspx.cs

Base de datos

21

http://servidor/carpeta/inicio.html

22

Resultado: se actualiza slo la tabla.

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

La figura siguiente resume el mecanismo callback:

Navegador (IE, Firefox, etc.) elemento de inicio

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

ASP.NET 2.0 (VS/VWD 2005):

o

A partir de ASP.NET 3.5 (VS/VWD 2008):

o

Descargar (http://www.asp.net/ajax/) e instalar: ASP.NET 2.0 AJAX Extensions 1.0. ASP.NET AJAX ya est incluido.

Y Mono tambin incluye ASP.NET AJAX.

Con Mono, las aplicaciones requerirn una referencia explcita a la biblioteca: System.Web.Extensions.dll.

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

ScriptManager, UpdatePanel, UpdateProgress, Timer y ScriptManagerProxy

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

Navegador (motor AJAX) Default.aspx (XHTML+ ASP.NET AJAX)

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:

Para utilizar esta biblioteca incluir en el proyecto:

Gaia.WebWidgets.dll Gaia.WebWidgets.Extensions.dll

Versin comercial. Versin de cdigo abierto.

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:

Es segura. Muy fcil de utilizar.

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