Introducción
Las ventanas Pop up siempre han sido un problema en el desarrollo de aplicaciones web, las que proporciona el browser son poco prácticas al ser mini ventanas que se abren de manera separada a la aplicación, en un browser independiente y que no comparten información de manera natural. (Solamente mediante javascript).
Además recientemente éstas han sido utilizadas como una manera de spam publicitario al activarse al momento de ingresar a la página web, lo que hace que la navegación sea realmente molesta. Dada esta situación los browser decidieron desarrollar sistemas que bloqueen los Pop ups de toda aplicación sin importar si estos eran relevantes o no.
Es por esto que multiples frameworks de javascript como yui, ext, richfaces (aunque no es de javascript tambien provee Pop up windows) han desarrollado Pop up windows basados en un div flotante y que son bastante útiles.
¿Qué hace que un Pop up window sea realmente útil?
Un Pop up window utilizado dentro de una aplicación es útil en la medida en que pueda cumplir los mismos requerimientos que tendría un Dialog hecho en Java o C#.
Por lo tanto las características que deben tener son:
- Deben poder ser invocados desde cualquier lugar (en este caso desde cualquier página web).
- Ser autocontenibles (que no se necesite registrar información extra para que funcionen).
- En caso que necesiten retornar parámetros, estos debe poder ser obtenidos en la página que lo llamo.
- Una extensión del punto anterior seria que los Pop up window puedan intercambiar información entre ellos.
- Capacidad de recibir parámetros.
Nuestra solución
Hemos planteado nuestra solución de la siguiente manera:
Para cumplir con el primer y tercer objetivo tenemos un objeto javascript que es omnipresente a todas las páginas y se encarga de: crear, mostrar y cerrar los Pop up y además maneja los parámetros de retorno.
Para cumplir con el segundo objetivo el contenido del modal panel esta en otra página web y ésta es mostrada a través de un iframe dentro del modal.
Para cumplir con el quinto objetivo simplemente se los pasamos como parámetros de url a la página dentro del iframe.
Un ejemplo de cómo instanciamos un objeto:
function editarObjeto(id) { ManejadorVentanas.mostrar({ id: 'idPanel', titulo: 'Editar objeto', src: '/contenido/editarObjeto.xhtml?id=' + id, ancho: 500, alto: 350, callback: refrescarLista }); }
Como puede verse la invocación es muy sencilla y solo se requiere tener la página en donde se desarrollará el contenido.
La función de callback permite obtener los parámetros de retorno, de esta manera:
function refrescarLista () { var rpta = ManejadorVentanas.obtenerParametros('idPanel')['rptaModal']; if (rpta) { var valorRetornado = ManejadorVentanas.obtenerParametros('idPanel')['valor1']; // hacer algo mas. } }
A manera de conclusión
No importa con que librería de javascript estén trabajando (YUI, JQuery, ExtJS, Dojo, etc) estos principios básicos deben poderse cumplir para poder sacar el máximo provecho de las Pop up windows dentro de una aplicación web.
No related posts.
Autor:
Giancarlo Corzo
Socio y Gerente de desarrollo de nuevos productos en Antartec. Con experiencia en desarrollo de interfaces, para Web, Móvil (en especial para iphone). Me desempeño además como Profesor en la universidad PUCP asesorando a los futuros tesistas.
