Resumen Mod 08

Módulo 8 AJAX y ASP.NET

8.1. Introducción 8.1.1. ASP.NET ASP.NET es un modelo de desarrollo Web unificado que incluye los servicios necesarios para crear aplicaciones Web empresariales con el mínimo de código. ASP.NET forma parte de .NET Framework y al codificar las aplicaciones ASP.NET tiene acceso a las clases en .NET Framework. El código de las aplicaciones puede escribirse en cualquier lenguaje compatible con el Common Language Runtime (CLR), entre ellos Microsoft Visual Basic, C#, JScript .NET y J#. Estos lenguajes permiten desarrollar aplicaciones ASP.NET que se benefician del Common Language Runtime, seguridad de tipos, herencia, etc. ASP.NET incluye: – Marco de trabajo de página y controles – Compilador de ASP.NET – Infraestructura de seguridad – Funciones de administración de estado – Configuración de la aplicación – Supervisión de estado y características de rendimiento – Capacidad de depuración – Marco de trabajo de servicios Web XML – Entorno de host extensible y administración del ciclo de vida de las aplicaciones – Entorno de diseñador extensible Las principales características del ASP.NET son: Modelo de programación controlada por eventos Intuitivo, modelo de objeto coherente Administración del estado automática Aplicaciones independientes del navegador Compatibilidad de Common Language Runtime de .NET Framework Rendimiento del servidor escalable de .NET Framework

8.1.2. Modelos El modelo tradicional El modelo clásico de las aplicaciones Web trabaja de la siguiente manera: por medio de la interfase de usuario que tiene la página Web (el navegador), se realiza una petición al servidor haciendo uso del protocolo estándar HTTP para la comunicación, en este momento la página completa viaja al servidor debido a que HTTP es sin estado (stateless). Esto significa que el servidor no guarda el estado de la información que teníamos en la página previamente, es decir, los datos que teníamos en la página antes de realizar la petición al servidor se pierden. Por lo

tanto, si no queremos perder datos de nuestra página Web necesitamos enviarlos al servidor para que puedan ser restaurados cuando se vuelva a generar la página, ASP.NET lo hace mediante el campo oculto del ViewState. Una vez que la petición llega a servidor (postback), esta es atendida realizando diversos procesos como pueden ser obtener información de la base de datos, procesar dicha información pudiéndose valer de algunas operaciones auxiliares e incluso comunicarnos con otras aplicaciones para llevar a cabo esta tarea. Por último el servidor devuelve al cliente una página HTML. Durante el proceso de actualización de la página, el usuario pierde todo tipo de interacción posible con dicha página hasta que esta es mostrada nuevamente en el navegador como una nueva página.

El modelo Ajax En el modelo AJAX, los procesos creados con Ajax se ejecutan en el cliente, es decir, en el navegador del usuario, y mantiene comunicación asíncrona con el servidor en un segundo plano. De esta forma es posible realizar cambios sobre la misma página sin necesidad de recargarla por completo, con lo que nos evitamos de considerables pausas y conservamos el estado de nuestra información, lo que se traduce en el aumento de la interactividad, velocidad y usabilidad de la misma. Una vez que la página es procesada completamente por primera vez, todas las llamadas a servidor pueden ser administradas por AJAX, de tal suerte que al estar enviando y recibiendo del servidor la menor cantidad de información posible, esto quiere decir, que al realizar peticiones al servidor Web y ejecutar las actualizaciones parciales de la página mediante JavaScript y el XML que es recibido, se mejora la interacción al mejorar los tiempos de respuesta y además minimizamos el uso de recursos tales como el ancho de banda ya que no estamos enviando la página completa si no solamente una porción de ella. Dado que estos procesos de actualización se ejecutan de modo asíncrono en un segundo plano los usuarios pueden seguir trabajando con la página y no darse cuenta de que se esta llevando a cabo un proceso de actualización.

Otros modelos: Existen otros modelos para la creación de entornos enriquecidos (RIA), como son los: ™ APPLETS de Java ™ Controles ActiveX ™ Controles Windows .NET ™ Plug-in de Navegador (por ejemplo: Flash)

8.1.3. Pros y Contras Ventajas: ™ Mejora y amplia los modelos de interacción con el usuario ™ Permite construir sitios Web rápidos, ricos y dinámicos.

™ Ahorra recursos del servidor ampliando su escalabilidad. Inconvenientes: ™ El desarrollo de aplicaciones con AJAX requiere del conocimiento de los objetos del documento (DOMs), los cuales difieren entre los distintos navegadores provocando problemas de compatibilidad. Dichos problemas conllevan un incremento en el coste en el desarrollo y requieren un conocimiento mas exhaustivo de las diferencias entre navegadores para solucionar las incompatibilidades. ™ El lenguaje JavaScript no ofrece todas las características de la programación orientada a objetos, ni del código administrado que el .NET Framework ofrece. ™ Crear aplicaciones Web, con programación del lado del cliente, requiere de la especialización con un nuevo lenguaje y una nueva plataforma de desarrollo. ™ El desarrollo de código del lado del cliente no esta soportado de manera eficiente por los IDEs.

8.1.4. ASP.NET Ajax Debido a las limitaciones que ya hemos visto para el desarrollo de aplicaciones Web con AJAX, surge una nueva tecnología para ASP.NET llamada Atlas, que integra librerías de script para cliente con el framework de desarrollo de ASP.NET 2.0. Está integrado con el framework de ASP.NET 2.0. y además de facilitar el uso de técnicas AJAX, permite a los desarrolladores la creación de páginas Web con un interfaz de usuario enriquecido e interactivo con comunicación con el servidor. Objetivos de Atlas: ™ Crear una plataforma altamente productiva para el desarrollo de aplicaciones tipo AJAX, para ello cuenta con una suite enriquecida de componentes, controles y comportamientos para la mayoría de escenarios, haciendo fácil el acceso a servicios y datos desde la Web. ™ Total integración con la plataforma Microsoft, hablando puntualmente de ASP.NET, y el modelo de aplicación IIS, logrando que el acceso a servicios y componentes contenidos dentro de ASP.NET sea muy sencillo. ™ Uso de herramientas creadas para el desarrollo de aplicaciones Web tipo Ajax (conjunto de herramientas para el desarrollo de script). ™ Compatibilidad con la mayoría de navegadores (Microsoft Internet Explorer, Firefox, Netscape Navigator y más). En Enero de 2007 se produjo el lanzamiento de la versión definitiva del Atlas, renombrándose a ASP.NET AJAX 1.0 para la versión 2.0 del .NET Framework (como su aparición es posterior a la del Framework 2.0, es necesario instalarla de forma independiente. A partir de la versión 3.5 del .NET Framework viene integrado. Bajo el nombre “ASP.NET AJAX Framework”, están englobados tres subproductos diferenciados:

™ “Microsoft AJAX Library”: librería JavaScript en cliente. Es estándar y capaz de funcionar en los principales navegadores, independiente del ASP.NET, soportando también cualquier tipo de servidor Web y sistema de programación utilizado en la parte del servidor (existen tutoriales para interactuar con ella a través de PHP o ColdFusion). ™ “ASP.NET AJAX Extensions”: extensiones añadidas al Framework .NET. Se integran perfectamente con el entorno de programación de la plataforma (Visual Studio .NET) y utilizan “Microsoft AJAX Library” en la parte cliente. ™ “ASP.NET AJAX Control Toolkit”: una serie de controles y componentes extras gratuitos, con su código fuente pero sin soporte, que ayudan a aprovechar al máximo las capacidades de las extensiones mencionadas Las principales características del ASP.NET Ajax son: ™ Incremento de la productividad ™ Fácil de hacer, depurar y mantener ™ Modelo Integrado ™ Multiplataforma

8.2. Componentes ASP .NET AJAX 8.2.1. Componentes

Microsoft AJAX Library

ASP.NET AJAX Extensions

UI effects and behaviors

Web Services Integration

Component and UI model

Web Services Bridge

Networking Base class library

Membership, Roles & Personalization Support ASP.NET Server Controls

Core runtime

ASP.NET AJAX Control Toolkit

8.2.2. Modelo basado en el cliente ™ La capa de presentación es manejada por el scripting del cliente usando DHTML y javascript. ™ Hay comunicaciones con el servidor para traer datos relevantes. Para el desarrollo en cliente, Microsoft AJAX Library contiene un conjunto de librerías con código cliente, es decir, archivos con extensión “.js”, que definen una serie de capas que nos permite el acercamiento al desarrollo de aplicaciones basadas en cliente. Las capas son: ™ Una capa de componentes para el interfaz de usuario. ™ Una capa para la compatibilidad de navegadores. ™ Una capa de red para comunicarse con servicios Web, aplicaciones y administrar de forma asíncrona llamadas a métodos remotos, dando soporte a serialización tanto XML como JSON. ™ Una capa de servicios básicos que agrega extensiones a JavaScript para permitir (mediante simulación): herencia, interfaces, espacios de nombres, manejo de eventos, enumeraciones y serialización de objetos.

8.2.3. Modelo centrado en el Servidor ™ La lógica de la aplicación y demás interfaz de usuario esta y se genera en el servidor. ™ Sólo la porción de interfaces de usuario que esta siendo actualizada es enviada al servidor, no toda la página. ASP.NET AJAX Extensions es un paquete de controles y servicios que extienden el Page Framework (WebForms) de ASP.NET con soporte para AJAX. Las extensiones AJAX utilizan la “Microsoft AJAX Library” para dar soporte en el lado cliente. Con el desarrollo Web con Ajax centrado en el servidor se logra enriquecer aplicaciones sin escribir código JavaScript permitiendo mantener toda la lógica interfaz de la aplicación en el servidor La capa de soporte Script permite la localización (proceso de traducción de los recursos) y la globalización (uso de las referencias culturales locales como son las formatos). Así mismo, permite la traza y depuración del código JavaScript en ejecución. ASP.NET AJAX incluye componentes de la red que facilitan la devolución de los resultados de cualquier invocación a servicio Web, facilitando la serialización tanto XML como JSON. ASP.NET AJAX proporciona servicios Web que puede utilizar el cliente de secuencia de comandos para trabajar con los servicios de aplicación ASP.NET para la autenticación de formularios y los perfiles de usuario. Esto permite utilizar secuencia de comandos de cliente que ayudan a proteger los recursos mediante el uso de modos de autenticación y de guardar configuraciones específicas de usuario en el servidor.

Los controles de servidor ASP.NET AJAX cuentan con código de servidor y de cliente que proveen, de forma automática, del comportamiento AJAX a la mayoría de los controles de servidor ASP.NET, por lo que se siguen usando los controles anteriores pero, a nivel interno, se sustituyen los postback por llamadas asíncronas y refrescos parciales de las páginas. Permiten la migración casi inmediata de las aplicaciones ASP.NET a AJAX, aunque no siempre de manera optima.

8.2.4. Asynchronous Communication Layer La capa de comunicación asíncrona (Asynchronous Communication Layer) permite a un navegador invocar métodos de los Servicio Web en servidor utilizando ECMAScript (Javascript). El API expone las funciones de JavaScript que se pueden utilizar en cualquier navegador. Estas APIs proporcionan la funcionalidad asíncrona mediante el uso del objeto XMLHTTP. La capa de comunicación asíncrona (ACL) ofrece las siguientes características: ™ Permite al código JavaScript realizar llamadas asíncronas al servidor. ™ Puede invocar métodos de servicios Web que estén implementados en archivos .asmx. ™ Puede invocar métodos estáticos de páginas ASP.NET como si fueran de un Servicio Web. ™ Puede configurarse para activar y desactivar la capacidad de llamar a los Servicios Web para las aplicaciones ASP.NET AJAX. ™ Soporta una gran variedad de formatos de serialización para pasar los datos entre el navegador y el servidor, incluyendo JavaScript Object Notation (JSON), cadenas y datos XML. ™ Simplifican la utilización del servicio Web desde el cliente mediante la generación de clases proxies en JavaScript que exponen la funcionalidad del servicio como si fueran un objeto local. ™ Ofrece extensibilidad para ejecutores de cliente que son utilizados por objetos proxy. Un ejecutor es un componente que funciona como una interfaz entre un cliente Web y la solicitud de red o de otros medios de comunicación. Se puede escribir un ejecutor propio que se conecte a la capa de comunicación asíncrona. ™ Puede ser utilizado con el nivel de confianza Media del ASP.NET Esta capa provee de una clara separación entre la capa de presentación, en el cliente (navegador), y las capas de negocios y de datos, en el servidor. El cliente controla la capa de presentación y ofrece una UI rica y dinámica, mientras que el servidor realiza las tareas propias de las capas de negocios y de datos. En cliente, la ACL genera de forma automática clases proxy en JavaScript simplificando el hacer peticiones al servidor, desde las secuencia de comandos de cliente, a los servicios Web, los métodos de pagina y los servicios de perfil y autenticación.

En servidor, la ACL habilita de forma automática mecanismos para que los métodos de la página ASP.NET (también para las páginas maestras y los controles de usuario .ascx) respondan como si fueran métodos de un servicio Web. Así mismo, cuenta con componentes para dar servicio a las peticiones de autenticación y perfiles.

8.2.5. ASP.NET AJAX Control Toolkit El ASP.NET AJAX Control Toolkit es un juego de componentes y controles para usar con ASP.NET AJAX, sirven para tareas y escenarios de uso común. Requiere ASP.NET AJAX versión 1.0. En la mayoría de casos no hay necesidad de escribir código adicional en JavaScript. Se ha liberado su código fuente (software libre). El soporte lo da la comunidad y Microsoft, aunque Microsoft no se compromete ha mantenerlo.

8.3. Controles 8.3.1. Servidor Controles de servidor ASP.NET AJAX Extensions más utilizados: ™ ScriptManager ™ ScriptManagerProxy ™ UpdatePanel ™ UpdateProgress ™ Timer Las extensiones ASP.NET AJAX cuentan con más de 60 componentes, entre clases, interfaces y enumeraciones, para dar soporte al AJAX y permitir su personalización. Están repartidas en los siguientes espacios de nombres: ™ System.Web.Configuration ™ System.Web.Handlers ™ System.Web.Script.Serialization ™ System.Web.Script.Services ™ System.Web.UI ™ System.Web.UI.Design

ScriptManager Administra la actualización parcial de la página. Administra el scripting del cliente para las páginas de ASP.NET AJAX. Se encarga de registrar el script para Microsoft AJAX Library en la página.

Habilita al scripting del cliente para las extensiones del sistema de tipos y para soportar características como las actualizaciones parciales, las llamadas a Web Services y el acceso a los servicios de autenticación y perfiles. Permite enviar JavaScript personalizado al navegador del cliente. Es necesario disponer de un control ScriptManager en la página para poder utilizar el resto de los controles AJAX de servidor.

ScriptManagerProxy El control ScriptManagerProxy permite que componentes anidados puedan añadir Scripts y referencias a Servicios Web cuando ya existe un ScriptManager en el control padre.

UpdatePanel Especifica qué partes de la página pueden participar en la actualización parcial. Está preparado para los siguientes escenarios: ™ Complejos comportamientos de Cliente para mejorar la experiencia de usuario. ™ Actualización parcial de página sin profundos conocimientos de ECMAScript (JavaScript) ™ Comportamiento independiente del tipo de navegador cliente ™ Menor cantidad de información transferida entre navegador Cliente y Servidor. El UpdatePanel es un panel que contendrá otros controles Web del ASP.NET. Automáticamente transformara el comportamiento estándar de postback síncrono de dichos controles en un comportamiento de postback asíncrono. Por lo que se puede transformar rápidamente una aplicación tradicional de ASP.NET a modo AJAX incorporando UpdatePanels donde corresponda. La actualización está basada en eventos, por defecto cualquier control dentro de un UpdatePanel causa un postback asíncrono y actualiza el contenido del UpdatePanel. También se puede configurar que otros controles en la página refresquen el contenido del UpdatePanel ™ Se deben definir Triggers para el control UpdatePanel. ™ Un trigger es definido usando: AsyncPostBackTrigger. ™ Si no especificas el evento del Trigger se usa el evento por defecto del control. El control UpdatePanel tiene dos modos de actualización: ™ Siempre [UpdateMode = Always] ™ Condicional [UpdateMode = Conditional] Los controles UpdatePanels pueden estar anidados. Si el padre es refrescado, todos los controles dentro de él son refrescados.

No todos los controles Web del ASP.NET aceptan su tratamiento en modo asíncrono, por lo que no podrán estar contenidos dentro de un UpdatePanel.

UpdateProgress Provee información del estado actual de la actualización de un control UpdatePanel. Provee de una reacción visual en el navegador ante las actualizaciones parciales que sean lentas, ayudando a que la interfaz del Cliente sea más intuitiva. Cada UpdateProgress puede atender a un UpdatePanel (en caso de tener varios en la página) o a todos los de la página. Se puede personalizar el contenido y presentación de la información mostrada en el UpdateProgress . Es un panel que puede contener a otros controles Web del ASP.NET, pero solo serán visibles y accesibles mientras se espera a que termine la actualización del UpdatePanel.

Timer Realiza postback automáticos a determinados intervalos (expresados en milisegundos). La combinación de controles Timer y UpdatePanel permite las actualizaciones parciales de diferentes partes de la página a diferentes intervalos regulares. Puede ser utilizado dentro de un UpdatePanel para actualizar parcialmente solo dicho panel. A nivel de página, si no está vinculado a ningún UpdatePanel, realiza postback de toda página a intervalos regulares.

8.3.2. Cliente Global Namespace Contiene los tipos base que extienden los objetos de ECMAScript (Javascript) para proporcionar los miembros con los que se está familiarizado en .NET. Cuenta con la clase Type que extiende el modelo de objetos de ECMAScript (Javascript) para que las clases soporten herencia, interfaces, espacios de nombres, manejo de eventos y enumeraciones. Así mismo, incluye una serie de atajos (funciones de acceso directo) para operaciones de uso común.

Sys Representa el espacio de nombres raíz de la Microsoft AJAX Library, que incluye todas las clases fundamentales y clases base de las que heredan el resto de las clase.

Sys.Net Contiene los tipos relacionados con la comunicación ASP.NET AJAX entre las aplicaciones cliente y los servicios Web en el servidor.

Sys.Serialization Contiene los tipos de datos relacionados con la serialización para las aplicaciones cliente de ASP.NET AJAX.

Sys.Services Contiene los tipos que proporcionan acceso desde las secuencias de comandos de cliente ASP.NET AJAX a los servicios de autenticación, perfiles de personalización y otros servicios de aplicación del ASP.NET.

Sys.UI Contiene los tipos relacionados con la interfaz de usuario (UI), tales como los controles, eventos y propiedades de la Microsoft AJAX Library.

Sys.WebForms Contiene los tipos relacionados con presentación parcial de páginas del modelo de formularios del ASP.NET.

8.4. Software Libre relacionado 8.4.1 Introducción El ASP.NET AJAX Control Toolkit nace como un proyecto conjunto entre la comunidad de programadores y Microsoft. Está desarrollado en base a ASP.NET AJAX y contiene una serie de controles Web y extendedores con los que podremos utilizar las avanzadas características de ASP.NET AJAX sin más que arrastrar el ratón. Del mismo modo, con su descarga disponemos de ejemplos de uso, así como del propio código fuente de los controles. Y lo mejor de todo, es Software Libre, es totalmente gratuito. Vamos a distinguir entre controles Web y extendedores, donde los primeros tienen una entidad por sí mismos, mientras que los segundos únicamente añaden comportamiento a un control Web existente. Incorporan una serie de pequeñas funcionalidades que cualquier desarrollador Web, en su historia de programador, ha utilizado o deseado para sus Webs. La diferencia ahora es que son 100% AJAX y usarlos no exige conocimiento alguno sobre AJAX, JavaScript o XML. Estos controles van desde un simple botón con una alerta asociada, hasta un complejo panel que podemos arrastrar por la pantalla; en ambos casos, mandando y recogiendo información entre el cliente y el servidor sin ningún tipo de recarga de página. Su uso hará que la Web sea mucho más atractiva y cómoda al usuario a la par que potente y efectiva. Dispones de ejemplos ejecutables para probar y clarificar conceptos en: http://www.asp.net/AJAX/AjaxControlToolkit/Samples

8.4.2 Controles Accordion El Accordion es un control Web que le permite ofrecer múltiples paneles, mostrando completo solo uno a la vez, reduciendo la visualización del resto a su cabecera. Es como tener varios CollapsiblePanels de los que sólo uno puede estar ampliado a la vez. Pulsando en la cabecera de uno de los paneles se contrae el panel visible y se despliega el panel correspondiente a la cabecera pulsada (efecto acordeón). El estado del Accordion se guarda, de modo que el AccordionPane activo se mantendrá visible a través de los postbacks.

AlwaysVisibleControl El control AlwaysVisibleControl es un extensor que permite anclar la posición de otro de modo que parecen flotar sobre el contenido de la página, manteniéndose en el mismo sitio cuando se mueve (scroll) o cambiar de tamaño. Se puede utilizar con cualquier control Web ASP.NET y mantiene siempre la misma distancia concreta de los lados horizontal y vertical.

Animation El control Animation es un extensor que permite aplicar animaciones sobre el control asociado, es más que un simple control, es marco de trabajo extensible (Animation Framework) para añadir fácilmente efectos de animación a las

Introducción a AJAX

páginas Web. El Animation Framework es una arquitectura de animaciones creadas para ASP.NET AJAX que proporciona una gran cantidad de recursos para utilizar, tanto en modo secuencial como en modo paralelo o cualquiera de sus combinaciones, con las animaciones mas usuales como son el movimiento, cambio de tamaño y color, desvanecimiento, etc. Las animaciones a ejecutar se expresan declarativamente mediante XML. Las animaciones se activan cuando se produce un evento, como OnLoad, OnClick, OnMouseOver u OnMouseOut, en el control asociado.

AutoComplete El control AutoComplete (autocompletado) es un extensor que se pueden asociar a cualquier control TextBox y que mostrara una lista emergente con las palabras que comienzan con el prefijo escrito en el texto, permitiendo seleccionar el texto completo. La lista se desplegará automáticamente cuando se haya escrito el número mínimo de letras indicado, evitando de esta forma listas muy grandes que son costosas y poco útiles. El contenido de la lista de texto propuesto es suministrado mediante un servicio Web XML. El almacenamiento en caché está activado, de modo que si se escribe el mismo prefijo varias veces se realiza solo una única llamada al servicio Web.

Calendar El control Calendar (calendario) es un extensor que se pueden asociar a cualquier control TextBox y que ofrece, del lado del cliente, la posibilidad de seleccionar la fecha, con formato personalizable, desde un calendario desplegable. Se puede interactuar con el calendario moviendo hacia adelante o hacia atrás un mes o un año, haciendo clic en un día para fijar la fecha o el "hoy" para establecer la fecha actual. Al hacer clic en el título del calendario que puede cambiar la vista de días en el mes en curso a los meses en el año en curso. El control permite la localización automática para que el formato de la fecha se adecue a la referencia cultural del navegador cliente. El control se puede configurar para que se muestre automáticamente el calendario cuando se entre en el TextBox o que asocie un botón adyacente que muestre calendario cuado sea pulsado.

CascadingDropDown El control CascadingDropDown es un extensor que se pueden asociar a cualquier control DropDownList de ASP.NET y que permite enlazar varias listas desplegables permitiendo que el contenido de una lista dependa de la selección de otra lista y lo hace sin tener que integrar todo el conjunto de datos en la página o transferirlos al cliente. El cambio del elemento seleccionado desencadena automáticamente, en cascada, el cambio de los elementos propuestos en la siguiente lista asociada. Los nuevos elementos propuestos los obtiene mediante un servicio Web. Toda la lógica sobre el contenido de una serie de controles DropDownList reside en el servidor del servicio Web que puede utilizar cualquier método adecuado para almacenar y buscar los datos pertinentes. El servicio Web puede ser reutilizado desde diferentes páginas.

CollapsiblePanel El CollapsiblePanel es un extensor muy flexible asociado a controles Panel que permite añadir fácilmente secciones desplegables a la página Web. Se puede 13

Introducción a AJAX

especifica el control o controles encargados provocar que el panel se abra o se cierre, o se puede ajustar para que se amplíe y colapse automáticamente a cuando el cursor del ratón se mueve dentro o fuera de él. El panel se puede desplegar a un tamaño fijo o ocupar todo lo necesario. El estado del CollapsiblePanel se guarda, de modo que siga contraído o desplegado a través de los postbacks.

ConfirmButton El ConfirmButton es un extensor al control Button (o cualquier tipo derivado de Button) que intercepta el clic del botón y muestra un mensaje de confirmación al usuario con los botones "Aceptar" y “Cancelar”. Si se pulsa el botón "Aceptar" el botón o vínculo funciona normalmente. Si no es así, se anula el clic el botón, como si no se hubiera pulsado. Opcionalmente, se puede asociar un script de cliente que se ejecuta si se cancela.

DragPanel El DragPanel es un extensor asociado a controles Panel que permite a los usuarios mover (arrastrar) los paneles por página. Una vez inicializados, el usuario puede pinchar y arrastrar libremente el panel alrededor de la página Web utilizando el ratón. Opcionalmente, se puede delimitar la zona donde pinchar para arrastrar asociándola a un control.

DropDown El DropDown es un extensor que se pueden asociar a casi cualquier control ASP.NET para proporcionar una lista desplegable al estilo de SharePoint. La lista mostrada no es más que otro panel o control.

DropShadow El DropShadow es un extensor asociado a controles Panel que permite definir dos características adicionales a los paneles: que el panel tenga sombra con su correspondiente opacidad y si se desea que el panel tenga esquinas redondeadas. Para las páginas que permiten a los usuarios mover o cambiar el tamaño sus paneles, el DropShadow tiene un modo que lo resuelve en tiempo de ejecución.

DynamicPopulate El DynamicPopulate es un extensor simple que sustituye el contenido de un control con el resultado de la llamada a un servicio Web o método página. El método llamado devuelve una cadena de HTML, que sustituye al elemento asociado.

FilteredTextBox El control FilteredTextBox es un extensor del control TextBox y que filtra la entrada de usuario, impidiendo que el teclee caracteres no validos para el cuadro de texto. Los caracteres aceptados se definen con uno o varios de los siguientes tipos: Numbers (todos los dígitos), LowercaseLetters (letras minúsculas), UppercaseLetters (letras mayúsculas) y Custom (se listan los caracteres considerados válidos y/o inválidos). Hay que tener en cuenta que el filtrado es una asistencia al usuario y no se debe considerar los datos como

14

Introducción a AJAX

validados dado que dicho filtrado no se realiza si se encuentra desactivando JavaScript.

HoverMenu El DropDown es un extensor que se pueden asociar a cualquier control ASP.NET para proporcionar un panel emergente para mostrar contenido adicional. Cuando el usuario mueve el cursor del ratón sobre el control asociado muestra el panel emergente en la posición indicada (a la izquierda, derecha, arriba o abajo del control asociado). Opcionalmente, se puede aplicar un estilo CSS para resaltar el control asociado activo.

ListSearch El control ListSearchExtender es un extensor que se pueden asociar a cualquier control de lista (ListBox, DropDownList o herederos) de ASP.NET y que permite seleccionar un elemento escribiendo la cadena buscada. El extensor realiza una búsqueda incremental en la lista sobre la base de lo que se ha tecleado hasta el momento. Un mensaje de aviso aparece cuando se hace clic en la lista y muestra las teclas pulsadas hasta el momento. El mensaje puede ser personalizado indicando su texto inicial, posición y estilo CSS.

MaskedEdit El control MaskedEdit es un extensor del control TextBox y que restringe el tipo de texto que se puede introducir en el cuadro de texto. MaskedEdit aplica una "máscara" a la entrada que sólo permite introducir ciertos tipos de caracteres / texto. La "máscara" es una cadena que contiene una serie de símbolos que indican el carácter o delimitador aceptado en cada posición de la entrada. Se puede configurar para que realice la validación, para lo cual asocia un control MaskedEditValidator al TextBox y lo configura. Los formatos de datos soportados por la validación son: Número, Fecha, Hora y DateTime (fecha con hora). Utiliza los formatos locales indicados por la referencia cultural del navegador cliente salvo que se diga lo contrario.

ModalPopup El ModalPopup es un extensor que permite mostrar, de forma "modal" dentro de la página actual, una página de contenido al usuario que le impide interactuar con el resto de la página hasta que se cierre. El contenido modal puede ser cualquier jerarquía de los controles y se muestra encima la página actual que queda como fondo, fondo al que se puede aplicar un estilo personalizado para indicar que está desactivado. Cuando aparece, sólo se puede interactuar con el contenido modal (no pasa nada al hacer clic en el resto de la página) hasta que se pulse sobre un control Aceptar o Cancelar, en cuyo caso desaparecerá el contenido modal y se podrá interactuar con el resto de la página. Opcionalmente, se pueden asociar un par de script personalizados que se ejecuta cuando se cierra el contenido modal, uno para Aceptar y otro para Cancelar, que procesen la información obtenida. Por defecto el contenido modal aparece centrado en la página, pero se puede especificar su posición.

15

Introducción a AJAX

MutuallyExclusiveCheckBox El control MutuallyExclusiveCheckBox es un extensor del control CheckBox y que permite asociar una serie de casillas de verificación a una "clave", de tal forma que sólo una de las casillas asociadas pueda estar marcada a la vez. Este extensor es útil cuando están disponibles una serie de posibles opciones, pero algunas son excluyentes. El comportamiento es similar a los RadioButton, pero con la diferencia que es posible no seleccionar ninguna o desmarcar la opción, cosa que no es posible con los RadioButton.

NoBot El NoBot es un potentísimo control que ayuda a luchar contra las aplicaciones robot que rellenan automáticamente los formularios. Si bien no es tan fiable como los Captcha (solicitan al usuario que introduzca un conjunto de caracteres que se muestran en una imagen distorsionada) tiene la ventaja ser completamente invisible al usuario evitándole molestias. NoBot emplea diferentes técnicas anti-bot. Para verificar que el acceso se produce desde un navegador, se le solicita que envíe en el postback el resultado de un cálculo que requiera JavaScript y DOM enviado en la página. También es posible establecer un tiempo mínimo para rellenar el formulario, que aun siendo de pocos segundos (imposible para un ser humano) reduce drásticamente la eficacia del robot, preparado para realizar cientos de envíos en dicho periodo. Por último, se puede configurar un número máximo de solicitudes aceptadas desde la misma dirección IP en un determinado periodo de tiempo.

NumericUpDown El control NumericUpDown es un extensor del control TextBox y que agrega botones de "arriba" y "abajo" para incrementar o decrementar el valor del TextBox. El incremento y decremento puede ser simples valore aritméticos (+1 / -1), puede recorrer una lista de valores (como los meses del año) o puede requerir la llamada a un servicio Web para determinar el siguiente valor. Se puede personalizar la presentación del control suministrando imágenes que sustituyan a los correspondientes botones.

PagingBulletedList El PagingBulletedList es un extensor del control BulletedList que se encarga de ordenar, crear un índice y paginar en cliente la lista. Es muy flexible y permite especificar el número de caracteres utilizados en los índices de las cabeceras de página o el número máximo de elementos que se mostrarán por página de índice. En caso de que no se le indique que ordene la lista, puede generar valores repetidos para los índices de las cabeceras de página aunque aún funciona adecuadamente. Todo se realiza en cliente, por lo que el usuario puede cambiar de índice sin necesidad de recargar la lista.

PasswordStrength El control PasswordStrength es un extensor del control TextBox cuando se utiliza para introducir contraseñas e indica visualmente al usuario la fortaleza de la contraseña según la va introduciendo. La fortaleza de la contraseña viene determinada por la longitud y si se combinan más o menos caracteres de los

16

Introducción a AJAX

siguientes grupos: letras mayúsculas, letras minúsculas, dígitos y símbolos; cuanta mayor sea la longitud y más grupos participen mayor será la fortaleza. El indicador puede mostrar la fortaleza de la contraseña mediante un mensaje de texto o con una barra de progreso, pudiéndose configurar su posición, estilo, mensajes e incluso los varemos de evaluación. El indicador se muestra cuando el usuario empieza a escribir en el TextBox y se oculta cuando el TextBox pierde el foco. Opcionalmente, el indicador puede proporcionar instrucciones explícitas de ayuda acerca de qué cambios son necesarios para conseguir una contraseña segura.

PopupControl El PopupControl es un extensor que se puede aplicar a cualquier control Web y que consiste en mostrar una pequeña ventana emergente con contenido adicional. Esa ventana emergente puede ser también cualquier control Web (típicamente un panel) y puede tener cualquier contenido, incluidos los controles de servidor ASP.NET, elementos HTML, etc. Si la ventana emergente es interactiva y contiene un UpdatePanel será capaz de realizar complejos procesos basados en servidor (incluyendo postbacks) sin afectar al resto de la página. Una vez realizada la labor de la ventana emergente, una simple llamada de servidor la descarga y dispara cualquier secuencia de comandos en el cliente para administrar y actualizar la página dinámicamente.

Rating El control Rating (Calificación) ofrece un mecanismo intuitivo de calificación que permite a los usuarios seleccionar el número de estrellas que representa su calificación. Se puede especificar la calificación inicial, la calificación máxima permitida, la alineación y orientación de las estrellas y los estilos personalizados de los diferentes estados que puede tener una estrella. Calificación Soporta, así mismo, un evento ClientCallBack que permite ejecutar código personalizado después de que el usuario ha evaluado algo.

ReorderList El control ReorderList muestra una lista con los datos vinculados a una fuente de datos que el usuario puede reordenar simplemente arrastrando la barra de control del elemento a su nueva ubicación. El control muestra gráficamente como se arrastra y se reubica el elemento. La fuente de datos se actualiza después de que el elemento alcance su nueva ubicación.

ResizableControl El ResizableControl es un extensor de cualquier control Web y que permite al usuario cambiar el tamaño del control pulsando en un control de tamaño en la esquina inferior derecha del control como si fuera una ventana. El contenido del elemento puede usar estilos CSS para cambiar automáticamente su tamaño para adaptarse a las nuevas dimensiones. La apariencia del control de tamaño en la esquina inferior derecha puede personalizarse. Opcionalmente se puede limitar el cambio de tamaño indicando el máximo y mínimo del ancho y el alto. Las dimensiones del elemento se conservan a través de postbacks al servidor y las propiedades de tamaño son accesibles tanto en el cliente como en el servidor.

17

Introducción a AJAX

RoundedCorners El RoundedCorners es un extensor que se puede asociar a cualquier control Web y que rodea al control con un marco de esquinas redondeadas. Se puede configurar que esquinas se desea redondear así como su radio de curvatura.

Slider El control Slider es un extensor del control TextBox visualizándose gráficamente como una barra deslizante que permite que el usuario elija un valor numérico de un rango finito. La orientación de la barra puede ser horizontal o vertical y también puede permitir sólo un determinado número de valores dentro de su área de distribución.

SlideShow El control SlideShow (presentación de diapositivas) es un extensor del control Image que permite cargar sucesivamente imágenes de forma dinámica. Puede generar automáticamente los botones para pasar a la imagen anterior, posterior y reproducir/parar. Se puede configurar el pase de diapositivas para que se reproduzca automáticamente rotando el bucle de imágenes y configurar también el intervalo de transición de diapositivas. Las imágenes pueden ser suministradas tanto por un método de página como por un servicio Web.

Tabs El control TabContainer que crea un conjunto de pestañas que se pueden utilizar para organizar contenido de la página. Un TabContainer es un contenedor de una serie de controles TabPanel. Cada TabPanel define el texto de su solapa, o una plantilla, así como una plantilla que define su contenido. El estado se mantiene para que se siga viendo la misma pestaña aunque se realice un postback.

TextBoxWatermark El control TextBoxWatermark es un extensor del control TextBox que muestra un texto como marca al agua mientras está vacío. Una vez que el usuario ha tecleado algo en el TextBox el texto de la marca al agua desaparece. Este mecanismo permite al TextBox ofrecer más información sobre sí mismo al usuario sin saturar el resto de la página.

ToggleButton El control ToggleButton es un extensor del control CheckBox y permite el uso de imágenes personalizadas para mostrar el estado del CheckBox. El comportamiento de la CheckBox no se ve afectado.

UpdatePanelAnimation El UpdatePanelAnimationExtender es un extensor del control UpdatePanel que permite utilizar el potente Framework de animación con las páginas existentes de una manera fácil y de forma declarativa. Se utiliza para reproducir animaciones mientras que un UpdatePanel se esta actualizando y después de que haya acabado de actualizar. El Animation Framework es una arquitectura de animaciones creadas para ASP.NET AJAX que proporciona una gran

18

Introducción a AJAX

cantidad de recursos para utilizar, tanto en modo secuencial como en modo paralelo o cualquiera de sus combinaciones, con las animaciones mas usuales como son el movimiento, cambio de tamaño y color, desvanecimiento, etc. Las animaciones a ejecutar se expresan declarativamente mediante XML.

ValidatorCallout El ValidatorCallout es un extensor que mejora la funcionalidad de los actuales validadores de ASP.NET, haciendo que el mensaje de validación aparezca como un globo emergente asociado al control cuyo valor no es

19