A las pocas semanas de haber iniciado mi vida laboral, durante el desarrollo de RGen, me encontré frente a un problema que sería recurrente en la mayoría de desarrollos de aplicaciones web a partir de ese momento. El problema de las ventanas PopUp Modales en el Web.
El principal problema es que no hay una manera uniforme de abrir ventanas modales que se comporten igual a través de los diferentes browsers, para el mundo del Internet Explorer existe la posibilidad de abrir ventanas modales haciendo uso del ShowModalDialog, pero este método no funciona en los demás Navegadores. La primera ventana PopUp Modal realmente útil y Cross-Browser que hallé fue la de Submodal, muy buena, pero carecía de las funciones básicas de una ventana, como poder moverla haciendo uso de la barra y otras cosas. Luego escribí una ventana PopUp Modal (xPopUp) basada en las librerías del sitio Cross-Browser y su famosa librería X, (de allí la "x" en xPopUp). Nuevamente era útil pero tenía muchas desventajas, todavía requería que el desarrollador escribiese las líneas de código javascript necesarias para levantar la ventana, lo cual me parecía una sería desventaja (xPopUp basada en Libreria X). Al tiempo que empecé a usar YUI, descubrí que sus Containers y Panels ofrecían un mejor desempeño (y un código más limpio), por lo cual me decidí a escribir una ventana PopUp haciendo uso del YUI, la llamé igual xPopUp, y lo que es mejor la convertí en un Web User Control de .Net, (sé que podría haberlo hecho un Web Control, pero me pareció suficiente para el contexto del proyecto en el que trabajaba que fuera un User Control).
El control funcionó bien, y permite arrastrar un componente al diseñador y setear sus propiedades para levantar la ventana PopUp requerida, la cual puede o no ser modal, además de poder pasarle eventos que se disparan antes y después de mostrar la ventana y poder definir su tamaño, además de poder especificar el elemento que disparará el lanzamiento de la ventana PopUp, por cierto todavía es posible levantar la ventana PopUp directamente por código Javascript.
He preparado un archivo con todo lo necesario para poder levantar un sitio web de ejemplo que contiene al xPopUp Control el archivo lo pueden descargar de aquí.
Aquí se ve el control funcionando en el sitio de prueba tal como se ve en Internet Explorer y en Mozilla Firefox.
| Mozilla Firefox | Internet Explorer |
 |  |
COMO USARLO
Al Arrastrar el componente al diseñador se verá un tag similar a este:
<uc1:ucPopUpControl
ID="UcPopUpControl4"
OnShowingScript="f_show"
OnHidingScript="f_hide"
UrlToLoad="ThePopUp.aspx?Id=32"
IsModal="false"
WindowTitle="Con Eventos!!!"
FixedToCenter="false"
TriggerId="ct00_Button1"
runat="server"
/>
- ID: El ucPopUpControl Id
- OnShowingScript: La función Javascript que se ejecuta antes que se muestre la ventana popup.
- OnHidingScript: La función Javascript que se ejecuta después que la ventana es cerrada.
- UrlToLoad: La pagina Aspx o cualquier otra URL a cargar
- IsModal: Flag para decirle al control que muestre la ventana en forma modal
- WindowTitle: El título que tendrá la barra de la ventana popup
- FixedToCenter: Si la vetana debe reacomodarse al centro del área cliente del Browser.
- TriggerId: El ClientID (si lo sé esto debe poder mejorarse!!!!! debería ser el Id del control y el control internamente debería poder ubicar el ClientID del control)
Nota Aparte:
La verdad todavía no sé si es buena idea mezclar ambas librerías, me refiero a las del YUI (developer.yahoo.com/yui) y las del ASP.NET Ajax, básicamente porque hay muchos métodos que se definen 2 veces, como el $addHandler (creo que se llaman así) y el addEvent del YUI, ambos por ejemplo hacen lo mismo y podrían ser utilizados indistintamente. En fin es un tema que tendré que revisar en algún momento.
No hay comentarios:
Publicar un comentario