Creación de controles de usuario web en ASP.NET
Los desarrolladores siempre buscan formas de escribir software que se pueda reutilizar dentro y entre proyectos. Por supuesto, los desarrolladores web no son una excepción, como lo demuestra el uso omnipresente de objetos COM y de inclusiones del lado del servidor por parte de los desarrolladores de ASP.
Con el lanzamiento de .NET Framework y Visual Studio .NET, los desarrolladores web que usan ASP.NET tienen controles de usuario web que hacen que la reutilización sea simple, eficiente y orientada a objetos. En este artículo, le presentaré los conceptos básicos de los controles de usuario web de ASP.NET y le mostraré cómo mejoran la reutilización, reducen el mantenimiento y mejoran el rendimiento.
para controles de usuario web
Por lo general, los desarrolladores web crean un diseño para implementarlo en todas las páginas de su aplicación web. Durante este proceso, es fácil identificar el área de espacio de pantalla utilizada en cada página web. Dividir estas regiones en contenedores crea un escenario de reutilización simple. En el mundo ASP, estas son las áreas principales en las que los desarrolladores traducen a archivos de inclusión del lado del servidor, a los que luego se hace referencia en cada página. Ejemplos de estos incluyen encabezados, pies de página, menús y navegación. En ASP.NET, estos tipos de escenarios se pueden convertir fácilmente en controles de usuario web, que luego se pueden arrastrar y soltar en otras páginas del sitio.
notas
Los controles de usuario web no deben confundirse con los controles de servidor ASP.NET. El primero permite a los desarrolladores utilizar las funciones de tiempo de diseño de VS.NET para crear secciones de páginas reutilizables dentro de una única aplicación web. Este último debe crearse mediante programación, puede compilarse y reutilizarse entre aplicaciones y, por lo general, es compatible con varios navegadores. Microsoft envía una serie de controles de servidor ASP.NET con VS.NET.
Pero los controles de usuario web pueden representar algo más que HTML estático en encabezados y pies de página. Pueden encapsular completamente controles compuestos (controles de servidor HTML y ASP.NET como DataGrid y Calendar) y exponer métodos y propiedades públicos. Como resultado, pueden crear widgets de interfaz de usuario reutilizables y orientados a objetos del mismo modo que los controles ActiveX proporcionan elementos de interfaz de usuario reutilizables en las aplicaciones de escritorio. Para ayudar con este proceso, Visual Studio .NET le permite diseñar controles de usuario web gráficamente arrastrando y soltando elementos de la caja de herramientas en la superficie del diseñador. Por lo tanto, los controles de usuario web a menudo se utilizan para encapsular el área de edición de datos de una página, las funciones de búsqueda e inicio de sesión y, en muchos casos, el área de contenido principal de un sitio web.
Los controles de usuario web requieren más flexibilidad porque se pueden colocar mediante programación en una página en tiempo de diseño o en tiempo de ejecución, de modo que los desarrolladores puedan decidir qué controles cargar en función de la entrada del usuario, la autenticación u otra información dinámica.
Además de la reutilización y la flexibilidad, los controles de usuario web pueden aprovechar el motor de almacenamiento en caché de ASP.NET para implementar el llamado «almacenamiento en caché de fragmentos». Esencialmente, el almacenamiento en caché de fragmentos permite a los desarrolladores web controlar el almacenamiento en caché HTML de controles individuales en una página, incluida la configuración de duraciones y el almacenamiento en caché de varias versiones de controles en función de cadenas de consulta, propiedades de control, tipo de navegador e incluso cadenas personalizadas. La capacidad de almacenar en caché solo una parte de una página es muy poderosa porque parte de la página generalmente accede a datos relativamente estáticos almacenados en una base de datos relacional o mediante servicios web XML, mientras que otras partes de la misma página manipulan datos dinámicos. Para estas partes estáticas, la creación de controles de usuario web y la configuración de opciones de almacenamiento en caché pueden reducir en gran medida la cantidad de viajes de ida y vuelta a la base de datos y, por lo tanto, mejorar el rendimiento. En la mayoría de los casos, el uso juicioso del almacenamiento en caché de ASP.NET es la mayor mejora de rendimiento que se puede lograr.
Por todas estas razones, muchos desarrolladores optan por crear aplicaciones ASP.NET en torno a los controles de usuario web mediante la creación de su propio marco de trabajo o clases de plantilla de página que simplemente cargan y muestran los diversos controles de usuario web que componen todo el sitio.
Anatomía de un control de usuario web
En ASP.NET, los controles de usuario web generalmente se crean agregando un nuevo elemento de control de usuario web a un proyecto en VS.NET. Al hacerlo, se agregarán archivos con la extensión ASCX al sitio que contiene HTML, así como archivos de código subyacente para el idioma de la aplicación. Los archivos ASCX están vacíos de forma predeterminada y se pueden editar con la caja de herramientas o agregando HTML directamente en el panel HTML del diseñador. De esta forma, un control de usuario web no es diferente de un formulario web estándar implementado como una página ASPX.
Simplemente arrastre y suelte el archivo ASCX desde el Explorador de soluciones en la página para colocar el Control de usuario web en la página, creando un elemento que hace referencia a la página. También se pueden cargar dinámicamente en una página (u otro control de usuario web) usando el método LoadControl (VB) como este:
Dim c como control
c = Me.LoadControl(«~\uc\menu.ascx»)
Me.myForm.Controls.Add(c)
En este caso, el control se carga primero y luego se agrega a la colección Controls del formulario HTML en la página actual, al que se hace referencia como myForm.
notas
El ~ en el fragmento de código anterior es una sintaxis abreviada para la raíz de una aplicación web, que se puede usar en el código del lado del servidor ASP.NET.
Al igual que las páginas .ASPX, los archivos de código subyacente creados por VS.NET contienen una definición de clase .NET que permite a los desarrolladores encapsular la funcionalidad de un control con métodos, campos, propiedades y eventos personalizados. De hecho, las clases en el archivo de código subyacente heredan de la misma jerarquía de clases que un archivo de clase ASPX normal, como se muestra en la Figura A.
| Figura A |
 |
| Jerarquía de clases ASP.NET |
El lado izquierdo de la figura es la estructura de clase de control de usuario web y el lado derecho es la estructura de formulario web. Tenga en cuenta que las clases UserControl y Page heredan en última instancia de la clase Control, por lo que los desarrolladores pueden usar el mismo modelo de programación al implementar ambas, por ejemplo, al crear controladores para los eventos Load, Init, PreRender, Render y Unload.
Por supuesto, detrás de escena, ASP.NET debe permitir el manejo de controles de usuario web. Cuando el tiempo de ejecución de ASP.NET encuentra una página con una extensión ASPX, la maneja un controlador HTTP (la clase PageHandlerFactory). Al procesar una página, si se encuentra un control de usuario web, se crea dinámicamente una instancia de la clase de control. (En realidad, se crea una clase derivada porque la clase del control está marcada como abstracta en el archivo de código subyacente). Luego, la instancia se carga y procesa, y el HTML que genera se agrega a la secuencia HTML para enviarlo al navegador.
Sitio web controlado por el usuario
Para demostrar cómo los Controles de usuario web pueden maximizar la reutilización, la flexibilidad y el rendimiento de las aplicaciones web, lo guiaré a través de la arquitectura de un sitio de muestra que hace un uso extensivo de los Controles de usuario web.
diseño
Primero, el desarrollador web crea el diseño del sitio. Esto generalmente se hace usando una tabla HTML, como se muestra en el Listado A. Tenga en cuenta que el diseño del sitio consta de una tabla con celdas identificadas como Banner, Izquierda, Centro y Derecha.Un punto importante a tener en cuenta es el elemento de celda de tabla Marcado con el atributo runat=server. Esta propiedad permite la manipulación programática de celdas en el archivo de código subyacente mediante el objeto HtmlTableCell. Este diseño base será la plantilla para cada página del sitio. Aunque las limitaciones de espacio impiden una discusión más profunda, muchos desarrolladores incorporan esta plantilla en una clase base de la que pueden heredar todas las demás páginas del sitio.
carga dinámica
Después de configurar el diseño del sitio, los desarrolladores crean controles de usuario web que se pueden cargar en las celdas de la tabla identificadas en el Listado A. Para poder cambiar el diseño dinámicamente, los desarrolladores pueden implementar un archivo XML personalizado que especifique en qué celdas de la tabla se cargarán los distintos controles. La posición y el contenido de las celdas de la tabla se pueden cambiar sin modificar la página ni escribir código adicional. En el Listado B se muestra un ejemplo de un archivo de configuración de este tipo.
Para leer el archivo y cargar su contenido, el desarrollador puede simplemente analizar el XML en la clase de código subyacente (o en la clase base que implementa la plantilla) para la página que usa la plantilla. Sin embargo, esto es menos eficiente que simplemente leer el archivo XML cuando se realizan cambios mediante la implementación de una clase de controlador de sección de configuración.
Aunque los detalles están más allá del alcance de este artículo, el controlador de la sección de configuración puede analizar el archivo XML en el Listado B, como se muestra en el Listado C, y colocar el contenido en una ArrayList que la clase del controlador de la sección expone en una propiedad compartida. (Consulte este artículo para obtener instrucciones sobre cómo crear un controlador de sección de configuración). Notará que ArrayList contiene objetos ControlPointer personalizados que indican la ruta al control de usuario web y el panel en el que debe cargarse.
Finalmente, la colección de objetos ControlPointer se puede iterar y cargar en la clase de código subyacente (o clase base) que implementa el diseño de la página. Como se muestra en el Listado D, la página puede llamar al método privado _arrangePage para leer la colección Controls de la clase Utils (la clase del controlador de la sección de configuración) y luego cargar dinámicamente los controles del usuario web.
usar caché
Cada control se puede almacenar en caché individualmente mediante el motor de caché ASP.NET. La forma más sencilla es colocar la directiva OutputCache en la parte superior de la página ASCX, como se muestra en el Listado E.
Los controles de usuario web se almacenarán en caché como HTML sin formato en lugar de volver a procesarse en cada carga. Como se mencionó anteriormente, esto puede mejorar el rendimiento cuando el control accede a la base de datos. El almacenamiento en caché es aún más importante cuando los controles acceden a los servicios web XML, porque generalmente no tiene control sobre el tiempo de respuesta y la disponibilidad del servicio web. El almacenamiento en caché le permite minimizar la dependencia de los proveedores de servicios.
En conclusión
Los controles de usuario web de ASP.NET se pueden utilizar como una estrategia de reutilización eficaz para aumentar la flexibilidad y la capacidad de mantenimiento de un sitio web. Deben ser componentes clave del conjunto de herramientas de cualquier desarrollador web.
