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 estándar paralelo usando bibliotecas open source: Gaia AJAX.

2

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.

3

Incluye los siguientes componentes básicos:
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

4

.NET Framework es un componente de desarrollo multilenguaje y un entorno de ejecución:
VB C# C++ JScript ... CLS: especificación del lenguaje ASP.NET: Servicios Web y formularios Web Formularios Windows Visual

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

Studio

5

Implementación de Microsoft .NET Framework utilizando código 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.

6

7

8

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:

9

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, acrónimo de Asynchronous JavaScript And XML (JavaScript y XML asíncronos), es una técnica de desarrollo para crear aplicaciones Web interactivas.

11

AJAX no constituye una tecnología en sí, sino que es un término que engloba a un grupo de tecnologías 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 síncrono:

Modelo asíncrono:

◦ Crear sitios Web interactivos utilizando DHTML (XHTML, JavaScript, CSS y DOM). ◦ Crear sitios Web interactivos utilizando AJAX.

14

15

Sigue el patrón siguiente :

16

Sigue el patrón 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. Métodos:
◦ Un objeto de esta clase permite la transferencia de datos en formato XML entre el navegador y el servidor.

Propiedades:

◦ open( método, URL[, asíncrono[, nombreUsuario[, clave]]] ) ◦ send( null/contenido ) ◦ abort() ◦ onreadystatechange, readyState, status, statusText, responseXML y responseText.

20

Presentación

Lógica de negocio

Datos

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

Página Web

obtenerDatos.aspx.cs

Base de datos

21

http://servidor/carpeta/inicio.html

22

Resultado: se actualiza sólo la tabla.

23

En el cliente:

◦ El usuario solicita la página http://servidor/carpeta/inicio.html y selecciona una opción de la lista. ◦ Se crea un objeto XMLHttpRequest. ◦ Se fija la función que será invocada automáticamente cuando el servidor complete la petición. ◦ Utilizando el objeto XMLHttpRequest, se envía (send) una petición asíncrona al servidor:
http://servidor/carpeta/obtenerDatos.aspx?opcion=X
donde X = APTO/NO APTO

En el servidor: En el cliente:

◦ El servidor procesa la petición y genera un documento XML con el resultado que envía al cliente. ◦ Los datos retornados se procesan para actualizar sólo la tabla.

24

Demo

25

Con ASP.NET 2.0 se suceden dos técnicas de llamadas asíncronas al servidor: La comunidad y otros fabricantes desarrollan bibliotecas para ASP.NET 2.0:
◦ GAIA AJAX. ◦ Script callbacks. ◦ ASP.NET AJAX.

26

la técnica de script callbacks persigue los mismos objetivos que el principio de AJAX visto anteriormente, pero abstrayéndonos 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 distribución para crear aplicaciones basadas en AJAX que puedan ejecutarse desde todos los navegadores más populares. Libera al desarrollador del conocimiento de diversas tecnologías: XHTML, DOM, JavaScript, etc. Esto quiere decir que puede eximirlo de escribir el código JavaScript en el lado del cliente, necesario para incorporar AJAX en una aplicación 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 también incluye ASP.NET AJAX.
◦ Con Mono, las aplicaciones requerirán una referencia explícita a la biblioteca: System.Web.Extensions.dll.

31

Aplicación 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 automáticamente 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 página 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 página. 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 asíncrona en curso. Con un sólo control UpdateProgress se puede controlar la actividad de todos los contenedores UpdatePanel de una página:
<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 período de tiempo Interval, que podemos utilizar para realizar las actualizaciones programadas a través 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

Presentación

Lógica de negocio

Datos

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

Página Web

Default.aspx.cs

Base de datos

38

39

Crear la base de datos. Crear un sitio Web. Diseñar la interfaz gráfica. Añadir 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 serán actualizadas asíncronamente 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 abstrayéndonos del código JavaScript. En lugar de actualizar el cliente con HTML, los cambios en la página son devueltos al cliente con llamadas a funciones. Facilita la mayoría de los controles ASP.NET sobrescritos para que usen implícitamente AJAX y, además, otros controles avanzados, como el control Window.

42

Permite escribir código de la misma forma que lo hacemos en ASP.NET pero sin los objetos ScriptManager o UpdatePanel. Es compatible con la versión 2.0 de .NET Framework y superiores y también con Mono. Y también ofrece el soporte de Visual Studio durante el diseño. Es compatible con la mayoría de los navegadores. Es tan segura o más que ASP.NET.

43

Descarga:

Para utilizar esta biblioteca incluir en el proyecto:
◦ Gaia.WebWidgets.dll ◦ Gaia.WebWidgets.Extensions.dll

◦ Versión comercial. ◦ Versión de código 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 tráfico 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 actualización del contenedor GAIA invocando a su método ForceAnUpdate.

46

Demo

47

Conclusiones

48

GAIA, al igual que ASP.NET AJAX, no requiere ninguna codificación JavaScript. GAIA, a diferencia de ASP.NET AJAX, es open source, aunque ambas bibliotecas se pueden descargar de forma gratuita. Toda la codificación se realiza utilizando métodos 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 fácil de utilizar.

50

Libros:

◦ Fco. Javier Ceballos Sierra, “Microsoft C#. Curso de programación”, 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