Desarrollo de Aplicaciones con Microsoft Ajax 1.0 y Ajax Control Toolkit

40,164 views

Published on

Esta presentación hace un respaso completo sobre las técnicas necesarias para desarrollar aplicaciones con Microsoft Ajax 1.0 y el Ajax Control Toolkit. Repasamos conceptos generales sobre Ajax, para revisar, de forma practica, cómo integrar Ajax en aplicaciones ASP.NET 2.0, Servicios Web, etc... Usaremos los controles UpdatePanel, UpdateProgress, etc... así como los elementos del Control Toolkit

Published in: Technology
3 Comments
14 Likes
Statistics
Notes
  • Buenisima la Informacion. Muchisimas Gracias
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Excelente presentacion... mil felicidades... yo actualmente estoy usando el control del PasswordStrength pero no logro configurar que el tamanio minimo del password minimamente sea 6 el tamanio como lo configuro? probe con todas sus propiedades pero si le pongo con PreferredPasswordLength='6' apenas pasa 7 ya es strong y lo que busco es que solo sea strong si ingresa 3 tipos de caracteres... te agradeceria si me pudieras ayudar....
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ta en algodon...
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
40,164
On SlideShare
0
From Embeds
0
Number of Embeds
639
Actions
Shares
0
Downloads
1
Comments
3
Likes
14
Embeds 0
No embeds

No notes for slide
  • Desarrollo de Aplicaciones con Microsoft Ajax 1.0 y Ajax Control Toolkit

    1. 1. Pablo Espada Bueno www.esbupa.com www.programadorautonomo.net
    2. 2. <ul><li>Habitualmente me dedico a impartir formación y a labores de desarrollo y consultoría en .NET </li></ul><ul><li>Si desea que colabore con usted impartiéndoles una formación o desarrollando algún proyecto, puede contactarme: </li></ul><ul><ul><li>Web </li></ul></ul><ul><ul><ul><li>www.programadorautonomo.net </li></ul></ul></ul><ul><ul><ul><li>www.esbupa.com </li></ul></ul></ul><ul><ul><li>Email </li></ul></ul><ul><ul><ul><li>[email_address] </li></ul></ul></ul><ul><ul><ul><li>[email_address] </li></ul></ul></ul><ul><li>Espero que les guste la presentación </li></ul>
    3. 3. <ul><li>Antecedentes </li></ul><ul><li>Qué es AJAX? </li></ul><ul><li>Descripción del Modelo de AJAX </li></ul><ul><li>Tecnologías AJAX </li></ul><ul><li>Ventajas y Desventajas de AJAX </li></ul><ul><li>Introducción al AJAX de Microsoft </li></ul><ul><li>Objetivos del AJAX de Microsoft </li></ul><ul><li>Arquitectura </li></ul><ul><li>Proyectos de Ejemplo </li></ul><ul><li>Controles AJAX </li></ul><ul><li>Ejecución Remota de Métodos </li></ul><ul><li>ASP.NET AJAX Client API </li></ul>
    4. 4. <ul><li>Las Aplicaciones Desktop ofrecen al usuario el uso de procesos e interfaces sofisticadas. </li></ul><ul><li>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. </li></ul><ul><li>Desarrolladores Web sacrifican la experiencia del usuario por la compatibilidad entre navegadores. </li></ul>
    5. 6. <ul><li>Internet basado en servicios, permite a los usuarios colaborar entre sí y compartir información de un nuevo modo. </li></ul><ul><li>La web es la plataforma y los datos el procesador. </li></ul><ul><li>Nuevos buzzwords: AJAX, RSS, Wikis, Semantic Web, Mash-ups, Rich Internet Apps, Web services… </li></ul>
    6. 7. <ul><li>AJAX brinda la posiblidad crear aplicaciones web enriquecidas, muy interactivas con los usuarios (RIA). </li></ul><ul><li>AJAX permite procesar información sin considerables pausas y sin perder el estado. </li></ul><ul><li>Es una combinación de varias tecnologías existentes: </li></ul><ul><ul><li>XHTML y CSS (DHTML) </li></ul></ul><ul><ul><li>XMLHttpRequest </li></ul></ul><ul><ul><li>JavaScript </li></ul></ul><ul><ul><li>Document Object Model </li></ul></ul><ul><ul><li>XML y XSLT </li></ul></ul>
    7. 8. <ul><li>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. </li></ul><ul><li>La porción de la página que es actualizada es modificada mediante JavaScript con el XML que es recibido. </li></ul><ul><li>El usuario puede seguir interactuando con la página mientras que un proceso asíncrono se esta ejecutando en un segundo plano. </li></ul>
    8. 10. <ul><li>XHTML y CSS: estándares usados para la presentación y el diseño de la información. </li></ul><ul><li>XML y XSLT: intercambio y manipulación de datos. </li></ul><ul><li>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. </li></ul>
    9. 11. <ul><li>XMLHttpRequest envía y recibe de forma asíncrona información del servidor. </li></ul><ul><li>XMLHttpRequest provee de los siguientes métodos y propiedades: </li></ul><ul><ul><li>open – crea la conexión. </li></ul></ul><ul><ul><li>send – envía la petición al servidor. </li></ul></ul><ul><ul><li>responseXml – información del servidor en XML. </li></ul></ul><ul><ul><li>responseText – información del servidor en texto simple. </li></ul></ul><ul><ul><li>readyState – indica el status de la disponibilidad de la información. </li></ul></ul>
    10. 12. <ul><li>AJAX extiende el uso de script del lado del cliente. </li></ul><ul><li>Javascript se utiliza para hacer llamadas a procedimientos remotos para después realizar el proceso en el cliente . </li></ul><ul><li>También es usado para mejorar características de la UI. </li></ul>
    11. 13. <ul><li>Para construir rápidos y dinámicos sitios web. </li></ul><ul><li>Para ahorrar recursos . </li></ul><ul><ul><li>Es mejor usar los recursos de todas las computadoras cliente que sólo los de un servidor y una red . </li></ul></ul><ul><ul><li>Ajax permite realizar procesos en la computadora cliente (con JavaScript) con datos provenientes del servidor. </li></ul></ul><ul><ul><li>El proceso de crear la página es realizado en el servidor antes de ser envíada a traves de la red. </li></ul></ul>
    12. 14. <ul><li>El desarrollo de aplicaciones con AJAX requiere del conocimiento de los objetos del documento (DOMs), los cuales difieren entre los distintos navegadores. </li></ul><ul><li>JavaScript no ofrece todas las características de la programación orientada a objetos, ni del código administrado que el.NET Framework ofrece. </li></ul><ul><li>Crear aplicaciones web, con programación del lado del cliente requiere del expertis con un nuevo lenguaje y una nueva plataforma de desarrollo. </li></ul>
    13. 15. <ul><li>Facilita el uso y extiende los beneficios de AJAX sobre la plataforma ASP .Net </li></ul><ul><li>Permite la creación de páginas ASP.NET con una enriquecida e interactiva UI, además de comunicarse con el servidor. </li></ul><ul><li>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. </li></ul>
    14. 16. <ul><li>Crear una plataforma altamente productiva para las aplicaciones web </li></ul><ul><ul><li>Suite enriquecida de componentes, controles, y comportamientos para escenarios comúnes </li></ul></ul><ul><li>Perfectamente integrado con la plataforma Microsoft y el modelo de aplicación </li></ul><ul><ul><li>Totalmente integrado con ASP.NET y el módelo de aplicación IIS </li></ul></ul>
    15. 17. <ul><li>Integración con las plataformas de desarrollo y usuario </li></ul><ul><ul><li>Integrado con aplicaciones para el desarrollo de herramientas ( Visual Web Developer / Visual Studio 2005 ) y diseñadores ( Expression Web Designer ) </li></ul></ul><ul><li>Trabaja con un gran número de navegadores </li></ul>
    16. 18. 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
    17. 19. 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)
    18. 20. <ul><li>Desarrollo basado en el feedback de la comunidad. </li></ul><ul><li>Suite de componentes y controles para tareas y escenarios de uso común. Ej. </li></ul><ul><ul><li>Accordion </li></ul></ul><ul><ul><li>CascadingDropDown </li></ul></ul><ul><ul><li>CollapsiblePanel </li></ul></ul><ul><ul><li>DragPanel </li></ul></ul><ul><ul><li>ReorderList </li></ul></ul><ul><ul><li>CollapsiblePanel </li></ul></ul><ul><ul><li>PasswordStrength </li></ul></ul>
    19. 21. <ul><li>Requerimientos: </li></ul><ul><ul><li>VS 2005 o Visual Web Developer </li></ul></ul><ul><ul><li>Instalar ASP.NET AJAX 1.0 </li></ul></ul><ul><ul><ul><li>Se Instala por defecto en <Program Files>/Microsoft ASP.NET/ASP.NET Ajax Extensions </li></ul></ul></ul><ul><ul><li>Instalar AJAX Control Library </li></ul></ul><ul><ul><li>Instalar AJAX Documentation </li></ul></ul>
    20. 22. <ul><li>Crear un Sitio Web Ajax-Enabled </li></ul><ul><li>Cada página tendrá un único control ScriptManager </li></ul><ul><li>Agregamos 3 controles Label </li></ul><ul><li>Agregamos un Botón </li></ul><ul><li>En el Load de la página, establecemos el texto de las Label con la hora actual </li></ul><ul><li>Vamos a “Ajaxificar” el sitio añadiendo un control “UpdatePanel” </li></ul><ul><ul><li>Los eventos que generen PostBack dentro del UpdatePanel sólo actualizarán el contenido, no la página completa, realizando un “PartialPageUpdate” </li></ul></ul>
    21. 23. <ul><li>Dentro del UpdatePanel añadimos una de las Label y el Botón </li></ul><ul><li>Ejecutamos y veremos cómo lo único que se actualiza es el contenido del UpdatePanel </li></ul><ul><li>Resulta muy simple crear una aplicación básica que haga uso de la función de “PartialPageUpdate” de ASP.NET AJAX </li></ul>
    22. 24. <ul><li>Si no queremos tener el Botón dentro del UpdatePanel, podemos tenerlo fuera </li></ul><ul><li>Para ello tendremos que: </li></ul><ul><ul><li>En el UpdatePanel, en vista de HTML, añadir una sección de <Triggers> </li></ul></ul><ul><ul><li>En la sección, añadimos un <AsyncPostBackTrigger> indicando ControlD=<control que dispara el Update> y EventName=<evento a capturar> </li></ul></ul><ul><ul><ul><li>P.ej: <asp:AsyncPostBackTrigger ControlID=“Button1” EventName=“Click” /> </li></ul></ul></ul>
    23. 25. <ul><li>El Control UpdateProgress sirve para mostrar una información al usuario mientras se está produciendo la actualización del UpdatePanel </li></ul><ul><li>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 </li></ul><ul><li>Añadiremos un control UpdateProgress en el que informaremos de que la página se está actualizando. </li></ul><ul><ul><li>Tip: http://www.ajaxload.info/ </li></ul></ul>
    24. 26. <ul><li>El Control Timer nos permite controlar la frecuencia de actualización parcial de la página </li></ul><ul><li>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 </li></ul><ul><li>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 </li></ul><ul><ul><li>Podemos comprobar si estamos en un postback asincrono comprobando la propiedad “IsAsyncPostBack” del ScriptManager </li></ul></ul><ul><li>Vamos a sacar de nuevo el Botón y a configurar el Trigger del UpdatePanel para que lanze la actuálización </li></ul>
    25. 27. <ul><li>Vamos a añadir un nuevo UpdatePanel, y metermos otra de las Label en el </li></ul><ul><li>¿Qué ocurre ahora si ejecutamos y pulsamos el botón? </li></ul><ul><li>Esto ocurre porque tenemos la propiedad UpdateMode = “Always”, de forma que cuando se actualiza un UpdatePanel, se actualizan todos </li></ul><ul><li>Cambiamos el Modo a “Contitional” para ambos UpdatePanel </li></ul><ul><li>Añadimos un Control Timer, establecemos su tick a 3 segundos, y creamos un Trigger para el segundo UpdatePanel que nos permita refrescarlo </li></ul>
    26. 28. 1. Crear un Banner Dinámico con un UpdatePanel y un Timer
    27. 29. <ul><li>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” </li></ul><ul><li>ASP.NET AJAX generará un proxy JavaScript para realizar la invocación a dicho servicio web </li></ul>
    28. 30. <ul><li>Vamos a crear un nuevo sitio web Ajax, al que añadiremos un WebService llamado SimpleService </li></ul><ul><li>En la página aspx, añadiremos un TextBox y un Botón (pero HTML, no ASP.NET) </li></ul><ul><li>En el ScriptManager, añadiremos la etiqueta <Services> </li></ul><ul><li>Dentro de <Services> añadiremos una <asp:ServiceReference> y en la propiedad “Path” añadiremos la ruta del servicio web </li></ul>
    29. 31. <ul><li>Haciendo DobleClick sobre el Botón HTML, generaremos en la vista de Código un evento Javascript para el Click del Botón </li></ul><ul><li>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) </li></ul><ul><ul><li>En las propiedades declarativas de la clase añadiremos: <System.Web.Script.Services.ScriptService()> _ </li></ul></ul>
    30. 32. <ul><li>Nos queda rellenar el código del método OnClick del botón en Javascript, realizando la llamada asíncrona al metodo web: </li></ul><ul><li>Parámetros: </li></ul><ul><ul><li>Parámetros del Metodo web </li></ul></ul><ul><ul><li>Método a Ejecutar al Completar la Solicitud </li></ul></ul><ul><ul><li>Método a Ejecutar en caso de Timeout </li></ul></ul><ul><ul><li>Método a Ejecutar en caso de Error </li></ul></ul>function Button1_onclick() { ret = SimpleService.SayHello(document.getElementById(&quot;Text1&quot;).value,OnComplete,OnTimeOut,OnError); return(true); }
    31. 33. <ul><li>Debemos escribir el código para los métodos OnComplete, OnTimeOut y OnError </li></ul>function OnComplete(arg) { alert(arg); } function OnTimeOut(arg) { alert(&quot;Se ha producido un timeout en la llamada a SayHello&quot;); return(true); } function OnError(arg) { alert(&quot;Se ha producido un error en la llamada a SayHello&quot;); return(true); }
    32. 34. 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
    33. 35. <ul><li>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()> </li></ul><ul><li>Además extiende al Javascript “normal” con posibilidad de utilizar orientación a objetos, modificadores de ámbito, interfaces, herencia… </li></ul><ul><li>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 </li></ul>
    34. 36. <ul><li>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 </li></ul><ul><li>Para ello utilizaremos un ejemplo de la Documentación, modificándolo un poco para que se ajuste a lo que necesitamos. </li></ul>
    35. 37. <ul><li>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 </li></ul><ul><li>Dentro de la Client API hay clases para el acceso a estos servicios </li></ul><ul><li>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 </li></ul><ul><ul><li>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 </li></ul></ul>
    36. 38. 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
    37. 39. <ul><li>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 </li></ul><ul><li>Pero si queremos añadir funcionalidad adicional de cliente (scripts, servicios, etc…), específica en cada página, para ello contamos con el ScriptManagerProxy </li></ul>
    38. 40. <ul><li>Los pasos que hay que dar para que un sitio web “normal” pueda utilizar las AJAX Extensions son: </li></ul><ul><ul><li>En el web.config añadir toda la configuración relacionada con AJAX </li></ul></ul><ul><ul><ul><li>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 </li></ul></ul></ul><ul><ul><li>Añadir a cada página un ScriptManager </li></ul></ul>
    39. 41. <ul><li>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. </li></ul><ul><ul><li>Este código es accesible desde el browser, poniendo la dirección del servicio y añadiendo “/js” </li></ul></ul><ul><li>Pasos para Ajaxificar el Servicio Web </li></ul><ul><ul><li>Modificar el web.config añadiendo las secciones necesarias para AJAX </li></ul></ul><ul><ul><ul><li>Copiarlas desde un Proyecto de Sitio Web Ajax </li></ul></ul></ul><ul><ul><li>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 </li></ul></ul>
    40. 42. <ul><li>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 </li></ul><ul><li>Para realizar depuración en la parte de servidor, simplemente añadiremos los breakpoints necesarios en el código </li></ul><ul><li>Para realizar depuración en el cliente: </li></ul><ul><ul><li>Habilitaremos la depuración en el Browser </li></ul></ul><ul><ul><ul><li>En IE: Opciones de Internet, Opciones Avanzadas, Deshabilitar la Depuración de Scripts </li></ul></ul></ul><ul><ul><ul><li>Recomendable Deshabilitar la Opción de Mensajes de Error Descriptivos </li></ul></ul></ul><ul><ul><li>Para poner un breakpoint, usaremos la función “debug.fail()” </li></ul></ul><ul><ul><li>Es útil también el método “debug.dump(object)” que nos permite ver por pantalla, de forma legible, el contenido de un objeto </li></ul></ul><ul><ul><li>Es conveniente contar con alguna utilidad para ver el tráfico y el estado de las páginas: </li></ul></ul><ul><ul><ul><li>http://projects.nikhilk.net/Projects/WebDevHelper.aspx </li></ul></ul></ul>
    41. 43. <ul><li>La ASP.NET AJAX Control Library es un conjunto de controles nuevos que hacen un uso intensivo de las características AJAX </li></ul><ul><li>Para utilizarlos, es necesario que el sitio web soporte AJAX (tener instaladas las extensiones y añadir lo necesario al web.config) </li></ul><ul><li>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) </li></ul>
    42. 44. <ul><li>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 </li></ul><ul><li>Vamos a ver el SampleWebSite, que contiene ejemplos de uso de todos los Controles </li></ul><ul><li>En el Directorio “bin” del SampleWebSite, nos encontraremos el resultado de la compilación del Control Toolkit </li></ul><ul><ul><li>Es recomendable copiarlo a la carpeta “Binaries” para poder soportar múltiples versiones del Toolkit </li></ul></ul><ul><li>En el Directorio “bin” del “TemplateVSI” tenemos el instalador de VS2005 que nos instalara los nuevos tipos de proyecto. </li></ul>
    43. 45. <ul><li>Crearemos un nuevo proyecto, seleccionando la plantilla “Ajax Control Toolkit Web-Site” </li></ul><ul><li>Para facilitar el trabajo, añadiremos al Cuadro de Herramientas, una nueva Ficha en la que incluiremos todos los controles del ToolKit </li></ul><ul><li>Nos encontraremos que el Toolkit está compuesto por 2 tipos de controles </li></ul><ul><ul><li>Controles AJAX </li></ul></ul><ul><ul><ul><li>Totalmente Nuevos. Incluyen funcionalidades que no existían en controles ASP.NET </li></ul></ul></ul><ul><ul><li>AJAX Extenders </li></ul></ul><ul><ul><ul><li>Añaden funcionalidad del lado del cliente a controles ASP.NET ya existentes </li></ul></ul></ul>
    44. 46. <ul><li>Añadiremos a la página un Botón, un TextBox y una Label </li></ul><ul><li>En el evento Click del Botón, haremos el típico HelloWorld </li></ul><ul><li>Añadimos un ConfirmButtonExtender </li></ul><ul><ul><li>Lo asociamos con el botón a través de la propiedad TargetControlID </li></ul></ul><ul><li>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 </li></ul><ul><li>Probamos la aplicación </li></ul>
    45. 47. <ul><li>Accordion </li></ul><ul><li>Este control provee una lista de CollapsablePanels de forma que sólo puede haber un panel visible al mismo tiempo </li></ul><ul><li>La propiedad “AutoSize” nos define como ajustar el relleno al tamaño de los paneles </li></ul><ul><li>Las cabeceras deben contener un enlace vacío para poder hacer el cambio </li></ul><ajaxToolkit:Accordion ID=&quot;MyAccordion&quot; runat=&quot;Server&quot; SelectedIndex=&quot;0&quot; HeaderCssClass=&quot;accordionHeader&quot; ContentCssClass=&quot;accordionContent&quot; AutoSize=&quot;None&quot; FadeTransitions=&quot;true&quot; TransitionDuration=&quot;250&quot; FramesPerSecond=&quot;40&quot; RequireOpenedPane=&quot;false&quot; SuppressHeaderPostbacks=&quot;true&quot;> <Panes> <ajaxToolkit:AccordionPane HeaderCssClass=&quot;accordionHeader&quot; ContentCssClass=&quot;accordionContent&quot;> <Header> . . . </Header> <Content> . . . </Content> </ajaxToolkit:AccordionPane> . . . </Panes> <HeaderTemplate>...</HeaderTemplate> <ContentTemplate>...</ContentTemplate> </ajaxToolkit:Accordion>
    46. 48. <ul><li>AlwaysVisibleControlExtender </li></ul><ul><li>Este extender nos permite mantener de forma fija un control en una posición de la página, independientemente del scroll </li></ul><ajaxToolkit:AlwaysVisibleControlExtender ID=&quot;ace&quot; runat=&quot;server&quot; TargetControlID=&quot;timer&quot; VerticalSide=&quot;Top&quot; VerticalOffset=&quot;10&quot; HorizontalSide=&quot;Right&quot; HorizontalOffset=&quot;10&quot; ScrollEffectDuration=&quot;.1&quot;/>
    47. 49. <ul><li>AutoCompleteExtender </li></ul><ul><ul><li>Este Extender se asocia a cualquier TextBox </li></ul></ul><ul><ul><li>A medida que vas escribiendo te ofrece opciones para autocompletar el texto </li></ul></ul><ul><ul><li>Esto se hace realizando una llamada a un servicio web que devuelve la lista de palabras posibles </li></ul></ul><ajaxToolkit:AutoCompleteExtender runat=&quot;server&quot; ID=&quot;autoComplete1&quot; TargetControlID=&quot;myTextBox&quot; ServiceMethod=&quot;GetCompletionList&quot; ServicePath=&quot;AutoComplete.asmx&quot; MinimumPrefixLength=&quot;2&quot; CompletionInterval=&quot;1000&quot; EnableCaching=&quot;true&quot; CompletionSetCount=&quot;12&quot; /> [System.Web.Services.WebMethod] [System.Web.Script.Services.ScriptMethod] public string[] GetCompletionList(string prefixText, int count) Sintaxis del Método
    48. 50. <ul><li>CalendarExtender </li></ul><ul><li>Permite asociar un calendario a un cuadro de texto </li></ul><ajaxToolkit:Calendar runat=&quot;server&quot; TargetControlID=&quot;Date1&quot; CssClass=&quot;ClassName&quot; Format=&quot;MMMM d, yyyy&quot; PopupButtonID=&quot;Image1&quot; />
    49. 51. <ul><li>CascadingDropDown </li></ul><ul><li>Permite crear un conjunto de DropDown relacionados que se actualizan en cascada </li></ul><ajaxToolkit:CascadingDropDown ID=&quot;CDD1&quot; runat=&quot;server&quot; TargetControlID=&quot;DropDownList2&quot; Category=&quot;Model&quot; PromptText=&quot;Please select a model&quot; LoadingText=&quot;[Loading models...]&quot; ServicePath=&quot;CarsService.asmx&quot; ServiceMethod=&quot;GetDropDownContents&quot; ParentControlID=&quot;DropDownList1&quot; SelectedValue=&quot;SomeValue&quot; /> [System.Web.Services.WebMethod] [System.Web.Script.Services.ScriptMethod] public static CascadingDropDownNameValue[] GetDropDownContents( string knownCategoryValues, string category) { ... } Sintaxis del Método
    50. 52. 1. Crear una Página con CascadingDropDownLists que permita seleccionar Provincia - Localidad Podéis ayudaros del ejemplo del ToolKit y del Tutorial
    51. 53. <ul><li>CollapsablePanelExtender </li></ul><ul><li>Permite que un panel se oculte o se muestre dinámicamente sin generar un postback </li></ul><ajaxToolkit:CollapsiblePanelExtender ID=&quot;cpe&quot; runat=&quot;Server&quot; TargetControlID=&quot;Panel1&quot; CollapsedSize=&quot;0&quot; ExpandedSize=&quot;300&quot; Collapsed=&quot;True&quot; ExpandControlID=&quot;LinkButton1&quot; CollapseControlID=&quot;LinkButton1&quot; AutoCollapse=&quot;False&quot; AutoExpand=&quot;False&quot; ScrollContents=&quot;True&quot; TextLabelID=&quot;Label1&quot; CollapsedText=&quot;Show Details...&quot; ExpandedText=&quot;Hide Details&quot; ImageControlID=&quot;Image1&quot; ExpandedImage=&quot;~/images/collapse.jpg&quot; CollapsedImage=&quot;~/images/expand.jpg&quot; ExpandDirection=&quot;Height&quot; />
    52. 54. <ul><li>ConfirmButtonExtender </li></ul><ul><li>Permite añadir un botón de confirmación Javascript a cualquier botón ASP.NET </li></ul><ajaxToolkit:ConfirmButtonExtender ID=&quot;cbe&quot; runat=&quot;server&quot; TargetControlID=&quot;LinkButton1&quot; ConfirmText=&quot;Are you sure you want to click this?&quot; />
    53. 55. <ul><li>DragPanelExtender </li></ul><ul><li>Permite que un panel se pueda mover libremente por la pantalla </li></ul><ajaxToolkit:DragPanelExtender ID=&quot;DPE1&quot; runat=&quot;server&quot; TargetControlID=&quot;Panel3&quot; DragHandleID=&quot;Panel4&quot; />
    54. 56. <ul><li>DropDownExtender </li></ul><ul><li>Permite que a cualquier control (normalmente Labels) se le pueda asignar otro control, que aparecerá con un efecto de DropDown </li></ul><ul><li>Normalmente el segundo control será un Panel con HyperLinks o LinkButtons </li></ul><ajaxToolkit:DropDownExtender runat=&quot;server&quot; ID=&quot;DDE&quot; TargetControlID=&quot;TextLabel&quot; DropDownControlID=&quot;DropPanel&quot; />
    55. 57. <ul><li>DropShadowExtender </li></ul><ul><li>Permite añadir un efecto de rectángulo redondeado y de sombra a un Panel </li></ul><ajaxToolkit:DropShadowExtender ID=&quot;dse&quot; runat=&quot;server&quot; TargetControlID=&quot;Panel1&quot; Opacity=&quot;.8&quot; Rounded=&quot;true&quot; TrackPosition=&quot;true&quot; />
    56. 58. <ul><li>DynamicPopulateExtender </li></ul><ul><li>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) </li></ul><ajaxToolkit:DynamicPopulateExtender ID=&quot;dp&quot; runat=&quot;server&quot; TargetControlID=&quot;Panel1&quot; ClearContentsDuringUpdate=&quot;true&quot; PopulateTriggerControlID=&quot;Label1&quot; ServiceMethod=&quot;GetHtml&quot; /> [System.Web.Services.WebMethod] [System.Web.Script.Services.ScriptMethod] string DynamicPopulateMethod(string contextKey) { ... } Sintaxis del Método
    57. 59. <ul><li>FilteredTextBoxExtender </li></ul><ul><li>Permite filtrar el contenido de un textbox </li></ul><ul><li>Las opciones para FilterType son: Custom, Numbers, LowercaseLetters y UppercaseLetters </li></ul><ul><li>Si se usa Custom, hay que definir la propiedad ValidChars </li></ul><ajaxToolkit:FilteredTextBoxExtender ID=&quot;ftbe&quot; runat=&quot;server&quot; TargetControlID=&quot;TextBox3&quot; FilterType=&quot;Custom, Numbers&quot; ValidChars=&quot;+-=/*().&quot; />
    58. 60. <ul><li>HoverMenuExtender </li></ul><ul><li>Permite añadir a cualquier control un menú contextual, que normalmente está implementado en un panel </li></ul><ajaxToolkit:HoverMenuExtender ID=&quot;hme2&quot; runat=&quot;Server&quot; TargetControlID=&quot;Panel9&quot; PopupControlID=&quot;PopupMenu&quot; HoverCssClass=&quot;popupHover&quot; PopupPosition=&quot;Left&quot; OffsetX=&quot;0&quot; OffsetY=&quot;0&quot; PopDelay=&quot;50&quot; />
    59. 61. <ul><li>ListSearchExtender </li></ul><ul><li>Permite realizar búsquedas tecleando texto tanto en ListBox como en DropDownList </li></ul><ajaxToolkit:ListSearchExtender id=&quot;LSE&quot; runat=&quot;server&quot; TargetControlID=&quot;ListBox1&quot; PromptText=&quot;Type to search&quot; PromptCssClass=&quot;ListSearchExtenderPrompt&quot; PromptPosition=&quot;Top&quot; />
    60. 62. <ul><li>MaskedEdit </li></ul><ul><li>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 </li></ul><ul><li>El segundo se encarga de validar esa entrada según el formato elegido </li></ul><ul><li>En el ejemplo del Toolkit se especifican todas las opciones de formato </li></ul><ajaxToolkit:MaskedEditExtender TargetControlID=&quot;TextBox2&quot; Mask=&quot;99,999.99&quot; MessageValidatorTip=&quot;true&quot; OnFocusCssClass=&quot;MaskedEditFocus&quot; OnInvalidCssClass=&quot;MaskedEditError&quot; MaskType=&quot;Number&quot; InputDirection=&quot;RightToLeft&quot; AcceptNegative=&quot;Left&quot; DisplayMoney=&quot;Left&quot;/> <ajaxToolkit:MaskedEditValidator ControlExtender=&quot;MaskedEditExtender2&quot; ControlToValidate=&quot;TextBox2&quot; IsValidEmpty=&quot;False&quot; MaximumValue=&quot;12000&quot; EmptyValueMessage=&quot;Number is required&quot; InvalidValueMessage=&quot;Number is invalid&quot; MaximumValueMessage=&quot;Number > 12.000&quot; MinimumValueMessage=&quot;Number < -100&quot; MinimumValue=&quot;-100&quot; ValidationGroup=&quot;Demo1&quot; Display=&quot;Dynamic&quot; TooltipMessage=&quot;Input a number: -100 up to 12.000&quot;/>
    61. 63. <ul><li>ModalPopUpExtender </li></ul><ul><li>Permite establecer un cuadro de diálogo modal para realizar una pregunta al usuario </li></ul><ul><li>Mientras el cuadro está visible, bloquea el resto de la página, marcándola con un sombreado </li></ul><ul><li>La acción a realizar tras la selección se define en una función JavaScript </li></ul><ajaxToolkit:ModalPopupExtender ID=&quot;MPE&quot; runat=&quot;server&quot; TargetControlID=&quot;LinkButton1&quot; PopupControlID=&quot;Panel1&quot; BackgroundCssClass=&quot;modalBackground&quot; DropShadow=&quot;true&quot; OkControlID=&quot;OkButton&quot; OnOkScript=&quot;onOk()&quot; CancelControlID=&quot;CancelButton&quot; PopupDragHandleControlID=&quot;Panel3&quot; />
    62. 64. 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
    63. 65. <ul><li>MutiallyExclusiveCheckBoxExtender </li></ul><ul><li>Permite crear grupos de CheckBox, en los cuales sólo uno de ellos podrá estar seleccionado </li></ul><ajaxToolkit:MutuallyExclusiveCheckboxExtender runat=&quot;server&quot; ID=&quot;MustHaveGuestBedroomCheckBoxEx&quot; TargetControlID=&quot;MustHaveGuestBedroomCheckBox&quot; Key=&quot;GuestBedroomCheckBoxes&quot; />
    64. 66. <ul><li>NoBot </li></ul><ul><li>Permite controlar la ejecución de un postback en la página, para que este no pueda ser generado automáticamente por un ROBOT </li></ul><ajaxToolkit:NoBot ID=&quot;NoBot2&quot; runat=&quot;server&quot; OnGenerateChallengeAndResponse=&quot;CustomChallengeResponse&quot; ResponseMinimumDelaySeconds=&quot;2&quot; CutoffWindowSeconds=&quot;60&quot; CutoffMaximumInstances=&quot;5&quot; />
    65. 67. <ul><li>NumericUpDownExtender </li></ul><ul><li>Permite añadir a un TextBox la funcionalidad de incrementar/decrementar el valor que contiene. </li></ul><ul><li>El incremento/decremento puede ser automático, o obtener el siguiente valor via Servicio Web </li></ul><ajaxToolkit:NumericUpDownExtender ID=&quot;NUD1&quot; runat=&quot;server&quot; TargetControlID=&quot;TextBox1&quot; Width=&quot;100&quot; RefValues=&quot;January;February;March;April&quot; TargetButtonDownID=&quot;Button1&quot; TargetButtonUpID=&quot;Button2&quot; ServiceDownPath=&quot;WebService1.asmx&quot; ServiceDownMethod=&quot;PrevValue&quot; ServiceUpPath=&quot;WebService1.asmx&quot; ServiceUpMethod=&quot;NextValue&quot; Tag=&quot;1&quot; />
    66. 68. <ul><li>PagingBulletedListExtender </li></ul><ul><li>Permite añadir a una BulletedList funciones de paginación de forma automática </li></ul><ajaxToolkit:PagingBulletedListExtender ID=&quot;PBLE1&quot; runat=&quot;server&quot; TargetControlID=&quot;BulletedList1&quot; ClientSort=&quot;true&quot; IndexSize=&quot;1&quot; MaxItemPerPage=&quot;20&quot; Separator=&quot; - &quot; SelectIndexCssClass=&quot;selectIndex&quot; UnselectIndexCssClass=&quot;unSelectIndex&quot; />
    67. 69. <ul><li>PasswordStrengthExtender </li></ul><ul><li>Permite añadir a un TextBox que representa un password, una medida de lo bueno o malo que es el password </li></ul><ul><li>La calidad de ese password dependerá del número de caracteres, caracteres alfanuméricos, etc… Todo se configura en el Extender </li></ul><ajaxToolkit:PasswordStrength ID=&quot;PS&quot; runat=&quot;server&quot; TargetControlID=&quot;TextBox1&quot; DisplayPosition=&quot;RightSide&quot; StrengthIndicatorType=&quot;Text&quot; PreferredPasswordLength=&quot;10&quot; PrefixText=&quot;Strength:&quot; TextCssClass=&quot;TextIndicator_TextBox1&quot; MinimumNumericCharacters=&quot;0&quot; MinimumSymbolCharacters=&quot;0&quot; RequiresUpperAndLowerCaseCharacters=&quot;false&quot; TextStrengthDescriptions=&quot;Very Poor;Weak;Average;Strong;Excellent&quot; CalculationWeightings=&quot;50;15;15;20&quot; />
    68. 70. <ul><li>PopUpControlExtender </li></ul><ul><li>Puede asociarse a cualquier control y permite mostrar un PopUp con información adicional </li></ul><ajaxToolkit:PopupControlExtender ID=&quot;PopEx&quot; runat=&quot;server&quot; TargetControlID=&quot;DateTextBox&quot; PopupControlID=&quot;Panel1&quot; Position=&quot;Bottom&quot; />
    69. 71. <ul><li>Rating </li></ul><ul><li>Permite, de una forma intuitiva, proporcionar una valoración sobre algún elemento del sitio web </li></ul><ul><li>Tiene la posibilidad de establecer un evento cuando cambia la valoración del usuario </li></ul><ajaxToolkit:Rating ID=&quot;ThaiRating&quot; runat=&quot;server&quot; CurrentRating=&quot;2&quot; MaxRating=&quot;5&quot; StarCssClass=&quot;ratingStar&quot; WaitingStarCssClass=&quot;savedRatingStar&quot; FilledStarCssClass=&quot;filledRatingStar&quot; EmptyStarCssClass=&quot;emptyRatingStar&quot; OnChanged=&quot;ThaiRating_Changed&quot; />
    70. 72. <ul><li>ReorderList </li></ul><ul><li>Control de Tipo Lista que permite reordenar los elementos dinámicamente. </li></ul><ajaxToolkit:ReorderList ID=&quot;ReorderList1&quot; runat=&quot;server&quot; DataSourceID=&quot;ObjectDataSource1&quot; DragHandleAlignment=&quot;Left&quot; ItemInsertLocation=&quot;Beginning&quot; DataKeyField=&quot;ItemID&quot; SortOrderField=&quot;Priority&quot; AllowReorder=&quot;true&quot;> <ItemTemplate>...</ItemTemplate> <ReorderTemplate>...</ReorderTemplate> <DragHandleTemplate>...</DragHandleTemplate> <InsertItemTemplate>...</InsertItemTemplate> </ajaxToolkit:ReorderList>
    71. 73. <ul><li>ResizableControlExtender </li></ul><ul><li>Permite que los controles puedan variar de tamaño haciendo click en su esquina inferior derecha </li></ul><ul><li>Es posible añadir un evento de cliente al hacer el resize </li></ul><ajaxToolkit:ResizableControlExtender ID=&quot;RCE&quot; runat=&quot;server&quot; TargetControlID=&quot;PanelImage&quot; HandleCssClass=&quot;handleImage&quot; ResizableCssClass=&quot;resizingImage&quot; MinimumWidth=&quot;50&quot; MinimumHeight=&quot;20&quot; MaximumWidth=&quot;260&quot; MaximumHeight=&quot;130&quot; OnClientResize=&quot;OnClientResizeImage&quot; HandleOffsetX=&quot;3&quot; HandleOffsetY=&quot;3&quot; />
    72. 74. <ul><li>RoundedCornerExtender </li></ul><ul><li>Permite añadir un borde redondeado a un control </li></ul><ajaxToolkit:RoundedCornersExtender ID=&quot;rce&quot; runat=&quot;server&quot; TargetControlID=&quot;Panel1&quot; Radius=&quot;6&quot; Corners=&quot;All&quot; />
    73. 75. <ul><li>SliderExtender </li></ul><ul><li>Permite mostrar un control tipo Barra de Desplazamiento asociado a un TextBox </li></ul><ul><li>El resultado de la selección puede mostrarse en un TextBox o en una Label </li></ul><ajaxToolkit:SliderExtender ID=&quot;SliderExtender1&quot; runat=&quot;server&quot; TargetControlID=&quot;Slider1&quot; Minimum=&quot;-100&quot; Maximum=&quot;100&quot; BoundControlID=&quot;Slider1_BoundControl&quot; Steps=&quot;5&quot; /> <ajaxToolkit:SliderExtender ID=&quot;SliderExtender2&quot; runat=&quot;server&quot; TargetControlID=&quot;Slider2&quot; BoundControlID=&quot;Slider2_BoundControl&quot; Orientation=&quot;Vertical&quot; EnableHandleAnimation=&quot;true&quot; />
    74. 76. <ul><li>SlideShowExtender </li></ul><ul><li>Asociado a controles de Imagen, permite cambiar automáticamente de imagen tras un intervalo de tiempo </li></ul><ul><li>Permite también asociarle botones para parar la animación, ver la siguiente imagen y ver la anterior </li></ul><ajaxToolkit:SlideShowExtender ID=&quot;SlideShowExtender1&quot; runat=&quot;server&quot; TargetControlID=&quot;Image1&quot; SlideShowServiceMethod=&quot;GetSlides&quot; AutoPlay=&quot;true&quot; ImageDescriptionLabelID=&quot;imageLabel1&quot; NextButtonID=&quot;nextButton&quot; PlayButtonText=&quot;Play&quot; StopButtonText=&quot;Stop&quot; PreviousButtonID=&quot;prevButton&quot; PlayButtonID=&quot;playButton&quot; Loop=&quot;true&quot; /> [System.Web.Services.WebMethod] [System.Web.Script.Services.ScriptMethod] public AjaxControlToolkit.Slide[] GetSlides() { ... } Sintaxis del Método
    75. 77. <ul><li>TabContainer </li></ul><ul><li>Control que permite mostrar el contenido en formato de ficha. </li></ul><ul><li>Compuesto por un conjunto de TabPanel </li></ul><ajaxToolkit:TabContainer runat=&quot;server&quot; OnClientActiveTabChanged=&quot;ClientFunction&quot; Height=&quot;150px&quot;> <ajaxToolkit:TabPanel runat=&quot;server&quot; HeaderText=&quot;Signature and Bio&quot; <ContentTemplate> ... </ContentTemplate> /> </ajaxToolkit:TabContainer>
    76. 78. <ul><li>TextBoxWatermarkExtender </li></ul><ul><li>Añade a los TextBox la funcionalidad de “marca de agua” </li></ul><ul><li>Permite mostrar una información en el TextBox que desaparece cuando el usuario escribe texto. </li></ul><ul><li>Hay que configurar una CSS para definir el estilo de la marca de agua </li></ul><ajaxToolkit:TextBoxWatermarkExtender ID=&quot;TBWE2&quot; runat=&quot;server&quot; TargetControlID=&quot;TextBox1&quot; WatermarkText=&quot;Type First Name Here&quot; WatermarkCssClass=&quot;watermarked&quot; />
    77. 79. <ul><li>ToggleButtonExtender </li></ul><ul><li>Puede aplicarse a controles CheckBox y sustituye el “Check” por una imagen </li></ul><ajaxToolkit:ToggleButtonExtender ID=&quot;ToggleEx&quot; runat=&quot;server&quot; TargetControlID=&quot;CheckBox1&quot; ImageWidth=&quot;19&quot; ImageHeight=&quot;19&quot; CheckedImageAlternateText=&quot;Check&quot; UncheckedImageAlternateText=&quot;UnCheck&quot; UncheckedImageUrl=&quot;ToggleButton_Unchecked.gif&quot; CheckedImageUrl=&quot;ToggleButton_Checked.gif&quot; />
    78. 80. <ul><li>ValidationCalloutExtender </li></ul><ul><li>Puede aplicarse a cualquier tipo de validador estándar. </li></ul><ul><li>Añade un comportamiento de PopUp al validador, mostrando el texto del error </li></ul><ajaxToolkit:ValidatorCalloutExtender runat=&quot;Server&quot; ID=&quot;PNReqE&quot; TargetControlID=&quot;PNReq&quot; Width=&quot;350px&quot; HighlightCssClass=&quot;highlight&quot; WarningIconImageUrl=&quot;warning.gif&quot; CloseImageUrl=&quot;close.gif&quot; />
    79. 81. 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
    80. 82. <ul><li>El AJAX Control Toolkit cuenta con 2 controles especialmente indicados para realizar efectos de animación: Animation y UpdatePanelAnimationExtender </li></ul><ul><li>Estos controles permiten transformar la presentación desde un estado a otro: </li></ul><ul><ul><li>De un color a otro </li></ul></ul><ul><ul><li>De una posición a otra </li></ul></ul><ul><ul><li>De un tamaño a otro </li></ul></ul><ul><ul><li>De una visibilidad a otra </li></ul></ul><ul><li>El control de la animación lo podemos basar en eventos lanzados desde controles HTML o escribiendo código Javascript personalizado </li></ul>
    81. 83. <ul><li>Vamos a crear un proyecto nuevo y en este proyecto vamos a añadir algo de HTML (porque los eventos se lanzan desde HTML) </li></ul><ul><li>Tenemos este ejemplo hecho por lo que vamos a copiar las imágenes y el stylesheet al nuevo proyecto </li></ul><ul><li>Añadimos un Botón ASP.NET </li></ul><ul><li>En el evento OnClientClick le ponemos “return false;” </li></ul><ul><li>Añadimos un DIV y le llamamos “flyout”. Le ponemos “class=wireFrame” </li></ul><ul><li>Añadimos, dentro del DIV anterior, otro DIV llamado “info”. El estilo lo podemos copiándolo del ejemplo </li></ul>
    82. 84. <ul><li>Dentro del DIV “info” metemos un texto largo (lo podemos copiar también) </li></ul><ul><li>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 </li></ul><ul><li>Dentro de este DIV, añadiremos un LinkButton que nos permita capturar el evento para el cierre y lo llamamos “btnClose” </li></ul>
    83. 85. <ul><li>En el evento OnClientClick del LinkButton ponemos “return false;” </li></ul><ul><li>Cómo texto ponemos una “X” para simular el cierre y ponemos ToolTip = “Cerrar” </li></ul><ul><li>Una vez más, el estilo lo copiamos del ejemplo </li></ul><ul><li>Ahora necesitamos un poco de código Javascript para permitir colocar una capa encima de otra </li></ul><ul><ul><li>Copiamos la función Cover del ejemplo </li></ul></ul>
    84. 86. <ul><li>Nos queda montar las animaciones. </li></ul><ul><ul><li>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 </li></ul></ul><ul><li>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 </li></ul>
    85. 87. <ul><li>Cada AnimationExtender contendrá una secuencia de acciones en formato XML que nos definirá el comportamiento de la animación. </li></ul><ul><li>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 </li></ul><ul><li>En cada AnimationExtender debemos incluir las etiquetas: </li></ul><ul><ul><li><Animation> </li></ul></ul><ul><ul><li><Evento> </li></ul></ul><ul><ul><li><Sequence> </li></ul></ul><ul><ul><li>Lista Secuencial de Acciones </li></ul></ul><ul><ul><li><Parallel … > </li></ul></ul><ul><ul><li>Lista Paralela de Acciones </li></ul></ul><ul><ul><li></Parallel> </li></ul></ul><ul><ul><li></Sequence> </li></ul></ul><ul><ul><li></Evento> </li></ul></ul><ul><ul><li></Animation> </li></ul></ul>
    86. 88. <ul><li>Tipos de Evento </li></ul><ul><ul><li>AnimationExtender </li></ul></ul><ul><ul><ul><li>OnClick </li></ul></ul></ul><ul><ul><ul><li>OnLoad </li></ul></ul></ul><ul><ul><ul><li>OnMouseOut </li></ul></ul></ul><ul><ul><ul><li>OnMouseOver </li></ul></ul></ul><ul><ul><ul><li>OnHoverOver </li></ul></ul></ul><ul><ul><ul><li>OnHoverOut </li></ul></ul></ul><ul><ul><li>UpdatePanelAnimationExtender </li></ul></ul><ul><ul><ul><li>OnUpdating </li></ul></ul></ul><ul><ul><ul><li>OnUpdate </li></ul></ul></ul>
    87. 89. <ul><li>Tipos de Acciones (principales) </li></ul><ul><ul><li><EnableAction>: Permite Habilitar o Deshabilitar el Control </li></ul></ul><ul><ul><li><ScriptAction>: Permite ejecutar una función Javascript </li></ul></ul><ul><ul><li><StyleAction>: Permite cambiar atributos de estilo de un elemento </li></ul></ul><ul><ul><li><Move>: Mueve un elemento </li></ul></ul><ul><ul><li><Resize>: Cambia de tamaño un elemento </li></ul></ul><ul><ul><li><Color>: Cambia el color de un elemento </li></ul></ul><ul><ul><li><FadeIn>: Efecto de Aparicíon </li></ul></ul><ul><ul><li><FadeOut>: Efecto de Desaparicion </li></ul></ul><ul><ul><li><HideAction>: Oculta un Elemento </li></ul></ul>
    88. 90. <ul><li>Sólo nos queda probarlo todo a ver que pasa </li></ul><ul><li>Tras funcionar perfectamente, podemos hacer un ejemplo algo más simple: </li></ul><ul><ul><li>Crear una pagina en la que se solicite el ancho y alto al que se quiere mostrar una imagen. </li></ul></ul><ul><ul><li>Al pulsar un botón, la imagen aparecerá con el tamaño deseado, y si es posible, haciendo un efecto de Fade </li></ul></ul><ul><ul><li>Mientras la imagen se está mostrando, deshabilitamos el botón de “Ver” y habilitamos un botón de “Ocultar” </li></ul></ul><ul><ul><li>Al pulsar “Ocultar” la imagen desaparece con un FadeOut y podemos volver a mostrarla con otro tamaño distinto </li></ul></ul>
    89. 91. <ul><li>Partiendo de la tienda virtual XBikes de ejemplo, y siguiendo las instrucciones del manual del HOL, vamos a Ajaxificar este sitio web </li></ul><ul><li>NOTA: Para realizar la configuración de Profile, es necesario utilizar las AJAX Futures CTP </li></ul><ul><ul><li>Dejar este punto para el final, y si da tiempo, se puede hacer de 2 formas </li></ul></ul><ul><ul><ul><li>Utilizando las AJAX Futures CPT </li></ul></ul></ul><ul><ul><ul><li>Accediendo a la API de Profile en la Client API </li></ul></ul></ul>
    90. 92. www.programadorautonomo.net

    ×