xPopUp Control Usando el YUI y compatible con ASP.NET Ajax

Descargar el ejemplo

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.

IE7 / IE8 a compliant browser???

bueno este post será solo temporal, hasta q lo pueda arreglar, es más que nada un recordatorio, hoy encontré que Dean Edwards había escrito una libreria javacript que hace que el IE se comporte como un "Compliant Browser", el enlace lo dejo aquí IE7 Compliant Patch for Microsoft Browsers

Saludos

Lista de Herramientas, Librerías y/o Utilitarios Básicos

Cuando empecé a trabajar con el Visual Studio me di cuenta que el IDE tenía muchas posibilidades y que además brindaba mucha ayuda para la escritura de código, pero pronto me di cuenta que las tareas que me encontraba realizando eran tediosamente repetitivas, tareas como escribir stored procedures CRUD para cada una de las tablas de los sistemas que estabamos desarrollando, (Sí inicialmente no hacíamos mayor análisis de clases y esas cosas, basamos nuestro trabajo en mapear directamente las tablas de la base de datos a TableAdapters, lo cual no es quizá lo recomendado, pero la mayoría de los ejemplos hayados en Internet "enseñaban eso"). Tareas como estas eran un dolor de cabeza y personalmente eran muy aburridas, no aguanté mucho antes de darme cuenta que tenía que haber una mejor manera de hacer esas cosas.

Así es como empecé a investigar y empecé a preguntar a otros amigos sobre la existencia de plugins o utilitarios que valiese la pena revisar. Resultado de estas investigaciones, empecé a construir esta lista.

1. Plugins para SQL Server 2000 - 2005. Las herramientas de Red Gate son simplemente indispensables para poder desarrollar querys, con todo lo bueno que pueda ser el Sql Server Manager Studio o el Query Analizer, poder utilizar el autocompletado al momento de realizar un query y además de obtener Intellisense durante la escritura de un query se ha vuelto para mi algo simplemente indispensable. Y tener un código un query bien "formateado" también ayuda mucho a la lectura de los queries. En este sentido para el autocompletado voy a recomendar: el SQL Prompt y para el formateado el SQL Refactor. (en la Página de Red Gate se pueden obtener versiones de prueba, de estas herramientas así como de muchas otras que la misma empresa ofrece, como el SQL Compare y el SQL Data Compare, que en verdad merecerían un post completo cada una de ellas y que también son tan buenas como las dos primeras y muy útiles, pero no son necesarias tan frecuentemente como las otras dos).
2. Para Trabajar con otras bases de datos, como MySQL. En un proyecto de mi actual empresa tuve que utilizar por primera vez Nhibernate (No volvería a dejar de usarlo :P) y además tuve que utilizar MySQL, extrañaba horrores el SQL Query Analyzer que tenía al usar el SQL Server, por eso me puse a buscar una herrmienta similar y gracias a Dios (y a San Google) encontré al SQL Manager for MySQL poderosa herramienta que incluye todo lo que puede tener el SQL Server Managment Studio (bueno quizá no todo, pero al menos todo lo útil) e incluso tiene el autocompletado muy bueno similar al que brinda el SQL Prompt para el SQL Server Managment Studio.
3. Manejar correctamente el CSS, y verificar que tus sitios web se vean bien en los distintos navegadores. Bueno quizá es un poco exagerado, todavía mucha gente utiliza las tablas para maquetar los sitios web, aún cuando esto es bastante discutible, todo hace indicar que el CSS es el camino correcto a la hora de maquetar un sitio web. Los Layouts basados en puro CSS no son tan difíciles de hallar y hay buenos recursos ya (www.csszengarden.com por ejemplo), las herramientas del YAHOO UI para CSS, los archivos css reset, fonts, base y grids que vienen incluidos con el YUI alivian muchísimo a la hora de desarrollar un sitio web que se comporte bien en varios navegadores. Para el Visual Studio 2005 es muy necesario el CSS Properties Window (que ya viene incluido en la Version 2008 del IDE, o al menos una herramienta muy similar). Y Pues bueno aunque no es completamente necesario para un desarrollador conocer de diseño web, el Dreamweaver es quizá la mejor herramienta para realizar diseño web en el mercado.
4. NHibernate. Al empezar con NHibernate me di cuenta muy rápido que escribir los mapeos y las clases además de las tablas de la base datos era una tarea simplemente titánica (que exagerado :P) y muy aburrida, lo cierto es que me pareció muy tedioso hacerlo a mano. Sabía de la existencia de generadores de mapeo de las clases para Hibernate, pero no conocía como generar las clases en .Net, quizá utilizando MyGeneration (si es posible pero me pareció muy complicado). Nuevamente me negaba a creer que nadie hubiese escrito un buen plugin para hacerlo desde el Visual Studio, y no estaba equivocado, encontré en Google el Nhibernate Addin para el Visual Studio 2005. Lo recomiendo infiere las relaciones y hace los mapeos bastante bien. Pero es importante notar que hace un mapeo de las tablas a clases, cada tabla a una clase, lo cual desde un punto de vista purista no es lo mejor ni lo más recomendado pero que ayuda a hacer las cosas más rápido ayuda.

To be continued...

Ideas de un proyecto para un Framework Web

Actualmente me encuentro desarrollando proyectos en .Net, como saben (y si no lo saben ahora lo sabrán) soy Ingeniero Informático (está bien, todavía soy Bachiller, porque me estoy demorando en sacar el título por la bendita tesis que no logro terminar).

Al empezar a desarrollar tuve muchos problemas, pues empecé a trabajar y no había mucho de donde aprender, las primeras experiencias con el Framework de .Net fueron sinceramente traumáticas, a pesar de haber empezado mi vida laboral usando .Net 2.0 y el IDE del Visual Studio 2005, (el cual durante un buen tiempo lo he considerado el mejor IDE del mercado, solo posiblemente opacado por el Visual Studio 2008 el cual todavía no es tan difundido como el del 2005); El no conocer patrones y no tener muchas ideas de buenas prácticas terminaron por jugarnos sucio al inicio. Después de un año de trabajo sin embargo habíamos aprendido ya usar muy bien los componentes y herramientas que el Visual Studio 2005 provee...
Aprendimos a usar los TableAdapters, aprendimos a usar los Componentes orientados a Datos del .Net 2.0 como los FormViews, GridViews, Object Data Sources y otros...

Pero como no tuvimos mayor orientación nuestros primeros proyectos Web fueron algo desordenados. Después de un año volví a ver el código que hicimos para nuestro primero proyecto Web y me di cuenta que el tiempo no pasa en vano. Siento que he aprendido mucho desde aquel primer proyecto web que hice. Lo único que sin embargo me hace sentir satisfecho de ese sistema es que aún funciona!!!!, y sigue ayudando a la empresa para la que fue desarrollado.

Al tiempo pasé a otra empresa (en la que actualemente estoy) y me sugirieron (obligaron) a que aprendiera a usar NHibernate, me pusieron a cargo de un proyecto Web interno de la empresa el cual desarrollé con algo más de calma y allí pude plasmar las primeras ideas de lo que podría ser un framework util para desarrollar aplicaciones web con algo más de rapidez, teniendo un código más limpio y tratando (digo tratando porque nunca uno puede ser del todo purista, por practicidad) de seguir ciertos patrones y estándares en el desarrollo web.

Todo Buen Framework debería poder brindarle a un desarrollador lo siguiente al menos:

1. Una buena arquitectura de desarrollo. Una separación por capas es más que indispensable, teniendo una capa de acceso a datos, una capa de lógica de negocios y una capa de presentación, además de proveer los utilitarios básicos, para las tareas más comunes. El .Net 2.0 usa el Provider Pattern en la mayoría de sus Módulos y/o Servicios que interactuan con el acceso a datos y otras APIs, tenemos por ejemplo los servicios de Membership, Role, Profile, Session State y algunos más. Basándose en esa arquitectura Davide Icardi, (www.devage.com) ha desarrollado un buen cms framework, Eucalypto, el cual es una librería de servidor que ayuda a escribir content management web sites en ASP.NET, además es OPEN SOURCE, y brinda ya un buen grupo de características muy útiles cuando se inicia el desarrollo de un sitio web. El código implementado por Davide es muy bueno y sobre el se basa mi actual trabajo, he modificado parte de su código para que se ajuste a las necesidades particulares de mi framework.
2. Un buen framework básico para desarrollar código en Javascript. Aún cuando la tendencia actual es a escribir una menor cantidad de código Javascript en los sitios web, es siempre indispensable tener la posibilidad de hacerlo, y hacerlo bien. En este caso empecé a usar inicialmente la libreria X (www.cross-browser.com) por su simplicidad. Posteriormente basé mis librerías propias en el YUI (developer.yahoo.com/yui). Todavía mis librerías básicas se basan casi al 98% en el YUI, un 2% se basan en el ASP.Net Ajax client libraries. La verdad todavía no he podido revisar si mezclar ambas librerías impacta en el performance del sitio web, pues ambas básicamente traen lo mismos métodos y herramientas. Más adelante desarrollaré un poco más en extenso el tema de las librerias Javascript y todo lo que he escrito basandome en las librerias YUI.
3. Buenas plantillas para el desarrollo de los layouts del sitio web basándose en al menos un 90% en puro CSS, dejando un 10% para el tema de los formularios (donde es más que indispensable por practicidad usar tablas para formatear los formularios) Buenos lugares para empezar en el tema del CSS son www.csszengarden.com, www.brunildo.org/test/ y blog.html.it/layoutgala/ la verdad este último enlace resultó ser muy bueno, e ingenioso, sobre todo porque demuestra la versatilidad del CSS.
4. Ayudar a Escribir la menor cantidad de código posible. Esto no es necesariamente cierto siempre, en realidad debería poder acelerar la escritura de código al menos en un 80% de los casos, (haciendo alusión tácitamente a la regla del 80-20).
5. Ser extensible. O al menos no limitar al desarrollador ni forzarlo a trabajar de una manera ajena a la que el desarrollador suele estar acostumbrado, (nuevamente al menos en un 80% de las veces). Las convenciones son siempre buenas, y en el caso del presente framework se han hecho un buen conjunto de convenciones. por ejemplo: Todas las tablas contienen campos de auditoria, los nombres de las tablas son siempre en singular y con la primera letra en mayúsculas, se usa un prefijo para nombrar a las tablas, y algunas más que detallaré a mayor profundidad conforme empiece a publicar posts.

Por lo pronto este Post me servirá de suerte de "roadmap", para poder empezar el desarrollo de mi Tema de Tesis para optar por el grado de Ingeniero y poder decir al fin... "Soy Ingeniero" aunque el título solo me sirva en Perú. Igual será una muy buena experiencia.

Mi tema de tesis... ha empezado