Veamos cómo podemos configure una aplicación web ASP.NET 2.0 para que soporte el uso de Web Parts. Los Web Parts proveen de un mecanismo muy sencillo para construir sitios web de manera modular y que se puedan personalizar dinámicamente, incluso al gusto del usuario final ofreciéndole una mejor experiencia. Imagina la idea de que el usuario final decida como desea que se le presente la información de una página, en qué orden y en qué posición los elementos de la misma serán acomodados y presentados. Este concepto es muy común en portales como Windows SharePoint Services y cada vez mas es adoptado en las aplicaciones de hoy en día como por ejemplo los Espacios de MSN o Windows Live que soportan este tipo de comportamiento.
En este pequeño post veremos como con la tecnología para el desarrollo web ASP.NET 2.0 podemos configurar rápidamente algunos componentes del .NET Framework 2.0 que nos permiten habilitar y programar Web Parts en nuestros formularios web.
Los sitios que soportan este concepto de personalización y de modularidad deben de permitir al usuario final la posibilidad de mostrar la pagina en distintos modos:
En el modo normal (Normal Mode) el Web Part Framework muestra la página en un estado normal sin la posibilidad alguna de edición o manipulación.
En el modo de edición (Edit Mode) el Web Part Framework permite al usuario seleccionar una sección en particular de la pagina para su completa edición como los títulos o colores del Web Part.
En el modo de diseno (Design Mode) el Web Part Framework permite a los usuario finales re ajustar el orden de los componentes modulares de la pagina.
En el modo catalogo (Catalog Mode) el Web Part Framework despliega una lista de secciones disponibles (Web PAts) que se pueden integrar a la página.
El primer concepto que debemos conocer para habilitar esta funcionalidad es el de zonas. Las zonas son las divisiones de una página susceptibles a mostrar o trabajar con web parts. Estas zonas las podemos declarar dentro de cualquier elemento HTML, normalmente utilizamos tablas para crear el esqueleto donde colocaremos nuestros web parts. Para que las zonas y web parts funcionen correctamente contamos con un control no visual llamado WebPartManager el cual administra los estados de las zonas y su contenido basado en un contexto de usuario. Este control tiene la capacidad de agregar o eliminar los elementos contenidos en cualquiera de las zonas y además la facultad de comunicar o pasar datos entre webparts con otros web parts de otra zona. Podemos declararlo en nuestro pagina aspx o podemos arrastrarlo del cuadro de herramientas de Visual Studio 2005.
<asp:WebPartManager ID="WebPartManager1" runat="server">
</asp:WebPartManager>
Un consejo valioso es que si estas utilizando Master Pages te recomiendo que mejor hagas esta declaración sobre la pagina maestra para replicar esta declaración en todos los formularios de la aplicación y en cualquier momento usar el comportamiento modular.
Antes de continuar con la declaración de las zonas, vamos a crear una tabla como la que se muestra a continuación:
<div style="text-align: center">
<table border="0" cellpadding="5" cellspacing="5" style="width: 800px; height: 400px">
<tr>
<td style="width: 100px">
</td>
<td style="width: 11px">
</td>
<td style="width: 100px">
</td>
</tr>
</table>
</div>
El siguiente paso es declarar nuestras zonas dentro de cada celda de la tabla creada. Utilizando el control WebPartZone de la caja de herramientas de Visual Studio 2005 podemos arrástralo a cada una de las celdas de nuestra tabla. Cabe mencionar que dentro de la zona es donde por fin podremos especificar aquellos controles que estamos acostumbrados a utilizar para programar nuestra aplicación. Tenemos que especificar dentro de nuestra control WebPartZone una sección llamada <ZoneTemplate> que será nuestra plantilla HTML donde podremos colocar los controles de nuestra página. En mi caso utilizare unos controles de usuario creados por mí. Están sencillo solamente muestra información en un control GridView.
Primero agregamos nuestras dos zonas quedando de la siguiente manera:
<table border="0" cellpadding="5" cellspacing="5" style="width: 800px; height: 400px">
<tr>
<td style="width: 100px; text-align: left;">
<asp:WebPartZone ID="WebPartZone1" runat="server" Height="400px" Width="390px">
<ZoneTemplate>
<uc1:EmployeeList ID="EmployeeList1" runat="server" />
</ZoneTemplate>
</asp:WebPartZone>
</td>
<td style="width: 11px">
</td>
<td style="width: 100px; text-align: left;">
<asp:WebPartZone ID="WebPartZone2" runat="server" Height="400px" Width="390px">
<ZoneTemplate>
<asp:Calendar ID="Calendar1" runat="server" Height="275px" Width="380px"></asp:Calendar>
</ZoneTemplate>
</asp:WebPartZone>
</td>
</tr>
</table>
Y para finalizar, tenemos que especificar algún mecanismo que nos permita a nuestra pagina cambiar de estado y podamos mover nuestros web parts de zona a zona. Para lograrlo simplemente vamos a agregar un control DropDownList fuera de las zonas y escribimos el siguiente código, no olvidemos seleccionar la propiedad AutoPostBack = True:
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
foreach (WebPartDisplayMode mode in this.WebPartManager1.SupportedDisplayModes)
{
string modeName = mode.Name;
this.DropDownList1.Items.Add(new ListItem(modeName, modeName));
}
}
}
protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
WebPartDisplayMode displayMode = this.WebPartManager1.SupportedDisplayModes[this.DropDownList1.SelectedValue.ToString()];
WebPartManager1.DisplayMode = displayMode;
}
Con este código simplemente se muestran los modos disponibles para nuestra página en una lista desplegable. Al seleccionar el modelo de diseño “Desing” nuestra página mostrará las zonas disponibles y permitirá mover de lugar cada uno de nuestros web parts.
