Introduccion a AJAX, extensiones AJAX y Toolkit

Para comenzar a hablar de estos temas vamos a valernos de un mapa que tuve que confeccionar con contenidos introductorios al mundo de AJAX y ASP.NET

Con esta entrada vamos a comenzar a escribir acerca de AJAX, la implementación de Microsoft, es decir las extensiones de ASP.NET AJAX y por supuesto el AJAX Control Toolkit.

Anteriormente hemos visto como se realiza el download y la instalación de estos componentes; comenzaremos a realizar un poco de repaso por la teoría y también vamos a ver implementaciones de código de las extensiones de ASP.NET AJAX los controles del toolkit.

Para comenzar vamos a basarnos en este mapa y voy a ir agregando información acerca de cada uno de los nodos del mismo.

Como siempre todos sus comentarios son bienvenidos.

AJAX: Tecnologías que la componen

Asynchronous JavaScript and XML, o AJAX, es posible gracias a la combinación de tecnologías. Algunas de estas tecnologías son utilizadas del lado del cliente, pero algunas requieren componentes del lado del servidor para trabajar correctamente. Debido a esta característica de tratarse de una serie de tecnologías relacionadas, realizar debug en aplicaciones AJAX puede ser un proceso complicado. Veamos los principales componentes de AJAX:

- HTML: Hypertext Markup Language, o HTML es el standard aceptado para mostrar aplicaciones web tradicionales en un browser y esto no cambia al comenzar a utilizar AJAX. Es posible utilizar el nuevo HTML extensible o XHTML que posee mejoras en la sintaxis, pero en líneas generales podremos crear la interfaz de usuario de la misma forma en que lo veníamos haciendo con este lenguaje.

- CSS: Las hojas de estilo en cascadas o Cascading Style Sheets es el standard utilizado para agregar estilos y diseño a nuestras paginas HTML o XHTML. CSS es extremadamente util ya que permite separar el contenido de la pagina HTML de la forma en la que será visualizado pudiendo almacenarse en un archivo separado y ser aplicado en muchas o todas las paginas de una determinada aplicación.

- DOM: El Document Object Model, o DOM, es una forma de representar HTML o XHTML en una estructura jerárquica y también proveer acceso de forma programática a los elementos de nuestras aplicaciones, ya sea contenido, estilos o información misma de la estructura.- JavaScript: JavaScript es lenguaje mejor soportado y el mas utilizado para agregar funcionalidad del lado del cliente en aplicaciones web. Utilizando JavaScript podemos crear páginas web más dinámicas manipulando DOM desde el cliente respondiendo a eventos generados por el usuario. HTML, CSS, DOM y JavaScript se pueden combinar para crear aplicaciones DHTML (Dynamic HTML).

- XML: Extensible Markup Language, o XML, es el lenguaje de marcado que se ha convertido en el standard para representar datos en formato de texto e independientes de la plataforma. AJAX utiliza XML para comunicar datos desde el cliente al servidor. Además cuenta con la ventaja de que al tratarse de un standard, existen disponibles muchas herramientas como Stylus Studio o Altova XML SPy.

- JSON: JavaScript Object Notation es un formato para el intercambio de datos que es muy util para la representación de objetos en JavaScript permitiendo la serialización y deserialización de objetos.

-XMLHTTP: El protocolo XMLHTTP es una forma de intercambio de datos en formato XML entre el cliente y el servidor. Se puede acceder a este protocolo del lado del cliente a través del objeto XmlHttpRequest. AJAX combina el uso de este protocolo con la otras tecnologías listadas anteriormente para montar el framework que posibilita la llamada de postbacks de forma asincrónica.

ASP.NET AJAX Extensions: Introduccion

AJAX es un término genérico para definir una colección de tecnologías y procesos que podemos utilizar en nuestras aplicaciones web. ASP.NET AJAX es la implementación comenzada por Microsoft y que luego pasó a ser mantenida por una comunidad e incluye varios beneficios para los desarrolladores.

Muchos desarrolladores hemos encontrado un poco complicado crear aplicaciones con AJAX debido a la complejidad relacionada con JavaScript para implementar funcionalidad AJAX.

ASP.NET AJAX combina una extensa librería de código con una coleccion de componentes del lado del servidor que hacen la vida de los desarrolladores mucho mas simple y pueden ser utilizadas en nuestras aplicaciones AJAX-enabled. Algunos de los beneficios principales de la utilización de esta tecnología harán que nuestras aplicaciones web sean:

- Más dinámicas.
- Con mejores tiempos de respuesta.
- Más fáciles de utilizar.
- Más interesantes desde el punto de vista de usuario.
- Compatibles con la gran mayoria de los browsers.

Funcionalidad del lado del Cliente:
Del lado del cliente, ASP.NET AJAX provee un conjunto de archivos con código JavaScript conocidos como AJAX Library lista para ser agregada a nuestras aplicaciones web. Estos archivos. Estos archivos usan extensiones del lenguaje JavaScript para hacer posible que el código sea parecido a C#, incluyendo el uso de estructuras de Programación Orientada a Objetos (POO) . Esto nos permite a los desarrolles agregar codigo JavaScript a nuestras aplicaciones web de una forma mucho mas fácil. Además, esta librería trabaja con todos los browsers actuales liberando al desarrollador de la tediosa tarea de escribir código específico para cada browser.

Funcionalidad del lado del Servidor:
Para los desarrolladores ASP.NET 2.0 está disponible una serie de controles de servidor conocido como AJAX extensions, estos controles del lado del servidor permiten escribir muy pocas o ninguna linea de código JavaScript. Todos los controles de servidor generan el código JavaScript necesario. Algunos de estos controles conocidos como extenders afectan la funcionalidad o comportamiento de otros controles en vez de proveer su propia interfaz de usuario. De esta forma, podemos utilizar por ejemplo un text box extender para agregar la funcionalidad a un text box de nuestra aplicación para por ejemplo agregar la funcionalidad de autocompletar.

Framework Extensible:
ASP.NET AJAX nos permite extender o ampliar la funcionalidad existente, tanto de código del lado del cliento como de codigo del lado del servidor. Hay disponibles clases bases y archivos JavaScript de los cuales se pueden heredar y agregar funcionalidad. También se puede descargar el AJAX Control Toolkit con el cual tendremos disponibles muchos componentes listos para utilizar (extenders).
El AJAX Control Toolkit incluye una plantilla para simplificar la creación de componentes del lado del cliente.

Hasta aqui una breve introduccion. En proximas entradas ire profundizando en conceptos relaciondos.

ASP.NET AJAX Toolkit: Download e Instalación

Una de las características principales de un desarrollo WEB 2.0 radica en la utilización de la tecnología AJAX. Microsoft nos provee de las herramientas necesarias para el desarrollo de aplicaciones con esta tecnología. Estas herramientas son las siguientes: las ASP.NET 2.0 AJAX Extensions 1.0 y el ASP.NET AJAX Control Toolkit. Vamos a ver en este primer contacto como conseguir estas herramientas, instalarlas en nuestro sistema y configurarlas en nuestro entorno de desarrollo.

- Download e Instalación
Para realizar el download de estas herramientas, apuntamos nuestro navegador favorito a la siguiente dirección: http://www.asp.net/ajax/downloads/;
aqui tenemos dos links para realizar el download de estas herramientas.

En el paso 1 vamos a hacer click en el link que muestra la figura para realizar el download de las ASP.NET Extensions v1.0. Este link nos direcciona una página del sitio web de Microsoft.

Una vez hecho el download procedemos a la instalación. El proceso de instalación es bastante estandar y no merece comentarios adicionales. La ruta donde se instalarán las extensiones es: C:\Archivos de programa\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025

Luego repetimos el proceso para el paso 2 hacieno click en el botón Download the Control Toolkit. En este caso, accederemos a una página en el sitio de CodePlex. Aqui podremos descargar tanto el Toolkit incluyendo el código fuente. En nuestro primer contacto, solo necesitamos el Toolkit sin incluir el código, el cual es evidentemente un download de menor tamaño. Hacemos click en AjaxControlToolkit-NoSource.zip y lo descomprimimos en algún lugar de nuestro disco. En lo personal prefiero mantener cierto orden para esta instalación para lo cual descomprimo este archivo en la siguiente ruta: C:\Archivos de programa\Microsoft ASP.NET\ASP.NET AJAX Control Toolkit\.



- Configuración del entorno
Una vez realizados los pasos anteriores (Downloads de los dos archivos e instalación de las ASP.NET Extensions -este es un paso requerido por el Toolkit-). Abrimos Visual Studio y creamos un nuevo sitio web eligiendo "AJAX Control Toolkit Web Site" an la sección My Templates.

Aquí vamos a agregar un tab en nuestro Toolbox para poder utilizar los controles provistos por el Toolkit. Para ello hacemos click derecho debajo del tab General y elegimos "Add Tab"; le ponemos un nombre como AJAX Toolkit; dentro de este nuevo tab hacemos click derecho y seleccionamos la opción "Choose Items...", un cuadro de diáologo aparece y hacemos click en "Browse..." y buscamos la carpeta bin del sitio de ejemplo en el path de la instalación de las AJAX Toolkit. Par nuestro caso la ruta completa es C:\Archivos de programa\Microsoft ASP.NET\ASP.NET AJAX Control Toolkit\SampleWebSite\Bin; alli seleccionamos el archivo AjaxControlToolkit.dll y listo. Ahora tenemos disponibles los controles para agregar en nuestras aplicaciones ASP.NET!