Desarrollo de Aplicaciones con Microsoft Ajax 1.0 y Ajax Control Toolkit

Pablo Espada Bueno www.esbupa.com www.programadorautonomo.net

Habitualmente me dedico a impartir formación y a labores de desarrollo y consultoría en .NET Si desea que colabore con usted impartiéndoles una formación o desarrollando algún proyecto, puede contactarme: Web www.programadorautonomo.net www.esbupa.com Email [email_address] [email_address] Espero que les guste la presentación

Antecedentes Qué es AJAX? Descripción del Modelo de AJAX Tecnologías AJAX Ventajas y Desventajas de AJAX Introducción al AJAX de Microsoft Objetivos del AJAX de Microsoft Arquitectura Proyectos de Ejemplo Controles AJAX Ejecución Remota de Métodos ASP.NET AJAX Client API

Las Aplicaciones Desktop ofrecen al usuario el uso de procesos e interfaces sofisticadas. La simplicidad y límites de las Aplicaciones Web (HTML) marcan la diferencia entre la interacción con una aplicación Web y una Desktop. Desarrolladores Web sacrifican la experiencia del usuario por la compatibilidad entre navegadores.

Internet basado en servicios, permite a los usuarios colaborar entre sí y compartir información de un nuevo modo. La web es la plataforma y los datos el procesador. Nuevos buzzwords: AJAX, RSS, Wikis, Semantic Web, Mash-ups, Rich Internet Apps, Web services…

AJAX brinda la posiblidad crear aplicaciones web enriquecidas, muy interactivas con los usuarios (RIA). AJAX permite procesar información sin considerables pausas y sin perder el estado. Es una combinación de varias tecnologías existentes: XHTML y CSS (DHTML) XMLHttpRequest JavaScript Document Object Model XML y XSLT

AJAX mejora la experiencia del usuario usando el objeto XMLHttpRequest para realizar llamadas al servidor e invocar servicios Web sin refrescar la página completamente. La porción de la página que es actualizada es modificada mediante JavaScript con el XML que es recibido. El usuario puede seguir interactuando con la página mientras que un proceso asíncrono se esta ejecutando en un segundo plano.

XHTML y CSS: estándares usados para la presentación y el diseño de la información. XML y XSLT: intercambio y manipulación de datos. Document Object Model (DOM): expone los elementos de una página HTML como una colección estándar de objetos (document, window…) que pueden ser manipulados programaticamente.

XMLHttpRequest envía y recibe de forma asíncrona información del servidor. XMLHttpRequest provee de los siguientes métodos y propiedades: open – crea la conexión. send – envía la petición al servidor. responseXml – información del servidor en XML. responseText – información del servidor en texto simple. readyState – indica el status de la disponibilidad de la información.

AJAX extiende el uso de script del lado del cliente. Javascript se utiliza para hacer llamadas a procedimientos remotos para después realizar el proceso en el cliente . También es usado para mejorar características de la UI.

Para construir rápidos y dinámicos sitios web. Para ahorrar recursos . Es mejor usar los recursos de todas las computadoras cliente que sólo los de un servidor y una red . Ajax permite realizar procesos en la computadora cliente (con JavaScript) con datos provenientes del servidor. El proceso de crear la página es realizado en el servidor antes de ser envíada a traves de la red.

El desarrollo de aplicaciones con AJAX requiere del conocimiento de los objetos del documento (DOMs), los cuales difieren entre los distintos navegadores. 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 del expertis con un nuevo lenguaje y una nueva plataforma de desarrollo.

Facilita el uso y extiende los beneficios de AJAX sobre la plataforma ASP .Net Permite la creación de páginas ASP.NET con una enriquecida e interactiva UI, además de comunicarse con el servidor. Integra librerías de código cliente con el framework de ASP.NET 2.0, ofreciendo la misma plataforma de desarrollo del lado del cliente.

Crear una plataforma altamente productiva para las aplicaciones web Suite enriquecida de componentes, controles, y comportamientos para escenarios comúnes Perfectamente integrado con la plataforma Microsoft y el modelo de aplicación Totalmente integrado con ASP.NET y el módelo de aplicación IIS

Integración con las plataformas de desarrollo y usuario Integrado con aplicaciones para el desarrollo de herramientas ( Visual Web Developer / Visual Studio 2005 ) y diseñadores ( Expression Web Designer ) Trabaja con un gran número de navegadores

Browser Presentation (HTML/CSS) “ AJAX” Service Proxies UI Behavior (Script) ASP.NET Application Services Page Framework, Server Controls “ AJAX” Script Framework Client Application Services Component/UI Framework, Controls Server Application Pages UI Behavior (Managed Code) Initial Rendering (UI + Behavior) Data Data

Browser Presentation (HTML/CSS) ASP.NET Application Services Page Framework, Server Controls “ AJAX” Script Framework C lient Application Services Component/UI Framework, Controls Server Application Pages UI Behavior (Managed Code) Input Data Updated UI + Behavior Initial Rendering (UI + Behavior)

Desarrollo basado en el feedback de la comunidad. Suite de componentes y controles para tareas y escenarios de uso común. Ej. Accordion CascadingDropDown CollapsiblePanel DragPanel ReorderList CollapsiblePanel PasswordStrength

Requerimientos: VS 2005 o Visual Web Developer Instalar ASP.NET AJAX 1.0 Se Instala por defecto en <Program Files>/Microsoft ASP.NET/ASP.NET Ajax Extensions Instalar AJAX Control Library Instalar AJAX Documentation

Crear un Sitio Web Ajax-Enabled Cada página tendrá un único control ScriptManager Agregamos 3 controles Label Agregamos un Botón En el Load de la página, establecemos el texto de las Label con la hora actual Vamos a “Ajaxificar” el sitio añadiendo un control “UpdatePanel” Los eventos que generen PostBack dentro del UpdatePanel sólo actualizarán el contenido, no la página completa, realizando un “PartialPageUpdate”

Dentro del UpdatePanel añadimos una de las Label y el Botón Ejecutamos y veremos cómo lo único que se actualiza es el contenido del UpdatePanel Resulta muy simple crear una aplicación básica que haga uso de la función de “PartialPageUpdate” de ASP.NET AJAX

Si no queremos tener el Botón dentro del UpdatePanel, podemos tenerlo fuera Para ello tendremos que: En el UpdatePanel, en vista de HTML, añadir una sección de <Triggers> En la sección, añadimos un <AsyncPostBackTrigger> indicando ControlD=<control que dispara el Update> y EventName=<evento a capturar> P.ej: <asp:AsyncPostBackTrigger ControlID=“Button1” EventName=“Click” />

El Control UpdateProgress sirve para mostrar una información al usuario mientras se está produciendo la actualización del UpdatePanel Para probarlo, creamos una nueva página con un UpdatePanel, con una Label y un Botón, y un comportamiento similar al anterior, pero en el Page_Load, utilizaremos el método System.Threading.Thread.Sleep() para ralentizar la recarga de la página Añadiremos un control UpdateProgress en el que informaremos de que la página se está actualizando. Tip: http://www.ajaxload.info/

El Control Timer nos permite controlar la frecuencia de actualización parcial de la página Podemos realizara una página similar a la inicial, con 3 controles Label, un Botón y las fechas, y configuramos el UpdatePanel, con el Botón dentro Si nos fijamos, en este caso cada vez que se actualiza el UpdatePanel, se está realizando un PostBack completo de la página, ya que está ejecutandose el evento Load. En términos de rendimiento, esto no es lo más optimo Podemos comprobar si estamos en un postback asincrono comprobando la propiedad “IsAsyncPostBack” del ScriptManager Vamos a sacar de nuevo el Botón y a configurar el Trigger del UpdatePanel para que lanze la actuálización

Vamos a añadir un nuevo UpdatePanel, y metermos otra de las Label en el ¿Qué ocurre ahora si ejecutamos y pulsamos el botón? Esto ocurre porque tenemos la propiedad UpdateMode = “Always”, de forma que cuando se actualiza un UpdatePanel, se actualizan todos Cambiamos el Modo a “Contitional” para ambos UpdatePanel Añadimos un Control Timer, establecemos su tick a 3 segundos, y creamos un Trigger para el segundo UpdatePanel que nos permita refrescarlo

1. Crear un Banner Dinámico con un UpdatePanel y un Timer

Otra de las características de ASP.NET AJAX es la posibilidad de realizar una llamada asíncrona a métodos, principalmente de servicios web. Esto es lo que se denomina “ClientSideNetworkCallbacks” ASP.NET AJAX generará un proxy JavaScript para realizar la invocación a dicho servicio web

Vamos a crear un nuevo sitio web Ajax, al que añadiremos un WebService llamado SimpleService En la página aspx, añadiremos un TextBox y un Botón (pero HTML, no ASP.NET) En el ScriptManager, añadiremos la etiqueta <Services> Dentro de <Services> añadiremos una <asp:ServiceReference> y en la propiedad “Path” añadiremos la ruta del servicio web

Haciendo DobleClick sobre el Botón HTML, generaremos en la vista de Código un evento Javascript para el Click del Botón Debemos hacer una pequeña modificación al Servicio Web para indicarle que sus métodos podrán ser llamados desde JavaScript (por defecto no es posible) En las propiedades declarativas de la clase añadiremos: <System.Web.Script.Services.ScriptService()> _

Nos queda rellenar el código del método OnClick del botón en Javascript, realizando la llamada asíncrona al metodo web: Parámetros: Parámetros del Metodo web Método a Ejecutar al Completar la Solicitud Método a Ejecutar en caso de Timeout Método a Ejecutar en caso de Error function Button1_onclick() { ret = SimpleService.SayHello(document.getElementById("Text1").value,OnComplete,OnTimeOut,OnError); return(true); }

Debemos escribir el código para los métodos OnComplete, OnTimeOut y OnError function OnComplete(arg) { alert(arg); } function OnTimeOut(arg) { alert("Se ha producido un timeout en la llamada a SayHello"); return(true); } function OnError(arg) { alert("Se ha producido un error en la llamada a SayHello"); return(true); }

1. Realizar una página web que realice una llamada a un servicio web que devuelva un tipo complejo (Por ejemplo, un Cliente) y actualizar la página con los valores retornados por dicho servicio

La API de cliente de ASP.NET AJAX no sólo permite la llamada a métodos de un servicio web, sino también a métodos de la página marcados con el atributo <WebMethod()> Además extiende al Javascript “normal” con posibilidad de utilizar orientación a objetos, modificadores de ámbito, interfaces, herencia… Esta API contiene un gran número de métodos que pueden ser usados con sólo añadir un control ScriptManager a la página

Vamos a realizar un ejemplo en el cual crearemos una petición asíncrona para cargar una página externa en una zona de nuestra página web Para ello utilizaremos un ejemplo de la Documentación, modificándolo un poco para que se ajuste a lo que necesitamos.

Dos características importantes de ASP.NET AJAX es la posibilidad de acceder, desde el lado del cliente a dos de los servicios de ASP.NET: Membership y Profile Dentro de la Client API hay clases para el acceso a estos servicios El control ScriptManager cuenta con la posibilidad de configurar el uso de servicios de Membership y Profile distintos a los estándar de ASP.NET, localizados en un servicio web Para acceder a esta funcionalidad, hay que crear el servicio web que implemente los métodos requeridos en cada caso y rellenar las propiedades AuthenticationService y ProfileService

1. Revisar en la Documentación de AJAX cómo utilizar las características de Membership de ASP.NET desde el cliente y montar la aplicación 2. Revisar el uso de Profile

Cómo sólo debemos añadir una única instancia de ScriptManager en cada página, si trabajamos con MasterPages, habitualmente lo haremos en la Master Pero si queremos añadir funcionalidad adicional de cliente (scripts, servicios, etc…), específica en cada página, para ello contamos con el ScriptManagerProxy

Los pasos que hay que dar para que un sitio web “normal” pueda utilizar las AJAX Extensions son: En el web.config añadir toda la configuración relacionada con AJAX Resultará complicado hacerlo a mano, por lo que lo más fácil es copiar las secciones necesarias desde el web.config desde otro proyecto Añadir a cada página un ScriptManager

En el caso de llamadas a Servicios Web desde AJAX, es el propio servicio web el que genera el código JavaScript necesario para realizar las llamadas. Este código es accesible desde el browser, poniendo la dirección del servicio y añadiendo “/js” Pasos para Ajaxificar el Servicio Web Modificar el web.config añadiendo las secciones necesarias para AJAX Copiarlas desde un Proyecto de Sitio Web Ajax Añadir a la clase que soporta el servicio web el atributo <System.Web.Script.Services.ScriptService()> para permitir que todos sus métodos puedan ser llamados desde JavaScript

La depuración de aplicaciones AJAX, por el uso de JavaScript y llamadas asíncronas, no se puede realizar a través de los mecanismos estándar de ASP.NET Para realizar depuración en la parte de servidor, simplemente añadiremos los breakpoints necesarios en el código Para realizar depuración en el cliente: Habilitaremos la depuración en el Browser En IE: Opciones de Internet, Opciones Avanzadas, Deshabilitar la Depuración de Scripts Recomendable Deshabilitar la Opción de Mensajes de Error Descriptivos Para poner un breakpoint, usaremos la función “debug.fail()” Es útil también el método “debug.dump(object)” que nos permite ver por pantalla, de forma legible, el contenido de un objeto Es conveniente contar con alguna utilidad para ver el tráfico y el estado de las páginas: http://projects.nikhilk.net/Projects/WebDevHelper.aspx

La ASP.NET AJAX Control Library es un conjunto de controles nuevos que hacen un uso intensivo de las características AJAX Para utilizarlos, es necesario que el sitio web soporte AJAX (tener instaladas las extensiones y añadir lo necesario al web.config) Tras descargar el Toolkit, es recomendable descomprimirlo en la misma carpeta donde están las extensiones (ProgramFiles/Microsoft ASP.NET/ASP.NET 2.0 Ajax Extensions)

Tras descomprimir, debemos abrir la solución y compilar el proyecto “TemplateVSI”, que nos generará las plantillas de proyecto que podremos instalar en VS2005 para crear sitios con el AJAX Control Toolkit Vamos a ver el SampleWebSite, que contiene ejemplos de uso de todos los Controles En el Directorio “bin” del SampleWebSite, nos encontraremos el resultado de la compilación del Control Toolkit Es recomendable copiarlo a la carpeta “Binaries” para poder soportar múltiples versiones del Toolkit En el Directorio “bin” del “TemplateVSI” tenemos el instalador de VS2005 que nos instalara los nuevos tipos de proyecto.

Crearemos un nuevo proyecto, seleccionando la plantilla “Ajax Control Toolkit Web-Site” Para facilitar el trabajo, añadiremos al Cuadro de Herramientas, una nueva Ficha en la que incluiremos todos los controles del ToolKit Nos encontraremos que el Toolkit está compuesto por 2 tipos de controles Controles AJAX Totalmente Nuevos. Incluyen funcionalidades que no existían en controles ASP.NET AJAX Extenders Añaden funcionalidad del lado del cliente a controles ASP.NET ya existentes

Añadiremos a la página un Botón, un TextBox y una Label En el evento Click del Botón, haremos el típico HelloWorld Añadimos un ConfirmButtonExtender Lo asociamos con el botón a través de la propiedad TargetControlID Si ahora seleccionamos el botón y miramos sus propiedades, veremos que tenemos una nueva propiedad “ConfirmText” que nos permite definir el texto del mensaje de confirmación Probamos la aplicación

Accordion Este control provee una lista de CollapsablePanels de forma que sólo puede haber un panel visible al mismo tiempo La propiedad “AutoSize” nos define como ajustar el relleno al tamaño de los paneles Las cabeceras deben contener un enlace vacío para poder hacer el cambio <ajaxToolkit:Accordion ID="MyAccordion" runat="Server" SelectedIndex="0" HeaderCssClass="accordionHeader" ContentCssClass="accordionContent" AutoSize="None" FadeTransitions="true" TransitionDuration="250" FramesPerSecond="40" RequireOpenedPane="false" SuppressHeaderPostbacks="true"> <Panes> <ajaxToolkit:AccordionPane HeaderCssClass="accordionHeader" ContentCssClass="accordionContent"> <Header> . . . </Header> <Content> . . . </Content> </ajaxToolkit:AccordionPane> . . . </Panes> <HeaderTemplate>...</HeaderTemplate> <ContentTemplate>...</ContentTemplate> </ajaxToolkit:Accordion>

AlwaysVisibleControlExtender Este extender nos permite mantener de forma fija un control en una posición de la página, independientemente del scroll <ajaxToolkit:AlwaysVisibleControlExtender ID="ace" runat="server" TargetControlID="timer" VerticalSide="Top" VerticalOffset="10" HorizontalSide="Right" HorizontalOffset="10" ScrollEffectDuration=".1"/>

AutoCompleteExtender Este Extender se asocia a cualquier TextBox A medida que vas escribiendo te ofrece opciones para autocompletar el texto Esto se hace realizando una llamada a un servicio web que devuelve la lista de palabras posibles <ajaxToolkit:AutoCompleteExtender runat="server" ID="autoComplete1" TargetControlID="myTextBox" ServiceMethod="GetCompletionList" ServicePath="AutoComplete.asmx" MinimumPrefixLength="2" CompletionInterval="1000" EnableCaching="true" CompletionSetCount="12" /> [System.Web.Services.WebMethod] [System.Web.Script.Services.ScriptMethod] public string[] GetCompletionList(string prefixText, int count) Sintaxis del Método

CalendarExtender Permite asociar un calendario a un cuadro de texto <ajaxToolkit:Calendar runat="server" TargetControlID="Date1" CssClass="ClassName" Format="MMMM d, yyyy" PopupButtonID="Image1" />

CascadingDropDown Permite crear un conjunto de DropDown relacionados que se actualizan en cascada <ajaxToolkit:CascadingDropDown ID="CDD1" runat="server" TargetControlID="DropDownList2" Category="Model" PromptText="Please select a model" LoadingText="[Loading models...]" ServicePath="CarsService.asmx" ServiceMethod="GetDropDownContents" ParentControlID="DropDownList1" SelectedValue="SomeValue" /> [System.Web.Services.WebMethod] [System.Web.Script.Services.ScriptMethod] public static CascadingDropDownNameValue[] GetDropDownContents( string knownCategoryValues, string category) { ... } Sintaxis del Método

1. Crear una Página con CascadingDropDownLists que permita seleccionar Provincia - Localidad Podéis ayudaros del ejemplo del ToolKit y del Tutorial

CollapsablePanelExtender Permite que un panel se oculte o se muestre dinámicamente sin generar un postback <ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="Server" TargetControlID="Panel1" CollapsedSize="0" ExpandedSize="300" Collapsed="True" ExpandControlID="LinkButton1" CollapseControlID="LinkButton1" AutoCollapse="False" AutoExpand="False" ScrollContents="True" TextLabelID="Label1" CollapsedText="Show Details..." ExpandedText="Hide Details" ImageControlID="Image1" ExpandedImage="~/images/collapse.jpg" CollapsedImage="~/images/expand.jpg" ExpandDirection="Height" />

ConfirmButtonExtender Permite añadir un botón de confirmación Javascript a cualquier botón ASP.NET <ajaxToolkit:ConfirmButtonExtender ID="cbe" runat="server" TargetControlID="LinkButton1" ConfirmText="Are you sure you want to click this?" />

DragPanelExtender Permite que un panel se pueda mover libremente por la pantalla <ajaxToolkit:DragPanelExtender ID="DPE1" runat="server" TargetControlID="Panel3" DragHandleID="Panel4" />

DropDownExtender Permite que a cualquier control (normalmente Labels) se le pueda asignar otro control, que aparecerá con un efecto de DropDown Normalmente el segundo control será un Panel con HyperLinks o LinkButtons <ajaxToolkit:DropDownExtender runat="server" ID="DDE" TargetControlID="TextLabel" DropDownControlID="DropPanel" />

DropShadowExtender Permite añadir un efecto de rectángulo redondeado y de sombra a un Panel <ajaxToolkit:DropShadowExtender ID="dse" runat="server" TargetControlID="Panel1" Opacity=".8" Rounded="true" TrackPosition="true" />

DynamicPopulateExtender Permite reemplazar el contenido de un control con el resultado de llamar a un método de un servicio web (o de la página) <ajaxToolkit:DynamicPopulateExtender ID="dp" runat="server" TargetControlID="Panel1" ClearContentsDuringUpdate="true" PopulateTriggerControlID="Label1" ServiceMethod="GetHtml" /> [System.Web.Services.WebMethod] [System.Web.Script.Services.ScriptMethod] string DynamicPopulateMethod(string contextKey) { ... } Sintaxis del Método

FilteredTextBoxExtender Permite filtrar el contenido de un textbox Las opciones para FilterType son: Custom, Numbers, LowercaseLetters y UppercaseLetters Si se usa Custom, hay que definir la propiedad ValidChars <ajaxToolkit:FilteredTextBoxExtender ID="ftbe" runat="server" TargetControlID="TextBox3" FilterType="Custom, Numbers" ValidChars="+-=/*()." />

HoverMenuExtender Permite añadir a cualquier control un menú contextual, que normalmente está implementado en un panel <ajaxToolkit:HoverMenuExtender ID="hme2" runat="Server" TargetControlID="Panel9" PopupControlID="PopupMenu" HoverCssClass="popupHover" PopupPosition="Left" OffsetX="0" OffsetY="0" PopDelay="50" />

ListSearchExtender Permite realizar búsquedas tecleando texto tanto en ListBox como en DropDownList <ajaxToolkit:ListSearchExtender id="LSE" runat="server" TargetControlID="ListBox1" PromptText="Type to search" PromptCssClass="ListSearchExtenderPrompt" PromptPosition="Top" />

MaskedEdit Realmente son 2 controles: MaskedEditExtender y MaskedEditValidation El primero sirve para establecer una máscara de entrada en un textbox y facilitar al usuario el trabajo El segundo se encarga de validar esa entrada según el formato elegido En el ejemplo del Toolkit se especifican todas las opciones de formato <ajaxToolkit:MaskedEditExtender TargetControlID="TextBox2" Mask="99,999.99" MessageValidatorTip="true" OnFocusCssClass="MaskedEditFocus" OnInvalidCssClass="MaskedEditError" MaskType="Number" InputDirection="RightToLeft" AcceptNegative="Left" DisplayMoney="Left"/> <ajaxToolkit:MaskedEditValidator ControlExtender="MaskedEditExtender2" ControlToValidate="TextBox2" IsValidEmpty="False" MaximumValue="12000" EmptyValueMessage="Number is required" InvalidValueMessage="Number is invalid" MaximumValueMessage="Number > 12.000" MinimumValueMessage="Number < -100" MinimumValue="-100" ValidationGroup="Demo1" Display="Dynamic" TooltipMessage="Input a number: -100 up to 12.000"/>

ModalPopUpExtender Permite establecer un cuadro de diálogo modal para realizar una pregunta al usuario Mientras el cuadro está visible, bloquea el resto de la página, marcándola con un sombreado La acción a realizar tras la selección se define en una función JavaScript <ajaxToolkit:ModalPopupExtender ID="MPE" runat="server" TargetControlID="LinkButton1" PopupControlID="Panel1" BackgroundCssClass="modalBackground" DropShadow="true" OkControlID="OkButton" OnOkScript="onOk()" CancelControlID="CancelButton" PopupDragHandleControlID="Panel3" />

1. Realizar un ejemplo en el que, con un ModalPopUp, se seleccione que método de un servicio web se quiere ejecutar Tras la selección ejecutaremos este método y mostraremos el resultado por pantalla

MutiallyExclusiveCheckBoxExtender Permite crear grupos de CheckBox, en los cuales sólo uno de ellos podrá estar seleccionado <ajaxToolkit:MutuallyExclusiveCheckboxExtender runat="server" ID="MustHaveGuestBedroomCheckBoxEx" TargetControlID="MustHaveGuestBedroomCheckBox" Key="GuestBedroomCheckBoxes" />

NoBot Permite controlar la ejecución de un postback en la página, para que este no pueda ser generado automáticamente por un ROBOT <ajaxToolkit:NoBot ID="NoBot2" runat="server" OnGenerateChallengeAndResponse="CustomChallengeResponse" ResponseMinimumDelaySeconds="2" CutoffWindowSeconds="60" CutoffMaximumInstances="5" />

NumericUpDownExtender Permite añadir a un TextBox la funcionalidad de incrementar/decrementar el valor que contiene. El incremento/decremento puede ser automático, o obtener el siguiente valor via Servicio Web <ajaxToolkit:NumericUpDownExtender ID="NUD1" runat="server" TargetControlID="TextBox1" Width="100" RefValues="January;February;March;April" TargetButtonDownID="Button1" TargetButtonUpID="Button2" ServiceDownPath="WebService1.asmx" ServiceDownMethod="PrevValue" ServiceUpPath="WebService1.asmx" ServiceUpMethod="NextValue" Tag="1" />

PagingBulletedListExtender Permite añadir a una BulletedList funciones de paginación de forma automática <ajaxToolkit:PagingBulletedListExtender ID="PBLE1" runat="server" TargetControlID="BulletedList1" ClientSort="true" IndexSize="1" MaxItemPerPage="20" Separator=" - " SelectIndexCssClass="selectIndex" UnselectIndexCssClass="unSelectIndex" />

PasswordStrengthExtender Permite añadir a un TextBox que representa un password, una medida de lo bueno o malo que es el password La calidad de ese password dependerá del número de caracteres, caracteres alfanuméricos, etc… Todo se configura en el Extender <ajaxToolkit:PasswordStrength ID="PS" runat="server" TargetControlID="TextBox1" DisplayPosition="RightSide" StrengthIndicatorType="Text" PreferredPasswordLength="10" PrefixText="Strength:" TextCssClass="TextIndicator_TextBox1" MinimumNumericCharacters="0" MinimumSymbolCharacters="0" RequiresUpperAndLowerCaseCharacters="false" TextStrengthDescriptions="Very Poor;Weak;Average;Strong;Excellent" CalculationWeightings="50;15;15;20" />

PopUpControlExtender Puede asociarse a cualquier control y permite mostrar un PopUp con información adicional <ajaxToolkit:PopupControlExtender ID="PopEx" runat="server" TargetControlID="DateTextBox" PopupControlID="Panel1" Position="Bottom" />

Rating Permite, de una forma intuitiva, proporcionar una valoración sobre algún elemento del sitio web Tiene la posibilidad de establecer un evento cuando cambia la valoración del usuario <ajaxToolkit:Rating ID="ThaiRating" runat="server" CurrentRating="2" MaxRating="5" StarCssClass="ratingStar" WaitingStarCssClass="savedRatingStar" FilledStarCssClass="filledRatingStar" EmptyStarCssClass="emptyRatingStar" OnChanged="ThaiRating_Changed" />

ReorderList Control de Tipo Lista que permite reordenar los elementos dinámicamente. <ajaxToolkit:ReorderList ID="ReorderList1" runat="server" DataSourceID="ObjectDataSource1" DragHandleAlignment="Left" ItemInsertLocation="Beginning" DataKeyField="ItemID" SortOrderField="Priority" AllowReorder="true"> <ItemTemplate>...</ItemTemplate> <ReorderTemplate>...</ReorderTemplate> <DragHandleTemplate>...</DragHandleTemplate> <InsertItemTemplate>...</InsertItemTemplate> </ajaxToolkit:ReorderList>

ResizableControlExtender Permite que los controles puedan variar de tamaño haciendo click en su esquina inferior derecha Es posible añadir un evento de cliente al hacer el resize <ajaxToolkit:ResizableControlExtender ID="RCE" runat="server" TargetControlID="PanelImage" HandleCssClass="handleImage" ResizableCssClass="resizingImage" MinimumWidth="50" MinimumHeight="20" MaximumWidth="260" MaximumHeight="130" OnClientResize="OnClientResizeImage" HandleOffsetX="3" HandleOffsetY="3" />

RoundedCornerExtender Permite añadir un borde redondeado a un control <ajaxToolkit:RoundedCornersExtender ID="rce" runat="server" TargetControlID="Panel1" Radius="6" Corners="All" />

SliderExtender Permite mostrar un control tipo Barra de Desplazamiento asociado a un TextBox El resultado de la selección puede mostrarse en un TextBox o en una Label <ajaxToolkit:SliderExtender ID="SliderExtender1" runat="server" TargetControlID="Slider1" Minimum="-100" Maximum="100" BoundControlID="Slider1_BoundControl" Steps="5" /> <ajaxToolkit:SliderExtender ID="SliderExtender2" runat="server" TargetControlID="Slider2" BoundControlID="Slider2_BoundControl" Orientation="Vertical" EnableHandleAnimation="true" />

SlideShowExtender Asociado a controles de Imagen, permite cambiar automáticamente de imagen tras un intervalo de tiempo Permite también asociarle botones para parar la animación, ver la siguiente imagen y ver la anterior <ajaxToolkit:SlideShowExtender ID="SlideShowExtender1" runat="server" TargetControlID="Image1" SlideShowServiceMethod="GetSlides" AutoPlay="true" ImageDescriptionLabelID="imageLabel1" NextButtonID="nextButton" PlayButtonText="Play" StopButtonText="Stop" PreviousButtonID="prevButton" PlayButtonID="playButton" Loop="true" /> [System.Web.Services.WebMethod] [System.Web.Script.Services.ScriptMethod] public AjaxControlToolkit.Slide[] GetSlides() { ... } Sintaxis del Método

TabContainer Control que permite mostrar el contenido en formato de ficha. Compuesto por un conjunto de TabPanel <ajaxToolkit:TabContainer runat="server" OnClientActiveTabChanged="ClientFunction" Height="150px"> <ajaxToolkit:TabPanel runat="server" HeaderText="Signature and Bio" <ContentTemplate> ... </ContentTemplate> /> </ajaxToolkit:TabContainer>

TextBoxWatermarkExtender Añade a los TextBox la funcionalidad de “marca de agua” Permite mostrar una información en el TextBox que desaparece cuando el usuario escribe texto. Hay que configurar una CSS para definir el estilo de la marca de agua <ajaxToolkit:TextBoxWatermarkExtender ID="TBWE2" runat="server" TargetControlID="TextBox1" WatermarkText="Type First Name Here" WatermarkCssClass="watermarked" />

ToggleButtonExtender Puede aplicarse a controles CheckBox y sustituye el “Check” por una imagen <ajaxToolkit:ToggleButtonExtender ID="ToggleEx" runat="server" TargetControlID="CheckBox1" ImageWidth="19" ImageHeight="19" CheckedImageAlternateText="Check" UncheckedImageAlternateText="UnCheck" UncheckedImageUrl="ToggleButton_Unchecked.gif" CheckedImageUrl="ToggleButton_Checked.gif" />

ValidationCalloutExtender Puede aplicarse a cualquier tipo de validador estándar. Añade un comportamiento de PopUp al validador, mostrando el texto del error <ajaxToolkit:ValidatorCalloutExtender runat="Server" ID="PNReqE" TargetControlID="PNReq" Width="350px" HighlightCssClass="highlight" WarningIconImageUrl="warning.gif" CloseImageUrl="close.gif" />

1. Para el típico formulario de captura de datos (al ménos con 5 campos), añadirle comportamientos AJAX para mejorar la experiencia del usuario

El AJAX Control Toolkit cuenta con 2 controles especialmente indicados para realizar efectos de animación: Animation y UpdatePanelAnimationExtender Estos controles permiten transformar la presentación desde un estado a otro: De un color a otro De una posición a otra De un tamaño a otro De una visibilidad a otra El control de la animación lo podemos basar en eventos lanzados desde controles HTML o escribiendo código Javascript personalizado

Vamos a crear un proyecto nuevo y en este proyecto vamos a añadir algo de HTML (porque los eventos se lanzan desde HTML) Tenemos este ejemplo hecho por lo que vamos a copiar las imágenes y el stylesheet al nuevo proyecto Añadimos un Botón ASP.NET En el evento OnClientClick le ponemos “return false;” Añadimos un DIV y le llamamos “flyout”. Le ponemos “class=wireFrame” Añadimos, dentro del DIV anterior, otro DIV llamado “info”. El estilo lo podemos copiándolo del ejemplo

Dentro del DIV “info” metemos un texto largo (lo podemos copiar también) Necesitamos, dentro del DIV “info” algún elemento que nos permita cerrarlo. Para ello añadiremos. Para ello añadiremos otro DIV que llamaremos “btnCloseParent”. El estilo lo volvemos a copiar del ejemplo Dentro de este DIV, añadiremos un LinkButton que nos permita capturar el evento para el cierre y lo llamamos “btnClose”

En el evento OnClientClick del LinkButton ponemos “return false;” Cómo texto ponemos una “X” para simular el cierre y ponemos ToolTip = “Cerrar” Una vez más, el estilo lo copiamos del ejemplo Ahora necesitamos un poco de código Javascript para permitir colocar una capa encima de otra Copiamos la función Cover del ejemplo

Nos queda montar las animaciones. Necesitaremos 2 animaciones: Una para mostrar el cuadro cuando hagamos click en el botón y otra para cerrarlo cuando hagamos click en la X del panel Cómo son muchos parámetros, vamos a copiar los 2 controles AnimationExtender desde el ejemplo, y vamos a desglosar punto por punto los elementos de la animación

Cada AnimationExtender contendrá una secuencia de acciones en formato XML que nos definirá el comportamiento de la animación. Debemos configurar el TargetControlID, que en este caso asociaremos con el control “btnInfo” para el primer AnimationExtender y con el control “btnClose” para el segundo En cada AnimationExtender debemos incluir las etiquetas: <Animation> <Evento> <Sequence> Lista Secuencial de Acciones <Parallel … > Lista Paralela de Acciones </Parallel> </Sequence> </Evento> </Animation>

Tipos de Evento AnimationExtender OnClick OnLoad OnMouseOut OnMouseOver OnHoverOver OnHoverOut UpdatePanelAnimationExtender OnUpdating OnUpdate

Tipos de Acciones (principales) <EnableAction>: Permite Habilitar o Deshabilitar el Control <ScriptAction>: Permite ejecutar una función Javascript <StyleAction>: Permite cambiar atributos de estilo de un elemento <Move>: Mueve un elemento <Resize>: Cambia de tamaño un elemento <Color>: Cambia el color de un elemento <FadeIn>: Efecto de Aparicíon <FadeOut>: Efecto de Desaparicion <HideAction>: Oculta un Elemento

Sólo nos queda probarlo todo a ver que pasa Tras funcionar perfectamente, podemos hacer un ejemplo algo más simple: Crear una pagina en la que se solicite el ancho y alto al que se quiere mostrar una imagen. Al pulsar un botón, la imagen aparecerá con el tamaño deseado, y si es posible, haciendo un efecto de Fade Mientras la imagen se está mostrando, deshabilitamos el botón de “Ver” y habilitamos un botón de “Ocultar” Al pulsar “Ocultar” la imagen desaparece con un FadeOut y podemos volver a mostrarla con otro tamaño distinto

Partiendo de la tienda virtual XBikes de ejemplo, y siguiendo las instrucciones del manual del HOL, vamos a Ajaxificar este sitio web NOTA: Para realizar la configuración de Profile, es necesario utilizar las AJAX Futures CTP Dejar este punto para el final, y si da tiempo, se puede hacer de 2 formas Utilizando las AJAX Futures CPT Accediendo a la API de Profile en la Client API

Desarrollo de Aplicaciones con Microsoft Ajax 1.0 y Ajax Control Toolkit

Más contenido relacionado

Destacado

Similar a Desarrollo de Aplicaciones con Microsoft Ajax 1.0 y Ajax Control Toolkit

Último

En este documento

Desarrollo de Aplicaciones con Microsoft Ajax 1.0 y Ajax Control Toolkit